├── .nvmrc ├── docs ├── static │ ├── .nojekyll │ ├── robots.txt │ └── img │ │ ├── favicon.ico │ │ └── social-card.jpg ├── blog │ ├── tags.yml │ ├── authors.yml │ └── 2025-03-23-first-blog-post.md ├── src │ ├── components │ │ └── HomepageFeatures │ │ │ └── styles.module.css │ ├── pages │ │ ├── index.module.css │ │ └── index.tsx │ └── css │ │ └── custom.css ├── tsconfig.json ├── .gitignore ├── README.md ├── sidebars.ts └── package.json ├── .github ├── CODEOWNERS ├── FUNDING.yml ├── PULL_REQUEST_TEMPLATE.md ├── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md └── workflows │ ├── test.yml │ └── docs.yml ├── .gitattributes ├── packages ├── ondevice-actions │ ├── register.js │ ├── tsconfig.json │ ├── src │ │ ├── index.tsx │ │ └── components │ │ │ └── ActionLogger │ │ │ └── index.tsx │ ├── README.md │ └── package.json ├── ondevice-backgrounds │ ├── register.js │ ├── docs │ │ └── demo.gif │ ├── tsconfig.json │ ├── src │ │ ├── constants.ts │ │ ├── register.tsx │ │ ├── container.tsx │ │ ├── index.tsx │ │ └── Swatch.tsx │ ├── README.md │ └── package.json ├── ondevice-notes │ ├── register.js │ ├── docs │ │ └── demo.png │ ├── src │ │ ├── typings.d.ts │ │ ├── index.ts │ │ ├── ErrorBoundary.tsx │ │ └── register.tsx │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── README.md │ └── package.json ├── ondevice-controls │ ├── register.js │ ├── tsconfig.json │ ├── src │ │ ├── components │ │ │ ├── color-picker │ │ │ │ ├── resources │ │ │ │ │ ├── color-circle.png │ │ │ │ │ ├── color-circle.xcf │ │ │ │ │ └── hsv_triangle_mask.png │ │ │ │ └── index.ts │ │ │ ├── ModalPortal.tsx │ │ │ └── SliderWrapper.tsx │ │ ├── Panel.tsx │ │ ├── sharedTypes.ts │ │ ├── index.tsx │ │ ├── types │ │ │ ├── useResyncValue.ts │ │ │ ├── Boolean.tsx │ │ │ ├── index.ts │ │ │ ├── Text.tsx │ │ │ └── Array.tsx │ │ ├── PropField.tsx │ │ └── NoControlsWarning.tsx │ └── README.md ├── react-native │ ├── preview.js │ ├── preset.js │ ├── src │ │ ├── components │ │ │ └── StoryView │ │ │ │ ├── index.tsx │ │ │ │ └── ErrorBoundary.tsx │ │ ├── types │ │ │ └── index.ts │ │ ├── preview.ts │ │ ├── stub.tsx │ │ ├── hooks.tsx │ │ ├── polyfill.ts │ │ └── index.ts │ ├── bin │ │ └── get-stories.js │ ├── metro │ │ └── withStorybook.js │ ├── scripts │ │ ├── mocks │ │ │ ├── no-preview │ │ │ │ ├── FakeComponent.tsx │ │ │ │ ├── FakeStory.stories.tsx │ │ │ │ └── main.js │ │ │ ├── all-config-files │ │ │ │ ├── FakeComponent.tsx │ │ │ │ ├── FakeStory.stories.tsx │ │ │ │ ├── main.js │ │ │ │ └── preview.js │ │ │ ├── file-extensions │ │ │ │ ├── FakeComponent.tsx │ │ │ │ ├── FakeStory.stories.tsx │ │ │ │ ├── main.ts │ │ │ │ └── preview.tsx │ │ │ ├── blank-config │ │ │ │ └── main.js │ │ │ ├── wrong-extension-preview │ │ │ │ ├── FakeComponent.tsx │ │ │ │ ├── FakeStory.stories.tsx │ │ │ │ ├── main.js │ │ │ │ └── preview.txt │ │ │ ├── configuration-objects │ │ │ │ ├── components │ │ │ │ │ ├── FakeComponent.tsx │ │ │ │ │ └── FakeStory.stories.tsx │ │ │ │ ├── main.js │ │ │ │ └── preview.js │ │ │ ├── exclude-config-files │ │ │ │ ├── include-components │ │ │ │ │ ├── FakeComponent.tsx │ │ │ │ │ └── FakeStory.stories.tsx │ │ │ │ ├── exclude-components │ │ │ │ │ ├── FakeComponent.tsx │ │ │ │ │ └── FakeStory.stories.tsx │ │ │ │ ├── main.js │ │ │ │ └── preview.js │ │ │ └── preview-files │ │ │ │ ├── ts │ │ │ │ └── preview.ts │ │ │ │ ├── tsx │ │ │ │ └── preview.tsx │ │ │ │ ├── js │ │ │ │ └── preview.js │ │ │ │ └── jsx │ │ │ │ └── preview.jsx │ │ ├── get-stories.js │ │ └── handle-args.js │ ├── babel.config.js │ ├── template │ │ └── cli │ │ │ ├── stories │ │ │ ├── Page.stories.tsx │ │ │ ├── Header.stories.tsx │ │ │ └── Button.stories.tsx │ │ │ ├── main.ts │ │ │ ├── preview.tsx │ │ │ ├── index.ts │ │ │ └── storybook.requires.ts │ ├── tsconfig.json │ ├── setup.js │ ├── buildscripts │ │ └── gendtsdev.ts │ ├── tsup.config.ts │ └── jest.config.js ├── react-native-ui-common │ ├── src │ │ ├── util │ │ │ ├── index.ts │ │ │ └── useStyle.ts │ │ ├── hooks │ │ │ ├── index.ts │ │ │ ├── useStoreState.ts │ │ │ └── useLastViewed.ts │ │ ├── assets │ │ │ └── react-native-logo.png │ │ ├── index.tsx │ │ ├── constants.ts │ │ ├── IconButton.tsx │ │ ├── StorageProvider.tsx │ │ └── LayoutProvider.tsx │ ├── tsconfig.json │ └── tsup.config.ts ├── react-native-theming │ ├── README.md │ ├── tsconfig.json │ ├── src │ │ ├── index.ts │ │ └── emotionAugmentation.d.ts │ ├── tsup.config.ts │ ├── scripts │ │ ├── gendtsdev.ts │ │ └── patchdts.ts │ └── package.json ├── react-native-ui │ ├── src │ │ ├── assets │ │ │ └── react-native-logo.png │ │ ├── index.tsx │ │ ├── constants.ts │ │ ├── icon │ │ │ ├── MenuIcon.tsx │ │ │ ├── GroupIcon.tsx │ │ │ ├── SearchIcon.tsx │ │ │ ├── ComponentIcon.tsx │ │ │ ├── StoryIcon.tsx │ │ │ ├── FaceHappyIcon.tsx │ │ │ ├── CloseIcon.tsx │ │ │ ├── CollapseAllIcon.tsx │ │ │ ├── ExpandAllIcon.tsx │ │ │ ├── BottomBarToggleIcon.tsx │ │ │ ├── CloseFullscreenIcon.tsx │ │ │ ├── FullscreenIcon.tsx │ │ │ └── CollapseIcon.tsx │ │ ├── decorators.tsx │ │ ├── Explorer.tsx │ │ └── Explorer.stories.tsx │ ├── tsconfig.json │ └── tsup.config.ts └── react-native-ui-lite │ ├── src │ ├── assets │ │ └── react-native-logo.png │ ├── index.tsx │ ├── constants.ts │ ├── useAnimatedValue.ts │ ├── Explorer.tsx │ └── Explorer.stories.tsx │ ├── tsconfig.json │ └── tsup.config.ts ├── .vscode └── settings.json ├── examples └── expo-example │ ├── .rnstorybook │ ├── local-addon-example │ │ ├── preview.js │ │ └── register.js │ ├── main.ts │ ├── preview.tsx │ └── index.tsx │ ├── assets │ ├── icon.png │ └── storybook.icon │ │ └── icon.json │ ├── App.tsx │ ├── index.js │ ├── .maestro │ └── baseline │ │ ├── TestCase---Basic.png │ │ ├── TestCase2---Basic.png │ │ ├── DeepControls---Basic.png │ │ ├── HiddenControls---Basic.png │ │ ├── InteractionExample---Static.png │ │ ├── ActionExample-Actions---Basic.png │ │ ├── ControlExamples-Array---Basic.png │ │ ├── ControlExamples-Boolean---On.png │ │ ├── ControlExamples-Date---Basic.png │ │ ├── ControlExamples-Number---Basic.png │ │ ├── ControlExamples-Number---Range.png │ │ ├── ControlExamples-Object---Basic.png │ │ ├── ControlExamples-Radio---Basic.png │ │ ├── ControlExamples-Select---Basic.png │ │ ├── ControlExamples-Text---Basic.png │ │ ├── InputExample-TextInput---Basic.png │ │ ├── InteractionExample---Scrolling.png │ │ ├── InteractionExample---Touchable.png │ │ ├── NotesExample---Notes-Example.png │ │ ├── ControlExamples-Boolean---Basic.png │ │ ├── LoginDocsExample-Button---Disabled.png │ │ ├── LoginDocsExample-Button---Loading.png │ │ ├── LoginDocsExample-Button---Primary.png │ │ ├── LoginDocsExample-Button---Secondary.png │ │ ├── LoginDocsExample-TextInput---Filled.png │ │ ├── NestingExample-MessageInput---Basic.png │ │ ├── react-native-ui-src-Layout---Basic.png │ │ ├── ControlExamples-Color---Color-Example.png │ │ ├── ControlExamples-Select---With-Labels.png │ │ ├── ControlExamples-Select---With-Mapping.png │ │ ├── LoginDocsExample-Button---Long-Title.png │ │ ├── LoginDocsExample-LoginForm---Default.png │ │ ├── LoginDocsExample-LoginForm---Loading.png │ │ ├── LoginDocsExample-TextInput---Default.png │ │ ├── LoginDocsExample-TextInput---Password.png │ │ ├── NestingExample-Message-bubble---First.png │ │ ├── BackgroundExample-BackgroundCsf---Basic.png │ │ ├── ControlExamples-ControlExample---Example.png │ │ ├── LoginDocsExample-LoginForm---Long-Errors.png │ │ ├── LoginDocsExample-LoginForm---With-Errors.png │ │ ├── LoginDocsExample-TextInput---Empty-State.png │ │ ├── LoginDocsExample-TextInput---Long-Label.png │ │ ├── LoginDocsExample-TextInput---Playground.png │ │ ├── LoginDocsExample-TextInput---With-Error.png │ │ ├── LoginDocsExample-TextInput---With-Label.png │ │ ├── SafeAreaExample-SafeAreaInside---Basic.png │ │ ├── SafeAreaExample-SafeAreaOutside---Basic.png │ │ ├── SafeAreaExample-UsableArea---Safe-Area.png │ │ ├── react-native-ui-UI-Sidebar-Tree---Dark.png │ │ ├── react-native-ui-UI-Sidebar-Tree---Full.png │ │ ├── ControlExamples-WebCompatibility---Defined.png │ │ ├── NestingExample-ChatMessage---Message-First.png │ │ ├── SafeAreaExample-UsableArea---No-Safe-Area.png │ │ ├── react-native-ui-UI-SearchResults---Default.png │ │ ├── react-native-ui-UI-Sidebar-Sidebar---Empty.png │ │ ├── ControlExamples-WebCompatibility---Undefined.png │ │ ├── LoginDocsExample-Button---Secondary-Disabled.png │ │ ├── LoginDocsExample-Button---Secondary-Loading.png │ │ ├── LoginDocsExample-LoginForm---Email-Error-Only.png │ │ ├── NestingExample-ChatMessage---Message-Second.png │ │ ├── NestingExample-Message-bubble---Second-Story.png │ │ ├── SafeAreaExample-SafeAreaInside---List-Basic.png │ │ ├── SafeAreaExample-SafeAreaOutside---List-Basic.png │ │ ├── react-native-ui-UI-Sidebar-Explorer---Simple.png │ │ ├── react-native-ui-UI-Sidebar-Sidebar---Loading.png │ │ ├── react-native-ui-UI-Sidebar-Sidebar---Scrolled.png │ │ ├── react-native-ui-UI-Sidebar-Sidebar---Simple.png │ │ ├── react-native-ui-UI-Sidebar-TreeNode---Nested.png │ │ ├── react-native-ui-UI-Sidebar-TreeNode---Types.png │ │ ├── react-native-ui-UI-StorybookLogo---Image-Logo.png │ │ ├── react-native-ui-UI-StorybookLogo---Title-Logo.png │ │ ├── LoginDocsExample-TextInput---Long-Error-Message.png │ │ ├── NestingExample-Message-Reactions---Message-One.png │ │ ├── NestingExample-Message-Reactions---Message-Two.png │ │ ├── react-native-ui-UI-Sidebar-Sidebar---Searching.png │ │ ├── react-native-ui-UI-Sidebar-Sidebar---With-Refs.png │ │ ├── react-native-ui-UI-Sidebar-TreeNode---Selection.png │ │ ├── LoginDocsExample-LoginForm---Password-Error-Only.png │ │ ├── react-native-ui-UI-Sidebar-Sidebar---Index-Error.png │ │ ├── react-native-ui-UI-Sidebar-Sidebar---Statuses-Open.png │ │ ├── react-native-ui-UI-Sidebar-TreeNode---Expandable.png │ │ ├── react-native-ui-UI-StorybookLogo---Image-Url-Logo.png │ │ ├── react-native-ui-UI-Sidebar-Sidebar---With-Ref-Empty.png │ │ ├── react-native-ui-UI-StorybookLogo---Image-Source-Logo.png │ │ ├── react-native-ui-src-Layout---Overflow-Addons-Example.png │ │ ├── ControlExamples-Reproductions-SelectWithNumber---Basic.png │ │ ├── react-native-ui-UI-Sidebar-Sidebar---Loading-With-Refs.png │ │ ├── react-native-ui-UI-Sidebar-Sidebar---Statuses-Collapsed.png │ │ ├── react-native-ui-UI-StorybookLogo---Image-Element-Logo.png │ │ ├── react-native-ui-src-Layout---Overflow-Sidebar-Example.png │ │ ├── react-native-ui-UI-Sidebar-Tree---Single-Story-Components.png │ │ ├── react-native-ui-UI-Sidebar-Tree---Story-with-a-storyName.png │ │ ├── react-native-ui-UI-Sidebar-Sidebar---Loading-With-Ref-Error.png │ │ ├── react-native-ui-UI-Sidebar-TreeNode---Expandable-Long-Name.png │ │ ├── react-native-ui-UI-Sidebar-TreeNode---Selection-With-Long-Name.png │ │ ├── NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---First.png │ │ └── NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---Second-Story.png │ ├── components │ ├── ControlExamples │ │ ├── Text │ │ │ ├── Text.tsx │ │ │ ├── Text.stories.tsx │ │ │ └── Text.test.tsx │ │ ├── Date │ │ │ ├── Date.tsx │ │ │ ├── Date.test.tsx │ │ │ └── Date.stories.tsx │ │ ├── Select │ │ │ ├── Select.tsx │ │ │ └── Select.test.tsx │ │ ├── Radio │ │ │ ├── Radio.tsx │ │ │ ├── Radio.test.tsx │ │ │ └── Radio.stories.tsx │ │ ├── Number │ │ │ ├── Number.tsx │ │ │ ├── Number.test.tsx │ │ │ └── Number.stories.tsx │ │ ├── Object │ │ │ ├── Object.tsx │ │ │ ├── Object.test.tsx │ │ │ └── Object.stories.tsx │ │ ├── Reproductions │ │ │ ├── SelectWithNumber.stories.tsx │ │ │ └── SelectWithNumber.tsx │ │ ├── Color │ │ │ ├── Color.test.tsx │ │ │ ├── Color.tsx │ │ │ └── Color.stories.tsx │ │ ├── Array │ │ │ ├── Array.test.tsx │ │ │ ├── Array.tsx │ │ │ └── Array.stories.tsx │ │ ├── Boolean │ │ │ ├── Boolean.stories.tsx │ │ │ ├── Boolean.test.tsx │ │ │ └── Boolean.tsx │ │ └── ControlExample │ │ │ └── ControlExample.tsx │ ├── InputExample │ │ ├── TextInput.test.tsx │ │ ├── TextInput.stories.tsx │ │ └── TextInput.tsx │ ├── NestingExample │ │ ├── ChatMessageMessageInput.stories.tsx │ │ ├── ChatMessage.stories.tsx │ │ ├── ChatMessageReactions.stories.tsx │ │ ├── ChatMessageBubble.stories.tsx │ │ └── ChatMessageBubbleAgain.stories.tsx │ ├── SafeAreaExample │ │ ├── AButton.tsx │ │ ├── UsableArea.stories.tsx │ │ └── SafeAreaInside.stories.tsx │ ├── BackgroundExample │ │ ├── BackgroundCsf.test.tsx │ │ └── BackgroundCsf.stories.tsx │ ├── ActionExample │ │ ├── Actions.test.tsx │ │ ├── Actions.stories.tsx │ │ └── Actions.tsx │ ├── StoryName │ │ └── StoryName.stories.tsx │ ├── HiddenControls │ │ └── HiddenControls.stories.tsx │ └── LoginDocsExample │ │ ├── LoginForm │ │ ├── LoginForm.stories.tsx │ │ └── LoginForm.tsx │ │ ├── Button │ │ ├── Button.stories.tsx │ │ └── Button.tsx │ │ └── TextInput │ │ └── TextInput.tsx │ ├── README.md │ ├── tsconfig.json │ ├── setup-jest.ts │ ├── babel.config.js │ ├── .storybook │ ├── preview.tsx │ └── main.ts │ ├── other_components │ ├── TestCase2 │ │ └── TestCase2.stories.tsx │ └── TestCase │ │ └── TestCase.stories.tsx │ ├── jest.config.js │ ├── eas.json │ ├── app.json │ ├── .gitignore │ └── metro.config.js ├── lerna.json ├── .editorconfig ├── .prettierrc ├── .yarnrc.yml ├── ROADMAP.md ├── .prettierignore ├── tsconfig.json ├── .gitignore ├── LICENSE └── eslint.config.js /.nvmrc: -------------------------------------------------------------------------------- 1 | 24.11.1 -------------------------------------------------------------------------------- /docs/static/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @dannyhw 2 | -------------------------------------------------------------------------------- /docs/static/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | .yarn/releases/yarn-*.js linguist-generated=true 2 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | open_collective: storybook 2 | github: dannyhw 3 | -------------------------------------------------------------------------------- /packages/ondevice-actions/register.js: -------------------------------------------------------------------------------- 1 | require('./dist').register(); 2 | -------------------------------------------------------------------------------- /packages/ondevice-backgrounds/register.js: -------------------------------------------------------------------------------- 1 | require('./dist/register'); 2 | -------------------------------------------------------------------------------- /packages/ondevice-notes/register.js: -------------------------------------------------------------------------------- 1 | require('./dist/register.js'); 2 | -------------------------------------------------------------------------------- /packages/ondevice-controls/register.js: -------------------------------------------------------------------------------- 1 | require('./dist/index').register(); 2 | -------------------------------------------------------------------------------- /packages/react-native/preview.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./dist/preview.js'); 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } 4 | -------------------------------------------------------------------------------- /packages/react-native/preset.js: -------------------------------------------------------------------------------- 1 | // just to be a valid framework 2 | module.exports = {}; 3 | -------------------------------------------------------------------------------- /packages/react-native/src/components/StoryView/index.tsx: -------------------------------------------------------------------------------- 1 | export { default } from './StoryView'; 2 | -------------------------------------------------------------------------------- /examples/expo-example/.rnstorybook/local-addon-example/preview.js: -------------------------------------------------------------------------------- 1 | console.log('preview-local-addon'); 2 | -------------------------------------------------------------------------------- /examples/expo-example/.rnstorybook/local-addon-example/register.js: -------------------------------------------------------------------------------- 1 | console.log('register-local-addon'); 2 | -------------------------------------------------------------------------------- /packages/react-native/bin/get-stories.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | require('../scripts/get-stories.js'); 3 | -------------------------------------------------------------------------------- /packages/react-native/metro/withStorybook.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../dist/metro/withStorybook.js'); 2 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/no-preview/FakeComponent.tsx: -------------------------------------------------------------------------------- 1 | export const FakeComponent = () => null; 2 | -------------------------------------------------------------------------------- /docs/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/docs/static/img/favicon.ico -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/all-config-files/FakeComponent.tsx: -------------------------------------------------------------------------------- 1 | export const FakeComponent = () => null; 2 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/file-extensions/FakeComponent.tsx: -------------------------------------------------------------------------------- 1 | export const FakeComponent = () => null; 2 | -------------------------------------------------------------------------------- /docs/static/img/social-card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/docs/static/img/social-card.jpg -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmClient": "yarn", 3 | "registry": "https://registry.npmjs.org", 4 | "version": "10.1.1" 5 | } 6 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/blank-config/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: [], 3 | addons: [], 4 | }; 5 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/wrong-extension-preview/FakeComponent.tsx: -------------------------------------------------------------------------------- 1 | export const FakeComponent = () => null; 2 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/configuration-objects/components/FakeComponent.tsx: -------------------------------------------------------------------------------- 1 | export const FakeComponent = () => null; 2 | -------------------------------------------------------------------------------- /examples/expo-example/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/assets/icon.png -------------------------------------------------------------------------------- /packages/ondevice-notes/docs/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/packages/ondevice-notes/docs/demo.png -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/exclude-config-files/include-components/FakeComponent.tsx: -------------------------------------------------------------------------------- 1 | export const FakeComponent = () => null; 2 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | 6 | [*.{js,json,ts,vue,html}] 7 | indent_style = space 8 | indent_size = 2 9 | -------------------------------------------------------------------------------- /packages/react-native-ui-common/src/util/index.ts: -------------------------------------------------------------------------------- 1 | export * from './StoryHash'; 2 | export * from './tree'; 3 | export * from './useStyle'; 4 | -------------------------------------------------------------------------------- /examples/expo-example/App.tsx: -------------------------------------------------------------------------------- 1 | // fixes fast refresh on web 2 | import '@expo/metro-runtime'; 3 | 4 | export { default } from './.rnstorybook'; 5 | -------------------------------------------------------------------------------- /packages/ondevice-backgrounds/docs/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/packages/ondevice-backgrounds/docs/demo.gif -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/exclude-config-files/exclude-components/FakeComponent.tsx: -------------------------------------------------------------------------------- 1 | export const FakeComponentExcluded = () => null; 2 | -------------------------------------------------------------------------------- /examples/expo-example/index.js: -------------------------------------------------------------------------------- 1 | import { registerRootComponent } from 'expo'; 2 | 3 | import App from './App'; 4 | 5 | registerRootComponent(App); 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "tabWidth": 2, 4 | "bracketSpacing": true, 5 | "trailingComma": "es5", 6 | "singleQuote": true 7 | } 8 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | compressionLevel: mixed 2 | 3 | enableGlobalCache: false 4 | 5 | nodeLinker: node-modules 6 | 7 | yarnPath: .yarn/releases/yarn-4.9.4.cjs 8 | -------------------------------------------------------------------------------- /packages/ondevice-notes/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'react-native-simple-markdown' { 2 | const Markdown: any; 3 | export default Markdown; 4 | } 5 | -------------------------------------------------------------------------------- /packages/react-native-ui-common/src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from './useExpanded'; 2 | export * from './useLastViewed'; 3 | export * from './useStoreState'; 4 | -------------------------------------------------------------------------------- /packages/react-native/babel.config.js: -------------------------------------------------------------------------------- 1 | // note this file is used by jest to make it not shit itself 2 | module.exports = { 3 | presets: ['babel-preset-expo'], 4 | }; 5 | -------------------------------------------------------------------------------- /packages/react-native-theming/README.md: -------------------------------------------------------------------------------- 1 | # @storybook/react-native-theming 2 | 3 | A wrapper library around emotion 11 to provide theming support for react-native storybook. 4 | -------------------------------------------------------------------------------- /packages/react-native-ui/src/assets/react-native-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/packages/react-native-ui/src/assets/react-native-logo.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/TestCase---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/TestCase---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/TestCase2---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/TestCase2---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/DeepControls---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/DeepControls---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/components/ControlExamples/Text/Text.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | 3 | export const Heading = ({ text }: { text: string }) => {text}; 4 | -------------------------------------------------------------------------------- /packages/react-native-ui-common/src/assets/react-native-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/packages/react-native-ui-common/src/assets/react-native-logo.png -------------------------------------------------------------------------------- /packages/react-native-ui-lite/src/assets/react-native-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/packages/react-native-ui-lite/src/assets/react-native-logo.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/HiddenControls---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/HiddenControls---Basic.png -------------------------------------------------------------------------------- /packages/react-native-ui/src/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './TreeNode'; 2 | export * from './Tree'; 3 | export * from './Explorer'; 4 | export * from './Sidebar'; 5 | export * from './Layout'; 6 | -------------------------------------------------------------------------------- /packages/react-native-ui-lite/src/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './TreeNode'; 2 | export * from './Tree'; 3 | export * from './Explorer'; 4 | export * from './Sidebar'; 5 | export * from './Layout'; 6 | -------------------------------------------------------------------------------- /ROADMAP.md: -------------------------------------------------------------------------------- 1 | # Roadmap 2 | 3 | For v11: 4 | 5 | - backgrounds with globals 6 | - addons into core 7 | - make lite ui the default and remove dependencies from controls 8 | - simple docs implementation 9 | -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/InteractionExample---Static.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/InteractionExample---Static.png -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .yarn 2 | dist/ 3 | examples/expo-example/.expo 4 | examples/expo-example/.rnstorybook/storybook.requires.ts 5 | docs/.docusaurus 6 | docs/build 7 | .claude/ 8 | examples/expo-example/assets -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ActionExample-Actions---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ActionExample-Actions---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Array---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Array---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Boolean---On.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Boolean---On.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Date---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Date---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Number---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Number---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Number---Range.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Number---Range.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Object---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Object---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Radio---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Radio---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Select---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Select---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Text---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Text---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/InputExample-TextInput---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/InputExample-TextInput---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/InteractionExample---Scrolling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/InteractionExample---Scrolling.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/InteractionExample---Touchable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/InteractionExample---Touchable.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/NotesExample---Notes-Example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/NotesExample---Notes-Example.png -------------------------------------------------------------------------------- /packages/react-native/scripts/get-stories.js: -------------------------------------------------------------------------------- 1 | const { getArguments } = require('./handle-args'); 2 | const args = getArguments(); 3 | 4 | const { generate } = require('./generate'); 5 | generate(args); 6 | -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Boolean---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Boolean---Basic.png -------------------------------------------------------------------------------- /packages/ondevice-controls/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "dist/", 5 | "rootDir": "./src" 6 | }, 7 | "include": ["src/**/*"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/ondevice-notes/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "dist/" 6 | }, 7 | "include": ["src/**/*"] 8 | } 9 | -------------------------------------------------------------------------------- /docs/blog/tags.yml: -------------------------------------------------------------------------------- 1 | releases: 2 | label: Releases 3 | permalink: /releases 4 | description: Release posts 5 | 6 | guides: 7 | label: Guides 8 | permalink: /guides 9 | description: Guide posts 10 | -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Disabled.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Loading.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Primary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Primary.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Secondary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Secondary.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Filled.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/NestingExample-MessageInput---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/NestingExample-MessageInput---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Color---Color-Example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Color---Color-Example.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Select---With-Labels.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Select---With-Labels.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Select---With-Mapping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Select---With-Mapping.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Long-Title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Long-Title.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-LoginForm---Default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-LoginForm---Default.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-LoginForm---Loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-LoginForm---Loading.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Default.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Password.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Password.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/NestingExample-Message-bubble---First.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble---First.png -------------------------------------------------------------------------------- /packages/ondevice-controls/src/components/color-picker/resources/color-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/packages/ondevice-controls/src/components/color-picker/resources/color-circle.png -------------------------------------------------------------------------------- /packages/ondevice-controls/src/components/color-picker/resources/color-circle.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/packages/ondevice-controls/src/components/color-picker/resources/color-circle.xcf -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/BackgroundExample-BackgroundCsf---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/BackgroundExample-BackgroundCsf---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-ControlExample---Example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-ControlExample---Example.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-LoginForm---Long-Errors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-LoginForm---Long-Errors.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-LoginForm---With-Errors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-LoginForm---With-Errors.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Empty-State.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Empty-State.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Long-Label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Long-Label.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Playground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Playground.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---With-Error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---With-Error.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---With-Label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---With-Label.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaInside---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaInside---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaOutside---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaOutside---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/SafeAreaExample-UsableArea---Safe-Area.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/SafeAreaExample-UsableArea---Safe-Area.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Dark.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Full.png -------------------------------------------------------------------------------- /packages/ondevice-backgrounds/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "dist/" 5 | }, 6 | "include": ["src/**/*"], 7 | "exclude": ["src/__tests__/**/*"] 8 | } 9 | -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-WebCompatibility---Defined.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-WebCompatibility---Defined.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/NestingExample-ChatMessage---Message-First.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/NestingExample-ChatMessage---Message-First.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/SafeAreaExample-UsableArea---No-Safe-Area.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/SafeAreaExample-UsableArea---No-Safe-Area.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-SearchResults---Default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-SearchResults---Default.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Empty.png -------------------------------------------------------------------------------- /packages/ondevice-controls/src/components/color-picker/resources/hsv_triangle_mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/packages/ondevice-controls/src/components/color-picker/resources/hsv_triangle_mask.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-WebCompatibility---Undefined.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-WebCompatibility---Undefined.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Secondary-Disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Secondary-Disabled.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Secondary-Loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-Button---Secondary-Loading.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-LoginForm---Email-Error-Only.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-LoginForm---Email-Error-Only.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/NestingExample-ChatMessage---Message-Second.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/NestingExample-ChatMessage---Message-Second.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/NestingExample-Message-bubble---Second-Story.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble---Second-Story.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaInside---List-Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaInside---List-Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaOutside---List-Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaOutside---List-Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Explorer---Simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Explorer---Simple.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Scrolled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Scrolled.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Simple.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Nested.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Nested.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Types.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Logo.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Title-Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Title-Logo.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Long-Error-Message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-TextInput---Long-Error-Message.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/NestingExample-Message-Reactions---Message-One.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/NestingExample-Message-Reactions---Message-One.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/NestingExample-Message-Reactions---Message-Two.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/NestingExample-Message-Reactions---Message-Two.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Searching.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Searching.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---With-Refs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---With-Refs.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Selection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Selection.png -------------------------------------------------------------------------------- /docs/src/components/HomepageFeatures/styles.module.css: -------------------------------------------------------------------------------- 1 | .features { 2 | display: flex; 3 | align-items: center; 4 | padding: 5rem 0; 5 | width: 100%; 6 | } 7 | 8 | .featureSvg { 9 | height: 200px; 10 | width: 200px; 11 | } 12 | -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/LoginDocsExample-LoginForm---Password-Error-Only.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/LoginDocsExample-LoginForm---Password-Error-Only.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Index-Error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Index-Error.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Statuses-Open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Statuses-Open.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Expandable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Expandable.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Url-Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Url-Logo.png -------------------------------------------------------------------------------- /packages/ondevice-notes/src/index.ts: -------------------------------------------------------------------------------- 1 | import { logger } from 'storybook/internal/client-logger'; 2 | 3 | // @ts-ignore 4 | if (__DEV__) { 5 | logger.log("import '@storybook/addon-ondevice-notes/register' to register the notes addon"); 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-native-ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "rootDir": "./src", 6 | "outDir": "dist/" 7 | }, 8 | "include": ["src/**/*"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---With-Ref-Empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---With-Ref-Empty.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Source-Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Source-Logo.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Overflow-Addons-Example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Overflow-Addons-Example.png -------------------------------------------------------------------------------- /packages/react-native-ui-common/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "rootDir": "./src", 6 | "outDir": "dist/" 7 | }, 8 | "include": ["src/**/*"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react-native-ui-lite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "rootDir": "./src", 6 | "outDir": "dist/" 7 | }, 8 | "include": ["src/**/*"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/ControlExamples-Reproductions-SelectWithNumber---Basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/ControlExamples-Reproductions-SelectWithNumber---Basic.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading-With-Refs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading-With-Refs.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Statuses-Collapsed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Statuses-Collapsed.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Element-Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Element-Logo.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Overflow-Sidebar-Example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Overflow-Sidebar-Example.png -------------------------------------------------------------------------------- /examples/expo-example/components/ControlExamples/Date/Date.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | 3 | export interface DateProps { 4 | date: Date; 5 | } 6 | 7 | export const DateString = ({ date }: DateProps) => {date.toString()}; 8 | -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Single-Story-Components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Single-Story-Components.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Story-with-a-storyName.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Story-with-a-storyName.png -------------------------------------------------------------------------------- /examples/expo-example/components/ControlExamples/Select/Select.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | 3 | export interface Props { 4 | arrow: string; 5 | } 6 | 7 | export const SelectExample = ({ arrow }: Props) => Selected: {arrow}; 8 | -------------------------------------------------------------------------------- /packages/ondevice-actions/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "dist/" 6 | }, 7 | "include": ["src/**/*"], 8 | "exclude": ["src/__tests__/**/*"] 9 | } 10 | -------------------------------------------------------------------------------- /docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // This file is not used in compilation. It is here just for a nice editor experience. 3 | "extends": "@docusaurus/tsconfig", 4 | "compilerOptions": { 5 | "baseUrl": "." 6 | }, 7 | "exclude": [".docusaurus", "build"] 8 | } 9 | -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading-With-Ref-Error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading-With-Ref-Error.png -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Expandable-Long-Name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Expandable-Long-Name.png -------------------------------------------------------------------------------- /packages/react-native-ui/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const BREAKPOINT = 1000; 2 | export const MEDIA_DESKTOP_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`; 3 | export const MOBILE_TRANSITION_DURATION = 300; 4 | export const DEFAULT_REF_ID = 'storybook_internal'; 5 | -------------------------------------------------------------------------------- /docs/blog/authors.yml: -------------------------------------------------------------------------------- 1 | dannyhw: 2 | name: Danny Williams 3 | title: Senior Software Engineer 4 | url: https://github.com/dannyhw 5 | image_url: https://github.com/dannyhw.png 6 | page: true 7 | socials: 8 | x: Danny_H_W 9 | github: dannyhw 10 | -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Selection-With-Long-Name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Selection-With-Long-Name.png -------------------------------------------------------------------------------- /packages/react-native-ui-common/src/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './IconButton'; 2 | export * from './Button'; 3 | export * from './LayoutProvider'; 4 | export * from './types'; 5 | export * from './StorageProvider'; 6 | export * from './util'; 7 | export * from './hooks'; 8 | -------------------------------------------------------------------------------- /packages/react-native-ui-lite/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const BREAKPOINT = 1000; 2 | export const MEDIA_DESKTOP_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`; 3 | export const MOBILE_TRANSITION_DURATION = 300; 4 | export const DEFAULT_REF_ID = 'storybook_internal'; 5 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/configuration-objects/components/FakeStory.stories.tsx: -------------------------------------------------------------------------------- 1 | import { FakeComponent } from './FakeComponent'; 2 | 3 | export default { 4 | component: FakeComponent, 5 | }; 6 | 7 | export const Basic = { 8 | args: {}, 9 | }; 10 | -------------------------------------------------------------------------------- /packages/react-native-ui-common/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const BREAKPOINT = 1000; 2 | export const MEDIA_DESKTOP_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`; 3 | export const MOBILE_TRANSITION_DURATION = 300; 4 | export const DEFAULT_REF_ID = 'storybook_internal'; 5 | -------------------------------------------------------------------------------- /packages/ondevice-controls/src/Panel.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const AddonPanel = ({ active, children }) => { 4 | if (!active) { 5 | return null; 6 | } 7 | return <>{children}; 8 | }; 9 | 10 | AddonPanel.displayName = 'AddonPanel'; 11 | -------------------------------------------------------------------------------- /examples/expo-example/README.md: -------------------------------------------------------------------------------- 1 | Try this: 2 | `npx uri-scheme open "exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-boolean--basic" --ios` 3 | or this: 4 | `npx uri-scheme open "exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-controlexample--example" --ios` 5 | -------------------------------------------------------------------------------- /packages/react-native-theming/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "rootDir": "./src", 6 | "outDir": "dist/" 7 | }, 8 | "exclude": ["src/__tests__/**/*"], 9 | "include": ["src/**/*"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/no-preview/FakeStory.stories.tsx: -------------------------------------------------------------------------------- 1 | import { FakeComponent } from './FakeComponent'; 2 | 3 | export default { 4 | title: 'components/FakeComponent', 5 | component: FakeComponent, 6 | }; 7 | 8 | export const Basic = { 9 | args: {}, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/file-extensions/FakeStory.stories.tsx: -------------------------------------------------------------------------------- 1 | import { FakeComponent } from './FakeComponent'; 2 | 3 | export default { 4 | title: 'components/FakeComponent', 5 | component: FakeComponent, 6 | }; 7 | 8 | export const Basic = { 9 | args: {}, 10 | }; 11 | -------------------------------------------------------------------------------- /examples/expo-example/components/ControlExamples/Radio/Radio.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | 3 | export interface RadioProps { 4 | selection: string; 5 | } 6 | 7 | export const Radio = ({ selection = '' }: RadioProps) => { 8 | return {selection}; 9 | }; 10 | -------------------------------------------------------------------------------- /packages/ondevice-controls/src/sharedTypes.ts: -------------------------------------------------------------------------------- 1 | export type ControlTypes = 2 | | 'text' 3 | | 'number' 4 | | 'color' 5 | | 'boolean' 6 | | 'object' 7 | | 'select' 8 | | 'array' 9 | | 'date' 10 | | 'radio' 11 | | 'inline-radio' 12 | | 'multi-select' 13 | | 'range'; 14 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/all-config-files/FakeStory.stories.tsx: -------------------------------------------------------------------------------- 1 | import { FakeComponent } from './FakeComponent'; 2 | 3 | export default { 4 | title: 'components/FakeComponent', 5 | component: FakeComponent, 6 | }; 7 | 8 | export const Basic = { 9 | args: {}, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/react-native/template/cli/stories/Page.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta } from '@storybook/react'; 2 | 3 | import { Page } from './Page'; 4 | 5 | export default { 6 | title: 'Example/Page', 7 | component: Page, 8 | } as Meta; 9 | 10 | export const Default = {}; 11 | -------------------------------------------------------------------------------- /packages/react-native/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "rootDirs": ["./src", "./scripts"], 6 | "outDir": "dist/" 7 | }, 8 | "exclude": ["src/__tests__/**/*"], 9 | "include": ["src/**/*"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/wrong-extension-preview/FakeStory.stories.tsx: -------------------------------------------------------------------------------- 1 | import { FakeComponent } from './FakeComponent'; 2 | 3 | export default { 4 | title: 'components/FakeComponent', 5 | component: FakeComponent, 6 | }; 7 | 8 | export const Basic = { 9 | args: {}, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/react-native/setup.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line no-undef 2 | jest.doMock('react-native/Libraries/NativeComponent/ViewConfigIgnore', () => ({ 3 | ConditionallyIgnoredEventHandlers: () => undefined, 4 | DynamicallyInjectedByGestureHandler: () => ({}), 5 | isIgnored: () => true, 6 | })); 7 | -------------------------------------------------------------------------------- /examples/expo-example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "skipLibCheck": true, 4 | "baseUrl": "./", 5 | "strict": true, 6 | "esModuleInterop": true 7 | }, 8 | "extends": "expo/tsconfig.base", 9 | "include": [".rnstorybook/**/*", ".storybook/**/*", "./*"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/exclude-config-files/include-components/FakeStory.stories.tsx: -------------------------------------------------------------------------------- 1 | import { FakeComponent } from './FakeComponent'; 2 | 3 | export default { 4 | title: 'components/FakeComponent', 5 | component: FakeComponent, 6 | }; 7 | 8 | export const Basic = { 9 | args: {}, 10 | }; 11 | -------------------------------------------------------------------------------- /examples/expo-example/setup-jest.ts: -------------------------------------------------------------------------------- 1 | import 'react-native-gesture-handler/jestSetup'; 2 | 3 | jest.doMock('react-native/Libraries/NativeComponent/ViewConfigIgnore', () => ({ 4 | ConditionallyIgnoredEventHandlers: () => undefined, 5 | DynamicallyInjectedByGestureHandler: () => ({}), 6 | isIgnored: () => true, 7 | })); 8 | -------------------------------------------------------------------------------- /packages/react-native/src/types/index.ts: -------------------------------------------------------------------------------- 1 | import type { LoaderFunction } from 'storybook/internal/types'; 2 | 3 | export interface RequireContext { 4 | keys: () => string[]; 5 | (id: string): any; 6 | resolve(id: string): string; 7 | } 8 | 9 | export type Loadable = RequireContext | RequireContext[] | LoaderFunction; 10 | -------------------------------------------------------------------------------- /packages/react-native/template/cli/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-native'; 2 | 3 | const main: StorybookConfig = { 4 | stories: ['./stories/**/*.stories.?(ts|tsx|js|jsx)'], 5 | addons: ['@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions'], 6 | }; 7 | 8 | export default main; 9 | -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---First.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---First.png -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/exclude-config-files/exclude-components/FakeStory.stories.tsx: -------------------------------------------------------------------------------- 1 | import { FakeComponentExcluded } from './FakeComponent'; 2 | 3 | export default { 4 | title: 'components/FakeComponentExcluded', 5 | component: FakeComponentExcluded, 6 | }; 7 | 8 | export const Basic = { 9 | args: {}, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/no-preview/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['./FakeStory.stories.tsx'], 3 | addons: [ 4 | '@storybook/addon-ondevice-notes', 5 | '@storybook/addon-ondevice-controls', 6 | '@storybook/addon-ondevice-backgrounds', 7 | '@storybook/addon-ondevice-actions', 8 | ], 9 | }; 10 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/all-config-files/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['./FakeStory.stories.tsx'], 3 | addons: [ 4 | '@storybook/addon-ondevice-notes', 5 | '@storybook/addon-ondevice-controls', 6 | '@storybook/addon-ondevice-backgrounds', 7 | '@storybook/addon-ondevice-actions', 8 | ], 9 | }; 10 | -------------------------------------------------------------------------------- /examples/expo-example/.maestro/baseline/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---Second-Story.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storybookjs/react-native/HEAD/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---Second-Story.png -------------------------------------------------------------------------------- /packages/ondevice-backgrounds/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const PARAM_KEY = 'backgrounds'; 2 | export const ADDON_ID = 'storybook-addon-background'; 3 | export const PANEL_ID = `${ADDON_ID}/background-panel`; 4 | 5 | export default { 6 | SET: `${ADDON_ID}:set`, 7 | UNSET: `${ADDON_ID}:unset`, 8 | UPDATE_BACKGROUND: `${ADDON_ID}:update`, 9 | }; 10 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/preview-files/ts/preview.ts: -------------------------------------------------------------------------------- 1 | export const decorators: any = []; 2 | export const parameters = { 3 | my_param: 'anything', 4 | backgrounds: [ 5 | { name: 'plain', value: 'white', default: true }, 6 | { name: 'warm', value: 'hotpink' }, 7 | { name: 'cool', value: 'deepskyblue' }, 8 | ], 9 | }; 10 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/preview-files/tsx/preview.tsx: -------------------------------------------------------------------------------- 1 | export const decorators: any = []; 2 | export const parameters = { 3 | my_param: 'anything', 4 | backgrounds: [ 5 | { name: 'plain', value: 'white', default: true }, 6 | { name: 'warm', value: 'hotpink' }, 7 | { name: 'cool', value: 'deepskyblue' }, 8 | ], 9 | }; 10 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/wrong-extension-preview/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['./FakeStory.stories.tsx'], 3 | addons: [ 4 | '@storybook/addon-ondevice-notes', 5 | '@storybook/addon-ondevice-controls', 6 | '@storybook/addon-ondevice-backgrounds', 7 | '@storybook/addon-ondevice-actions', 8 | ], 9 | }; 10 | -------------------------------------------------------------------------------- /packages/react-native/template/cli/preview.tsx: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react-native'; 2 | 3 | const preview: Preview = { 4 | parameters: { 5 | controls: { 6 | matchers: { 7 | color: /(background|color)$/i, 8 | date: /Date$/, 9 | }, 10 | }, 11 | }, 12 | }; 13 | 14 | export default preview; 15 | -------------------------------------------------------------------------------- /examples/expo-example/babel.config.js: -------------------------------------------------------------------------------- 1 | // const path = require('path'); 2 | 3 | module.exports = function (api) { 4 | api.cache(true); 5 | return { 6 | presets: [['babel-preset-expo']], 7 | plugins: [ 8 | ['babel-plugin-react-docgen-typescript', { exclude: 'node_modules' }], 9 | 'react-native-worklets/plugin', 10 | ], 11 | }; 12 | }; 13 | -------------------------------------------------------------------------------- /packages/react-native/scripts/mocks/file-extensions/main.ts: -------------------------------------------------------------------------------- 1 | const config = { 2 | stories: ['./FakeStory.stories.tsx'], 3 | addons: [ 4 | '@storybook/addon-ondevice-notes', 5 | '@storybook/addon-ondevice-controls', 6 | '@storybook/addon-ondevice-backgrounds', 7 | '@storybook/addon-ondevice-actions', 8 | ], 9 | }; 10 | 11 | export default config; 12 | -------------------------------------------------------------------------------- /packages/react-native-ui/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig((options) => { 4 | return { 5 | entry: ['src/index.tsx'], 6 | clean: !options.watch, 7 | dts: !options.watch 8 | ? { 9 | entry: ['src/index.tsx'], 10 | resolve: true, 11 | } 12 | : false, 13 | }; 14 | }); 15 | -------------------------------------------------------------------------------- /packages/react-native/template/cli/index.ts: -------------------------------------------------------------------------------- 1 | import AsyncStorage from '@react-native-async-storage/async-storage'; 2 | import { view } from './storybook.requires'; 3 | 4 | const StorybookUIRoot = view.getStorybookUI({ 5 | storage: { 6 | getItem: AsyncStorage.getItem, 7 | setItem: AsyncStorage.setItem, 8 | }, 9 | }); 10 | 11 | export default StorybookUIRoot; 12 | -------------------------------------------------------------------------------- /packages/react-native-theming/src/index.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import styled, { type StyledComponent } from '@emotion/native'; 3 | import { useTheme, withTheme, ThemeProvider } from '@emotion/react'; 4 | 5 | export { theme, darkTheme, StorybookTheme } from './theme'; 6 | 7 | export { styled, useTheme, withTheme, ThemeProvider, StyledComponent }; 8 | -------------------------------------------------------------------------------- /packages/react-native-ui-lite/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig((options) => { 4 | return { 5 | entry: ['src/index.tsx'], 6 | clean: !options.watch, 7 | dts: !options.watch 8 | ? { 9 | entry: ['src/index.tsx'], 10 | resolve: true, 11 | } 12 | : false, 13 | }; 14 | }); 15 | -------------------------------------------------------------------------------- /examples/expo-example/.storybook/preview.tsx: -------------------------------------------------------------------------------- 1 | /** @type { import('@storybook/react').Preview } */ 2 | const preview = { 3 | parameters: { 4 | // actions: { argTypesRegex: '^on[A-Z].*' }, 5 | controls: { 6 | matchers: { 7 | color: /(background|color)$/i, 8 | date: /Date$/i, 9 | }, 10 | }, 11 | }, 12 | }; 13 | 14 | export default preview; 15 | -------------------------------------------------------------------------------- /packages/react-native-ui-common/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig((options) => { 4 | return { 5 | entry: ['src/index.tsx'], 6 | clean: !options.watch, 7 | dts: !options.watch 8 | ? { 9 | entry: ['src/index.tsx'], 10 | resolve: true, 11 | } 12 | : false, 13 | }; 14 | }); 15 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Issue: 2 | 3 | ## What I did 4 | 5 | ## How to test 6 | 7 | Please explain how to test your changes and consider the following questions 8 | 9 | - Does this need a new example in examples/expo-example? 10 | - Does this need an update to the documentation? 11 | 12 | If your answer is yes to any of these, please make sure to include it in your PR. 13 | -------------------------------------------------------------------------------- /packages/react-native-theming/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig((options) => { 4 | return { 5 | entry: ['src/index.ts'], 6 | // minify: !options.watch, 7 | clean: !options.watch, 8 | dts: !options.watch 9 | ? { 10 | entry: ['src/index.ts'], 11 | resolve: true, 12 | } 13 | : false, 14 | }; 15 | }); 16 | -------------------------------------------------------------------------------- /examples/expo-example/components/ControlExamples/Radio/Radio.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react-native'; 2 | import { composeStories } from '@storybook/react'; 3 | import * as RadioStories from './Radio.stories'; 4 | 5 | const { Basic } = composeStories(RadioStories); 6 | 7 | test('radio story renders', () => { 8 | render(); 9 | 10 | screen.getByText('104.8MHz'); 11 | }); 12 | -------------------------------------------------------------------------------- /examples/expo-example/components/ControlExamples/Text/Text.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { StoryObj, Meta } from '@storybook/react-native'; 2 | import { Heading } from './Text'; 3 | 4 | const meta = { 5 | component: Heading, 6 | args: { text: 'Hello world!' }, 7 | } satisfies Meta; 8 | 9 | export default meta; 10 | 11 | type Story = StoryObj; 12 | 13 | export const Basic: Story = {}; 14 | -------------------------------------------------------------------------------- /examples/expo-example/components/ControlExamples/Text/Text.test.tsx: -------------------------------------------------------------------------------- 1 | import { screen, render } from '@testing-library/react-native'; 2 | import { composeStories } from '@storybook/react'; 3 | import * as TextStories from './Text.stories'; 4 | 5 | const { Basic } = composeStories(TextStories); 6 | 7 | test('text story renders', () => { 8 | render(); 9 | 10 | screen.getByText('Hello world!'); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/react-native-ui-common/src/IconButton.tsx: -------------------------------------------------------------------------------- 1 | import { Button, ButtonProps } from './Button'; 2 | import { forwardRef } from 'react'; 3 | 4 | export const IconButton = forwardRef( 5 | ({ padding = 'small', variant = 'ghost', ...props }: ButtonProps, ref) => { 6 | return