@flightlesslabs/dodo-ui 0.19.0 → 0.20.0

package/src/lib/stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.ts

@@ -1,122 +0,0 @@
-import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
-import type { DateOfMonth } from '../types.js';
-import type { CalendarWeekNames } from '$lib/index.js';
-import dayjsLib from 'dayjs'; // Only needed for types
-
-type Dayjs = ReturnType<typeof dayjsLib>;
-
-/** Settings for generating calendar dates */
-export interface CreateDatesOfMonthSettings {
-  startOfWeek?: CalendarWeekNames;
-  showLastMonth?: boolean;
-  showNextMonth?: boolean;
-  today?: Date;
-  minDate?: Date;
-  maxDate?: Date;
-  excludeDates?: Date[];
-  includeDates?: Date[];
-  timezone?: string;
-  utc?: boolean;
-}
-
-export type CreateDateOfMonthType = 'currentMonth' | 'nextMonth' | 'lastMonth';
-
-/**
- * Creates a moment object from a Date with optional timezone and UTC settings.
- */
-function dateMoment(
-  date?: Date,
-  settings?: CreateDatesOfMonthSettings,
-): ReturnType<typeof getMoment> {
-  return getMoment(date, undefined, {
-    timezone: settings?.timezone,
-    utc: settings?.utc,
-  });
-}
-
-/**
- * Determines if the given day matches "today" (manual or actual).
- */
-function getIsToday(dayMoment: Dayjs, todayDate: string, todayManual?: string): boolean {
-  const dayDateFormat = dayMoment.format('DD-MM-YYYY');
-  return todayManual === dayDateFormat || todayDate === dayDateFormat;
-}
-
-/**
- * Determines if a date should be disabled based on limits and included/excluded lists.
- */
-function getIsDateDisabled(
-  dayMoment: Dayjs,
-  minDate?: Dayjs,
-  maxDate?: Dayjs,
-  excludeDates?: string[],
-  includeDates?: string[],
-): boolean {
-  const dayDateFormat = dayMoment.format('DD-MM-YYYY');
-
-  if (minDate?.isValid() && dayMoment.isBefore(minDate)) return true;
-  if (maxDate?.isValid() && dayMoment.isAfter(maxDate)) return true;
-  if (excludeDates?.includes(dayDateFormat)) return true;
-  if (includeDates && !includeDates.includes(dayDateFormat)) return true;
-
-  return false;
-}
-
-/**
- * Generates a DateOfMonth object with metadata for a specific day, including
- * whether it's part of the current month, disabled, or today.
- *
- * @param date - The day to convert.
- * @param settings - Optional configuration settings.
- * @param monthType - Specifies if the day belongs to the current, previous, or next month.
- * @param manipulateDate - Optional function to customize the resulting date object.
- * @returns A DateOfMonth object representing the day.
- */
-export default function createDateOfMonth(
-  date?: Date,
-  settings?: CreateDatesOfMonthSettings,
-  monthType: CreateDateOfMonthType = 'currentMonth',
-  manipulateDate?: (
-    dateToModify: DateOfMonth,
-    settings?: CreateDatesOfMonthSettings,
-  ) => DateOfMonth,
-): DateOfMonth {
-  const minDate = settings?.minDate ? dateMoment(settings.minDate, settings) : undefined;
-  const maxDate = settings?.maxDate ? dateMoment(settings.maxDate, settings) : undefined;
-
-  const excludeDates = settings?.excludeDates?.map((item) =>
-    dateMoment(item, settings).format('DD-MM-YYYY'),
-  );
-  const includeDates = settings?.includeDates?.map((item) =>
-    dateMoment(item, settings).format('DD-MM-YYYY'),
-  );
-
-  const todayDate = dateMoment(undefined, settings).format('DD-MM-YYYY');
-  const todayManual = settings?.today
-    ? dateMoment(settings.today, settings).format('DD-MM-YYYY')
-    : undefined;
-
-  const dayMoment = dateMoment(date, settings);
-
-  let dataToExport: DateOfMonth = {
-    id: `${dayMoment.valueOf()}`,
-    date: dayMoment.toDate(),
-    isCurrentMonth: true,
-    disabled: getIsDateDisabled(dayMoment, minDate, maxDate, excludeDates, includeDates),
-    today: getIsToday(dayMoment, todayDate, todayManual),
-  };
-
-  if (monthType === 'lastMonth') {
-    dataToExport.isLastMonth = true;
-    dataToExport.isCurrentMonth = false;
-  } else if (monthType === 'nextMonth') {
-    dataToExport.isNextMonth = true;
-    dataToExport.isCurrentMonth = false;
-  }
-
-  if (manipulateDate) {
-    dataToExport = manipulateDate(dataToExport, settings);
-  }
-
-  return dataToExport;
-}

package/src/lib/stories/components/Info/Calendar/utils/getDatesOfMonth/getDatesOfMonth.ts

@@ -1,114 +0,0 @@
-import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
-import {
-  calendarWeekOptions,
-  createDateOfMonth,
-  type CreateDatesOfMonthSettings,
-  type DateOfMonth,
-} from '$lib/index.js';
-
-/**
- * Divides an array into chunks of a given size.
- *
- * @template T - The type of elements in the array.
- * @param arr - The array to be chunked.
- * @param size - The chunk size.
- * @returns An array of chunks.
- */
-function chunkArray<T>(arr: T[], size: number): T[][] {
-  const result: T[][] = [];
-  for (let i = 0; i < arr.length; i += size) {
-    result.push(arr.slice(i, i + size));
-  }
-  return result;
-}
-
-/**
- * Creates a moment object from a Date with optional timezone and UTC settings.
- *
- * @param date - The date to convert.
- * @param settings - Optional settings for timezone and UTC.
- * @returns A moment object with the applied settings.
- */
-function dateMoment(date?: Date, settings?: CreateDatesOfMonthSettings) {
-  return getMoment(date, undefined, {
-    timezone: settings?.timezone,
-    utc: settings?.utc,
-  });
-}
-
-/**
- * Generates a calendar grid of dates for a given month.
- *
- * @param date - The base date for the month to generate.
- * @param settings - Optional settings for formatting and display.
- * @param manipulateDate - Optional function to modify each generated DateOfMonth.
- * @returns A 2D array of DateOfMonth objects representing the calendar, or null if invalid.
- */
-export default function getDatesOfMonth(
-  date?: Date,
-  settings?: CreateDatesOfMonthSettings,
-  manipulateDate?: (
-    dateToModify: DateOfMonth,
-    settings?: CreateDatesOfMonthSettings,
-  ) => DateOfMonth,
-): DateOfMonth[][] | null {
-  if (!date) {
-    return null;
-  }
-
-  const monthMoment = dateMoment(date, settings).startOf('month').startOf('day');
-
-  if (!monthMoment.isValid()) {
-    return null;
-  }
-
-  const showNextMonth = settings?.showNextMonth !== false;
-  const showLastMonth = settings?.showLastMonth !== false;
-
-  const startOfWeek =
-    calendarWeekOptions.find((item) => item.abr3 === settings?.startOfWeek) ||
-    calendarWeekOptions[0];
-
-  const rawStartOfMonthDay = monthMoment.day();
-  const startOfMonthDay = (rawStartOfMonthDay - startOfWeek.value + 7) % 7;
-
-  const daysInMonth = monthMoment.daysInMonth();
-  const dates: DateOfMonth[] = [];
-
-  const lastMonth = monthMoment.clone().subtract(startOfMonthDay, 'days');
-  const nextMonth = monthMoment.clone().add(1, 'month');
-
-  if (showLastMonth) {
-    for (let gap = 0; gap < startOfMonthDay; gap++) {
-      const dayMoment = lastMonth.clone().add(gap, 'days');
-      dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'lastMonth', manipulateDate));
-    }
-  }
-
-  for (let day = 1; day <= daysInMonth; day++) {
-    const dayMoment = monthMoment.clone().set('date', day);
-    dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'currentMonth', manipulateDate));
-  }
-
-  const datesDivided = chunkArray<DateOfMonth>(dates, 7);
-
-  if (showNextMonth) {
-    const lastRow = datesDivided[datesDivided.length - 1];
-    const nextMonthDaysRequired = 7 - lastRow.length;
-
-    if (nextMonthDaysRequired > 0) {
-      const nextMonthDates: DateOfMonth[] = [];
-
-      for (let gap = 0; gap < nextMonthDaysRequired; gap++) {
-        const dayMoment = nextMonth.clone().add(gap, 'days');
-        nextMonthDates.push(
-          createDateOfMonth(dayMoment.toDate(), settings, 'nextMonth', manipulateDate),
-        );
-      }
-
-      datesDivided[datesDivided.length - 1] = [...lastRow, ...nextMonthDates];
-    }
-  }
-
-  return datesDivided;
-}

package/src/lib/stories/components/Info/Calendar/utils/types.ts

@@ -1,34 +0,0 @@
-export const enum DAYS_OF_WEEK {
-  SUN,
-  MON,
-  TUE,
-  WED,
-  THU,
-  FRI,
-  SAT,
-}
-
-export const enum MONTHS {
-  JAN,
-  FEB,
-  MAR,
-  APR,
-  MAY,
-  JUN,
-  JUL,
-  AUG,
-  SEP,
-  OCT,
-  NOV,
-  DEC,
-}
-
-export type DateOfMonth = {
-  id: string;
-  date: Date;
-  isCurrentMonth: boolean;
-  isLastMonth?: boolean;
-  isNextMonth?: boolean;
-  disabled?: boolean;
-  today?: boolean;
-};

package/src/lib/stories/components/Layout/Accordian/Accordian.svelte

@@ -1,195 +0,0 @@
-<script lang="ts" module>
-  import type { ComponentSize } from '$lib/types/size.js';
-  import type { IconPosition } from '$lib/types/special.js';
-  import Icon from '@iconify/svelte';
-  import { onMount, type Snippet } from 'svelte';
-  import type { EventHandler } from 'svelte/elements';
-
-  export type AccordianToggleEvent = Event & {
-    currentTarget: EventTarget & HTMLDetailsElement;
-  };
-
-  export interface AccordianProps {
-    /** Contents goes here */
-    children?: Snippet;
-    /** Accordian summary */
-    summary?: Snippet;
-    /** summary full width */
-    fullWidthSummary?: boolean;
-    /** Accordian ref */
-    ref?: HTMLDetailsElement;
-    /** Custom css class */
-    class?: string;
-    /** The toggle event handler */
-    ontoggle?: EventHandler<Event, HTMLDetailsElement>;
-    /**  Open state, for dynmaic Accordians */
-    open?: boolean;
-    /** default Open, for static Accordians */
-    defaultOpen?: boolean;
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** Select Dropdown Arrow Position */
-    dropdownArrowPosition?: IconPosition;
-    /** Dropdown Arrow Icon */
-    customDropdownArrowIcon?: (open: boolean) => Snippet;
-  }
-</script>
-
-<script lang="ts">
-  let {
-    class: className = '',
-    ref = $bindable<HTMLDetailsElement>(),
-    ontoggle,
-    open = $bindable<boolean>(),
-    defaultOpen,
-    summary,
-    children,
-    size = 'normal',
-    fullWidthSummary = false,
-    customDropdownArrowIcon: customDropdownArrowIconInternal,
-    dropdownArrowPosition = 'before',
-  }: AccordianProps = $props();
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customDropdownArrowIconTyped = customDropdownArrowIconInternal as any;
-
-  let isUserInteraction = $state(false);
-
-  function ontoggleMod(e: AccordianToggleEvent) {
-    if (isUserInteraction) {
-      if (ontoggle) {
-        ontoggle(e);
-      }
-    }
-
-    isUserInteraction = false;
-  }
-
-  function onsummaryclick() {
-    isUserInteraction = true;
-  }
-
-  onMount(() => {
-    if (open === true) {
-      ref.open = true;
-    } else if (open === false) {
-      ref.open = false;
-    } else if (defaultOpen === true) {
-      ref.open = true;
-    } else if (defaultOpen === false) {
-      ref.open = false;
-    }
-  });
-</script>
-
-{#snippet dropdownArrowIcon()}
-  {#if customDropdownArrowIconTyped}
-    {@render customDropdownArrowIconTyped(open)}
-  {:else}
-    <div class="IconOpen">
-      <Icon icon="material-symbols:arrow-drop-up-rounded" width="32" height="32" />
-    </div>
-    <div class="IconClose">
-      <Icon icon="material-symbols:arrow-drop-down-rounded" width="32" height="32" />
-    </div>
-  {/if}
-{/snippet}
-
-<details
-  class:fullWidthSummary
-  class={['dodo-ui-Accordian', `size--${size}`, className].join(' ')}
-  bind:this={ref}
-  {open}
-  ontoggle={ontoggleMod}
->
-  {#if summary}
-    <summary onclick={onsummaryclick}>
-      {#if dropdownArrowPosition === 'before'}
-        <div class:open class="DropdownArrow before">
-          {@render dropdownArrowIcon()}
-        </div>
-      {/if}
-      {@render summary()}
-      {#if dropdownArrowPosition === 'after'}
-        <div class:open class="DropdownArrow after">
-          {@render dropdownArrowIcon()}
-        </div>
-      {/if}
-    </summary>
-  {/if}
-
-  {#if children}
-    <div class="AccordianContent">
-      {@render children()}
-    </div>
-  {/if}
-</details>
-
-<style lang="scss">
-  .dodo-ui-Accordian {
-    color: var(--dodo-color-neutral-900);
-    width: 100%;
-
-    summary {
-      display: inline-flex;
-      align-items: center;
-      cursor: pointer;
-      user-select: none;
-      font-weight: 500;
-    }
-
-    &.fullWidthSummary {
-      summary {
-        display: flex;
-        width: 100%;
-      }
-    }
-
-    &[open] {
-      .IconOpen {
-        display: flex;
-      }
-
-      .IconClose {
-        display: none;
-      }
-    }
-
-    &:not([open]) {
-      .IconOpen {
-        display: none;
-      }
-
-      .IconClose {
-        display: flex;
-      }
-    }
-
-    &.size {
-      &--normal {
-        summary {
-          font-size: 1rem;
-          min-height: var(--dodo-ui-element-height-normal);
-        }
-      }
-
-      &--small {
-        summary {
-          font-size: 0.9rem;
-          min-height: var(--dodo-ui-element-height-small);
-        }
-      }
-
-      &--large {
-        summary {
-          font-size: 1.1rem;
-          min-height: var(--dodo-ui-element-height-large);
-        }
-      }
-    }
-
-    .AccordianContent {
-      margin-top: var(--dodo-ui-space);
-    }
-  }
-</style>

package/src/lib/stories/components/Layout/Grid/Column/Column.svelte

@@ -1,127 +0,0 @@
-<script lang="ts" module>
-  import { type Snippet } from 'svelte';
-
-  export type GridColumnSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-  export const GridColumnSizeArray: GridColumnSize[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-
-  export interface GridColumnProps {
-    /** GridColumn contents goes here */
-    children?: Snippet;
-    /** GridColumn ref */
-    ref?: HTMLDivElement;
-    /** Custom css class */
-    class?: string;
-    /** Breakpoint: sm */
-    sm?: GridColumnSize;
-    /** Breakpoint: md */
-    md?: GridColumnSize;
-    /** Breakpoint: lg */
-    lg?: GridColumnSize;
-    /** Breakpoint: xl */
-    xl?: GridColumnSize;
-    /** Breakpoint: 2 xl */
-    xl2?: GridColumnSize;
-  }
-</script>
-
-<script lang="ts">
-  let {
-    children,
-    class: className = '',
-    ref = $bindable<HTMLDivElement>(),
-    sm = 12,
-    md,
-    lg,
-    xl,
-    xl2,
-  }: GridColumnProps = $props();
-
-  const breakpoints = [
-    { name: 'sm', value: sm },
-    { name: 'md', value: md },
-    { name: 'lg', value: lg },
-    { name: 'xl', value: xl },
-    { name: 'xl2', value: xl2 },
-  ];
-
-  function getBreakpointClasses() {
-    let classNameBreakpoints = [];
-
-    for (let index = 0; index < breakpoints.length; index++) {
-      const element = breakpoints[index];
-
-      if (!element.value) {
-        continue;
-      }
-
-      classNameBreakpoints.push(`breakpoint--${element.name}`);
-    }
-
-    return classNameBreakpoints;
-  }
-
-  function getBreakpointCssVariables() {
-    let cssVariablesBreakpoints = [];
-
-    for (let index = 0; index < breakpoints.length; index++) {
-      const element = breakpoints[index];
-
-      if (!element.value) {
-        continue;
-      }
-
-      cssVariablesBreakpoints.push(`--GridColumnBreakpoint-${element.name}: ${element.value}`);
-    }
-
-    return cssVariablesBreakpoints.join(';');
-  }
-</script>
-
-<div
-  class={['dodo-ui-GridColumn', ...getBreakpointClasses(), className].join(' ')}
-  style={getBreakpointCssVariables()}
-  bind:this={ref}
->
-  {#if children}
-    {@render children()}
-  {/if}
-</div>
-
-<style lang="scss">
-  @use '../../../../../styles/scss' as *;
-
-  .dodo-ui-GridColumn {
-    min-width: 0;
-
-    &.breakpoint {
-      &--sm {
-        grid-column: span var(--GridColumnBreakpoint-sm);
-      }
-
-      &--md {
-        @media (min-width: $breakpoints-md) {
-          grid-column: span var(--GridColumnBreakpoint-md);
-        }
-      }
-
-      &--lg {
-        @media (min-width: $breakpoints-lg) {
-          grid-column: span var(--GridColumnBreakpoint-lg);
-        }
-      }
-
-      &--xl {
-        @media (min-width: $breakpoints-xl) {
-          grid-column: span var(--GridColumnBreakpoint-xl);
-        }
-      }
-
-      &--xl2 {
-        @media (min-width: $breakpoints-xl2) {
-          grid-column: span var(--GridColumnBreakpoint-xl2);
-        }
-      }
-    }
-  }
-</style>

package/src/lib/stories/components/Layout/Grid/Grid.svelte

@@ -1,47 +0,0 @@
-<script lang="ts" module>
-  import { type Snippet } from 'svelte';
-
-  export interface GridProps {
-    /** Grid contents goes here */
-    children?: Snippet;
-    /** Grid ref */
-    ref?: HTMLDivElement;
-    /** Custom css class */
-    class?: string;
-    /** Grid spacing, affects Coulumns */
-    spacing?: number;
-    /** Optional Row spacing, default is 0 */
-    rowSpacing?: number;
-  }
-</script>
-
-<script lang="ts">
-  let {
-    children,
-    class: className = '',
-    ref = $bindable<HTMLDivElement>(),
-    spacing = 1,
-    rowSpacing,
-  }: GridProps = $props();
-
-  const rowSpacingModified = rowSpacing || rowSpacing === 0 ? rowSpacing : spacing;
-</script>
-
-<div
-  class={['dodo-ui-Grid', className].join(' ')}
-  bind:this={ref}
-  style={`--GridSpacing: ${spacing}; --GridRowSpacing: ${rowSpacingModified};`}
->
-  {#if children}
-    {@render children()}
-  {/if}
-</div>
-
-<style lang="scss">
-  .dodo-ui-Grid {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    gap: calc(var(--GridRowSpacing) * var(--dodo-ui-space));
-    grid-auto-flow: row;
-  }
-</style>

package/src/lib/stories/components/Layout/Grid/Row/Row.svelte

@@ -1,36 +0,0 @@
-<script lang="ts" module>
-  import { type Snippet } from 'svelte';
-
-  export interface GridRowProps {
-    /** GridRow contents goes here */
-    children?: Snippet;
-    /** GridRow ref */
-    ref?: HTMLDivElement;
-    /** Custom css class */
-    class?: string;
-  }
-</script>
-
-<script lang="ts">
-  let {
-    children,
-    class: className = '',
-    ref = $bindable<HTMLDivElement>(),
-  }: GridRowProps = $props();
-</script>
-
-<div class={['dodo-ui-GridRow', className].join(' ')} bind:this={ref}>
-  {#if children}
-    {@render children()}
-  {/if}
-</div>
-
-<style lang="scss">
-  .dodo-ui-GridRow {
-    grid-column: span 12;
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    gap: calc(var(--GridSpacing) * var(--dodo-ui-space));
-    grid-auto-flow: row;
-  }
-</style>