Merge pull request #37 from ieedan/tree-view-component

ieedan · Dec 28, 2024 · 668d099 · 668d099
2 parents 8439236 + c419ca7
commit 668d099
Show file tree

Hide file tree

Showing 22 changed files with 405 additions and 20 deletions.
diff --git a/jsrepo-build-config.json b/jsrepo-build-config.json
@@ -18,6 +18,7 @@
 		"phone-input",
 		"snippet",
 		"theme-selector",
+		"tree-view",
 		"active.svelte",
 		"shortcut.svelte",
 		"context-provider"

diff --git a/jsrepo-manifest.json b/jsrepo-manifest.json
@@ -14,7 +14,7 @@
 				"dependencies": [],
 				"devDependencies": [
 					"lucide-svelte@^0.469.0",
-					"[email protected].71",
+					"[email protected].74",
 					"tailwind-variants@^0.3.0"
 				],
 				"_imports_": {
@@ -38,6 +38,19 @@
 					"$lib/utils/context-provider": "{{utils/context-provider}}"
 				}
 			},
+			{
+				"name": "collapsible",
+				"directory": "src/lib/components/ui/collapsible",
+				"category": "ui",
+				"tests": false,
+				"subdirectory": true,
+				"list": false,
+				"files": ["index.ts"],
+				"localDependencies": [],
+				"dependencies": [],
+				"devDependencies": ["[email protected]"],
+				"_imports_": {}
+			},
 			{
 				"name": "command",
 				"directory": "src/lib/components/ui/command",
@@ -60,7 +73,7 @@
 				],
 				"localDependencies": ["ui/dialog", "utils/utils"],
 				"dependencies": [],
-				"devDependencies": ["[email protected].71", "lucide-svelte@^0.469.0"],
+				"devDependencies": ["[email protected].74", "lucide-svelte@^0.469.0"],
 				"_imports_": {
 					"$lib/components/ui/dialog/index.js": "{{ui/dialog}}/index.js",
 					"$lib/utils/utils.js": "{{utils/utils}}.js"
@@ -84,7 +97,7 @@
 				],
 				"localDependencies": ["utils/utils"],
 				"dependencies": [],
-				"devDependencies": ["[email protected].71", "lucide-svelte@^0.469.0"],
+				"devDependencies": ["[email protected].74", "lucide-svelte@^0.469.0"],
 				"_imports_": {
 					"$lib/utils/utils.js": "{{utils/utils}}.js"
 				}
@@ -109,7 +122,7 @@
 				],
 				"localDependencies": ["utils/utils"],
 				"dependencies": [],
-				"devDependencies": ["[email protected]", "[email protected].71"],
+				"devDependencies": ["[email protected]", "[email protected].74"],
 				"_imports_": {
 					"$lib/utils/utils.js": "{{utils/utils}}.js"
 				}
@@ -136,7 +149,7 @@
 				],
 				"localDependencies": ["utils/utils"],
 				"dependencies": [],
-				"devDependencies": ["[email protected].71", "lucide-svelte@^0.469.0"],
+				"devDependencies": ["[email protected].74", "lucide-svelte@^0.469.0"],
 				"_imports_": {
 					"$lib/utils/utils.js": "{{utils/utils}}.js"
 				}
@@ -157,7 +170,7 @@
 				],
 				"localDependencies": ["utils/utils"],
 				"dependencies": [],
-				"devDependencies": ["[email protected].71", "tailwind-variants@^0.3.0"],
+				"devDependencies": ["[email protected].74", "tailwind-variants@^0.3.0"],
 				"_imports_": {
 					"$lib/utils/utils": "{{utils/utils}}",
 					"$lib/utils/utils.js": "{{utils/utils}}.js"
@@ -262,7 +275,7 @@
 				"files": ["index.ts", "popover-content.svelte"],
 				"localDependencies": ["utils/utils"],
 				"dependencies": [],
-				"devDependencies": ["[email protected].71"],
+				"devDependencies": ["[email protected].74"],
 				"_imports_": {
 					"$lib/utils/utils.js": "{{utils/utils}}.js"
 				}
@@ -277,7 +290,7 @@
 				"files": ["index.ts", "scroll-area-scrollbar.svelte", "scroll-area.svelte"],
 				"localDependencies": ["utils/utils"],
 				"dependencies": [],
-				"devDependencies": ["[email protected].71"],
+				"devDependencies": ["[email protected].74"],
 				"_imports_": {
 					"$lib/utils/utils.js": "{{utils/utils}}.js"
 				}
@@ -312,6 +325,27 @@
 					"$lib/components/ui/dropdown-menu/index.js": "{{ui/dropdown-menu}}/index.js",
 					"$lib/components/ui/button/index.js": "{{ui/button}}/index.js"
 				}
+			},
+			{
+				"name": "tree-view",
+				"directory": "src/lib/components/ui/tree-view",
+				"category": "ui",
+				"tests": false,
+				"subdirectory": true,
+				"list": true,
+				"files": [
+					"index.ts",
+					"tree-view-file.svelte",
+					"tree-view-folder.svelte",
+					"tree-view.svelte"
+				],
+				"localDependencies": ["utils/utils", "ui/collapsible"],
+				"dependencies": [],
+				"devDependencies": ["lucide-svelte@^0.469.0"],
+				"_imports_": {
+					"$lib/utils/utils": "{{utils/utils}}",
+					"$lib/components/ui/collapsible/index.js": "{{ui/collapsible}}/index.js"
+				}
 			}
 		]
 	},

diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
 		"@sveltejs/kit": "^2.15.1",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "1.0.0-next.71",
+		"bits-ui": "1.0.0-next.74",
 		"clsx": "^2.1.1",
 		"eslint": "^9.17.0",
 		"eslint-config-prettier": "^9.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/docs/examples/code-block.svelte b/src/lib/components/docs/examples/code-block.svelte
@@ -17,5 +17,5 @@
 		</div>
 		<Copy {code} class="size-7" />
 	</div>
-	<Code lang="svelte" hideCopy class="border-none" {code} />
+	<Code lang="svelte" hideCopy class="border-none" {code} highlight={[2, 5]} />
 </div>
diff --git a/src/lib/components/docs/examples/editor-file-tree.svelte b/src/lib/components/docs/examples/editor-file-tree.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import * as TreeView from '$lib/components/ui/tree-view';
+</script>
+
+<div class="w-full border border-border">
+	<TreeView.Root class="p-4">
+		<TreeView.Folder name=".github" open={false}>
+			<TreeView.Folder name="workflows">
+				<TreeView.File name="ci.yml" />
+			</TreeView.Folder>
+		</TreeView.Folder>
+		<TreeView.Folder name=".svelte-kit" open={false} class="text-muted-foreground"
+		></TreeView.Folder>
+		<TreeView.Folder name="node_modules" open={false} class="text-muted-foreground">
+			<TreeView.Folder name="bits-ui"></TreeView.Folder>
+		</TreeView.Folder>
+		<TreeView.Folder name="src">
+			<TreeView.Folder name="lib">
+				<TreeView.Folder name="components">
+					<TreeView.Folder name="ui">
+						<TreeView.Folder name="collapsible" open={false}></TreeView.Folder>
+						<TreeView.Folder name="tree-view" open={false}></TreeView.Folder>
+					</TreeView.Folder>
+				</TreeView.Folder>
+				<TreeView.Folder name="utils">
+					<TreeView.File name="utils.ts" />
+				</TreeView.Folder>
+			</TreeView.Folder>
+			<TreeView.Folder name="routes">
+				<TreeView.File name="+layout.svelte" />
+				<TreeView.File name="+page.svelte" />
+			</TreeView.Folder>
+			<TreeView.File name="app.css" />
+			<TreeView.File name="app.d.ts" />
+			<TreeView.File name="app.html" />
+		</TreeView.Folder>
+		<TreeView.Folder name="static" open={false}>
+			<TreeView.File name="favicon.png" />
+		</TreeView.Folder>
+		<TreeView.File name=".gitignore" />
+		<TreeView.File name=".npmrc" />
+		<TreeView.File name=".prettierignore" />
+		<TreeView.File name=".prettierrc" />
+		<TreeView.File name="components.json" />
+		<TreeView.File name="eslint.config.js" />
+		<TreeView.File name="LICENSE" />
+		<TreeView.File name="package.json" />
+		<TreeView.File name="pnpm-lock.yaml" />
+		<TreeView.File name="postcss.config.js" />
+		<TreeView.File name="README.md" />
+		<TreeView.File name="svelte.config.js" />
+		<TreeView.File name="tsconfig.json" />
+		<TreeView.File name="vite.config.ts" />
+		<TreeView.File name="tailwind.config.ts" />
+	</TreeView.Root>
+</div>
diff --git a/src/lib/components/docs/examples/index.ts b/src/lib/components/docs/examples/index.ts
@@ -2,5 +2,6 @@ import LoginForm from './login-form.svelte';
 import ConfigureDevice from './configure-device.svelte';
 import PhoneNumberSetting from './phone-number-setting.svelte';
 import CodeBlock from './code-block.svelte';
+import EditorFileTree from './editor-file-tree.svelte';
 
-export { LoginForm, ConfigureDevice, PhoneNumberSetting, CodeBlock };
+export { LoginForm, ConfigureDevice, PhoneNumberSetting, CodeBlock, EditorFileTree };
diff --git a/src/lib/components/icons/css.svelte b/src/lib/components/icons/css.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Props } from '.';
+	import { cn } from '$lib/utils/utils';
+
+	let { class: className, ...rest }: Props = $props();
+</script>
+
+<svg
+	class={cn('size-4', className)}
+	xmlns="http://www.w3.org/2000/svg"
+	width="1000"
+	height="1000"
+	aria-labelledby="css-logo-title css-logo-description"
+	viewBox="0 0 1000 1000"
+	{...rest}
+	><path
+		fill="#639"
+		d="M0 0h840a160 160 0 0 1 160 160v680a160 160 0 0 1-160 160H160A160 160 0 0 1 0 840V0Z"
+	/><path
+		fill="#fff"
+		d="M816.54 919.9c-32.39 0-57.16-9.42-74.5-28.35-17.15-19.03-26.08-46.18-26.88-81.64h69.8c.4 31.36 11.42 47.08 33.08 47.08 11.04 0 18.86-3.5 23.37-10.42 4.41-6.9 6.72-17.93 6.72-33.05 0-12.02-3.01-22.04-8.83-29.95a73.2 73.2 0 0 0-29.48-21.14L783.95 750c-23.06-11.02-39.81-24.04-50.14-39.27-10.03-15.13-15.04-36.36-15.04-63.5 0-30.36 8.83-55 26.37-73.94 18.05-18.93 42.62-28.34 74-28.34 30.3 0 53.76 9.31 70.3 27.84 16.85 18.64 25.67 45.28 26.38 80.14h-67.19c.4-11.4-1.9-22.72-6.72-33.06-3.8-7.6-11.23-11.41-22.26-11.41-19.65 0-29.48 11.71-29.48 35.05 0 11.83 2.4 21.04 7.22 28.05A65.18 65.18 0 0 0 822.76 689l24.77 10.92c25.57 11.72 44.02 26.05 55.35 43.38 11.43 17.23 17.05 40.27 17.05 69.12 0 34.56-9.03 61.1-27.38 79.63-18.25 18.53-43.62 27.85-76 27.85Zm-225.42 0c-32.4 0-57.16-9.42-74.51-28.35-17.15-19.03-26.07-46.18-26.87-81.64h69.79c.4 31.36 11.43 47.08 33.1 47.08 11.02 0 18.84-3.5 23.25-10.42 4.52-6.9 6.72-17.93 6.72-33.05 0-12.02-2.9-22.04-8.72-29.95a73.2 73.2 0 0 0-29.48-21.14L558.53 750c-23.07-11.02-39.81-24.04-50.14-39.27-10.03-15.13-15.04-36.36-15.04-63.5 0-30.36 8.82-55 26.37-73.94 18.05-18.93 42.62-28.34 74-28.34 30.29 0 53.75 9.31 70.2 27.84 17.05 18.64 25.77 45.28 26.47 80.14h-67.18c.4-11.4-1.9-22.72-6.72-33.06-3.81-7.6-11.23-11.41-22.26-11.41-19.66 0-29.49 11.71-29.49 35.05 0 11.83 2.41 21.04 7.22 28.05A65.18 65.18 0 0 0 597.33 689l24.77 10.92c25.57 11.72 44.02 26.05 55.36 43.38 11.33 17.23 17.04 40.27 17.04 69.12 0 34.56-9.12 61.1-27.37 79.63-18.25 18.53-43.62 27.85-76.01 27.85Zm-234.75 0c-31.7 0-56.86-8.62-75.51-25.85-18.65-17.12-27.88-42.87-27.88-76.93V648.83c0-33.85 9.83-59.5 29.48-77.13 19.96-17.43 46.13-26.24 78.52-26.24 31.39 0 56.15 9.01 74.5 26.84 18.56 17.93 27.88 44.58 27.88 80.14v13.32h-73.9v-12.92c0-13.72-3.01-23.84-8.83-30.45a26.46 26.46 0 0 0-21.66-10.32c-12.03 0-20.55 4.1-25.37 12.42a79.04 79.04 0 0 0-6.72 36.66v146.26c0 30.55 10.74 46.08 32.1 46.38 10.02 0 17.54-3.61 22.76-10.82a51.74 51.74 0 0 0 7.72-30.46V801.6h73.9v11.42c0 23.74-4.61 43.57-13.94 59.4a88.8 88.8 0 0 1-38.2 35.66 121.46 121.46 0 0 1-54.85 11.82Z"
+	/></svg
+>
diff --git a/src/lib/components/icons/index.ts b/src/lib/components/icons/index.ts
@@ -1,11 +1,13 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import GitHub from './github.svelte';
 import Svelte from './svelte.svelte';
+import CSS from './css.svelte';
+import TypeScript from './typescript.svelte';
 
 export interface Props extends HTMLAttributes<SVGElement> {
 	class?: string;
 	width?: number;
 	height?: number;
 }
 
-export { GitHub, Svelte };
+export { GitHub, Svelte, CSS, TypeScript };
diff --git a/src/lib/components/icons/typescript.svelte b/src/lib/components/icons/typescript.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Props } from '.';
+	import { cn } from '$lib/utils/utils';
+
+	let { class: className, ...rest }: Props = $props();
+</script>
+
+<svg
+	class={cn('size-4', className)}
+	fill="none"
+	viewBox="0 0 512 512"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}
+	><rect fill="#3178c6" height="512" rx="50" width="512" /><rect
+		fill="#3178c6"
+		height="512"
+		rx="50"
+		width="512"
+	/><path
+		clip-rule="evenodd"
+		d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z"
+		fill="#fff"
+		fill-rule="evenodd"
+	/></svg
+>
diff --git a/src/lib/components/ui/collapsible/index.ts b/src/lib/components/ui/collapsible/index.ts
@@ -0,0 +1,15 @@
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+const Root = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
+const Content = CollapsiblePrimitive.Content;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger
+};
diff --git a/src/lib/components/ui/tree-view/index.ts b/src/lib/components/ui/tree-view/index.ts
@@ -0,0 +1,14 @@
+import TreeView from './tree-view.svelte';
+import TreeViewFile from './tree-view-file.svelte';
+import TreeViewFolder from './tree-view-folder.svelte';
+
+export {
+	TreeView,
+	TreeViewFile,
+	TreeViewFolder,
+
+	// ...
+	TreeView as Root,
+	TreeViewFile as File,
+	TreeViewFolder as Folder
+};
diff --git a/src/lib/components/ui/tree-view/tree-view-file.svelte b/src/lib/components/ui/tree-view/tree-view-file.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { File } from 'lucide-svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils/utils';
+
+	interface Props extends HTMLButtonAttributes {
+		name: string;
+		icon?: Snippet<[{ name: string }]>;
+	}
+
+	let { name, icon, type = 'button', class: className, ...rest }: Props = $props();
+</script>
+
+<button {type} class={cn('flex place-items-center gap-1 pl-[3px]', className)} {...rest}>
+	{#if icon}
+		{@render icon({ name })}
+	{:else}
+		<File class="size-4" />
+	{/if}
+	<span>{name}</span>
+</button>