From 949c687d8691314d5985c7ce94a263b3a2e870d0 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 3 Nov 2024 23:40:14 +0800 Subject: [PATCH 01/39] React Native Web Vite: WIP framework, sandboxes, and CLI integration --- code/core/src/cli/detect.ts | 2 + code/core/src/cli/project_types.ts | 1 + code/core/src/common/versions.ts | 1 + code/core/src/types/modules/frameworks.ts | 1 + .../react-native-web-vite/README.md | 3 + .../react-native-web-vite/package.json | 88 +++ .../react-native-web-vite/preset.js | 1 + .../react-native-web-vite/project.json | 8 + .../react-native-web-vite/src/index.ts | 1 + .../react-native-web-vite/src/preset.ts | 90 +++ .../react-native-web-vite/src/types.ts | 68 +++ .../react-native-web-vite/tsconfig.json | 11 + .../react-native-web-vite/vitest.config.ts | 10 + .../cli-storybook/src/sandbox-templates.ts | 23 + .../src/generators/REACT_NATIVE_WEB/index.ts | 28 + code/lib/create-storybook/src/initiate.ts | 7 + code/yarn.lock | 568 +++++++++++++++++- scripts/sandbox/generate.ts | 2 + scripts/tasks/sandbox-parts.ts | 2 + 19 files changed, 914 insertions(+), 1 deletion(-) create mode 100644 code/frameworks/react-native-web-vite/README.md create mode 100644 code/frameworks/react-native-web-vite/package.json create mode 100644 code/frameworks/react-native-web-vite/preset.js create mode 100644 code/frameworks/react-native-web-vite/project.json create mode 100644 code/frameworks/react-native-web-vite/src/index.ts create mode 100644 code/frameworks/react-native-web-vite/src/preset.ts create mode 100644 code/frameworks/react-native-web-vite/src/types.ts create mode 100644 code/frameworks/react-native-web-vite/tsconfig.json create mode 100644 code/frameworks/react-native-web-vite/vitest.config.ts create mode 100644 code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts diff --git a/code/core/src/cli/detect.ts b/code/core/src/cli/detect.ts index 09ef8cae02cf..5b50abee4301 100644 --- a/code/core/src/cli/detect.ts +++ b/code/core/src/cli/detect.ts @@ -130,6 +130,8 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp // Fallback to Vite or Webpack based on project type switch (projectType) { + case ProjectType.REACT_NATIVE_WEB: + return CoreBuilder.Vite; case ProjectType.REACT_SCRIPTS: case ProjectType.ANGULAR: case ProjectType.REACT_NATIVE: // technically react native doesn't use webpack, we just want to set something diff --git a/code/core/src/cli/project_types.ts b/code/core/src/cli/project_types.ts index 5d7d4a4d3ead..25148d2bc089 100644 --- a/code/core/src/cli/project_types.ts +++ b/code/core/src/cli/project_types.ts @@ -47,6 +47,7 @@ export enum ProjectType { REACT = 'REACT', REACT_SCRIPTS = 'REACT_SCRIPTS', REACT_NATIVE = 'REACT_NATIVE', + REACT_NATIVE_WEB = 'REACT_NATIVE_WEB', REACT_PROJECT = 'REACT_PROJECT', WEBPACK_REACT = 'WEBPACK_REACT', NEXTJS = 'NEXTJS', diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 68001af0ed44..a3fcf098d3a1 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -48,6 +48,7 @@ export default { '@storybook/nextjs': '8.5.0-alpha.2', '@storybook/preact-vite': '8.5.0-alpha.2', '@storybook/preact-webpack5': '8.5.0-alpha.2', + '@storybook/react-native-web-vite': '8.5.0-alpha.2', '@storybook/react-vite': '8.5.0-alpha.2', '@storybook/react-webpack5': '8.5.0-alpha.2', '@storybook/server-webpack5': '8.5.0-alpha.2', diff --git a/code/core/src/types/modules/frameworks.ts b/code/core/src/types/modules/frameworks.ts index 2f2028db810b..e3e1b6383a7f 100644 --- a/code/core/src/types/modules/frameworks.ts +++ b/code/core/src/types/modules/frameworks.ts @@ -8,6 +8,7 @@ export type SupportedFrameworks = | 'nextjs' | 'preact-vite' | 'preact-webpack5' + | 'react-native-web-vite' | 'react-vite' | 'react-webpack5' | 'server-webpack5' diff --git a/code/frameworks/react-native-web-vite/README.md b/code/frameworks/react-native-web-vite/README.md new file mode 100644 index 000000000000..c6b6e6abf0a4 --- /dev/null +++ b/code/frameworks/react-native-web-vite/README.md @@ -0,0 +1,3 @@ +# Storybook for React & Vite + +See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json new file mode 100644 index 000000000000..0c9d3ee7a369 --- /dev/null +++ b/code/frameworks/react-native-web-vite/package.json @@ -0,0 +1,88 @@ +{ + "name": "@storybook/react-native-web-vite", + "version": "8.5.0-alpha.2", + "description": "Develop react-native components an isolated web environment with hot reloading.", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/react-native-web-vite", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "code/frameworks/react-native-web-vite" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "node": "./dist/index.js", + "import": "./dist/index.mjs", + "require": "./dist/index.js" + }, + "./preset": { + "types": "./dist/preset.d.ts", + "require": "./dist/preset.js" + }, + "./package.json": "./package.json" + }, + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", + "files": [ + "dist/**/*", + "template/cli/**/*", + "README.md", + "*.js", + "*.d.ts", + "!src/**/*" + ], + "scripts": { + "check": "jiti ../../../scripts/prepare/check.ts", + "prep": "jiti ../../../scripts/prepare/bundle.ts" + }, + "dependencies": { + "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0", + "@rollup/pluginutils": "^5.0.2", + "@storybook/builder-vite": "workspace:*", + "@storybook/react": "workspace:*", + "@vitejs/plugin-react": "^4.3.2", + "find-up": "^5.0.0", + "magic-string": "^0.30.0", + "react-docgen": "^7.0.0", + "resolve": "^1.22.8", + "tsconfig-paths": "^4.2.0", + "vite": "^4.0.0 || ^5.0.0" + }, + "devDependencies": { + "@types/node": "^22.0.0", + "typescript": "^5.3.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-native": ">=0.74.5", + "react-native-web": "^0.19.12", + "storybook": "workspace:^" + }, + "engines": { + "node": ">=18.0.0" + }, + "publishConfig": { + "access": "public" + }, + "bundler": { + "entries": [ + "./src/index.ts", + "./src/preset.ts" + ], + "platform": "node" + }, + "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" +} diff --git a/code/frameworks/react-native-web-vite/preset.js b/code/frameworks/react-native-web-vite/preset.js new file mode 100644 index 000000000000..a83f95279e7f --- /dev/null +++ b/code/frameworks/react-native-web-vite/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/preset'); diff --git a/code/frameworks/react-native-web-vite/project.json b/code/frameworks/react-native-web-vite/project.json new file mode 100644 index 000000000000..219e9c00077d --- /dev/null +++ b/code/frameworks/react-native-web-vite/project.json @@ -0,0 +1,8 @@ +{ + "name": "react-native-web-vite", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "targets": { + "build": {} + } +} diff --git a/code/frameworks/react-native-web-vite/src/index.ts b/code/frameworks/react-native-web-vite/src/index.ts new file mode 100644 index 000000000000..1855ad61a70b --- /dev/null +++ b/code/frameworks/react-native-web-vite/src/index.ts @@ -0,0 +1 @@ +export type { FrameworkOptions, StorybookConfig } from './types'; diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts new file mode 100644 index 000000000000..d1eba924044d --- /dev/null +++ b/code/frameworks/react-native-web-vite/src/preset.ts @@ -0,0 +1,90 @@ +import { hasVitePlugins } from '@storybook/builder-vite'; + +import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react'; +import react from '@vitejs/plugin-react'; +import type { Plugin } from 'vite'; + +import type { FrameworkOptions, StorybookConfig } from './types'; + +function reactNativeWeb( + reactOptions: Omit & { babel?: BabelOptions } +): Plugin { + const plugin: Plugin = { + name: 'vite:react-native-web', + enforce: 'pre', + config(_userConfig, env) { + return { + plugins: [ + react({ + jsxRuntime: 'automatic', + ...reactOptions, + }), + ], + define: { + // reanimated support + 'global.__x': {}, + _frameTimestamp: undefined, + _WORKLET: false, + __DEV__: `${env.mode === 'development'}`, + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || env.mode), + }, + optimizeDeps: { + include: [], + esbuildOptions: { + jsx: 'transform', + resolveExtensions: [ + '.web.js', + '.web.ts', + '.web.tsx', + '.js', + '.jsx', + '.json', + '.ts', + '.tsx', + '.mjs', + ], + loader: { + '.js': 'jsx', + }, + }, + }, + resolve: { + extensions: [ + '.web.js', + '.web.ts', + '.web.tsx', + '.js', + '.jsx', + '.json', + '.ts', + '.tsx', + '.mjs', + ], + alias: { + 'react-native': 'react-native-web', + }, + }, + }; + }, + }; + + return plugin; +} + +export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => { + const { pluginReactOptions = {} } = + await options.presets.apply('frameworkOptions'); + + const { plugins = [] } = config; + + if (!(await hasVitePlugins(plugins, ['vite:react-native-web']))) { + plugins.push(reactNativeWeb(pluginReactOptions)); + } + + return config; +}; + +export const core = { + builder: '@storybook/builder-vite', + renderer: '@storybook/react', +}; diff --git a/code/frameworks/react-native-web-vite/src/types.ts b/code/frameworks/react-native-web-vite/src/types.ts new file mode 100644 index 000000000000..c0831eb06486 --- /dev/null +++ b/code/frameworks/react-native-web-vite/src/types.ts @@ -0,0 +1,68 @@ +import type { + CompatibleString, + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsBase, +} from 'storybook/internal/types'; + +import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite'; + +import type docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript'; +import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react'; + +type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>; +type BuilderName = CompatibleString<'@storybook/builder-vite'>; + +export type FrameworkOptions = { + builder?: BuilderOptions; + strictMode?: boolean; + /** + * Use React's legacy root API to mount components + * + * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g. + * concurrent features) If this flag is true, the legacy Root API is used to mount components to + * make it easier to migrate step by step to React 18. + * + * @default false + */ + legacyRootApi?: boolean; + + pluginReactOptions?: Omit & { babel?: BabelOptions }; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; +}; + +type TypescriptOptions = TypescriptOptionsBase & { + /** + * Sets the type of Docgen when working with React and TypeScript + * + * @default `'react-docgen'` + */ + reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false; + /** Configures `@joshwooding/vite-plugin-react-docgen-typescript` */ + reactDocgenTypescriptOptions: Parameters[0]; +}; + +/** The interface for Storybook configuration in `main.ts` files. */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigVite | keyof StorybookConfigFramework | 'typescript' +> & + StorybookConfigVite & + StorybookConfigFramework & { + typescript?: Partial; + }; diff --git a/code/frameworks/react-native-web-vite/tsconfig.json b/code/frameworks/react-native-web-vite/tsconfig.json new file mode 100644 index 000000000000..c749496d9a6e --- /dev/null +++ b/code/frameworks/react-native-web-vite/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "storybook/internal/*": ["../../lib/cli/core/*"] + }, + "rootDir": "./src" + }, + "extends": "../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/code/frameworks/react-native-web-vite/vitest.config.ts b/code/frameworks/react-native-web-vite/vitest.config.ts new file mode 100644 index 000000000000..7420176b2e46 --- /dev/null +++ b/code/frameworks/react-native-web-vite/vitest.config.ts @@ -0,0 +1,10 @@ +import { defineConfig, mergeConfig } from 'vitest/config'; + +import { vitestCommonConfig } from '../../vitest.workspace'; + +export default mergeConfig( + vitestCommonConfig, + defineConfig({ + // Add custom config here + }) +); diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index b474937769ff..f4684cef8e53 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -592,6 +592,29 @@ const baseTemplates = { builder: '@storybook/builder-webpack5', }, }, + 'react-native-web-vite/expo-ts': { + name: 'React Native Expo Latest (Vite | TypeScript)', + script: 'npx create-expo-app -y {{beforeDir}}', + inDevelopment: true, + expected: { + framework: '@storybook/react-native-web-vite', + renderer: '@storybook/react', + builder: '@storybook/builder-vite', + }, + skipTasks: ['bench'], + }, + 'react-native-web-vite/rn-cli-ts': { + name: 'React Native CLI Latest (Vite | TypeScript)', + script: + 'npx @react-native-community/cli@latest init --install-pods=false --directory={{beforeDir}} rnapp', + inDevelopment: true, + expected: { + framework: '@storybook/react-native-web-vite', + renderer: '@storybook/react', + builder: '@storybook/builder-vite', + }, + skipTasks: ['bench'], + }, } satisfies Record; /** diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts new file mode 100644 index 000000000000..721987d46661 --- /dev/null +++ b/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts @@ -0,0 +1,28 @@ +import { detectLanguage } from 'storybook/internal/cli'; +import { SupportedLanguage } from 'storybook/internal/cli'; + +import { baseGenerator } from '../baseGenerator'; +import type { Generator } from '../types'; + +const generator: Generator = async (packageManager, npmOptions, options) => { + // Add prop-types dependency if not using TypeScript + const language = await detectLanguage(packageManager); + const extraPackages = ['vite']; + if (language === SupportedLanguage.JAVASCRIPT) { + extraPackages.push('prop-types'); + } + + await baseGenerator( + packageManager, + npmOptions, + options, + 'react', + { + extraPackages, + extraAddons: [`@storybook/addon-onboarding`], + }, + 'react-native-web-vite' + ); +}; + +export default generator; diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts index 868834a1e144..6c1c6559d262 100644 --- a/code/lib/create-storybook/src/initiate.ts +++ b/code/lib/create-storybook/src/initiate.ts @@ -31,6 +31,7 @@ import preactGenerator from './generators/PREACT'; import qwikGenerator from './generators/QWIK'; import reactGenerator from './generators/REACT'; import reactNativeGenerator from './generators/REACT_NATIVE'; +import reactNativeWebGenerator from './generators/REACT_NATIVE_WEB'; import reactScriptsGenerator from './generators/REACT_SCRIPTS'; import serverGenerator from './generators/SERVER'; import solidGenerator from './generators/SOLID'; @@ -84,6 +85,12 @@ const installStorybook = async ( ); } + case ProjectType.REACT_NATIVE_WEB: { + return reactNativeWebGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "React Native" app') + ); + } + case ProjectType.QWIK: { return qwikGenerator(packageManager, npmOptions, generatorOptions).then( commandLog('Adding Storybook support to your "Qwik" app') diff --git a/code/yarn.lock b/code/yarn.lock index 272933533d60..c6134557544d 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -377,6 +377,17 @@ __metadata: languageName: node linkType: hard +"@babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0": + version: 7.26.2 + resolution: "@babel/code-frame@npm:7.26.2" + dependencies: + "@babel/helper-validator-identifier": "npm:^7.25.9" + js-tokens: "npm:^4.0.0" + picocolors: "npm:^1.0.0" + checksum: 10c0/7d79621a6849183c415486af99b1a20b84737e8c11cd55b6544f688c51ce1fd710e6d869c3dd21232023da272a79b91efb3e83b5bc2dc65c1187c5fcd1b72ea8 + languageName: node + linkType: hard + "@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.4, @babel/compat-data@npm:^7.25.2": version: 7.25.2 resolution: "@babel/compat-data@npm:7.25.2" @@ -384,6 +395,13 @@ __metadata: languageName: node linkType: hard +"@babel/compat-data@npm:^7.25.9": + version: 7.26.2 + resolution: "@babel/compat-data@npm:7.26.2" + checksum: 10c0/c9b5f3724828d17f728a778f9d66c19b55c018d0d76de6d731178cca64f182c22b71400a73bf2b65dcc4fcfe52b630088a94d5902911b54206aa90e3ffe07d12 + languageName: node + linkType: hard + "@babel/core@npm:7.23.9": version: 7.23.9 resolution: "@babel/core@npm:7.23.9" @@ -453,6 +471,29 @@ __metadata: languageName: node linkType: hard +"@babel/core@npm:^7.25.2": + version: 7.26.0 + resolution: "@babel/core@npm:7.26.0" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.26.0" + "@babel/generator": "npm:^7.26.0" + "@babel/helper-compilation-targets": "npm:^7.25.9" + "@babel/helper-module-transforms": "npm:^7.26.0" + "@babel/helpers": "npm:^7.26.0" + "@babel/parser": "npm:^7.26.0" + "@babel/template": "npm:^7.25.9" + "@babel/traverse": "npm:^7.25.9" + "@babel/types": "npm:^7.26.0" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10c0/91de73a7ff5c4049fbc747930aa039300e4d2670c2a91f5aa622f1b4868600fc89b01b6278385fbcd46f9574186fa3d9b376a9e7538e50f8d118ec13cfbcb63e + languageName: node + linkType: hard + "@babel/generator@npm:7.17.7": version: 7.17.7 resolution: "@babel/generator@npm:7.17.7" @@ -488,6 +529,19 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.25.9, @babel/generator@npm:^7.26.0": + version: 7.26.2 + resolution: "@babel/generator@npm:7.26.2" + dependencies: + "@babel/parser": "npm:^7.26.2" + "@babel/types": "npm:^7.26.0" + "@jridgewell/gen-mapping": "npm:^0.3.5" + "@jridgewell/trace-mapping": "npm:^0.3.25" + jsesc: "npm:^3.0.2" + checksum: 10c0/167ebce8977142f5012fad6bd91da51ac52bcd752f2261a54b7ab605d928aebe57e21636cdd2a9c7757e552652c68d9fcb5d40b06fcb66e02d9ee7526e118a5c + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" @@ -529,6 +583,19 @@ __metadata: languageName: node linkType: hard +"@babel/helper-compilation-targets@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-compilation-targets@npm:7.25.9" + dependencies: + "@babel/compat-data": "npm:^7.25.9" + "@babel/helper-validator-option": "npm:^7.25.9" + browserslist: "npm:^4.24.0" + lru-cache: "npm:^5.1.1" + semver: "npm:^6.3.1" + checksum: 10c0/a6b26a1e4222e69ef8e62ee19374308f060b007828bc11c65025ecc9e814aba21ff2175d6d3f8bf53c863edd728ee8f94ba7870f8f90a37d39552ad9933a8aaa + languageName: node + linkType: hard + "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.24.0, @babel/helper-create-class-features-plugin@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-create-class-features-plugin@npm:7.24.7" @@ -639,6 +706,16 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-imports@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-module-imports@npm:7.25.9" + dependencies: + "@babel/traverse": "npm:^7.25.9" + "@babel/types": "npm:^7.25.9" + checksum: 10c0/078d3c2b45d1f97ffe6bb47f61961be4785d2342a4156d8b42c92ee4e1b7b9e365655dd6cb25329e8fe1a675c91eeac7e3d04f0c518b67e417e29d6e27b6aa70 + languageName: node + linkType: hard + "@babel/helper-module-transforms@npm:^7.23.3, @babel/helper-module-transforms@npm:^7.24.7, @babel/helper-module-transforms@npm:^7.25.2": version: 7.25.2 resolution: "@babel/helper-module-transforms@npm:7.25.2" @@ -653,6 +730,19 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-transforms@npm:^7.26.0": + version: 7.26.0 + resolution: "@babel/helper-module-transforms@npm:7.26.0" + dependencies: + "@babel/helper-module-imports": "npm:^7.25.9" + "@babel/helper-validator-identifier": "npm:^7.25.9" + "@babel/traverse": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10c0/ee111b68a5933481d76633dad9cdab30c41df4479f0e5e1cc4756dc9447c1afd2c9473b5ba006362e35b17f4ebddd5fca090233bef8dfc84dca9d9127e56ec3a + languageName: node + linkType: hard + "@babel/helper-optimise-call-expression@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-optimise-call-expression@npm:7.24.7" @@ -669,6 +759,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-plugin-utils@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-plugin-utils@npm:7.25.9" + checksum: 10c0/483066a1ba36ff16c0116cd24f93de05de746a603a777cd695ac7a1b034928a65a4ecb35f255761ca56626435d7abdb73219eba196f9aa83b6c3c3169325599d + languageName: node + linkType: hard + "@babel/helper-remap-async-to-generator@npm:^7.22.20, @babel/helper-remap-async-to-generator@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-remap-async-to-generator@npm:7.24.7" @@ -740,6 +837,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-string-parser@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-string-parser@npm:7.25.9" + checksum: 10c0/7244b45d8e65f6b4338a6a68a8556f2cb161b782343e97281a5f2b9b93e420cad0d9f5773a59d79f61d0c448913d06f6a2358a87f2e203cf112e3c5b53522ee6 + languageName: node + linkType: hard + "@babel/helper-validator-identifier@npm:^7.16.7, @babel/helper-validator-identifier@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-validator-identifier@npm:7.24.7" @@ -747,6 +851,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-validator-identifier@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-validator-identifier@npm:7.25.9" + checksum: 10c0/4fc6f830177b7b7e887ad3277ddb3b91d81e6c4a24151540d9d1023e8dc6b1c0505f0f0628ae653601eb4388a8db45c1c14b2c07a9173837aef7e4116456259d + languageName: node + linkType: hard + "@babel/helper-validator-option@npm:^7.22.15, @babel/helper-validator-option@npm:^7.23.5, @babel/helper-validator-option@npm:^7.24.8": version: 7.24.8 resolution: "@babel/helper-validator-option@npm:7.24.8" @@ -754,6 +865,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-validator-option@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-validator-option@npm:7.25.9" + checksum: 10c0/27fb195d14c7dcb07f14e58fe77c44eea19a6a40a74472ec05c441478fa0bb49fa1c32b2d64be7a38870ee48ef6601bdebe98d512f0253aea0b39756c4014f3e + languageName: node + linkType: hard + "@babel/helper-wrap-function@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-wrap-function@npm:7.24.7" @@ -776,6 +894,16 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.26.0": + version: 7.26.0 + resolution: "@babel/helpers@npm:7.26.0" + dependencies: + "@babel/template": "npm:^7.25.9" + "@babel/types": "npm:^7.26.0" + checksum: 10c0/343333cced6946fe46617690a1d0789346960910225ce359021a88a60a65bc0d791f0c5d240c0ed46cf8cc63b5fd7df52734ff14e43b9c32feae2b61b1647097 + languageName: node + linkType: hard + "@babel/highlight@npm:^7.24.7": version: 7.24.7 resolution: "@babel/highlight@npm:7.24.7" @@ -799,6 +927,17 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.2": + version: 7.26.2 + resolution: "@babel/parser@npm:7.26.2" + dependencies: + "@babel/types": "npm:^7.26.0" + bin: + parser: ./bin/babel-parser.js + checksum: 10c0/751a743087b3a9172a7599f1421830d44c38f065ef781588d2bfb1c98f9b461719a226feb13c868d7a284783eee120c88ea522593118f2668f46ebfb1105c4d7 + languageName: node + linkType: hard + "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4": version: 7.24.4 resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4" @@ -1722,6 +1861,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-jsx-self@npm:^7.24.7": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-jsx-self@npm:7.25.9" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/ce0e289f6af93d7c4dc6b385512199c5bb138ae61507b4d5117ba88b6a6b5092f704f1bdf80080b7d69b1b8c36649f2a0b250e8198667d4d30c08bbb1546bd99 + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx-source@npm:^7.19.6": version: 7.22.5 resolution: "@babel/plugin-transform-react-jsx-source@npm:7.22.5" @@ -1733,6 +1883,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-jsx-source@npm:^7.24.7": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-jsx-source@npm:7.25.9" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/fc9ee08efc9be7cbd2cc6788bbf92579adf3cab37912481f1b915221be3d22b0613b5b36a721df5f4c0ab65efe8582fcf8673caab83e6e1ce4cc04ceebf57dfa + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx@npm:^7.22.5, @babel/plugin-transform-react-jsx@npm:^7.23.4": version: 7.23.4 resolution: "@babel/plugin-transform-react-jsx@npm:7.23.4" @@ -2258,6 +2419,17 @@ __metadata: languageName: node linkType: hard +"@babel/template@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/template@npm:7.25.9" + dependencies: + "@babel/code-frame": "npm:^7.25.9" + "@babel/parser": "npm:^7.25.9" + "@babel/types": "npm:^7.25.9" + checksum: 10c0/ebe677273f96a36c92cc15b7aa7b11cc8bc8a3bb7a01d55b2125baca8f19cae94ff3ce15f1b1880fb8437f3a690d9f89d4e91f16fc1dc4d3eb66226d128983ab + languageName: node + linkType: hard + "@babel/traverse@npm:7.23.2": version: 7.23.2 resolution: "@babel/traverse@npm:7.23.2" @@ -2291,6 +2463,21 @@ __metadata: languageName: node linkType: hard +"@babel/traverse@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/traverse@npm:7.25.9" + dependencies: + "@babel/code-frame": "npm:^7.25.9" + "@babel/generator": "npm:^7.25.9" + "@babel/parser": "npm:^7.25.9" + "@babel/template": "npm:^7.25.9" + "@babel/types": "npm:^7.25.9" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 10c0/e90be586a714da4adb80e6cb6a3c5cfcaa9b28148abdafb065e34cc109676fc3db22cf98cd2b2fff66ffb9b50c0ef882cab0f466b6844be0f6c637b82719bba1 + languageName: node + linkType: hard + "@babel/types@npm:7.17.0": version: 7.17.0 resolution: "@babel/types@npm:7.17.0" @@ -2312,6 +2499,16 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0": + version: 7.26.0 + resolution: "@babel/types@npm:7.26.0" + dependencies: + "@babel/helper-string-parser": "npm:^7.25.9" + "@babel/helper-validator-identifier": "npm:^7.25.9" + checksum: 10c0/b694f41ad1597127e16024d766c33a641508aad037abd08d0d1f73af753e1119fa03b4a107d04b5f92cc19c095a594660547ae9bead1db2299212d644b0a5cb8 + languageName: node + linkType: hard + "@base2/pretty-print-object@npm:1.0.1": version: 1.0.1 resolution: "@base2/pretty-print-object@npm:1.0.1" @@ -5153,6 +5350,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-android-arm-eabi@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-android-arm-eabi@npm:4.24.3" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + "@rollup/rollup-android-arm-eabi@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-android-arm-eabi@npm:4.9.1" @@ -5160,6 +5364,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-android-arm64@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-android-arm64@npm:4.24.3" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-android-arm64@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-android-arm64@npm:4.9.1" @@ -5167,6 +5378,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-darwin-arm64@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-darwin-arm64@npm:4.24.3" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-darwin-arm64@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-darwin-arm64@npm:4.9.1" @@ -5174,6 +5392,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-darwin-x64@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-darwin-x64@npm:4.24.3" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "@rollup/rollup-darwin-x64@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-darwin-x64@npm:4.9.1" @@ -5181,6 +5406,27 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-freebsd-arm64@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-freebsd-arm64@npm:4.24.3" + conditions: os=freebsd & cpu=arm64 + languageName: node + linkType: hard + +"@rollup/rollup-freebsd-x64@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-freebsd-x64@npm:4.24.3" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + +"@rollup/rollup-linux-arm-gnueabihf@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.24.3" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-arm-gnueabihf@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.9.1" @@ -5188,6 +5434,20 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm-musleabihf@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.24.3" + conditions: os=linux & cpu=arm & libc=musl + languageName: node + linkType: hard + +"@rollup/rollup-linux-arm64-gnu@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.24.3" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-arm64-gnu@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.9.1" @@ -5195,6 +5455,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm64-musl@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-arm64-musl@npm:4.24.3" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + "@rollup/rollup-linux-arm64-musl@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-linux-arm64-musl@npm:4.9.1" @@ -5202,6 +5469,20 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-powerpc64le-gnu@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.24.3" + conditions: os=linux & cpu=ppc64 & libc=glibc + languageName: node + linkType: hard + +"@rollup/rollup-linux-riscv64-gnu@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.24.3" + conditions: os=linux & cpu=riscv64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-riscv64-gnu@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.9.1" @@ -5209,6 +5490,20 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-s390x-gnu@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.24.3" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@rollup/rollup-linux-x64-gnu@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-x64-gnu@npm:4.24.3" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-x64-gnu@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-linux-x64-gnu@npm:4.9.1" @@ -5216,6 +5511,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-x64-musl@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-x64-musl@npm:4.24.3" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + "@rollup/rollup-linux-x64-musl@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-linux-x64-musl@npm:4.9.1" @@ -5223,6 +5525,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-arm64-msvc@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.24.3" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-win32-arm64-msvc@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.9.1" @@ -5230,6 +5539,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-ia32-msvc@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.24.3" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + "@rollup/rollup-win32-ia32-msvc@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.9.1" @@ -5237,6 +5553,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-x64-msvc@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-win32-x64-msvc@npm:4.24.3" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@rollup/rollup-win32-x64-msvc@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-win32-x64-msvc@npm:4.9.1" @@ -6742,6 +7065,32 @@ __metadata: languageName: unknown linkType: soft +"@storybook/react-native-web-vite@workspace:frameworks/react-native-web-vite": + version: 0.0.0-use.local + resolution: "@storybook/react-native-web-vite@workspace:frameworks/react-native-web-vite" + dependencies: + "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.3.0" + "@rollup/pluginutils": "npm:^5.0.2" + "@storybook/builder-vite": "workspace:*" + "@storybook/react": "workspace:*" + "@types/node": "npm:^22.0.0" + "@vitejs/plugin-react": "npm:^4.3.2" + find-up: "npm:^5.0.0" + magic-string: "npm:^0.30.0" + react-docgen: "npm:^7.0.0" + resolve: "npm:^1.22.8" + tsconfig-paths: "npm:^4.2.0" + typescript: "npm:^5.3.2" + vite: "npm:^4.0.0 || ^5.0.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-native: ">=0.74.5" + react-native-web: ^0.19.12 + storybook: "workspace:^" + languageName: unknown + linkType: soft + "@storybook/react-vite@workspace:*, @storybook/react-vite@workspace:frameworks/react-vite": version: 0.0.0-use.local resolution: "@storybook/react-vite@workspace:frameworks/react-vite" @@ -7605,7 +7954,7 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:*, @types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0": +"@types/babel__core@npm:*, @types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0, @types/babel__core@npm:^7.20.5": version: 7.20.5 resolution: "@types/babel__core@npm:7.20.5" dependencies: @@ -7835,6 +8184,13 @@ __metadata: languageName: node linkType: hard +"@types/estree@npm:1.0.6": + version: 1.0.6 + resolution: "@types/estree@npm:1.0.6" + checksum: 10c0/cdfd751f6f9065442cd40957c07fd80361c962869aa853c1c2fd03e101af8b9389d8ff4955a43a6fcfa223dd387a089937f95be0f3eec21ca527039fd2d9859a + languageName: node + linkType: hard + "@types/estree@npm:^0.0.51": version: 0.0.51 resolution: "@types/estree@npm:0.0.51" @@ -8766,6 +9122,21 @@ __metadata: languageName: node linkType: hard +"@vitejs/plugin-react@npm:^4.3.2": + version: 4.3.3 + resolution: "@vitejs/plugin-react@npm:4.3.3" + dependencies: + "@babel/core": "npm:^7.25.2" + "@babel/plugin-transform-react-jsx-self": "npm:^7.24.7" + "@babel/plugin-transform-react-jsx-source": "npm:^7.24.7" + "@types/babel__core": "npm:^7.20.5" + react-refresh: "npm:^0.14.2" + peerDependencies: + vite: ^4.2.0 || ^5.0.0 + checksum: 10c0/b370c25fb47bb96f0cc51f3aadbbcfce54e40f95a4de67cf932e5ec526f139648da703725c6ea2c71a1b525eb3dd6e3e8ff877da143627cd2575de5ec4f00aa3 + languageName: node + linkType: hard + "@vitejs/plugin-vue@npm:^4.4.0": version: 4.5.2 resolution: "@vitejs/plugin-vue@npm:4.5.2" @@ -11274,6 +11645,20 @@ __metadata: languageName: node linkType: hard +"browserslist@npm:^4.24.0": + version: 4.24.2 + resolution: "browserslist@npm:4.24.2" + dependencies: + caniuse-lite: "npm:^1.0.30001669" + electron-to-chromium: "npm:^1.5.41" + node-releases: "npm:^2.0.18" + update-browserslist-db: "npm:^1.1.1" + bin: + browserslist: cli.js + checksum: 10c0/d747c9fb65ed7b4f1abcae4959405707ed9a7b835639f8a9ba0da2911995a6ab9b0648fd05baf2a4d4e3cf7f9fdbad56d3753f91881e365992c1d49c8d88ff7a + languageName: node + linkType: hard + "buffer-crc32@npm:^0.2.5": version: 0.2.13 resolution: "buffer-crc32@npm:0.2.13" @@ -11534,6 +11919,13 @@ __metadata: languageName: node linkType: hard +"caniuse-lite@npm:^1.0.30001669": + version: 1.0.30001677 + resolution: "caniuse-lite@npm:1.0.30001677" + checksum: 10c0/22b4aa738b213b5d0bc820c26ba23fa265ca90a5c59776e1a686b9ab6fff9120d0825fd920c0a601a4b65056ef40d01548405feb95c8dd6083255f50c71a0864 + languageName: node + linkType: hard + "case-sensitive-paths-webpack-plugin@npm:^2.4.0": version: 2.4.0 resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0" @@ -13598,6 +13990,13 @@ __metadata: languageName: node linkType: hard +"electron-to-chromium@npm:^1.5.41": + version: 1.5.50 + resolution: "electron-to-chromium@npm:1.5.50" + checksum: 10c0/8b77b18ae833bfe2173e346ac33b8d66b5b5acf0cf5de65df9799f4d482334c938aa0950e4d01391d5fab8994f46c0e9059f4517843e7b8d861f9b0c49eb4c5d + languageName: node + linkType: hard + "elliptic@npm:^6.5.3, elliptic@npm:^6.5.4": version: 6.5.4 resolution: "elliptic@npm:6.5.4" @@ -14265,6 +14664,13 @@ __metadata: languageName: node linkType: hard +"escalade@npm:^3.2.0": + version: 3.2.0 + resolution: "escalade@npm:3.2.0" + checksum: 10c0/ced4dd3a78e15897ed3be74e635110bbf3b08877b0a41be50dcb325ee0e0b5f65fc2d50e9845194d7c4633f327e2e1c6cce00a71b617c5673df0374201d67f65 + languageName: node + linkType: hard + "escape-html@npm:~1.0.3": version: 1.0.3 resolution: "escape-html@npm:1.0.3" @@ -18540,6 +18946,15 @@ __metadata: languageName: node linkType: hard +"jsesc@npm:^3.0.2": + version: 3.0.2 + resolution: "jsesc@npm:3.0.2" + bin: + jsesc: bin/jsesc + checksum: 10c0/ef22148f9e793180b14d8a145ee6f9f60f301abf443288117b4b6c53d0ecd58354898dc506ccbb553a5f7827965cd38bc5fb726575aae93c5e8915e2de8290e1 + languageName: node + linkType: hard + "jsesc@npm:~0.5.0": version: 0.5.0 resolution: "jsesc@npm:0.5.0" @@ -23102,6 +23517,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.4.43": + version: 8.4.47 + resolution: "postcss@npm:8.4.47" + dependencies: + nanoid: "npm:^3.3.7" + picocolors: "npm:^1.1.0" + source-map-js: "npm:^1.2.1" + checksum: 10c0/929f68b5081b7202709456532cee2a145c1843d391508c5a09de2517e8c4791638f71dd63b1898dba6712f8839d7a6da046c72a5e44c162e908f5911f57b5f44 + languageName: node + linkType: hard + "preact@npm:^10.5.13": version: 10.19.3 resolution: "preact@npm:10.19.3" @@ -23975,6 +24401,13 @@ __metadata: languageName: node linkType: hard +"react-refresh@npm:^0.14.2": + version: 0.14.2 + resolution: "react-refresh@npm:0.14.2" + checksum: 10c0/875b72ef56b147a131e33f2abd6ec059d1989854b3ff438898e4f9310bfcc73acff709445b7ba843318a953cb9424bcc2c05af2b3d80011cee28f25aef3e2ebb + languageName: node + linkType: hard + "react-remove-scroll-bar@npm:^2.3.3": version: 2.3.5 resolution: "react-remove-scroll-bar@npm:2.3.5" @@ -25167,6 +25600,75 @@ __metadata: languageName: node linkType: hard +"rollup@npm:^4.20.0": + version: 4.24.3 + resolution: "rollup@npm:4.24.3" + dependencies: + "@rollup/rollup-android-arm-eabi": "npm:4.24.3" + "@rollup/rollup-android-arm64": "npm:4.24.3" + "@rollup/rollup-darwin-arm64": "npm:4.24.3" + "@rollup/rollup-darwin-x64": "npm:4.24.3" + "@rollup/rollup-freebsd-arm64": "npm:4.24.3" + "@rollup/rollup-freebsd-x64": "npm:4.24.3" + "@rollup/rollup-linux-arm-gnueabihf": "npm:4.24.3" + "@rollup/rollup-linux-arm-musleabihf": "npm:4.24.3" + "@rollup/rollup-linux-arm64-gnu": "npm:4.24.3" + "@rollup/rollup-linux-arm64-musl": "npm:4.24.3" + "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.24.3" + "@rollup/rollup-linux-riscv64-gnu": "npm:4.24.3" + "@rollup/rollup-linux-s390x-gnu": "npm:4.24.3" + "@rollup/rollup-linux-x64-gnu": "npm:4.24.3" + "@rollup/rollup-linux-x64-musl": "npm:4.24.3" + "@rollup/rollup-win32-arm64-msvc": "npm:4.24.3" + "@rollup/rollup-win32-ia32-msvc": "npm:4.24.3" + "@rollup/rollup-win32-x64-msvc": "npm:4.24.3" + "@types/estree": "npm:1.0.6" + fsevents: "npm:~2.3.2" + dependenciesMeta: + "@rollup/rollup-android-arm-eabi": + optional: true + "@rollup/rollup-android-arm64": + optional: true + "@rollup/rollup-darwin-arm64": + optional: true + "@rollup/rollup-darwin-x64": + optional: true + "@rollup/rollup-freebsd-arm64": + optional: true + "@rollup/rollup-freebsd-x64": + optional: true + "@rollup/rollup-linux-arm-gnueabihf": + optional: true + "@rollup/rollup-linux-arm-musleabihf": + optional: true + "@rollup/rollup-linux-arm64-gnu": + optional: true + "@rollup/rollup-linux-arm64-musl": + optional: true + "@rollup/rollup-linux-powerpc64le-gnu": + optional: true + "@rollup/rollup-linux-riscv64-gnu": + optional: true + "@rollup/rollup-linux-s390x-gnu": + optional: true + "@rollup/rollup-linux-x64-gnu": + optional: true + "@rollup/rollup-linux-x64-musl": + optional: true + "@rollup/rollup-win32-arm64-msvc": + optional: true + "@rollup/rollup-win32-ia32-msvc": + optional: true + "@rollup/rollup-win32-x64-msvc": + optional: true + fsevents: + optional: true + bin: + rollup: dist/bin/rollup + checksum: 10c0/32425475db7a0bcb8937f92488ee8e48f7adaff711b5b5c52d86d37114c9f21fe756e21a91312d12d30da146d33d8478a11dfeb6249dbecc54fbfcc78da46005 + languageName: node + linkType: hard + "rsvp@npm:^3.0.14, rsvp@npm:^3.0.18": version: 3.6.2 resolution: "rsvp@npm:3.6.2" @@ -26014,6 +26516,13 @@ __metadata: languageName: node linkType: hard +"source-map-js@npm:^1.2.1": + version: 1.2.1 + resolution: "source-map-js@npm:1.2.1" + checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf + languageName: node + linkType: hard + "source-map-loader@npm:5.0.0": version: 5.0.0 resolution: "source-map-loader@npm:5.0.0" @@ -28182,6 +28691,20 @@ __metadata: languageName: node linkType: hard +"update-browserslist-db@npm:^1.1.1": + version: 1.1.1 + resolution: "update-browserslist-db@npm:1.1.1" + dependencies: + escalade: "npm:^3.2.0" + picocolors: "npm:^1.1.0" + peerDependencies: + browserslist: ">= 4.21.0" + bin: + update-browserslist-db: cli.js + checksum: 10c0/536a2979adda2b4be81b07e311bd2f3ad5e978690987956bc5f514130ad50cac87cd22c710b686d79731e00fbee8ef43efe5fcd72baa241045209195d43dcc80 + languageName: node + linkType: hard + "uri-js@npm:^4.2.2": version: 4.4.1 resolution: "uri-js@npm:4.4.1" @@ -28621,6 +29144,49 @@ __metadata: languageName: node linkType: hard +"vite@npm:^4.0.0 || ^5.0.0": + version: 5.4.10 + resolution: "vite@npm:5.4.10" + dependencies: + esbuild: "npm:^0.21.3" + fsevents: "npm:~2.3.3" + postcss: "npm:^8.4.43" + rollup: "npm:^4.20.0" + peerDependencies: + "@types/node": ^18.0.0 || >=20.0.0 + less: "*" + lightningcss: ^1.21.0 + sass: "*" + sass-embedded: "*" + stylus: "*" + sugarss: "*" + terser: ^5.4.0 + dependenciesMeta: + fsevents: + optional: true + peerDependenciesMeta: + "@types/node": + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + bin: + vite: bin/vite.js + checksum: 10c0/4ef4807d2fd166a920de244dbcec791ba8a903b017a7d8e9f9b4ac40d23f8152c1100610583d08f542b47ca617a0505cfc5f8407377d610599d58296996691ed + languageName: node + linkType: hard + "vite@npm:^4.0.0, vite@npm:^4.0.4": version: 4.5.1 resolution: "vite@npm:4.5.1" diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index db3d3ce02f23..1c5618453696 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -189,6 +189,8 @@ const runGenerators = async ( flags = ['--type html']; } else if (expected.renderer === '@storybook/server') { flags = ['--type server']; + } else if (expected.framework === '@storybook/react-native-web-vite') { + flags = ['--type react_native_web']; } const time = process.hrtime(); diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index 7123357ae93f..4f8dd85ecc46 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -138,6 +138,8 @@ export const init: Task['run'] = async ( extra = { type: 'html' }; } else if (template.expected.renderer === '@storybook/server') { extra = { type: 'server' }; + } else if (template.expected.framework === '@storybook/react-native-web-vite') { + extra = { type: 'react_native_web' }; } await executeCLIStep(steps.init, { From 59c10e8c8d3f5051d3385e6e5a5c3d6e8669a0d1 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sun, 3 Nov 2024 17:29:43 +0000 Subject: [PATCH 02/39] feat: add template files --- .../react-native-web-vite/package.json | 6 +- .../template/cli/.eslintrc.json | 6 + .../template/cli/ts-3-8/Button.stories.tsx | 45 +++++ .../template/cli/ts-3-8/Button.tsx | 123 +++++++++++++ .../template/cli/ts-3-8/Header.stories.tsx | 27 +++ .../template/cli/ts-3-8/Header.tsx | 82 +++++++++ .../template/cli/ts-3-8/Page.stories.tsx | 19 ++ .../template/cli/ts-3-8/Page.tsx | 167 ++++++++++++++++++ .../template/cli/ts-4-9/Button.stories.tsx | 45 +++++ .../template/cli/ts-4-9/Button.tsx | 123 +++++++++++++ .../template/cli/ts-4-9/Header.stories.tsx | 27 +++ .../template/cli/ts-4-9/Header.tsx | 80 +++++++++ .../template/cli/ts-4-9/Page.stories.tsx | 15 ++ .../template/cli/ts-4-9/Page.tsx | 159 +++++++++++++++++ .../src/generators/baseGenerator.ts | 2 +- 15 files changed, 922 insertions(+), 4 deletions(-) create mode 100644 code/frameworks/react-native-web-vite/template/cli/.eslintrc.json create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.stories.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.stories.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.stories.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.tsx diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 0c9d3ee7a369..ea71b798d292 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -57,8 +57,7 @@ "magic-string": "^0.30.0", "react-docgen": "^7.0.0", "resolve": "^1.22.8", - "tsconfig-paths": "^4.2.0", - "vite": "^4.0.0 || ^5.0.0" + "tsconfig-paths": "^4.2.0" }, "devDependencies": { "@types/node": "^22.0.0", @@ -69,7 +68,8 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-native": ">=0.74.5", "react-native-web": "^0.19.12", - "storybook": "workspace:^" + "storybook": "workspace:^", + "vite": "^4.0.0 || ^5.0.0" }, "engines": { "node": ">=18.0.0" diff --git a/code/frameworks/react-native-web-vite/template/cli/.eslintrc.json b/code/frameworks/react-native-web-vite/template/cli/.eslintrc.json new file mode 100644 index 000000000000..012842ba7b28 --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/.eslintrc.json @@ -0,0 +1,6 @@ +{ + "rules": { + "import/extensions": "off", + "react/no-unknown-property": "off" + } +} diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx new file mode 100644 index 000000000000..b9d1f5943170 --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx @@ -0,0 +1,45 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { View } from 'react-native'; +import { Button } from './Button'; + +const meta: Meta = { + component: Button, + decorators: [ + (Story) => ( + + + + ), + ], +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + label: 'Button', + }, +}; + +export const Large: Story = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small: Story = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx new file mode 100644 index 000000000000..5ca6dffb1b06 --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx @@ -0,0 +1,123 @@ +import { + StyleSheet, + StyleProp, + ViewStyle, + TouchableOpacity, + Text, + View, +} from 'react-native'; + +export interface ButtonProps { + /** + * Is this the principal call to action on the page? + */ + primary?: boolean; + /** + * What background color to use + */ + backgroundColor?: string; + /** + * How large should the button be? + */ + size?: 'small' | 'medium' | 'large'; + /** + * Button contents + */ + label: string; + /** + * Optional click handler + */ + onPress?: () => void; + style?: StyleProp; +} + +/** + * Primary UI component for user interaction + */ +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + style, + onPress, +}: ButtonProps) => { + const modeStyle = primary ? styles.primary : styles.secondary; + const textModeStyle = primary ? styles.primaryText : styles.secondaryText; + + const sizeStyle = styles[size]; + const textSizeStyle = textSizeStyles[size]; + + return ( + + + {label} + + + ); +}; + +const styles = StyleSheet.create({ + button: { + borderWidth: 0, + borderRadius: 48, + }, + buttonText: { + fontWeight: '700', + lineHeight: 1, + }, + primary: { + backgroundColor: '#1ea7fd', + }, + primaryText: { + color: 'white', + }, + secondary: { + backgroundColor: 'transparent', + borderColor: 'rgba(0, 0, 0, 0.15)', + borderWidth: 1, + }, + secondaryText: { + color: '#333', + }, + small: { + paddingVertical: 10, + paddingHorizontal: 16, + }, + smallText: { + fontSize: 12, + }, + medium: { + paddingVertical: 11, + paddingHorizontal: 20, + }, + mediumText: { + fontSize: 14, + }, + large: { + paddingVertical: 12, + paddingHorizontal: 24, + }, + largeText: { + fontSize: 16, + }, +}); + +const textSizeStyles = { + small: styles.smallText, + medium: styles.mediumText, + large: styles.largeText, +}; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx new file mode 100644 index 000000000000..0781c62ea63a --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx @@ -0,0 +1,27 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { Header } from './Header'; + +const meta: Meta = { + component: Header, +}; + +export default meta; + +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: {}, + onLogin: () => {}, + onLogout: () => {}, + onCreateAccount: () => {}, + }, +}; + +export const LoggedOut: Story = { + args: { + onLogin: () => {}, + onLogout: () => {}, + onCreateAccount: () => {}, + }, +}; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx new file mode 100644 index 000000000000..34ab15d11e63 --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx @@ -0,0 +1,82 @@ +import { Button } from './Button'; +import { View, Text, StyleSheet } from 'react-native'; + +export type HeaderProps = { + user?: {}; + onLogin: () => void; + onLogout: () => void; + onCreateAccount: () => void; +}; + +export const Header = ({ + user, + onLogin, + onLogout, + onCreateAccount, +}: HeaderProps) => ( + + + + Acme + + + + {user ? ( +