From 9539e1af79395b433b7f2840c94f06df94d8d524 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Fri, 10 Jan 2025 01:13:17 +0100
Subject: [PATCH] feat(ui-docs): offer quick import snippet for each component

---
 front/ui-docs/components/ui/activity.md       |  4 ++++
 front/ui-docs/components/ui/alert.md          |  4 ++++
 front/ui-docs/components/ui/button.md         |  4 ++++
 front/ui-docs/components/ui/button/options.md |  4 ++++
 front/ui-docs/components/ui/button/play.md    |  4 ++++
 front/ui-docs/components/ui/card.md           |  6 +++++-
 front/ui-docs/components/ui/input.md          | 18 ++++++++++--------
 front/ui-docs/components/ui/layout.md         |  3 +++
 front/ui-docs/components/ui/layout/spacer.md  |  4 ++++
 front/ui-docs/components/ui/link.md           |  3 +++
 front/ui-docs/components/ui/loader.md         |  4 ++++
 front/ui-docs/components/ui/modal.md          |  4 ++++
 front/ui-docs/components/ui/pill.md           |  4 ++++
 front/ui-docs/components/ui/pills.md          |  4 ++++
 front/ui-docs/components/ui/popover.md        |  4 ++++
 front/ui-docs/components/ui/tabs.md           |  4 ++++
 front/ui-docs/components/ui/textarea.md       |  4 ++++
 front/ui-docs/components/ui/toc.md            |  4 ++++
 front/ui-docs/components/ui/toggle.md         |  4 ++++
 19 files changed, 81 insertions(+), 9 deletions(-)

diff --git a/front/ui-docs/components/ui/activity.md b/front/ui-docs/components/ui/activity.md
index 08bd40e90..2003e68da 100644
--- a/front/ui-docs/components/ui/activity.md
+++ b/front/ui-docs/components/ui/activity.md
@@ -92,6 +92,10 @@ const user: User = {
 }
 </script>
 
+```ts
+import Activity from "~/components/ui/Activity.vue"
+```
+
 # Activity
 
 Activities display history entries for a Funkwhale pod. Each item contains the following information:
diff --git a/front/ui-docs/components/ui/alert.md b/front/ui-docs/components/ui/alert.md
index f4408428c..86cb68ca7 100644
--- a/front/ui-docs/components/ui/alert.md
+++ b/front/ui-docs/components/ui/alert.md
@@ -3,6 +3,10 @@ import Alert from "~/components/ui/Alert.vue"
 import Button from "~/components/ui/Button.vue"
 </script>
 
+```ts
+import Alert from "~/components/ui/Alert.vue"
+```
+
 # Alert
 
 | Prop    | Data type                                          | Required? | Default     | Description                      |
diff --git a/front/ui-docs/components/ui/button.md b/front/ui-docs/components/ui/button.md
index 91b05c8d3..474b0fb15 100644
--- a/front/ui-docs/components/ui/button.md
+++ b/front/ui-docs/components/ui/button.md
@@ -5,6 +5,10 @@ import Layout from '~/components/ui/Layout.vue'
 const click = ():Promise<void> => new Promise(resolve => setTimeout(resolve, 1000))
 </script>
 
+```ts
+import Button from "~/components/ui/Button.vue"
+```
+
 # Button
 
 Buttons are UI elements that users can interact with to perform actions and manipulate objects. They are distinct from [Links](link) and will not change the user's position.
diff --git a/front/ui-docs/components/ui/button/options.md b/front/ui-docs/components/ui/button/options.md
index 7d0b4ef29..06ef80556 100644
--- a/front/ui-docs/components/ui/button/options.md
+++ b/front/ui-docs/components/ui/button/options.md
@@ -2,6 +2,10 @@
 import OptionsButton from '~/components/ui/button/Options.vue'
 </script>
 
+```ts
+import OptionsButton from "~/components/ui/button/Options.vue"
+```
+
 # Options Button
 
 -> For use cases, see [components/popover](../popover)
diff --git a/front/ui-docs/components/ui/button/play.md b/front/ui-docs/components/ui/button/play.md
index 16a25759b..e6b00f0cf 100644
--- a/front/ui-docs/components/ui/button/play.md
+++ b/front/ui-docs/components/ui/button/play.md
@@ -2,6 +2,10 @@
 import PlayButton from '~/components/ui/button/Play.vue'
 </script>
 
+```ts
+import PlayButton from "~/components/ui/button/Play.vue"
+```
+
 # Play Button
 
 The play button is a specialized button used in many places across the Funkwhale app. Map a function to the `@play` event handler to toggle it on click.
diff --git a/front/ui-docs/components/ui/card.md b/front/ui-docs/components/ui/card.md
index facb612dd..3db24a8ed 100644
--- a/front/ui-docs/components/ui/card.md
+++ b/front/ui-docs/components/ui/card.md
@@ -3,13 +3,17 @@
   import Card from '~/components/ui/Card.vue'
   import Layout from '~/components/ui/Layout.vue'
   import OptionsButton from '~/components/ui/button/Options.vue'
-  import Spacer from '~/components/ui/layout/Spacer.vue'
+  import Spacer from '~/components/ui/Spacer.vue'
   // import { useRoute } from 'vue-router'
 
   const alert = ( message: string ) => window.alert(message)
   // const router = useRouter()
 </script>
 
+```ts
+import Card from "~/components/ui/Card.vue"
+```
+
 # Card
 
 Funkwhale cards are used to contain textual information, links, and interactive buttons. You can use these to create visually pleasing links to content or to present information.
diff --git a/front/ui-docs/components/ui/input.md b/front/ui-docs/components/ui/input.md
index a9d701765..f8c6eb52c 100644
--- a/front/ui-docs/components/ui/input.md
+++ b/front/ui-docs/components/ui/input.md
@@ -6,22 +6,24 @@ import Spacer from "~/components/ui/Spacer.vue"
 import Alert from "~/components/ui/Alert.vue"
 </script>
 
+```ts
+import Input from "~/components/ui/Input.vue"
+```
+
 # Input
 
 Inputs are areas in which users can enter information. In Funkwhale, these mostly take the form of search fields.
 
-| Prop            | Data type | Required? | Description                                                                 |
-| --------------- | --------- | --------- | --------------------------------------------------------------------------- |
-| `placeholder`   | String    | No        | The placeholder text that appears when the input is empty.                  |
-| `icon`          | String    | No        | The [Bootstrap icon](https://icons.getbootstrap.com/) to show on the input. |
-| `v-model:value` | String    | Yes       | The text entered in the input.                                              |
-
-## Input model
+| Prop          | Data type | Required? | Description                                                                 |
+| ------------- | --------- | --------- | --------------------------------------------------------------------------- |
+| `placeholder` | String    | No        | The placeholder text that appears when the input is empty.                  |
+| `icon`        | String    | No        | The [Bootstrap icon](https://icons.getbootstrap.com/) to show on the input. |
+| `v-model`     | String    | Yes       | The text entered in the input.                                              |
 
 You can link a user's input to form data by referencing the data in a `v-model` directive.
 
 ```vue-html{2}
-<Input v-model="value" placeholder="Search" />
+<Input v-model="value" placeholder="Your favorite animal" />
 ```
 
 <Input placeholder="Your favorite animal" />
diff --git a/front/ui-docs/components/ui/layout.md b/front/ui-docs/components/ui/layout.md
index 8f5275f79..489e1f5da 100644
--- a/front/ui-docs/components/ui/layout.md
+++ b/front/ui-docs/components/ui/layout.md
@@ -14,6 +14,9 @@ const isGrowing = ref(true)
 const noGap = ref(true)
 </script>
 
+```ts
+import Layout from "~/components/ui/Layout.vue"
+```
 # Layout
 
 CSS provides [four methods to arrange items in a container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods): Flow, Columns, Flex and Grid. To make typical alignment tasks in the Funkwhale Ui easier, we have created a few useful presets.
diff --git a/front/ui-docs/components/ui/layout/spacer.md b/front/ui-docs/components/ui/layout/spacer.md
index 025e2cacb..e07eed563 100644
--- a/front/ui-docs/components/ui/layout/spacer.md
+++ b/front/ui-docs/components/ui/layout/spacer.md
@@ -17,6 +17,10 @@ const size = ref(32)
   }
 </style>
 
+```ts
+import Spacer from "~/components/ui/Spacer.vue"
+```
+
 # Spacer
 
 Add a 16px gap between adjacent items.
diff --git a/front/ui-docs/components/ui/link.md b/front/ui-docs/components/ui/link.md
index ddabe19d5..fcb6b905d 100644
--- a/front/ui-docs/components/ui/link.md
+++ b/front/ui-docs/components/ui/link.md
@@ -6,6 +6,9 @@ import Card from '~/components/ui/Card.vue'
 import Alert from '~/components/ui/Alert.vue'
 </script>
 
+```ts
+import Link from "~/components/ui/Link.vue"
+```
 # Link
 
 Users can navigate by following Links. They expect that in contrast to clicking a [button](button), following a link does not manipulate items or trigger any action.
diff --git a/front/ui-docs/components/ui/loader.md b/front/ui-docs/components/ui/loader.md
index a6ee9f243..48b3624ac 100644
--- a/front/ui-docs/components/ui/loader.md
+++ b/front/ui-docs/components/ui/loader.md
@@ -9,6 +9,10 @@ import Loader from '~/components/ui/Loader.vue'
 }
 </style>
 
+```ts
+import Loader from "~/components/ui/Loader.vue"
+```
+
 # Loader
 
 Loaders visually indicate when an operation is loading. This makes it visually clear that the user can't interact with the element until the loading process is complete.
diff --git a/front/ui-docs/components/ui/modal.md b/front/ui-docs/components/ui/modal.md
index 6f9bf0506..7a5ff4676 100644
--- a/front/ui-docs/components/ui/modal.md
+++ b/front/ui-docs/components/ui/modal.md
@@ -23,6 +23,10 @@ const isOpen6 = ref(false)
 
 </script>
 
+```ts
+import Modal from "~/components/ui/Modal.vue"
+```
+
 # Modal
 
 | Prop      | Data type         | Required? | Default | Description                        |
diff --git a/front/ui-docs/components/ui/pill.md b/front/ui-docs/components/ui/pill.md
index af66a69b4..e92e497f7 100644
--- a/front/ui-docs/components/ui/pill.md
+++ b/front/ui-docs/components/ui/pill.md
@@ -2,6 +2,10 @@
 import Pill from '~/components/ui/Pill.vue'
 </script>
 
+```ts
+import Pill from "~/components/ui/Pill.vue"
+```
+
 # Pill
 
 Pills are decorative elements that display information about content they attach to. They can be links to other content or simple colored labels.
diff --git a/front/ui-docs/components/ui/pills.md b/front/ui-docs/components/ui/pills.md
index 9a47b9cb0..8113ba5dc 100644
--- a/front/ui-docs/components/ui/pills.md
+++ b/front/ui-docs/components/ui/pills.md
@@ -20,6 +20,10 @@ const interactiveModel = ref({
 });
 </script>
 
+```ts
+import Pills from "~/components/ui/Pills.vue"
+```
+
 # Pills
 
 <Layout class="preview" style="padding:16px">
diff --git a/front/ui-docs/components/ui/popover.md b/front/ui-docs/components/ui/popover.md
index 02b3bb6cd..1bc0614b1 100644
--- a/front/ui-docs/components/ui/popover.md
+++ b/front/ui-docs/components/ui/popover.md
@@ -42,6 +42,10 @@ const fullMenu= ref(false)
 const isOpen = ref(false)
 </script>
 
+```ts
+import Popover from "~/components/ui/Popover.vue"
+```
+
 # Popover (Dropdown Menu)
 
 Popovers (`Popover`) are dropdown menus activated by a button. Use popovers to create dropdown menus ranging from simple lists to complex nested menus.
diff --git a/front/ui-docs/components/ui/tabs.md b/front/ui-docs/components/ui/tabs.md
index 53bbe4d7a..ec6c9da54 100644
--- a/front/ui-docs/components/ui/tabs.md
+++ b/front/ui-docs/components/ui/tabs.md
@@ -4,6 +4,10 @@ import Tabs from '~/components/ui/Tabs.vue'
 import Tab from '~/components/ui/Tab.vue'
 </script>
 
+```ts
+import Tabs from "~/components/ui/Tabs.vue"
+```
+
 # Tabs
 
 Tabs are used to hide information until a user chooses to see it. You can use tabs to show two sets of information on the same page without the user needing to navigate away.
diff --git a/front/ui-docs/components/ui/textarea.md b/front/ui-docs/components/ui/textarea.md
index 5c64c2b3c..ccc424653 100644
--- a/front/ui-docs/components/ui/textarea.md
+++ b/front/ui-docs/components/ui/textarea.md
@@ -8,6 +8,10 @@ const text2 = ref('# Funk\nwhale')
 const text3 = ref('')
 </script>
 
+```ts
+import Textarea from "~/components/ui/Textarea.vue"
+```
+
 # Textarea
 
 Textareas are input blocks that enable users to write in textual information. These blocks are used throughout the Funkwhale interface for entering item descriptions, moderation notes, and custom notifications.
diff --git a/front/ui-docs/components/ui/toc.md b/front/ui-docs/components/ui/toc.md
index ff7643610..8e5ccf00c 100644
--- a/front/ui-docs/components/ui/toc.md
+++ b/front/ui-docs/components/ui/toc.md
@@ -2,6 +2,10 @@
 import Toc from '~/components/ui/Toc.vue'
 </script>
 
+```ts
+import Toc from "~/components/ui/Toc.vue"
+```
+
 # Table of Contents
 
 The table of contents component renders a navigation bar on the right of the screen. Users can click on the items in the contents bar to skip to specific headers.
diff --git a/front/ui-docs/components/ui/toggle.md b/front/ui-docs/components/ui/toggle.md
index 3e4760521..f2e87407e 100644
--- a/front/ui-docs/components/ui/toggle.md
+++ b/front/ui-docs/components/ui/toggle.md
@@ -8,6 +8,10 @@ import { ref } from 'vue'
 const toggle = ref(false)
 </script>
 
+```ts
+import Toggle from "~/components/ui/Toggle.vue"
+```
+
 # Toggle
 
 Toggles are basic form inputs that visually represent a boolean value. Toggles can be **on** (`true`) or **off** (`false`). For actions with more than 2 states or delayed, fallible, or effectful actions, [consider using a Button with `aria-pressed` logic instead](button#on-off).