docs: add installation docs for components

phernandez · phernandez · commit 3f963aaad076 · 2024-11-17T10:22:46.000-06:00
diff --git a/README.md b/README.md
@@ -106,7 +106,7 @@ Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.
 - [ ] sonner
 - [ ] switch
 - [x] table
-- [ ] tabs
+- [x] tabs
 - [x] textarea
 - [x] toast
 - [ ] toaster
diff --git a/docs/content/components/accordion.md b/docs/content/components/accordion.md
@@ -13,6 +13,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Accordion" component="accordion"/>
+
+<Prose>
+
 ## Usage
 </Prose>
 
diff --git a/docs/content/components/alert.md b/docs/content/components/alert.md
@@ -11,6 +11,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Alert" component="alert"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/alert_dialog.md b/docs/content/components/alert_dialog.md
@@ -21,6 +21,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Alert Dialog" component="alert_dialog"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/badge.md b/docs/content/components/badge.md
@@ -14,6 +14,14 @@ examples:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Badge" component="badge"/>
+
+<Prose>
+
 ## Usage
 </Prose>
 
diff --git a/docs/content/components/button.md b/docs/content/components/button.md
@@ -10,6 +10,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Button" component="button"/>
+
+<Prose>
+
 ## Usage
 </Prose>
 
diff --git a/docs/content/components/card.md b/docs/content/components/card.md
@@ -15,6 +15,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Card" component="card"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/checkbox.md b/docs/content/components/checkbox.md
@@ -10,6 +10,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Checkbox" component="checkbox"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/dialog.md b/docs/content/components/dialog.md
@@ -18,6 +18,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Dialog" component="dialog"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/dropdown_menu.md b/docs/content/components/dropdown_menu.md
@@ -20,6 +20,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Dropdown Menu" component="dropdown_menu"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/form.md b/docs/content/components/form.md
@@ -14,6 +14,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Form" component="form"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/icons.md b/docs/content/components/icons.md
@@ -15,6 +15,14 @@ Components are included for each of the icons in the <Link href="/https://lucide
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Icons" component="icons"/>
+
+<Prose>
+
 **Note:**
 Icon components are named `<IconName>Icon.jinja` to avoid naming conflicts with other components. Otherwise, for instance
 the `Sheet` icon would have a naming conflict with the `Sheet` component. 
diff --git a/docs/content/components/input.md b/docs/content/components/input.md
@@ -16,6 +16,14 @@ examples:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Input" component="input"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/label.md b/docs/content/components/label.md
@@ -9,6 +9,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Label" component="label"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/link.md b/docs/content/components/link.md
@@ -9,6 +9,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Link" component="link"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/mode_toggle.md b/docs/content/components/mode_toggle.md
@@ -11,6 +11,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Mode Toggle" component="mode_toggle"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/popover.md b/docs/content/components/popover.md
@@ -11,6 +11,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Popover" component="popover"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/radio_group.md b/docs/content/components/radio_group.md
@@ -11,6 +11,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Radio Group" component="radio_group"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/select.md b/docs/content/components/select.md
@@ -17,6 +17,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Select" component="select"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/sheet.md b/docs/content/components/sheet.md
@@ -17,6 +17,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Sheet" component="sheet"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/table.md b/docs/content/components/table.md
@@ -16,6 +16,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Table" component="table"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/tabs.md b/docs/content/components/tabs.md
@@ -11,6 +11,13 @@ templates:
 
 <TabPreview component="Tabs" template="examples/tabs.html"/>
 
+<Prose>
+
+## Installation
+
+</Prose>
+
+<Installation name="Tabs" component="tabs"/>
 
 <Prose>
 
diff --git a/docs/content/components/textarea.md b/docs/content/components/textarea.md
@@ -16,6 +16,14 @@ examples:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Textarea" component="textarea"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/toast.md b/docs/content/components/toast.md
@@ -11,6 +11,14 @@ templates:
 
 <Prose>
 
+## Installation
+
+</Prose>
+
+<Installation name="Toast" component="toast"/>
+
+<Prose>
+
 ## Usage
 
 </Prose>
diff --git a/docs/content/components/wtform.md b/docs/content/components/wtform.md
@@ -21,7 +21,13 @@ templates:
   </CardContent>
 </Card>
 
+<Prose>
+
+## Installation
+
+</Prose>
 
+<Installation name="WTForm" component="wtform"/>
 
 <Prose>
 
diff --git a/docs/content/docs/ai.md b/docs/content/docs/ai.md
@@ -13,7 +13,7 @@ an LLM.
 
 ## AI Prompting
 
-The `llms.md` file contains an overview of the project and detailed information that can be provided to an LLM 
+The [llms.md](https://github.com/basicmachines-co/basic-components/blob/main/llms.md) file contains an overview of the project and detailed information that can be provided to an LLM 
 to aid with creating components and porting components from React.   
 
 </Prose>
@@ -24,6 +24,7 @@ to aid with creating components and porting components from React.
 
 ## Porting Process
 
+0. **Add** the [llms.md](https://github.com/basicmachines-co/basic-components/blob/main/llms.md) file as context to your chat.
 1. **Select** a component from [shadcn/ui](https://ui.shadcn.com/) to port.
 2. **Gather** information about the component (name, description, React code, usage examples).
 3. **Use AI** to assist with the initial port (see below).
@@ -35,7 +36,7 @@ to aid with creating components and porting components from React.
 9. **Contribute** your change back to the project if you like.
 
 
-## Effective AI Prompting
+## AI Prompt Template
 
 When porting a component you can use this prompt template:
 
diff --git a/docs/content/docs/cli.md b/docs/content/docs/cli.md
diff --git a/docs/content/docs/introduction.md b/docs/content/docs/introduction.md
diff --git a/docs/content/docs/utilities.md b/docs/content/docs/utilities.md
diff --git a/docs/templates/components/Installation.jinja b/docs/templates/components/Installation.jinja
diff --git a/pyproject.toml b/pyproject.toml
