@flightlesslabs/dodo-ui 0.17.1 → 0.18.0

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);
+  }
+}

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

@@ -0,0 +1,107 @@
+import { browser } from '$app/environment';
+
+const AUTO_CUSTOMIZE_TOOL_CONFIG = 'AUTO_CUSTOMIZE_TOOL_CONFIG';
+
+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 const autoCustomizeConfigdefaultData: AutoCustomizeConfigData = {
+  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 as AutoCustomizeConfigData;
+}
+
+function createAutoCustomizeConfigStore() {
+  let updatedAt: number = $state(Date.now());
+  let data: AutoCustomizeConfigData = $state(getDefaultData());
+
+  return {
+    get data() {
+      return data;
+    },
+    get updatedAt() {
+      return updatedAt;
+    },
+    updateData(newData: Partial<AutoCustomizeConfigData>) {
+      data = {
+        ...data,
+        ...newData,
+      };
+      updatedAt = Date.now();
+
+      if (browser) {
+        localStorage.setItem(AUTO_CUSTOMIZE_TOOL_CONFIG, JSON.stringify(newData));
+      }
+    },
+    updateDataColor(newData: Partial<AutoCustomizeConfigDataColors>) {
+      const colors = {
+        ...data.colors,
+        ...newData,
+      };
+
+      this.updateData({ colors });
+    },
+    updateDataComponents(newData: Partial<AutoCustomizeConfigDataComponents>) {
+      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/src/lib/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/src/lib/types/special.ts

@@ -0,0 +1 @@
+export type DropdownArrowPosition = false | 'before' | 'after';