Add ApiDocs to all component examples

techniq · Dec 24, 2021 · 104616c · 104616c · vercel · Dec 24, 2021
1 parent 2094437
commit 104616c
Show file tree

Hide file tree

Showing 51 changed files with 535 additions and 6 deletions.
diff --git a/src/lib/components/ApiDocs.d.ts b/src/lib/components/ApiDocs.d.ts
@@ -0,0 +1,43 @@
+// See: https://github.com/mattjennings/vite-plugin-sveld/blob/main/types.d.ts
+
+interface SveldProp {
+  name: string;
+  kind: string;
+  type: string;
+  isFunction: boolean;
+  isFunctionDeclaration: boolean;
+  constant: boolean;
+  reactive: boolean;
+}
+
+interface SveldSlot {
+  name: string;
+  default: boolean;
+  fallback: string;
+  slot_props: string;
+}
+
+interface SveldEvent {
+  type: string;
+  name: string;
+  element: string;
+}
+
+interface SveldRestProps {
+  type: string;
+  name: string;
+}
+
+interface SveldTypdefs {
+  type: string;
+  name: string;
+  ts: string;
+}
+
+interface SveldJson {
+  props: SveldProp[];
+  slots: SveldSlot[];
+  events: SveldEvent[];
+  typedefs: SveldTypedefs[];
+  rest_props: SveldRestProps[];
+}
diff --git a/src/lib/components/ApiDocs.svelte b/src/lib/components/ApiDocs.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import Card from './Card.svelte';
+  import Table from './Table.svelte';
+
+  export let api: SveldJson;
+
+  // $: console.log({ api });
+</script>
+
+<div class="grid gap-8">
+  <Card title="Props" id="props">
+    <Table
+      columns={[
+        // TODO: Determine required
+        { name: 'name', align: 'left' },
+        { name: 'type', align: 'left' },
+        { name: 'value', header: 'default', align: 'left' },
+        { name: 'description', align: 'left', class: { data: 'whitespace-pre' } },
+        // { name: 'kind', align: 'left' },
+        // { name: 'isFunction', align: 'left' },
+        // { name: 'isFunctionDeclaration', align: 'left' },
+        // { name: 'constant', align: 'left' },
+        // { name: 'reactive', align: 'left' },
+      ]}
+      data={api.props}
+      slot="contents"
+    />
+  </Card>
+
+  <Card title="Slots" id="slots">
+    <Table
+      columns={[
+        { name: 'name', align: 'left' },
+        { name: 'default', align: 'left' },
+        { name: 'slot_props', header: 'props', align: 'left' },
+      ]}
+      data={api.slots}
+      slot="contents"
+    />
+  </Card>
+
+  <Card title="Events" id="events">
+    <Table
+      columns={[
+        { name: 'name', align: 'left' },
+        { name: 'element', align: 'left' },
+        { name: 'type', align: 'left' },
+      ]}
+      data={api.events}
+      slot="contents"
+    />
+  </Card>
+
+  <!-- <Card title="Types" id="types">
+  <Table
+    columns={[
+      { name: 'TODO', align: 'left' },
+    ]}
+    data={api.props}
+    slot="contents"
+  />
+</Card>
+ -->
+</div>
diff --git a/src/routes/docs/components/AppBar.md b/src/routes/docs/components/AppBar.md
@@ -6,17 +6,22 @@ filename: $filename
 <script lang="ts">
 	import { mdiRefresh } from '@mdi/js';
 
+	import api from '$lib/components/AppBar.svelte?raw&sveld';
+  import ApiDocs from '$lib/components/ApiDocs.svelte';
+
 	import AppBar from '$lib/components/AppBar.svelte';
 	import Button from '$lib/components/Button.svelte';
 	import Preview from '$lib/components/Preview.svelte';
 </script>
 
-## Usage
+# Usage
 
 ```js
 import { AppBar } from 'svelte-ux';
 ```
 
+# Examples
+
 ## Default
 
 <Preview>
@@ -53,3 +58,7 @@ import { AppBar } from 'svelte-ux';
 		<AppBar title="Example" class="bg-white text-black" />
 	</div>
 </Preview>
+
+# API
+
+<ApiDocs {api} />
diff --git a/src/routes/docs/components/Avatar.md b/src/routes/docs/components/Avatar.md
@@ -4,11 +4,16 @@ filename: $filename
 ---
 
 <script>
+  import api from '$lib/components/Avatar.svelte?raw&sveld';
+  import ApiDocs from '$lib/components/ApiDocs.svelte';
+
   import AppBar from '$lib/components/AppBar.svelte';
   import Avatar from '$lib/components/Avatar.svelte';
   import Preview from '$lib/components/Preview.svelte';
 </script>
 
+# Examples
+
 ## Default
 
 <Preview>
@@ -34,3 +39,7 @@ filename: $filename
   <Avatar class="bg-blue-500 text-white font-bold" size="md">md</Avatar>
   <Avatar class="bg-blue-500 text-white font-bold" size="lg">lg</Avatar>
 </Preview>
+
+# API
+
+<ApiDocs {api} />
diff --git a/src/routes/docs/components/Badge.md b/src/routes/docs/components/Badge.md
@@ -6,6 +6,9 @@ filename: $filename
 <script>
   import { mdiFilterVariant, mdiPlus, mdiMinus } from '@mdi/js';
 
+  import api from '$lib/components/Badge.svelte?raw&sveld';
+  import ApiDocs from '$lib/components/ApiDocs.svelte';
+
   import Badge from '$lib/components/Badge.svelte';
   import Button from '$lib/components/Button.svelte';
   import Icon from '$lib/components/Icon.svelte';
@@ -17,6 +20,8 @@ filename: $filename
   let value = 1;
 </script>
 
+# Examples
+
 <TextField type="integer" bind:value align="center" class="w-24">
   <div slot="prepend">
     <Button icon={mdiMinus} on:click={() => (value -= 1)} />
@@ -281,3 +286,7 @@ filename: $filename
     </Preview>
   </div>
 </div>
+
+# API
+
+<ApiDocs {api} />
diff --git a/src/routes/docs/components/Breadcrumb.md b/src/routes/docs/components/Breadcrumb.md
@@ -6,6 +6,9 @@ filename: $filename
 <script lang="ts">
   import { mdiArrowRight } from '@mdi/js';
 
+  import api from '$lib/components/Breadcrumb.svelte?raw&sveld';
+  import ApiDocs from '$lib/components/ApiDocs.svelte';
+
   import Breadcrumb from '$lib/components/Breadcrumb.svelte';
   import Button from '$lib/components/Button.svelte';
   import DividerDot from '$lib/components/DividerDot.svelte';
@@ -21,6 +24,8 @@ filename: $filename
   ];
 </script>
 
+# Examples
+
 ## Basic
 
 <Preview>
@@ -112,3 +117,7 @@ filename: $filename
 <Preview>
   <Breadcrumb {items} class="text-blue-500" />
 </Preview>
+
+# API
+
+<ApiDocs {api} />
diff --git a/src/routes/docs/components/Button.md b/src/routes/docs/components/Button.md
@@ -6,6 +6,9 @@ filename: $filename
 <script lang="ts">
   import { mdiMenu, mdiTrashCan } from '@mdi/js';
 
+  import api from '$lib/components/Button.svelte?raw&sveld';
+  import ApiDocs from '$lib/components/ApiDocs.svelte';
+
   import Button from '$lib/components/Button.svelte';
   import Preview from '$lib/components/Preview.svelte';
   import SectionDivider from '$lib/components/SectionDivider.svelte';
@@ -17,6 +20,8 @@ filename: $filename
 import { Button } from 'svelte-ux';
 ```
 
+# Examples
+
 ## Default
 
 <Preview>
@@ -84,3 +89,7 @@ import { Button } from 'svelte-ux';
 <Preview>
   <Button icon={mdiTrashCan} class="text-red-500">Delete</Button>
 </Preview>
+
+# API
+
+<ApiDocs {api} />
diff --git a/src/routes/docs/components/Card.md b/src/routes/docs/components/Card.md
@@ -6,6 +6,9 @@ filename: $filename
 <script lang="ts">
   import { mdiDotsVertical } from '@mdi/js';
 
+  import api from '$lib/components/Card.svelte?raw&sveld';
+  import ApiDocs from '$lib/components/ApiDocs.svelte';
+
   import AppBar from '$lib/components/AppBar.svelte';
   import Avatar from '$lib/components/Avatar.svelte';
   import Button from '$lib/components/Button.svelte';
@@ -14,12 +17,14 @@ filename: $filename
   import Preview from '$lib/components/Preview.svelte';
 </script>
 
-## Usage
+# Usage
 
 ```js
 import { Card } from 'svelte-ux';
 ```
 
+# Examples
+
 ## Default
 
 <Preview>
@@ -101,3 +106,7 @@ import { Card } from 'svelte-ux';
 <Preview>
   <Card title="Title" loading />
 </Preview>
+
+# API
+
+<ApiDocs {api} />
diff --git a/src/routes/docs/components/Checkbox.md b/src/routes/docs/components/Checkbox.md
@@ -4,12 +4,17 @@ filename: $filename
 ---
 
 <script>
+  import api from '$lib/components/Checkbox.svelte?raw&sveld';
+  import ApiDocs from '$lib/components/ApiDocs.svelte';
+
   import AppBar from '$lib/components/AppBar.svelte';
   import Checkbox from '$lib/components/Checkbox.svelte';
   import Preview from '$lib/components/Preview.svelte';
   import SectionDivider from '$lib/components/SectionDivider.svelte';
 </script>
 
+# Examples
+
 <SectionDivider>Basic</SectionDivider>
 
 ## Default
@@ -87,3 +92,7 @@ filename: $filename
   <Checkbox circle dense />
   <Checkbox circle dense checked />
 </Preview>
+
+# API
+
+<ApiDocs {api} />
diff --git a/src/routes/docs/components/Collapse.md b/src/routes/docs/components/Collapse.md
@@ -4,13 +4,18 @@ filename: $filename
 ---
 
 <script>
+  import api from '$lib/components/Collapse.svelte?raw&sveld';
+  import ApiDocs from '$lib/components/ApiDocs.svelte';
+
   import Card from '$lib/components/Card.svelte';
   import Collapse from '$lib/components/Collapse.svelte';
   import Preview from '$lib/components/Preview.svelte';
 
   let group = 'expansionGroup';
 </script>
 
+# Examples
+
 ## Simple without bind:group
 
 <Preview>
@@ -82,3 +87,7 @@ filename: $filename
     </Collapse>
   {/each}
 </Preview>
+
+# API
+
+<ApiDocs {api} />
diff --git a/src/routes/docs/components/DateField.md b/src/routes/docs/components/DateField.md
@@ -6,6 +6,9 @@ filename: $filename
 <script>
   import { addDays } from 'date-fns';
 
+  import api from '$lib/components/DateField.svelte?raw&sveld';
+  import ApiDocs from '$lib/components/ApiDocs.svelte';
+
   import Button from '$lib/components/Button.svelte';
   import DateField from '$lib/components/DateField.svelte';
   import Preview from '$lib/components/Preview.svelte';
@@ -14,6 +17,8 @@ filename: $filename
   let value;
 </script>
 
+# Examples
+
 ## Playground
 
 <Preview>
@@ -72,3 +77,7 @@ filename: $filename
 <Preview>
   <DateField label="Birth date" on:change={(e) => console.log(e.detail)} />
 </Preview>
+
+# API
+
+<ApiDocs {api} />
diff --git a/src/routes/docs/components/DatePickerField.md b/src/routes/docs/components/DatePickerField.md
@@ -4,6 +4,9 @@ filename: $filename
 ---
 
 <script lang="ts">
+  import api from '$lib/components/DatePickerField.svelte?raw&sveld';
+  import ApiDocs from '$lib/components/ApiDocs.svelte';
+
   import Preview from '$lib/components/Preview.svelte';
   import DatePickerField from '$lib/components/DatePickerField.svelte';
 
@@ -12,6 +15,8 @@ filename: $filename
   let value = new Date();
 </script>
 
+# Examples
+
 ## Default
 
 <Preview>
@@ -65,3 +70,7 @@ filename: $filename
 <Preview>
   <DatePickerField label="Start Date" clearable />
 </Preview>
+
+# API
+
+<ApiDocs {api} />