feat(storybook): add support for Storybook React Native v9 (#1118)

Author: cylewaitforit

packages/knip/fixtures/plugins/storybook2/.rnstorybook/index.tsx

@@ -0,0 +1,11 @@
+import { view } from './storybook.requires';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const StorybookUIRoot = view.getStorybookUI({
+  storage: {
+    getItem: AsyncStorage.getItem,
+    setItem: AsyncStorage.setItem,
+  },
+});
+
+export default StorybookUIRoot;

packages/knip/fixtures/plugins/storybook2/.rnstorybook/main.ts

@@ -0,0 +1,13 @@
+import { StorybookConfig } from '@storybook/react-native';
+
+const main: StorybookConfig = {
+  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
+  addons: [
+    '@storybook/addon-ondevice-notes',
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-backgrounds',
+    '@storybook/addon-ondevice-actions',
+  ],
+};
+
+export default main;

packages/knip/fixtures/plugins/storybook2/.rnstorybook/preview.tsx

@@ -0,0 +1,8 @@
+import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
+import { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  decorators: [withBackgrounds],
+};
+
+export default preview;

packages/knip/fixtures/plugins/storybook2/.rnstorybook/storybook.requires.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from 'storybook/test';
+import { MyButton } from './Button';
+
+const meta = {
+  component: MyButton,
+} satisfies Meta<typeof MyButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    text: 'Hello World',
+    color: 'purple',
+    onPress: fn(),
+  },
+};

packages/knip/fixtures/plugins/storybook2/components/Button/Button.stories.tsx

@@ -0,0 +1,18 @@
+{
+  "name": "@plugins/storybook",
+  "scripts": {
+    "storybook": "storybook"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "*"
+  },
+  "devDependencies": {
+    "@storybook/addon-ondevice-actions": "*",
+    "@storybook/addon-ondevice-backgrounds": "*",
+    "@storybook/addon-ondevice-controls": "*",
+    "@storybook/addon-ondevice-notes": "*",
+    "@storybook/react": "*",
+    "@storybook/react-native": "*",
+    "storybook": "*"
+  }
+}

packages/knip/fixtures/plugins/storybook2/components/Button/Button.tsx

@@ -12,15 +12,15 @@ const enablers = [/^@storybook\//, '@nrwl/storybook'];
 
 const isEnabled: IsPluginEnabled = ({ dependencies }) => hasDependency(dependencies, enablers);
 
-const config = ['.storybook/{main,test-runner}.{js,ts,mts}'];
+const config = ['.{storybook,rnstorybook}/{main,test-runner}.{js,ts,mts}'];
 
 const stories = ['**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))'];
 
-const restEntry = ['.storybook/{manager,preview}.{js,jsx,ts,tsx}'];
+const restEntry = ['.{storybook,rnstorybook}/{manager,preview,index}.{js,jsx,ts,tsx}'];
 
 const entry = [...restEntry, ...stories];
 
-const project = ['.storybook/**/*.{js,jsx,ts,tsx,mts}'];
+const project = ['.{storybook,rnstorybook}/**/*.{js,jsx,ts,tsx,mts}'];
 
 const resolveConfig: ResolveConfig<StorybookConfig> = async (localConfig, options) => {
   const { cwd, configFileDir } = options;

packages/knip/fixtures/plugins/storybook2/node_modules/storybook/package.json

@@ -0,0 +1,21 @@
+import { test } from 'bun:test';
+import assert from 'node:assert/strict';
+import { main } from '../../src/index.js';
+import { resolve } from '../../src/util/path.js';
+import baseArguments from '../helpers/baseArguments.js';
+import baseCounters from '../helpers/baseCounters.js';
+
+const cwd = resolve('fixtures/plugins/storybook2');
+
+test('Find dependencies with the Storybook plugin (2)', async () => {
+  const { counters } = await main({
+    ...baseArguments,
+    cwd,
+  });
+
+  assert.deepEqual(counters, {
+    ...baseCounters,
+    processed: 6,
+    total: 6,
+  });
+});