Merge pull request #148 from PrestaShopCorp/feat/update-storybook

Feat/update storybook
PrestaShopCorp · Jul 31, 2023 · 8aecf06 · 8aecf06
2 parents 1637b1c + 1e7ad98
commit 8aecf06
Show file tree

Hide file tree

Showing 43 changed files with 6,286 additions and 9,477 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -48,3 +48,4 @@ jobs:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           workingDir: './docs'
+          buildScriptName: build
diff --git a/_templates/component/new/packages/components/my-component/stories/story.ejs.t b/_templates/component/new/packages/components/my-component/stories/story.ejs.t
@@ -2,14 +2,14 @@
 to: packages/components/<%= h.changeCase.param(name) %>/stories/<%= h.changeCase.param(name) %>.stories.ts
 ---
 import Puik<%= h.changeCase.pascal(name) %> from './../src/<%= h.changeCase.param(name) %>.vue'
-import type { Meta, Story, Args } from '@storybook/vue3'
+import type { Meta, StoryFn, Args } from '@storybook/vue3'
 
 export default {
   title: 'Components/<%= h.changeCase.pascal(name) %>',
-  component: <%= h.changeCase.pascal(name) %>,
+  component: Puik<%= h.changeCase.pascal(name) %>,
 } as Meta
 
-const Template: Story = (args: Args) => ({
+const Template: StoryFn = (args: Args) => ({
   components: {
     Puik<%= h.changeCase.pascal(name) %>,
   },
@@ -19,17 +19,19 @@ const Template: Story = (args: Args) => ({
   template: `<puik-<%= h.changeCase.param(name) %>></puik-<%= h.changeCase.param(name) %>>`,
 })
 
-export const Default = Template.bind({})
-Default.args = {}
-Default.parameters = {
-  docs: {
-    source: {
-      code: `
-      <!--VueJS Snippet-->
-
-      <!--HTML/CSS Snippet-->
-      `,
-      language: 'html',
+export const Default = {
+  render: Template,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+        <!--VueJS Snippet-->
+
+        <!--HTML/CSS Snippet-->
+        `,
+        language: 'html',
+      },
     },
   },
 }
diff --git a/docs/.storybook/main.js b/docs/.storybook/main.js
@@ -1,16 +1,21 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 module.exports = {
   stories: [
-    '../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+    '../stories/*/**.@(js|jsx|ts|tsx|mdx)',
     '../../packages/components/**/*.stories.@(js|jsx|ts|tsx|mdx)',
   ],
+  core: {
+    disableTelemetry: true,
+  },
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
   ],
-  framework: '@storybook/vue3',
-  core: { builder: '@storybook/builder-vite' },
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
   async viteFinal(config) {
     config.resolve.dedupe = ['@storybook/client-api']
     config.css = {
@@ -31,4 +36,7 @@ module.exports = {
       },
     }
   },
+  docs: {
+    autodocs: true,
+  },
 }
diff --git a/docs/package.json b/docs/package.json
@@ -4,17 +4,21 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "dev": "start-storybook -p 6006",
-    "build": "build-storybook"
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-vite": "0.3.0",
-    "@storybook/vue3": "^6.5.16",
+    "@storybook/addon-a11y": "^7.0.24",
+    "@storybook/addon-actions": "^7.0.24",
+    "@storybook/addon-essentials": "^7.0.24",
+    "@storybook/addon-links": "^7.0.24",
+    "@storybook/blocks": "^7.0.24",
+    "@storybook/vue3": "^7.0.24",
+    "@storybook/vue3-vite": "^7.0.24",
     "@vitejs/plugin-vue": "^4.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.24",
     "vite": "^4.2.1"
   },
   "dependencies": {

diff --git a/docs/stories/Css.stories.mdx → docs/stories/docs/Css.mdx b/docs/stories/Css.stories.mdx → docs/stories/docs/Css.mdx
@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/addon-docs'
+import { Meta } from '@storybook/blocks'
 
-<Meta title="Docs/Css Components" />
+<Meta title="Docs/CSS Components" />
 
 # Css Components
 
@@ -9,7 +9,7 @@ styles used in the VueJs component library.
 
 ## Usage
 
-1. Include the CSS in your HTML
+1.  Include the CSS in your HTML
 
 ```html
 <link
@@ -18,7 +18,7 @@ styles used in the VueJs component library.
 />
 ```
 
-2. Add the classes in your HTML
+2.  Add the classes in your HTML
 
 ```html
 <button class="puik-button puik-button--primary">Example button</button>

diff --git a/docs/stories/Introduction.stories.mdx → docs/stories/docs/Introduction.mdx b/docs/stories/Introduction.stories.mdx → docs/stories/docs/Introduction.mdx
@@ -1,14 +1,15 @@
-import { Meta } from '@storybook/addon-docs'
+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" />
 
-<style>{`
+<style>
+  {`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -62,7 +63,8 @@ import FigmaLogo from '../assets/img/Figma-Icon.svg'
   }
 
 
-`}</style>
+  `}
+</style>
 
 # Puik
 
@@ -73,68 +75,71 @@ This library provides two ways of using the design system in your project, the f
 <div className="subheading">Getting Started</div>
 
 <div className="grid md:grid-cols-2 gap-4">
-  <div
-    className="link-item cursor-pointer"
-    onClick={linkTo('Docs/VueJs Components')}
-  >
+  <div className="link-item cursor-pointer" onClick={linkTo('Docs/VueJs Components')}>
     <img src={VueJsLogo} alt="VueJs Components" />
+
     <span>
       <strong>Setup For VueJS</strong>
       Setup the library for a usage with VueJs
     </span>
+
   </div>
-  <div
-    className="link-item cursor-pointer"
-    onClick={linkTo('Docs/VueJs Components')}
-  >
+
+  <div className="link-item cursor-pointer" onClick={linkTo('Docs/VueJs Components')}>
     <img src={CssLogo} alt="Css Components" />
+
     <span>
       <strong>Setup for other language/framework</strong>
       Setup the library with another language or framework
     </span>
+
   </div>
 </div>
 
 <div className="subheading">Explore</div>
 
 <div className="grid md:grid-cols-2 gap-4">
-  <div
-    className="link-item cursor-pointer"
-    onClick={linkTo('Components/Alert')}
-  >
+  <div className="link-item cursor-pointer" onClick={linkTo('Components/Alert')}>
     <img src={VueJsLogo} alt="VueJs Components" />
+
     <span>
       <strong>Components Docs</strong>
       Access the components documentation
     </span>
+
   </div>
 </div>
+
 <div className="subheading">Learn</div>
 
 <div className="grid md:grid-cols-2 gap-4">
   <a className="link-item" target="_blank">
     <img src={Repo} alt="repo" />
+
     <span>
       <strong>Design System documentation</strong>
       Configure, customize, and extend
     </span>
+
   </a>
+
   <a className="link-item" target="_blank">
     <img src={FigmaLogo} alt="direction" />
+
     <span>
       <strong>Figma UI Kit</strong>
       Access the Figma UI Kit of the PrestaShop Design System
     </span>
+
   </a>
-  <a
-    className="link-item"
-    href="https://github.com/PrestaShopCorp/puik"
-    target="_blank"
-  >
+
+  <a className="link-item" href="https://github.com/PrestaShopCorp/puik" target="_blank">
     <img src={GitHubLogo} alt="code" />
+
     <span>
       <strong>GitHub project</strong>
       View the source code and add issues
     </span>
+
   </a>
 </div>
diff --git a/docs/stories/TailwindPreset.stories.mdx → docs/stories/docs/TailwindPreset.mdx b/docs/stories/TailwindPreset.stories.mdx → docs/stories/docs/TailwindPreset.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs'
+import { Meta } from '@storybook/blocks'
 
 <Meta title="Docs/Tailwind CSS Preset" />
 

diff --git a/docs/stories/VueJs.stories.mdx → docs/stories/docs/VueJs.mdx b/docs/stories/VueJs.stories.mdx → docs/stories/docs/VueJs.mdx
@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/addon-docs'
+import { Meta } from '@storybook/blocks'
 
-<Meta title="Docs/VueJs Components" />
+<Meta title="Docs/VueJS Components" />
 
 # VueJs components
 

diff --git a/docs/stories/styles/Grid.stories.ts b/docs/stories/styles/Grid.stories.ts
@@ -1,51 +1,54 @@
 import { PuikCard } from '@puik/components'
-import type { Story, Meta } from '@storybook/vue3'
+import type { StoryFn, StoryObj, Meta } from '@storybook/vue3'
 
 export default {
   title: 'Styles/Grid',
 } as Meta
 
-function generateStory(defaultViewport?: string) {
-  const htmlTemplate = `<div class="puik-grid">
-    <puik-card>1 col</puik-card>
-    <puik-card>1 col</puik-card>
-    <puik-card>1 col</puik-card>
-    <puik-card>1 col</puik-card>
-    <puik-card>1 col</puik-card>
-    <puik-card>1 col</puik-card>
-    <puik-card class="col-span-2">2 col</puik-card>
-    <puik-card class="col-span-2">2 col</puik-card>
-    <puik-card class="col-span-2">2 col</puik-card>
-    <puik-card class="col-span-3">3 col</puik-card>
-    <puik-card class="col-span-3">3 col</puik-card>
-    <puik-card class="col-span-3">3 col</puik-card>
-    <puik-card class="col-span-3">3 col</puik-card>
-    <puik-card class="col-span-4">4 col</puik-card>
-    <puik-card class="col-span-4">4 col</puik-card>
-    <puik-card class="col-span-4">4 col</puik-card>
-  </div>`
+const htmlTemplate = `<div class="puik-grid">
+  <puik-card>1 col</puik-card>
+  <puik-card>1 col</puik-card>
+  <puik-card>1 col</puik-card>
+  <puik-card>1 col</puik-card>
+  <puik-card>1 col</puik-card>
+  <puik-card>1 col</puik-card>
+  <puik-card class="col-span-2">2 col</puik-card>
+  <puik-card class="col-span-2">2 col</puik-card>
+  <puik-card class="col-span-2">2 col</puik-card>
+  <puik-card class="col-span-3">3 col</puik-card>
+  <puik-card class="col-span-3">3 col</puik-card>
+  <puik-card class="col-span-3">3 col</puik-card>
+  <puik-card class="col-span-3">3 col</puik-card>
+  <puik-card class="col-span-4">4 col</puik-card>
+  <puik-card class="col-span-4">4 col</puik-card>
+  <puik-card class="col-span-4">4 col</puik-card>
+</div>`
 
-  const Template: Story = () => ({
-    components: { PuikCard },
-    template: htmlTemplate,
-  })
+const Template: StoryFn = () => ({
+  components: { PuikCard },
+  template: htmlTemplate,
+})
 
-  const Story: Story = Template.bind({})
-  Story.parameters = {
-    controls: { hideNoControlsWarning: true },
-    docs: {
-      source: {
-        code: htmlTemplate,
-        language: 'html',
+function generateStory(defaultViewport?: string): StoryObj {
+  const Story: StoryObj = {
+    render: Template,
+    parameters: {
+      controls: { hideNoControlsWarning: true },
+      docs: {
+        source: {
+          code: htmlTemplate,
+          language: 'html',
+        },
       },
     },
   }
 
-  if (defaultViewport) Story.parameters.viewport = { defaultViewport }
+  if (defaultViewport && Story.parameters)
+    Story.parameters.viewport = { defaultViewport }
 
   return Story
 }
 
-export const Lg = generateStory()
+export const Lg = generateStory('lg')
 export const Md = generateStory('md')
 export const Sm = generateStory('sm')