@flightlesslabs/dodo-ui 0.17.0-beta-2 → 0.17.2

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Preview/Preview.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">import Button from '../../../../../components/Form/Button/Button.svelte';
+import RangeSlider from '../../../../../components/Form/RangeSlider/RangeSlider.svelte';
+import Column from '../../../../../components/Layout/Grid/Column/Column.svelte';
+import Grid from '../../../../../components/Layout/Grid/Grid.svelte';
+import Paper from '../../../../../components/Layout/Paper/Paper.svelte';
+import { colorPalette, colorPaletteValues, } from '../../../../philosophy/Colors/utils/color.js';
+import { useAutoCustomizeConfigStore, } from '../stores/config.svelte.js';
+let cssVariables = $state([]);
+$effect(() => {
+    const newCssvariables = [];
+    for (let index = 0; index < colorPalette.length; index++) {
+        const colorName = colorPalette[index];
+        const fieldName = `${colorName}`;
+        const dataPoint = useAutoCustomizeConfigStore.data.colors &&
+            useAutoCustomizeConfigStore.data.colors[fieldName]
+            ? useAutoCustomizeConfigStore.data.colors[fieldName]
+            : undefined;
+        if (dataPoint) {
+            for (let index = 0; index < colorPaletteValues.length; index++) {
+                const weight = colorPaletteValues[index];
+                newCssvariables.push(`--dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weight})`);
+            }
+            newCssvariables.push(...[
+                `--dodo-ui-Button-outline-${colorName}: var(--dodo-color-base-${dataPoint}-400)`,
+                `--dodo-ui-Button-text-${colorName}-bg: var(--dodo-color-base-${dataPoint}-100)`,
+                `--dodo-ui-Button-text-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-200)`,
+                `--dodo-ui-Button-text-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-300)`,
+                `--dodo-ui-Button-solid-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
+                `--dodo-ui-Button-solid-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-600)`,
+                `--dodo-ui-Button-solid-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-700)`,
+                `--dodo-ui-RangeSlider-thumb-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
+                `--dodo-ui-RangeSlider-thumb-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-600)`,
+                `--dodo-ui-RangeSlider-thumb-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-700)`,
+                `--dodo-ui-RangeSlider-track-filled-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
+            ]);
+        }
+    }
+    if (useAutoCustomizeConfigStore.data.components?.roundness) {
+        const roundness = useAutoCustomizeConfigStore.data.components.roundness / 8;
+        newCssvariables.push(`--dodo-ui-element-roundness-1: ${0.4375 + roundness}em`);
+        newCssvariables.push(`--dodo-ui-element-roundness-2: ${0.8125 + roundness}em`);
+        newCssvariables.push(`--dodo-ui-element-roundness-3: ${1.9375 + roundness}em`);
+    }
+    if (useAutoCustomizeConfigStore.data.components?.elementHeight) {
+        const elementHeight = useAutoCustomizeConfigStore.data.components.elementHeight + 2;
+        const elementHeightTrack = useAutoCustomizeConfigStore.data.components.elementHeight / 2;
+        newCssvariables.push(`--dodo-ui-element-height-small: ${34 + elementHeight}px`);
+        newCssvariables.push(`--dodo-ui-element-height-normal: ${40 + elementHeight}px`);
+        newCssvariables.push(`--dodo-ui-element-height-large: ${50 + elementHeight}px`);
+        newCssvariables.push(`--dodo-ui-track-element-height-small: ${6 + elementHeightTrack}px`);
+        newCssvariables.push(`--dodo-ui-track-element-height-normal: ${8 + elementHeightTrack}px`);
+        newCssvariables.push(`--dodo-ui-track-element-height-large: ${10 + elementHeightTrack}px`);
+    }
+    if (useAutoCustomizeConfigStore.data.components?.borderWidth) {
+        const borderWidth = useAutoCustomizeConfigStore.data.components.borderWidth;
+        newCssvariables.push(`--dodo-ui-element-border-width: ${1 + borderWidth}px`);
+    }
+    if (useAutoCustomizeConfigStore.data.space) {
+        const space = useAutoCustomizeConfigStore.data.space;
+        newCssvariables.push(`--dodo-ui-space-small: ${6 + space}px`);
+        newCssvariables.push(`--dodo-ui-space: ${8 + space}px`);
+        newCssvariables.push(`--dodo-ui-space-large: ${10 + space}px`);
+    }
+    cssVariables = [...newCssvariables];
+});
+</script>
+
+<div class="Preview" style={cssVariables.join(';')}>
+  <div class="section">
+    <div class="column">
+      <Button>Primary</Button>
+    </div>
+    <div class="column">
+      <Button color="secondary">Secondary</Button>
+    </div>
+    <div class="column">
+      <Button color="neutral">Neutral</Button>
+    </div>
+    <div class="column">
+      <Button color="safe">Safe</Button>
+    </div>
+    <div class="column">
+      <Button color="warning">Warning</Button>
+    </div>
+    <div class="column">
+      <Button color="danger">Danger</Button>
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="column">
+      <Button variant="text" outline>Primary</Button>
+    </div>
+    <div class="column">
+      <Button variant="text" outline color="secondary">Secondary</Button>
+    </div>
+    <div class="column">
+      <Button variant="text" outline color="neutral">Neutral</Button>
+    </div>
+    <div class="column">
+      <Button variant="text" outline color="safe">Safe</Button>
+    </div>
+    <div class="column">
+      <Button variant="text" outline color="warning">Warning</Button>
+    </div>
+    <div class="column">
+      <Button variant="text" outline color="danger">Danger</Button>
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="column">
+      <Paper shadow={1} width="150px" height="180px">
+        <div style="padding: var(--dodo-ui-space)">Hola!</div>
+      </Paper>
+    </div>
+    <div class="column">
+      <RangeSlider value={50} min={20} max={70} />
+    </div>
+  </div>
+
+  <div class="section">
+    <Grid class="GridSection">
+      <Column md={6}>
+        <Paper shadow={1}>
+          <div style="padding: var(--dodo-ui-space)">Hola!</div>
+        </Paper>
+      </Column>
+      <Column md={6}>
+        <Paper shadow={1}>
+          <div style="padding: var(--dodo-ui-space)">Hola!</div>
+        </Paper>
+      </Column>
+      <Column md={4}>
+        <Paper shadow={1}>
+          <div style="padding: var(--dodo-ui-space)">Hola!</div>
+        </Paper>
+      </Column>
+      <Column md={3}>
+        <Paper shadow={1}>
+          <div style="padding: var(--dodo-ui-space)">Hola!</div>
+        </Paper>
+      </Column>
+      <Column md={2}>
+        <Paper shadow={1}>
+          <div style="padding: var(--dodo-ui-space)">Hola!</div>
+        </Paper>
+      </Column>
+      <Column md={3}>
+        <Paper shadow={1}>
+          <div style="padding: var(--dodo-ui-space)">Hola!</div>
+        </Paper>
+      </Column>
+    </Grid>
+  </div>
+</div>
+
+<style>:global(:root) {
+  --AutoCustomize-Preview-bgColor: var(--dodo-color-base-gray-100);
+}
+
+:global(.dodo-theme--dark) {
+  --AutoCustomize-Preview-bgColor: var(--dodo-color-base-gray-800);
+}
+
+.Preview {
+  background-color: var(--AutoCustomize-Preview-bgColor);
+  padding: calc(var(--dodo-ui-space) * 2);
+  border-radius: var(--dodo-ui-element-roundness-2);
+  width: 100%;
+}
+@media (min-width: 64rem) {
+  .Preview {
+    flex: 1;
+    width: initial;
+    height: calc(100vh - 130px);
+    overflow: auto;
+  }
+}
+.Preview .section {
+  width: 100%;
+  margin: var(--dodo-ui-space) 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+.Preview .column {
+  margin: 4px;
+  display: inline-flex;
+}
+.Preview :global(.GridSection) {
+  width: 100%;
+}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Preview/Preview.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Preview: import("svelte").Component<Record<string, never>, {}, "">;
+type Preview = ReturnType<typeof Preview>;
+export default Preview;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Tool.stories.svelte

@@ -0,0 +1,9 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Tool from './Tool.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Tool,
+});
+</script>
+
+<Story name="Main" />

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Tool.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Tool from './Tool.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;
+}
+declare const Tool: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Tool = InstanceType<typeof Tool>;
+export default Tool;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Tool.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import Config from './Config/Config.svelte';
+import Preview from './Preview/Preview.svelte';
+</script>
+
+<div class="Tool">
+  <Config />
+  <Preview />
+</div>
+
+<style>.Tool {
+  display: flex;
+  flex-wrap: wrap;
+}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Tool.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const Tool: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Tool = InstanceType<typeof Tool>;
+export default Tool;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/helpers/download-file.d.ts

@@ -0,0 +1 @@
+export declare function downloadFile(fileName: string, data: Blob): Promise<void>;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/helpers/download-file.js

@@ -0,0 +1,10 @@
+import { saveAs } from 'file-saver';
+export async function downloadFile(fileName, data) {
+    try {
+        saveAs(data, fileName);
+        return Promise.resolve();
+    }
+    catch (e) {
+        return Promise.reject(e);
+    }
+}

package/dist/stories/developer tools/customize/AutoCustomize/Tool/stores/config.svelte.d.ts

@@ -0,0 +1,27 @@
+export type AutoCustomizeConfigDataColors = {
+    primary?: string;
+    secondary?: string;
+    neutral?: string;
+    safe?: string;
+    warning?: string;
+    danger?: string;
+};
+export type AutoCustomizeConfigDataComponents = {
+    roundness?: number;
+    elementHeight?: number;
+    borderWidth?: number;
+};
+export type AutoCustomizeConfigData = {
+    colors?: AutoCustomizeConfigDataColors;
+    components?: AutoCustomizeConfigDataComponents;
+    space?: number;
+};
+export declare const autoCustomizeConfigdefaultData: AutoCustomizeConfigData;
+export declare const useAutoCustomizeConfigStore: {
+    readonly data: AutoCustomizeConfigData;
+    readonly updatedAt: number;
+    updateData(newData: Partial<AutoCustomizeConfigData>): void;
+    updateDataColor(newData: Partial<AutoCustomizeConfigDataColors>): void;
+    updateDataComponents(newData: Partial<AutoCustomizeConfigDataComponents>): void;
+    reset(): void;
+};

package/dist/stories/developer tools/customize/AutoCustomize/Tool/stores/config.svelte.js

@@ -0,0 +1,70 @@
+import { browser } from '$app/environment';
+const AUTO_CUSTOMIZE_TOOL_CONFIG = 'AUTO_CUSTOMIZE_TOOL_CONFIG';
+export const autoCustomizeConfigdefaultData = {
+    colors: {
+        primary: 'violet',
+        secondary: 'blue',
+        neutral: 'gray',
+        safe: 'emerald',
+        warning: 'amber',
+        danger: 'red',
+    },
+    components: {
+        roundness: 0,
+        elementHeight: 0,
+        borderWidth: 0,
+    },
+    space: 0,
+};
+function getDefaultData() {
+    if (!browser) {
+        return autoCustomizeConfigdefaultData;
+    }
+    let values = JSON.parse(localStorage.getItem(AUTO_CUSTOMIZE_TOOL_CONFIG) || `{}`);
+    values = { ...autoCustomizeConfigdefaultData, ...values };
+    return values;
+}
+function createAutoCustomizeConfigStore() {
+    let updatedAt = $state(Date.now());
+    let data = $state(getDefaultData());
+    return {
+        get data() {
+            return data;
+        },
+        get updatedAt() {
+            return updatedAt;
+        },
+        updateData(newData) {
+            data = {
+                ...data,
+                ...newData,
+            };
+            updatedAt = Date.now();
+            if (browser) {
+                localStorage.setItem(AUTO_CUSTOMIZE_TOOL_CONFIG, JSON.stringify(newData));
+            }
+        },
+        updateDataColor(newData) {
+            const colors = {
+                ...data.colors,
+                ...newData,
+            };
+            this.updateData({ colors });
+        },
+        updateDataComponents(newData) {
+            const components = {
+                ...data.components,
+                ...newData,
+            };
+            this.updateData({ components });
+        },
+        reset() {
+            data = autoCustomizeConfigdefaultData;
+            updatedAt = Date.now();
+            if (browser) {
+                localStorage.setItem(AUTO_CUSTOMIZE_TOOL_CONFIG, JSON.stringify(autoCustomizeConfigdefaultData));
+            }
+        },
+    };
+}
+export const useAutoCustomizeConfigStore = createAutoCustomizeConfigStore();

package/dist/stories/developer tools/customize/Intro.mdx

@@ -0,0 +1,8 @@
+# Customize
+
+Use our [Auto Customize](?path=/docs/developer-tools-customize-autocustomize--docs) to modify the look and feel of the components.
+
+## Explore More
+
+- [Tailwind CSS Color Generator](https://uicolors.app/generate/)
+- [Colors](?path=/docs/developer-tools-philosophy-colors--docs)

package/dist/styles/_colors.css

@@ -7,7 +7,7 @@
   --dodo-color-constant-black: var(--dodo-color-base-black);
   --dodo-color-constant-white: var(--dodo-color-base-white);
 
-  /* Default color */
+  /* Neutral color */
   --dodo-color-neutral-50: var(--dodo-color-base-gray-50);
   --dodo-color-neutral-100: var(--dodo-color-base-gray-100);
   --dodo-color-neutral-200: var(--dodo-color-base-gray-200);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.17.0-beta-2",
+  "version": "0.17.2",
   "scripts": {
     "copy-css": "cpy src/lib/styles/global.css dist/styles --parents",
     "build": "vite build && pnpm copy-css && pnpm run prepack",
@@ -52,37 +52,38 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "4.0.1",
+    "@chromatic-com/storybook": "4.1.0",
     "@eslint/compat": "^1.3.1",
     "@eslint/js": "^9.32.0",
-    "@storybook/addon-docs": "^9.0.18",
+    "@storybook/addon-docs": "^9.1.1",
     "@storybook/addon-svelte-csf": "5.0.7",
-    "@storybook/addon-vitest": "^9.0.18",
-    "@storybook/sveltekit": "^9.0.18",
+    "@storybook/addon-vitest": "^9.1.1",
+    "@storybook/sveltekit": "^9.1.1",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.26.1",
+    "@sveltejs/kit": "^2.27.0",
     "@sveltejs/package": "^2.4.0",
     "@sveltejs/vite-plugin-svelte": "^6.1.0",
+    "@types/file-saver": "^2.0.7",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "@vueless/storybook-dark-mode": "^9.0.6",
     "cpy-cli": "^5.0.0",
     "eslint": "^9.32.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "9.0.18",
+    "eslint-plugin-storybook": "9.1.1",
     "eslint-plugin-svelte": "^3.11.0",
     "globals": "^16.3.0",
-    "playwright": "^1.54.1",
+    "playwright": "^1.54.2",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
     "sass": "^1.89.2",
-    "storybook": "^9.0.18",
-    "svelte": "^5.37.1",
-    "svelte-check": "^4.3.0",
+    "storybook": "^9.1.1",
+    "svelte": "^5.37.3",
+    "svelte-check": "^4.3.1",
     "svelte-preprocess": "^6.0.3",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.38.0",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.39.0",
     "vite": "^7.0.6",
     "vitest": "^3.2.4"
   },
@@ -95,6 +96,7 @@
   },
   "dependencies": {
     "@iconify/svelte": "^5.0.1",
-    "dayjs": "^1.11.13"
+    "dayjs": "^1.11.13",
+    "file-saver": "^2.0.5"
   }
 }

package/src/lib/stories/components/Form/Button/Button.svelte

@@ -60,6 +60,8 @@
     class?: string;
     /** The onclick event handler */
     onclick?: MouseEventHandler<HTMLButtonElement>;
+    /** Aria label */
+    'aria-label'?: string;
     /** Turn Button into link */
     href?: string;
     /** Link button: download  */
@@ -101,6 +103,7 @@
     onclick,
     before,
     after,
+    'aria-label': ariaLabel,
     href,
     download,
     hreflang,
@@ -145,6 +148,7 @@
     {target}
     type={anchorMediaType}
     {referrerpolicy}
+    aria-label={ariaLabel}
     class:outline
     class:compact
     class:disabled
@@ -166,6 +170,7 @@
     class:outline
     class:compact
     class:fullWidth
+    aria-label={ariaLabel}
     class={[
       'dodo-ui-Button',
       `size--${size}`,
@@ -215,7 +220,6 @@
 
   .dodo-ui-Button {
     cursor: pointer;
-    outline: none;
     transition: all 150ms;
     text-decoration: none;
     margin: 0;
@@ -227,7 +231,6 @@
     border-style: solid;
     border-width: var(--dodo-ui-element-border-width);
     border-color: transparent;
-    outline: 0;
     color: inherit;
     letter-spacing: 0.3px;
 

package/src/lib/stories/components/Form/Radio/Radio.svelte

@@ -180,7 +180,6 @@
       border-style: solid;
       border-width: calc(var(--dodo-ui-element-border-width) * 2);
       border-color: var(--dodo-ui-Radio-border-color);
-      outline: 0;
       letter-spacing: 0.3px;
       border-radius: inherit;
       position: relative;

package/src/lib/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorButton.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+
+  interface ColorButtonProps {
+    color: string;
+    selectedColor?: string;
+    onclick?: (color: string) => void;
+  }
+
+  const { color, selectedColor, onclick }: ColorButtonProps = $props();
+
+  function onClickMod() {
+    if (onclick) {
+      onclick(color);
+    }
+  }
+</script>
+
+<button
+  class="ColorButton"
+  class:selectedColor={selectedColor === color}
+  onclick={onClickMod}
+  aria-label={`color button ${color}`}
+  style={`background-color: var(--dodo-color-base-${color}-400);`}
+>
+  <Icon icon="material-symbols:check-small" width="24" height="24" />
+</button>
+
+<style lang="scss">
+  .ColorButton {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    margin: 4px;
+    cursor: pointer;
+    color: var(--dodo-color-constant-white);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    border: 3px solid transparent;
+
+    :global(svg) {
+      position: absolute;
+      display: none;
+    }
+
+    &.selectedColor {
+      border-color: var(--dodo-color-primary-600);
+
+      :global(svg) {
+        display: block;
+      }
+    }
+  }
+</style>

package/src/lib/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorTool.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import FormControl from '$lib/stories/components/Form/FormControl/FormControl.svelte';
+  import { colorPaletteBase } from '$lib/stories/developer tools/philosophy/Colors/utils/color.js';
+  import ColorButton from './ColorButton.svelte';
+
+  interface ColorToolProps {
+    label?: string;
+    colors?: string[];
+    selectedColor?: string;
+    onclick?: (color: string) => void;
+  }
+
+  const { colors = colorPaletteBase, selectedColor, onclick, label }: ColorToolProps = $props();
+</script>
+
+<div class="ColorTool">
+  <FormControl {label}>
+    {#each colors as color (color)}
+      <ColorButton {color} {onclick} {selectedColor} />
+    {/each}
+  </FormControl>
+</div>
+
+<style lang="scss">
+  .ColorTool {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: calc(var(--dodo-ui-space) * 2.5);
+    margin-left: -4px;
+    margin-right: -4px;
+  }
+</style>