@flightlesslabs/dodo-ui 0.19.1 → 0.20.0

package/src/lib/stories/developer tools/helpers/logger/logger.ts

@@ -1,46 +0,0 @@
-export type LogLevel = 'info' | 'warn' | 'error';
-
-export interface LoggerOptions {
-  /**
-   * Optional label to prefix log entries.
-   */
-  label?: string;
-
-  /**
-   * Whether to actually show logs.
-   * Defaults to true.
-   */
-  show?: boolean;
-}
-
-/**
- * Formats the log message with timestamp, label, and level.
- */
-export function formatPrefix(level: LogLevel, label?: string): string {
-  const timestamp = new Date().toISOString();
-  const labelPart = label ? `[${label}]` : '';
-  return `[${timestamp}] ${labelPart} [${level.toUpperCase()}]`;
-}
-
-/**
- * Creates a logger that logs every call unless disabled by show=false.
- */
-export default function createLogger(options: LoggerOptions = {}) {
-  const { label, show = true } = options;
-
-  function shouldLog() {
-    return show;
-  }
-
-  return {
-    info: (msg: unknown, ...optionalParams: unknown[]) => {
-      if (shouldLog()) console.info(formatPrefix('info', label), msg, ...optionalParams);
-    },
-    warn: (msg: unknown, ...optionalParams: unknown[]) => {
-      if (shouldLog()) console.warn(formatPrefix('warn', label), msg, ...optionalParams);
-    },
-    error: (msg: unknown, ...optionalParams: unknown[]) => {
-      if (shouldLog()) console.error(formatPrefix('error', label), msg, ...optionalParams);
-    },
-  };
-}

package/src/lib/stories/developer tools/philosophy/Colors/Colors.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-  import Swatches from './Swatches/Swatches.svelte';
-  import { colorPalette, colorPaletteBase, colorPaletteNeutral } from './utils/color.js';
-
-  interface ColorsProps {
-    swatchType?:
-      | 'base-colors'
-      | 'base-colors-neutral'
-      | 'colors'
-      | 'colors-neutral'
-      | 'colors-constant';
-  }
-
-  const { swatchType }: ColorsProps = $props();
-</script>
-
-<div class="Colors">
-  {#if swatchType === 'base-colors'}
-    {#each colorPaletteBase as colorPaletteItem (colorPaletteItem)}
-      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-base-" isColorPaletteValues />
-    {/each}
-  {:else if swatchType === 'base-colors-neutral'}
-    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
-      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-base-" />
-    {/each}
-  {:else if swatchType === 'colors'}
-    {#each colorPalette as colorPaletteItem (colorPaletteItem)}
-      <Swatches colorPalette={colorPaletteItem} isColorPaletteValues />
-    {/each}
-  {:else if swatchType === 'colors-neutral'}
-    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
-      <Swatches colorPalette={colorPaletteItem} />
-    {/each}
-  {:else if swatchType === 'colors-constant'}
-    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
-      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-constant-" />
-    {/each}
-  {/if}
-</div>
-
-<style lang="scss">
-  .Colors {
-    display: flex;
-    flex-direction: column;
-  }
-</style>

package/src/lib/stories/developer tools/philosophy/Colors/Opacity.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import Palette from './Swatches/Palette.svelte';
-</script>
-
-<div class="Opacity">
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 10%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 20%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 30%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 40%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 50%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 60%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 70%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 80%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 90%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 100%, transparent)" />
-</div>
-
-<style lang="scss">
-  .Opacity {
-    display: flex;
-    flex-wrap: wrap;
-  }
-</style>

package/src/lib/stories/developer tools/philosophy/Colors/Swatches/Palette.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-  interface PaletteProps {
-    backgroundColor: string;
-  }
-
-  const { backgroundColor }: PaletteProps = $props();
-
-  function onclick() {
-    navigator.clipboard.writeText(backgroundColor);
-  }
-</script>
-
-<!-- svelte-ignore a11y_consider_explicit_label -->
-<button
-  class="Palette"
-  style={`background-color: ${backgroundColor};`}
-  {onclick}
-  title="Click to copy value!"
-></button>
-
-<style lang="scss">
-  .Palette {
-    display: flex;
-    width: 60px;
-    height: 60px;
-    border-radius: 4px;
-    border: 1px solid;
-    border-color: color-mix(in oklab, var(--dodo-color-neutral-800) 20%, transparent);
-    background: transparent;
-    min-width: initial;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    outline: 0;
-    transition: all 100ms;
-
-    &:hover {
-      border-width: 2px;
-    }
-
-    &:active {
-      border-color: color-mix(in oklab, var(--dodo-color-primary-800) 80%, transparent);
-      border-width: 2px;
-    }
-  }
-</style>

package/src/lib/stories/developer tools/philosophy/Colors/Swatches/Swatch.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import Palette from './Palette.svelte';
-
-  interface SwatchProps {
-    colorPalette: string;
-    colorPaletteValue?: string;
-    prefix?: string;
-  }
-
-  const { colorPalette, colorPaletteValue, prefix = '--dodo-color-' }: SwatchProps = $props();
-</script>
-
-<div class="Swatch">
-  {#if colorPaletteValue}
-    <Palette backgroundColor={`var(${prefix}${colorPalette}-${colorPaletteValue})`} />
-  {:else}
-    <Palette backgroundColor={`var(${prefix}${colorPalette})`} />
-  {/if}
-
-  <div class="colorPaletteValue">{colorPaletteValue}</div>
-</div>
-
-<style lang="scss">
-  .Swatch {
-    color: var(--dodo-color-neutral-900);
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    margin: 4px;
-
-    .colorPaletteValue {
-      margin-top: 8px;
-    }
-  }
-</style>

package/src/lib/stories/developer tools/philosophy/Colors/Swatches/Swatches.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-  import { colorPaletteValues } from '../utils/color.js';
-  import Swatch from './Swatch.svelte';
-
-  interface SwatchesProps {
-    colorPalette: string;
-    prefix?: string;
-    isColorPaletteValues?: boolean;
-  }
-
-  const { colorPalette, prefix, isColorPaletteValues = false }: SwatchesProps = $props();
-</script>
-
-<ul class="Swatches">
-  <b>{colorPalette}</b>
-
-  {#if isColorPaletteValues}
-    {#each colorPaletteValues as colorPaletteValue (colorPaletteValue)}
-      <li>
-        <Swatch {colorPalette} {colorPaletteValue} {prefix} />
-      </li>
-    {/each}
-  {:else}
-    <li>
-      <Swatch {colorPalette} {prefix} />
-    </li>
-  {/if}
-</ul>
-
-<style lang="scss">
-  .Swatches {
-    color: var(--dodo-color-neutral-900);
-    margin: 0;
-    padding: 0;
-    width: 150px;
-    margin: 16px 0;
-    display: flex;
-    width: 100%;
-
-    b {
-      text-transform: capitalize;
-      display: flex;
-      font-weight: 500;
-      width: 100px;
-      align-items: center;
-      margin-bottom: 30px;
-    }
-
-    li {
-      display: flex;
-      align-items: center;
-      margin-bottom: 10px;
-    }
-  }
-</style>

package/src/lib/stories/developer tools/philosophy/Colors/utils/color.ts

@@ -1,41 +0,0 @@
-export const colorPaletteBase = [
-  'red',
-  'orange',
-  'amber',
-  'yellow',
-  'lime',
-  'green',
-  'emerald',
-  'teal',
-  'cyan',
-  'blue',
-  'indigo',
-  'violet',
-  'purple',
-  'fuchsia',
-  'pink',
-  'rose',
-  'slate',
-  'gray',
-  'zinc',
-  'neutral',
-  'stone',
-];
-
-export const colorPaletteNeutral = ['black', 'white'];
-
-export const colorPalette = ['primary', 'secondary', 'neutral', 'safe', 'warning', 'danger'];
-
-export const colorPaletteValues = [
-  '50',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-  '950',
-];

package/src/lib/styles/global.css

@@ -1,7 +0,0 @@
-@import '_minimal-reset.css';
-@import '_colors-base.css';
-@import '_colors.css';
-@import '_space.css';
-@import '_z-index.css';
-@import '_shadow.css';
-@import '_components.css';

package/src/lib/styles/scss/_breakpoints.scss

@@ -1,5 +0,0 @@
-$breakpoints-sm: 40rem;
-$breakpoints-md: 48rem;
-$breakpoints-lg: 64rem;
-$breakpoints-xl: 80rem;
-$breakpoints-xl2: 96rem;

package/src/lib/styles/scss/index.scss

@@ -1 +0,0 @@
-@forward 'breakpoints';

package/src/lib/types/colors.ts

@@ -1,16 +0,0 @@
-/** Component Color*/
-export type ComponentColorPriority = 'primary' | 'secondary' | 'neutral';
-export const componentColorPriorityArray: ComponentColorPriority[] = [
-  'primary',
-  'secondary',
-  'neutral',
-];
-
-export type ComponentColorSeverity = 'safe' | 'warning' | 'danger';
-export const componentColorSeverityArray: ComponentColorSeverity[] = ['safe', 'warning', 'danger'];
-
-export type ComponentColor = ComponentColorPriority | ComponentColorSeverity;
-export const componentColorArray: ComponentColor[] = [
-  ...componentColorPriorityArray,
-  ...componentColorSeverityArray,
-];

package/src/lib/types/position.ts

@@ -1,5 +0,0 @@
-export type PositionY = 'top' | 'middle' | 'bottom';
-export type PositionX = 'left' | 'center' | 'right';
-
-export const positionYArray: PositionY[] = ['top', 'bottom'];
-export const positionXArray: PositionX[] = ['left', 'center', 'right'];

package/src/lib/types/roundness.ts

@@ -1,3 +0,0 @@
-/** Component Roundness */
-export type ComponentRoundness = 0 | 1 | 2 | 3 | 'full';
-export const componentRoundnessArray: ComponentRoundness[] = [0, 1, 2, 3, 'full'];

package/src/lib/types/shadow.ts

@@ -1,3 +0,0 @@
-/** Component Shadow */
-export type ComponentShadow = 0 | 1 | 2 | 3 | 4 | 5;
-export const componentShadowArray: ComponentShadow[] = [0, 1, 2, 3, 4, 5];

package/src/lib/types/size.ts

@@ -1,3 +0,0 @@
-/** Component Size */
-export type ComponentSize = 'normal' | 'small' | 'large';
-export const componentSizeArray: ComponentSize[] = ['normal', 'small', 'large'];

package/src/lib/types/special.ts

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

package/src/lib/types/weight.ts

@@ -1,3 +0,0 @@
-/** Component Weight */
-export type ComponentWeight = 'solid' | 'text';
-export const componentWeightArray: ComponentWeight[] = ['solid', 'text'];