feat: configuration

README.md

@@ -1,58 +1,11 @@
-# create-svelte
+# Exo
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
-
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
+## Development
 
 ```bash
-npm run build
+bun run story:dev
 ```
 
-You can preview the production build with `npm run preview`.
+## References
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```
+Check out all the available controls in their book: controls.histoire.dev.

package.json

@@ -40,6 +40,7 @@
     "@sveltejs/package": "^2.0.0",
     "@tailwindcss/forms": "^0.5.3",
     "@vitest/coverage-c8": "^0.31.4",
+    "autoprefixer": "^10.4.14",
     "histoire": "^0.16.1",
     "publint": "^0.1.9",
     "rome": "^12.1.3",
@@ -48,6 +49,7 @@
     "tailwindcss": "^3.3.2",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
+    "unplugin-icons": "^0.16.2",
     "vite": "^4.3.0",
     "vitest": "^0.31.4"
   },

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

src/app.css

@@ -1,4 +1,9 @@
 @import '@fontsource/fira-mono';
+@import '@fontsource-variable/inter';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
 	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,

src/lib/components/TextField/TextField.story.svelte

@@ -1,11 +1,31 @@
 <script lang="ts">
-  import TextField from './TextField.svelte';
-
-  import type { Hst as Histoire } from '@histoire/plugin-svelte';
+  import TextField, { TextFieldVariant } from "./TextField.svelte";
+  
+  import type { Hst as Histoire } from "@histoire/plugin-svelte";
 
   export let Hst: Histoire;
+
+  let name = "Name";
+  let value = "Hello World";
+  let disabled = false;
+  let variant = TextFieldVariant.Default;
 </script>
 
 <Hst.Story>
-  <TextField />
+  <TextField
+    {name}
+    {variant}
+    {disabled}
+    bind:value={value}
+  />
+  <svelte:fragment slot="controls">
+    <Hst.Text bind:value={name} title="Name" />
+    <Hst.Text bind:value={value} title="Value" />
+    <Hst.Select
+      title="Variant"
+      bind:value={variant}
+      options={Object.values(TextFieldVariant)}
+    />
+    <Hst.Checkbox bind:value={disabled} title="Disabled" />
+  </svelte:fragment>
 </Hst.Story>

src/lib/components/TextField/TextField.svelte

@@ -1,64 +1,73 @@
 <script lang="ts" context="module">
-  export enum TextInputVariant {
-    Default,
-    Transparent
+  export enum TextFieldVariant {
+    Default = "Default",
+    Transparent = "Transparent",
   }
 </script>
 
 <script lang="ts">
-  import classNames from 'classnames';
-  import { createEventDispatcher } from 'svelte';
+  import classNames from "classnames";
+  import { createEventDispatcher } from "svelte";
 
   // import Warning from '~icons/custom/warning';
 
+  import "../../../app.css";
+
   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 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 variant: TextFieldVariant = TextFieldVariant.Default;
   export let disabled = false;
-  export let className = '';
+  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
-  );
+  let TEXT_FIELD_INPUT_CLASS: string;
 
   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';
+    "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!'
+    !!error && "border-rose-200!"
   );
 
+  const dispatch = createEventDispatcher();
   const handleInput = (event: Event): void => {
     const target = event.target as HTMLInputElement;
     value = type.match(/^(number|range)$/) ? +target.value : target.value;
-    dispatch('input', {
-      value
+    dispatch("input", {
+      value,
     });
   };
 
   const handleIconClick = (): void => {
-    dispatch('clickIcon');
+    dispatch("clickIcon");
   };
+
+  $: {
+    TEXT_FIELD_INPUT_CLASS = classNames(
+      variant === TextFieldVariant.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
+    );
+  }
 </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
+    for={name}
+    class="mb-2 text-sm font-medium text-gray-900 dark:text-white"
+    hidden={!label}
     >{label}
   </label>
   <div class={inputContainerClassNames}>
@@ -75,7 +84,7 @@
       tabindex={tabIndex}
       aria-invalid="false"
       aria-label="{name}-input"
-      aria-required={required ? 'true' : 'false'}
+      aria-required={required ? "true" : "false"}
       class={TEXT_FIELD_INPUT_CLASS}
       on:input={handleInput}
     />

src/lib/components/TextField/index.ts

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

src/lib/index.ts

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