feat: upgrade (#91)

* feat: run upgrade to v8.2

* upgrade further

* fix

.storybook/main.js

@@ -2,11 +2,11 @@ const path = require('path');
 
 /** @type{import("@storybook/react-webpack5").StorybookConfig} */
 export default {
-  stories: [
-    '../stories/**/*.stories.mdx',
-    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
+    '@storybook/addon-webpack5-compiler-babel',
+    '@chromatic-com/storybook',
+    '@storybook/addon-essentials',
     {
       name: '../preset.js',
       options: {
@@ -24,7 +24,6 @@ export default {
         ],
       },
     },
-    '@storybook/addon-essentials',
   ],
   framework: {
     name: '@storybook/react-webpack5',
@@ -45,9 +44,6 @@ export default {
       shouldRemoveUndefinedFromOptional: true,
     },
   },
-  docs: {
-    autodocs: true,
-  },
   webpackFinal: async (config) => {
     config.module?.rules?.push({
       test: /\.css$/,

.storybook/preview.js

@@ -2,7 +2,6 @@ import './global.css';
 
 const preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -13,6 +12,8 @@ const preview = {
       source: { excludeDecorators: true },
     },
   },
+
+  tags: ['autodocs'],
 };
 
 export default preview;

package.json

@@ -48,13 +48,15 @@
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@babel/runtime": "^7.23.7",
+    "@chromatic-com/storybook": "^2.0.2",
     "@expo/html-elements": "^0.5.1",
     "@react-native-community/eslint-config": "^3.2.0",
     "@react-native/babel-preset": "^0.73.19",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-mdx-gfm": "^8.1.5",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-webpack5": "^8.1.5",
+    "@storybook/addon-essentials": "^8.3.2",
+    "@storybook/addon-mdx-gfm": "^8.3.2",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/react": "^8.3.2",
+    "@storybook/react-webpack5": "^8.3.2",
     "@types/react-native-vector-icons": "^6.4.18",
     "auto": "^11.0.7",
     "autoprefixer": "^10.4.17",
@@ -68,7 +70,7 @@
     "eslint": "^8.56.0",
     "eslint-plugin-ft-flow": "^3.0.2",
     "eslint-plugin-prettier": "^5.1.2",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "expo-linear-gradient": "^12.5.0",
     "native-base": "^3.4.28",
     "nativewind": "^4.0.1",
@@ -88,7 +90,7 @@
     "react-native-vector-icons": "^10.0.3",
     "react-native-web": "^0.19.10",
     "rimraf": "^5.0.5",
-    "storybook": "^8.1.5",
+    "storybook": "^8.3.2",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "webpack": "^5.89.0",

stories/libraries/NativeBase/AppBar.stories.tsx

@@ -1,8 +1,9 @@
-import { ComponentMeta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
+
 import { AppBar } from './AppBar';
 import { NativeBaseProvider } from 'native-base';
 
-export default {
+const meta = {
   component: AppBar,
   decorators: [
     (Story) => (
@@ -11,8 +12,11 @@ export default {
       </NativeBaseProvider>
     ),
   ],
-} as ComponentMeta<typeof AppBar>;
+} satisfies Meta<typeof AppBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Basic = {
+export const Basic: Story = {
   args: {},
 };

stories/libraries/Paper/Card.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { StyleSheet, View } from 'react-native';
 import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
 import { Card } from './Card';
@@ -17,12 +17,14 @@ export default {
       </View>
     </PaperProvider>
   ),
-} as ComponentMeta<typeof Card>;
+} satisfies Meta<typeof Card>;
 
-export const Basic: ComponentStoryObj<typeof Card> = {
+export const Basic: StoryObj<typeof Card> = {
   args: {
     content:
       'Cillum sit aute cillum velit occaecat adipisicing aliquip sit ex quis ut dolor.',
     title: 'Card title',
+    onCancel: () => {},
+    onConfirm: () => {},
   },
 };

stories/libraries/Reanimated/Box.stories.tsx

@@ -1,10 +1,10 @@
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 import { Box } from './Box';
 
 export default {
   component: Box,
-} as ComponentMeta<typeof Box>;
+} as Meta<typeof Box>;
 
 export const Basic = {
   args: {},

stories/libraries/Svg/FavoriteIcon.stories.tsx

@@ -1,13 +1,16 @@
-import { ComponentMeta } from '@storybook/react';
-
+import { Meta, StoryObj } from '@storybook/react';
 import { FavoriteIcon } from './FavoriteIcon';
 
-export default {
+const meta = {
   title: 'libraries/SVG/FavoriteIcon',
   component: FavoriteIcon,
-} as ComponentMeta<typeof FavoriteIcon>;
+} satisfies Meta<typeof FavoriteIcon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Basic = {
+export const Basic: Story = {
   args: {
     color: '#000',
   },

stories/libraries/Svg/FolderIcon.stories.tsx

@@ -1,13 +1,17 @@
-import { ComponentMeta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { FolderIcon } from './FolderIcon';
 
-export default {
+const meta = {
   title: 'libraries/SVG/FolderIcon',
   component: FolderIcon,
-} as ComponentMeta<typeof FolderIcon>;
+} satisfies Meta<typeof FolderIcon>;
 
-export const Basic = {
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
   args: {
     color: '#000',
   },

stories/libraries/Svg/MenuIcon.stories.tsx

@@ -1,13 +1,17 @@
-import { ComponentMeta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { MenuIcon } from './MenuIcon';
 
-export default {
+const meta = {
   title: 'libraries/SVG/MenuIcon',
   component: MenuIcon,
-} as ComponentMeta<typeof MenuIcon>;
+} satisfies Meta<typeof MenuIcon>;
 
-export const Basic = {
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
   args: {
     color: '#000',
   },

stories/libraries/Svg/MoreIcon.stories.tsx

@@ -1,13 +1,17 @@
-import { ComponentMeta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { MoreIcon } from './MoreIcon';
 
-export default {
+const meta = {
   title: 'libraries/SVG/MoreIcon',
   component: MoreIcon,
-} as ComponentMeta<typeof MoreIcon>;
+} satisfies Meta<typeof MoreIcon>;
 
-export const Basic = {
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
   args: {
     color: '#000',
   },

stories/libraries/Svg/SearchIcon.stories.tsx

@@ -1,13 +1,17 @@
-import { ComponentMeta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { SearchIcon } from './SearchIcon';
 
-export default {
+const meta = {
   title: 'libraries/SVG/SearchIcon',
   component: SearchIcon,
-} as ComponentMeta<typeof SearchIcon>;
+} satisfies Meta<typeof SearchIcon>;
 
-export const Basic = {
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
   args: {
     color: '#000',
   },

stories/libraries/expo-linear-gradient/Gradient.stories.tsx

@@ -1,13 +1,17 @@
-import { ComponentMeta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Gradient } from './Gradient';
 
-export default {
+const meta = {
   title: 'libraries/Expo gradient/Gradient',
   component: Gradient,
-} as ComponentMeta<typeof Gradient>;
+} satisfies Meta<typeof Gradient>;
 
-export const Basic = {
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
   args: {
     text: 'Gradient example',
   },

stories/libraries/nativewind/ButtonWind.stories.tsx

@@ -14,5 +14,6 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {
   args: {
     label: 'Click me',
+    onPress: () => {},
   },
 };

stories/template/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { View, StyleSheet } from 'react-native';
 import { Button } from './Button';

stories/template/Header.stories.tsx

@@ -10,7 +10,18 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const LoggedIn: Story = {
-  args: { user: {} },
+  args: {
+    user: {},
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
 };
 
-export const LoggedOut: Story = { args: {} };
+export const LoggedOut: Story = {
+  args: {
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};

stories/template/Page.stories.tsx

@@ -1,10 +1,10 @@
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import * as HeaderStories from './Header.stories';
 import { Page } from './Page';
 
 export default {
   component: Page,
-} as ComponentMeta<typeof Page>;
+} as Meta<typeof Page>;
 
 export const LoggedIn = {
   args: HeaderStories.LoggedIn.args,