}
+ icon={}
placeholder="https://twitter.com/"
onAction={action('icon clicked')}
/>
diff --git a/stories/Introduction.mdx b/stories/Introduction.mdx
new file mode 100644
index 00000000..bce5b95d
--- /dev/null
+++ b/stories/Introduction.mdx
@@ -0,0 +1,221 @@
+import { Meta } from '@storybook/blocks'
+import Code from './assets/code-brackets.svg'
+import Colors from './assets/colors.svg'
+import Comments from './assets/comments.svg'
+import Direction from './assets/direction.svg'
+import Flow from './assets/flow.svg'
+import Plugin from './assets/plugin.svg'
+import Repo from './assets/repo.svg'
+import StackAlt from './assets/stackalt.svg'
+
+
+
+
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+Configure
+
+
+
+Learn
+
+
+
+
+ TipEdit the Markdown in{' '}
+ stories/Introduction.stories.mdx
+
diff --git a/stories/Link.stories.tsx b/stories/Link.stories.tsx
new file mode 100644
index 00000000..3d69b423
--- /dev/null
+++ b/stories/Link.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Link from '../src/components/Link'
+
+const meta = {
+ title: 'Components/Link',
+ component: Link,
+ tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {
+ children: 'Link Preview',
+ href: 'https://ooni.org',
+ target: '_blank',
+ },
+}
diff --git a/src/stories/LogoOONIRun.stories.tsx b/stories/LogoOONIRun.stories.tsx
similarity index 50%
rename from src/stories/LogoOONIRun.stories.tsx
rename to stories/LogoOONIRun.stories.tsx
index 379bb6c0..0b5b13dd 100644
--- a/src/stories/LogoOONIRun.stories.tsx
+++ b/stories/LogoOONIRun.stories.tsx
@@ -1,16 +1,13 @@
import React from 'react'
-import { addDecorator, Meta } from '@storybook/react'
-import LogoOONIRun from '../components/LogoOONIRun'
-import Container from '../components/Container'
-import ThemeDecorator from './ThemeDecorator'
+import { Meta } from '@storybook/react'
+import LogoOONIRun from '../src/components/LogoOONIRun'
+import Container from '../src/components/Container'
const meta: Meta = {
title: 'LogoOONIRun',
component: LogoOONIRun,
}
-addDecorator(ThemeDecorator)
-
export default meta
export const Default = () => {
diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
new file mode 100644
index 00000000..defeb35d
--- /dev/null
+++ b/stories/Modal.stories.tsx
@@ -0,0 +1,38 @@
+import React, { useCallback, useState } from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import Box from '../src/components/Box'
+import Flex from '../src/components/Flex'
+import Modal from '../src/components/Modal'
+import Container from '../src/components/Container'
+import Button from '../src/components/Button'
+
+const meta: Meta = {
+ title: 'Components/Modal',
+ component: Modal,
+ tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj
+
+export const Default = () => {
+ const [show, setShow] = useState(false)
+
+ const onClose = useCallback(() => {
+ setShow(false)
+ action('Clicked')
+ }, [])
+
+ return (
+
+
+
+
+
+ Modal Content
+
+
+ )
+}
diff --git a/stories/OONIIcons.stories.tsx b/stories/OONIIcons.stories.tsx
new file mode 100644
index 00000000..06d6fb89
--- /dev/null
+++ b/stories/OONIIcons.stories.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { Meta } from '@storybook/react'
+import Box from '../src/components/Box'
+import Flex from '../src/components/Flex'
+import * as OONIIcons from '../src/components/icons'
+import Text from '../src/components/Text'
+
+const meta: Meta = {
+ title: 'OONIIcons',
+}
+
+export default meta
+
+export const Default = {
+ render: () => (
+
+ {Object.entries(OONIIcons).map(([name, _]) => {
+ const Icon = OONIIcons[name]
+ return (
+
+
+ {name}
+
+ )
+ })}
+
+ ),
+}
diff --git a/stories/RadioButton.stories.tsx b/stories/RadioButton.stories.tsx
new file mode 100644
index 00000000..4d955994
--- /dev/null
+++ b/stories/RadioButton.stories.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import RadioButton from '../src/components/RadioButton'
+
+const meta: Meta = {
+ title: 'Components/RadioButton',
+ component: RadioButton,
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {
+ label: 'OONI',
+ name: 'OONI',
+ id: 'ooni',
+ value: 'ooni',
+ },
+}
diff --git a/stories/RadioGroup.stories.tsx b/stories/RadioGroup.stories.tsx
new file mode 100644
index 00000000..60fdba6c
--- /dev/null
+++ b/stories/RadioGroup.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import RadioGroup from '../src/components/RadioGroup'
+import RadioButton from '../src/components/RadioButton'
+
+const meta: Meta = {
+ title: 'Components/RadioGroup',
+ component: RadioGroup,
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {
+ render: () => (
+
+
+
+
+
+
+ ),
+}
diff --git a/src/stories/Select.stories.tsx b/stories/Select.stories.tsx
similarity index 69%
rename from src/stories/Select.stories.tsx
rename to stories/Select.stories.tsx
index fa629710..8642eb5c 100644
--- a/src/stories/Select.stories.tsx
+++ b/stories/Select.stories.tsx
@@ -1,17 +1,15 @@
import React from 'react'
-import { addDecorator, Meta, Story } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
import { action } from '@storybook/addon-actions'
-import { Box } from 'rebass/styled-components'
-import { Label, Select } from '@rebass/forms'
-import ThemeDecorator from './ThemeDecorator'
+
+import Box from '../src/components/Box'
+import Select from '../src/components/Select'
const meta: Meta = {
- title: 'Select',
+ title: 'Components/Select',
component: Select,
}
-addDecorator(ThemeDecorator)
-
export default meta
export const Default = () => {
@@ -32,10 +30,11 @@ export const Default = () => {
return (
-
+ {/* */}