@flightlesslabs/dodo-ui 0.19.1 → 1.0.0--beta-2

package/src/lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte

@@ -1,130 +0,0 @@
-<script lang="ts" module>
-  import type { ComponentSize } from '$lib/types/size.js';
-  import type { Snippet } from 'svelte';
-  import type { MouseEventHandler } from 'svelte/elements';
-
-  export interface UtilityButtonProps {
-    /** Button contents goes here*/
-    children?: Snippet;
-    /** Button ref */
-    ref?: HTMLButtonElement;
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** Button disabled state */
-    disabled?: boolean;
-    /** Name */
-    name?: string;
-    /** Id */
-    id?: string;
-    /** Title (for tooltip) */
-    title?: string;
-    /** Custom css class*/
-    class?: string;
-    /** The onclick event handler */
-    onclick?: MouseEventHandler<HTMLButtonElement>;
-  }
-</script>
-
-<script lang="ts">
-  let {
-    children,
-    size = 'normal',
-    name,
-    id,
-    title,
-    class: className = '',
-    disabled = false,
-    onclick,
-    ref = $bindable<HTMLButtonElement>(),
-  }: UtilityButtonProps = $props();
-</script>
-
-<button
-  class={['dodo-ui-UtilityButton', `size--${size}`, className].join(' ')}
-  {name}
-  {id}
-  {title}
-  {disabled}
-  {onclick}
-  bind:this={ref}
->
-  {#if children}
-    {@render children()}
-  {/if}
-</button>
-
-<style lang="scss">
-  :global(:root) {
-    --dodo-ui-UtilityButton-hover: var(--dodo-color-primary-600);
-    --dodo-ui-UtilityButton-active: var(--dodo-color-primary-600);
-
-    --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-neutral-400);
-  }
-
-  :global(.dodo-theme--dark) {
-    --dodo-ui-UtilityButton-hover: var(--dodo-color-primary-600);
-    --dodo-ui-UtilityButton-active: var(--dodo-color-primary-600);
-
-    --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-neutral-500);
-  }
-
-  .dodo-ui-UtilityButton {
-    cursor: pointer;
-    outline: none;
-    transition: all 150ms;
-    text-decoration: none;
-    margin: 0;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    font-family: inherit;
-    background-color: transparent;
-    border: 0;
-    outline: 0;
-    padding: 0;
-    color: var(--dodo-color-neutral-700);
-    border-radius: 50%;
-    font-family: inherit;
-
-    &:hover {
-      color: var(--dodo-ui-UtilityButton-hover);
-    }
-
-    &:active {
-      color: var(--dodo-ui-UtilityButton-active);
-    }
-
-    &.size {
-      &--normal {
-        height: var(--dodo-ui-element-height-normal);
-        width: var(--dodo-ui-element-height-normal);
-        font-size: 1rem;
-      }
-
-      &--small {
-        height: var(--dodo-ui-element-height-small);
-        width: var(--dodo-ui-element-height-small);
-        font-size: 0.9rem;
-      }
-
-      &--large {
-        height: var(--dodo-ui-element-height-large);
-        width: var(--dodo-ui-element-height-large);
-        font-size: 1.1rem;
-      }
-    }
-
-    &[disabled] {
-      cursor: initial;
-      color: var(--dodo-ui-UtilityButton-disabled-color);
-
-      &:hover {
-        color: var(--dodo-ui-UtilityButton-disabled-color);
-      }
-
-      &:active {
-        color: var(--dodo-ui-UtilityButton-disabled-color);
-      }
-    }
-  }
-</style>

package/src/lib/stories/developer tools/components/UtilityIcon/UtilityIcon.svelte

@@ -1,90 +0,0 @@
-<script lang="ts" module>
-  import type { ComponentSize } from '$lib/types/size.js';
-  import type { Snippet } from 'svelte';
-
-  export interface UtilityIconProps {
-    /** Button contents goes here*/
-    children?: Snippet;
-    /** Button ref */
-    ref?: HTMLSpanElement;
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** Button disabled state */
-    disabled?: boolean;
-    /** Id */
-    id?: string;
-    /** Custom css class*/
-    class?: string;
-  }
-</script>
-
-<script lang="ts">
-  let {
-    children,
-    size = 'normal',
-    id,
-    class: className = '',
-    disabled = false,
-    ref = $bindable<HTMLButtonElement>(),
-  }: UtilityIconProps = $props();
-</script>
-
-<span
-  class={['dodo-ui-UtilityIcon', `size--${size}`, className].join(' ')}
-  class:disabled
-  {id}
-  bind:this={ref}
->
-  {#if children}
-    {@render children()}
-  {/if}
-</span>
-
-<style lang="scss">
-  :global(:root) {
-    --dodo-ui-UtilityIcon-disabled-color: var(--dodo-color-neutral-400);
-  }
-
-  :global(.dodo-theme--dark) {
-    --dodo-ui-UtilityIcon-disabled-color: var(--dodo-color-neutral-500);
-  }
-
-  .dodo-ui-UtilityIcon {
-    outline: none;
-    transition: all 150ms;
-    text-decoration: none;
-    margin: 0;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    font-family: inherit;
-    background-color: transparent;
-    color: var(--dodo-color-neutral-600);
-    font-family: inherit;
-
-    &.size {
-      &--normal {
-        height: var(--dodo-ui-element-height-normal);
-        width: var(--dodo-ui-element-height-normal);
-        font-size: 1rem;
-      }
-
-      &--small {
-        height: var(--dodo-ui-element-height-small);
-        width: var(--dodo-ui-element-height-small);
-        font-size: 0.9rem;
-      }
-
-      &--large {
-        height: var(--dodo-ui-element-height-large);
-        width: var(--dodo-ui-element-height-large);
-        font-size: 1.1rem;
-      }
-    }
-
-    &.disabled {
-      cursor: initial;
-      color: var(--dodo-ui-UtilityIcon-disabled-color);
-    }
-  }
-</style>

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

@@ -1,56 +0,0 @@
-<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

@@ -1,32 +0,0 @@
-<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>

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

@@ -1,149 +0,0 @@
-<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

@@ -1,172 +0,0 @@
-<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

@@ -1,47 +0,0 @@
-<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>