Merge pull request #59 from huntabyte/api-reference

.changeset/cool-rivers-attack.md

@@ -0,0 +1,8 @@
+---
+"bits-ui": patch
+---
+
+- Improve types
+- Fix bug with `Menubar` props
+- Add `Arrow` components for the floating Bits
+- Fix `asChild` bug affecting multiple Bits

mdsvex.config.js

@@ -4,8 +4,11 @@ import { fileURLToPath } from "url";
 import { toHtml } from "hast-util-to-html";
 import { visit } from "unist-util-visit";
 import { escapeSvelte } from "@huntabyte/mdsvex";
-import { resolve } from "path";
+import path, { resolve } from "path";
 import { readFileSync } from "fs";
+import prettier from "prettier";
+import { u } from "unist-builder";
+import { codeBlockPrettierConfig } from "./other/code-block-prettier.js";
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
 
@@ -47,13 +50,77 @@ export const mdsvexOptions = {
 	},
 	remarkPlugins: [remarkGfm, remarkEscapeCode],
 	rehypePlugins: [
+		rehypeComponentExample,
 		rehypeComponentPreToPre,
 		[rehypePrettyCode, prettyCodeOptions],
 		rehypeHandleMetadata,
 		rehypeRenderCode,
 		rehypePreToComponentPre
 	]
 };
+export function rehypeComponentExample() {
+	return async (tree) => {
+		const nameRegex = /name="([^"]+)"/;
+		const compRegex = /comp="([^"]+)"/;
+		visit(tree, (node, index, parent) => {
+			if (node?.type === "raw" && node?.value?.startsWith("<ComponentPreview")) {
+				const nameMatch = node.value.match(nameRegex);
+				const name = nameMatch ? nameMatch[1] : null;
+				const compMatch = node.value.match(compRegex);
+				const comp = compMatch ? compMatch[1] : null;
+
+				if (!name || !comp) {
+					return null;
+				}
+
+				try {
+					let sourceCode = getComponentSourceFileContent(name);
+					sourceCode = sourceCode.replaceAll(`@/components`, "@/components/");
+
+					const sourceCodeNode = u("element", {
+						tagName: "pre",
+						properties: {
+							className: ["code"]
+						},
+						children: [
+							u("element", {
+								tagName: "code",
+								properties: {
+									className: [`language-svelte`]
+								},
+								attributes: {},
+								children: [
+									{
+										type: "text",
+										value: sourceCode
+									}
+								]
+							})
+						]
+					});
+					if (!index) return;
+					parent.children.splice(index + 1, 0, sourceCodeNode);
+				} catch (e) {
+					console.error(e);
+				}
+			}
+		});
+	};
+}
+
+function getComponentSourceFileContent(src = undefined) {
+	const newSrc = `./src/components/demos/${src}.svelte`;
+	if (!newSrc) {
+		return null;
+	}
+
+	// Read the source file.
+	const filePath = path.join(process.cwd(), newSrc);
+
+	const formattedSource = prettier.format(readFileSync(filePath, "utf-8"), codeBlockPrettierConfig);
+
+	return formattedSource;
+}
 
 const entities = [
 	[/</g, "&lt;"],

other/code-block-prettier.js

@@ -0,0 +1,46 @@
+export const codeBlockPrettierConfig = {
+	useTabs: false,
+	tabWidth: 2,
+	singleQuote: false,
+	trailingComma: "none",
+	printWidth: 80,
+	endOfLine: "lf",
+	pluginSearchDirs: ["node_modules/prettier-plugin-svelte"],
+	parser: "svelte",
+	svelteIndexScriptAndStyle: true,
+	svelteStrictMode: false,
+	svelteSortOrder: "scripts-markup-styles-options",
+	plugins: ["prettier-plugin-svelte"],
+	overrides: [
+		{
+			files: "*.svelte",
+			options: {
+				parser: "svelte",
+				svelteIndentScriptAndStyle: true,
+				svelteStrictMode: false,
+				svelteSortOrder: "scripts-markup-styles-options"
+			}
+		}
+	],
+	bracketSameLine: false,
+	importOrder: [
+		"<TYPES>",
+		"<TYPES>^[.]",
+		"<BUILTIN_MODULES>",
+		"<THIRD_PARTY_MODULES>",
+		"^\\$app",
+		"^\\$env",
+		"^\\$service-worker",
+		"^\\$lib/server",
+		"^\\$(?![^\\/]*\\/)",
+		"^\\$[^/]*\\/[^/]+",
+		"^[./]",
+		"\\.js$",
+		"\\.svelte$"
+	],
+	importOrderSeparation: false,
+	importOrderSortSpecifiers: true,
+	importOrderBuiltinModulesToTop: true,
+	importOrderParserPlugins: ["typescript", "svelte"],
+	importOrderMergeDuplicateImports: true
+};

package.json

@@ -50,7 +50,7 @@
 		"lucide-svelte": "^0.268.0",
 		"postcss": "^8.4.24",
 		"postcss-load-config": "^4.0.1",
-		"prettier": "^2.8.0",
+		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
 		"publint": "^0.1.9",
 		"radix-icons-svelte": "^1.2.1",
@@ -77,7 +77,8 @@
 		"@sveltejs/adapter-vercel": "^3.0.3",
 		"nanoid": "^4.0.2",
 		"shiki": "^0.14.3",
-		"tailwind-merge": "^1.14.0"
+		"tailwind-merge": "^1.14.0",
+		"unist-builder": "^4.0.0"
 	},
 	"peerDependencies": {
 		"svelte": "^4.0.0"

src/components/api-tables/data-attrs-table.svelte

@@ -25,9 +25,11 @@
 						{#if attr.value}
 							<Code neutral>{attr.value}</Code>
 						{/if}
-						<p class="text-sm leading-7 my-2">
-							{@html parseMarkdown(attr.description)}
-						</p>
+						{#if attr.description}
+							<p class="text-sm leading-7 my-2">
+								{@html parseMarkdown(attr.description)}
+							</p>
+						{/if}
 					</Table.Cell>
 				</Table.Row>
 			{/each}

src/components/component-preview.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { dev } from "$app/environment";
+	import * as Tabs from "@/components/ui/tabs";
+	import { cn } from "@/utils";
+	let className: string;
+	export let align: "center" | "start" | "end" = "center";
+	export { className as class };
+</script>
+
+{#if dev}
+	<div class={cn("group relative my-4 flex flex-col space-y-2", className)} {...$$restProps}>
+		<Tabs.Root value="preview" class="relative mr-auto w-full">
+			<div class="flex items-center justify-between pb-3">
+				<Tabs.List class="w-full justify-start rounded-none border-b bg-transparent p-0">
+					<Tabs.Trigger
+						value="preview"
+						class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+					>
+						Preview
+					</Tabs.Trigger>
+					<Tabs.Trigger
+						value="code"
+						class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+					>
+						Code
+					</Tabs.Trigger>
+				</Tabs.List>
+			</div>
+			<Tabs.Content value="preview" class="relative rounded-md border">
+				<div
+					class={cn(
+						"preview flex min-h-[350px] w-full justify-center p-10",
+						{
+							"items-center": align === "center",
+							"items-start": align === "start",
+							"items-end": align === "end"
+						},
+						className
+					)}
+				>
+					<slot name="preview" />
+				</div>
+			</Tabs.Content>
+			<Tabs.Content value="code">
+				<div class="w-full rounded-md ![&_pre]:mt-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
+					<slot />
+				</div>
+			</Tabs.Content>
+		</Tabs.Root>
+	</div>
+{/if}

src/components/demos/accordion-demo.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import * as Accordion from "@/components/ui/accordion";
+</script>
+
+<Accordion.Root class="w-full sm:max-w-[70%]">
+	<Accordion.Item value="item-1">
+		<Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+		<Accordion.Content>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content>
+	</Accordion.Item>
+	<Accordion.Item value="item-2">
+		<Accordion.Trigger>Is it styled?</Accordion.Trigger>
+		<Accordion.Content>
+			Yes. It comes with default styles that matches the other components' aesthetic.
+		</Accordion.Content>
+	</Accordion.Item>
+	<Accordion.Item value="item-3">
+		<Accordion.Trigger>Is it animated?</Accordion.Trigger>
+		<Accordion.Content>
+			Yes. It's animated by default, but you can disable it if you prefer.
+		</Accordion.Content>
+	</Accordion.Item>
+</Accordion.Root>

src/components/demos/alert-dialog-demo.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import * as AlertDialog from "@/components/ui/alert-dialog";
+	import { Button } from "@/components/ui/button";
+
+	let open = false;
+</script>
+
+<AlertDialog.Root bind:open>
+	<AlertDialog.Trigger asChild let:builder>
+		<Button builders={[builder]} variant="outline">Show Dialog</Button>
+	</AlertDialog.Trigger>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+			<AlertDialog.Description>
+				This action cannot be undone. This will permanently delete your account and remove your data
+				from our servers.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+			<AlertDialog.Action>Continue</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

src/components/demos/aspect-ratio-demo.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import * as AspectRatio from "@/components/ui/aspect-ratio";
+</script>
+
+<AspectRatio.Root ratio={16 / 9} class="bg-muted">
+	<img
+		src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+		alt="Gray by Drew Beamer"
+		class="rounded-md object-cover h-full w-full"
+	/>
+</AspectRatio.Root>

src/components/demos/avatar-demo.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import * as Avatar from "@/components/ui/avatar";
+</script>
+
+<Avatar.Root>
+	<Avatar.Image src="https://github.com/huntabyte.png" alt="@huntabyte" />
+	<Avatar.Fallback>HB</Avatar.Fallback>
+</Avatar.Root>

src/components/demos/button-demo.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import * as Button from "@/components/ui/button";
+</script>
+
+<Button.Root>Get started</Button.Root>

src/components/demos/checkbox-demo.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import * as Checkbox from "@/components/ui/checkbox";
+	import * as Label from "@/components/ui/label";
+	let checked = false;
+</script>
+
+<div class="flex items-center space-x-2">
+	<Checkbox.Root id="terms" bind:checked aria-labelledby="terms-label" />
+	<Label.Root
+		id="terms-label"
+		for="terms"
+		class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+	>
+		Accept terms and conditions
+	</Label.Root>
+</div>

src/components/demos/collapsible-demo.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import * as Collapsible from "@/components/ui/collapsible";
+	import * as Button from "@/components/ui/button";
+	import { CaretUpDown } from "@/components/icons";
+</script>
+
+<Collapsible.Root class="w-[350px] space-y-2">
+	<div class="flex items-center justify-between space-x-4 px-4">
+		<h4 class="text-sm font-semibold">@huntabyte starred 3 repositories</h4>
+		<Collapsible.Trigger asChild let:builder>
+			<Button.Root builders={[builder]} variant="ghost" size="sm" class="w-9 p-0">
+				<CaretUpDown class="h-4 w-4" />
+				<span class="sr-only">Toggle</span>
+			</Button.Root>
+		</Collapsible.Trigger>
+	</div>
+	<div class="rounded-md border px-4 py-3 font-mono text-sm">@huntabyte/bits</div>
+	<Collapsible.Content class="space-y-2">
+		<div class="rounded-md border px-4 py-3 font-mono text-sm">@melt-ui/melt</div>
+		<div class="rounded-md border px-4 py-3 font-mono text-sm">@huntabyte/shadcn-svelte</div>
+	</Collapsible.Content>
+</Collapsible.Root>