@julianelda/domos 1.3.0 → 2.0.0

package/README.md

@@ -0,0 +1,21 @@
+# scratchpad
+
+> Svelte components and styles. Designed and developed by Julius Polar.
+
+[![npm version](https://img.shields.io/npm/v/@julianelda/domos)](https://www.npmjs.com/package/@julianelda/domos)
+[![license](https://img.shields.io/github/license/JulianElda/domos)](https://github.com/JulianElda/domos/blob/master/LICENSE)
+
+# Usage
+
+Install from npm
+
+```bash
+bun add @julianelda@domos
+```
+
+Add import and source in tailwind file
+
+```css
+@import "@julianelda/domos/tailwind";
+@import "@julianelda/domos/background";
+```

package/dist/button/button.mocks.js

@@ -1,18 +1,9 @@
 export const buttonPropsPrimary = {
+    "data-testid": "primary-button",
     id: "primary-button",
-    onClick: () => {
-        console.log("");
-    },
-    style: "primary",
-    text: "Primary button",
-    type: "button",
+    variant: "primary",
 };
 export const buttonPropsSecondary = {
     id: "secondary-button",
-    onClick: () => {
-        console.log("");
-    },
-    style: "secondary",
-    text: "Secondary button",
-    type: "button",
+    variant: "secondary",
 };

package/dist/button/button.stories.svelte

@@ -10,26 +10,26 @@
       onclick: fn(),
     },
     argTypes: {
-      id: { control: "text" },
-      style: {
+      variant: {
         control: { type: "select" },
         options: ["primary", "secondary"],
       },
-      text: { control: "text" },
-      type: {
-        control: { type: "select" },
-        options: ["button", "submit"],
-      },
     },
     component: Button,
     title: "Button",
   });
 </script>
 
+{#snippet children()}
+  Button
+{/snippet}
+
 <Story
   name="Primary"
-  args={buttonPropsPrimary} />
+  args={{ buttonPropsPrimary, children }}>
+</Story>
 
 <Story
   name="Secondary"
-  args={buttonPropsSecondary} />
+  args={{ buttonPropsSecondary, children }}>
+</Story>

package/dist/button/button.svelte

@@ -1,25 +1,16 @@
 <script lang="ts">
   import type { ButtonProps } from "./button.types.js";
 
-  const {
-    id,
-    onClick,
-    style = "primary",
-    text,
-    type = "button",
-  }: ButtonProps = $props();
+  const { children, variant = "primary", ...rest }: ButtonProps = $props();
 </script>
 
 <button
-  data-testid={id}
-  {id}
-  onclick={onClick}
-  {type}
+  {...rest}
   class={[
     "cursor-pointer appearance-none rounded-lg p-2 text-lg shadow-sm hover:border-primary-500 hover:bg-primary-500 focus:ring-primary-300 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-primary-300 active:bg-primary-700 dark:hover:bg-primary-500",
-    style === "primary"
+    variant === "primary"
       ? "border-primary-700 bg-primary-700 text-ink-white"
       : "border border-ink-500 bg-card-background-light text-ink-black hover:text-white dark:bg-slate dark:text-ink-white",
   ]}>
-  {text}
+  {@render children?.()}
 </button>

package/dist/button/button.types.d.ts

@@ -1,7 +1,6 @@
-export interface ButtonProps {
-    id: string;
-    onClick: () => void;
-    style: "primary" | "secondary";
-    text: string;
-    type: "button" | "submit";
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+export interface ButtonProps extends HTMLButtonAttributes {
+    children?: Snippet;
+    variant?: "primary" | "secondary";
 }

package/dist/checkbox/checkbox.mocks.js

@@ -1,8 +1,6 @@
 export const checkboxProps = {
+    checked: true,
+    "data-testid": "checkbox-id",
     id: "checkbox-id",
     label: "Checkbox label",
-    onChange: () => {
-        console.log("");
-    },
-    value: true,
 };

package/dist/checkbox/checkbox.stories.svelte

@@ -7,13 +7,13 @@
 
   const { Story } = defineMeta({
     args: {
-      onChange: fn(),
+      onchange: fn(),
     },
     argTypes: {
+      checked: { control: "boolean" },
       hideLabel: { control: "boolean" },
       id: { control: "text" },
       label: { control: "text" },
-      value: { control: "boolean" },
     },
     component: Checkbox,
     title: "Checkbox",
@@ -22,21 +22,12 @@
 
 <Story
   name="Checked"
-  args={{
-    ...checkboxProps,
-    value: true,
-  }} />
+  args={{ ...checkboxProps, checked: true }} />
 
 <Story
   name="Unchecked"
-  args={{
-    ...checkboxProps,
-    value: false,
-  }} />
+  args={{ ...checkboxProps, checked: false }} />
 
 <Story
   name="Hidden Label"
-  args={{
-    ...checkboxProps,
-    hideLabel: true,
-  }} />
+  args={{ ...checkboxProps, hideLabel: true }} />

package/dist/checkbox/checkbox.svelte

@@ -3,26 +3,15 @@
 
   import type { CheckboxProps } from "./checkbox.types.js";
 
-  const {
-    disabled = false,
-    hideLabel,
-    id,
-    label,
-    onChange,
-    value,
-  }: CheckboxProps = $props();
+  const { hideLabel, id, label, ...rest }: CheckboxProps = $props();
 </script>
 
 <div class="relative flex items-start gap-1">
   <div class="flex h-6 items-center">
     <input
-      checked={value}
-      class="form-checkbox inline-block size-4 rounded-md border-0 bg-white p-1 text-primary-500 accent-primary-500 ring-1 ring-ink-500 ring-inset focus:border-primary-300 focus:ring-1 focus:ring-primary-300 focus:ring-inset dark:bg-ink-500"
-      data-testid={id}
-      {disabled}
+      {...rest}
       {id}
-      name={id}
-      onchange={(event) => onChange((event.target as HTMLInputElement).checked)}
+      class="form-checkbox inline-block size-4 rounded-md border-0 bg-white p-1 text-primary-500 accent-primary-500 ring-1 ring-ink-500 ring-inset focus:border-primary-300 focus:ring-1 focus:ring-primary-300 focus:ring-inset dark:bg-ink-500"
       type="checkbox" />
   </div>
   <div class="leading-6">

package/dist/checkbox/checkbox.types.d.ts

@@ -1,8 +1,5 @@
-export interface CheckboxProps {
-    disabled?: boolean;
+import type { HTMLInputAttributes } from "svelte/elements";
+export interface CheckboxProps extends HTMLInputAttributes {
     hideLabel?: boolean;
-    id: string;
     label: string;
-    onChange: (value: boolean) => void;
-    value: boolean;
 }

package/dist/input/input.stories.svelte

@@ -7,15 +7,14 @@
 
   const { Story } = defineMeta({
     args: {
-      onChange: fn(),
-      onKeyDown: fn(),
+      oninput: fn(),
     },
     argTypes: {
+      disabled: { control: "boolean" },
       hideLabel: { control: "boolean" },
       id: { control: "text" },
       label: { control: "text" },
       placeholder: { control: "text" },
-      value: { control: "text" },
     },
     component: Input,
     title: "Input",
@@ -24,31 +23,19 @@
 
 <Story
   name="Input type text"
-  args={{
-    ...inputProps1,
-    hideLabel: false,
-  }} />
+  args={{ ...inputProps1, hideLabel: false }} />
 
 <Story
   name="Input type number"
-  args={{
-    ...inputProps2,
-    hideLabel: false,
-  }} />
+  args={{ ...inputProps2, hideLabel: false }} />
 
 <Story
   name="Input type search"
-  args={{
-    ...inputProps3,
-    hideLabel: false,
-  }} />
+  args={{ ...inputProps3, hideLabel: false }} />
 
 <Story
   name="Input without label"
-  args={{
-    ...inputProps1,
-    hideLabel: true,
-  }} />
+  args={{ ...inputProps1, hideLabel: true }} />
 
 <Story
   name="Input with placeholder"
@@ -61,7 +48,8 @@
 
 <Story
   name="Borderless"
-  args={{
-    ...inputProps1,
-    borderless: true,
-  }} />
+  args={{ ...inputProps1, borderless: true }} />
+
+<Story
+  name="Disabled"
+  args={{ ...inputProps1, hideLabel: false, disabled: true }} />

package/dist/input/input.svelte

@@ -4,18 +4,7 @@
 
   import type { InputProps } from "./input.types.js";
 
-  const {
-    borderless,
-    disabled,
-    hideLabel,
-    id,
-    label,
-    onChange,
-    onKeyDown,
-    placeholder,
-    type,
-    value,
-  }: InputProps = $props();
+  const { hideLabel, id, label, ...rest }: InputProps = $props();
 </script>
 
 <div class="flex flex-1 flex-col gap-1">
@@ -24,12 +13,6 @@
     {id}
     {label} />
   <InputField
-    {borderless}
-    {disabled}
     {id}
-    {onChange}
-    {onKeyDown}
-    {placeholder}
-    {type}
-    {value} />
+    {...rest} />
 </div>

package/dist/input/input.types.d.ts

@@ -1,3 +1,6 @@
 import type { InputFieldProps } from "./../input-field/input-field.types.ts";
-import type { InputLabelProps } from "./../input-label/input-label.types.ts";
-export type InputProps = InputFieldProps & InputLabelProps;
+export interface InputProps extends InputFieldProps {
+    hideLabel?: boolean;
+    id: string;
+    label: string;
+}

package/dist/input-button/input-button.svelte

@@ -6,17 +6,12 @@
 
   const {
     buttonAriaLabel,
-    disabled,
     hideLabel,
     icon,
     id,
     label,
     onButtonClick,
-    onChange,
-    onKeyDown,
-    placeholder,
-    type,
-    value,
+    ...rest
   }: InputButtonProps = $props();
 </script>
 
@@ -27,13 +22,8 @@
     {label} />
   <div class="relative flex grow items-stretch focus-within:z-10">
     <InputField
-      {disabled}
       {id}
-      onChange={(value) => onChange?.(value)}
-      onKeyDown={(value) => onKeyDown?.(value)}
-      {placeholder}
-      {type}
-      {value}
+      {...rest}
       withIconLeft={true} />
   </div>
   <button

package/dist/input-button/input-button.types.d.ts

@@ -1,10 +1,10 @@
 import type { Component } from "svelte";
 import type { InputFieldProps } from "./../input-field/input-field.types.ts";
-import type { InputLabelProps } from "./../input-label/input-label.types.ts";
-export type InputButtonProps = IconButtonProps & InputFieldProps & InputLabelProps;
-interface IconButtonProps {
+export interface InputButtonProps extends InputFieldProps {
     buttonAriaLabel: string;
+    hideLabel?: boolean;
     icon?: Component;
+    id: string;
+    label: string;
     onButtonClick: () => void;
 }
-export {};

package/dist/input-field/input-field.mocks.js

@@ -1,24 +1,29 @@
 export const inputFieldProps1 = {
+    "data-testid": "input-id-1",
     id: "input-id-1",
     type: "text",
     value: "Input value",
 };
 export const inputFieldProps2 = {
+    "data-testid": "input-id-2",
     id: "input-id-2",
     type: "number",
     value: 100,
 };
 export const inputFieldProps3 = {
+    "data-testid": "input-id-3",
     id: "input-id-3",
     type: "search",
     value: "Search query",
 };
 export const inputFieldProps4 = {
+    "data-testid": "input-id-4",
     id: "input-id-4",
     type: "number",
     value: 100,
 };
 export const inputFieldProps5 = {
+    "data-testid": "input-id-5",
     id: "input-id-5",
     type: "range",
     value: 10,

package/dist/input-field/input-field.svelte

@@ -3,26 +3,13 @@
 
   const {
     borderless = false,
-    disabled = false,
-    id,
-    onChange,
-    onKeyDown,
-    placeholder = "",
-    type = "text",
-    value,
     withIconLeft = false,
+    ...rest
   }: InputFieldProps = $props();
 </script>
 
 <input
-  data-testid={id}
-  {id}
-  {disabled}
-  oninput={(e) => onChange?.((e.target as HTMLInputElement).value)}
-  onkeydown={(e) => onKeyDown?.((e.target as HTMLInputElement).value)}
-  {placeholder}
-  {type}
-  {value}
+  {...rest}
   class={[
     "form-input block w-full appearance-none border text-ink-black dark:text-app-text-dark",
     borderless === true

package/dist/input-field/input-field.types.d.ts

@@ -1,12 +1,7 @@
-export interface InputFieldProps {
+import type { HTMLInputAttributes } from "svelte/elements";
+export interface InputFieldProps extends HTMLInputAttributes {
     borderless?: boolean;
-    disabled?: boolean;
     id: string;
-    onChange?: (value: string) => void;
-    onKeyDown?: (value: string) => void;
-    placeholder?: string;
-    type: InputFieldTypes;
-    value: number | string;
     withIconLeft?: boolean;
 }
 export type InputFieldTypes = "number" | "range" | "search" | "text";

package/dist/input-select/input-select.mocks.js

@@ -1,21 +1,33 @@
 import { selectFieldOptions1, selectFieldOptions2, } from "./../select-field/select-field.mocks.js";
 export const inputSelectProps1 = {
-    inputId: "input-id-1",
-    inputLabel: "Currency amount",
-    inputValue: "100",
-    options: [...selectFieldOptions1],
-    selectId: "select-id-1",
-    selectLabel: "Currency select",
-    selectValue: selectFieldOptions1[0].value,
-    type: "text",
+    inputProps: {
+        "data-testid": "input-id-1",
+        id: "input-id-1",
+        label: "Currency amount",
+        type: "text",
+        value: "100",
+    },
+    selectProps: {
+        "data-testid": "select-id-1",
+        id: "select-id-1",
+        label: "Currency select",
+        options: [...selectFieldOptions1],
+        value: selectFieldOptions1[0].value,
+    },
 };
 export const inputSelectProps2 = {
-    inputId: "input-id-2",
-    inputLabel: "Currency amount",
-    inputValue: "100",
-    options: [...selectFieldOptions2],
-    selectId: "select-id-2",
-    selectLabel: "Currency select",
-    selectValue: selectFieldOptions2[2].value,
-    type: "text",
+    inputProps: {
+        "data-testid": "input-id-2",
+        id: "input-id-2",
+        label: "Currency amount",
+        type: "text",
+        value: "100",
+    },
+    selectProps: {
+        "data-testid": "select-id-2",
+        id: "select-id-2",
+        label: "Currency select",
+        options: [...selectFieldOptions2],
+        value: selectFieldOptions2[2].value,
+    },
 };

package/dist/input-select/input-select.svelte

@@ -5,49 +5,36 @@
 
   import type { InputSelectProps } from "./input-select.types.js";
 
-  const {
-    hideLabel,
-    inputDisabled,
-    inputId,
-    inputLabel,
-    inputPlaceholder,
-    inputValue,
-    onInputChange,
-    onInputKeydown,
-    onSelectChange,
-    options,
-    selectId,
-    selectLabel,
-    selectValue,
-    type,
-  }: InputSelectProps = $props();
+  const { hideLabel, inputProps, selectProps }: InputSelectProps = $props();
+
+  const inputFieldProps = $derived.by(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { label: _label, ...rest } = inputProps;
+    return rest;
+  });
+
+  const selectFieldProps = $derived.by(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { label: _label, ...rest } = selectProps;
+    return rest;
+  });
 </script>
 
 <div class="flex flex-1 flex-col gap-1">
   <InputLabel
     {hideLabel}
-    id={inputId}
-    label={inputLabel} />
+    id={inputProps.id}
+    label={inputProps.label} />
   <div class="relative rounded-md shadow-xs">
-    <InputField
-      disabled={inputDisabled}
-      id={inputId}
-      onChange={(value) => onInputChange?.(value)}
-      onKeyDown={(value) => onInputKeydown?.(value)}
-      placeholder={inputPlaceholder}
-      {type}
-      value={inputValue} />
+    <InputField {...inputFieldProps} />
     <div class="absolute inset-y-0 right-0 flex items-center">
       <InputLabel
         hideLabel={true}
-        id={selectId}
-        label={selectLabel} />
+        id={selectProps.id}
+        label={selectProps.label} />
       <SelectField
-        id={selectId}
-        inInputField={true}
-        onChange={(value) => onSelectChange?.(value)}
-        {options}
-        value={selectValue} />
+        {...selectFieldProps}
+        inInputField={true} />
     </div>
   </div>
 </div>

package/dist/input-select/input-select.types.d.ts

@@ -1,18 +1,13 @@
-import type { InputFieldTypes } from "./../input-field/input-field.types.ts";
-import type { SelectFieldOption } from "./../select-field/select-field.types.ts";
+import type { InputFieldProps } from "./../input-field/input-field.types.ts";
+import type { SelectFieldProps } from "./../select-field/select-field.types.ts";
+export interface InputSelectInputProps extends InputFieldProps {
+    label: string;
+}
 export interface InputSelectProps {
     hideLabel?: boolean;
-    inputDisabled?: boolean;
-    inputId: string;
-    inputLabel: string;
-    inputPlaceholder?: string;
-    inputValue: number | string;
-    onInputChange?: (value: number | string) => void;
-    onInputKeydown?: (key: number | string) => void;
-    onSelectChange?: (value: string) => void;
-    options: SelectFieldOption[];
-    selectId: string;
-    selectLabel: string;
-    selectValue: string;
-    type: InputFieldTypes;
+    inputProps: InputSelectInputProps;
+    selectProps: InputSelectSelectProps;
+}
+export interface InputSelectSelectProps extends SelectFieldProps {
+    label: string;
 }

package/dist/select/select.mocks.js

@@ -2,10 +2,8 @@ import { selectFieldProps1, selectFieldProps2, } from "./../select-field/select-
 export const selectProps1 = {
     ...selectFieldProps1,
     label: "Select currency",
-    value: selectFieldProps1.options[0].value,
 };
 export const selectProps2 = {
     ...selectFieldProps2,
     label: "Select currency",
-    value: selectFieldProps2.options[2].value,
 };

package/dist/select/select.stories.svelte

@@ -0,0 +1,41 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { fn } from "storybook/test";
+
+  import { selectProps1, selectProps2 } from "./select.mocks.js";
+  import Select from "./select.svelte";
+
+  const { Story } = defineMeta({
+    args: {
+      onchange: fn(),
+    },
+    argTypes: {
+      disabled: { control: "boolean" },
+      hideLabel: { control: "boolean" },
+      id: { control: "text" },
+      label: { control: "text" },
+    },
+    component: Select,
+    title: "Select",
+  });
+</script>
+
+<Story
+  name="Select with long labels"
+  args={{ ...selectProps1, hideLabel: false }} />
+
+<Story
+  name="Select with short labels"
+  args={{ ...selectProps2, hideLabel: false }} />
+
+<Story
+  name="Select without label"
+  args={{ ...selectProps1, hideLabel: true }} />
+
+<Story
+  name="Borderless"
+  args={{ ...selectProps1, borderless: true, hideLabel: true }} />
+
+<Story
+  name="Disabled"
+  args={{ ...selectProps1, hideLabel: false, disabled: true }} />

package/dist/select/select.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Select;
+type Select = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Select: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Select from "./select.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/select/select.svelte

@@ -4,15 +4,7 @@
 
   import type { SelectProps } from "./select.types.js";
 
-  const {
-    borderless,
-    hideLabel,
-    id,
-    label,
-    onChange,
-    options,
-    value,
-  }: SelectProps = $props();
+  const { hideLabel, id, label, ...rest }: SelectProps = $props();
 </script>
 
 <div class="flex flex-1 flex-col gap-1">
@@ -21,9 +13,6 @@
     {id}
     {label} />
   <SelectField
-    {borderless}
     {id}
-    {onChange}
-    {options}
-    {value} />
+    {...rest} />
 </div>

package/dist/select/select.types.d.ts

@@ -1,3 +1,6 @@
-import type { InputLabelProps } from "./../input-label/input-label.types.ts";
 import type { SelectFieldProps } from "./../select-field/select-field.types.ts";
-export type SelectProps = InputLabelProps & SelectFieldProps;
+export interface SelectProps extends SelectFieldProps {
+    hideLabel?: boolean;
+    id: string;
+    label: string;
+}

package/dist/select-field/select-field.mocks.js

@@ -35,16 +35,16 @@ export const selectFieldOptions2 = [
     },
 ];
 export const selectFieldProps1 = {
+    "data-testid": "select-id-1",
     id: "select-id-1",
     inInputField: false,
-    onChange: () => { },
     options: [...selectFieldOptions1],
     value: selectFieldOptions1[0].value,
 };
 export const selectFieldProps2 = {
+    "data-testid": "select-id-2",
     id: "select-id-2",
     inInputField: false,
-    onChange: () => { },
     options: [...selectFieldOptions2],
     value: selectFieldOptions2[2].value,
 };

package/dist/select-field/select-field.svelte

@@ -3,31 +3,23 @@
 
   const {
     borderless = false,
-    id,
     inInputField = false,
-    onChange,
     options,
-    value,
+    ...rest
   }: SelectFieldProps = $props();
 </script>
 
 <select
+  {...rest}
   class={[
     "form-select w-full appearance-none rounded-md text-ink-black dark:bg-slate dark:text-ink-white",
-
     borderless === true
       ? "border-0 bg-transparent p-0 ring-0 outline-none focus:ring-0 focus:outline-none"
       : "border border-ink-gray py-2 pr-8 pl-2 focus:ring-1 focus:ring-primary-300 focus:ring-inset",
-
     inInputField === true
       ? "h-full rounded-l-none bg-transparent"
       : "block pl-3",
-  ]}
-  data-testid={id}
-  {id}
-  name={id}
-  oninput={(e) => onChange((e.target as HTMLSelectElement).value as string)}
-  {value}>
+  ]}>
   {#each options as option (option.value)}
     <option value={option.value}>
       {option.label}

package/dist/select-field/select-field.types.d.ts

@@ -1,12 +1,11 @@
+import type { HTMLSelectAttributes } from "svelte/elements";
 export interface SelectFieldOption {
     label: string;
     value: string;
 }
-export interface SelectFieldProps {
+export interface SelectFieldProps extends HTMLSelectAttributes {
     borderless?: boolean;
     id: string;
     inInputField?: boolean;
-    onChange: (value: string) => void;
     options: SelectFieldOption[];
-    value: string;
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@julianelda/domos",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "keywords": [
     "svelte"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/JulianElda/arche",
+    "url": "git+https://github.com/JulianElda/arche.git",
     "directory": "packages/domos"
   },
   "files": [