add tailwindcss and shadcn

web/.prettierrc

@@ -1,5 +1,5 @@
 {
-  "useTabs": false,
+  "useTabs": true,
   "singleQuote": true,
   "trailingComma": "none",
   "printWidth": 100,
@@ -9,7 +9,6 @@
   "pluginSearchDirs": [
     "."
   ],
-  "tabWidth": 2,
   "overrides": [
     {
       "files": "*.svelte",

web/components.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app.postcss",
+    "baseColor": "gray"
+  },
+  "aliases": {
+    "components": "$lib/components",
+    "utils": "$lib/utils"
+  }
+}

web/package.json

@@ -8,20 +8,32 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest",
     "lint": "prettier --plugin-search-dir . --check .",
-    "format": "prettier --plugin-search-dir . --write .",
-    "start": "bun ./build/index.js"
+    "format": "prettier --plugin-search-dir . --write ."
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.20.4",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.24",
+    "postcss-load-config": "^4.0.1",
     "prettier": "^2.8.0",
     "prettier-plugin-svelte": "^2.10.1",
     "svelte": "^4.0.5",
     "svelte-check": "^3.4.3",
+    "tailwindcss": "^3.3.2",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
-    "vite": "^4.4.2"
+    "vite": "^4.4.2",
+    "vitest": "^0.34.0"
   },
-  "type": "module"
-}
+  "type": "module",
+  "dependencies": {
+    "bits-ui": "^0.9.0",
+    "clsx": "^2.0.0",
+    "lucide-svelte": "^0.292.0",
+    "tailwind-merge": "^2.0.0",
+    "tailwind-variants": "^0.1.18"
+  }
+}

web/postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer
+  ]
+};
+
+module.exports = config;

web/src/app.postcss

@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+ 
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
+ 
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+ 
+    --primary: 220.9 39.3% 11%;
+    --primary-foreground: 210 20% 98%;
+ 
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+ 
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 20% 98%;
+ 
+    --ring: 224 71.4% 4.1%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+ 
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+ 
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
+ 
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
+ 
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+ 
+    --primary: 210 20% 98%;
+    --primary-foreground: 220.9 39.3% 11%;
+ 
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+ 
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
+ 
+    --ring: 216 12.2% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

web/src/index.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest';
+
+describe('sum test', () => {
+  it('adds 1 + 2 to equal 3', () => {
+    expect(1 + 2).toBe(3);
+  });
+});

web/src/lib/components/ui/button/button.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+  import { buttonVariants, type Events, type Props } from '.';
+
+  type $$Props = Props;
+  type $$Events = Events;
+
+  let className: $$Props['class'] = undefined;
+  export let variant: $$Props['variant'] = 'default';
+  export let size: $$Props['size'] = 'default';
+  export let builders: $$Props['builders'] = [];
+  export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+  {builders}
+  class={cn(buttonVariants({ variant, size, className }))}
+  type="button"
+  {...$$restProps}
+  on:click
+  on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>

web/src/lib/components/ui/button/index.ts

@@ -0,0 +1,51 @@
+import Root from './button.svelte';
+import { tv, type VariantProps } from 'tailwind-variants';
+import type { Button as ButtonPrimitive } from 'bits-ui';
+
+const buttonVariants = tv({
+  base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  variants: {
+    variant: {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      destructive:
+        'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      outline:
+        'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+      secondary:
+        'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      ghost: 'hover:bg-accent hover:text-accent-foreground',
+      link: 'text-primary underline-offset-4 hover:underline'
+    },
+    size: {
+      default: 'h-10 px-4 py-2',
+      sm: 'h-9 rounded-md px-3',
+      lg: 'h-11 rounded-md px-8',
+      icon: 'h-10 w-10'
+    }
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default'
+  }
+});
+
+type Variant = VariantProps<typeof buttonVariants>['variant'];
+type Size = VariantProps<typeof buttonVariants>['size'];
+
+type Props = ButtonPrimitive.Props & {
+  variant?: Variant;
+  size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+  Root,
+  type Props,
+  type Events,
+  //
+  Root as Button,
+  type Props as ButtonProps,
+  type Events as ButtonEvents,
+  buttonVariants
+};

web/src/lib/utils.ts

@@ -0,0 +1,62 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cubicOut } from 'svelte/easing';
+import type { TransitionConfig } from 'svelte/transition';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+type FlyAndScaleParams = {
+  y?: number;
+  x?: number;
+  start?: number;
+  duration?: number;
+};
+
+export const flyAndScale = (
+  node: Element,
+  params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+): TransitionConfig => {
+  const style = getComputedStyle(node);
+  const transform = style.transform === 'none' ? '' : style.transform;
+
+  const scaleConversion = (
+    valueA: number,
+    scaleA: [ number, number ],
+    scaleB: [ number, number ]
+  ) => {
+    const [ minA, maxA ] = scaleA;
+    const [ minB, maxB ] = scaleB;
+
+    const percentage = (valueA - minA) / (maxA - minA);
+    const valueB = percentage * (maxB - minB) + minB;
+
+    return valueB;
+  };
+
+  const styleToString = (
+    style: Record<string, number | string | undefined>
+  ): string => {
+    return Object.keys(style).reduce((str, key) => {
+      if (style[key] === undefined) return str;
+      return str + `${key}:${style[key]};`;
+    }, '');
+  };
+
+  return {
+    duration: params.duration ?? 200,
+    delay: 0,
+    css: (t) => {
+      const y = scaleConversion(t, [ 0, 1 ], [ params.y ?? 5, 0 ]);
+      const x = scaleConversion(t, [ 0, 1 ], [ params.x ?? 0, 0 ]);
+      const scale = scaleConversion(t, [ 0, 1 ], [ params.start ?? 0.95, 1 ]);
+
+      return styleToString({
+        transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+        opacity: t
+      });
+    },
+    easing: cubicOut
+  };
+};

web/src/routes/+layout.svelte

@@ -0,0 +1 @@
+<script>import '../app.postcss';</script><slot></slot>

web/src/routes/+page.svelte

@@ -1,2 +1,8 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button';
+</script>
+
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+<Button variant="outline">Button</Button>

web/svelte.config.js

@@ -3,16 +3,19 @@ import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
-  // for more information about preprocessors
-  preprocess: vitePreprocess(),
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: [ vitePreprocess({}) ],
 
-  kit: {
-    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
-    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
-    adapter: adapter()
-  }
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter(),
+		alias: {
+			$lib: './src/lib'
+		}
+	}
 };
 
 export default config;

web/tailwind.config.js

@@ -0,0 +1,64 @@
+import { fontFamily } from 'tailwindcss/defaultTheme';
+
+/** @type {import('tailwindcss').Config} */
+const 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) / <alpha-value>)',
+        input: 'hsl(var(--input) / <alpha-value>)',
+        ring: 'hsl(var(--ring) / <alpha-value>)',
+        background: 'hsl(var(--background) / <alpha-value>)',
+        foreground: 'hsl(var(--foreground) / <alpha-value>)',
+        primary: {
+          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
+          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
+          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
+          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
+          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
+          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
+          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
+          foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
+        }
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)'
+      },
+      fontFamily: {
+        sans: [ ...fontFamily.sans ]
+      }
+    }
+  }
+};
+
+export default config;

web/vite.config.ts

@@ -1,6 +1,9 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-  plugins: [ sveltekit() ]
+  plugins: [ sveltekit() ],
+  test: {
+    include: [ 'src/**/*.{test,spec}.{js,ts}' ]
+  }
 });