Merge pull request #515 from PayButton/chore/update-react-and-storybook

chore: fix Storybook issue by updating React and Storybook to v7.x

Author: Klakurka

react/.storybook/main.ts

@@ -1,12 +1,22 @@
-module.exports = {
-  "stories": [
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: [
     "../lib/**/*.stories.mdx",
     "../lib/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  "addons": [
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-a11y",
-    "@storybook/preset-create-react-app",
-  ]
-};
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+
+export default config;

react/Dockerfile

@@ -3,8 +3,8 @@ FROM node:16-alpine
 WORKDIR /app
 
 COPY package*.json ./
-RUN yarn install && yarn build --ignore-scripts
+RUN npm install
 COPY . .
 
-CMD chown node: -R node_modules && yarn storybook
+CMD chown node: -R node_modules && npm run storybook
 

react/lib/components/Button/Button.stories.tsx

@@ -1,14 +1,14 @@
-import { Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { ThemeName } from '../../themes';
-import Button, { ButtonProps } from './Button';
+import Button from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   title: 'Button',
   component: Button,
   decorators: [
-    (Story: Story): React.ReactNode => (
+    (Story) => (
       <div style={{ margin: 'auto', maxWidth: 400 }}>
         <Story />
       </div>
@@ -22,13 +22,16 @@ export default {
   },
 };
 
-const Template: Story<ButtonProps> = props => <Button {...props} />;
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Default: Story = {
+  args: {},
+};
 
-export const OrangeTheme = Template.bind({});
-OrangeTheme.args = {
-  theme: ThemeName.ORANGE,
-  animation: 'invert',
+export const OrangeTheme: Story = {
+  args: {
+    theme: ThemeName.ORANGE,
+    animation: 'invert',
+  },
 };