feat: setup tests and structure

.gitignore

@@ -1,11 +1,12 @@
 .DS_Store
 node_modules
 /build
+/coverage
 /dist
 /.svelte-kit
 /package
 .env
 .env.*
 !.env.example
 vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+vite.config.ts.timestamp-*

package.json

@@ -2,17 +2,21 @@
   "name": "@whizzes/exo",
   "version": "0.0.1",
   "scripts": {
-    "dev": "vite dev",
     "build": "vite build && npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "vite dev",
+    "format": "rome format --write ./src && rome check --apply ./src",
+    "format:unsafe": "rome format --write ./src && rome check --apply-unsafe ./src",
+    "lint": "rome format ./src && rome check ./src",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
     "prepublishOnly": "npm run package",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "story:dev": "histoire dev",
     "story:build": "histoire build",
+    "story:dev": "histoire dev",
     "story:preview": "histoire preview --port 4567",
-    "test:unit": "vitest"
+    "test": "vitest run",
+    "test:coverage": "vitest --config ./vite.config.ts run --coverage"
   },
   "exports": {
     ".": {
@@ -29,14 +33,19 @@
     "svelte": "^3.54.0"
   },
   "devDependencies": {
+    "@fontsource-variable/inter": "^5.0.2",
     "@histoire/plugin-svelte": "^0.16.1",
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.5.0",
     "@sveltejs/package": "^2.0.0",
+    "@tailwindcss/forms": "^0.5.3",
+    "@vitest/coverage-c8": "^0.31.4",
     "histoire": "^0.16.1",
     "publint": "^0.1.9",
+    "rome": "^12.1.3",
     "svelte": "^3.54.0",
     "svelte-check": "^3.0.1",
+    "tailwindcss": "^3.3.2",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "vite": "^4.3.0",
@@ -46,6 +55,7 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@fontsource/fira-mono": "^5.0.2"
+    "@fontsource/fira-mono": "^5.0.2",
+    "classnames": "^2.3.2"
   }
 }

rome.json

@@ -0,0 +1,21 @@
+{
+	"$schema": "https://docs.rome.tools/schemas/12.1.2/schema.json",
+	"organizeImports": {
+		"enabled": false
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "space"
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single"
+		}
+	}
+}

src/app.d.ts

@@ -1,12 +1,12 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface Platform {}
-	}
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
 }
 
 export {};

src/histoire.setup.ts

@@ -1 +1 @@
-import './histoire.css'
+import './histoire.css';

src/routes/stories/Counter.story.svelte → src/lib/components/TextField/TextField.story.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import Counter from '$lib/components/Counter.svelte';
+  import TextField from './TextField.svelte';
 
   import type { Hst as Histoire } from '@histoire/plugin-svelte';
 
   export let Hst: Histoire;
 </script>
 
 <Hst.Story>
-  <Counter />
+  <TextField />
 </Hst.Story>

src/lib/components/TextField/TextField.svelte

@@ -0,0 +1,101 @@
+<script lang="ts" context="module">
+  export enum TextInputVariant {
+    Default,
+    Transparent
+  }
+</script>
+
+<script lang="ts">
+  import classNames from 'classnames';
+  import { createEventDispatcher } from 'svelte';
+
+  // import Warning from '~icons/custom/warning';
+
+  export let autoComplete: string | undefined = undefined;
+  export let error: string | undefined = undefined;
+  export let label: string | undefined = undefined;
+  export let name: string;
+  export let placeholder: string | undefined = undefined;
+  export let tabIndex: number | undefined = undefined;
+  export let type: 'text' | 'email' | 'tel' | 'password' | 'number' = 'text';
+  export let required = false;
+  export let step: string | undefined = undefined;
+  export let value: string | number | undefined;
+  export let variant: TextInputVariant = TextInputVariant.Default;
+  export let disabled = false;
+  export let className = '';
+  export let icon: any = undefined;
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+  const TEXT_FIELD_INPUT_CLASS = classNames(
+    variant === TextInputVariant.Default &&
+      'border border-gray-300 focus:ring-blue-500 focus:border-blue-500 rounded-lg',
+    'bg-gray-50 text-gray-900 text-sm block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500',
+    type === 'number' && 'font-mono',
+    className
+  );
+
+  const TEXT_FIELD_CLASS_NAMES =
+    'relative transition-[background-color] transition-[box-shadow] duration-200 h-[44px] min-w-full w-full rounded-md inline-flex';
+
+  const inputContainerClassNames = classNames(
+    TEXT_FIELD_CLASS_NAMES,
+    !!error && 'border-rose-200!'
+  );
+
+  const handleInput = (event: Event): void => {
+    const target = event.target as HTMLInputElement;
+    value = type.match(/^(number|range)$/) ? +target.value : target.value;
+    dispatch('input', {
+      value
+    });
+  };
+
+  const handleIconClick = (): void => {
+    dispatch('clickIcon');
+  };
+</script>
+
+<div class="flex flex-col justify-start no-wrap">
+  <label for={name} class="mb-2 text-sm font-medium text-gray-900 dark:text-white" hidden={!label}
+    >{label}
+  </label>
+  <div class={inputContainerClassNames}>
+    <input
+      {name}
+      {type}
+      {value}
+      {required}
+      {placeholder}
+      {disabled}
+      {step}
+      id={name}
+      autocomplete={autoComplete}
+      tabindex={tabIndex}
+      aria-invalid="false"
+      aria-label="{name}-input"
+      aria-required={required ? 'true' : 'false'}
+      class={TEXT_FIELD_INPUT_CLASS}
+      on:input={handleInput}
+    />
+    {#if icon}
+      <div on:mousedown={handleIconClick}>
+        <svelte:component
+          this={icon}
+          class="absolute h-8 w-8 inset-y-0 right-0 pt-2 pr-2 flex items-center leading-5"
+        />
+      </div>
+    {/if}
+  </div>
+  <div
+    class:hidden={!error}
+    class:flex={!!error}
+    class="text-sm text-rose-500 items-center space-x-2 py-2"
+  >
+    <figure class="flex justify-center items-center">
+      <!-- <Warning /> -->
+    </figure>
+    <span>{error}</span>
+  </div>
+</div>

src/index.test.ts → src/lib/components/TextField/TextField.test.ts

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

src/lib/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button.svelte';

tailwind.config.cjs

@@ -0,0 +1,18 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', ...defaultTheme.fontFamily.sans]
+      }
+    },
+    variants: {
+      extend: {}
+    },
+    plugins: [require('@tailwindcss/forms')]
+  }
+};

vitest.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vitest/config';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({
+  plugins: [svelte()],
+  test: {
+    globals: true,
+    environment: 'jsdom'
+  },
+  resolve: {
+    alias: {
+      $lib: '/src/lib/'
+    }
+  }
+});