@storybook/react-native 7.6.10-alpha.4 → 7.6.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "7.6.10-alpha.4",
+  "version": "7.6.11",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -63,7 +63,7 @@
     "@storybook/preview-api": "^7.6.10",
     "@storybook/preview-web": "^7.6.10",
     "@storybook/react": "^7.6.10",
-    "@storybook/react-native-theming": "^7.6.10-alpha.4",
+    "@storybook/react-native-theming": "^7.6.11",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
@@ -97,5 +97,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "43c2b5b932a0361178b010f90533069f14007677"
+  "gitHead": "5aed8e2d2ddc4fe76dd5f883aeb35e3fb48cae87"
 }

package/readme.md

@@ -2,11 +2,13 @@
 
 With Storybook for React Native you can design and develop individual React Native components without running your app.
 
-This readme is for the 7.6 version, you can find older versions by browsing the different version tags.
+This readme is for the 7.6.10 version, you can find the 6.5 docs [here](https://github.com/storybookjs/react-native/tree/v6.5-stable).
+
+If you are migrating from 6.5 to 7.6 you can find the migration guide [here](https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-65x-to-76x)
 
 For more information about storybook visit: [storybook.js.org](https://storybook.js.org)
 
-> NOTE: `@storybook/react-native` requires atleast 7.6.9, if you install other storybook core packages they should be `^7.6.9` or newer.
+> NOTE: `@storybook/react-native` requires atleast 7.6.10, if you install other storybook core packages they should be `^7.6.10` or newer.
 
 If you want to help out or are just curious then check out the [project board](https://github.com/orgs/storybookjs/projects/12) to see the open issues.
 
@@ -35,12 +37,6 @@ For expo you can use this [template](https://github.com/dannyhw/expo-template-st
 ```sh
 # With NPM
 npx create-expo-app --template expo-template-storybook AwesomeStorybook
-
-# With Yarn
-yarn create expo-app --template expo-template-storybook AwesomeStorybook
-
-# With pnpm
-pnpm create expo-app --template expo-template-storybook AwesomeStorybook
 ```
 
 For react native cli you can use this [template](https://github.com/dannyhw/react-native-template-storybook)
@@ -54,12 +50,12 @@ npx react-native init MyApp --template react-native-template-storybook
 Run init to setup your project with all the dependencies and configuration files:
 
 ```sh
-npx sb@latest init --type react_native
+npx storybook@latest init
 ```
 
-The only thing left to do is return Storybook's UI in your app entry point (such as `App.js`) like this:
+The only thing left to do is return Storybook's UI in your app entry point (such as `App.tsx`) like this:
 
-```jsx
+```tsx
 export { default } from './.storybook';
 ```
 
@@ -69,7 +65,7 @@ If you want to add everything yourself check out the the manual guide [here](htt
 
 #### Additional steps: Update your metro config
 
-We require the unstable_allowRequireContext transformer option to enable dynamic story imports based on the stories glob in `main.js`. We can also call the storybook generate function from the metro config to automatically generate the `storybook.requires.js` file when metro runs.
+We require the unstable_allowRequireContext transformer option to enable dynamic story imports based on the stories glob in `main.ts`. We can also call the storybook generate function from the metro config to automatically generate the `storybook.requires.ts` file when metro runs.
 
 **Expo**
 
@@ -120,14 +116,19 @@ module.exports = {
 
 In storybook we use a syntax called CSF that looks like this:
 
-```jsx
+```tsx
+import type { Meta, StoryObj } from '@storybook/react';
 import { MyButton } from './Button';
 
-export default {
+const meta = {
   component: MyButton,
-};
+} satisfies Meta<typeof MyButton>;
 
-export const Basic = {
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
   args: {
     text: 'Hello World',
     color: 'purple',
@@ -135,23 +136,29 @@ export const Basic = {
 };
 ```
 
-You should configure the path to your story files in the `main.js` config file from the `.storybook` folder.
+You should configure the path to your story files in the `main.ts` config file from the `.storybook` folder.
 
-```js
-// .storybook/main.js
+```ts
+// .storybook/main.ts
+import { StorybookConfig } from '@storybook/react-native';
 
-module.exports = {
+const main: StorybookConfig = {
   stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
   addons: [],
 };
+
+export default main;
 ```
 
 ### Decorators and Parameters
 
 For stories you can add decorators and parameters on the default export or on a specifc story.
 
-```jsx
-export default {
+```tsx
+import type { Meta } from '@storybook/react';
+import { Button } from './Button';
+
+const meta = {
   title: 'Button',
   component: Button,
   decorators: [
@@ -170,32 +177,40 @@ export default {
       ],
     },
   },
-};
+} satisfies Meta<typeof Button>;
+
+export default meta;
 ```
 
-For global decorators and parameters, you can add them to `preview.js` inside your `.storybook` folder.
+For global decorators and parameters, you can add them to `preview.tsx` inside your `.storybook` folder.
 
-```jsx
-// .storybook/preview.js
+```tsx
+// .storybook/preview.tsx
+import type { Preview } from '@storybook/react';
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
-export const decorators = [
-  withBackgrounds,
-  (Story) => (
-    <View style={{ flex: 1, color: 'blue' }}>
-      <Story />
-    </View>
-  ),
-];
-export const parameters = {
-  backgrounds: {
-    default: 'plain',
-    values: [
-      { name: 'plain', value: 'white' },
-      { name: 'warm', value: 'hotpink' },
-      { name: 'cool', value: 'deepskyblue' },
-    ],
+
+const preview: Preview = {
+  decorators: [
+    withBackgrounds,
+    (Story) => (
+      <View style={{ flex: 1, color: 'blue' }}>
+        <Story />
+      </View>
+    ),
+  ],
+  parameters: {
+    backgrounds: {
+      default: 'plain',
+      values: [
+        { name: 'plain', value: 'white' },
+        { name: 'warm', value: 'hotpink' },
+        { name: 'cool', value: 'deepskyblue' },
+      ],
+    },
   },
 };
+
+export default preview;
 ```
 
 ## Addons
@@ -210,17 +225,23 @@ Currently the addons available are:
 - [`@storybook/addon-ondevice-notes`](https://storybook.js.org/addons/@storybook/addon-ondevice-notes): Add some markdown to your stories to help document their usage
 - [`@storybook/addon-ondevice-backgrounds`](https://storybook.js.org/addons/@storybook/addon-ondevice-backgrounds): change the background of storybook to compare the look of your component against different backgrounds
 
-Install each one you want to use and add them to the `main.js` addons list as follows:
+Install each one you want to use and add them to the `main.ts` addons list as follows:
 
-```js
-// .storybook/main.js
-
-addons: [
-  '@storybook/addon-ondevice-notes',
-  '@storybook/addon-ondevice-controls',
-  '@storybook/addon-ondevice-backgrounds',
-  '@storybook/addon-ondevice-actions',
-],
+```ts
+// .storybook/main.ts
+import { StorybookConfig } from '@storybook/react-native';
+
+const main: StorybookConfig = {
+  // ... rest of config
+  addons: [
+    '@storybook/addon-ondevice-notes',
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-backgrounds',
+    '@storybook/addon-ondevice-actions',
+  ],
+};
+
+export default main;
 ```
 
 ### Using the addons in your story
@@ -256,11 +277,6 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
         -- Disable KeyboardAvoidingView wrapping Storybook's view
     keyboardAvoidingViewVerticalOffset: Number (0)
         -- With shouldDisableKeyboardAvoidingView=true, this will set the keyboardverticaloffset (https://facebook.github.io/react-native/docs/keyboardavoidingview#keyboardverticaloffset) value for KeyboardAvoidingView wrapping Storybook's view
-    storage: Object (undefined)
-        -- {getItem: (key: string) => Promise<string | null>;setItem: (key: string, value: string) => Promise<void>;}
-        -- Custom storage to be used instead of AsyncStorage
-    shouldPersistSelection: Boolean (true)
-        -- Stores last selected story in your devices storage.
 }
 ```
 

package/scripts/loader.test.js

@@ -49,15 +49,13 @@ describe('loader', () => {
     it('should work for any supported file extension', () => {
       const main = getMain({ configPath: './scripts/mocks/file-extensions' });
       expect(main).toEqual({
-        default: {
-          stories: ['./FakeStory.stories.tsx'],
-          addons: [
-            '@storybook/addon-ondevice-notes',
-            '@storybook/addon-ondevice-controls',
-            '@storybook/addon-ondevice-backgrounds',
-            '@storybook/addon-ondevice-actions',
-          ],
-        },
+        stories: ['./FakeStory.stories.tsx'],
+        addons: [
+          '@storybook/addon-ondevice-notes',
+          '@storybook/addon-ondevice-controls',
+          '@storybook/addon-ondevice-backgrounds',
+          '@storybook/addon-ondevice-actions',
+        ],
       });
     });
   });

package/template/cli/storybook.requires.ts

@@ -8,7 +8,7 @@ import '@storybook/addon-ondevice-actions/register';
 const normalizedStories = [
   {
     titlePrefix: '',
-    directory: './stories',
+    directory: './.storybook/stories',
     files: '**/*.stories.?(ts|tsx|js|jsx)',
     importPathMatcher:
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,