Merge pull request #35 from 8845musign/add-generate-cmd

Add Scaffold of Component Page

.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.3.1",