Upgrade to Storybook 7.4.0

yannbf · Sep 7, 2023 · 8c71122 · 8c71122
1 parent 19e23cf
commit 8c71122
Show file tree

Hide file tree

Showing 12 changed files with 1,518 additions and 990 deletions.
diff --git a/package.json b/package.json
@@ -52,17 +52,17 @@
   "devDependencies": {
     "@babel/core": "^7.14.6",
     "@ladle/react": "^2.4.5",
-    "@storybook/addon-a11y": "7.1.0",
-    "@storybook/addon-coverage": "^0.0.8",
-    "@storybook/addon-designs": "^7.0.1",
-    "@storybook/addon-essentials": "7.1.0",
-    "@storybook/addon-interactions": "7.1.0",
-    "@storybook/addon-storyshots": "7.1.0",
-    "@storybook/blocks": "7.1.0",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/react": "7.1.0",
-    "@storybook/react-vite": "7.1.0",
-    "@storybook/test-runner": "0.11.0",
+    "@storybook/addon-a11y": "7.4.0",
+    "@storybook/addon-coverage": "^0.0.9",
+    "@storybook/addon-designs": "^7.0.5",
+    "@storybook/addon-essentials": "7.4.0",
+    "@storybook/addon-interactions": "7.4.0",
+    "@storybook/addon-storyshots": "7.4.0",
+    "@storybook/blocks": "7.4.0",
+    "@storybook/jest": "^0.2.2",
+    "@storybook/react": "7.4.0",
+    "@storybook/react-vite": "7.4.0",
+    "@storybook/test-runner": "0.13.0",
     "@storybook/testing-library": "^0.2.0",
     "@storybook/testing-react": "2.0.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -92,7 +92,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.13",
     "husky": ">=6",
     "istanbul": "^0.4.5",
     "jest-junit": "^13.2.0",
@@ -103,8 +103,8 @@
     "prettier": "^2.5.0",
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.2",
-    "storybook": "7.1.0",
-    "storybook-mobile": "^1.0.1",
+    "storybook": "7.4.0",
+    "storybook-mobile-addon": "^2.0.2",
     "vite": "^4.0.0",
     "vite-plugin-svgr": "^2.2.2",
     "vite-tsconfig-paths": "^3.5.2",

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -74,7 +74,7 @@ type DefaultProps = {
   /**
    * Does the button have an icon?
    */
-  children?: React.ReactNode | string
+  children?: string
   /**
    * Optional click handler
    */
@@ -94,7 +94,7 @@ export const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
   icon,
   iconSize,
   ...props
-}) => {
+}: ButtonProps) => {
   const { color } = useTheme()
 
   return (

diff --git a/src/components/Icon/Icon.stories.mdx → src/components/Icon/Icon.mdx b/src/components/Icon/Icon.stories.mdx → src/components/Icon/Icon.mdx
diff --git a/src/components/RestaurantCard/RestaurantCard.stories.tsx b/src/components/RestaurantCard/RestaurantCard.stories.tsx
@@ -6,7 +6,12 @@ import { RestaurantCard } from './RestaurantCard'
 
 const meta = {
   component: RestaurantCard,
-  tags: ['autodocs'],
+  parameters: {
+    design: {
+      type: 'figspec',
+      url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1091-2986&mode=design&t=PGeoMU7t8HOFToQL-4',
+    },
+  },
 } satisfies Meta<typeof RestaurantCard>
 
 export default meta
@@ -21,8 +26,10 @@ export const Default: Story = {
 }
 
 export const New: Story = {
-  render: (args) => <RestaurantCard {...args} isNew />,
-  args: Default.args,
+  args: {
+    ...Default.args,
+    isNew: true,
+  },
 }
 
 export const Closed: Story = {

diff --git a/src/components/Spinner/Spinner.stories.tsx b/src/components/Spinner/Spinner.stories.tsx
@@ -8,6 +8,10 @@ export default {
   parameters: {
     layout: 'fullscreen',
     chromatic: { delay: 1200 },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=12703-2132&mode=design&t=PGeoMU7t8HOFToQL-4',
+    },
   },
 } as ComponentMeta<typeof Spinner>
 

diff --git a/src/pages/CategoryDetailPage/CategoryDetailPage.stories.tsx b/src/pages/CategoryDetailPage/CategoryDetailPage.stories.tsx
@@ -13,6 +13,10 @@ export default {
   parameters: {
     layout: 'fullscreen',
     deeplink: { route: '/categories/burgers', path: '/categories/:id' },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=206-573&mode=design&t=PGeoMU7t8HOFToQL-4',
+    },
   },
   decorators: [withDeeplink],
 } as ComponentMeta<typeof CategoryDetailPage>
@@ -39,4 +43,8 @@ Missing.parameters = {
   msw: {
     handlers: [rest.get(BASE_URL, (req, res, ctx) => res(ctx.json([])))],
   },
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=426-1402&mode=design&t=PGeoMU7t8HOFToQL-4',
+  },
 }
diff --git a/src/pages/CategoryListPage/CategoryListPage.stories.tsx b/src/pages/CategoryListPage/CategoryListPage.stories.tsx
@@ -7,6 +7,10 @@ export default {
   component: CategoryListPage,
   parameters: {
     layout: 'fullscreen',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=169-365&mode=design&t=PGeoMU7t8HOFToQL-4',
+    },
   },
 } as ComponentMeta<typeof CategoryListPage>
 

diff --git a/src/pages/CheckoutPage/CheckoutPage.stories.tsx b/src/pages/CheckoutPage/CheckoutPage.stories.tsx
@@ -7,6 +7,10 @@ export default {
   component: CheckoutPage,
   parameters: {
     layout: 'fullscreen',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=426-3291&mode=design&t=PGeoMU7t8HOFToQL-4',
+    },
   },
 } as ComponentMeta<typeof CheckoutPage>
 

diff --git a/src/pages/CheckoutPage/components/registration-form/MultiStepForm.stories.tsx b/src/pages/CheckoutPage/components/registration-form/MultiStepForm.stories.tsx
@@ -5,6 +5,12 @@ import { MultiStepForm } from './MultiStepForm'
 export default {
   title: 'Pages/CheckoutPage/Components/MultiStepForm',
   component: MultiStepForm,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=426-3309&mode=design&t=PGeoMU7t8HOFToQL-4',
+    },
+  },
 } as ComponentMeta<typeof MultiStepForm>
 
 const Template: ComponentStory<typeof MultiStepForm> = () => <MultiStepForm />

diff --git a/src/pages/HomePage/components/AwardWinningSection/AwardWinningSection.stories.tsx b/src/pages/HomePage/components/AwardWinningSection/AwardWinningSection.stories.tsx
@@ -7,6 +7,10 @@ export default {
   component: AwardWinningSection,
   parameters: {
     layout: 'fullscreen',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1682-4910&mode=design&t=PGeoMU7t8HOFToQL-4',
+    },
   },
 } as ComponentMeta<typeof AwardWinningSection>
 

diff --git a/src/pages/HomePage/components/Banner/Banner.stories.tsx b/src/pages/HomePage/components/Banner/Banner.stories.tsx
@@ -7,6 +7,10 @@ export default {
   component: Banner,
   parameters: {
     layout: 'fullscreen',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1690-5067&mode=design&t=PGeoMU7t8HOFToQL-4',
+    },
   },
 } as ComponentMeta<typeof Banner>