Merge branch 'main' into HEAD

Signed-off-by: 8845musign <[email protected]>

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @takanorip @8845musign

.scaffdog/example.md

@@ -1,14 +1,14 @@
 ---
 name: example
-root: '.'
-output: '**/*'
+root: 'src'
+output: '.'
 ignore: []
 questions:
-  exampleKey: What is the exampleKey (e.g., link-button)?
-  exampleName: What is the exampleName (e.g., with-icon)?
+  exampleKey: What is the component name (e.g., link-button)?
+  exampleName: What is the example name (e.g., with-icon)?
 ---
 
-# `src/components/react/examples/{{ inputs.exampleKey }}/{{ inputs.exampleName | pascal }}.tsx`
+# `components/react/examples/{{ inputs.exampleKey }}/{{ inputs.exampleName | pascal }}.tsx`
 
 ```typescript
 
@@ -25,9 +25,9 @@ export default {{ inputs.exampleName | pascal }};
 
 ```
 
-# `src/pages/components/examples/{{ inputs.exampleKey }}/{{ inputs.exampleName }}.astro`
+# `pages/components/examples/{{ inputs.exampleKey }}/{{ inputs.exampleName }}.astro`
 
-```typescript
+```astro
 ---
 import ExampleLayout from '@layouts/ExampleLayout.astro';
 import {{ inputs.exampleName | pascal }} from '@components/react/examples/{{ inputs.exampleKey }}/{{ inputs.exampleName | pascal }}';

.scaffdog/pageComponent.md

@@ -0,0 +1,58 @@
+---
+name: pageComponent
+root: 'src'
+output: '.'
+ignore: []
+questions:
+  componentName: What is the component name (e.g., link-button)?
+---
+
+# `components/react/examples/{{ inputs.componentName }}/Default.tsx`
+
+```typescript
+import { {{ inputs.componentName | pascal }} } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+export const DefaultExample: FC = () => {
+  return (
+    <{{ inputs.componentName | pascal }} />
+  );
+};
+
+```
+
+# `pages/components/examples/{{ inputs.componentName }}/default.astro`
+
+```astro
+---
+import { DefaultExample } from '@components/react/examples/{{ inputs.componentName }}/Default';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
+---
+
+<ExampleLayout title="Default Example | {{ inputs.componentName | pascal }}">
+  <DefaultExample client:only="react" />
+</ExampleLayout>
+```
+
+
+
+# `pages/components/{{ inputs.componentName }}.mdx`
+
+```markdown
+---
+title: '{{ inputs.componentName | pascal }}'
+exampleKey: '{{ inputs.componentName }}'
+layout: '@layouts/ComponentLayout.astro'
+description: ''
+thumbnail: '/assets/images/components/thumbnail-default.svg'
+---
+
+## Feature
+
+Describe the characteristics of the component. Describe the use cases to which it is applicable and how it differs from other components.
+
+## Usage
+
+ Please describe the specific use of the product. Detailed notes on use, code example, etc.
+
+```

README.md

@@ -12,4 +12,25 @@ npm ci
 
 ```
 npm run dev
-```
+```
+
+### Add Component Page
+
+```
+npm run generate:page:component
+```
+
+**src/components/react/examples/{component-name}/Default.tsx**:
+
+Implement the most basic example.
+
+**src/pages/components/tes-test.mdx**:
+
+- Replace thumbnail
+- Describe the documentation
+
+### Add Component Example
+
+```
+npm run generate:example
+```

package.json

@@ -15,7 +15,9 @@
     "lint:css:fix": "stylelint --fix src/**/*.{astro,module.css,css}",
     "prettier:astro": "prettier --write src/**/*.astro",
     "script:extract-icon-names": "node ./scripts/extractIconNames.js",
-    "test": "vitest"
+    "test": "vitest",
+    "generate:page:component": "scaffdog generate pageComponent",
+    "generate:example": "scaffdog generate example"
   },
   "dependencies": {
     "@astrojs/check": "^0.5.5",

src/components/react/examples/toggle/Default.tsx

@@ -0,0 +1,12 @@
+import { Toggle } from '@ubie/ubie-ui';
+import { useState, type FC, type ChangeEventHandler, useCallback } from 'react';
+
+export const DefaultExample: FC = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+    setIsChecked(event.target.checked);
+  }, []);
+
+  return <Toggle checked={isChecked} onChange={handleChange} />;
+};

src/components/react/examples/toggle/Disabled.tsx

@@ -0,0 +1,12 @@
+import { Toggle } from '@ubie/ubie-ui';
+import { useState, type FC, type ChangeEventHandler, useCallback } from 'react';
+
+export const DisabledExample: FC = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+    setIsChecked(event.target.checked);
+  }, []);
+
+  return <Toggle checked={isChecked} onChange={handleChange} disabled />;
+};

src/components/react/figures/typography/BodyList.tsx

@@ -37,7 +37,7 @@ const BodyList: FC = () => {
           <ExampleText
             type="body"
             size="sm"
-            leading="narrow"
+            leading="tight"
             src="/assets/images/figures/typography/example-text-body-sm-tight.svg"
             alt="Body/sm-tightでテキストを表示した場合のサンプル"
             width="352"
@@ -74,7 +74,7 @@ const BodyList: FC = () => {
           <ExampleText
             type="body"
             size="md"
-            leading="narrow"
+            leading="tight"
             src="/assets/images/figures/typography/example-text-body-md-tight.svg"
             alt="Body/md-tightでテキストを表示した場合のサンプル"
             width="352"

src/pages/components/examples/toggle/default.astro

@@ -0,0 +1,8 @@
+---
+import { DefaultExample } from '@components/react/examples/toggle/Default';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
+---
+
+<ExampleLayout title="Default Example | Toggle">
+  <DefaultExample client:only="react" />
+</ExampleLayout>

src/pages/components/examples/toggle/disabled.astro

@@ -0,0 +1,8 @@
+---
+import { DisabledExample } from '@components/react/examples/toggle/Disabled';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
+---
+
+<ExampleLayout title="Disabled Example | Toggle">
+  <DisabledExample client:only="react" />
+</ExampleLayout>

src/pages/components/toggle.mdx

@@ -0,0 +1,17 @@
+---
+title: 'Toggle'
+exampleKey: 'toggle'
+layout: '@layouts/ComponentLayout.astro'
+description: '設定をオンまたはオフに切り替えるためのコンポーネント'
+thumbnail: '/assets/images/components/thumbnail-toggle.svg.svg'
+---
+
+## Feature
+
+- 設定項目が2つの状態のみを持つ場合（例えば、設定の有効/無効）に適しています。
+- ユーザーが行った選択をすぐに反映させるシナリオに適しており、直感的に操作できるように設計されています。
+
+## Usage
+
+- `checked` と `onChange` を使用して値をコントロールして使用してください。
+  - `onChange` で通信を伴うなど待機時間が生まれる場合には、楽観的に状態を更新することが好まれます。