+ 
+
+
+ Setup for WebComponents
+ Setup the Puik Web Components library
+
+
+
+
+
+ 
+
+
+ Setup for Tailwind CSS
+ Setup the Puik Tailwind Preset library
diff --git a/docs/stories/docs/TailwindPreset.mdx b/docs/stories/docs/TailwindPreset.mdx
index f74044d1..7acaac12 100644
--- a/docs/stories/docs/TailwindPreset.mdx
+++ b/docs/stories/docs/TailwindPreset.mdx
@@ -4,19 +4,38 @@ import { Meta } from '@storybook/blocks'
# Tailwind CSS Preset
-If you want to use the Tailwind CSS preset used for this library you can
-import the configuration in your project
+Puik Tailwind Preset is a [Tailwind CSS](https://tailwindcss.com/) preset that aims to provide all the design tokens based on the PrestaShop Design System for all the PrestaShop ecosystem.
+
+## Prerequisites
+
+- Tailwind Css 3+
+
+## Installation
+
+Install the `@prestashopcorp/puik-tailwind-preset` package
+
+```shell
+# NPM
+$ npm install @prestashopcorp/puik-tailwind-preset --save
+
+# Yarn
+$ yarn add @prestashopcorp/puik-tailwind-preset
+
+# pnpm
+$ pnpm install @prestashopcorp/puik-tailwind-preset
+```
## Usage
+If you want to use the Tailwind CSS preset used for this library you can import the configuration in your project.
+
Require the puikTailwindPreset in your `tailwind.config.{js|ts}` file
-```js
-const { puikTailwindPreset } = require('@prestashopcorp/puik')
+```typescript
+const { puikTailwindPreset } = require('@prestashopcorp/puik-tailwind-preset')
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [puikTailwindPreset],
- content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
}
```
@@ -26,103 +45,127 @@ Congratulations you can now use all the tailwind classes used in the library
```js
{
- colors: {
- primary: {
- get DEFAULT() {
- return this['800']
- },
- 100: '#FFFFFF',
- 200: '#F7F7F7',
- 300: '#EEEEEE',
- 400: '#DDDDDD',
- 500: '#BBBBBB',
- 600: '#5E5E5E',
- 700: '#3F3F3D',
- 800: '#1D1D1B',
- },
- red: {
- get DEFAULT() {
- return this['500']
- },
- 50: '#FFE4E6',
- 100: '#FDBFBF',
- 300: '#D63F3C',
- 500: '#BA151A',
- 700: '#A41913',
+ colors: {
+ primary: {
+ get DEFAULT() {
+ return this['800'];
},
- purple: {
- get DEFAULT() {
- return this['500']
- },
- 50: '#F8F0F7',
- 500: '#DECDE7',
- 700: '#7B4FAC',
- },
- blue: {
- get DEFAULT() {
- return this['500']
- },
- get pressed() {
- return this['700']
- },
- 50: '#E8EDFD',
- 100: '#D1DCFC',
- 300: '#A2B8F9',
- 500: '#174EEF',
- 700: '#2942CC',
- },
- 'ocean-blue': {
- get DEFAULT() {
- return this['500']
- },
- 50: '#E4F4F8',
- 500: '#A4DBE8',
- 700: '#5C92AA',
+ 100: '#FFFFFF',
+ 200: '#F7F7F7',
+ 300: '#EEEEEE',
+ 400: '#DDDDDD',
+ 500: '#BBBBBB',
+ 600: '#5E5E5E',
+ 700: '#3F3F3D',
+ 800: '#1D1D1B'
+ },
+ red: {
+ get DEFAULT() {
+ return this['500'];
},
- yellow: {
- get DEFAULT() {
- return this['500']
- },
- 50: '#FFF5E5',
- 100: '#FFECCC',
- 300: '#FFD999',
- 500: '#ffA000',
+ 50: '#FFE4E6',
+ 100: '#FDBFBF',
+ 300: '#D63F3C',
+ 500: '#BA151A',
+ 700: '#A41913'
+ },
+ purple: {
+ get DEFAULT() {
+ return this['500'];
},
- amber: {
- get DEFAULT() {
- return this['500']
- },
- 100: '#FDF6DD',
- 500: '#F8E08E',
+ 50: '#F8F0F7',
+ 500: '#DECDE7',
+ 700: '#7B4FAC'
+ },
+ blue: {
+ get DEFAULT() {
+ return this['500'];
},
- green: {
- get DEFAULT() {
- return this['500']
- },
- get marketing() {
- return this['100']
- },
- 50: '#EAF8EF',
- 100: '#BDE9C9',
- 300: '#59AF70',
- 500: '#207F4B',
+ get pressed() {
+ return this['700'];
},
+ 50: '#E8EDFD',
+ 100: '#D1DCFC',
+ 300: '#A2B8F9',
+ 500: '#174EEF',
+ 700: '#2942CC'
},
- fontFamily: {
- primary: ['IBM Plex Sans', 'Verdana', 'Arial', 'sans-serif'],
- secondary: ['Prestafont', 'Verdana', 'Arial', 'sans-serif'],
- materialIcons: ['Material Icons Round'],
- },
- fontSize: {
- '4xl': '2rem',
+ 'ocean-blue': {
+ get DEFAULT() {
+ return this['500'];
+ },
+ 50: '#E4F4F8',
+ 500: '#A4DBE8',
+ 700: '#5C92AA'
},
- screens: {
- xs: '320px',
+ yellow: {
+ get DEFAULT() {
+ return this['500'];
+ },
+ 50: '#FFF5E5',
+ 100: '#FFECCC',
+ 300: '#FFD999',
+ 500: '#ffA000'
},
- boxShadow: {
- overlay: '0px 4px 8px rgba(0, 0, 0, 0.1)',
- sticky: '0px 6px 12px rgba(0, 0, 0, 0.1)',
+ amber: {
+ get DEFAULT() {
+ return this['500'];
+ },
+ 100: '#FDF6DD',
+ 500: '#F8E08E'
},
+ green: {
+ get DEFAULT() {
+ return this['500'];
+ },
+ get marketing() {
+ return this['100'];
+ },
+ 50: '#EAF8EF',
+ 100: '#BDE9C9',
+ 300: '#59AF70',
+ 500: '#207F4B'
+ }
+ },
+ fontFamily: {
+ primary: ['IBM Plex Sans', 'Verdana', 'Arial', 'sans-serif'],
+ secondary: ['Prestafont', 'Verdana', 'Arial', 'sans-serif'],
+ materialIcons: ['Material Icons Round']
+ },
+ fontSize: {
+ xs: ['0.75rem', { lineHeight: '1.125rem' }],
+ sm: ['0.875rem', { lineHeight: '1.25rem' }],
+ base: ['1rem', { lineHeight: '1.375rem' }],
+ lg: ['1.125rem', { lineHeight: '1.375rem' }],
+ xl: ['1.25rem', { lineHeight: '1.75rem' }],
+ '2xl': ['1.5rem', { lineHeight: '2rem' }],
+ '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+ '4xl': ['2rem', { lineHeight: '2.625rem' }],
+ '5xl': ['3rem', { lineHeight: '3.625rem' }]
+ },
+ screens: {
+ xs: '320px'
+ },
+ minHeight: {
+ sm: '1.75rem',
+ md: '2.25rem',
+ lg: '3rem'
+ },
+ opacity: {
+ overlay: '0.8'
},
+ boxShadow: {
+ DEFAULT: '0px 1px 3px 0px rgba(29, 29, 27, 0.2)',
+ sm: '0px 1px 2px 0px rgba(29, 29, 27, 0.05)',
+ md: '0px 4px 6px -1px rgba(29, 29, 27, 0.2)',
+ lg: '0px 10px 15px -3px rgba(29, 29, 27, 0.2)',
+ xl: '0px 20px 25px -5px rgba(29, 29, 27, 0.2)',
+ '2xl': '0px 25px 60px -12px rgba(29, 29, 27, 0.25)',
+ inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+ none: 'none',
+ overlay: '0px 12px 60px 0px rgba(0, 0, 0, 0.1)',
+ sticky: '0px 6px 12px rgba(0, 0, 0, 0.1)',
+ 'pop-modal': '0px 12px 24px rgba(0, 0, 0, 0.1)'
+ }
}
```
diff --git a/docs/stories/docs/VueJs.mdx b/docs/stories/docs/VueJs.mdx
index 3d15b4d1..7537e99b 100644
--- a/docs/stories/docs/VueJs.mdx
+++ b/docs/stories/docs/VueJs.mdx
@@ -2,49 +2,55 @@ import { Meta } from '@storybook/blocks'
-# VueJs components
+# VueJs Components
-### Prerequisites
+Puik Components is a Vue Components library that aims to provide a complete set of reusable components based on the PrestaShop Design System for all the PrestaShop ecosystem.
+
+## Prerequisites
- Node.js LTS is required.
+- Vue 3
+
+## Installation
-### Installation
+Install the `@prestashopcorp/puik-components` package
-```sh
-# chose your favorite package manager
+```shell
# NPM
-$ npm install @prestashopcorp/puik --save
+$ npm install @prestashopcorp/puik-components --save
# Yarn
-$ yarn add @prestashopcorp/puik
+$ yarn add @prestashopcorp/puik-components
# pnpm
-$ pnpm install @prestashopcorp/puik
+$ pnpm install @prestashopcorp/puik-components
```
## Usage
-#### Auto import (recommended)
+### Auto import using Puik Resolver (recommended)
-First you need to install `unplugin-vue-components` & `unplugin-auto-import`
+First you need to install `unplugin-vue-components`, `unplugin-auto-import` and the Puik resolver `@prestashopcorp/puik-resolver`
-```sh
-$ npm install -D unplugin-vue-components unplugin-auto-import
+```shell
+$ npm install -D unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver
# Yarn
-$ yarn add unplugin-vue-components unplugin-auto-import -D
+$ yarn add unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver -D
# pnpm
-$ pnpm install unplugin-vue-components unplugin-auto-import -D
+$ pnpm install unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver -D
```
Then add the code below in your vite.config file
-```typescript
+ℹ️ if you don't use Vite [follow this link](https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#installation)
+
+```js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
-import { PuikResolver } from '@prestashopcorp/puik'
+import { PuikResolver } from '@prestashopcorp/puik-resolver'
export default defineConfig({
plugins: [
@@ -63,10 +69,10 @@ export default defineConfig({
Import the vue component and the component css directly into your vue file
-```vue
+```js
@@ -83,7 +89,7 @@ Import the vue library and the css directly into your main.js / main.ts
```typescript
import { createApp } from 'vue'
import Puik from '@prestashopcorp/puik'
-import '@prestashopcorp/puik/dist/index.css'
+import '@prestashopcorp/puik-theme/index.css'
import App from './App.vue'
const app = createApp(App)
@@ -91,3 +97,14 @@ const app = createApp(App)
app.use(Puik)
app.mount('#app')
```
+
+If you are using Volar you need to add the global component type definitions to your `tsconfig.json`
+
+```json
+// tsconfig.json
+{
+ "compilerOptions": {
+ "types": ["@prestashopcorp/puik/global"]
+ }
+}
+```
diff --git a/docs/stories/docs/WebComponents.mdx b/docs/stories/docs/WebComponents.mdx
new file mode 100644
index 00000000..eba13054
--- /dev/null
+++ b/docs/stories/docs/WebComponents.mdx
@@ -0,0 +1,73 @@
+import { Meta } from '@storybook/blocks'
+
+
+
+# Web Components
+
+Puik Web Components is a library that aims to provide a complete set of reusable web components based on the PrestaShop Design System for all the PrestaShop ecosystem.
+
+## Prerequisites
+
+- Node.js LTS is required.
+
+## Installation
+
+```shell
+# NPM
+$ npm install @prestashopcorp/puik-web-components --save
+
+# Yarn
+$ yarn add @prestashopcorp/puik-web-components
+
+# pnpm
+$ pnpm install @prestashopcorp/puik-web-components
+```
+
+## Using Puik Web Components
+
+### Global registration
+
+To use all Puik web components in your application, you first need to import and initialize them. Here’s how you can do it:
+
+`import {
+ initAllWeb,
+ PuikExampleCe,
+ PuikAnotherExampleCe,
+ // other components...
+ } from @prestashopcorp/puik-web-components`
+
+Then, run the following function in your application:
+`initAllWeb();`
+
+For each component, it replaces 'ce' in the component's name with the provided suffix to form the `tagname`.
+If no suffix is provided, 'ce' is used as the default suffix
+
+Here’s how you can do it:
+
+```javascript
+// Initialize all web components without argument
+initAllWeb(); // The tagname for PuikExampleCe will default to 'puik-example-ce'
+
+// Initialize all web components with 'mySuffix' as the suffix
+initAllWeb('mySuffix'); // The tagname for PuikExampleCe will be 'puik-example-mySuffix'
+```
+
+### On-demand Registration
+
+If you only want to use a specific component in your application, you can import and initialize it individually.
+In this case you can name your web-component whatever you want.
+
+Here’s how you can do it:
+
+`import { initCe, PuikExampleCe } from @prestashopcorp/puik-web-components`
+
+Then, run the following function in your application:
+`initCe('your-tagname-here', PuikExampleCe);`
+
+Then, use your web-component:
+
+```html
+