chore: storybook updated to version 7

README.md

@@ -111,10 +111,8 @@ In case you want to add react-navigation example code in the project:
 
 - `Storybook` - you can design and develop individual React Native components on a device & simulator.
   - In order to run storybook : `yarn storybook`
-  - `Windows issues:` Please note that npm uses cmd by default and that doesn't support command substitution, so if you want to leverage that,then you need to update your .npmrc to set the script-shell to powershell. [Learn more](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729)
-  - If you add new stories you'll need to either have the watcher running or run the stories loader.
-    - To update the stories one time on mobile devices: `yarn storybook-generate`
-    - To listen to the stories files for updates on mobile devices: `yarn storybook-watch`
+  - `Windows issues:` Please note that npm uses cmd by default and that doesn't support command substitution, so if you want to leverage that, then you need to update your .npmrc to set the script-shell to powershell. [Learn more](https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729)
+  - To generate the initial set of stories for a very first time: `yarn storybook-generate`
 
 #### `State Management`
 

baseProject/config/jest/jestSetup.ts

@@ -2,7 +2,4 @@ import 'react-native-gesture-handler/jestSetup';
 jest.mock('@react-native-async-storage/async-storage', () =>
   require('@react-native-async-storage/async-storage/jest/async-storage-mock'),
 );
-{{#if hasStorybook}}
-jest.mock('@storybook/addon-actions/dist/modern/preset/addArgs', () => jest.fn());
-{{/if}}
 jest.useFakeTimers();

baseProject/config/storybook/gluestackStories/Button.stories.ts

@@ -1,6 +1,7 @@
 import { ExampleGluestackButton } from './Button';
+import type { Meta, StoryObj } from '@storybook/react';
 
-const MyButtonMeta = {
+const meta = {
   title: 'Button',
   component: ExampleGluestackButton,
   argTypes: {
@@ -13,36 +14,38 @@ const MyButtonMeta = {
     isDisabled: false,
     isFocusVisible: false,
   },
-};
+} satisfies Meta<typeof ExampleGluestackButton>;
+
+export default meta;
 
-export default MyButtonMeta;
+type Story = StoryObj<typeof meta>;
 
-export const Primary = {
+export const Primary: Story = {
   args: {
     action: 'primary',
     variant: 'solid',
     label: 'Button',
   },
 };
 
-export const Secondary = {
+export const Secondary: Story = {
   args: {
     action: 'secondary',
     variant: 'outline',
     label: 'Button',
   },
 };
 
-export const Large = {
+export const Large: Story = {
   args: {
     size: 'lg',
     label: 'Button',
   },
 };
 
-export const Small = {
+export const Small: Story = {
   args: {
     size: 'sm',
     label: 'Button',
   },
-};
+};

baseProject/config/storybook/gluestackStories/Checkbox.stories.ts

@@ -1,36 +1,42 @@
 import { ExampleGluestackCheckbox } from './Checkbox';
+import type { Meta, StoryObj } from '@storybook/react';
 
-const MyCheckboxMeta = {
+const meta = {
   title: 'Checkbox',
   component: ExampleGluestackCheckbox,
+  argTypes: {
+    onPress: { action: 'checkbox is ticked!' },
+  },
   args: {
-    isInvalide: false,
-    isDisabled: false,
     size: 'md',
     label: 'Default',
   },
-};
+} satisfies Meta<typeof ExampleGluestackCheckbox>;
+
+export default meta;
 
-export default MyCheckboxMeta;
+type Story = StoryObj<typeof meta>;
 
 export const Basic = {};
 
-export const Default = {
+export const Default: Story = {
   args: {
     value: 'change',
     label: 'Checkbox',
   },
 };
 
-export const Large = {
+export const Large: Story = {
   args: {
+    value: 'change',
     size: 'lg',
     label: 'Checkbox',
   },
 };
 
-export const Small = {
+export const Small: Story = {
   args: {
+    value: 'change',
     size: 'sm',
     label: 'Checkbox',
   },

baseProject/config/storybook/gluestackStories/Checkbox.tsx

@@ -7,6 +7,7 @@ interface ExampleGluestackCheckboxProps {
   label?: string;
   isInvalid?: boolean;
   isDisabled?: boolean;
+  onPress?: () => void;
 }
 
 export const ExampleGluestackCheckbox = ({
@@ -15,13 +16,22 @@ export const ExampleGluestackCheckbox = ({
   label = '',
   isInvalid,
   isDisabled,
+  onPress,
 }: ExampleGluestackCheckboxProps) => {
   return (
-    <Checkbox value={value} size={size} isInvalid={isInvalid} isDisabled={isDisabled} aria-label={label}>
+    <Checkbox
+      value={value}
+      size={size}
+      isInvalid={isInvalid}
+      isDisabled={isDisabled}
+      aria-label={label}
+      onPress={onPress}
+    >
       <CheckboxIndicator mr="$2">
         <CheckboxIcon as={CheckIcon} />
       </CheckboxIndicator>
       <CheckboxLabel>{label}</CheckboxLabel>
     </Checkbox>
   );
 };
+

baseProject/config/storybook/gluestackStories/RadioButton.stories.ts

@@ -1,40 +1,43 @@
 import { ExampleGluestackRadioButton } from './RadioButton';
+import type { Meta, StoryObj } from '@storybook/react';
 
-const MyRadioButtonMeta = {
+const meta = {
   title: 'RadioButton',
   component: ExampleGluestackRadioButton,
   argTypes: {
-    value: 'change',
+    onPress: { action: 'radio button is selected!' },
   },
   args: {
-    isInvalid: false,
-    isDisabled: false,
     size: 'md',
     label: 'Label',
   },
-};
+} satisfies Meta<typeof ExampleGluestackRadioButton>;
+
+export default meta;
 
-export default MyRadioButtonMeta;
+type Story = StoryObj<typeof meta>;
 
 export const Basic = {};
 
-export const Default = {
+export const Default: Story = {
   args: {
     value: 'change',
-    label: 'Radio button'
+    label: 'Radio button',
   },
 };
 
-export const Large = {
+export const Large: Story = {
   args: {
+    value: 'change',
     size: 'lg',
-    label: 'Radio button'
+    label: 'Radio button',
   },
 };
 
-export const Small = {
+export const Small: Story = {
   args: {
+    value: 'change',
     size: 'sm',
-    label: 'Radio button'
+    label: 'Radio button',
   },
 };

baseProject/config/storybook/gluestackStories/RadioButton.tsx

@@ -7,6 +7,7 @@ interface ExampleGluestackRadioButtonProps {
   isInvalid?: boolean;
   isDisabled?: boolean;
   label: string;
+  onPress?: () => void;
 }
 
 export const ExampleGluestackRadioButton = ({
@@ -15,12 +16,13 @@ export const ExampleGluestackRadioButton = ({
   isInvalid,
   isDisabled,
   label,
+  onPress,
 }: ExampleGluestackRadioButtonProps) => {
   return (
     <RadioGroup>
-      <Radio value={value} size={size} isDisabled={isDisabled} isInvalid={isInvalid}>
+      <Radio value={value} size={size} isDisabled={isDisabled} isInvalid={isInvalid} onPress={onPress}>
         <RadioIndicator mr="$2">
-          <RadioIcon as={CircleIcon} strokeWidth={1} />
+          <RadioIcon as={CircleIcon} />
         </RadioIndicator>
         <RadioLabel>{label}</RadioLabel>
       </Radio>

baseProject/config/storybook/preview.js → baseProject/config/storybook/preview.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/react-in-jsx-scope */
 import React from 'react';
+import type { Preview } from '@storybook/react';
 {{#if hasGluestackUICore}}
 import { GluestackUIProvider } from '@gluestack-ui/themed';
 import { StyleSheet, View } from 'react-native';
@@ -33,6 +34,13 @@ export const decorators = [
   ),
 ];
 
+const preview: Preview = {
+  parameters: parameters,
+  decorators: decorators,
+};
+
+export default preview;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

baseProject/metro.config.js

@@ -1,35 +1,31 @@
 const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
-
+{{#if hasStorybook}}
+const path = require('path');
+const { generate } = require('@storybook/react-native/scripts/generate');
+{{/if}}
 /**
  * Metro configuration
  * https://facebook.github.io/metro/docs/configuration
  *
  * @type {import('metro-config').MetroConfig}
  */
-{{#if hasStorybook}}
 
-const storybookSourceExt =
-  process.env.STORYBOOK_ENABLED === 'true'
-    ? ['storybook.tsx', 'storybook.ts', 'storybook.js', 'storybook.jsx']
-    : [];
+const defaultConfig = getDefaultConfig(__dirname);
+let config = {};
+{{#if hasStorybook}}
 
-module.exports = (async () => {
-    const defaultConfig = await getDefaultConfig(__dirname)
-    // Add the transformer option to your custom config
-    const customConfig = {
-        resolver: {
-            resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
-        },
-    };
+generate({
+    configPath: path.resolve(__dirname, './.storybook'),
+  });
 
-    if (process.env.STORYBOOK_ENABLED) {
-        defaultConfig.resolver.sourceExts = [...storybookSourceExt, ...defaultConfig.resolver.sourceExts];
-    }
-
-    // Merge your custom config with the default config
-    return mergeConfig(defaultConfig, customConfig);
-})();
-{{else}}
-const config = {};
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+config = {
+    transformer: {
+      unstable_allowRequireContext: true,
+    },
+    resolver: {
+      sourceExts: [...defaultConfig.resolver.sourceExts, 'mjs'],
+    },
+  };
 {{/if}}
+
+module.exports = mergeConfig(defaultConfig, config);

src/commands/start-project.ts

@@ -17,8 +17,7 @@ import {
 import { spawnProgress } from '../tools/spawn-progress';
 import { commandFormat, RnBootstrapHeading, p } from '../tools/pretty';
 import { StartProjectOptionSelectionResult } from '../types/StartProjectOptionSelectionResult';
-import { IS_WINDOWS } from '../tools/constants';
-const { spawn } = require('child_process');
+import { IS_MAC } from '../tools/constants';
 
 const command: RnBootstrapCommand = {
   name: 'start-project',
@@ -93,8 +92,6 @@ const startProject = async (toolbox: RnBootstrapToolbox) => {
 
   await yarn.run('prettify:write');
 
-  !IS_WINDOWS && (await yarn.run('pod-install'));
-
   print.info(
     'Please note you might have to use Xcode to change the iOS bundle ID!'
   );
@@ -130,7 +127,7 @@ const startProject = async (toolbox: RnBootstrapToolbox) => {
 
     if (gluestackOptions.includes(selectedOptions.styleLibrary)) {
       // Replace storybook files with preconfigured ones specific for gluestack
-      replaceFile('preview.js', '.storybook/preview.js');
+      replaceFile('preview.tsx', '.storybook/preview.tsx');
       filesystem.remove('.storybook/stories/');
       replaceFile('gluestackStories', '.storybook/stories');
     }
@@ -142,6 +139,8 @@ const startProject = async (toolbox: RnBootstrapToolbox) => {
     );
   }
 
+  IS_MAC && (await yarn.run('pod-install'));
+
   print.success(print.checkmark + ' Setup is done.');
 };
 

src/tools/constants.ts

@@ -2,7 +2,7 @@ export const NAME_REGEX = /^[$A-Z_][0-9A-Z_$]*$/i;
 // tslint:disable-next-line
 export const BUNDLE_ID_REGEX = /^([a-zA-Z]([a-zA-Z0-9_])*\.)+[a-zA-Z]([a-zA-Z0-9_])*$/u;
 
-export const IS_WINDOWS = process.platform === 'win32';
+export const IS_MAC = process.platform === 'darwin';
 
 // According to react-native's CLI init command
 const JAVA_KEYWORDS = [