initial api reference

huntabyte · Aug 18, 2023 · 250a5b9 · 250a5b9
1 parent ca6f60f
commit 250a5b9
Show file tree

Hide file tree

Showing 27 changed files with 476 additions and 21 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -13,7 +13,8 @@
         {
             "files": "*.svelte",
             "options": {
-                "parser": "svelte"
+                "parser": "svelte",
+                "printWidth": 100
             }
         },
         {

diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "0.34.6",
+		"@melt-ui/svelte": "0.35.0",
 		"@sveltejs/adapter-vercel": "^3.0.3",
 		"nanoid": "^4.0.2",
 		"shiki": "^0.14.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -8,7 +8,7 @@
 	%sveltekit.head%
 </head>
 
-<body data-sveltekit-preload-data="hover" class="bg-background antialiased font-sans">
+<body data-sveltekit-preload-data="hover" class="bg-background antialiased font-sans overflow-y-scroll">
 	<div>
 		%sveltekit.body%
 	</div>

diff --git a/src/components/api-section.svelte b/src/components/api-section.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { DataAttrsTable, PropsTable } from "@/components";
+	import { h3 as H3 } from "@/components/markdown";
+	import { p as P } from "@/components/markdown";
+	import type { APISchema } from "@/types";
+
+	export let schemas: APISchema[] = [];
+</script>
+
+<div class="flex flex-col gap-8">
+	{#each schemas as schema}
+		<div>
+			<H3>{schema.title}</H3>
+			<P class="!mt-2 !mb-5">{schema.description}</P>
+			<div class="flex flex-col gap-8">
+				{#if schema.props && schema.props.length}
+					<PropsTable props={schema.props} />
+				{/if}
+				{#if schema.dataAttributes && schema.dataAttributes.length}
+					<DataAttrsTable dataAttrs={schema.dataAttributes} />
+				{/if}
+			</div>
+		</div>
+	{/each}
+</div>
diff --git a/src/components/api-tables/data-attrs-table.svelte b/src/components/api-tables/data-attrs-table.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import * as Table from "@/components/ui/table";
+	import { Code } from "@/components";
+	import { parseMarkdown } from "@/utils";
+	import type { DataAttrSchema } from "@/types";
+
+	export let dataAttrs: DataAttrSchema[] = [];
+</script>
+
+<Table.Root>
+	<Table.Header>
+		<Table.Row class="w-1/4">
+			<Table.Head class="w-1/2 whitespace-nowrap">Data Attribute</Table.Head>
+			<Table.Head class="w-1/2 whitespace-nowrap">Value/Description</Table.Head>
+		</Table.Row>
+	</Table.Header>
+	<Table.Body>
+		{#if dataAttrs.length}
+			{#each dataAttrs as attr}
+				<Table.Row>
+					<Table.Cell class="align-baseline">
+						<Code>data-{attr.name}</Code>
+					</Table.Cell>
+					<Table.Cell class="align-baseline">
+						{#if attr.value}
+							<Code neutral>{attr.value}</Code>
+						{/if}
+						<p class="text-sm leading-7 my-2">
+							{@html parseMarkdown(attr.description)}
+						</p>
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		{/if}
+	</Table.Body>
+</Table.Root>
diff --git a/src/components/api-tables/index.ts b/src/components/api-tables/index.ts
@@ -0,0 +1,2 @@
+export { default as DataAttrsTable } from "./data-attrs-table.svelte";
+export { default as PropsTable } from "./props-table.svelte";
diff --git a/src/components/api-tables/props-table.svelte b/src/components/api-tables/props-table.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import * as Table from "@/components/ui/table";
+	import { Code } from "@/components";
+	import type { PropSchema } from "@/types";
+	import { parseMarkdown } from "@/utils";
+
+	export let props: PropSchema[] = [];
+</script>
+
+<Table.Root>
+	<Table.Header>
+		<Table.Row class="w-1/4">
+			<Table.Head class="w-1/4 whitespace-nowrap">Prop</Table.Head>
+			<Table.Head class="w-1/4 whitespace-nowrap">Default</Table.Head>
+			<Table.Head class="w-1/2 whitespace-nowrap">Type/Description</Table.Head>
+		</Table.Row>
+	</Table.Header>
+	<Table.Body>
+		{#each props as prop}
+			<Table.Row>
+				<Table.Cell class="align-baseline">
+					<Code>{prop.name}</Code>
+				</Table.Cell>
+				<Table.Cell class="align-baseline">
+					{#if prop.default}
+						<Code neutral>{prop.default}</Code>
+					{:else}
+						<p>-</p>
+					{/if}
+				</Table.Cell>
+				<Table.Cell class="align-baseline">
+					<Code neutral>{prop.type}</Code>
+					<p class="text-sm leading-7 my-2">
+						{@html parseMarkdown(prop.description)}
+					</p>
+				</Table.Cell>
+			</Table.Row>
+		{/each}
+	</Table.Body>
+</Table.Root>
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -2,8 +2,11 @@ export * from "./light-switch";
 export * from "./icons";
 export * from "./page-header";
 export * from "./navigation";
+export * from "./api-tables";
 export { default as SiteHeader } from "./site-header.svelte";
 export { default as TailwindIndicator } from "./tailwind-indicator.svelte";
 export { default as SidebarNav } from "./navigation/sidebar-nav.svelte";
 export { default as CopyCodeButton } from "./copy-code-button.svelte";
 export { default as Steps } from "./steps.svelte";
+export { default as Code } from "./markdown/code.svelte";
+export { default as APISection } from "./api-section.svelte";
diff --git a/src/components/markdown/code.svelte b/src/components/markdown/code.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "@/utils";
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let neutral = false;
+</script>
+
+<code
+	class={cn(
+		"relative rounded !px-[0.25rem] !py-[0.15rem] font-mono !text-[12px]",
+		neutral ? "!bg-muted" : "!bg-secondary/25",
+		className
+	)}
+>
+	<slot />
+</code>
diff --git a/src/components/ui/table/table-cell.svelte b/src/components/ui/table/table-cell.svelte
@@ -10,7 +10,7 @@
 
 <td
 	class={cn(
-		"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+		"px-2 py-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
 		className
 	)}
 	{...$$restProps}

diff --git a/src/components/ui/table/table-header.svelte b/src/components/ui/table/table-header.svelte
@@ -8,6 +8,6 @@
 	export { className as class };
 </script>
 
-<thead class={cn("[&_tr]:border-b", className)} {...$$restProps}>
+<thead class={cn("[&_tr]:border-b bg-muted/30", className)} {...$$restProps}>
 	<slot />
 </thead>
diff --git a/src/components/ui/table/table-row.svelte b/src/components/ui/table/table-row.svelte
@@ -10,12 +10,6 @@
 	export { className as class };
 </script>
 
-<tr
-	class={cn(
-		"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-		className
-	)}
-	{...$$restProps}
->
+<tr class={cn("border-b", className)} {...$$restProps}>
 	<slot />
 </tr>
diff --git a/src/components/ui/table/table.svelte b/src/components/ui/table/table.svelte
@@ -8,7 +8,7 @@
 	export { className as class };
 </script>
 
-<div class="w-full overflow-auto">
+<div class="w-full overflow-auto border-border border rounded-md">
 	<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
 		<slot />
 	</table>

diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
@@ -0,0 +1,148 @@
+import type { APISchema } from "@/types";
+import { asChild } from "./helpers";
+
+export const root: APISchema = {
+	title: "Root",
+	description: "The root accordion component used to set and manage the state of the accordion.",
+	props: [
+		{
+			name: "multiple",
+			default: "false",
+			type: "boolean",
+			description: "Whether or not multiple accordion items can be active at the same time."
+		},
+		{
+			name: "disabled",
+			default: "false",
+			type: "boolean",
+			description: "Whether or not the accordion is disabled."
+		},
+		{
+			name: "value",
+			type: "string | undefined",
+			description: "The active accordion item value."
+		},
+		{
+			name: "onValueChange",
+			type: "(value: string | undefined) => void",
+			description: "A callback function called when the active accordion item value changes."
+		},
+		{
+			name: "value",
+			type: "string | undefined",
+			description: "The active accordion item value when `multiple` is true."
+		},
+		{
+			name: "onValueChange",
+			type: "(value: string[]) => void",
+			description:
+				"A callback function called when the active accordion item value changes when `multiple` is true."
+		}
+	],
+	dataAttributes: [
+		{
+			name: "orientation",
+			value: "'horizontal' | 'vertical'",
+			description: "The orientation of the accordion."
+		},
+		{
+			name: "melt-accordion",
+			value: "",
+			description: "Present on the root element."
+		}
+	]
+};
+
+const item: APISchema = {
+	title: "Item",
+	description: "An accordion item.",
+	props: [
+		asChild,
+		{
+			name: "value",
+			type: "string",
+			description: "The value of the accordion item."
+		},
+		{
+			name: "disabled",
+			default: "false",
+			type: "boolean",
+			description: "Whether or not the accordion item is disabled."
+		}
+	],
+	dataAttributes: [
+		{
+			name: "state",
+			value: "'open' | 'closed'",
+			description: "The state of the accordion item."
+		},
+		{
+			name: "disabled",
+			value: "",
+			description: "Present when the accordion item is disabled."
+		},
+		{
+			name: "melt-accordion-item",
+			value: "",
+			description: "Present on the accordion item elements."
+		}
+	]
+};
+
+const trigger: APISchema = {
+	title: "Trigger",
+	description: "The accordion item trigger, which opens and closes the accordion item.",
+	props: [asChild],
+	dataAttributes: [
+		{
+			name: "state",
+			value: "'open' | 'closed'",
+			description: "The state of the accordion item."
+		},
+		{
+			name: "disabled",
+			value: "",
+			description: "Present when the accordion item is disabled."
+		},
+		{
+			name: "value",
+			value: "",
+			description: "The value of the accordion item."
+		},
+		{
+			name: "melt-accordion-trigger",
+			value: "",
+			description: "Present on the accordion item elements."
+		}
+	]
+};
+
+const content: APISchema = {
+	title: "Content",
+	description: "The accordion item content, which is displayed when the item is open.",
+	props: [asChild],
+	dataAttributes: [
+		{
+			name: "state",
+			value: "'open' | 'closed'",
+			description: "The state of the accordion item."
+		},
+		{
+			name: "disabled",
+			value: "",
+			description: "Present when the accordion item is disabled."
+		},
+		{
+			name: "value",
+			value: "",
+			description: "The value of the accordion item."
+		},
+		{
+			name: "melt-accordion-content",
+			value: "",
+			description: "Present on the accordion item elements."
+		}
+	]
+};
+
+export const accordion = [root, item, trigger, content];