From 9c4118883d22345466420aa24f580665ce0bb464 Mon Sep 17 00:00:00 2001 From: Marcelo Shima Date: Tue, 11 Jun 2024 11:34:08 -0300 Subject: [PATCH] Storybook2 (#1795) * Bump the storybook group across 1 directory with 3 updates Bumps the storybook group with 3 updates in the /generators/react-native/templates directory: [@storybook/addons](https://github.com/storybookjs/storybook/tree/HEAD/code/deprecated/addons), [@storybook/react-native](https://github.com/storybookjs/react-native/tree/HEAD/packages/react-native) and [@storybook/theming](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/theming). Updates `@storybook/addons` from 7.6.13 to 7.6.17 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/v7.6.17/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v7.6.17/code/deprecated/addons) Updates `@storybook/react-native` from 6.5.7 to 7.6.19 - [Release notes](https://github.com/storybookjs/react-native/releases) - [Changelog](https://github.com/storybookjs/react-native/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/react-native/commits/v7.6.19/packages/react-native) Updates `@storybook/theming` from 7.6.17 to 8.1.6 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.1.6/code/lib/theming) --- updated-dependencies: - dependency-name: "@storybook/addons" dependency-type: direct:development update-type: version-update:semver-patch dependency-group: storybook - dependency-name: "@storybook/react-native" dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/theming" dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook ... Signed-off-by: dependabot[bot] * storybook migration * adjust to @storybook/react-native * add storybook.requires * convert to ts * Update storybook.requires.ts.ejs * Update storybook.requires.ts.ejs * Use recommendation for setting storage * Upgrade to Expo 51.0.12 --------- Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Matt Raible --- .../app/__snapshots__/generator.spec.mjs.snap | 6 ++ .../generator-entity.spec.mjs.snap | 9 ++ .../__snapshots__/generator.spec.mjs.snap | 18 ++++ generators/react-native/files.mjs | 1 + .../react-native/resources/expo/package.json | 2 +- .../templates/storybook/index.js.ejs | 10 ++- .../storybook/storybook.requires.ts.ejs | 85 +++++++++++++++++++ 7 files changed, 129 insertions(+), 2 deletions(-) create mode 100644 generators/react-native/templates/storybook/storybook.requires.ts.ejs diff --git a/generators/app/__snapshots__/generator.spec.mjs.snap b/generators/app/__snapshots__/generator.spec.mjs.snap index 34ce1baba..9f1e71f21 100644 --- a/generators/app/__snapshots__/generator.spec.mjs.snap +++ b/generators/app/__snapshots__/generator.spec.mjs.snap @@ -398,6 +398,9 @@ exports[`SubGenerator app of reactNative JHipster blueprint > run > should succe "../client/storybook/stories.js": { "stateCleared": "modified", }, + "../client/storybook/storybook.requires.ts": { + "stateCleared": "modified", + }, "../client/test/setup.js": { "stateCleared": "modified", }, @@ -892,6 +895,9 @@ exports[`SubGenerator app of reactNative JHipster blueprint > with custom reactN "../reactNative-app/storybook/stories.js": { "stateCleared": "modified", }, + "../reactNative-app/storybook/storybook.requires.ts": { + "stateCleared": "modified", + }, "../reactNative-app/test/setup.js": { "stateCleared": "modified", }, diff --git a/generators/react-native/__snapshots__/generator-entity.spec.mjs.snap b/generators/react-native/__snapshots__/generator-entity.spec.mjs.snap index 083004771..0cf1c2c95 100644 --- a/generators/react-native/__snapshots__/generator-entity.spec.mjs.snap +++ b/generators/react-native/__snapshots__/generator-entity.spec.mjs.snap @@ -434,6 +434,9 @@ exports[`SubGenerator reactNative of reactNative JHipster blueprint > Entity Tes "storybook/stories.js": { "stateCleared": "modified", }, + "storybook/storybook.requires.ts": { + "stateCleared": "modified", + }, "test/setup.js": { "stateCleared": "modified", }, @@ -907,6 +910,9 @@ exports[`SubGenerator reactNative of reactNative JHipster blueprint > Entity Tes "storybook/stories.js": { "stateCleared": "modified", }, + "storybook/storybook.requires.ts": { + "stateCleared": "modified", + }, "test/setup.js": { "stateCleared": "modified", }, @@ -1413,6 +1419,9 @@ exports[`SubGenerator reactNative of reactNative JHipster blueprint > Entity Tes "storybook/stories.js": { "stateCleared": "modified", }, + "storybook/storybook.requires.ts": { + "stateCleared": "modified", + }, "test/setup.js": { "stateCleared": "modified", }, diff --git a/generators/react-native/__snapshots__/generator.spec.mjs.snap b/generators/react-native/__snapshots__/generator.spec.mjs.snap index b39f26888..63afebcfd 100644 --- a/generators/react-native/__snapshots__/generator.spec.mjs.snap +++ b/generators/react-native/__snapshots__/generator.spec.mjs.snap @@ -371,6 +371,9 @@ exports[`SubGenerator reactNative of reactNative JHipster blueprint > WebSocket "storybook/stories.js": { "stateCleared": "modified", }, + "storybook/storybook.requires.ts": { + "stateCleared": "modified", + }, "test/setup.js": { "stateCleared": "modified", }, @@ -832,6 +835,9 @@ exports[`SubGenerator reactNative of reactNative JHipster blueprint > WebSocket "storybook/stories.js": { "stateCleared": "modified", }, + "storybook/storybook.requires.ts": { + "stateCleared": "modified", + }, "test/setup.js": { "stateCleared": "modified", }, @@ -1281,6 +1287,9 @@ exports[`SubGenerator reactNative of reactNative JHipster blueprint > WebSocket "storybook/stories.js": { "stateCleared": "modified", }, + "storybook/storybook.requires.ts": { + "stateCleared": "modified", + }, "test/setup.js": { "stateCleared": "modified", }, @@ -1769,6 +1778,9 @@ exports[`SubGenerator reactNative of reactNative JHipster blueprint > WebSocket "storybook/stories.js": { "stateCleared": "modified", }, + "storybook/storybook.requires.ts": { + "stateCleared": "modified", + }, "test/setup.js": { "stateCleared": "modified", }, @@ -2200,6 +2212,9 @@ exports[`SubGenerator reactNative of reactNative JHipster blueprint > WebSocket "storybook/stories.js": { "stateCleared": "modified", }, + "storybook/storybook.requires.ts": { + "stateCleared": "modified", + }, "test/setup.js": { "stateCleared": "modified", }, @@ -2634,6 +2649,9 @@ exports[`SubGenerator reactNative of reactNative JHipster blueprint > WebSocket "storybook/stories.js": { "stateCleared": "modified", }, + "storybook/storybook.requires.ts": { + "stateCleared": "modified", + }, "test/setup.js": { "stateCleared": "modified", }, diff --git a/generators/react-native/files.mjs b/generators/react-native/files.mjs index ece904b70..3a0fc4777 100644 --- a/generators/react-native/files.mjs +++ b/generators/react-native/files.mjs @@ -122,6 +122,7 @@ const files = { 'patches/react-native-sectioned-multi-select+0.8.1.patch', 'storybook/addons.js', 'storybook/index.js', + 'storybook/storybook.requires.ts', 'storybook/stories.js', 'test/spec/shared/components/alert-message/alert-message.spec.js', 'test/spec/shared/components/rounded-button/rounded-button.spec.js', diff --git a/generators/react-native/resources/expo/package.json b/generators/react-native/resources/expo/package.json index 1130aa818..9325d3c3e 100644 --- a/generators/react-native/resources/expo/package.json +++ b/generators/react-native/resources/expo/package.json @@ -14,7 +14,7 @@ "@react-native-masked-view/masked-view": "0.3.1", "@react-native-picker/picker": "2.7.5", "@react-navigation/devtools": "6.0.26", - "expo": "51.0.11", + "expo": "51.0.12", "expo-auth-session": "~5.5.2", "expo-constants": "~16.0.2", "expo-image-picker": "~15.0.5", diff --git a/generators/react-native/templates/storybook/index.js.ejs b/generators/react-native/templates/storybook/index.js.ejs index 6c3b5c894..76245a3ce 100644 --- a/generators/react-native/templates/storybook/index.js.ejs +++ b/generators/react-native/templates/storybook/index.js.ejs @@ -1,4 +1,5 @@ import { getStorybookUI, configure } from '@storybook/react-native/V6' +import './storybook.requires'; import { View } from 'react-native' import AsyncStorage from '@react-native-async-storage/async-storage'; import AppConfig from '../app/config/app-config'; @@ -8,6 +9,13 @@ configure(() => { require('./stories') }, module) -const StorybookUIRoot = AppConfig.debugMode ? getStorybookUI({ asyncStorage: AsyncStorage }) : View; +const StorybookUIRoot = AppConfig.debugMode + ? getStorybookUI({ + storage: { + getItem: AsyncStorage.getItem, + setItem: AsyncStorage.setItem, + }, + }) + : View; export default StorybookUIRoot diff --git a/generators/react-native/templates/storybook/storybook.requires.ts.ejs b/generators/react-native/templates/storybook/storybook.requires.ts.ejs new file mode 100644 index 000000000..c4c4694b6 --- /dev/null +++ b/generators/react-native/templates/storybook/storybook.requires.ts.ejs @@ -0,0 +1,85 @@ +/* do not change this file, it is auto generated by storybook. */ + +import { + start, + prepareStories, + getProjectAnnotations, +} from "@storybook/react-native"; + +/* +import "@storybook/addon-ondevice-notes/register"; +import "@storybook/addon-ondevice-controls/register"; +import "@storybook/addon-ondevice-knobs/register"; +import "@storybook/addon-ondevice-backgrounds/register"; +import "@storybook/addon-ondevice-actions/register"; +*/ + +const normalizedStories = [ + { + titlePrefix: "", + directory: "./components", + files: "**/*.stories.?(ts|tsx|js|jsx)", + importPathMatcher: + /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/, + // @ts-ignore + req: require.context( + "../components", + true, + /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/ + ), + }, + { + titlePrefix: "OtherComponents", + directory: "./other_components", + files: "**/*.stories.?(ts|tsx|js|jsx)", + importPathMatcher: + /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/, + // @ts-ignore + req: require.context( + "../other_components", + true, + /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/ + ), + }, +]; + +declare global { + var view: ReturnType; + var STORIES: typeof normalizedStories; +} + +const annotations = [ + // require("./preview"), + require("@storybook/react-native/dist/preview"), + // require("@storybook/addon-actions/preview"), +]; + +global.STORIES = normalizedStories; + +// @ts-ignore +module?.hot?.accept?.(); + +const options = { playFn: false }; + +if (!global.view) { + global.view = start({ + annotations, + storyEntries: normalizedStories, + options, + }); +} else { + const { importMap } = prepareStories({ + storyEntries: normalizedStories, + options, + }); + + global.view._preview.onStoriesChanged({ + importFn: async (importPath: string) => importMap[importPath], + }); + + global.view._preview.onGetProjectAnnotationsChanged({ + getProjectAnnotations: getProjectAnnotations(global.view, annotations), + }); +} + +export const view = global.view;