Update storybook documents

examples/storybook/stories/Welcome.mdx

@@ -0,0 +1,50 @@
+# Welcome
+
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as ClockStories from './clock/Example.stories'
+
+<Canvas of={ClockStories.Default} />
+
+This is a collection of React components by [Kitsuyui](https://github.com/kitsuyui).
+
+## Install
+
+```sh
+$ npm install @kitsuyui/react-clock @kitsuyui/react-stopwatch @kitsuyui/react-timer
+```
+
+## Usage
+
+Clock, Stopwatch, Timer, etc. change their state depending on the time.
+To separate the change of the state and the representation of the UI, I use React Context.
+For example, the following code is a clock that displays the current time in Tokyo.
+
+```tsx
+import {
+  AnalogClock,
+  ClockContainer,
+  DateContext,
+  DigitalClock,
+} from '@kitsuyui/react-clock'
+import React from 'react'
+
+const Clock = () => {
+  return (
+    <ClockContainer refreshInterval={10}>
+      <DateContext.Consumer>
+        {(date) => (
+          <>
+            <AnalogClock timezone="Asia/Tokyo" date={date} />
+            <DigitalClock timezone="Asia/Tokyo" date={date} />
+          </>
+        )}
+      </DateContext.Consumer>
+    </ClockContainer>
+  )
+}
+```
+
+`ClockContainer` is a component that manages the state of the clock.
+The `refreshInterval` property is the interval at which the clock is updated.
+`AnalogClock` and `DigitalClock` are components that display the clock. These components are independent of the state of the clock.

examples/storybook/stories/AnalogClock.stories.tsx → examples/storybook/stories/clock/Analog.stories.tsx

@@ -3,7 +3,7 @@ import { AnalogClock } from '@kitsuyui/react-clock'
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof AnalogClock> = {
-  title: 'AnalogClock',
+  title: 'Clock/Analog',
   component: AnalogClock,
 }
 

examples/storybook/stories/clock/Digital.stories.tsx

@@ -0,0 +1,25 @@
+import { DigitalClock } from '@kitsuyui/react-clock'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof DigitalClock> = {
+  title: 'Clock/Digital',
+  component: DigitalClock,
+}
+
+export default meta
+type Story = StoryObj<typeof DigitalClock>
+
+export const Default: Story = {
+  args: {
+    date: new Date('2023-01-01T10:08:42Z'),
+    timezone: 'UTC',
+  },
+}
+
+export const Tokyo: Story = {
+  args: {
+    date: new Date('2023-01-01T10:08:42Z'),
+    timezone: 'Asia/Tokyo',
+  },
+}

examples/storybook/stories/Clock.stories.tsx → examples/storybook/stories/clock/Example.stories.tsx

@@ -31,7 +31,7 @@ const Clock = () => {
 }
 
 const meta: Meta<typeof Clock> = {
-  title: 'Clock',
+  title: 'Clock/Example',
   component: Clock,
 }
 

examples/storybook/stories/Stopwatch.stories.tsx → examples/storybook/stories/stopwatch/Minimal.stories.tsx

@@ -3,7 +3,7 @@ import { MinimalStopwatch } from '@kitsuyui/react-stopwatch'
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof MinimalStopwatch> = {
-  title: 'MinimalStopwatch',
+  title: 'Stopwatch/Minimal',
   component: MinimalStopwatch,
 }
 

examples/storybook/stories/Timer.stories.tsx → examples/storybook/stories/timer/Minimal.stories.tsx

@@ -3,7 +3,7 @@ import { MinimalTimer } from '@kitsuyui/react-timer'
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof MinimalTimer> = {
-  title: 'MinimalTimer',
+  title: 'Timer/Minimal',
   component: MinimalTimer,
 }
 

examples/storybook/tests/example.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test'
 
 test('clock page', async ({ page }) => {
-  await page.goto('http://localhost:6006/?path=/story/analogclock--default')
+  await page.goto('http://localhost:6006/?path=/story/clock-analog--default')
   await page.waitForSelector('iframe[data-is-loaded="true"]')
   const screenshot = await page
     .locator('#storybook-preview-iframe')