commit 451223816b04720691e52321d675a1ed4dad7d8b Author: pakintada@gmail.com Date: Tue Feb 17 14:30:02 2026 +0700 init diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4225035 --- /dev/null +++ b/.gitignore @@ -0,0 +1,26 @@ +node_modules + +# Output +.output +.vercel +.netlify +.wrangler +/.svelte-kit +/build + +# OS +.DS_Store +Thumbs.db + +# Env +.env +.env.* +!.env.example +!.env.test + +# Vite +vite.config.js.timestamp-* +vite.config.ts.timestamp-* + +*storybook.log +storybook-static diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..b6f27f1 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..7d74fe2 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,9 @@ +# Package Managers +package-lock.json +pnpm-lock.yaml +yarn.lock +bun.lock +bun.lockb + +# Miscellaneous +/static/ diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..8103a0b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,16 @@ +{ + "useTabs": true, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 100, + "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], + "overrides": [ + { + "files": "*.svelte", + "options": { + "parser": "svelte" + } + } + ], + "tailwindStylesheet": "./src/app.css" +} diff --git a/.storybook/main.ts b/.storybook/main.ts new file mode 100644 index 0000000..a429e07 --- /dev/null +++ b/.storybook/main.ts @@ -0,0 +1,20 @@ +import type { StorybookConfig } from '@storybook/sveltekit'; + +const config: StorybookConfig = { + "stories": [ + "../src/**/*.mdx", + "../src/**/*.stories.@(js|ts|svelte)" + ], + "addons": [ + "@storybook/addon-svelte-csf", + "@chromatic-com/storybook", + "@storybook/addon-docs", + "@storybook/addon-a11y", + "@storybook/addon-vitest" + ], + "framework": { + "name": "@storybook/sveltekit", + "options": {} + } +}; +export default config; \ No newline at end of file diff --git a/.storybook/preview.ts b/.storybook/preview.ts new file mode 100644 index 0000000..20a11e0 --- /dev/null +++ b/.storybook/preview.ts @@ -0,0 +1,14 @@ +import type { Preview } from '@storybook/sveltekit' + +const preview: Preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview; \ No newline at end of file diff --git a/NOTE.txt b/NOTE.txt new file mode 100644 index 0000000..acf6dda --- /dev/null +++ b/NOTE.txt @@ -0,0 +1,3 @@ +install shadcn ui libs + +bunx --bun shadcn-svelte@latest \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..75842c4 --- /dev/null +++ b/README.md @@ -0,0 +1,38 @@ +# sv + +Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli). + +## Creating a project + +If you're seeing this, you've probably already done this step. Congrats! + +```sh +# create a new project in the current directory +npx sv create + +# create a new project in my-app +npx sv create my-app +``` + +## Developing + +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: + +```sh +npm run dev + +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` + +## Building + +To create a production version of your app: + +```sh +npm run build +``` + +You can preview the production build with `npm run preview`. + +> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. diff --git a/bun.lockb b/bun.lockb new file mode 100755 index 0000000..0018d14 Binary files /dev/null and b/bun.lockb differ diff --git a/components.json b/components.json new file mode 100644 index 0000000..66f9d8c --- /dev/null +++ b/components.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://shadcn-svelte.com/schema.json", + "tailwind": { + "css": "src/app.{p,post}css", + "baseColor": "stone" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils", + "ui": "$lib/components/ui", + "hooks": "$lib/hooks", + "lib": "$lib" + }, + "typescript": true, + "registry": "https://shadcn-svelte.com/registry" +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..6e5a125 --- /dev/null +++ b/package.json @@ -0,0 +1,87 @@ +{ + "name": "supra-app", + "private": true, + "version": "0.0.1", + "type": "module", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "prepare": "svelte-kit sync || echo ''", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "format": "prettier --write .", + "lint": "prettier --check .", + "test:unit": "vitest", + "test": "npm run test:unit -- --run", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build" + }, + "devDependencies": { + "@chromatic-com/storybook": "^4.1.3", + "@internationalized/date": "^3.10.1", + "@lucide/svelte": "^0.561.0", + "@storybook/addon-a11y": "^10.2.0", + "@storybook/addon-docs": "^10.2.0", + "@storybook/addon-svelte-csf": "^5.0.10", + "@storybook/addon-vitest": "^10.2.0", + "@storybook/sveltekit": "^10.2.0", + "@sveltejs/adapter-auto": "^7.0.0", + "@sveltejs/kit": "^2.50.1", + "@sveltejs/vite-plugin-svelte": "^6.2.4", + "@tailwindcss/forms": "^0.5.11", + "@tailwindcss/typography": "^0.5.19", + "@tailwindcss/vite": "^4.1.18", + "@tanstack/table-core": "^8.21.3", + "@types/node": "^22.19.7", + "@vitest/browser": "^3.2.4", + "bits-ui": "^2.15.4", + "clsx": "^2.1.1", + "paneforge": "^1.0.0-next.6", + "playwright": "^1.57.0", + "prettier": "^3.8.1", + "prettier-plugin-svelte": "^3.4.1", + "prettier-plugin-tailwindcss": "^0.7.2", + "storybook": "^10.2.0", + "svelte": "^5.48.0", + "svelte-check": "^4.3.5", + "svelte-sonner": "^1.0.7", + "tailwind-merge": "^3.4.0", + "tailwind-variants": "^3.2.2", + "tailwindcss": "^4.1.18", + "tw-animate-css": "^1.4.0", + "typescript": "^5.9.3", + "vaul-svelte": "^1.0.0-next.7", + "vite": "^7.3.1", + "vite-plugin-devtools-json": "^1.0.0", + "vitest": "^4.0.18", + "vitest-browser-svelte": "^2.0.2" + }, + "dependencies": { + "@battlefieldduck/xterm-svelte": "^2.2.1", + "@dnd-kit-svelte/core": "^0.0.11", + "@dnd-kit-svelte/svelte": "0.1.3", + "@dnd-kit/abstract": "^0.2.4", + "@dnd-kit/geometry": "^0.2.4", + "@dnd-kit/helpers": "^0.2.3", + "@tanstack/match-sorter-utils": "^8.19.4", + "@xterm/xterm": "^5.5.0", + "@yume-chan/adb": "^2.5.1", + "@yume-chan/adb-credential-web": "^2.1.0", + "@yume-chan/adb-daemon-webusb": "^2.3.2", + "@yume-chan/adb-scrcpy": "^2.3.2", + "@yume-chan/scrcpy": "^2.3.0", + "@yume-chan/stream-extra": "^2.1.0", + "animejs": "^4.3.5", + "firebase": "^12.8.0", + "idb": "^8.0.3", + "mode-watcher": "^1.1.0", + "usb": "^2.17.0", + "uuid": "^13.0.0", + "xterm-addon-fit": "^0.8.0", + "zod": "^4.3.6" + }, + "resolutions": { + "@dnd-kit/geometry": "^0.2.4" + } +} diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..719e82c --- /dev/null +++ b/src/app.css @@ -0,0 +1,114 @@ +@import "tailwindcss"; +@import "tw-animate-css"; + +@custom-variant dark (&:is(.dark *)); + +:root { + --background: hsl(0 0% 100%) /* <- Wrap in HSL */; + --foreground: hsl(240 10% 3.9%); + --muted: hsl(240 4.8% 95.9%); + --muted-foreground: hsl(240 3.8% 46.1%); + --popover: hsl(0 0% 100%); + --popover-foreground: hsl(240 10% 3.9%); + --card: hsl(0 0% 100%); + --card-foreground: hsl(240 10% 3.9%); + --border: hsl(240 5.9% 90%); + --input: hsl(240 5.9% 90%); + --primary: hsl(240 5.9% 10%); + --primary-foreground: hsl(0 0% 98%); + --secondary: hsl(240 4.8% 95.9%); + --secondary-foreground: hsl(240 5.9% 10%); + --accent: hsl(240 4.8% 95.9%); + --accent-foreground: hsl(240 5.9% 10%); + --destructive: hsl(0 72.2% 50.6%); + --destructive-foreground: hsl(0 0% 98%); + --ring: hsl(240 10% 3.9%); + --sidebar: hsl(0 0% 98%); + --sidebar-foreground: hsl(240 5.3% 26.1%); + --sidebar-primary: hsl(240 5.9% 10%); + --sidebar-primary-foreground: hsl(0 0% 98%); + --sidebar-accent: hsl(240 4.8% 95.9%); + --sidebar-accent-foreground: hsl(240 5.9% 10%); + --sidebar-border: hsl(220 13% 91%); + --sidebar-ring: hsl(217.2 91.2% 59.8%); + + --radius: 0.5rem; +} + +.dark { + --background: hsl(240 10% 3.9%); + --foreground: hsl(0 0% 98%); + --muted: hsl(240 3.7% 15.9%); + --muted-foreground: hsl(240 5% 64.9%); + --popover: hsl(240 10% 3.9%); + --popover-foreground: hsl(0 0% 98%); + --card: hsl(240 10% 3.9%); + --card-foreground: hsl(0 0% 98%); + --border: hsl(240 3.7% 15.9%); + --input: hsl(240 3.7% 15.9%); + --primary: hsl(0 0% 98%); + --primary-foreground: hsl(240 5.9% 10%); + --secondary: hsl(240 3.7% 15.9%); + --secondary-foreground: hsl(0 0% 98%); + --accent: hsl(240 3.7% 15.9%); + --accent-foreground: hsl(0 0% 98%); + --destructive: hsl(0 62.8% 30.6%); + --destructive-foreground: hsl(0 0% 98%); + --ring: hsl(240 4.9% 83.9%); + --sidebar: hsl(240 5.9% 10%); + --sidebar-foreground: hsl(240 4.8% 95.9%); + --sidebar-primary: hsl(224.3 76.3% 48%); + --sidebar-primary-foreground: hsl(0 0% 100%); + --sidebar-accent: hsl(240 3.7% 15.9%); + --sidebar-accent-foreground: hsl(240 4.8% 95.9%); + --sidebar-border: hsl(240 3.7% 15.9%); + --sidebar-ring: hsl(217.2 91.2% 59.8%); +} + +@theme inline { + /* Radius (for rounded-*) */ + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + + /* Colors */ + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-ring: var(--ring); + --color-radius: var(--radius); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); +} + +@layer base { + * { + @apply border-border; + } + + body { + @apply bg-background text-foreground; + } +} \ No newline at end of file diff --git a/src/app.d.ts b/src/app.d.ts new file mode 100644 index 0000000..da08e6d --- /dev/null +++ b/src/app.d.ts @@ -0,0 +1,13 @@ +// See https://svelte.dev/docs/kit/types#app.d.ts +// for information about these interfaces +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface PageState {} + // interface Platform {} + } +} + +export {}; diff --git a/src/app.html b/src/app.html new file mode 100644 index 0000000..f273cc5 --- /dev/null +++ b/src/app.html @@ -0,0 +1,11 @@ + + + + + + %sveltekit.head% + + +

%sveltekit.body%

+ + diff --git a/src/demo.spec.ts b/src/demo.spec.ts new file mode 100644 index 0000000..e07cbbd --- /dev/null +++ b/src/demo.spec.ts @@ -0,0 +1,7 @@ +import { describe, it, expect } from 'vitest'; + +describe('sum test', () => { + it('adds 1 + 2 to equal 3', () => { + expect(1 + 2).toBe(3); + }); +}); diff --git a/src/lib/assets/bn_hot_america_no.png b/src/lib/assets/bn_hot_america_no.png new file mode 100644 index 0000000..36705c6 Binary files /dev/null and b/src/lib/assets/bn_hot_america_no.png differ diff --git a/src/lib/assets/departments/alpha-3.png b/src/lib/assets/departments/alpha-3.png new file mode 100644 index 0000000..b493c1c Binary files /dev/null and b/src/lib/assets/departments/alpha-3.png differ diff --git a/src/lib/assets/departments/aus_plate.png b/src/lib/assets/departments/aus_plate.png new file mode 100644 index 0000000..7d906ca Binary files /dev/null and b/src/lib/assets/departments/aus_plate.png differ diff --git a/src/lib/assets/departments/cocktail_tha.png b/src/lib/assets/departments/cocktail_tha.png new file mode 100644 index 0000000..35d8825 Binary files /dev/null and b/src/lib/assets/departments/cocktail_tha.png differ diff --git a/src/lib/assets/departments/counter01_plate.png b/src/lib/assets/departments/counter01_plate.png new file mode 100644 index 0000000..abcfcaf Binary files /dev/null and b/src/lib/assets/departments/counter01_plate.png differ diff --git a/src/lib/assets/departments/logo/alpha-3.png b/src/lib/assets/departments/logo/alpha-3.png new file mode 100644 index 0000000..1f7c6fe Binary files /dev/null and b/src/lib/assets/departments/logo/alpha-3.png differ diff --git a/src/lib/assets/departments/logo/aus_plate.png b/src/lib/assets/departments/logo/aus_plate.png new file mode 100644 index 0000000..507217f Binary files /dev/null and b/src/lib/assets/departments/logo/aus_plate.png differ diff --git a/src/lib/assets/departments/logo/cocktail_tha.png b/src/lib/assets/departments/logo/cocktail_tha.png new file mode 100644 index 0000000..35d8825 Binary files /dev/null and b/src/lib/assets/departments/logo/cocktail_tha.png differ diff --git a/src/lib/assets/departments/logo/counter01_plate.png b/src/lib/assets/departments/logo/counter01_plate.png new file mode 100644 index 0000000..abcfcaf Binary files /dev/null and b/src/lib/assets/departments/logo/counter01_plate.png differ diff --git a/src/lib/assets/departments/logo/mys_plate.png b/src/lib/assets/departments/logo/mys_plate.png new file mode 100644 index 0000000..7b7a8cc Binary files /dev/null and b/src/lib/assets/departments/logo/mys_plate.png differ diff --git a/src/lib/assets/departments/logo/sgp_plate.png b/src/lib/assets/departments/logo/sgp_plate.png new file mode 100644 index 0000000..1487af0 Binary files /dev/null and b/src/lib/assets/departments/logo/sgp_plate.png differ diff --git a/src/lib/assets/departments/logo/tha_plate.png b/src/lib/assets/departments/logo/tha_plate.png new file mode 100644 index 0000000..95540a8 Binary files /dev/null and b/src/lib/assets/departments/logo/tha_plate.png differ diff --git a/src/lib/assets/departments/mys_plate.png b/src/lib/assets/departments/mys_plate.png new file mode 100644 index 0000000..3bb130c Binary files /dev/null and b/src/lib/assets/departments/mys_plate.png differ diff --git a/src/lib/assets/departments/sgp_plate.png b/src/lib/assets/departments/sgp_plate.png new file mode 100644 index 0000000..1487af0 Binary files /dev/null and b/src/lib/assets/departments/sgp_plate.png differ diff --git a/src/lib/assets/departments/tha_plate.png b/src/lib/assets/departments/tha_plate.png new file mode 100644 index 0000000..ad42242 Binary files /dev/null and b/src/lib/assets/departments/tha_plate.png differ diff --git a/src/lib/assets/favicon.svg b/src/lib/assets/favicon.svg new file mode 100644 index 0000000..cc5dc66 --- /dev/null +++ b/src/lib/assets/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/assets/google-color.svg b/src/lib/assets/google-color.svg new file mode 100644 index 0000000..b26d4a4 --- /dev/null +++ b/src/lib/assets/google-color.svg @@ -0,0 +1,28 @@ + + + \ No newline at end of file diff --git a/src/lib/assets/icons/export.svg b/src/lib/assets/icons/export.svg new file mode 100644 index 0000000..6cf1faf --- /dev/null +++ b/src/lib/assets/icons/export.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/assets/icons/logout.svg b/src/lib/assets/icons/logout.svg new file mode 100644 index 0000000..4881453 --- /dev/null +++ b/src/lib/assets/icons/logout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/assets/icons/logs.svg b/src/lib/assets/icons/logs.svg new file mode 100644 index 0000000..1c52f1e --- /dev/null +++ b/src/lib/assets/icons/logs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/assets/icons/recipes.svg b/src/lib/assets/icons/recipes.svg new file mode 100644 index 0000000..d74d1cf --- /dev/null +++ b/src/lib/assets/icons/recipes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/assets/logo.png b/src/lib/assets/logo.png new file mode 100644 index 0000000..4bd4910 Binary files /dev/null and b/src/lib/assets/logo.png differ diff --git a/src/lib/assets/logo.svelte b/src/lib/assets/logo.svelte new file mode 100644 index 0000000..efdfc6f --- /dev/null +++ b/src/lib/assets/logo.svelte @@ -0,0 +1,128 @@ + + + diff --git a/src/lib/assets/modules/monitoring_btn.png b/src/lib/assets/modules/monitoring_btn.png new file mode 100644 index 0000000..0b13111 Binary files /dev/null and b/src/lib/assets/modules/monitoring_btn.png differ diff --git a/src/lib/assets/modules/recipe_btn.png b/src/lib/assets/modules/recipe_btn.png new file mode 100644 index 0000000..ad6f81d Binary files /dev/null and b/src/lib/assets/modules/recipe_btn.png differ diff --git a/src/lib/assets/status-health.svelte b/src/lib/assets/status-health.svelte new file mode 100644 index 0000000..cd93d3a --- /dev/null +++ b/src/lib/assets/status-health.svelte @@ -0,0 +1,10 @@ + diff --git a/src/lib/components/app-account-select.svelte b/src/lib/components/app-account-select.svelte new file mode 100644 index 0000000..f2c650a --- /dev/null +++ b/src/lib/components/app-account-select.svelte @@ -0,0 +1,109 @@ + + + + + + + {#snippet child({ props })} + +

+ +

+ + {currentUser?.displayName} + + {currentUser?.email} +

+ + + {/snippet} + + + + + diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte new file mode 100644 index 0000000..e4d0917 --- /dev/null +++ b/src/lib/components/app-sidebar.svelte @@ -0,0 +1,130 @@ + + + + +

+ +

+ + + {#each data.navMain as nav} + + {nav.title} + + + {#each nav.items as sub} + + + {#snippet child({ props })} + + {#if sub.icon} + + {/if} + {sub.title} + + {/snippet} + + + {/each} + + + + {/each} + + + + + diff --git a/src/lib/components/content-form.svelte b/src/lib/components/content-form.svelte new file mode 100644 index 0000000..6a64ca1 --- /dev/null +++ b/src/lib/components/content-form.svelte @@ -0,0 +1,8 @@ + + + diff --git a/src/lib/components/dashboard-quick-adb.svelte b/src/lib/components/dashboard-quick-adb.svelte new file mode 100644 index 0000000..b4ba09d --- /dev/null +++ b/src/lib/components/dashboard-quick-adb.svelte @@ -0,0 +1,424 @@ + + +

+ + + Machine Shortcuts + Shortcuts for machine i.e. connect or hotfix + {#if enableComponent} + + + + {/if} + + + {#if enableComponent} + +

+ + +

+ Device: {connectDeviceOk ? 'Online' : 'Offline'} +

+ +

+ { + openAppBrewWhenConnected = !openAppBrewWhenConnected; + }} + /> +

+ Show brew app when connected +

+ Immediately try to open brew app when first connected +

+ + +

+ + + + + +

+ {:else} + +

+ This feature is not enabled +

+ {/if} + + + + {#if connectDeviceOk} + {#if showLoadProgress} + + {/if} +

{machineStatus}

+ {/if} + + +

diff --git a/src/lib/components/dashboard.svelte b/src/lib/components/dashboard.svelte new file mode 100644 index 0000000..4cd31e5 --- /dev/null +++ b/src/lib/components/dashboard.svelte @@ -0,0 +1,81 @@ + + +

+ + + Latest Activity + Real time activities. Click to view full activities. + + + + +

+ {#if activities.length > 0} + {#each activities as activity} +

+ {activity} +

+ + {/each} + {:else} +

No ongoing activity right now!

+ + {/if} +

+ + + +

+ + + + + + +

diff --git a/src/lib/components/error-layout.svelte b/src/lib/components/error-layout.svelte new file mode 100644 index 0000000..e7c4a45 --- /dev/null +++ b/src/lib/components/error-layout.svelte @@ -0,0 +1,11 @@ + + +

+ +

+ + \ No newline at end of file diff --git a/src/lib/components/machine-info.svelte b/src/lib/components/machine-info.svelte new file mode 100644 index 0000000..d4b16ea --- /dev/null +++ b/src/lib/components/machine-info.svelte @@ -0,0 +1,63 @@ + + +

+ + + Machine Infos + Informations of current connected machine + + + {#if currentMachineInfo && infoMap} +

Box ID:

{currentMachineInfo.boxId}

+ +

Versions:

+ {#each Object.keys(infoMap['versions']) as v} +

{v}

+ {#if infoMap['versions'][v] && infoMap['versions'][v] != ''} +

{infoMap['versions'][v]}

+ {:else} + + {/if} +

+ {/each} +

+ {:else} +

+ +

+ {/if} + + +

diff --git a/src/lib/components/recipe-details/columns.ts b/src/lib/components/recipe-details/columns.ts new file mode 100644 index 0000000..6198ac1 --- /dev/null +++ b/src/lib/components/recipe-details/columns.ts @@ -0,0 +1,114 @@ +// { +// "MixOrder": 0, +// "StringParam": "", +// "FeedParameter": 0, +// "FeedPattern": 0, +// "isUse": true, +// "materialPathId": 599501, +// "powderGram": 0, +// "powderTime": 0, +// "stirTime": 110, +// "syrupGram": 0, +// "syrupTime": 0, +// "waterCold": 0, +// "waterYield": 0 +// } + +import type { ColumnDef } from '@tanstack/table-core'; +import { renderComponent, renderSnippet } from '../ui/data-table'; +import RecipelistIsuse from './recipelist-isuse.svelte'; +import RecipelistValue from './recipelist-value.svelte'; +import { DragHandle } from './recipelist-table.svelte'; +import { createRawSnippet } from 'svelte'; +import RecipelistMatSelect from './recipelist-mat-select.svelte'; + +export type RecipelistMaterial = { + id: number; + material_id: string; + is_use: boolean; + values: { + string_param: string; + mix_order: number; + feed: { + pattern: number; + parameter: number; + }; + powder: { + gram: number; + time: number; + }; + syrup: { + gram: number; + time: number; + }; + water: { + cold: number; + yield: number; + }; + }; +}; + +export const columns: ColumnDef[] = [ + { + id: 'id', + accessorKey: 'id', + header: () => null, + cell: () => null, + enableSorting: true + }, + { + id: 'drag', + header: () => + renderSnippet( + createRawSnippet(() => ({ + render: () => '

' + })) + ), + cell: () => renderSnippet(DragHandle) + }, + { + accessorKey: 'is_use', + id: 'is_use', + header: ({ column }) => + renderSnippet( + createRawSnippet(() => ({ + render: () => '

Enable

' + })) + ), + cell: ({ row }) => { + return renderComponent(RecipelistIsuse, { + checked: row.original.is_use, + onCheckedChange: (value) => { + row.original.is_use = !!value; + row.toggleSelected(row.original.is_use); + } + }); + }, + enableSorting: false, + enableHiding: false + }, + { + id: 'material_id', + header: ({ column }) => 'Material', + cell: ({ row }) => { + return renderComponent(RecipelistMatSelect, { + currentMat: row.original.material_id, + onMatChange: (value: any) => { + row.original.material_id = value; + console.log('change mat', value); + row.toggleSelected(row.original.is_use); + } + }); + } + }, + { + accessorKey: 'values', + id: 'values', + header: ({ column }) => 'Values', + cell: ({ row }) => { + return renderComponent(RecipelistValue, { + ...row.original.values + }); + } + } +]; diff --git a/src/lib/components/recipe-details/recipe-detail.svelte b/src/lib/components/recipe-details/recipe-detail.svelte new file mode 100644 index 0000000..0e42f0c --- /dev/null +++ b/src/lib/components/recipe-details/recipe-detail.svelte @@ -0,0 +1,145 @@ + + + + + + +

+ + + Info + Details + + + + + + Info + Info about this menu + + + +

+ Name + + Other Name + +

+ +

+ + + + + + + + +

diff --git a/src/lib/components/recipe-details/recipelist-isuse.svelte b/src/lib/components/recipe-details/recipelist-isuse.svelte new file mode 100644 index 0000000..65bf6d3 --- /dev/null +++ b/src/lib/components/recipe-details/recipelist-isuse.svelte @@ -0,0 +1,14 @@ + + +

+ onCheckedChange(e)} {...restProps} /> +

diff --git a/src/lib/components/recipe-details/recipelist-mat-select.svelte b/src/lib/components/recipe-details/recipelist-mat-select.svelte new file mode 100644 index 0000000..3e5acf4 --- /dev/null +++ b/src/lib/components/recipe-details/recipelist-mat-select.svelte @@ -0,0 +1,76 @@ + + + + + + + +

+ + {}} + oninput={(e) => {}} + /> +

+ + + +

+ +

Create Material

+ + + {#each allMatData as mat} + changeMat(`${mat.materialOtherName} (${mat.id})`)}> +

+ {#if mat.BeanChannel} + + {:else if mat.id > 8110 && mat.id < 8131} + + {/if} + +

{mat.materialOtherName} ({mat.id})

+ + {:else} + +

No materials available

+ + {/each} + + diff --git a/src/lib/components/recipe-details/recipelist-table.svelte b/src/lib/components/recipe-details/recipelist-table.svelte new file mode 100644 index 0000000..3d1ef58 --- /dev/null +++ b/src/lib/components/recipe-details/recipelist-table.svelte @@ -0,0 +1,196 @@ + + + + + + + + Recipe List + Material used in this menu's brewing process + + + + + { + // snap + data = move(data as any, e as any); + // + }} + > + + + + {#each table.getHeaderGroups() as headerGroup (headerGroup.id)} + + {#each headerGroup.headers as header (header.id)} + + {#if !header.isPlaceholder} + + {/if} + + {/each} + + {/each} + + + {#if table.getRowModel().rows?.length} + {#each table.getRowModel().rows as row, index (row.id)} + {@render DraggableRow({ row, index })} + {/each} + {:else} + + Empty recipe. + + {/if} + + + + + + + + +{#snippet DraggableRow({ row, index }: { row: Row; index: number })} + {@const { ref, isDragging, handleRef } = useSortable({ + id: row.original.id, + index: () => index + })} + + + {#each row.getVisibleCells() as cell (cell.id)} + + + + {/each} + +{/snippet} + +{#snippet DragHandle({ attach }: { attach: Attachment })} + +{/snippet} diff --git a/src/lib/components/recipe-details/recipelist-value.svelte b/src/lib/components/recipe-details/recipelist-value.svelte new file mode 100644 index 0000000..6957dd4 --- /dev/null +++ b/src/lib/components/recipe-details/recipelist-value.svelte @@ -0,0 +1,6 @@ + diff --git a/src/lib/components/recipe-editor-dialog.svelte b/src/lib/components/recipe-editor-dialog.svelte new file mode 100644 index 0000000..5d478e0 --- /dev/null +++ b/src/lib/components/recipe-editor-dialog.svelte @@ -0,0 +1,95 @@ + + +{#if isDesktop.current} + + e.preventDefault()}>View + + + Edit Recipe {productCode} + Make changes to selected menu here. Click "save" when done or "test" for testing with + connected machine + + + + + + + +{:else}{/if} diff --git a/src/lib/components/ui/alert/alert-description.svelte b/src/lib/components/ui/alert/alert-description.svelte new file mode 100644 index 0000000..8b56aed --- /dev/null +++ b/src/lib/components/ui/alert/alert-description.svelte @@ -0,0 +1,23 @@ + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/alert/alert-title.svelte b/src/lib/components/ui/alert/alert-title.svelte new file mode 100644 index 0000000..77e45ad --- /dev/null +++ b/src/lib/components/ui/alert/alert-title.svelte @@ -0,0 +1,20 @@ + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/alert/alert.svelte b/src/lib/components/ui/alert/alert.svelte new file mode 100644 index 0000000..2b2eff9 --- /dev/null +++ b/src/lib/components/ui/alert/alert.svelte @@ -0,0 +1,44 @@ + + + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/alert/index.ts b/src/lib/components/ui/alert/index.ts new file mode 100644 index 0000000..97e21b4 --- /dev/null +++ b/src/lib/components/ui/alert/index.ts @@ -0,0 +1,14 @@ +import Root from "./alert.svelte"; +import Description from "./alert-description.svelte"; +import Title from "./alert-title.svelte"; +export { alertVariants, type AlertVariant } from "./alert.svelte"; + +export { + Root, + Description, + Title, + // + Root as Alert, + Description as AlertDescription, + Title as AlertTitle, +}; diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte new file mode 100644 index 0000000..e3164ba --- /dev/null +++ b/src/lib/components/ui/badge/badge.svelte @@ -0,0 +1,50 @@ + + + + + + {@render children?.()} + diff --git a/src/lib/components/ui/badge/index.ts b/src/lib/components/ui/badge/index.ts new file mode 100644 index 0000000..64e0aa9 --- /dev/null +++ b/src/lib/components/ui/badge/index.ts @@ -0,0 +1,2 @@ +export { default as Badge } from "./badge.svelte"; +export { badgeVariants, type BadgeVariant } from "./badge.svelte"; diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte new file mode 100644 index 0000000..a8296ae --- /dev/null +++ b/src/lib/components/ui/button/button.svelte @@ -0,0 +1,82 @@ + + + + +{#if href} + + {@render children?.()} + +{:else} + +{/if} diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts new file mode 100644 index 0000000..fb585d7 --- /dev/null +++ b/src/lib/components/ui/button/index.ts @@ -0,0 +1,17 @@ +import Root, { + type ButtonProps, + type ButtonSize, + type ButtonVariant, + buttonVariants, +} from "./button.svelte"; + +export { + Root, + type ButtonProps as Props, + // + Root as Button, + buttonVariants, + type ButtonProps, + type ButtonSize, + type ButtonVariant, +}; diff --git a/src/lib/components/ui/card/card-action.svelte b/src/lib/components/ui/card/card-action.svelte new file mode 100644 index 0000000..cc36c56 --- /dev/null +++ b/src/lib/components/ui/card/card-action.svelte @@ -0,0 +1,20 @@ + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte new file mode 100644 index 0000000..bc90b83 --- /dev/null +++ b/src/lib/components/ui/card/card-content.svelte @@ -0,0 +1,15 @@ + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte new file mode 100644 index 0000000..9b20ac7 --- /dev/null +++ b/src/lib/components/ui/card/card-description.svelte @@ -0,0 +1,20 @@ + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte new file mode 100644 index 0000000..cf43353 --- /dev/null +++ b/src/lib/components/ui/card/card-footer.svelte @@ -0,0 +1,20 @@ + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte new file mode 100644 index 0000000..8a91abb --- /dev/null +++ b/src/lib/components/ui/card/card-header.svelte @@ -0,0 +1,23 @@ + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte new file mode 100644 index 0000000..22586e6 --- /dev/null +++ b/src/lib/components/ui/card/card-title.svelte @@ -0,0 +1,20 @@ + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte new file mode 100644 index 0000000..99448cc --- /dev/null +++ b/src/lib/components/ui/card/card.svelte @@ -0,0 +1,23 @@ + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts new file mode 100644 index 0000000..4d3fce4 --- /dev/null +++ b/src/lib/components/ui/card/index.ts @@ -0,0 +1,25 @@ +import Root from "./card.svelte"; +import Content from "./card-content.svelte"; +import Description from "./card-description.svelte"; +import Footer from "./card-footer.svelte"; +import Header from "./card-header.svelte"; +import Title from "./card-title.svelte"; +import Action from "./card-action.svelte"; + +export { + Root, + Content, + Description, + Footer, + Header, + Title, + Action, + // + Root as Card, + Content as CardContent, + Description as CardDescription, + Footer as CardFooter, + Header as CardHeader, + Title as CardTitle, + Action as CardAction, +}; diff --git a/src/lib/components/ui/checkbox/checkbox.svelte b/src/lib/components/ui/checkbox/checkbox.svelte new file mode 100644 index 0000000..1622e05 --- /dev/null +++ b/src/lib/components/ui/checkbox/checkbox.svelte @@ -0,0 +1,36 @@ + + + + {#snippet children({ checked, indeterminate })} +

+ {#if checked} + + {:else if indeterminate} + + {/if} +

+ {/snippet} + diff --git a/src/lib/components/ui/checkbox/index.ts b/src/lib/components/ui/checkbox/index.ts new file mode 100644 index 0000000..6d92d94 --- /dev/null +++ b/src/lib/components/ui/checkbox/index.ts @@ -0,0 +1,6 @@ +import Root from "./checkbox.svelte"; +export { + Root, + // + Root as Checkbox, +}; diff --git a/src/lib/components/ui/command/command-dialog.svelte b/src/lib/components/ui/command/command-dialog.svelte new file mode 100644 index 0000000..5c9a82a --- /dev/null +++ b/src/lib/components/ui/command/command-dialog.svelte @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/lib/components/ui/command/command-empty.svelte b/src/lib/components/ui/command/command-empty.svelte new file mode 100644 index 0000000..6726cd8 --- /dev/null +++ b/src/lib/components/ui/command/command-empty.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/lib/components/ui/command/command-group.svelte b/src/lib/components/ui/command/command-group.svelte new file mode 100644 index 0000000..104f817 --- /dev/null +++ b/src/lib/components/ui/command/command-group.svelte @@ -0,0 +1,32 @@ + + + + {#if heading} + + {heading} + + {/if} + + diff --git a/src/lib/components/ui/command/command-input.svelte b/src/lib/components/ui/command/command-input.svelte new file mode 100644 index 0000000..e0dbd58 --- /dev/null +++ b/src/lib/components/ui/command/command-input.svelte @@ -0,0 +1,26 @@ + + +

+ + +

diff --git a/src/lib/components/ui/command/command-item.svelte b/src/lib/components/ui/command/command-item.svelte new file mode 100644 index 0000000..d94d07f --- /dev/null +++ b/src/lib/components/ui/command/command-item.svelte @@ -0,0 +1,20 @@ + + + diff --git a/src/lib/components/ui/command/command-link-item.svelte b/src/lib/components/ui/command/command-link-item.svelte new file mode 100644 index 0000000..944c22d --- /dev/null +++ b/src/lib/components/ui/command/command-link-item.svelte @@ -0,0 +1,20 @@ + + + diff --git a/src/lib/components/ui/command/command-list.svelte b/src/lib/components/ui/command/command-list.svelte new file mode 100644 index 0000000..569f595 --- /dev/null +++ b/src/lib/components/ui/command/command-list.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/lib/components/ui/command/command-loading.svelte b/src/lib/components/ui/command/command-loading.svelte new file mode 100644 index 0000000..19dd298 --- /dev/null +++ b/src/lib/components/ui/command/command-loading.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/lib/components/ui/command/command-separator.svelte b/src/lib/components/ui/command/command-separator.svelte new file mode 100644 index 0000000..35c4c95 --- /dev/null +++ b/src/lib/components/ui/command/command-separator.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/lib/components/ui/command/command-shortcut.svelte b/src/lib/components/ui/command/command-shortcut.svelte new file mode 100644 index 0000000..f3d6928 --- /dev/null +++ b/src/lib/components/ui/command/command-shortcut.svelte @@ -0,0 +1,20 @@ + + + + {@render children?.()} + diff --git a/src/lib/components/ui/command/command.svelte b/src/lib/components/ui/command/command.svelte new file mode 100644 index 0000000..a1581f1 --- /dev/null +++ b/src/lib/components/ui/command/command.svelte @@ -0,0 +1,28 @@ + + + diff --git a/src/lib/components/ui/command/index.ts b/src/lib/components/ui/command/index.ts new file mode 100644 index 0000000..5435fbe --- /dev/null +++ b/src/lib/components/ui/command/index.ts @@ -0,0 +1,37 @@ +import Root from "./command.svelte"; +import Loading from "./command-loading.svelte"; +import Dialog from "./command-dialog.svelte"; +import Empty from "./command-empty.svelte"; +import Group from "./command-group.svelte"; +import Item from "./command-item.svelte"; +import Input from "./command-input.svelte"; +import List from "./command-list.svelte"; +import Separator from "./command-separator.svelte"; +import Shortcut from "./command-shortcut.svelte"; +import LinkItem from "./command-link-item.svelte"; + +export { + Root, + Dialog, + Empty, + Group, + Item, + LinkItem, + Input, + List, + Separator, + Shortcut, + Loading, + // + Root as Command, + Dialog as CommandDialog, + Empty as CommandEmpty, + Group as CommandGroup, + Item as CommandItem, + LinkItem as CommandLinkItem, + Input as CommandInput, + List as CommandList, + Separator as CommandSeparator, + Shortcut as CommandShortcut, + Loading as CommandLoading, +}; diff --git a/src/lib/components/ui/data-table/data-table.svelte.ts b/src/lib/components/ui/data-table/data-table.svelte.ts new file mode 100644 index 0000000..5b7985e --- /dev/null +++ b/src/lib/components/ui/data-table/data-table.svelte.ts @@ -0,0 +1,142 @@ +import { + type RowData, + type TableOptions, + type TableOptionsResolved, + type TableState, + createTable, +} from "@tanstack/table-core"; + +/** + * Creates a reactive TanStack table object for Svelte. + * @param options Table options to create the table with. + * @returns A reactive table object. + * @example + * ```svelte + * + * + * + * + * {#each table.getHeaderGroups() as headerGroup} + * + * {#each headerGroup.headers as header} + * + * {/each} + * + * {/each} + * + * + *

+ * + *

+ * ``` + */ +export function createSvelteTable(options: TableOptions) { + const resolvedOptions: TableOptionsResolved = mergeObjects( + { + state: {}, + onStateChange() {}, + renderFallbackValue: null, + mergeOptions: ( + defaultOptions: TableOptions, + options: Partial> + ) => { + return mergeObjects(defaultOptions, options); + }, + }, + options + ); + + const table = createTable(resolvedOptions); + let state = $state>(table.initialState); + + function updateOptions() { + table.setOptions((prev) => { + return mergeObjects(prev, options, { + state: mergeObjects(state, options.state || {}), + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + onStateChange: (updater: any) => { + if (updater instanceof Function) state = updater(state); + else state = mergeObjects(state, updater); + + options.onStateChange?.(updater); + }, + }); + }); + } + + updateOptions(); + + $effect.pre(() => { + updateOptions(); + }); + + return table; +} + +type MaybeThunk = T | (() => T | null | undefined); +type Intersection = (T extends [infer H, ...infer R] + ? H & Intersection + : unknown) & {}; + +/** + * Lazily merges several objects (or thunks) while preserving + * getter semantics from every source. + * + * Proxy-based to avoid known WebKit recursion issue. + */ +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export function mergeObjects[]>( + ...sources: Sources +): Intersection<{ [K in keyof Sources]: Sources[K] }> { + const resolve = (src: MaybeThunk): T | undefined => + typeof src === "function" ? (src() ?? undefined) : src; + + const findSourceWithKey = (key: PropertyKey) => { + for (let i = sources.length - 1; i >= 0; i--) { + const obj = resolve(sources[i]); + if (obj && key in obj) return obj; + } + return undefined; + }; + + return new Proxy(Object.create(null), { + get(_, key) { + const src = findSourceWithKey(key); + + return src?.[key as never]; + }, + + has(_, key) { + return !!findSourceWithKey(key); + }, + + ownKeys(): (string | symbol)[] { + // eslint-disable-next-line svelte/prefer-svelte-reactivity + const all = new Set(); + for (const s of sources) { + const obj = resolve(s); + if (obj) { + for (const k of Reflect.ownKeys(obj) as (string | symbol)[]) { + all.add(k); + } + } + } + return [...all]; + }, + + getOwnPropertyDescriptor(_, key) { + const src = findSourceWithKey(key); + if (!src) return undefined; + return { + configurable: true, + enumerable: true, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + value: (src as any)[key], + writable: true, + }; + }, + }) as Intersection<{ [K in keyof Sources]: Sources[K] }>; +} diff --git a/src/lib/components/ui/data-table/flex-render.svelte b/src/lib/components/ui/data-table/flex-render.svelte new file mode 100644 index 0000000..ac82a58 --- /dev/null +++ b/src/lib/components/ui/data-table/flex-render.svelte @@ -0,0 +1,40 @@ + + +{#if typeof content === "string"} + {content} +{:else if content instanceof Function} + + + {@const result = content(context as any)} + {#if result instanceof RenderComponentConfig} + {@const { component: Component, props } = result} + + {:else if result instanceof RenderSnippetConfig} + {@const { snippet, params } = result} + {@render snippet({ ...params, attach })} + {:else} + {result} + {/if} +{/if} diff --git a/src/lib/components/ui/data-table/index.ts b/src/lib/components/ui/data-table/index.ts new file mode 100644 index 0000000..5f4e77e --- /dev/null +++ b/src/lib/components/ui/data-table/index.ts @@ -0,0 +1,3 @@ +export { default as FlexRender } from "./flex-render.svelte"; +export { renderComponent, renderSnippet } from "./render-helpers.js"; +export { createSvelteTable } from "./data-table.svelte.js"; diff --git a/src/lib/components/ui/data-table/render-helpers.ts b/src/lib/components/ui/data-table/render-helpers.ts new file mode 100644 index 0000000..fa036d6 --- /dev/null +++ b/src/lib/components/ui/data-table/render-helpers.ts @@ -0,0 +1,111 @@ +import type { Component, ComponentProps, Snippet } from "svelte"; + +/** + * A helper class to make it easy to identify Svelte components in + * `columnDef.cell` and `columnDef.header` properties. + * + * > NOTE: This class should only be used internally by the adapter. If you're + * reading this and you don't know what this is for, you probably don't need it. + * + * @example + * ```svelte + * {@const result = content(context as any)} + * {#if result instanceof RenderComponentConfig} + * {@const { component: Component, props } = result} + * + * {/if} + * ``` + */ +export class RenderComponentConfig { + component: TComponent; + props: ComponentProps | Record; + constructor( + component: TComponent, + props: ComponentProps | Record = {} + ) { + this.component = component; + this.props = props; + } +} + +/** + * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties. + * + * > NOTE: This class should only be used internally by the adapter. If you're + * reading this and you don't know what this is for, you probably don't need it. + * + * @example + * ```svelte + * {@const result = content(context as any)} + * {#if result instanceof RenderSnippetConfig} + * {@const { snippet, params } = result} + * {@render snippet(params)} + * {/if} + * ``` + */ +export class RenderSnippetConfig { + snippet: Snippet<[TProps]>; + params: TProps; + constructor(snippet: Snippet<[TProps]>, params: TProps) { + this.snippet = snippet; + this.params = params; + } +} + +/** + * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties. + * + * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets. + * + * @param component A Svelte component + * @param props The props to pass to `component` + * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component. + * @example + * ```ts + * // +page.svelte + * const defaultColumns = [ + * columnHelper.accessor('name', { + * header: header => renderComponent(SortHeader, { label: 'Name', header }), + * }), + * columnHelper.accessor('state', { + * header: header => renderComponent(SortHeader, { label: 'State', header }), + * }), + * ] + * ``` + * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs} + */ +export function renderComponent< + // eslint-disable-next-line @typescript-eslint/no-explicit-any + T extends Component, + Props extends ComponentProps, +>(component: T, props: Props = {} as Props) { + return new RenderComponentConfig(component, props); +} + +/** + * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties. + * + * The snippet must only take one parameter. + * + * This is only to be used with Snippets - use `renderComponent` for Svelte Components. + * + * @param snippet + * @param params + * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet. + * @example + * ```ts + * // +page.svelte + * const defaultColumns = [ + * columnHelper.accessor('name', { + * cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }), + * }), + * columnHelper.accessor('state', { + * cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }), + * }), + * ] + * ``` + * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs} + */ +export function renderSnippet(snippet: Snippet<[TProps]>, params: TProps = {} as TProps) { + return new RenderSnippetConfig(snippet, params); +} diff --git a/src/lib/components/ui/dialog/dialog-close.svelte b/src/lib/components/ui/dialog/dialog-close.svelte new file mode 100644 index 0000000..840b2f6 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-close.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte new file mode 100644 index 0000000..31d629f --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-content.svelte @@ -0,0 +1,45 @@ + + + + + + {@render children?.()} + {#if showCloseButton} + + + + + {/if} + + diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte new file mode 100644 index 0000000..3845023 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-description.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte new file mode 100644 index 0000000..e7ff446 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-footer.svelte @@ -0,0 +1,20 @@ + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte new file mode 100644 index 0000000..4e5c447 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-header.svelte @@ -0,0 +1,20 @@ + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte new file mode 100644 index 0000000..f81ad83 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-overlay.svelte @@ -0,0 +1,20 @@ + + + diff --git a/src/lib/components/ui/dialog/dialog-portal.svelte b/src/lib/components/ui/dialog/dialog-portal.svelte new file mode 100644 index 0000000..ccfa79c --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-portal.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte new file mode 100644 index 0000000..067e55e --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-title.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/lib/components/ui/dialog/dialog-trigger.svelte b/src/lib/components/ui/dialog/dialog-trigger.svelte new file mode 100644 index 0000000..9d1e801 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-trigger.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/lib/components/ui/dialog/dialog.svelte b/src/lib/components/ui/dialog/dialog.svelte new file mode 100644 index 0000000..211672c --- /dev/null +++ b/src/lib/components/ui/dialog/dialog.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts new file mode 100644 index 0000000..076cef5 --- /dev/null +++ b/src/lib/components/ui/dialog/index.ts @@ -0,0 +1,34 @@ +import Root from "./dialog.svelte"; +import Portal from "./dialog-portal.svelte"; +import Title from "./dialog-title.svelte"; +import Footer from "./dialog-footer.svelte"; +import Header from "./dialog-header.svelte"; +import Overlay from "./dialog-overlay.svelte"; +import Content from "./dialog-content.svelte"; +import Description from "./dialog-description.svelte"; +import Trigger from "./dialog-trigger.svelte"; +import Close from "./dialog-close.svelte"; + +export { + Root, + Title, + Portal, + Footer, + Header, + Trigger, + Overlay, + Content, + Description, + Close, + // + Root as Dialog, + Title as DialogTitle, + Portal as DialogPortal, + Footer as DialogFooter, + Header as DialogHeader, + Trigger as DialogTrigger, + Overlay as DialogOverlay, + Content as DialogContent, + Description as DialogDescription, + Close as DialogClose, +}; diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte new file mode 100644 index 0000000..e0e1971 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte new file mode 100644 index 0000000..6d9ef85 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte @@ -0,0 +1,43 @@ + + + + {#snippet children({ checked, indeterminate })} + + {#if indeterminate} + + {:else} + + {/if} + + {@render childrenProp?.()} + {/snippet} + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte new file mode 100644 index 0000000..1e96782 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte @@ -0,0 +1,29 @@ + + + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte new file mode 100644 index 0000000..433540f --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte @@ -0,0 +1,22 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte new file mode 100644 index 0000000..aca1f7b --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte new file mode 100644 index 0000000..04cd110 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte @@ -0,0 +1,27 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte new file mode 100644 index 0000000..9681c2b --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte @@ -0,0 +1,24 @@ + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte new file mode 100644 index 0000000..274cfef --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte new file mode 100644 index 0000000..189aef4 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte new file mode 100644 index 0000000..ce2ad09 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte @@ -0,0 +1,33 @@ + + + + {#snippet children({ checked })} + + {#if checked} + + {/if} + + {@render childrenProp?.({ checked })} + {/snippet} + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte new file mode 100644 index 0000000..90f1b6f --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte new file mode 100644 index 0000000..7c6e9c6 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte @@ -0,0 +1,20 @@ + + + + {@render children?.()} + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte new file mode 100644 index 0000000..3f06dc4 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte @@ -0,0 +1,20 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte new file mode 100644 index 0000000..5f49d01 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte @@ -0,0 +1,29 @@ + + + + {@render children?.()} + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte new file mode 100644 index 0000000..f044581 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte new file mode 100644 index 0000000..cb05344 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte new file mode 100644 index 0000000..cb4bc62 --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/lib/components/ui/dropdown-menu/index.ts b/src/lib/components/ui/dropdown-menu/index.ts new file mode 100644 index 0000000..7850c6a --- /dev/null +++ b/src/lib/components/ui/dropdown-menu/index.ts @@ -0,0 +1,54 @@ +import Root from "./dropdown-menu.svelte"; +import Sub from "./dropdown-menu-sub.svelte"; +import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte"; +import CheckboxItem from "./dropdown-menu-checkbox-item.svelte"; +import Content from "./dropdown-menu-content.svelte"; +import Group from "./dropdown-menu-group.svelte"; +import Item from "./dropdown-menu-item.svelte"; +import Label from "./dropdown-menu-label.svelte"; +import RadioGroup from "./dropdown-menu-radio-group.svelte"; +import RadioItem from "./dropdown-menu-radio-item.svelte"; +import Separator from "./dropdown-menu-separator.svelte"; +import Shortcut from "./dropdown-menu-shortcut.svelte"; +import Trigger from "./dropdown-menu-trigger.svelte"; +import SubContent from "./dropdown-menu-sub-content.svelte"; +import SubTrigger from "./dropdown-menu-sub-trigger.svelte"; +import GroupHeading from "./dropdown-menu-group-heading.svelte"; +import Portal from "./dropdown-menu-portal.svelte"; + +export { + CheckboxGroup, + CheckboxItem, + Content, + Portal, + Root as DropdownMenu, + CheckboxGroup as DropdownMenuCheckboxGroup, + CheckboxItem as DropdownMenuCheckboxItem, + Content as DropdownMenuContent, + Portal as DropdownMenuPortal, + Group as DropdownMenuGroup, + Item as DropdownMenuItem, + Label as DropdownMenuLabel, + RadioGroup as DropdownMenuRadioGroup, + RadioItem as DropdownMenuRadioItem, + Separator as DropdownMenuSeparator, + Shortcut as DropdownMenuShortcut, + Sub as DropdownMenuSub, + SubContent as DropdownMenuSubContent, + SubTrigger as DropdownMenuSubTrigger, + Trigger as DropdownMenuTrigger, + GroupHeading as DropdownMenuGroupHeading, + Group, + GroupHeading, + Item, + Label, + RadioGroup, + RadioItem, + Root, + Separator, + Shortcut, + Sub, + SubContent, + SubTrigger, + Trigger, +}; diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts new file mode 100644 index 0000000..f47b6d3 --- /dev/null +++ b/src/lib/components/ui/input/index.ts @@ -0,0 +1,7 @@ +import Root from "./input.svelte"; + +export { + Root, + // + Root as Input, +}; diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte new file mode 100644 index 0000000..960167d --- /dev/null +++ b/src/lib/components/ui/input/input.svelte @@ -0,0 +1,52 @@ + + +{#if type === "file"} + +{:else} + +{/if} diff --git a/src/lib/components/ui/label/index.ts b/src/lib/components/ui/label/index.ts new file mode 100644 index 0000000..8bfca0b --- /dev/null +++ b/src/lib/components/ui/label/index.ts @@ -0,0 +1,7 @@ +import Root from "./label.svelte"; + +export { + Root, + // + Root as Label, +}; diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte new file mode 100644 index 0000000..d0afda3 --- /dev/null +++ b/src/lib/components/ui/label/label.svelte @@ -0,0 +1,20 @@ + + + diff --git a/src/lib/components/ui/navigation-menu/index.ts b/src/lib/components/ui/navigation-menu/index.ts new file mode 100644 index 0000000..bbc250f --- /dev/null +++ b/src/lib/components/ui/navigation-menu/index.ts @@ -0,0 +1,28 @@ +import Root from "./navigation-menu.svelte"; +import Content from "./navigation-menu-content.svelte"; +import Indicator from "./navigation-menu-indicator.svelte"; +import Item from "./navigation-menu-item.svelte"; +import Link from "./navigation-menu-link.svelte"; +import List from "./navigation-menu-list.svelte"; +import Trigger from "./navigation-menu-trigger.svelte"; +import Viewport from "./navigation-menu-viewport.svelte"; + +export { + Root, + Content, + Indicator, + Item, + Link, + List, + Trigger, + Viewport, + // + Root as NavigationMenuRoot, + Content as NavigationMenuContent, + Indicator as NavigationMenuIndicator, + Item as NavigationMenuItem, + Link as NavigationMenuLink, + List as NavigationMenuList, + Trigger as NavigationMenuTrigger, + Viewport as NavigationMenuViewport, +}; diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte new file mode 100644 index 0000000..9dbdb36 --- /dev/null +++ b/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte @@ -0,0 +1,21 @@ + + + diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte new file mode 100644 index 0000000..6c9bdfd --- /dev/null +++ b/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte @@ -0,0 +1,22 @@ + + + +

+ diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte new file mode 100644 index 0000000..b00b4b4 --- /dev/null +++ b/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte new file mode 100644 index 0000000..867851e --- /dev/null +++ b/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte @@ -0,0 +1,20 @@ + + + diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte new file mode 100644 index 0000000..c2c5880 --- /dev/null +++ b/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte new file mode 100644 index 0000000..aad82a2 --- /dev/null +++ b/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte @@ -0,0 +1,34 @@ + + + + + + {@render children?.()} + + diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte new file mode 100644 index 0000000..655741d --- /dev/null +++ b/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte @@ -0,0 +1,22 @@ + + +

+ +

diff --git a/src/lib/components/ui/navigation-menu/navigation-menu.svelte b/src/lib/components/ui/navigation-menu/navigation-menu.svelte new file mode 100644 index 0000000..69c3d13 --- /dev/null +++ b/src/lib/components/ui/navigation-menu/navigation-menu.svelte @@ -0,0 +1,32 @@ + + + + {@render children?.()} + + {#if viewport} + + {/if} + diff --git a/src/lib/components/ui/pagination/index.ts b/src/lib/components/ui/pagination/index.ts new file mode 100644 index 0000000..a769899 --- /dev/null +++ b/src/lib/components/ui/pagination/index.ts @@ -0,0 +1,31 @@ +import Root from "./pagination.svelte"; +import Content from "./pagination-content.svelte"; +import Item from "./pagination-item.svelte"; +import Link from "./pagination-link.svelte"; +import PrevButton from "./pagination-prev-button.svelte"; +import NextButton from "./pagination-next-button.svelte"; +import Ellipsis from "./pagination-ellipsis.svelte"; +import Previous from "./pagination-previous.svelte"; +import Next from "./pagination-next.svelte"; + +export { + Root, + Content, + Item, + Link, + PrevButton, //old + NextButton, //old + Ellipsis, + Previous, + Next, + // + Root as Pagination, + Content as PaginationContent, + Item as PaginationItem, + Link as PaginationLink, + PrevButton as PaginationPrevButton, //old + NextButton as PaginationNextButton, //old + Ellipsis as PaginationEllipsis, + Previous as PaginationPrevious, + Next as PaginationNext, +}; diff --git a/src/lib/components/ui/pagination/pagination-content.svelte b/src/lib/components/ui/pagination/pagination-content.svelte new file mode 100644 index 0000000..e1124fc --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-content.svelte @@ -0,0 +1,20 @@ + + +

+ {@render children?.()} + diff --git a/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/src/lib/components/ui/pagination/pagination-ellipsis.svelte new file mode 100644 index 0000000..3be94c9 --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-ellipsis.svelte @@ -0,0 +1,22 @@ + + + diff --git a/src/lib/components/ui/pagination/pagination-item.svelte b/src/lib/components/ui/pagination/pagination-item.svelte new file mode 100644 index 0000000..fd7ffc3 --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-item.svelte @@ -0,0 +1,14 @@ + + +

+ {@render children?.()} +

diff --git a/src/lib/components/ui/pagination/pagination-link.svelte b/src/lib/components/ui/pagination/pagination-link.svelte new file mode 100644 index 0000000..58b1a5c --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-link.svelte @@ -0,0 +1,39 @@ + + +{#snippet Fallback()} + {page.value} +{/snippet} + + diff --git a/src/lib/components/ui/pagination/pagination-next-button.svelte b/src/lib/components/ui/pagination/pagination-next-button.svelte new file mode 100644 index 0000000..cc40ee3 --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-next-button.svelte @@ -0,0 +1,33 @@ + + +{#snippet Fallback()} + Next + +{/snippet} + + diff --git a/src/lib/components/ui/pagination/pagination-next.svelte b/src/lib/components/ui/pagination/pagination-next.svelte new file mode 100644 index 0000000..5bb37f7 --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-next.svelte @@ -0,0 +1,29 @@ + + + + Next + diff --git a/src/lib/components/ui/pagination/pagination-prev-button.svelte b/src/lib/components/ui/pagination/pagination-prev-button.svelte new file mode 100644 index 0000000..28caad5 --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-prev-button.svelte @@ -0,0 +1,33 @@ + + +{#snippet Fallback()} + + Previous +{/snippet} + + diff --git a/src/lib/components/ui/pagination/pagination-previous.svelte b/src/lib/components/ui/pagination/pagination-previous.svelte new file mode 100644 index 0000000..cf7c460 --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-previous.svelte @@ -0,0 +1,29 @@ + + + + + Previous diff --git a/src/lib/components/ui/pagination/pagination.svelte b/src/lib/components/ui/pagination/pagination.svelte new file mode 100644 index 0000000..60e3471 --- /dev/null +++ b/src/lib/components/ui/pagination/pagination.svelte @@ -0,0 +1,28 @@ + + +