feat: docs

.github/workflows/docs.yml

@@ -0,0 +1,53 @@
+name: Deploy to GitHub Pages
+
+on:
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch’s name
+  push:
+    # branches: [main]
+    branches: [dannyhw/docs-v9]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v4
+
+      - name: Set node version
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install
+        shell: 'bash'
+        run: yarn install
+
+      - name: Build
+        shell: 'bash'
+        working-directory: docs
+        run: yarn build
+
+      - name: Upload Pages Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'docs/build/'
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+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

@@ -0,0 +1,14 @@
+---
+slug: hello-world
+title: Hello World
+authors: [dannyhw]
+tags: []
+---
+
+React Native Storybook docs are here. Over the next few weeks and months we'll be building out the documentation.
+
+<!-- truncate -->
+
+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.
+
+If you have something you want to be documented help us build out the docs by submitting a pull request.

docs/blog/authors.yml

@@ -0,0 +1,9 @@
+dannyhw:
+  name: Danny Williams
+  title: Senior Software Engineer
+  url: https://github.com/dannyhw
+  image_url: https://github.com/dannyhw.png
+  page: true
+  socials:
+    x: Danny_H_W
+    github: dannyhw

docs/blog/tags.yml

@@ -0,0 +1,9 @@
+releases:
+  label: Releases
+  permalink: /releases
+  description: Release posts
+
+guides:
+  label: Guides
+  permalink: /guides
+  description: Guide posts

docs/docs/intro/addons.md

@@ -0,0 +1,173 @@
+# Addons
+
+Since react native storybook has a react native UI the web based addon panels need to be reimplemented for react native. Addons that don't include a ui should also be compatible with react native, for example msw and deep controls.
+
+The addons made available by us are the following. There are more addons available via the community and you can also write your own addons.
+
+| Addon       | Package                               |
+| ----------- | ------------------------------------- |
+| actions     | @storybook/addon-ondevice-actions     |
+| backgrounds | @storybook/addon-ondevice-backgrounds |
+| controls    | @storybook/addon-ondevice-controls    |
+| notes       | @storybook/addon-ondevice-notes       |
+
+## Configuration
+
+To use these addons, add them to your `.storybook/main.ts`:
+
+```ts
+import { StorybookConfig } from '@storybook/react-native';
+
+const main: StorybookConfig = {
+  addons: [
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-backgrounds',
+    '@storybook/addon-ondevice-actions',
+    '@storybook/addon-ondevice-notes',
+  ],
+};
+
+export default main;
+```
+
+## Actions
+
+The Actions addon lets you log events and actions inside your stories. It's useful for verifying component interactions and event handling.
+
+```sh
+npm install --save-dev @storybook/addon-ondevice-actions
+```
+
+Use the `action` argType to log events:
+
+```ts
+export default {
+  component: Button,
+  argTypes: {
+    onPress: { action: 'pressed' },
+  },
+} satisfies Meta<typeof Button>;
+```
+
+## Backgrounds
+
+The Backgrounds addon allows you to change background colors of your stories directly on the device. Perfect for testing components against different backgrounds.
+
+```sh
+npm install --save-dev @storybook/addon-ondevice-backgrounds
+```
+
+First, add the required decorator in `.storybook/preview.tsx`:
+
+```ts
+import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
+
+const preview: Preview = {
+  decorators: [withBackgrounds], // This decorator is required
+  parameters: {
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: 'white' },
+        { name: 'dark', value: '#333' },
+      ],
+    },
+  },
+};
+
+export default preview;
+```
+
+You can then override these background options in individual stories:
+
+```ts
+export default {
+  component: MyComponent,
+  parameters: {
+    backgrounds: {
+      default: 'warm',
+      values: [
+        { name: 'warm', value: 'hotpink' },
+        { name: 'cool', value: 'deepskyblue' },
+      ],
+    },
+  },
+} satisfies Meta<typeof MyComponent>;
+```
+
+Component-level background settings will override the global settings from preview.tsx, but the decorator is still required.
+
+## Controls
+
+Controls provides a graphical UI to dynamically edit component props without code. It requires additional dependencies for form inputs:
+
+```sh
+npm install --save-dev @storybook/addon-ondevice-controls @react-native-community/datetimepicker @react-native-community/slider
+```
+
+Controls can be defined in multiple ways:
+
+1. Inferred from `args` values:
+
+```ts
+export default {
+  component: MyComponent,
+  args: {
+    text: 'Hello', // infers text control
+    enabled: true, // infers boolean control
+  },
+} satisfies Meta<typeof MyComponent>;
+```
+
+2. Inferred using TypeScript props with `babel-plugin-react-docgen-typescript`:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [['babel-plugin-react-docgen-typescript', { exclude: 'node_modules' }]],
+};
+```
+
+This will automatically create controls based on your component's types.
+
+3. Define controls using argTypes:
+
+```ts
+export default {
+  component: MyComponent,
+  argTypes: {
+    text: { control: 'text' },
+    enabled: { control: 'boolean' },
+    color: { control: 'color' },
+    size: { control: { type: 'range', min: 0, max: 100 } },
+    type: { control: { type: 'radio', options: ['small', 'medium', 'large'] } },
+  },
+} satisfies Meta<typeof MyComponent>;
+```
+
+## Notes
+
+The Notes addon enables you to write additional documentation (text or markdown) for your stories.
+
+```sh
+npm install --save-dev @storybook/addon-ondevice-notes
+```
+
+Add notes using the parameters field:
+
+```ts
+export default {
+  component: MyComponent,
+  parameters: {
+    notes: `
+      # Component Documentation
+      This is a markdown description of the component.
+
+      ## Usage
+      \`\`\`tsx
+      <MyComponent prop="value" />
+      \`\`\`
+    `,
+  },
+} satisfies Meta<typeof MyComponent>;
+```