Notes Addon

npm install @storybook/addon-ondevice-notes

import type { StorybookConfig } from '@storybook/react-native';

const main: StorybookConfig = {
  addons: [
    '@storybook/addon-ondevice-notes',
  ],
};

export default main;

import type { Meta, StoryObj } from '@storybook/react-native';
import { Button } from './Button';

const meta = {
  component: Button,
  parameters: {
    notes: `
# Button Component

A reusable button component with multiple variants.

## Usage

\`\`\`tsx
<Button 
  text="Click me" 
  variant="primary"
  onPress={() => console.log('pressed')}
/>
\`\`\`

## Props

- **text**: Button label text
- **variant**: Visual style ('primary' | 'secondary' | 'outline')
- **onPress**: Click handler function
    `,
  },
} satisfies Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    text: 'Primary Button',
    variant: 'primary',
  },
};

# H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading
##### H5 Heading
###### H6 Heading

**Bold text**
_Italic text_
~~Strikethrough text~~
`Inline code`

[Link text](https://example.com)

- Unordered list item
- Another item
  - Nested item
  - Another nested item

1. Ordered list item
2. Another item
   1. Nested numbered item

```tsx
import { Button } from 'react-native';

function App() {
  return <Button title="Press me" />;
}
```

> This is a block quote.
> It can span multiple lines.
>
>> And can be nested.

---

| Prop     | Type     | Default   |
|----------|----------|----------|
| text     | string   | "Button" |
| variant  | string   | "primary" |
| disabled | boolean  | false    |

import type { Meta, StoryObj } from '@storybook/react-native';
import { Card } from './Card';

const meta = {
  component: Card,
  parameters: {
    notes: `
# Card Component

A flexible card component for displaying content in a contained format.

## Features

- Customizable elevation (shadow)
- Rounded corners
- Multiple size variants
- Optional header and footer

## Basic Usage

\`\`\`tsx
import { Card } from './Card';

<Card 
  title="Card Title"
  elevation={2}
  rounded
>
  <Text>Card content goes here</Text>
</Card>
\`\`\`

## Props

| Prop        | Type              | Default | Description                    |
|-------------|-------------------|---------|--------------------------------|
| title       | string            | -       | Card header title              |
| elevation   | number (0-24)     | 2       | Shadow elevation               |
| rounded     | boolean           | true    | Apply rounded corners          |
| size        | 'sm' \| 'md' \| 'lg' | 'md'    | Card padding size              |
| children    | ReactNode         | -       | Card content                   |

## Best Practices

- Use elevation sparingly for visual hierarchy
- Keep card content concise and scannable
- Consider touch target sizes for interactive cards

---

**Note:** This component requires React Native 0.70+
    `,
  },
} satisfies Meta<typeof Card>;

export default meta;

const meta = {
  component: TextInput,
  parameters: {
    notes: `
# TextInput API

## Props

### value
\`string\` - The current text value

### onChangeText
\`(text: string) => void\` - Called when text changes

### placeholder
\`string\` - Placeholder text when empty

### secureTextEntry
\`boolean\` - Hide text input (for passwords)

### multiline
\`boolean\` - Allow multiple lines of text

### numberOfLines
\`number\` - Initial number of lines (multiline only)

## Events

- **onFocus**: Fired when input receives focus
- **onBlur**: Fired when input loses focus
- **onSubmitEditing**: Fired when user submits

## Example

\`\`\`tsx
const [text, setText] = useState('');

<TextInput
  value={text}
  onChangeText={setText}
  placeholder="Enter your name"
  autoCapitalize="words"
  autoCorrect={false}
/>
\`\`\`
    `,
  },
} satisfies Meta<typeof TextInput>;

const meta = {
  component: DatePicker,
  parameters: {
    notes: `
# DatePicker Examples

## Basic Date Selection

\`\`\`tsx
const [date, setDate] = useState(new Date());

<DatePicker
  value={date}
  onChange={setDate}
/>
\`\`\`

## With Custom Format

\`\`\`tsx
<DatePicker
  value={date}
  onChange={setDate}
  format="MM/DD/YYYY"
/>
\`\`\`

## With Min/Max Dates

\`\`\`tsx
const minDate = new Date('2020-01-01');
const maxDate = new Date('2025-12-31');

<DatePicker
  value={date}
  onChange={setDate}
  minimumDate={minDate}
  maximumDate={maxDate}
/>
\`\`\`

## Time Selection

\`\`\`tsx
<DatePicker
  value={date}
  onChange={setDate}
  mode="time"
/>
\`\`\`
    `,
  },
} satisfies Meta<typeof DatePicker>;

import type { StoryObj, Meta } from '@storybook/react-native';
import { View, StyleSheet, Text } from 'react-native';

const NotesExampleMeta: Meta<any> = {
  parameters: {
    notes: `
# Markdown Examples

## Headings

# H1
## H2
### H3
#### H4
##### H5
###### H6

## Text Formatting

This is a paragraph with **strong** text, _emphasized_ text, 
~~struck out~~ text, and \`inline code\`.

[This is a link](https://example.com)

---

## Lists

### Unordered

- First item
- Second item
  - Nested item
  - Another nested item
- Third item

### Ordered

1. First item
2. Second item
   1. Nested item
   2. Another nested item
3. Third item

---

## Code

### Inline Code

Use \`const\` for immutable variables.

### Code Block

\`\`\`tsx
import { View, Text } from 'react-native';

function App() {
  return (
    <View>
      <Text>Hello World</Text>
    </View>
  );
}
\`\`\`

---

## Block Quotes

> This is a block quote.
> It can span multiple lines.
>
>> Quotes can be nested too.
>
> - Even lists inside quotes!

---

## Tables

| Feature      | Supported | Notes                  |
|--------------|-----------|------------------------|
| Headings     | ✓         | H1-H6                  |
| Bold/Italic  | ✓         | Full support           |
| Code blocks  | ✓         | Syntax highlighting    |
| Lists        | ✓         | Nested lists work      |
| Links        | ✓         | Opens in browser       |
    `,
  },
};
export default NotesExampleMeta;

type NotesExampleStory = StoryObj<any>;

function NotesContent() {
  return (
    <View style={styles.container}>
      <Text>Check the Notes panel to see markdown examples</Text>
    </View>
  );
}

export const MarkdownExample: NotesExampleStory = () => <NotesContent />;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 16,
  },
});

export const Primary: Story = {
  args: { variant: 'primary' },
  parameters: {
    notes: 'This is the primary button variant. Use for main actions.',
  },
};

export const Secondary: Story = {
  args: { variant: 'secondary' },
  parameters: {
    notes: 'Secondary button for less important actions.',
  },
};

import { fn } from 'storybook/test';

const meta = {
  component: Button,
  parameters: {
    notes: `
# Interactive Button

Use the **Controls** panel to modify props.
Click the button to see **Actions** logged.
    `,
    controls: { sort: 'requiredFirst' },
    actions: { clearOnStoryChange: true },
  },
} satisfies Meta<typeof Button>;

export default meta;

export const Interactive: Story = {
  args: {
    text: 'Press me',
    onPress: fn(),
  },
};

export const PARAM_KEY = 'notes';

interface Parameters {
  notes?: string;
}