From 94bdb8758ed9859e0184a3c7356838d68f33d752 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Thu, 30 Jan 2025 17:49:14 +0000 Subject: [PATCH 1/4] first attempt to use sort stories --- examples/expo-example/.storybook/preview.tsx | 5 +++ packages/react-native/src/Start.tsx | 37 ++++++++++++++++++-- 2 files changed, 39 insertions(+), 3 deletions(-) diff --git a/examples/expo-example/.storybook/preview.tsx b/examples/expo-example/.storybook/preview.tsx index 4fcbefda0e..5a5d1e2454 100644 --- a/examples/expo-example/.storybook/preview.tsx +++ b/examples/expo-example/.storybook/preview.tsx @@ -19,6 +19,11 @@ const preview: Preview = { date: /Date$/, }, }, + options: { + storySort: { + method: 'alphabetical', + }, + }, hideFullScreenButton: false, noSafeArea: false, my_param: 'anything', diff --git a/packages/react-native/src/Start.tsx b/packages/react-native/src/Start.tsx index 70f455b875..d372316579 100644 --- a/packages/react-native/src/Start.tsx +++ b/packages/react-native/src/Start.tsx @@ -21,12 +21,17 @@ import { composeConfigs, addons as previewAddons, PreviewWithSelection, + sortStoriesV7, userOrAutoTitleFromSpecifier, } from '@storybook/core/preview-api'; import { isExportStory, storyNameFromExport, toId } from '@storybook/csf'; // NOTE this really should be exported from preview-api, but it's not import { createBrowserChannel } from '@storybook/core/channels'; -import type { NormalizedStoriesSpecifier, StoryIndex } from '@storybook/core/types'; +import type { + Addon_StorySortParameterV7, + NormalizedStoriesSpecifier, + StoryIndex, +} from '@storybook/core/types'; import type { ReactRenderer } from '@storybook/react'; import { View } from './View'; @@ -51,7 +56,7 @@ export function prepareStories({ options?: ReactNativeOptions; }) { let index: StoryIndex = { - v: 4, + v: 5, entries: {}, }; @@ -230,7 +235,6 @@ export function start({ ...annotations, ]); - // const preview = new PreviewWithSelection(urlStore, previewView); const preview = new PreviewWithSelection( async (importPath: string) => importMap[importPath], getProjectAnnotationsInitial, @@ -249,9 +253,34 @@ export function start({ preview.getStoryIndexFromServer = async () => view._storyIndex; + Sort(view); + return view; } +const Sort = (viewInstance: View) => { + const projectAnnotations = viewInstance._preview.getProjectAnnotations(); + + if (projectAnnotations instanceof Promise) { + projectAnnotations.then((annotations) => { + console.log('projectAnnotations promise resolved'); + const sortableStories = Object.values(viewInstance._storyIndex.entries); + + sortStoriesV7( + sortableStories, + annotations?.parameters?.options?.storySort as Addon_StorySortParameterV7, + Object.values(viewInstance._storyIndex.entries).map((entry) => entry.importPath) + ); + const sorted = sortableStories.reduce((acc, item) => { + acc[item.id] = item; + return acc; + }, {} as StoryIndex['entries']); + + viewInstance._storyIndex = { v: 5, entries: sorted }; + }); + } +}; + export function updateView( viewInstance: View, annotations: any[], @@ -272,4 +301,6 @@ export function updateView( viewInstance._preview.onStoryIndexChanged().then(() => { viewInstance.createPreparedStoryMapping().then(() => viewInstance._forceRerender()); }); + + Sort(viewInstance); } From 04352e482c0bc8cdc2d9190634a2ef7bf03b6fa2 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Fri, 31 Jan 2025 12:38:29 +0000 Subject: [PATCH 2/4] fix: use compose config to get parameters --- examples/expo-example/.storybook/preview.tsx | 1 + packages/react-native/src/Start.tsx | 62 ++++++++++---------- 2 files changed, 33 insertions(+), 30 deletions(-) diff --git a/examples/expo-example/.storybook/preview.tsx b/examples/expo-example/.storybook/preview.tsx index 5a5d1e2454..0d8fa44aa9 100644 --- a/examples/expo-example/.storybook/preview.tsx +++ b/examples/expo-example/.storybook/preview.tsx @@ -22,6 +22,7 @@ const preview: Preview = { options: { storySort: { method: 'alphabetical', + order: ['Notes example', 'TextInput'], }, }, hideFullScreenButton: false, diff --git a/packages/react-native/src/Start.tsx b/packages/react-native/src/Start.tsx index d372316579..33ff6e5baa 100644 --- a/packages/react-native/src/Start.tsx +++ b/packages/react-native/src/Start.tsx @@ -51,9 +51,11 @@ if (Platform.OS === 'web' && typeof globalThis.setImmediate === 'undefined') { export function prepareStories({ storyEntries, options, + storySort, }: { storyEntries: Array; options?: ReactNativeOptions; + storySort?: Addon_StorySortParameterV7; }) { let index: StoryIndex = { v: 5, @@ -147,7 +149,20 @@ export function prepareStories({ }); }); - return { index, importMap }; + const sortableStories = Object.values(index.entries); + + sortStoriesV7( + sortableStories, + storySort, + Object.values(index.entries).map((entry) => entry.importPath) + ); + + const sorted = sortableStories.reduce((acc, item) => { + acc[item.id] = item; + return acc; + }, {} as StoryIndex['entries']); + + return { index: { v: 5, entries: sorted }, importMap }; } export const getProjectAnnotations = (view: View, annotations: any[]) => async () => @@ -180,7 +195,13 @@ export function start({ annotations: any[]; options?: ReactNativeOptions; }) { - const { index, importMap } = prepareStories({ storyEntries, options }); + const composedAnnotations = composeConfigs(annotations); + + const { index, importMap } = prepareStories({ + storyEntries, + options, + storySort: composedAnnotations.parameters?.options?.storySort, + }); const channel = createBrowserChannel({ page: 'preview' }); @@ -253,41 +274,24 @@ export function start({ preview.getStoryIndexFromServer = async () => view._storyIndex; - Sort(view); - return view; } -const Sort = (viewInstance: View) => { - const projectAnnotations = viewInstance._preview.getProjectAnnotations(); - - if (projectAnnotations instanceof Promise) { - projectAnnotations.then((annotations) => { - console.log('projectAnnotations promise resolved'); - const sortableStories = Object.values(viewInstance._storyIndex.entries); - - sortStoriesV7( - sortableStories, - annotations?.parameters?.options?.storySort as Addon_StorySortParameterV7, - Object.values(viewInstance._storyIndex.entries).map((entry) => entry.importPath) - ); - const sorted = sortableStories.reduce((acc, item) => { - acc[item.id] = item; - return acc; - }, {} as StoryIndex['entries']); - - viewInstance._storyIndex = { v: 5, entries: sorted }; - }); - } -}; - export function updateView( viewInstance: View, annotations: any[], normalizedStories: Array, options?: ReactNativeOptions ) { - const { importMap, index } = prepareStories({ storyEntries: normalizedStories, options }); + const composedAnnotations = composeConfigs(annotations); + + const storySort = composedAnnotations.parameters?.options?.storySort; + + const { importMap, index } = prepareStories({ + storyEntries: normalizedStories, + options, + storySort, + }); viewInstance._preview.onStoriesChanged({ importFn: async (importPath: string) => importMap[importPath], @@ -301,6 +305,4 @@ export function updateView( viewInstance._preview.onStoryIndexChanged().then(() => { viewInstance.createPreparedStoryMapping().then(() => viewInstance._forceRerender()); }); - - Sort(viewInstance); } From 4cef4d608dddef497cc6b17244021a763b2e6831 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Fri, 31 Jan 2025 16:05:18 +0000 Subject: [PATCH 3/4] fix: test fail --- packages/react-native/src/Start.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/src/Start.test.ts b/packages/react-native/src/Start.test.ts index c8b7453afd..a84d013676 100644 --- a/packages/react-native/src/Start.test.ts +++ b/packages/react-native/src/Start.test.ts @@ -37,7 +37,7 @@ describe('prepareStories', () => { }, }, index: { - v: 4, + v: 5, entries: { 'textinput--basic': { id: 'textinput--basic', From 2c48f3c49c1cd24eacc30506d395adac6f817315 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Fri, 31 Jan 2025 16:09:38 +0000 Subject: [PATCH 4/4] v8.5.4-alpha.0 --- examples/expo-example/package.json | 14 ++++---- lerna.json | 2 +- packages/ondevice-actions/package.json | 2 +- packages/ondevice-backgrounds/package.json | 4 +-- packages/ondevice-controls/package.json | 6 ++-- packages/ondevice-notes/package.json | 4 +-- packages/react-native-theming/package.json | 2 +- packages/react-native-ui/package.json | 4 +-- packages/react-native/package.json | 6 ++-- yarn.lock | 40 +++++++++++----------- 10 files changed, 42 insertions(+), 42 deletions(-) diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json index 0d400e2035..c4c1da8629 100644 --- a/examples/expo-example/package.json +++ b/examples/expo-example/package.json @@ -1,6 +1,6 @@ { "name": "expo-example", - "version": "8.5.3", + "version": "8.5.4-alpha.0", "private": true, "main": "index.js", "scripts": { @@ -28,10 +28,10 @@ "@storybook/addon-essentials": "^8.5.1", "@storybook/addon-interactions": "^8.5.1", "@storybook/addon-links": "^8.5.1", - "@storybook/addon-ondevice-actions": "^8.5.3", - "@storybook/addon-ondevice-backgrounds": "^8.5.3", - "@storybook/addon-ondevice-controls": "^8.5.3", - "@storybook/addon-ondevice-notes": "^8.5.3", + "@storybook/addon-ondevice-actions": "^8.5.4-alpha.0", + "@storybook/addon-ondevice-backgrounds": "^8.5.4-alpha.0", + "@storybook/addon-ondevice-controls": "^8.5.4-alpha.0", + "@storybook/addon-ondevice-notes": "^8.5.4-alpha.0", "@storybook/addon-react-native-server": "0.0.6", "@storybook/addon-react-native-web": "^0.0.26", "@storybook/addon-webpack5-compiler-babel": "^3.0.3", @@ -39,8 +39,8 @@ "@storybook/builder-webpack5": "^8.5.1", "@storybook/global": "^5.0.0", "@storybook/react": "^8.5.1", - "@storybook/react-native": "^8.5.3", - "@storybook/react-native-theming": "^8.5.3", + "@storybook/react-native": "^8.5.4-alpha.0", + "@storybook/react-native-theming": "^8.5.4-alpha.0", "@storybook/react-webpack5": "^8.5.1", "@storybook/test": "^8.5.1", "expo": "~52.0.11", diff --git a/lerna.json b/lerna.json index ba641cedd5..6ae4041e64 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { "npmClient": "yarn", "registry": "https://registry.npmjs.org", - "version": "8.5.3" + "version": "8.5.4-alpha.0" } \ No newline at end of file diff --git a/packages/ondevice-actions/package.json b/packages/ondevice-actions/package.json index 2b632e4a61..fd6e7535c5 100644 --- a/packages/ondevice-actions/package.json +++ b/packages/ondevice-actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-actions", - "version": "8.5.3", + "version": "8.5.4-alpha.0", "description": "Action Logger addon for react-native storybook", "keywords": [ "storybook" diff --git a/packages/ondevice-backgrounds/package.json b/packages/ondevice-backgrounds/package.json index e77fe58417..9ff3820299 100644 --- a/packages/ondevice-backgrounds/package.json +++ b/packages/ondevice-backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-backgrounds", - "version": "8.5.3", + "version": "8.5.4-alpha.0", "description": "A react-native storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -33,7 +33,7 @@ }, "dependencies": { "@storybook/core": "^8.5.1", - "@storybook/react-native-theming": "^8.5.3" + "@storybook/react-native-theming": "^8.5.4-alpha.0" }, "devDependencies": { "typescript": "^5.3.3" diff --git a/packages/ondevice-controls/package.json b/packages/ondevice-controls/package.json index e6fe359190..2d9121c952 100644 --- a/packages/ondevice-controls/package.json +++ b/packages/ondevice-controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-controls", - "version": "8.5.3", + "version": "8.5.4-alpha.0", "description": "Display storybook controls on your device.", "keywords": [ "addon", @@ -32,8 +32,8 @@ "dependencies": { "@storybook/addon-controls": "^8.5.1", "@storybook/core": "^8.5.1", - "@storybook/react-native-theming": "^8.5.3", - "@storybook/react-native-ui": "^8.5.3", + "@storybook/react-native-theming": "^8.5.4-alpha.0", + "@storybook/react-native-ui": "^8.5.4-alpha.0", "deep-equal": "^1.0.1", "prop-types": "^15.7.2", "react-native-modal-datetime-picker": "^14.0.0", diff --git a/packages/ondevice-notes/package.json b/packages/ondevice-notes/package.json index 716efa562e..6913314a12 100644 --- a/packages/ondevice-notes/package.json +++ b/packages/ondevice-notes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-notes", - "version": "8.5.3", + "version": "8.5.4-alpha.0", "description": "Write notes for your react-native Storybook stories.", "keywords": [ "addon", @@ -30,7 +30,7 @@ }, "dependencies": { "@storybook/core": "^8.5.1", - "@storybook/react-native-theming": "^8.5.3", + "@storybook/react-native-theming": "^8.5.4-alpha.0", "react-native-markdown-display": "^7.0.2" }, "devDependencies": { diff --git a/packages/react-native-theming/package.json b/packages/react-native-theming/package.json index a366f1ac6d..ba6b3527b8 100644 --- a/packages/react-native-theming/package.json +++ b/packages/react-native-theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-theming", - "version": "8.5.3", + "version": "8.5.4-alpha.0", "description": "A wrapper library around emotion 11 to provide theming support for react-native storybook", "keywords": [ "react", diff --git a/packages/react-native-ui/package.json b/packages/react-native-ui/package.json index 625173084a..f231b54296 100644 --- a/packages/react-native-ui/package.json +++ b/packages/react-native-ui/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-ui", - "version": "8.5.3", + "version": "8.5.4-alpha.0", "description": "ui components for react native storybook", "keywords": [ "react", @@ -60,7 +60,7 @@ "dependencies": { "@storybook/core": "^8.5.1", "@storybook/react": "^8.5.1", - "@storybook/react-native-theming": "^8.5.3", + "@storybook/react-native-theming": "^8.5.4-alpha.0", "fuse.js": "^7.0.0", "memoizerific": "^1.11.3", "polished": "^4.3.1", diff --git a/packages/react-native/package.json b/packages/react-native/package.json index 1a2b26f00b..50f08bfa84 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native", - "version": "8.5.3", + "version": "8.5.4-alpha.0", "description": "A better way to develop React Native Components for your app", "keywords": [ "react", @@ -49,8 +49,8 @@ "@storybook/csf": "^0.1.13", "@storybook/global": "^5.0.0", "@storybook/react": "^8.5.1", - "@storybook/react-native-theming": "^8.5.3", - "@storybook/react-native-ui": "^8.5.3", + "@storybook/react-native-theming": "^8.5.4-alpha.0", + "@storybook/react-native-ui": "^8.5.4-alpha.0", "commander": "^8.2.0", "dedent": "^1.5.1", "deepmerge": "^4.3.0", diff --git a/yarn.lock b/yarn.lock index 7f4e155c33..e308e61552 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5124,7 +5124,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-ondevice-actions@npm:^8.5.3, @storybook/addon-ondevice-actions@workspace:packages/ondevice-actions": +"@storybook/addon-ondevice-actions@npm:^8.5.4-alpha.0, @storybook/addon-ondevice-actions@workspace:packages/ondevice-actions": version: 0.0.0-use.local resolution: "@storybook/addon-ondevice-actions@workspace:packages/ondevice-actions" dependencies: @@ -5139,12 +5139,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-ondevice-backgrounds@npm:^8.5.3, @storybook/addon-ondevice-backgrounds@workspace:packages/ondevice-backgrounds": +"@storybook/addon-ondevice-backgrounds@npm:^8.5.4-alpha.0, @storybook/addon-ondevice-backgrounds@workspace:packages/ondevice-backgrounds": version: 0.0.0-use.local resolution: "@storybook/addon-ondevice-backgrounds@workspace:packages/ondevice-backgrounds" dependencies: "@storybook/core": "npm:^8.5.1" - "@storybook/react-native-theming": "npm:^8.5.3" + "@storybook/react-native-theming": "npm:^8.5.4-alpha.0" typescript: "npm:^5.3.3" peerDependencies: react: "*" @@ -5152,14 +5152,14 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-ondevice-controls@npm:^8.5.3, @storybook/addon-ondevice-controls@workspace:packages/ondevice-controls": +"@storybook/addon-ondevice-controls@npm:^8.5.4-alpha.0, @storybook/addon-ondevice-controls@workspace:packages/ondevice-controls": version: 0.0.0-use.local resolution: "@storybook/addon-ondevice-controls@workspace:packages/ondevice-controls" dependencies: "@storybook/addon-controls": "npm:^8.5.1" "@storybook/core": "npm:^8.5.1" - "@storybook/react-native-theming": "npm:^8.5.3" - "@storybook/react-native-ui": "npm:^8.5.3" + "@storybook/react-native-theming": "npm:^8.5.4-alpha.0" + "@storybook/react-native-ui": "npm:^8.5.4-alpha.0" cross-env: "npm:^7.0.3" deep-equal: "npm:^1.0.1" prop-types: "npm:^15.7.2" @@ -5176,12 +5176,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-ondevice-notes@npm:^8.5.3, @storybook/addon-ondevice-notes@workspace:packages/ondevice-notes": +"@storybook/addon-ondevice-notes@npm:^8.5.4-alpha.0, @storybook/addon-ondevice-notes@workspace:packages/ondevice-notes": version: 0.0.0-use.local resolution: "@storybook/addon-ondevice-notes@workspace:packages/ondevice-notes" dependencies: "@storybook/core": "npm:^8.5.1" - "@storybook/react-native-theming": "npm:^8.5.3" + "@storybook/react-native-theming": "npm:^8.5.4-alpha.0" react-native-markdown-display: "npm:^7.0.2" typescript: "npm:^5.3.3" peerDependencies: @@ -5496,7 +5496,7 @@ __metadata: languageName: node linkType: hard -"@storybook/react-native-theming@npm:^8.5.3, @storybook/react-native-theming@workspace:packages/react-native-theming": +"@storybook/react-native-theming@npm:^8.5.4-alpha.0, @storybook/react-native-theming@workspace:packages/react-native-theming": version: 0.0.0-use.local resolution: "@storybook/react-native-theming@workspace:packages/react-native-theming" dependencies: @@ -5510,13 +5510,13 @@ __metadata: languageName: unknown linkType: soft -"@storybook/react-native-ui@npm:^8.5.3, @storybook/react-native-ui@workspace:packages/react-native-ui": +"@storybook/react-native-ui@npm:^8.5.4-alpha.0, @storybook/react-native-ui@workspace:packages/react-native-ui": version: 0.0.0-use.local resolution: "@storybook/react-native-ui@workspace:packages/react-native-ui" dependencies: "@storybook/core": "npm:^8.5.1" "@storybook/react": "npm:^8.5.1" - "@storybook/react-native-theming": "npm:^8.5.3" + "@storybook/react-native-theming": "npm:^8.5.4-alpha.0" "@types/jest": "npm:^29.4.3" "@types/react": "npm:~18.3.12" babel-jest: "npm:^29.7.0" @@ -5540,7 +5540,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/react-native@npm:^8.5.3, @storybook/react-native@workspace:packages/react-native": +"@storybook/react-native@npm:^8.5.4-alpha.0, @storybook/react-native@workspace:packages/react-native": version: 0.0.0-use.local resolution: "@storybook/react-native@workspace:packages/react-native" dependencies: @@ -5548,8 +5548,8 @@ __metadata: "@storybook/csf": "npm:^0.1.13" "@storybook/global": "npm:^5.0.0" "@storybook/react": "npm:^8.5.1" - "@storybook/react-native-theming": "npm:^8.5.3" - "@storybook/react-native-ui": "npm:^8.5.3" + "@storybook/react-native-theming": "npm:^8.5.4-alpha.0" + "@storybook/react-native-ui": "npm:^8.5.4-alpha.0" "@types/jest": "npm:^29.4.3" "@types/react": "npm:~18.3.12" babel-jest: "npm:^29.7.0" @@ -9977,10 +9977,10 @@ __metadata: "@storybook/addon-essentials": "npm:^8.5.1" "@storybook/addon-interactions": "npm:^8.5.1" "@storybook/addon-links": "npm:^8.5.1" - "@storybook/addon-ondevice-actions": "npm:^8.5.3" - "@storybook/addon-ondevice-backgrounds": "npm:^8.5.3" - "@storybook/addon-ondevice-controls": "npm:^8.5.3" - "@storybook/addon-ondevice-notes": "npm:^8.5.3" + "@storybook/addon-ondevice-actions": "npm:^8.5.4-alpha.0" + "@storybook/addon-ondevice-backgrounds": "npm:^8.5.4-alpha.0" + "@storybook/addon-ondevice-controls": "npm:^8.5.4-alpha.0" + "@storybook/addon-ondevice-notes": "npm:^8.5.4-alpha.0" "@storybook/addon-react-native-server": "npm:0.0.6" "@storybook/addon-react-native-web": "npm:^0.0.26" "@storybook/addon-webpack5-compiler-babel": "npm:^3.0.3" @@ -9988,8 +9988,8 @@ __metadata: "@storybook/builder-webpack5": "npm:^8.5.1" "@storybook/global": "npm:^5.0.0" "@storybook/react": "npm:^8.5.1" - "@storybook/react-native": "npm:^8.5.3" - "@storybook/react-native-theming": "npm:^8.5.3" + "@storybook/react-native": "npm:^8.5.4-alpha.0" + "@storybook/react-native-theming": "npm:^8.5.4-alpha.0" "@storybook/react-webpack5": "npm:^8.5.1" "@storybook/test": "npm:^8.5.1" "@testing-library/react-native": "npm:12.4.3"