From 7a16fe4d9a3f6df8c81e1119bbe0f3858d3776b5 Mon Sep 17 00:00:00 2001 From: Alexandr Kozhevnikov Date: Tue, 1 Oct 2024 17:23:03 +0200 Subject: [PATCH 01/11] Add preview support --- .../__snapshots__/generate.test.js.snap | 10 ++++---- packages/react-native/scripts/generate.js | 24 +++++++++++++++---- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/packages/react-native/scripts/__snapshots__/generate.test.js.snap b/packages/react-native/scripts/__snapshots__/generate.test.js.snap index a3f86d23f9..071a5014bf 100644 --- a/packages/react-native/scripts/__snapshots__/generate.test.js.snap +++ b/packages/react-native/scripts/__snapshots__/generate.test.js.snap @@ -27,7 +27,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')]; + const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')]; global.STORIES = normalizedStories; @@ -77,7 +77,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')]; + const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')]; global.STORIES = normalizedStories; @@ -127,7 +127,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')]; + const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')]; global.STORIES = normalizedStories; @@ -177,7 +177,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')]; + const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')]; global.STORIES = normalizedStories; @@ -222,7 +222,7 @@ import "@storybook/addon-ondevice-actions/register"; - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')]; + const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')]; global.STORIES = normalizedStories; diff --git a/packages/react-native/scripts/generate.js b/packages/react-native/scripts/generate.js index d11ab1920d..83f197ad79 100644 --- a/packages/react-native/scripts/generate.js +++ b/packages/react-native/scripts/generate.js @@ -50,10 +50,26 @@ function generate({ configPath, absolute = false, useJs = false }) { const doctools = 'require("@storybook/react-native/dist/preview")'; - // TODO: implement presets or something similar - const enhancer = main.addons?.includes('@storybook/addon-ondevice-actions') - ? "require('@storybook/addon-actions/preview')" - : ''; + const enhancer = []; + + const enhancerDependenciesMap = { + '@storybook/addon-ondevice-actions': '@storybook/addon-actions', + }; + + main.addons?.forEach((_addon) => { + const addon = enhancerDependenciesMap[_addon] || _addon; + let addonPath; + try { + addonPath = path.dirname(require.resolve(addon)); + } catch (error) { + console.error(`Failed to resolve addon: ${addon}`, error); + return null; // Skip this addon if it cannot be resolved + } + const isPreviewFileExists = getPreviewExists({ configPath: addonPath }); + if (isPreviewFileExists) { + enhancer.push(`require('${addon}/dist/preview')`); + } + }); let options = ''; let optionsVar = ''; From 81e5e5120f857aa2bd5cabf674aa230819763ef1 Mon Sep 17 00:00:00 2001 From: Alexandr Kozhevnikov Date: Thu, 3 Oct 2024 09:27:12 +0200 Subject: [PATCH 02/11] preview re-export --- packages/ondevice-actions/preview.js | 1 + packages/ondevice-actions/src/preview.ts | 1 + .../scripts/__snapshots__/generate.test.js.snap | 10 +++++----- packages/react-native/scripts/generate.js | 7 +------ 4 files changed, 8 insertions(+), 11 deletions(-) create mode 100644 packages/ondevice-actions/preview.js create mode 100644 packages/ondevice-actions/src/preview.ts diff --git a/packages/ondevice-actions/preview.js b/packages/ondevice-actions/preview.js new file mode 100644 index 0000000000..0d7d5c6c33 --- /dev/null +++ b/packages/ondevice-actions/preview.js @@ -0,0 +1 @@ +export * from '@storybook/addon-actions/preview'; diff --git a/packages/ondevice-actions/src/preview.ts b/packages/ondevice-actions/src/preview.ts new file mode 100644 index 0000000000..0d7d5c6c33 --- /dev/null +++ b/packages/ondevice-actions/src/preview.ts @@ -0,0 +1 @@ +export * from '@storybook/addon-actions/preview'; diff --git a/packages/react-native/scripts/__snapshots__/generate.test.js.snap b/packages/react-native/scripts/__snapshots__/generate.test.js.snap index 071a5014bf..bbd80b7914 100644 --- a/packages/react-native/scripts/__snapshots__/generate.test.js.snap +++ b/packages/react-native/scripts/__snapshots__/generate.test.js.snap @@ -27,7 +27,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')]; + const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/dist/preview')]; global.STORIES = normalizedStories; @@ -77,7 +77,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')]; + const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/dist/preview')]; global.STORIES = normalizedStories; @@ -127,7 +127,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')]; + const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/dist/preview')]; global.STORIES = normalizedStories; @@ -177,7 +177,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')]; + const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/dist/preview')]; global.STORIES = normalizedStories; @@ -222,7 +222,7 @@ import "@storybook/addon-ondevice-actions/register"; - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')]; + const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/dist/preview')]; global.STORIES = normalizedStories; diff --git a/packages/react-native/scripts/generate.js b/packages/react-native/scripts/generate.js index 83f197ad79..3c5184de00 100644 --- a/packages/react-native/scripts/generate.js +++ b/packages/react-native/scripts/generate.js @@ -52,12 +52,7 @@ function generate({ configPath, absolute = false, useJs = false }) { const enhancer = []; - const enhancerDependenciesMap = { - '@storybook/addon-ondevice-actions': '@storybook/addon-actions', - }; - - main.addons?.forEach((_addon) => { - const addon = enhancerDependenciesMap[_addon] || _addon; + main.addons?.forEach((addon) => { let addonPath; try { addonPath = path.dirname(require.resolve(addon)); From ad54efc52312dae908043797def02b9b23b5fbb2 Mon Sep 17 00:00:00 2001 From: Alexandr Kozhevnikov Date: Thu, 3 Oct 2024 09:36:01 +0200 Subject: [PATCH 03/11] omit dist --- .../scripts/__snapshots__/generate.test.js.snap | 10 +++++----- packages/react-native/scripts/generate.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-native/scripts/__snapshots__/generate.test.js.snap b/packages/react-native/scripts/__snapshots__/generate.test.js.snap index bbd80b7914..7dff189ccb 100644 --- a/packages/react-native/scripts/__snapshots__/generate.test.js.snap +++ b/packages/react-native/scripts/__snapshots__/generate.test.js.snap @@ -27,7 +27,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/dist/preview')]; + const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')]; global.STORIES = normalizedStories; @@ -77,7 +77,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/dist/preview')]; + const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')]; global.STORIES = normalizedStories; @@ -127,7 +127,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/dist/preview')]; + const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')]; global.STORIES = normalizedStories; @@ -177,7 +177,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/dist/preview')]; + const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')]; global.STORIES = normalizedStories; @@ -222,7 +222,7 @@ import "@storybook/addon-ondevice-actions/register"; - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/dist/preview')]; + const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')]; global.STORIES = normalizedStories; diff --git a/packages/react-native/scripts/generate.js b/packages/react-native/scripts/generate.js index 3c5184de00..51aad530ae 100644 --- a/packages/react-native/scripts/generate.js +++ b/packages/react-native/scripts/generate.js @@ -62,7 +62,7 @@ function generate({ configPath, absolute = false, useJs = false }) { } const isPreviewFileExists = getPreviewExists({ configPath: addonPath }); if (isPreviewFileExists) { - enhancer.push(`require('${addon}/dist/preview')`); + enhancer.push(`require('${addon}/preview')`); } }); From 0c406e1c00d6dab5295de607b35ecd69e6762bb8 Mon Sep 17 00:00:00 2001 From: Alexandr Kozhevnikov Date: Sun, 20 Oct 2024 17:38:12 +0200 Subject: [PATCH 04/11] add deep controls (#1) --- examples/expo-example/.storybook-web/main.ts | 1 + examples/expo-example/.storybook/main.ts | 1 + examples/expo-example/.storybook/preview.tsx | 1 + .../.storybook/storybook.requires.ts | 4 +- .../DeepControls/DeepControls.stories.tsx | 37 +++++++++++++++++++ examples/expo-example/package.json | 1 + yarn.lock | 12 ++++++ 7 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 examples/expo-example/other_components/DeepControls/DeepControls.stories.tsx diff --git a/examples/expo-example/.storybook-web/main.ts b/examples/expo-example/.storybook-web/main.ts index d83ffb945e..b9307b76ea 100644 --- a/examples/expo-example/.storybook-web/main.ts +++ b/examples/expo-example/.storybook-web/main.ts @@ -21,6 +21,7 @@ const main: ServerStorybookConfig = { '@storybook/addon-react-native-web', // note why does this break with get absolute? '@storybook/addon-react-native-server', + 'storybook-addon-deep-controls', ], // logLevel: 'debug', framework: getAbsolutePath('@storybook/react-webpack5'), diff --git a/examples/expo-example/.storybook/main.ts b/examples/expo-example/.storybook/main.ts index 3b8df3d9dd..8c0b52f8e4 100644 --- a/examples/expo-example/.storybook/main.ts +++ b/examples/expo-example/.storybook/main.ts @@ -21,6 +21,7 @@ const main: StorybookConfig = { '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-actions', '@storybook/addon-ondevice-notes', + 'storybook-addon-deep-controls', ], reactNative: { playFn: false, diff --git a/examples/expo-example/.storybook/preview.tsx b/examples/expo-example/.storybook/preview.tsx index 0ed21ed447..5f8e781573 100644 --- a/examples/expo-example/.storybook/preview.tsx +++ b/examples/expo-example/.storybook/preview.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { View, Appearance } from 'react-native'; import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds'; import type { Preview } from '@storybook/react'; diff --git a/examples/expo-example/.storybook/storybook.requires.ts b/examples/expo-example/.storybook/storybook.requires.ts index 0c7deb9167..3d6d43459e 100644 --- a/examples/expo-example/.storybook/storybook.requires.ts +++ b/examples/expo-example/.storybook/storybook.requires.ts @@ -6,6 +6,7 @@ import "@storybook/addon-ondevice-controls/register"; import "@storybook/addon-ondevice-backgrounds/register"; import "@storybook/addon-ondevice-actions/register"; import "@storybook/addon-ondevice-notes/register"; +import "storybook-addon-deep-controls/register"; const normalizedStories = [ { @@ -57,7 +58,8 @@ declare global { const annotations = [ require("./preview"), require("@storybook/react-native/dist/preview"), - require("@storybook/addon-actions/preview"), + require("@storybook/addon-ondevice-actions/preview"), + require("storybook-addon-deep-controls/preview"), ]; global.STORIES = normalizedStories; diff --git a/examples/expo-example/other_components/DeepControls/DeepControls.stories.tsx b/examples/expo-example/other_components/DeepControls/DeepControls.stories.tsx new file mode 100644 index 0000000000..796be2dedc --- /dev/null +++ b/examples/expo-example/other_components/DeepControls/DeepControls.stories.tsx @@ -0,0 +1,37 @@ +import { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { Text } from 'react-native'; + +const DeepControls = () => { + return Testing story with deep controls (storybook-addon-deep-controls); +}; + +export default { + title: 'DeepControls', + component: DeepControls, +} satisfies Meta; + +export const Basic: StoryObj = { + parameters: { + deepControls: { enabled: true }, + }, + args: { + objectArg: { + string: 'foo', + number: 42, + boolean: true, + enumString: 'value2', // we only want specific values for this + nested: { + number: 222, + boolean: false, + }, + }, + }, + argTypes: { + // so we define an argType for the property to use a radio control with specific values + 'objectArg.enumString': { + control: 'radio', + options: ['value1', 'value2', 'value3'], + }, + }, +}; diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json index 8f5a2178e0..a58156bdfd 100644 --- a/examples/expo-example/package.json +++ b/examples/expo-example/package.json @@ -56,6 +56,7 @@ "react-native-web": "~0.19.10", "react-router": "^6.26.2", "storybook": "^8.3.5", + "storybook-addon-deep-controls": "^0.8.1", "ws": "^8.18.0" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 65fd420919..9099b68afb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9730,6 +9730,7 @@ __metadata: react-native-web: "npm:~0.19.10" react-router: "npm:^6.26.2" storybook: "npm:^8.3.5" + storybook-addon-deep-controls: "npm:^0.8.1" typescript: "npm:^5.3.3" ws: "npm:^8.18.0" languageName: unknown @@ -17640,6 +17641,17 @@ __metadata: languageName: node linkType: hard +"storybook-addon-deep-controls@npm:^0.8.1": + version: 0.8.1 + resolution: "storybook-addon-deep-controls@npm:0.8.1" + peerDependencies: + "@storybook/addon-controls": 7.x.x || 8.x.x + "@storybook/types": 7.x.x || 8.x.x + storybook: 7.x.x || 8.x.x + checksum: 10/e44e9ea8b9cb6277d8e129a9782dd32c6e814a9640324f0c852754c26467ce64ec3abc8ad7290afac240d99c349e86774012be331813b6b650e99d934b8632b9 + languageName: node + linkType: hard + "storybook@npm:^8.3.5": version: 8.3.5 resolution: "storybook@npm:8.3.5" From 77450a45e1f684c02d673a78629ab4e7d4d80fc0 Mon Sep 17 00:00:00 2001 From: Alexandr Kozhevnikov Date: Mon, 21 Oct 2024 11:36:02 +0200 Subject: [PATCH 05/11] bump storybook-addon-deep-controls --- examples/expo-example/package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json index fe0d4557e6..fe150e9840 100644 --- a/examples/expo-example/package.json +++ b/examples/expo-example/package.json @@ -56,7 +56,7 @@ "react-native-web": "~0.19.10", "react-router": "^6.26.2", "storybook": "^8.3.5", - "storybook-addon-deep-controls": "^0.8.1", + "storybook-addon-deep-controls": "^0.8.2", "ws": "^8.18.0" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 799bcf8b42..6c8c2fd186 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9730,7 +9730,7 @@ __metadata: react-native-web: "npm:~0.19.10" react-router: "npm:^6.26.2" storybook: "npm:^8.3.5" - storybook-addon-deep-controls: "npm:^0.8.1" + storybook-addon-deep-controls: "npm:^0.8.2" typescript: "npm:^5.3.3" ws: "npm:^8.18.0" languageName: unknown @@ -17641,14 +17641,14 @@ __metadata: languageName: node linkType: hard -"storybook-addon-deep-controls@npm:^0.8.1": - version: 0.8.1 - resolution: "storybook-addon-deep-controls@npm:0.8.1" +"storybook-addon-deep-controls@npm:^0.8.2": + version: 0.8.2 + resolution: "storybook-addon-deep-controls@npm:0.8.2" peerDependencies: "@storybook/addon-controls": 7.x.x || 8.x.x "@storybook/types": 7.x.x || 8.x.x storybook: 7.x.x || 8.x.x - checksum: 10/e44e9ea8b9cb6277d8e129a9782dd32c6e814a9640324f0c852754c26467ce64ec3abc8ad7290afac240d99c349e86774012be331813b6b650e99d934b8632b9 + checksum: 10/79fcd1f96d0e9472b195d14335268d2bab9da087ab348f1e243349acb69265e552536ea57f0d885a317c9f6f48a130d358f73f392aab68f56401c3a4010f70ec languageName: node linkType: hard From 4333d266f90287337cf50c068da5c0b3bc6ef569 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sat, 26 Oct 2024 11:13:44 +0100 Subject: [PATCH 06/11] fix: add more examples and show output --- .../DeepControls/DeepControls.stories.tsx | 43 +++++++++++++++++-- 1 file changed, 39 insertions(+), 4 deletions(-) diff --git a/examples/expo-example/other_components/DeepControls/DeepControls.stories.tsx b/examples/expo-example/other_components/DeepControls/DeepControls.stories.tsx index 796be2dedc..d7fcdf2db9 100644 --- a/examples/expo-example/other_components/DeepControls/DeepControls.stories.tsx +++ b/examples/expo-example/other_components/DeepControls/DeepControls.stories.tsx @@ -1,9 +1,23 @@ import { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; -import { Text } from 'react-native'; +import { Text, View } from 'react-native'; -const DeepControls = () => { - return Testing story with deep controls (storybook-addon-deep-controls); +const DeepControls = ({ + objectArg, +}: { + objectArg: { + string: string; + number: number; + boolean: boolean; + enumString: string; + nested: { number: number; boolean: boolean }; + }; +}) => { + return ( + + Testing story with deep controls (storybook-addon-deep-controls) + {JSON.stringify(objectArg, null, 2)} + + ); }; export default { @@ -29,9 +43,30 @@ export const Basic: StoryObj = { }, argTypes: { // so we define an argType for the property to use a radio control with specific values + // @ts-expect-error 'objectArg.enumString': { control: 'radio', options: ['value1', 'value2', 'value3'], }, + + 'objectArg.boolean': { + control: 'boolean', + }, + + 'objectArg.number': { + control: 'number', + }, + + 'objectArg.string': { + control: 'text', + }, + + 'objectArg.nested.boolean': { + control: 'boolean', + }, + + 'objectArg.nested.number': { + control: 'number', + }, }, }; From 0d9dbcac5f8ab180b9d69af956dbcefb0508cecc Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sat, 26 Oct 2024 11:22:30 +0100 Subject: [PATCH 07/11] fix: enhancers to work for a list --- examples/expo-example/.storybook/preview.tsx | 1 - packages/react-native/scripts/generate.js | 19 +++++++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/examples/expo-example/.storybook/preview.tsx b/examples/expo-example/.storybook/preview.tsx index 5f8e781573..0ed21ed447 100644 --- a/examples/expo-example/.storybook/preview.tsx +++ b/examples/expo-example/.storybook/preview.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { View, Appearance } from 'react-native'; import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds'; import type { Preview } from '@storybook/react'; diff --git a/packages/react-native/scripts/generate.js b/packages/react-native/scripts/generate.js index 51aad530ae..e55ddf3c01 100644 --- a/packages/react-native/scripts/generate.js +++ b/packages/react-native/scripts/generate.js @@ -48,23 +48,26 @@ function generate({ configPath, absolute = false, useJs = false }) { const registerAddons = main.addons?.map((addon) => `import "${addon}/register";`).join('\n'); - const doctools = 'require("@storybook/react-native/dist/preview")'; + const docTools = 'require("@storybook/react-native/dist/preview")'; - const enhancer = []; + const enhancers = [docTools]; - main.addons?.forEach((addon) => { + for (const addon of main.addons) { let addonPath; try { addonPath = path.dirname(require.resolve(addon)); } catch (error) { console.error(`Failed to resolve addon: ${addon}`, error); + return null; // Skip this addon if it cannot be resolved } + const isPreviewFileExists = getPreviewExists({ configPath: addonPath }); + if (isPreviewFileExists) { - enhancer.push(`require('${addon}/preview')`); + enhancers.push(`require('${addon}/preview')`); } - }); + } let options = ''; let optionsVar = ''; @@ -77,7 +80,11 @@ function generate({ configPath, absolute = false, useJs = false }) { const previewExists = getPreviewExists({ configPath }); - const annotations = `[${previewExists ? "require('./preview')," : ''}${doctools}, ${enhancer}]`; + if (previewExists) { + enhancers.unshift("require('./preview')"); + } + + const annotations = `[${enhancers.join(', ')}]`; const globalTypes = ` declare global { From 244ba1e196e844dae89ea4e0708d1388f050b142 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sat, 26 Oct 2024 12:26:37 +0100 Subject: [PATCH 08/11] fix: addon file resolution --- .../.storybook/storybook.requires.ts | 1 - packages/react-native/scripts/common.js | 23 ++++++++++++++++ packages/react-native/scripts/generate.js | 27 ++++++++++--------- 3 files changed, 37 insertions(+), 14 deletions(-) diff --git a/examples/expo-example/.storybook/storybook.requires.ts b/examples/expo-example/.storybook/storybook.requires.ts index 3d6d43459e..8e6321d05d 100644 --- a/examples/expo-example/.storybook/storybook.requires.ts +++ b/examples/expo-example/.storybook/storybook.requires.ts @@ -6,7 +6,6 @@ import "@storybook/addon-ondevice-controls/register"; import "@storybook/addon-ondevice-backgrounds/register"; import "@storybook/addon-ondevice-actions/register"; import "@storybook/addon-ondevice-notes/register"; -import "storybook-addon-deep-controls/register"; const normalizedStories = [ { diff --git a/packages/react-native/scripts/common.js b/packages/react-native/scripts/common.js index 1d3245bcce..4637ddccdc 100644 --- a/packages/react-native/scripts/common.js +++ b/packages/react-native/scripts/common.js @@ -58,6 +58,28 @@ function getPreviewExists({ configPath }) { return !!getFilePathExtension({ configPath }, 'preview'); } +function resolveAddonFile(addon, file, extensions = ['js', 'mjs', 'ts']) { + try { + const basePath = path.join(addon, file); + + require.resolve(basePath); + + return basePath; + } catch (error) {} + + for (const ext of extensions) { + try { + const filePath = path.join(addon, `${file}.${ext}`); + + require.resolve(filePath); + + return filePath; + } catch (error) {} + } + + return null; +} + module.exports = { toRequireContext, requireUncached, @@ -65,4 +87,5 @@ module.exports = { getMain, ensureRelativePathHasDot, getPreviewExists, + resolveAddonFile, }; diff --git a/packages/react-native/scripts/generate.js b/packages/react-native/scripts/generate.js index e55ddf3c01..9271da0bd3 100644 --- a/packages/react-native/scripts/generate.js +++ b/packages/react-native/scripts/generate.js @@ -3,6 +3,7 @@ const { ensureRelativePathHasDot, getMain, getPreviewExists, + resolveAddonFile, } = require('./common'); const { normalizeStories, globToRegexp } = require('@storybook/core/common'); const fs = require('fs'); @@ -46,26 +47,26 @@ function generate({ configPath, absolute = false, useJs = false }) { }`; }); - const registerAddons = main.addons?.map((addon) => `import "${addon}/register";`).join('\n'); + let registerAddons = ''; + + for (const addon of main.addons) { + const registerPath = resolveAddonFile(addon, 'register', ['js', 'mjs', 'ts', 'tsx']); + + if (registerPath) { + registerAddons += `import "${registerPath}";\n`; + } + } const docTools = 'require("@storybook/react-native/dist/preview")'; const enhancers = [docTools]; for (const addon of main.addons) { - let addonPath; - try { - addonPath = path.dirname(require.resolve(addon)); - } catch (error) { - console.error(`Failed to resolve addon: ${addon}`, error); - - return null; // Skip this addon if it cannot be resolved - } - - const isPreviewFileExists = getPreviewExists({ configPath: addonPath }); + const previewPath = resolveAddonFile(addon, 'preview', ['js', 'mjs', 'jsx', 'ts', 'tsx']); - if (isPreviewFileExists) { - enhancers.push(`require('${addon}/preview')`); + if (previewPath) { + enhancers.push(`require('${previewPath}')`); + continue; } } From 8f71dd724df97b88e6b1b09f70fb9d308895dc76 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sat, 26 Oct 2024 12:29:04 +0100 Subject: [PATCH 09/11] fix --- packages/react-native/scripts/generate.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/scripts/generate.js b/packages/react-native/scripts/generate.js index 9271da0bd3..c750b91bc3 100644 --- a/packages/react-native/scripts/generate.js +++ b/packages/react-native/scripts/generate.js @@ -50,7 +50,7 @@ function generate({ configPath, absolute = false, useJs = false }) { let registerAddons = ''; for (const addon of main.addons) { - const registerPath = resolveAddonFile(addon, 'register', ['js', 'mjs', 'ts', 'tsx']); + const registerPath = resolveAddonFile(addon, 'register', ['js', 'mjs', 'jsx', 'ts', 'tsx']); if (registerPath) { registerAddons += `import "${registerPath}";\n`; From 232bb53d741bdb950db40a734ba55872492ce515 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sat, 26 Oct 2024 12:32:33 +0100 Subject: [PATCH 10/11] fix --- packages/react-native/package.json | 3 ++- .../scripts/__snapshots__/generate.test.js.snap | 13 +++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/react-native/package.json b/packages/react-native/package.json index 84e60e0cc2..d53c324246 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -36,7 +36,8 @@ "dev": "npx --yes tsx buildscripts/gendtsdev.ts && tsup --watch", "prepare": "rm -rf dist/ && tsup", "test": "jest", - "test:ci": "jest" + "test:ci": "jest", + "test:update": "jest --updateSnapshot" }, "dependencies": { "@storybook/core": "^8.3.5", diff --git a/packages/react-native/scripts/__snapshots__/generate.test.js.snap b/packages/react-native/scripts/__snapshots__/generate.test.js.snap index 7dff189ccb..34c6611fe6 100644 --- a/packages/react-native/scripts/__snapshots__/generate.test.js.snap +++ b/packages/react-native/scripts/__snapshots__/generate.test.js.snap @@ -11,6 +11,7 @@ import "@storybook/addon-ondevice-controls/register"; import "@storybook/addon-ondevice-backgrounds/register"; import "@storybook/addon-ondevice-actions/register"; + const normalizedStories = [{ titlePrefix: "", directory: "./scripts/mocks/file-extensions", @@ -27,7 +28,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')]; + const annotations = [require('./preview'), require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')]; global.STORIES = normalizedStories; @@ -61,6 +62,7 @@ import "@storybook/addon-ondevice-controls/register"; import "@storybook/addon-ondevice-backgrounds/register"; import "@storybook/addon-ondevice-actions/register"; + const normalizedStories = [{ titlePrefix: "ComponentsPrefix", directory: "./scripts/mocks/configuration-objects/components", @@ -77,7 +79,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')]; + const annotations = [require('./preview'), require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')]; global.STORIES = normalizedStories; @@ -111,6 +113,7 @@ import "@storybook/addon-ondevice-controls/register"; import "@storybook/addon-ondevice-backgrounds/register"; import "@storybook/addon-ondevice-actions/register"; + const normalizedStories = [{ titlePrefix: "", directory: "./scripts/mocks/all-config-files", @@ -127,7 +130,7 @@ import "@storybook/addon-ondevice-actions/register"; } - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')]; + const annotations = [require('./preview'), require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')]; global.STORIES = normalizedStories; @@ -161,6 +164,7 @@ import "@storybook/addon-ondevice-controls/register"; import "@storybook/addon-ondevice-backgrounds/register"; import "@storybook/addon-ondevice-actions/register"; + const normalizedStories = [{ titlePrefix: "", directory: "./scripts/mocks/no-preview", @@ -211,6 +215,7 @@ import "@storybook/addon-ondevice-controls/register"; import "@storybook/addon-ondevice-backgrounds/register"; import "@storybook/addon-ondevice-actions/register"; + const normalizedStories = [{ titlePrefix: "", directory: "./scripts/mocks/all-config-files", @@ -222,7 +227,7 @@ import "@storybook/addon-ondevice-actions/register"; - const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')]; + const annotations = [require('./preview'), require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')]; global.STORIES = normalizedStories; From 363bac39828fb92d2cd8f9c9de921a38b879a4b4 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Fri, 1 Nov 2024 13:25:12 +0000 Subject: [PATCH 11/11] fix: update version --- examples/expo-example/.storybook/storybook.requires.ts | 3 ++- examples/expo-example/package.json | 2 +- yarn.lock | 10 +++++----- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/examples/expo-example/.storybook/storybook.requires.ts b/examples/expo-example/.storybook/storybook.requires.ts index 4b77bbbbc4..fc9f4e8f91 100644 --- a/examples/expo-example/.storybook/storybook.requires.ts +++ b/examples/expo-example/.storybook/storybook.requires.ts @@ -58,7 +58,8 @@ declare global { const annotations = [ require("./preview"), require("@storybook/react-native/preview"), - require("@storybook/addon-actions/preview"), + require("@storybook/addon-ondevice-actions/preview"), + require("storybook-addon-deep-controls/preview"), ]; global.STORIES = normalizedStories; diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json index 675876f37e..5e6054c0d8 100644 --- a/examples/expo-example/package.json +++ b/examples/expo-example/package.json @@ -56,7 +56,7 @@ "react-native-web": "~0.19.13", "react-router": "^6.26.2", "storybook": "^8.4.0", - "storybook-addon-deep-controls": "^0.8.2", + "storybook-addon-deep-controls": "^0.9.2", "ws": "^8.18.0" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 532ed1cbf4..ffc167dd36 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9949,7 +9949,7 @@ __metadata: react-native-web: "npm:~0.19.13" react-router: "npm:^6.26.2" storybook: "npm:^8.4.0" - storybook-addon-deep-controls: "npm:^0.8.2" + storybook-addon-deep-controls: "npm:^0.9.2" typescript: "npm:^5.3.3" ws: "npm:^8.18.0" languageName: unknown @@ -17499,14 +17499,14 @@ __metadata: languageName: node linkType: hard -"storybook-addon-deep-controls@npm:^0.8.2": - version: 0.8.2 - resolution: "storybook-addon-deep-controls@npm:0.8.2" +"storybook-addon-deep-controls@npm:^0.9.2": + version: 0.9.2 + resolution: "storybook-addon-deep-controls@npm:0.9.2" peerDependencies: "@storybook/addon-controls": 7.x.x || 8.x.x "@storybook/types": 7.x.x || 8.x.x storybook: 7.x.x || 8.x.x - checksum: 10/79fcd1f96d0e9472b195d14335268d2bab9da087ab348f1e243349acb69265e552536ea57f0d885a317c9f6f48a130d358f73f392aab68f56401c3a4010f70ec + checksum: 10/458c401195d34559afd637fdd2fbe5bfe447d5400b80abdd0a600a34a51671d27762c2476b654be45878590eb5124fcf809bafb3cd591abcd92f922fe287db5a languageName: node linkType: hard