Merge branch main into feat/update-storybook

README.md

@@ -43,23 +43,24 @@ $ pnpm install @prestashopcorp/puik
 
 #### Auto import (recommended)
 
-First you need to install `unplugin-vue-components`
+First you need to install `unplugin-vue-components` & `unplugin-auto-import`
 
 ```sh
-$ npm install -D unplugin-vue-components
+$ npm install -D unplugin-vue-components unplugin-auto-import
 
 # Yarn
-$ yarn add unplugin-vue-components -D
+$ yarn add unplugin-vue-components unplugin-auto-import -D
 
 # pnpm
-$ pnpm install unplugin-vue-components -D
+$ pnpm install unplugin-vue-components unplugin-auto-import -D
 ```
 
 Then add the code below in your vite.config file
 
 ```typescript
 import { defineConfig } from 'vite'
 import Components from 'unplugin-vue-components/vite'
+import AutoImport from 'unplugin-auto-import/vite'
 import { PuikResolver } from '@prestashopcorp/puik'
 
 export default defineConfig({
@@ -68,6 +69,9 @@ export default defineConfig({
     Components({
       resolvers: [PuikResolver()],
     }),
+    AutoImport({
+      resolvers: [PuikResolver()],
+    }),
   ],
 })
 ```

docs/.storybook/main.js

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 module.exports = {
   stories: [
-    '../stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
-    '../../packages/components/**/*.stories.@(js|jsx|ts|tsx)',
+    '../stories/*/**.@(js|jsx|ts|tsx|mdx)',
+    '../../packages/components/**/*.stories.@(js|jsx|ts|tsx|mdx)',
   ],
   addons: [
     '@storybook/addon-links',
@@ -22,7 +22,16 @@ module.exports = {
     }
     // eslint-disable-next-line
     config.plugins.push(require('unplugin-vue-define-options/vite')())
-    return config
+    return {
+      ...config,
+      optimizeDeps: {
+        ...config.optimizeDeps,
+        entries: [
+          '../stories/**/*.stories.mdx',
+          '../../packages/components/**/*.stories.@(js|jsx|ts|tsx)',
+        ],
+      },
+    }
   },
   docs: {
     autodocs: true,

docs/stories/Introduction.mdx → docs/stories/docs/Introduction.mdx

@@ -1,10 +1,10 @@
 import { Meta } from '@storybook/blocks'
 import { linkTo } from '@storybook/addon-links'
-import VueJsLogo from '../assets/img/Vue.js_Logo.png'
-import CssLogo from '../assets/img/css.svg'
-import Repo from '../assets/img/repo.svg'
-import GitHubLogo from '../assets/img/GitHub-Mark-64px.png'
-import FigmaLogo from '../assets/img/Figma-Icon.svg'
+import VueJsLogo from '../../assets/img/Vue.js_Logo.png'
+import CssLogo from '../../assets/img/css.svg'
+import Repo from '../../assets/img/repo.svg'
+import GitHubLogo from '../../assets/img/GitHub-Mark-64px.png'
+import FigmaLogo from '../../assets/img/Figma-Icon.svg'
 
 <Meta title="Docs/Introduction" />
 

docs/stories/VueJs.mdx → docs/stories/docs/VueJs.mdx

@@ -26,23 +26,24 @@ $ pnpm install @prestashopcorp/puik
 
 #### Auto import (recommended)
 
-First you need to install `unplugin-vue-components`
+First you need to install `unplugin-vue-components` & `unplugin-auto-import`
 
 ```sh
-$ npm install -D unplugin-vue-components
+$ npm install -D unplugin-vue-components unplugin-auto-import
 
 # Yarn
-$ yarn add unplugin-vue-components -D
+$ yarn add unplugin-vue-components unplugin-auto-import -D
 
 # pnpm
-$ pnpm install unplugin-vue-components -D
+$ pnpm install unplugin-vue-components unplugin-auto-import -D
 ```
 
 Then add the code below in your vite.config file
 
 ```typescript
 import { defineConfig } from 'vite'
 import Components from 'unplugin-vue-components/vite'
+import AutoImport from 'unplugin-auto-import/vite'
 import { PuikResolver } from '@prestashopcorp/puik'
 
 export default defineConfig({
@@ -51,6 +52,9 @@ export default defineConfig({
     Components({
       resolvers: [PuikResolver()],
     }),
+    AutoImport({
+      resolvers: [PuikResolver()],
+    }),
   ],
 })
 ```

packages/components/accordion/src/accordion.vue

@@ -21,7 +21,7 @@
       ></puik-icon>
       <div class="puik-accordion__header__content">
         <div class="puik-accordion__header__content__title">{{ title }}</div>
-        <div class="puik-accordion__header__content__sub-title">
+        <div v-if="subTitle" class="puik-accordion__header__content__sub-title">
           {{ subTitle }}
         </div>
       </div>

packages/components/config-provider/src/config-provider.ts

@@ -1,4 +1,4 @@
-import { defineComponent, renderSlot } from 'vue'
+import { defineComponent, renderSlot, type ExtractPropTypes } from 'vue'
 import { buildProps } from '@puik/utils'
 import { provideGlobalConfig } from '@puik/hooks'
 
@@ -17,6 +17,8 @@ export const configProviderProps = buildProps({
   },
 } as const)
 
+export type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>
+
 export default defineComponent({
   name: 'PuikConfigProvider',
   props: configProviderProps,

packages/components/index.ts

@@ -19,5 +19,9 @@ export * from './button-group'
 export * from './skeleton-loader'
 export * from './breadcrumb'
 export * from './modal'
+export * from './snackbar'
+export * from './table'
 export * from './spinner-loader'
 export * from './menu'
+export * from './sidebar'
+export * from './textarea'

packages/components/modal/src/modal.ts

@@ -27,7 +27,8 @@ export type ModalSizeType = `${PuikModalSize}`
 export const modalProps = buildProps({
   title: {
     type: String,
-    required: true,
+    required: false,
+    default: undefined,
   },
   mainButtonText: {
     type: String,

packages/components/modal/src/modal.vue

@@ -7,7 +7,10 @@
   >
     <div class="puik-modal__dialogPanelContainer">
       <DialogPanel class="puik-modal__dialogPanelContainer__dialogPanel">
-        <header class="puik-modal__dialogPanelContainer__dialogPanel__header">
+        <header
+          v-if="title"
+          class="puik-modal__dialogPanelContainer__dialogPanel__header"
+        >
           <puik-icon
             v-if="titleIcon || PuikModalVariant.DESTRUCTIVE === variant"
             class="puik-modal__dialogPanelContainer__dialogPanel__header__icon"

packages/components/modal/stories/modal.stories.ts

@@ -58,18 +58,50 @@ export default {
     title: {
       description: 'Set the modal title',
       control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'undefined',
+        },
+      },
     },
     mainButtonText: {
       description: 'Set the text of the main button',
       control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: undefined,
+        },
+      },
     },
     secondButtonText: {
       description: 'Set the text of the secondary button',
       control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: undefined,
+        },
+      },
     },
     sideButtonText: {
       description: 'Set the text of the side button',
       control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: undefined,
+        },
+      },
     },
     variant: {
       description: 'Set the style of the modal (use the PuikModalVariant enum)',
@@ -123,6 +155,9 @@ export enum PuikModalSize {
       description: 'Tell if the modal is open or not',
       control: 'boolean',
       table: {
+        type: {
+          summary: 'boolean',
+        },
         defaultValue: {
           summary: false,
         },
@@ -131,6 +166,14 @@ export enum PuikModalSize {
     titleIcon: {
       description: 'The icon name of the modal (top left corner)',
       control: 'text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: undefined,
+        },
+      },
     },
     default: {
       description: 'Modal content',

packages/components/modal/test/modal.spec.ts

@@ -41,6 +41,8 @@ describe('Modal tests', () => {
     wrapper.find(
       '.puik-modal__dialogPanelContainer__dialogPanel__footer__button--side'
     )
+  const findHeader = () =>
+    wrapper.find('.puik-modal__dialogPanelContainer__dialogPanel__header')
 
   const homeTitleIcon = 'home'
 
@@ -219,4 +221,14 @@ describe('Modal tests', () => {
     findSecondaryButton().trigger('click')
     expect(wrapper.emitted('button-second')).toBeTruthy()
   })
+
+  it('expect to not have header', async () => {
+    await factory({
+      mainButtonText: 'Awesome main',
+      secondButtonText: 'Awesome second',
+      isOpen: true,
+    })
+
+    expect(findHeader().exists()).toBeFalsy()
+  })
 })

packages/components/sidebar-group-item/style/css.ts

@@ -0,0 +1,5 @@
+import '@puik/components/base/style/css'
+import '@puik/theme/puik-sidebar-group-item.css'
+import '@puik/theme/puik-accordion.css'
+import '@puik/theme/puik-button.css'
+import '@puik/theme/puik-icon.css'

packages/components/sidebar-group-item/style/index.ts

@@ -0,0 +1,5 @@
+import '@puik/components/base/style'
+import '@puik/theme/src/sidebar-group-item.scss'
+import '@puik/theme/src/accordion.scss'
+import '@puik/theme/src/button.scss'
+import '@puik/theme/src/icon.scss'

packages/components/sidebar-item/style/css.ts

@@ -0,0 +1,3 @@
+import '@puik/components/base/style/css'
+import '@puik/theme/puik-sidebar-item.css'
+import '@puik/theme/puik-button.css'

packages/components/sidebar-item/style/index.ts

@@ -0,0 +1,3 @@
+import '@puik/components/base/style'
+import '@puik/theme/src/sidebar-item.scss'
+import '@puik/theme/src/button.scss'

packages/components/sidebar-title/style/css.ts

@@ -0,0 +1,2 @@
+import '@puik/components/base/style/css'
+import '@puik/theme/puik-sidebar-title.css'

packages/components/sidebar-title/style/index.ts

@@ -0,0 +1,2 @@
+import '@puik/components/base/style'
+import '@puik/theme/src/sidebar-title.scss'

packages/components/sidebar/index.ts

@@ -0,0 +1,18 @@
+import { withInstall } from '@puik/utils'
+
+import Sidebar from './src/sidebar.vue'
+import SidebarGroupItem from './src/sidebar-group-item.vue'
+import SidebarItem from './src/sidebar-item.vue'
+import SidebarTitle from './src/sidebar-title.vue'
+
+export const PuikSidebar = withInstall(Sidebar)
+export const PuikSidebarGroupItem = withInstall(SidebarGroupItem)
+export const PuikSidebarItem = withInstall(SidebarItem)
+export const PuikSidebarTitle = withInstall(SidebarTitle)
+
+export default PuikSidebar
+
+export * from './src/sidebar'
+export * from './src/sidebar-item'
+export * from './src/sidebar-group-item'
+export * from './src/sidebar-title'

packages/components/sidebar/src/sidebar-group-item.ts

@@ -0,0 +1,30 @@
+import { buildProps } from '@puik/utils'
+import type { ExtractPropTypes } from 'vue'
+import type SidebarGroupItem from './sidebar-group-item.vue'
+
+export const sidebarGroupItemProps = buildProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+} as const)
+
+export type SidebarGroupItemProps = ExtractPropTypes<
+  typeof sidebarGroupItemProps
+>
+
+export type SidebarGroupItemInstance = InstanceType<typeof SidebarGroupItem>