upgrade further

package.json

@@ -48,15 +48,15 @@
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@babel/runtime": "^7.23.7",
-    "@chromatic-com/storybook": "^1",
+    "@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.2.5",
-    "@storybook/addon-mdx-gfm": "^8.2.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.2.5",
-    "@storybook/react-webpack5": "^8.2.5",
+    "@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",
@@ -90,7 +90,7 @@
     "react-native-vector-icons": "^10.0.3",
     "react-native-web": "^0.19.10",
     "rimraf": "^5.0.5",
-    "storybook": "^8.2.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/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/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: () => {},
+  },
+};