@flightlesslabs/dodo-ui 0.17.1 → 0.17.2

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

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import Button from '$lib/stories/components/Form/Button/Button.svelte';
+  import { useAutoCustomizeConfigStore } from '../stores/config.svelte.js';
+  import ColorTool from './ColorTool/ColorTool.svelte';
+  import Export from './Export.svelte';
+  import ValueSilder from './ValueSilder/ValueSilder.svelte';
+</script>
+
+<div class="Config">
+  <h3>Auto Customize</h3>
+  <ColorTool
+    label="Primary Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ primary: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.primary}
+    colors={[
+      'violet',
+      'red',
+      'orange',
+      'amber',
+      'yellow',
+      'lime',
+      'green',
+      'emerald',
+      'teal',
+      'cyan',
+      'blue',
+      'indigo',
+      'purple',
+      'fuchsia',
+      'pink',
+      'rose',
+    ]}
+  />
+
+  <ColorTool
+    label="Secondary Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ secondary: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.secondary}
+    colors={[
+      'blue',
+      'red',
+      'orange',
+      'amber',
+      'yellow',
+      'lime',
+      'green',
+      'emerald',
+      'teal',
+      'cyan',
+      'indigo',
+      'violet',
+      'purple',
+      'fuchsia',
+      'pink',
+      'rose',
+    ]}
+  />
+
+  <ColorTool
+    label="Neutral Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ neutral: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.neutral}
+    colors={['gray', 'slate', 'zinc', 'neutral', 'stone']}
+  />
+
+  <ColorTool
+    label="Safe Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ safe: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.safe}
+    colors={['emerald', 'lime', 'green', 'teal']}
+  />
+
+  <ColorTool
+    label="Warning Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ warning: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.warning}
+    colors={['amber', 'red', 'rose', 'orange', 'yellow']}
+  />
+
+  <ColorTool
+    label="Danger Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ danger: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.danger}
+    colors={['red', 'orange', 'amber', 'yellow', 'pink', 'rose']}
+  />
+
+  <ValueSilder
+    label="Roundness:"
+    value={useAutoCustomizeConfigStore.data.components?.roundness || 0}
+    min={-5}
+    max={7}
+    oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ roundness: value })}
+  />
+
+  <ValueSilder
+    label="Size:"
+    value={useAutoCustomizeConfigStore.data.components?.elementHeight || 0}
+    min={-5}
+    max={7}
+    oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ elementHeight: value })}
+  />
+
+  <ValueSilder
+    label="Border:"
+    value={useAutoCustomizeConfigStore.data.components?.borderWidth || 0}
+    min={0}
+    max={7}
+    oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ borderWidth: value })}
+  />
+
+  <ValueSilder
+    label="Space:"
+    value={useAutoCustomizeConfigStore.data.space || 0}
+    min={-5}
+    max={15}
+    oninput={(value) => useAutoCustomizeConfigStore.updateData({ space: value })}
+  />
+
+  <div class="Export">
+    <Export />
+  </div>
+
+  <div class="Reset">
+    <Button onclick={() => useAutoCustomizeConfigStore.reset()} variant="text" color="danger">
+      Reset
+    </Button>
+  </div>
+</div>
+
+<style lang="scss">
+  @use '../../../../../../styles/scss' as *;
+
+  .Config {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--dodo-ui-space) * 2);
+
+    @media (min-width: $breakpoints-lg) {
+      max-width: 300px;
+      height: calc(100vh - 130px);
+      overflow: auto;
+    }
+
+    .Reset {
+      margin-top: calc(var(--dodo-ui-space) * 4);
+    }
+  }
+</style>

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

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import Button from '$lib/stories/components/Form/Button/Button.svelte';
+  import {
+    colorPalette,
+    colorPaletteValues,
+  } from '$lib/stories/developer tools/philosophy/Colors/utils/color.js';
+  import { downloadFile } from '../helpers/download-file.js';
+  import {
+    autoCustomizeConfigdefaultData,
+    useAutoCustomizeConfigStore,
+    type AutoCustomizeConfigDataColors,
+  } from '../stores/config.svelte.js';
+
+  async function onclick() {
+    try {
+      let rawText = `/* dodo-ui-custom.css */
+:root {`;
+
+      for (let index = 0; index < colorPalette.length; index++) {
+        const colorName = colorPalette[index];
+
+        const fieldName = `${colorName}` as keyof AutoCustomizeConfigDataColors;
+
+        const dataPoint =
+          useAutoCustomizeConfigStore.data.colors &&
+          useAutoCustomizeConfigStore.data.colors[fieldName]
+            ? useAutoCustomizeConfigStore.data.colors[fieldName]
+            : undefined;
+
+        const defaultValue =
+          autoCustomizeConfigdefaultData.colors && autoCustomizeConfigdefaultData.colors[fieldName]
+            ? autoCustomizeConfigdefaultData.colors[fieldName]
+            : undefined;
+
+        const pass = dataPoint && dataPoint !== defaultValue ? true : false;
+
+        if (!pass) {
+          continue;
+        }
+
+        rawText += `
+  /* ${colorName} color */`;
+
+        for (let index = 0; index < colorPaletteValues.length; index++) {
+          const weight = colorPaletteValues[index];
+
+          rawText += `
+  --dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weight});`;
+
+          if (colorPaletteValues[index] === colorPaletteValues[colorPaletteValues.length - 1]) {
+            rawText += `
+`;
+          }
+        }
+      }
+
+      if (useAutoCustomizeConfigStore.data.components?.roundness) {
+        const roundness = useAutoCustomizeConfigStore.data.components?.roundness / 8;
+
+        rawText += `
+
+  /* Component: Roundness */
+  --dodo-ui-element-roundness-1: ${0.4375 + roundness}em;
+  --dodo-ui-element-roundness-2: ${0.8125 + roundness}em;
+  --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;
+
+        rawText += `
+
+  /* Component: Size */
+  --dodo-ui-element-height-small: ${34 + elementHeight}px;
+  --dodo-ui-element-height-normal: ${40 + elementHeight}px;
+  --dodo-ui-element-height-large: ${50 + elementHeight}px;
+  --dodo-ui-track-element-height-small: ${6 + elementHeightTrack}px;
+  --dodo-ui-track-element-height-normal: ${8 + elementHeightTrack}px;
+  --dodo-ui-track-element-height-large: ${10 + elementHeightTrack}px;`;
+      }
+
+      if (useAutoCustomizeConfigStore.data.components?.borderWidth) {
+        const borderWidth = useAutoCustomizeConfigStore.data.components.borderWidth;
+
+        rawText += `
+
+  /* Component: Border */
+  --dodo-ui-element-border-width: ${2 + borderWidth}px;`;
+      }
+
+      if (useAutoCustomizeConfigStore.data.space) {
+        const space = useAutoCustomizeConfigStore.data.space;
+
+        rawText += `
+
+  /* Space */
+  --dodo-ui-space-small: ${6 + space}px;
+  --dodo-ui-space: ${8 + space}px;
+  --dodo-ui-space-large: ${10 + space}px;`;
+      }
+
+      // end
+      rawText += `
+}`;
+
+      rawText += `
+
+.dodo-theme--dark {`;
+
+      for (let index = 0; index < colorPalette.length; index++) {
+        const colorName = colorPalette[index];
+
+        const fieldName = `${colorName}` as keyof AutoCustomizeConfigDataColors;
+
+        const dataPoint =
+          useAutoCustomizeConfigStore.data.colors &&
+          useAutoCustomizeConfigStore.data.colors[fieldName]
+            ? useAutoCustomizeConfigStore.data.colors[fieldName]
+            : undefined;
+
+        const defaultValue =
+          autoCustomizeConfigdefaultData.colors && autoCustomizeConfigdefaultData.colors[fieldName]
+            ? autoCustomizeConfigdefaultData.colors[fieldName]
+            : undefined;
+
+        const pass = dataPoint && dataPoint !== defaultValue ? true : false;
+
+        if (!pass) {
+          continue;
+        }
+
+        rawText += `
+
+  /* Dark: ${colorName} color */`;
+
+        const colorPaletteValuesReversed = [...colorPaletteValues].reverse();
+
+        for (let index = 0; index < colorPaletteValues.length; index++) {
+          const weight = colorPaletteValues[index];
+          const weightReversed = colorPaletteValuesReversed[index];
+
+          rawText += `
+  --dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weightReversed});`;
+        }
+
+        if (
+          colorPaletteValuesReversed[index] ===
+          colorPaletteValuesReversed[colorPaletteValuesReversed.length - 1]
+        ) {
+          rawText += `
+`;
+        }
+      }
+
+      // end
+      rawText += `
+}`;
+
+      const data = new Blob([rawText], { type: 'text/plain' });
+
+      await downloadFile(`dodo-ui-custom.css`, data);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+</script>
+
+<Button {onclick}>Export CSS</Button>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import FormControl from '$lib/stories/components/Form/FormControl/FormControl.svelte';
+  import RangeSlider from '$lib/stories/components/Form/RangeSlider/RangeSlider.svelte';
+
+  interface ValueSilderProps {
+    label?: string;
+    value: number;
+    min: number;
+    max: number;
+    /** oninput event handler */
+    oninput?: (value: number) => void;
+  }
+
+  const { label, value, min, max, oninput }: ValueSilderProps = $props();
+
+  let displayValue = $state(0);
+
+  function oninputMod(e: Event) {
+    const target = e.target as HTMLInputElement;
+
+    if (oninput) {
+      oninput(Number(target.value));
+    }
+  }
+
+  $effect(() => {
+    if (value === 0) {
+      displayValue = 1;
+    } else if (value < 0) {
+      displayValue = value;
+    } else {
+      displayValue = value + 1;
+    }
+  });
+</script>
+
+<div class="ValueSilder">
+  <FormControl label={`${label} ${displayValue}x`}>
+    <RangeSlider {value} {min} {max} oninput={oninputMod} size="small" />
+  </FormControl>
+</div>
+
+<style lang="scss">
+  .ValueSilder {
+    margin-bottom: calc(var(--dodo-ui-space) * 2.5);
+  }
+</style>

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

@@ -0,0 +1,227 @@
+<script lang="ts">
+  import Button from '$lib/stories/components/Form/Button/Button.svelte';
+  import RangeSlider from '$lib/stories/components/Form/RangeSlider/RangeSlider.svelte';
+  import Column from '$lib/stories/components/Layout/Grid/Column/Column.svelte';
+  import Grid from '$lib/stories/components/Layout/Grid/Grid.svelte';
+  import Paper from '$lib/stories/components/Layout/Paper/Paper.svelte';
+  import {
+    colorPalette,
+    colorPaletteValues,
+  } from '$lib/stories/developer tools/philosophy/Colors/utils/color.js';
+  import {
+    useAutoCustomizeConfigStore,
+    type AutoCustomizeConfigDataColors,
+  } from '../stores/config.svelte.js';
+
+  let cssVariables = $state<string[]>([]);
+
+  $effect(() => {
+    const newCssvariables: string[] = [];
+
+    for (let index = 0; index < colorPalette.length; index++) {
+      const colorName = colorPalette[index];
+      const fieldName = `${colorName}` as keyof AutoCustomizeConfigDataColors;
+
+      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 lang="scss">
+  @use '../../../../../../styles/scss' as *;
+
+  :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: $breakpoints-lg) {
+      flex: 1;
+      width: initial;
+      height: calc(100vh - 130px);
+      overflow: auto;
+    }
+
+    .section {
+      width: 100%;
+      margin: var(--dodo-ui-space) 0;
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .column {
+      margin: 4px;
+      display: inline-flex;
+    }
+
+    :global(.GridSection) {
+      width: 100%;
+    }
+  }
+</style>

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

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

package/src/lib/stories/developer tools/customize/AutoCustomize/Tool/helpers/download-file.ts

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