feat(content): add steps to installation sections

kosori · Aug 17, 2024 · 196c1da · 196c1da
1 parent 718beed
commit 196c1da
Show file tree

Hide file tree

Showing 45 changed files with 1,785 additions and 644 deletions.
diff --git a/apps/www/content/docs/ui/accordion.mdx b/apps/www/content/docs/ui/accordion.mdx
@@ -17,22 +17,75 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
+  <Step>
+    ### Install the primitive
 
-```package-install
-@radix-ui/react-accordion
-```
+    Install the `@radix-ui/react-accordion` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-accordion
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/accordion.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+
+  <Step>
+    ### Copy-paste the component
+
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/accordion.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+  <Step>
+    ### Add keyframes animation
+
+    Add the `accordion-down` and `accordion-up` keyframes animation to your Tailwind CSS config.
+
+    ```ts title="tailwind.config.ts"
+    import type { Config } from 'tailwindcss';
+
+    const config: Config = {
+      // ...,
+      keyframes: {
+        // [!code highlight:9]
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        // [!code highlight:3]
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      }
+    };
+    ```
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 

diff --git a/apps/www/content/docs/ui/alert-dialog.mdx b/apps/www/content/docs/ui/alert-dialog.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-alert-dialog
-```
+  <Step>
+    ### Install the primitive
+
+    Install the `@radix-ui/react-alert-dialog` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-alert-dialog
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/alert-dialog.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+
+  <Step>
+    ### Copy-paste the component
+
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/alert-dialog.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
 
-</div>
+</Steps>
 
 ## Usage
 

diff --git a/apps/www/content/docs/ui/alert.mdx b/apps/www/content/docs/ui/alert.mdx
@@ -14,18 +14,34 @@ description: Displays a callout for user attention.
 
 ## Installation
 
-Copy-paste the component code in a `.tsx` file.
+<Steps>
 
-<div className='not-prose [&_figure]:max-h-[500px] [&_figure]:overflow-y-auto'>
+  <Step>
+    ### Copy-paste the component
+
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[500px] [&_figure]:overflow-y-auto'>
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/alert.tsx",
-  "codeblock": true
-}
-```
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/alert.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
 
-</div>
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
@@ -43,9 +59,24 @@ import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
 </Alert>
 ```
 
+## Reference
+
+<TypeTable
+  type={{
+    intent: {
+      default: 'default',
+      description: 'The visual style of the alert',
+      type: 'enum',
+      typeDescription: "'default' | 'info' | 'success' | 'warning' | 'error'",
+    },
+  }}
+/>
+
 ## Examples
 
-### Default
+### Intents
+
+#### Default
 
 <ComponentPreview name='alert'>
 ```json doc-gen:file
@@ -56,7 +87,7 @@ import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
 ```
 </ComponentPreview>
 
-### Info
+#### Info
 
 <ComponentPreview name='alert-info'>
 ```json doc-gen:file
@@ -67,7 +98,7 @@ import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
 ```
 </ComponentPreview>
 
-### Success
+#### Success
 
 <ComponentPreview name='alert-success'>
 ```json doc-gen:file
@@ -78,7 +109,7 @@ import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
 ```
 </ComponentPreview>
 
-### Warning
+#### Warning
 
 <ComponentPreview name='alert-warning'>
 ```json doc-gen:file
@@ -89,7 +120,7 @@ import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
 ```
 </ComponentPreview>
 
-### Error
+#### Error
 
 <ComponentPreview name='alert-error'>
 ```json doc-gen:file

diff --git a/apps/www/content/docs/ui/aspect-ratio.mdx b/apps/www/content/docs/ui/aspect-ratio.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-aspect-ratio
-```
+  <Step>
+    ### Install the primitive
+
+    Install the `@radix-ui/react-aspect-ratio` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-aspect-ratio
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/aspect-ratio.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+    
+  <Step>
+    ### Copy-paste the component
+    
+    Copy and paste the component code in a `.tsx` file.
 
-</div>
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/aspect-ratio.tsx",
+      "codeblock": true
+    }
+    ```
+
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+</Steps>
 
 ## Usage
 

diff --git a/apps/www/content/docs/ui/avatar.mdx b/apps/www/content/docs/ui/avatar.mdx
@@ -17,22 +17,45 @@ links:
 
 ## Installation
 
-Install the primitive and copy-paste the component code in a `.tsx` file.
+<Steps>
 
-```package-install
-@radix-ui/react-avatar
-```
+  <Step>
+    ### Install the primitive
+
+    Install the `@radix-ui/react-avatar` package.
 
-<div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+    ```package-install
+    @radix-ui/react-avatar
+    ```
 
-```json doc-gen:file
-{
-  "file": "../../packages/ui/src/avatar.tsx",
-  "codeblock": true
-}
-```
+  </Step>
+
+  <Step>
+    ### Copy-paste the component
+
+    Copy and paste the component code in a `.tsx` file.
+
+    <div className='not-prose [&_figure]:max-h-[320px] [&_figure]:overflow-y-auto'>
+
+    ```json doc-gen:file
+    {
+      "file": "../../packages/ui/src/avatar.tsx",
+      "codeblock": true
+    }
+    ```
 
-</div>
+    </div>
+
+  </Step>
+
+  <Step>
+    ### Update import paths
+
+    Update the `@kosori/ui` import paths to fit your project structure, for example, using `~/components/ui`.
+
+  </Step>
+
+</Steps>
 
 ## Usage
 
@@ -47,6 +70,25 @@ import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
 </Avatar>
 ```
 
+## Reference
+
+<TypeTable
+  type={{
+    shape: {
+      default: 'round',
+      description: 'The shape of the avatar',
+      type: 'enum',
+      typeDescription: "'round' | 'square'",
+    },
+    size: {
+      default: 'medium',
+      description: 'The size of the avatar',
+      type: 'enum',
+      typeDescription: "'small' | 'medium' | 'large'",
+    },
+  }}
+/>
+
 ## Examples
 
 ### Shapes