Skip to content

Commit b7d3610

Browse files
dannyhwclaude
dannyhw
and
claude
authored
feat: add docs (#702)
* feat: docs * attempt to do docs? * intro-> introduction * fix * config and addons docs * remove extra contents * requires file docs * fix * fix * fix * fix * fix * fix * fix * docs: restructure documentation and add expo router setup - Update npm create storybook@latest command across documentation - Add comprehensive Expo Router setup guide with protected routes - Create manual setup documentation with storybook-generate script - Add CustomUIComponent documentation with practical examples - Reorganize docs structure with proper sub-pages: - getting-started/ with expo-router.md and manual-setup.md - configuration/ with custom-ui.md sub-page - Embed YouTube tutorial video in expo router docs - Add development-only access patterns for production builds 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> * docs: add comprehensive controls addon documentation - Create addons sub-page structure with controls.md - Document all 13 supported control types with examples - Include platform-specific differences (mobile vs web) - Add auto-detection, conditional controls, and best practices - Remove unimplemented grouping controls feature - Provide troubleshooting guide and dependency requirements - Simplify main addons page with link to detailed controls docs 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> * docs: add testing guide with portable stories and Maestro visual testing - Add comprehensive testing documentation covering portable stories setup with Jest - Include Maestro configuration for automated visual regression testing - Add scripts for generating and comparing screenshots - Update .gitignore to exclude Maestro screenshot directories 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> * fix: seo info * fix: seo info * fix: seo info * fix: robots * fix: generate script --------- Co-authored-by: Claude <[email protected]>
1 parent ed35fe0 commit b7d3610

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+22437
-9266
lines changed

‎.github/workflows/docs.yml‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [next]
6+
# Allows you to run this workflow manually from the Actions tab on GitHub.
7+
workflow_dispatch:
8+
9+
# Allow this job to clone the repo and create a page deployment
10+
permissions:
11+
contents: read
12+
pages: write
13+
id-token: write
14+
15+
jobs:
16+
build:
17+
runs-on: ubuntu-latest
18+
steps:
19+
- name: Checkout your repository using git
20+
uses: actions/checkout@v4
21+
22+
- name: Set node version
23+
uses: actions/setup-node@v4
24+
with:
25+
node-version: 20
26+
27+
- name: Install
28+
shell: 'bash'
29+
run: yarn install
30+
31+
- name: Build
32+
shell: 'bash'
33+
working-directory: docs
34+
run: yarn build
35+
36+
- name: Upload Pages Artifact
37+
uses: actions/upload-pages-artifact@v3
38+
with:
39+
path: 'docs/build/'
40+
41+
deploy:
42+
needs: build
43+
runs-on: ubuntu-latest
44+
environment:
45+
name: github-pages
46+
url: ${{ steps.deployment.outputs.page_url }}
47+
steps:
48+
- name: Deploy to GitHub Pages
49+
id: deployment
50+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,6 @@ built-storybooks
3535
!.yarn/releases
3636
!.yarn/sdks
3737
!.yarn/versions
38-
.eslintcache
38+
.eslintcache
39+
examples/expo-example/.maestro/diffs
40+
examples/expo-example/.maestro/screenshots

‎.prettierignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
.yarn
22
dist/
33
examples/expo-example/.expo
4-
examples/expo-example/.rnstorybook/storybook.requires.ts
4+
examples/expo-example/.rnstorybook/storybook.requires.ts
5+
docs/.docusaurus
6+
docs/build
7+
.claude/

‎CLAUDE.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## Common Development Commands
6+
7+
### Initial Setup
8+
9+
```bash
10+
yarn install
11+
yarn build
12+
```
13+
14+
### Development
15+
16+
```bash
17+
# Watch all packages for changes
18+
yarn dev
19+
20+
# Run the expo example app with Storybook
21+
yarn example
22+
```
23+
24+
### Testing
25+
26+
```bash
27+
# Run unit tests across all packages
28+
yarn test
29+
30+
# Run tests in CI mode
31+
yarn test:ci
32+
33+
```
34+
35+
### Linting and Code Quality
36+
37+
```bash
38+
# Run ESLint across the codebase
39+
yarn lint
40+
```
41+
42+
### Release Process
43+
44+
```bash
45+
# Version packages (maintainers only)
46+
yarn version-packages
47+
48+
# Publish to npm
49+
yarn publish:latest # For stable releases
50+
yarn publish:next # For pre-releases
51+
yarn publish:alpha # For alpha releases
52+
```
53+
54+
## Architecture Overview
55+
56+
This is a **Yarn workspaces monorepo** managed by Lerna containing React Native Storybook packages:
57+
58+
### Core Packages
59+
60+
- **@storybook/react-native** - Main package providing Storybook functionality for React Native
61+
- **@storybook/react-native-ui** - Full UI components for on-device Storybook
62+
- **@storybook/react-native-ui-lite** - Lightweight UI components
63+
- **@storybook/react-native-ui-common** - Shared UI components
64+
- **@storybook/react-native-theming** - Theming utilities
65+
66+
### On-Device Addons
67+
68+
- **@storybook/addon-ondevice-actions** - Log component interactions
69+
- **@storybook/addon-ondevice-backgrounds** - Change story backgrounds
70+
- **@storybook/addon-ondevice-controls** - Dynamically edit component props
71+
- **@storybook/addon-ondevice-notes** - Add markdown documentation to stories
72+
73+
### Build System
74+
75+
- Uses **tsup** for TypeScript compilation
76+
- Targets ES2022 with CommonJS output
77+
- Each package has its own `tsup.config.ts`
78+
- Running `yarn prepare` in a package builds it
79+
80+
### Metro Configuration
81+
82+
The `withStorybook` wrapper is crucial for React Native Storybook:
83+
84+
- Enables `unstable_allowRequireContext` for dynamic story imports
85+
- Automatically generates `storybook.requires.ts` file
86+
- Optional WebSocket server for remote control
87+
- Can be conditionally enabled/disabled via options
88+
89+
### Key Concepts
90+
91+
1. **CSF (Component Story Format)**: Standard story syntax used across Storybook
92+
2. **On-device UI**: Native UI that runs directly on mobile devices
93+
3. **Story requires generation**: Automatic generation of story imports via Metro
94+
4. **Portable stories**: Reuse stories in unit tests
95+
5. **WebSocket support**: Remote control stories from external devices

‎docs/.gitignore‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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*

‎docs/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Website
2+
3+
This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
4+
5+
### Installation
6+
7+
```
8+
$ yarn
9+
```
10+
11+
### Local Development
12+
13+
```
14+
$ yarn start
15+
```
16+
17+
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18+
19+
### Build
20+
21+
```
22+
$ yarn build
23+
```
24+
25+
This command generates static content into the `build` directory and can be served using any static contents hosting service.
26+
27+
### Deployment
28+
29+
Using SSH:
30+
31+
```
32+
$ USE_SSH=true yarn deploy
33+
```
34+
35+
Not using SSH:
36+
37+
```
38+
$ GIT_USER=<Your GitHub username> yarn deploy
39+
```
40+
41+
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

‎docs/blog/2025-03-23-first-blog-post.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
slug: hello-world
3+
title: Hello World
4+
authors: [dannyhw]
5+
tags: []
6+
---
7+
8+
React Native Storybook docs are here. Over the next few weeks and months we'll be building out the documentation.
9+
10+
<!-- truncate -->
11+
12+
As part of an effort to make React Native Storybook easier to use we've started working on dedicated documentation that will explain the nuances of running Storybook on React Native.
13+
14+
If you have something you want to be documented help us build out the docs by submitting a pull request.

‎docs/blog/authors.yml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
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

‎docs/blog/tags.yml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
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

0 commit comments

Comments
 (0)