From faa9047ea83bafb3e5245d4c77990e3f128ad851 Mon Sep 17 00:00:00 2001 From: MrExplode Date: Sat, 2 Nov 2024 19:56:07 +0100 Subject: [PATCH] feat(web): add shadcn and some components --- webapp/.prettierignore | 2 + webapp/components.json | 17 +++ webapp/package.json | 5 + webapp/pnpm-lock.yaml | 135 ++++++++++++++++++ webapp/src/app.css | 78 +++++++++- .../lib/components/ui/button/button.svelte | 74 ++++++++++ webapp/src/lib/components/ui/button/index.ts | 17 +++ .../components/ui/card/card-content.svelte | 16 +++ .../ui/card/card-description.svelte | 16 +++ .../lib/components/ui/card/card-footer.svelte | 16 +++ .../lib/components/ui/card/card-header.svelte | 16 +++ .../lib/components/ui/card/card-title.svelte | 25 ++++ webapp/src/lib/components/ui/card/card.svelte | 20 +++ webapp/src/lib/components/ui/card/index.ts | 22 +++ webapp/src/lib/components/ui/slider/index.ts | 7 + .../lib/components/ui/slider/slider.svelte | 30 ++++ webapp/src/lib/components/ui/switch/index.ts | 7 + .../lib/components/ui/switch/switch.svelte | 27 ++++ webapp/src/lib/components/ui/table/index.ts | 28 ++++ .../lib/components/ui/table/table-body.svelte | 16 +++ .../components/ui/table/table-caption.svelte | 16 +++ .../lib/components/ui/table/table-cell.svelte | 20 +++ .../components/ui/table/table-footer.svelte | 20 +++ .../lib/components/ui/table/table-head.svelte | 23 +++ .../components/ui/table/table-header.svelte | 16 +++ .../lib/components/ui/table/table-row.svelte | 23 +++ .../src/lib/components/ui/table/table.svelte | 18 +++ webapp/src/lib/components/ui/tooltip/index.ts | 18 +++ .../ui/tooltip/tooltip-content.svelte | 21 +++ webapp/src/lib/utils.ts | 6 + webapp/svelte.config.js | 7 +- webapp/tailwind.config.ts | 103 +++++++++++-- 32 files changed, 852 insertions(+), 13 deletions(-) create mode 100644 webapp/components.json create mode 100644 webapp/src/lib/components/ui/button/button.svelte create mode 100644 webapp/src/lib/components/ui/button/index.ts create mode 100644 webapp/src/lib/components/ui/card/card-content.svelte create mode 100644 webapp/src/lib/components/ui/card/card-description.svelte create mode 100644 webapp/src/lib/components/ui/card/card-footer.svelte create mode 100644 webapp/src/lib/components/ui/card/card-header.svelte create mode 100644 webapp/src/lib/components/ui/card/card-title.svelte create mode 100644 webapp/src/lib/components/ui/card/card.svelte create mode 100644 webapp/src/lib/components/ui/card/index.ts create mode 100644 webapp/src/lib/components/ui/slider/index.ts create mode 100644 webapp/src/lib/components/ui/slider/slider.svelte create mode 100644 webapp/src/lib/components/ui/switch/index.ts create mode 100644 webapp/src/lib/components/ui/switch/switch.svelte create mode 100644 webapp/src/lib/components/ui/table/index.ts create mode 100644 webapp/src/lib/components/ui/table/table-body.svelte create mode 100644 webapp/src/lib/components/ui/table/table-caption.svelte create mode 100644 webapp/src/lib/components/ui/table/table-cell.svelte create mode 100644 webapp/src/lib/components/ui/table/table-footer.svelte create mode 100644 webapp/src/lib/components/ui/table/table-head.svelte create mode 100644 webapp/src/lib/components/ui/table/table-header.svelte create mode 100644 webapp/src/lib/components/ui/table/table-row.svelte create mode 100644 webapp/src/lib/components/ui/table/table.svelte create mode 100644 webapp/src/lib/components/ui/tooltip/index.ts create mode 100644 webapp/src/lib/components/ui/tooltip/tooltip-content.svelte create mode 100644 webapp/src/lib/utils.ts diff --git a/webapp/.prettierignore b/webapp/.prettierignore index ab78a95..2422a9a 100644 --- a/webapp/.prettierignore +++ b/webapp/.prettierignore @@ -2,3 +2,5 @@ package-lock.json pnpm-lock.yaml yarn.lock + +svelte.config.js \ No newline at end of file diff --git a/webapp/components.json b/webapp/components.json new file mode 100644 index 0000000..030f3eb --- /dev/null +++ b/webapp/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://next.shadcn-svelte.com/schema.json", + "style": "default", + "tailwind": { + "config": "tailwind.config.ts", + "css": "src\\app.css", + "baseColor": "slate" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils", + "ui": "$lib/components/ui", + "hooks": "$lib/hooks" + }, + "typescript": true, + "registry": "https://next.shadcn-svelte.com/registry" +} \ No newline at end of file diff --git a/webapp/package.json b/webapp/package.json index e178640..5db5fdf 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -21,6 +21,8 @@ "@sveltejs/vite-plugin-svelte": "^4.0.0", "@types/eslint": "^9.6.0", "autoprefixer": "^10.4.20", + "bits-ui": "1.0.0-next.37", + "clsx": "^2.1.1", "eslint": "^9.7.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-svelte": "^2.36.0", @@ -30,7 +32,10 @@ "prettier-plugin-tailwindcss": "^0.6.5", "svelte": "^5.0.0", "svelte-check": "^4.0.0", + "tailwind-merge": "^2.5.4", + "tailwind-variants": "^0.2.1", "tailwindcss": "^3.4.9", + "tailwindcss-animate": "^1.0.7", "typescript": "^5.0.0", "typescript-eslint": "^8.0.0", "vite": "^5.0.3", diff --git a/webapp/pnpm-lock.yaml b/webapp/pnpm-lock.yaml index 63fea4d..8f39e69 100644 --- a/webapp/pnpm-lock.yaml +++ b/webapp/pnpm-lock.yaml @@ -26,6 +26,12 @@ importers: autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.4.47) + bits-ui: + specifier: 1.0.0-next.37 + version: 1.0.0-next.37(svelte@5.1.9) + clsx: + specifier: ^2.1.1 + version: 2.1.1 eslint: specifier: ^9.7.0 version: 9.14.0(jiti@1.21.6) @@ -53,9 +59,18 @@ importers: svelte-check: specifier: ^4.0.0 version: 4.0.5(svelte@5.1.9)(typescript@5.6.3) + tailwind-merge: + specifier: ^2.5.4 + version: 2.5.4 + tailwind-variants: + specifier: ^0.2.1 + version: 0.2.1(tailwindcss@3.4.14) tailwindcss: specifier: ^3.4.9 version: 3.4.14 + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.14) typescript: specifier: ^5.0.0 version: 5.6.3 @@ -251,6 +266,15 @@ packages: resolution: {integrity: sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@floating-ui/core@1.6.8': + resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==} + + '@floating-ui/dom@1.6.12': + resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==} + + '@floating-ui/utils@0.2.8': + resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} + '@humanfs/core@0.19.1': resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==} engines: {node: '>=18.18.0'} @@ -271,6 +295,9 @@ packages: resolution: {integrity: sha512-xnRgu9DxZbkWak/te3fcytNyp8MTbuiZIaueg2rgEvBuN55n04nwLYLU9TX/VVlusc9L2ZNXi99nUFNkHXtr5g==} engines: {node: '>=18.18'} + '@internationalized/date@3.5.6': + resolution: {integrity: sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==} + '@isaacs/cliui@8.0.2': resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -436,6 +463,9 @@ packages: svelte: ^5.0.0-next.96 || ^5.0.0 vite: ^5.0.0 + '@swc/helpers@0.5.13': + resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==} + '@types/cookie@0.6.0': resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} @@ -607,6 +637,12 @@ packages: resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==} engines: {node: '>=8'} + bits-ui@1.0.0-next.37: + resolution: {integrity: sha512-ZoL086VSQ0Aruzh3keWNTZwtt+PslS17f47uUXwP4V0V4nUyHM5/Kn/dZ4juRAlHUPqTvFCb/Qo0RCKuqAe6/g==} + engines: {node: '>=18', pnpm: '>=8.7.0'} + peerDependencies: + svelte: ^5.0.0-next.1 + brace-expansion@1.1.11: resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} @@ -657,6 +693,10 @@ packages: resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==} engines: {node: '>= 14.16.0'} + clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} engines: {node: '>=7.0.0'} @@ -938,6 +978,9 @@ packages: resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} engines: {node: '>=0.8.19'} + inline-style-parser@0.2.4: + resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==} + is-binary-path@2.1.0: resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} engines: {node: '>=8'} @@ -1331,6 +1374,11 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} + runed@0.15.3: + resolution: {integrity: sha512-HtayB+loDcGdqJDHW8JFdsZzGQMyVzim6+s3052MkjZnwmwDstmF+cusMeTssBe6TCdt5i9D/Tb+KYXN3L0kXA==} + peerDependencies: + svelte: ^5.0.0-next.1 + sade@1.8.1: resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==} engines: {node: '>=6'} @@ -1392,6 +1440,9 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} + style-to-object@1.0.8: + resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==} + sucrase@3.35.0: resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==} engines: {node: '>=16 || 14 >=14.17'} @@ -1422,10 +1473,30 @@ packages: svelte: optional: true + svelte-toolbelt@0.4.6: + resolution: {integrity: sha512-k8OUvXBUifHZcAlWeY/HLg/4J0v5m2iOfOhn8fDmjt4AP8ZluaDh9eBFus9lFiLX6O5l6vKqI1dKL5wy7090NQ==} + engines: {node: '>=18', pnpm: '>=8.7.0'} + peerDependencies: + svelte: ^5.0.0-next.126 + svelte@5.1.9: resolution: {integrity: sha512-nzq+PPKGS2PoEWDjAcXSrKSbXmmmOAxd6dAz1IhRusUpVkFS6DMELWPyBPGwu6TpO/gsgtFXwX0M4+pAR5gzKw==} engines: {node: '>=18'} + tailwind-merge@2.5.4: + resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==} + + tailwind-variants@0.2.1: + resolution: {integrity: sha512-2xmhAf4UIc3PijOUcJPA1LP4AbxhpcHuHM2C26xM0k81r0maAO6uoUSHl3APmvHZcY5cZCY/bYuJdfFa4eGoaw==} + engines: {node: '>=16.x', pnpm: '>=7.x'} + peerDependencies: + tailwindcss: '*' + + tailwindcss-animate@1.0.7: + resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} + peerDependencies: + tailwindcss: '>=3.0.0 || insiders' + tailwindcss@3.4.14: resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==} engines: {node: '>=14.0.0'} @@ -1479,6 +1550,9 @@ packages: ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} + tslib@2.8.1: + resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} + type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} engines: {node: '>= 0.8.0'} @@ -1733,6 +1807,17 @@ snapshots: dependencies: levn: 0.4.1 + '@floating-ui/core@1.6.8': + dependencies: + '@floating-ui/utils': 0.2.8 + + '@floating-ui/dom@1.6.12': + dependencies: + '@floating-ui/core': 1.6.8 + '@floating-ui/utils': 0.2.8 + + '@floating-ui/utils@0.2.8': {} + '@humanfs/core@0.19.1': {} '@humanfs/node@0.16.6': @@ -1746,6 +1831,10 @@ snapshots: '@humanwhocodes/retry@0.4.0': {} + '@internationalized/date@3.5.6': + dependencies: + '@swc/helpers': 0.5.13 + '@isaacs/cliui@8.0.2': dependencies: string-width: 5.1.2 @@ -1891,6 +1980,10 @@ snapshots: transitivePeerDependencies: - supports-color + '@swc/helpers@0.5.13': + dependencies: + tslib: 2.8.1 + '@types/cookie@0.6.0': {} '@types/eslint@9.6.1': @@ -2081,6 +2174,16 @@ snapshots: binary-extensions@2.3.0: {} + bits-ui@1.0.0-next.37(svelte@5.1.9): + dependencies: + '@floating-ui/core': 1.6.8 + '@floating-ui/dom': 1.6.12 + '@internationalized/date': 3.5.6 + esm-env: 1.1.4 + runed: 0.15.3(svelte@5.1.9) + svelte: 5.1.9 + svelte-toolbelt: 0.4.6(svelte@5.1.9) + brace-expansion@1.1.11: dependencies: balanced-match: 1.0.2 @@ -2140,6 +2243,8 @@ snapshots: dependencies: readdirp: 4.0.2 + clsx@2.1.1: {} + color-convert@2.0.1: dependencies: color-name: 1.1.4 @@ -2434,6 +2539,8 @@ snapshots: imurmurhash@0.1.4: {} + inline-style-parser@0.2.4: {} + is-binary-path@2.1.0: dependencies: binary-extensions: 2.3.0 @@ -2727,6 +2834,11 @@ snapshots: dependencies: queue-microtask: 1.2.3 + runed@0.15.3(svelte@5.1.9): + dependencies: + esm-env: 1.1.4 + svelte: 5.1.9 + sade@1.8.1: dependencies: mri: 1.2.0 @@ -2779,6 +2891,10 @@ snapshots: strip-json-comments@3.1.1: {} + style-to-object@1.0.8: + dependencies: + inline-style-parser: 0.2.4 + sucrase@3.35.0: dependencies: '@jridgewell/gen-mapping': 0.3.5 @@ -2817,6 +2933,12 @@ snapshots: optionalDependencies: svelte: 5.1.9 + svelte-toolbelt@0.4.6(svelte@5.1.9): + dependencies: + clsx: 2.1.1 + style-to-object: 1.0.8 + svelte: 5.1.9 + svelte@5.1.9: dependencies: '@ampproject/remapping': 2.3.0 @@ -2833,6 +2955,17 @@ snapshots: magic-string: 0.30.12 zimmerframe: 1.1.2 + tailwind-merge@2.5.4: {} + + tailwind-variants@0.2.1(tailwindcss@3.4.14): + dependencies: + tailwind-merge: 2.5.4 + tailwindcss: 3.4.14 + + tailwindcss-animate@1.0.7(tailwindcss@3.4.14): + dependencies: + tailwindcss: 3.4.14 + tailwindcss@3.4.14: dependencies: '@alloc/quick-lru': 5.2.0 @@ -2897,6 +3030,8 @@ snapshots: ts-interface-checker@0.1.13: {} + tslib@2.8.1: {} + type-check@0.4.0: dependencies: prelude-ls: 1.2.1 diff --git a/webapp/src/app.css b/webapp/src/app.css index a31e444..c87c27b 100644 --- a/webapp/src/app.css +++ b/webapp/src/app.css @@ -1,3 +1,75 @@ -@import 'tailwindcss/base'; -@import 'tailwindcss/components'; -@import 'tailwindcss/utilities'; +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --destructive: 0 72.2% 50.6%; + --destructive-foreground: 210 40% 98%; + --ring: 222.2 84% 4.9%; + --radius: 0.5rem; + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; + } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + --ring: 212.7 26.8% 83.9%; + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} \ No newline at end of file diff --git a/webapp/src/lib/components/ui/button/button.svelte b/webapp/src/lib/components/ui/button/button.svelte new file mode 100644 index 0000000..8f44d5c --- /dev/null +++ b/webapp/src/lib/components/ui/button/button.svelte @@ -0,0 +1,74 @@ + + + + +{#if href} + + {@render children?.()} + +{:else} + +{/if} diff --git a/webapp/src/lib/components/ui/button/index.ts b/webapp/src/lib/components/ui/button/index.ts new file mode 100644 index 0000000..fb585d7 --- /dev/null +++ b/webapp/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/webapp/src/lib/components/ui/card/card-content.svelte b/webapp/src/lib/components/ui/card/card-content.svelte new file mode 100644 index 0000000..1f52856 --- /dev/null +++ b/webapp/src/lib/components/ui/card/card-content.svelte @@ -0,0 +1,16 @@ + + +
+ {@render children?.()} +
diff --git a/webapp/src/lib/components/ui/card/card-description.svelte b/webapp/src/lib/components/ui/card/card-description.svelte new file mode 100644 index 0000000..da02664 --- /dev/null +++ b/webapp/src/lib/components/ui/card/card-description.svelte @@ -0,0 +1,16 @@ + + +

+ {@render children?.()} +

diff --git a/webapp/src/lib/components/ui/card/card-footer.svelte b/webapp/src/lib/components/ui/card/card-footer.svelte new file mode 100644 index 0000000..6894149 --- /dev/null +++ b/webapp/src/lib/components/ui/card/card-footer.svelte @@ -0,0 +1,16 @@ + + +
+ {@render children?.()} +
diff --git a/webapp/src/lib/components/ui/card/card-header.svelte b/webapp/src/lib/components/ui/card/card-header.svelte new file mode 100644 index 0000000..1baa92c --- /dev/null +++ b/webapp/src/lib/components/ui/card/card-header.svelte @@ -0,0 +1,16 @@ + + +
+ {@render children?.()} +
diff --git a/webapp/src/lib/components/ui/card/card-title.svelte b/webapp/src/lib/components/ui/card/card-title.svelte new file mode 100644 index 0000000..aa4f7f8 --- /dev/null +++ b/webapp/src/lib/components/ui/card/card-title.svelte @@ -0,0 +1,25 @@ + + +
+ {@render children?.()} +
diff --git a/webapp/src/lib/components/ui/card/card.svelte b/webapp/src/lib/components/ui/card/card.svelte new file mode 100644 index 0000000..3e3a4ed --- /dev/null +++ b/webapp/src/lib/components/ui/card/card.svelte @@ -0,0 +1,20 @@ + + +
+ {@render children?.()} +
diff --git a/webapp/src/lib/components/ui/card/index.ts b/webapp/src/lib/components/ui/card/index.ts new file mode 100644 index 0000000..0f9084d --- /dev/null +++ b/webapp/src/lib/components/ui/card/index.ts @@ -0,0 +1,22 @@ +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"; + +export { + Root, + Content, + Description, + Footer, + Header, + Title, + // + Root as Card, + Content as CardContent, + Description as CardDescription, + Footer as CardFooter, + Header as CardHeader, + Title as CardTitle, +}; diff --git a/webapp/src/lib/components/ui/slider/index.ts b/webapp/src/lib/components/ui/slider/index.ts new file mode 100644 index 0000000..820f209 --- /dev/null +++ b/webapp/src/lib/components/ui/slider/index.ts @@ -0,0 +1,7 @@ +import Root from "./slider.svelte"; + +export { + Root, + // + Root as Slider, +}; diff --git a/webapp/src/lib/components/ui/slider/slider.svelte b/webapp/src/lib/components/ui/slider/slider.svelte new file mode 100644 index 0000000..3f466b7 --- /dev/null +++ b/webapp/src/lib/components/ui/slider/slider.svelte @@ -0,0 +1,30 @@ + + + + {#snippet children({ thumbs })} + + + + {#each thumbs as thumb} + + {/each} + {/snippet} + diff --git a/webapp/src/lib/components/ui/switch/index.ts b/webapp/src/lib/components/ui/switch/index.ts new file mode 100644 index 0000000..f5533db --- /dev/null +++ b/webapp/src/lib/components/ui/switch/index.ts @@ -0,0 +1,7 @@ +import Root from "./switch.svelte"; + +export { + Root, + // + Root as Switch, +}; diff --git a/webapp/src/lib/components/ui/switch/switch.svelte b/webapp/src/lib/components/ui/switch/switch.svelte new file mode 100644 index 0000000..eb54154 --- /dev/null +++ b/webapp/src/lib/components/ui/switch/switch.svelte @@ -0,0 +1,27 @@ + + + + + diff --git a/webapp/src/lib/components/ui/table/index.ts b/webapp/src/lib/components/ui/table/index.ts new file mode 100644 index 0000000..14695c8 --- /dev/null +++ b/webapp/src/lib/components/ui/table/index.ts @@ -0,0 +1,28 @@ +import Root from "./table.svelte"; +import Body from "./table-body.svelte"; +import Caption from "./table-caption.svelte"; +import Cell from "./table-cell.svelte"; +import Footer from "./table-footer.svelte"; +import Head from "./table-head.svelte"; +import Header from "./table-header.svelte"; +import Row from "./table-row.svelte"; + +export { + Root, + Body, + Caption, + Cell, + Footer, + Head, + Header, + Row, + // + Root as Table, + Body as TableBody, + Caption as TableCaption, + Cell as TableCell, + Footer as TableFooter, + Head as TableHead, + Header as TableHeader, + Row as TableRow, +}; diff --git a/webapp/src/lib/components/ui/table/table-body.svelte b/webapp/src/lib/components/ui/table/table-body.svelte new file mode 100644 index 0000000..6c20c01 --- /dev/null +++ b/webapp/src/lib/components/ui/table/table-body.svelte @@ -0,0 +1,16 @@ + + + + {@render children?.()} + diff --git a/webapp/src/lib/components/ui/table/table-caption.svelte b/webapp/src/lib/components/ui/table/table-caption.svelte new file mode 100644 index 0000000..2b0cba5 --- /dev/null +++ b/webapp/src/lib/components/ui/table/table-caption.svelte @@ -0,0 +1,16 @@ + + + + {@render children?.()} + diff --git a/webapp/src/lib/components/ui/table/table-cell.svelte b/webapp/src/lib/components/ui/table/table-cell.svelte new file mode 100644 index 0000000..0536552 --- /dev/null +++ b/webapp/src/lib/components/ui/table/table-cell.svelte @@ -0,0 +1,20 @@ + + + + {@render children?.()} + diff --git a/webapp/src/lib/components/ui/table/table-footer.svelte b/webapp/src/lib/components/ui/table/table-footer.svelte new file mode 100644 index 0000000..68266ce --- /dev/null +++ b/webapp/src/lib/components/ui/table/table-footer.svelte @@ -0,0 +1,20 @@ + + + + {@render children?.()} + diff --git a/webapp/src/lib/components/ui/table/table-head.svelte b/webapp/src/lib/components/ui/table/table-head.svelte new file mode 100644 index 0000000..5300ce6 --- /dev/null +++ b/webapp/src/lib/components/ui/table/table-head.svelte @@ -0,0 +1,23 @@ + + + + {@render children?.()} + diff --git a/webapp/src/lib/components/ui/table/table-header.svelte b/webapp/src/lib/components/ui/table/table-header.svelte new file mode 100644 index 0000000..684a57b --- /dev/null +++ b/webapp/src/lib/components/ui/table/table-header.svelte @@ -0,0 +1,16 @@ + + + + {@render children?.()} + diff --git a/webapp/src/lib/components/ui/table/table-row.svelte b/webapp/src/lib/components/ui/table/table-row.svelte new file mode 100644 index 0000000..9e693bc --- /dev/null +++ b/webapp/src/lib/components/ui/table/table-row.svelte @@ -0,0 +1,23 @@ + + + + {@render children?.()} + diff --git a/webapp/src/lib/components/ui/table/table.svelte b/webapp/src/lib/components/ui/table/table.svelte new file mode 100644 index 0000000..e3a95b6 --- /dev/null +++ b/webapp/src/lib/components/ui/table/table.svelte @@ -0,0 +1,18 @@ + + +
+ + {@render children?.()} +
+
diff --git a/webapp/src/lib/components/ui/tooltip/index.ts b/webapp/src/lib/components/ui/tooltip/index.ts new file mode 100644 index 0000000..e9e1fd7 --- /dev/null +++ b/webapp/src/lib/components/ui/tooltip/index.ts @@ -0,0 +1,18 @@ +import { Tooltip as TooltipPrimitive } from "bits-ui"; +import Content from "./tooltip-content.svelte"; + +const Root = TooltipPrimitive.Root; +const Trigger = TooltipPrimitive.Trigger; +const Provider = TooltipPrimitive.Provider; + +export { + Root, + Trigger, + Content, + Provider, + // + Root as Tooltip, + Content as TooltipContent, + Trigger as TooltipTrigger, + Provider as TooltipProvider, +}; diff --git a/webapp/src/lib/components/ui/tooltip/tooltip-content.svelte b/webapp/src/lib/components/ui/tooltip/tooltip-content.svelte new file mode 100644 index 0000000..68ff232 --- /dev/null +++ b/webapp/src/lib/components/ui/tooltip/tooltip-content.svelte @@ -0,0 +1,21 @@ + + + diff --git a/webapp/src/lib/utils.ts b/webapp/src/lib/utils.ts new file mode 100644 index 0000000..ac680b3 --- /dev/null +++ b/webapp/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/webapp/svelte.config.js b/webapp/svelte.config.js index f794cb1..eef033b 100644 --- a/webapp/svelte.config.js +++ b/webapp/svelte.config.js @@ -13,7 +13,12 @@ const config = { // See https://svelte.dev/docs/kit/adapters for more information about adapters. adapter: adapter({ fallback: 'index.html' - }) + }), + alias: { + "$components": "./src/lib/components", + "$utils": "./src/lib/utils", + "@/*": "./src/lib/components/*" + } } } diff --git a/webapp/tailwind.config.ts b/webapp/tailwind.config.ts index 1eb9744..23fa874 100644 --- a/webapp/tailwind.config.ts +++ b/webapp/tailwind.config.ts @@ -1,11 +1,96 @@ -import type { Config } from 'tailwindcss' +import { fontFamily } from "tailwindcss/defaultTheme"; +import type { Config } from "tailwindcss"; +import tailwindcssAnimate from "tailwindcss-animate"; -export default { - content: ['./src/**/*.{html,js,svelte,ts}'], +const config: Config = { + darkMode: ["class"], + content: ["./src/**/*.{html,js,svelte,ts}"], + safelist: ["dark"], + theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px" + } + }, + extend: { + colors: { + border: "hsl(var(--border) / )", + input: "hsl(var(--input) / )", + ring: "hsl(var(--ring) / )", + background: "hsl(var(--background) / )", + foreground: "hsl(var(--foreground) / )", + primary: { + DEFAULT: "hsl(var(--primary) / )", + foreground: "hsl(var(--primary-foreground) / )" + }, + secondary: { + DEFAULT: "hsl(var(--secondary) / )", + foreground: "hsl(var(--secondary-foreground) / )" + }, + destructive: { + DEFAULT: "hsl(var(--destructive) / )", + foreground: "hsl(var(--destructive-foreground) / )" + }, + muted: { + DEFAULT: "hsl(var(--muted) / )", + foreground: "hsl(var(--muted-foreground) / )" + }, + accent: { + DEFAULT: "hsl(var(--accent) / )", + foreground: "hsl(var(--accent-foreground) / )" + }, + popover: { + DEFAULT: "hsl(var(--popover) / )", + foreground: "hsl(var(--popover-foreground) / )" + }, + card: { + DEFAULT: "hsl(var(--card) / )", + foreground: "hsl(var(--card-foreground) / )" + }, + sidebar: { + DEFAULT: "hsl(var(--sidebar-background))", + foreground: "hsl(var(--sidebar-foreground))", + primary: "hsl(var(--sidebar-primary))", + "primary-foreground": "hsl(var(--sidebar-primary-foreground))", + accent: "hsl(var(--sidebar-accent))", + "accent-foreground": "hsl(var(--sidebar-accent-foreground))", + border: "hsl(var(--sidebar-border))", + ring: "hsl(var(--sidebar-ring))", + }, + }, + borderRadius: { + xl: "calc(var(--radius) + 4px)", + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)" + }, + fontFamily: { + sans: [...fontFamily.sans] + }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + "caret-blink": { + "0%,70%,100%": { opacity: "1" }, + "20%,50%": { opacity: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + "caret-blink": "caret-blink 1.25s ease-out infinite", + }, + }, + }, + plugins: [tailwindcssAnimate], +}; - theme: { - extend: {} - }, - - plugins: [] -} satisfies Config +export default config;