Merge pull request #68 from kitsuyui/update-examples

update examples

examples/storybook/.storybook/main.js

@@ -2,6 +2,7 @@
 const config = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
+    'storybook-addon-swc',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',

examples/storybook/package.json

@@ -5,24 +5,24 @@
   "license": "MIT",
   "private": true,
   "devDependencies": {
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.5",
     "@kitsuyui/react-clock": "file:../../packages/clock",
     "@kitsuyui/react-stopwatch": "file:../../packages/stopwatch",
     "@kitsuyui/react-timer": "file:../../packages/timer",
     "@playwright/test": "^1.34.0",
-    "@storybook/addon-essentials": "^7.0.8",
-    "@storybook/addon-interactions": "^7.0.8",
-    "@storybook/addon-links": "^7.0.8",
-    "@storybook/blocks": "^7.0.8",
-    "@storybook/react": "^7.0.8",
-    "@storybook/react-webpack5": "^7.0.8",
+    "@storybook/addon-essentials": "^7.0.17",
+    "@storybook/addon-interactions": "^7.0.17",
+    "@storybook/addon-links": "^7.0.17",
+    "@storybook/blocks": "^7.0.17",
+    "@storybook/react": "^7.0.17",
+    "@storybook/react-webpack5": "^7.0.17",
     "@storybook/testing-library": "^0.1.0",
+    "@swc/cli": "^0.1.62",
+    "@swc/core": "^1.3.60",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.8"
+    "storybook": "^7.0.17",
+    "storybook-addon-swc": "^1.2.0"
   },
   "scripts": {
     "start": "storybook dev -p 6006",

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/clock/Analog.stories.tsx

@@ -0,0 +1,47 @@
+import { AnalogClock } from '@kitsuyui/react-clock'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof AnalogClock> = {
+  title: 'Clock/Analog',
+  component: AnalogClock,
+}
+
+export default meta
+type Story = StoryObj<typeof AnalogClock>
+
+export const Default: Story = {
+  args: {
+    date: new Date('2023-01-01T10:08:42Z'),
+    timezone: 'UTC',
+    face: 'arabic',
+    step: 'tick',
+  },
+}
+
+export const Roman: Story = {
+  args: {
+    date: new Date('2023-01-01T10:08:42Z'),
+    timezone: 'UTC',
+    face: 'roman',
+    step: 'tick',
+  },
+}
+
+export const Sweep: Story = {
+  args: {
+    date: new Date('2023-01-01T10:08:42Z'),
+    timezone: 'UTC',
+    face: 'arabic',
+    step: 'sweep',
+  },
+}
+
+export const Tokyo: Story = {
+  args: {
+    date: new Date('2023-01-01T10:08:42Z'),
+    timezone: 'Asia/Tokyo',
+    face: 'arabic',
+    step: 'tick',
+  },
+}

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',
+  },
+}