diff --git a/jsrepo-build-config.json b/jsrepo-build-config.json index 1db7f98..ea7a252 100644 --- 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 index a419238..60d29b0 100644 --- a/jsrepo-manifest.json +++ b/jsrepo-manifest.json @@ -14,7 +14,7 @@ "dependencies": [], "devDependencies": [ "lucide-svelte@^0.469.0", - "bits-ui@1.0.0-next.71", + "bits-ui@1.0.0-next.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": ["bits-ui@1.0.0-next.74"], + "_imports_": {} + }, { "name": "command", "directory": "src/lib/components/ui/command", @@ -60,7 +73,7 @@ ], "localDependencies": ["ui/dialog", "utils/utils"], "dependencies": [], - "devDependencies": ["bits-ui@1.0.0-next.71", "lucide-svelte@^0.469.0"], + "devDependencies": ["bits-ui@1.0.0-next.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": ["bits-ui@1.0.0-next.71", "lucide-svelte@^0.469.0"], + "devDependencies": ["bits-ui@1.0.0-next.74", "lucide-svelte@^0.469.0"], "_imports_": { "$lib/utils/utils.js": "{{utils/utils}}.js" } @@ -109,7 +122,7 @@ ], "localDependencies": ["utils/utils"], "dependencies": [], - "devDependencies": ["vaul-svelte@1.0.0-next.3", "bits-ui@1.0.0-next.71"], + "devDependencies": ["vaul-svelte@1.0.0-next.3", "bits-ui@1.0.0-next.74"], "_imports_": { "$lib/utils/utils.js": "{{utils/utils}}.js" } @@ -136,7 +149,7 @@ ], "localDependencies": ["utils/utils"], "dependencies": [], - "devDependencies": ["bits-ui@1.0.0-next.71", "lucide-svelte@^0.469.0"], + "devDependencies": ["bits-ui@1.0.0-next.74", "lucide-svelte@^0.469.0"], "_imports_": { "$lib/utils/utils.js": "{{utils/utils}}.js" } @@ -157,7 +170,7 @@ ], "localDependencies": ["utils/utils"], "dependencies": [], - "devDependencies": ["bits-ui@1.0.0-next.71", "tailwind-variants@^0.3.0"], + "devDependencies": ["bits-ui@1.0.0-next.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": ["bits-ui@1.0.0-next.71"], + "devDependencies": ["bits-ui@1.0.0-next.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": ["bits-ui@1.0.0-next.71"], + "devDependencies": ["bits-ui@1.0.0-next.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 index 05b1653..56e3b7b 100644 --- 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 index e392294..41cb1cc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,8 +30,8 @@ importers: specifier: ^10.4.20 version: 10.4.20(postcss@8.4.49) bits-ui: - specifier: 1.0.0-next.71 - version: 1.0.0-next.71(svelte@5.16.0) + specifier: 1.0.0-next.74 + version: 1.0.0-next.74(svelte@5.16.0) clsx: specifier: ^2.1.1 version: 2.1.1 @@ -1039,11 +1039,11 @@ packages: bindings@1.5.0: resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==} - bits-ui@1.0.0-next.71: - resolution: {integrity: sha512-ncZ42GwVpa1Ldw41opdLqP/HSkhNGNBnmfvWduYGZ0cVzDnkPwsUWvdikTsFI31ZoAMcfcUVFSVgLGCcBatUXQ==} + bits-ui@1.0.0-next.74: + resolution: {integrity: sha512-cazru5+NBKBCeK9KCV/OFy5I/B1zxOJGl5WpInzPTEPla5G9qZK9nrnXr6BbExKdhgusTiMm3h4Yvq4E5WHGJA==} engines: {node: '>=18', pnpm: '>=8.7.0'} peerDependencies: - svelte: ^5.0.0-next.1 + svelte: ^5.0.0 bottleneck@2.19.5: resolution: {integrity: sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw==} @@ -3307,7 +3307,7 @@ snapshots: dependencies: file-uri-to-path: 1.0.0 - bits-ui@1.0.0-next.71(svelte@5.16.0): + bits-ui@1.0.0-next.74(svelte@5.16.0): dependencies: '@floating-ui/core': 1.6.8 '@floating-ui/dom': 1.6.12 @@ -4603,7 +4603,7 @@ snapshots: vaul-svelte@1.0.0-next.3(svelte@5.16.0): dependencies: - bits-ui: 1.0.0-next.71(svelte@5.16.0) + bits-ui: 1.0.0-next.74(svelte@5.16.0) svelte: 5.16.0 svelte-toolbelt: 0.4.6(svelte@5.16.0) diff --git a/src/lib/components/docs/examples/code-block.svelte b/src/lib/components/docs/examples/code-block.svelte index 524ae66..3a51167 100644 --- a/src/lib/components/docs/examples/code-block.svelte +++ b/src/lib/components/docs/examples/code-block.svelte @@ -17,5 +17,5 @@ - + diff --git a/src/lib/components/docs/examples/editor-file-tree.svelte b/src/lib/components/docs/examples/editor-file-tree.svelte new file mode 100644 index 0000000..db42357 --- /dev/null +++ b/src/lib/components/docs/examples/editor-file-tree.svelte @@ -0,0 +1,56 @@ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/src/lib/components/docs/examples/index.ts b/src/lib/components/docs/examples/index.ts index 99dc65b..a02254f 100644 --- 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 new file mode 100644 index 0000000..6564941 --- /dev/null +++ b/src/lib/components/icons/css.svelte @@ -0,0 +1,23 @@ + + + diff --git a/src/lib/components/icons/index.ts b/src/lib/components/icons/index.ts index 4cef467..ade9b59 100644 --- a/src/lib/components/icons/index.ts +++ b/src/lib/components/icons/index.ts @@ -1,6 +1,8 @@ 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 { class?: string; @@ -8,4 +10,4 @@ export interface Props extends HTMLAttributes { 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 new file mode 100644 index 0000000..9f3be88 --- /dev/null +++ b/src/lib/components/icons/typescript.svelte @@ -0,0 +1,25 @@ + + + diff --git a/src/lib/components/ui/collapsible/index.ts b/src/lib/components/ui/collapsible/index.ts new file mode 100644 index 0000000..7455459 --- /dev/null +++ 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 new file mode 100644 index 0000000..738a225 --- /dev/null +++ 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 new file mode 100644 index 0000000..abf0158 --- /dev/null +++ b/src/lib/components/ui/tree-view/tree-view-file.svelte @@ -0,0 +1,22 @@ + + + diff --git a/src/lib/components/ui/tree-view/tree-view-folder.svelte b/src/lib/components/ui/tree-view/tree-view-folder.svelte new file mode 100644 index 0000000..1bf3700 --- /dev/null +++ b/src/lib/components/ui/tree-view/tree-view-folder.svelte @@ -0,0 +1,37 @@ + + + + + {#if icon} + {@render icon({ name, open })} + {:else if open} + + {:else} + + {/if} + {name} + + +
+
+
+ {@render children?.()} +
+
+ + diff --git a/src/lib/components/ui/tree-view/tree-view.svelte b/src/lib/components/ui/tree-view/tree-view.svelte new file mode 100644 index 0000000..af850e4 --- /dev/null +++ b/src/lib/components/ui/tree-view/tree-view.svelte @@ -0,0 +1,15 @@ + + +
+ {@render children?.()} +
diff --git a/src/lib/map.ts b/src/lib/map.ts index aa2b051..62d222a 100644 --- a/src/lib/map.ts +++ b/src/lib/map.ts @@ -89,6 +89,13 @@ const map: Record = { href: '/components/theme-selector', specifier: 'ui/theme-selector', source: 'src/lib/components/ui/theme-selector/theme-selector.svelte' + }, + { + name: 'Tree View', + description: 'A file tree component.', + href: '/components/tree-view', + specifier: 'ui/tree-view', + source: 'src/lib/components/ui/tree-view' } ], Actions: [ diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index c9e992e..064e51b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,7 +3,8 @@ LoginForm, ConfigureDevice, PhoneNumberSetting, - CodeBlock + CodeBlock, + EditorFileTree } from '$lib/components/docs/examples'; import ShadcnSvelteExtras from '$lib/components/shadcn-svelte-extras.svelte'; import { Snippet } from '$lib/components/ui/snippet'; @@ -23,5 +24,6 @@ + diff --git a/src/routes/components/tree-view/+page.svelte b/src/routes/components/tree-view/+page.svelte new file mode 100644 index 0000000..c8bfc8c --- /dev/null +++ b/src/routes/components/tree-view/+page.svelte @@ -0,0 +1,22 @@ + + +Basic + + + + +Custom Icons + + + +

+ If you are using custom icons in a project we recommend you wrap the folder/file components with + the custom icons: +

+ diff --git a/src/routes/components/tree-view/basic.svelte b/src/routes/components/tree-view/basic.svelte new file mode 100644 index 0000000..92dd66a --- /dev/null +++ b/src/routes/components/tree-view/basic.svelte @@ -0,0 +1,16 @@ + + +
+ + + + + + + + + + +
diff --git a/src/routes/components/tree-view/custom-icons.svelte b/src/routes/components/tree-view/custom-icons.svelte new file mode 100644 index 0000000..3f36d04 --- /dev/null +++ b/src/routes/components/tree-view/custom-icons.svelte @@ -0,0 +1,52 @@ + + +
+ + + {#snippet icon({ open })} + {#if open} + + {:else} + + {/if} + {/snippet} + + + + + + {#snippet icon({ name })} + {#if name.endsWith('.svelte')} + + {/if} + {/snippet} + + + {#snippet icon({ name })} + {#if name.endsWith('.svelte')} + + {/if} + {/snippet} + + + + {#snippet icon({ name })} + {#if name.endsWith('.css')} + + {/if} + {/snippet} + + + {#snippet icon({ name })} + {#if name.endsWith('.ts')} + + {/if} + {/snippet} + + + +
diff --git a/src/routes/components/tree-view/examples.ts b/src/routes/components/tree-view/examples.ts new file mode 100644 index 0000000..125e609 --- /dev/null +++ b/src/routes/components/tree-view/examples.ts @@ -0,0 +1,19 @@ +import Basic from './basic.svelte'; +import basicRaw from './basic.svelte?raw'; +import CustomIcons from './custom-icons.svelte'; +import customIconsRaw from './custom-icons.svelte?raw'; +import treeViewFileCustomRaw from './tree-view-file-custom.svelte?raw'; + +const examples = { + basic: { + code: basicRaw, + Component: Basic + }, + customIcons: { + code: customIconsRaw, + Component: CustomIcons + }, + customFileComponentCode: treeViewFileCustomRaw +}; + +export { examples }; diff --git a/src/routes/components/tree-view/tree-view-file-custom.svelte b/src/routes/components/tree-view/tree-view-file-custom.svelte new file mode 100644 index 0000000..6f3cba3 --- /dev/null +++ b/src/routes/components/tree-view/tree-view-file-custom.svelte @@ -0,0 +1,22 @@ + + + + {#snippet icon({ name })} + {#if name.endsWith('.css')} + + {:else if name.endsWith('.svelte')} + + {:else if name.endsWith('.ts')} + + {/if} + {/snippet} +