@flightlesslabs/dodo-ui 0.9.0 → 0.10.0

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/utils/scss/mixins.scss

@@ -0,0 +1,87 @@
+/// Mixin: generate-dodo-ui-calendarYearChip-colors
+/// Generates CSS custom properties for Dodo UI calendarYearChip styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-calendarYearChip-colors($color-name) {
+  --dodo-ui-CalendarYearChip-#{$color-name}-bg: transparent;
+  --dodo-ui-CalendarYearChip-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-CalendarYearChip-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
+
+  --dodo-ui-CalendarYearChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+  --dodo-ui-CalendarYearChip-selected-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
+  --dodo-ui-CalendarYearChip-selected-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-700
+  );
+}
+
+/// Mixin: generate-dodo-ui-calendarYearChip-colors
+/// Generates CSS custom properties for Dodo UI calendarYearChip styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-calendarYearChip-colors-dark($color-name) {
+  --dodo-ui-CalendarYearChip-#{$color-name}-bg: transparent;
+  --dodo-ui-CalendarYearChip-#{$color-name}-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarYearChip-#{$color-name}-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-100) 85%,
+    #fff
+  );
+
+  --dodo-ui-CalendarYearChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-CalendarYearChip-selected-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-CalendarYearChip-selected-#{$color-name}-active-bg: var(
+    --dodo-color-#{$color-name}-100
+  );
+}
+
+/// Mixin: generate-dodo-ui-calendarYearChip-color
+/// Auto-generates .color--[theme] > variant--solid styles
+/// @param {String} $theme - e.g., default, safe, danger, etc.
+@mixin generate-dodo-ui-calendarYearChip-color($theme) {
+  &--#{$theme} {
+    .chip:not([disabled]) {
+      background-color: var(--dodo-ui-CalendarYearChip-#{$theme}-bg);
+
+      &:hover {
+        background-color: var(--dodo-ui-CalendarYearChip-#{$theme}-hover-bg);
+      }
+
+      &:active {
+        background-color: var(--dodo-ui-CalendarYearChip-#{$theme}-active-bg);
+      }
+    }
+
+    &.today {
+      .chip:not([disabled]) {
+        background-color: var(--dodo-ui-CalendarYearChip-today-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarYearChip-today-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarYearChip-today-#{$theme}-active-bg);
+        }
+      }
+    }
+
+    &.selected {
+      .chip:not([disabled]) {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-CalendarYearChip-selected-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-CalendarYearChip-selected-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-CalendarYearChip-selected-#{$theme}-active-bg);
+        }
+      }
+    }
+  }
+}

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.svelte

@@ -0,0 +1,150 @@
+<script lang="ts" module>
+  import type { ButtonClickEvent } from '$lib/stories/components/Form/Button/Button.svelte';
+
+  export interface CalendarYearListProps {
+    /** CalendarYearList ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Selcted year Value */
+    value?: string;
+    /** onselect event handler */
+    onselect?: (value: string, e: ButtonClickEvent) => void;
+    /** oncancel event handler */
+    oncancel?: (e: ButtonClickEvent) => void;
+    /** Custom Calendar Chip Content */
+    customCalendarYearChipContent?: (value: string) => Snippet;
+    /** Custom Calendar Chip */
+    customCalendarYearChip?: (value: string) => Snippet;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** calendarYearChipProps: calendarYearChip component props */
+    calendarYearChipProps?: Partial<CalendarYearChipProps>;
+    /** Minimum allowed date, rest of the dates will be disabled  */
+    minDate?: Date;
+    /** Maxium allowed date, rest of the dates will be disabled  */
+    maxDate?: Date;
+    /** show controls */
+    showControls?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import type { ComponentColor } from '$lib/types/colors.js';
+  import type { Snippet } from 'svelte';
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { CalendarYearChipProps } from './CalendarYearChip/CalendarYearChip.svelte';
+  import CalendarYearChip from './CalendarYearChip/CalendarYearChip.svelte';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+  import { Button } from '$lib/index.js';
+  import Icon from '@iconify/svelte';
+
+  let {
+    class: className = '',
+    ref = $bindable<HTMLDivElement>(),
+    value,
+    onselect,
+    calendarYearChipProps,
+    size = 'normal',
+    color,
+    customCalendarYearChipContent,
+    customCalendarYearChip,
+    minDate = getMoment('1910-01-01', 'YYYY-MM-DD', { utc: true }).toDate(),
+    maxDate = getMoment(undefined, undefined, { utc: true }).add(100, 'years').toDate(),
+    oncancel,
+    showControls = true,
+  }: CalendarYearListProps = $props();
+
+  function getYears(startYear: number, endYear: number) {
+    let newYears: string[] = [];
+
+    for (let index = startYear; index <= endYear; index++) {
+      newYears.push(index.toString());
+    }
+
+    return newYears;
+  }
+
+  const startYear = $derived(Number(getMoment(minDate).format('YYYY')));
+  const endYear = $derived(Number(getMoment(maxDate).format('YYYY')));
+  const years = $derived<string[]>(getYears(startYear, endYear));
+</script>
+
+<div class={['dodo-ui-CalendarYearList', `size--${size}`, className].join(' ')} bind:this={ref}>
+  {#if showControls}
+    <div class="Controls">
+      <Button {size} {color} variant="text" name="BackButton" onclick={oncancel} roundness={2}>
+        {#snippet before()}
+          <Icon icon="material-symbols:arrow-back-rounded" width="24" height="24" />
+        {/snippet}
+
+        Back
+      </Button>
+    </div>
+  {/if}
+
+  <ul>
+    {#each years as year (year)}
+      <CalendarYearChip
+        value={year}
+        selected={value === year ? true : false}
+        {onselect}
+        {size}
+        {color}
+        {customCalendarYearChipContent}
+        {customCalendarYearChip}
+        {...calendarYearChipProps}
+      />
+    {/each}
+  </ul>
+</div>
+
+<style lang="scss">
+  .dodo-ui-CalendarYearList {
+    user-select: none;
+
+    ul {
+      margin: 0;
+      padding: 0;
+      flex-wrap: wrap;
+      display: inline-flex;
+      overflow-y: auto;
+    }
+
+    :global(.dodo-ui-CalendarYearChip) {
+      width: 33.333%;
+    }
+
+    .Controls {
+      margin-bottom: calc(var(--dodo-ui-space) * 2);
+    }
+
+    &.size {
+      &--normal {
+        width: calc(var(--dodo-ui-element-height-normal) * 7);
+
+        ul {
+          max-height: calc(var(--dodo-ui-element-height-normal) * 5);
+        }
+      }
+
+      &--small {
+        width: calc(var(--dodo-ui-element-height-small) * 7);
+
+        ul {
+          max-height: calc(var(--dodo-ui-element-height-small) * 5);
+        }
+      }
+
+      &--large {
+        width: calc(var(--dodo-ui-element-height-large) * 7);
+
+        ul {
+          max-height: calc(var(--dodo-ui-element-height-large) * 5);
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,160 @@
+import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+import type dayjs from 'dayjs';
+import type { DateOfMonth } from './types.js';
+import type { CalendarWeekNames } from '../SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
+
+export interface CreateDatesOfMonthSettings {
+  /** Day considered as start of the week */
+  startOfWeek?: CalendarWeekNames;
+
+  /** Include leading days from the previous month */
+  showLastMonth?: boolean;
+
+  /** Include trailing days from the next month */
+  showNextMonth?: boolean;
+
+  /** Set today manually  */
+  today?: Date;
+
+  /** Minimum allowed date, rest of the dates will be disabled  */
+  minDate?: Date;
+
+  /** Maxium allowed date, rest of the dates will be disabled  */
+  maxDate?: Date;
+
+  /** Exclude Dates, these dates will be disabled */
+  excludeDates?: Date[];
+
+  /** Include Dates, rest of the dates will be disabled  */
+  includeDates?: Date[];
+
+  /** Optional IANA timezone */
+  timezone?: string;
+
+  /** Use UTC time */
+  utc?: boolean;
+
+  /** Range value */
+  rangeValue?: [Date, Date];
+}
+
+export type CreateDateOfMonthType = 'currentMonth' | 'nextMonth' | 'lastMonth';
+
+function dateMoment(date?: Date, settings?: CreateDatesOfMonthSettings) {
+  return getMoment(date, undefined, {
+    timezone: settings?.timezone,
+    utc: settings?.utc,
+  });
+}
+
+function getIsToday(dayMoment: dayjs.Dayjs, todayDate: string, todayManual: string | undefined) {
+  const dayDateFormat = dayMoment.format('DD-MM-YYYY');
+  let today = false;
+
+  if (todayManual && todayManual === dayDateFormat) {
+    today = true;
+  } else if (todayDate === dayDateFormat) {
+    today = true;
+  }
+
+  return today;
+}
+
+function getIsDateDisabled(
+  dayMoment: dayjs.Dayjs,
+  minDate: dayjs.Dayjs | undefined,
+  maxDate: dayjs.Dayjs | undefined,
+  excludeDates: string[] | undefined,
+  includeDates: string[] | undefined,
+) {
+  const dayDateFormat = dayMoment.format('DD-MM-YYYY');
+  let disabled = false;
+
+  if (minDate?.isValid() && dayMoment.isBefore(minDate)) {
+    disabled = true;
+  }
+
+  if (maxDate?.isValid() && dayMoment.isAfter(maxDate)) {
+    disabled = true;
+  }
+
+  if (excludeDates?.length && excludeDates.includes(dayDateFormat)) {
+    disabled = true;
+  }
+
+  if (includeDates?.length && !includeDates.includes(dayDateFormat)) {
+    disabled = true;
+  }
+
+  return disabled;
+}
+
+export default function createDateOfMonth(
+  date?: Date,
+  settings?: CreateDatesOfMonthSettings,
+  monthType: CreateDateOfMonthType = 'currentMonth',
+): DateOfMonth {
+  const minDate = settings?.minDate ? dateMoment(settings.minDate, settings) : undefined;
+  const maxDate = settings?.maxDate ? dateMoment(settings.maxDate, settings) : undefined;
+  const excludeDates = settings?.excludeDates?.length
+    ? settings?.excludeDates.map((item) => dateMoment(item, settings).format('DD-MM-YYYY'))
+    : undefined;
+  const includeDates = settings?.includeDates?.length
+    ? settings?.includeDates.map((item) => dateMoment(item, settings).format('DD-MM-YYYY'))
+    : undefined;
+
+  const [range1, range2] = settings?.rangeValue || [];
+
+  const rangeStart = range1 ? dateMoment(range1, settings) : undefined;
+  const rangeEnd = range2 ? dateMoment(range2, settings) : undefined;
+
+  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);
+  const dayMomentDayFormatted = dayMoment.format('DD-MM-YYYY');
+
+  let isRangeStart = false;
+
+  let isRangeEnd = false;
+
+  let inRange = false;
+
+  if (rangeStart && rangeEnd) {
+    if (dayMomentDayFormatted === rangeStart.format('DD-MM-YYYY')) {
+      isRangeStart = true;
+    }
+
+    if (dayMomentDayFormatted === rangeEnd.format('DD-MM-YYYY')) {
+      isRangeEnd = true;
+    }
+
+    if (dayMoment.isAfter(rangeStart) && dayMoment.isBefore(rangeEnd)) {
+      inRange = true;
+    }
+  }
+
+  const dataToExport: DateOfMonth = {
+    id: `${dayMoment.valueOf()}`,
+    date: dayMoment.toDate(),
+    isCurrentMonth: true,
+    disabled: getIsDateDisabled(dayMoment, minDate, maxDate, excludeDates, includeDates),
+    today: getIsToday(dayMoment, todayDate, todayManual),
+    isRangeStart,
+    isRangeEnd,
+    inRange,
+  };
+
+  if (monthType === 'lastMonth') {
+    dataToExport.isLastMonth = true;
+    dataToExport.isCurrentMonth = false;
+  } else if (monthType === 'nextMonth') {
+    dataToExport.isNextMonth = true;
+    dataToExport.isCurrentMonth = false;
+  }
+
+  return dataToExport;
+}

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

@@ -0,0 +1,100 @@
+import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+
+import type { DateOfMonth } from './types.js';
+import { calendarWeekOptions } from '$lib/index.js';
+import createDateOfMonth, { type CreateDatesOfMonthSettings } from './createDateOfMonth.js';
+
+/**
+ * Divides an array into chunks of a given size.
+ *
+ * @template T - The type of elements in the array.
+ * @param {T[]} arr - The array to be chunked.
+ * @param {number} size - The chunk size.
+ * @returns {T[][]} - 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;
+}
+
+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} date - The base date for the month to generate.
+ * @param {GetDatesOfMonthSettings} [settings] - Optional settings for formatting and display.
+ * @returns {(DateOfMonth[][] | null)} - A 2D array of DateOfMonth objects representing the calendar, or null if invalid.
+ */
+export default function getDatesOfMonth(
+  date?: Date,
+  settings?: CreateDatesOfMonthSettings,
+): 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'));
+    }
+  }
+
+  for (let day = 1; day <= daysInMonth; day++) {
+    const dayMoment = monthMoment.clone().set('date', day);
+
+    dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'currentMonth'));
+  }
+
+  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'));
+      }
+
+      datesDivided[datesDivided.length - 1] = [...lastRow, ...nextMonthDates];
+    }
+  }
+
+  return datesDivided;
+}

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

@@ -0,0 +1,39 @@
+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;
+  isRangeStart?: boolean;
+  isRangeEnd?: boolean;
+  inRange?: boolean;
+};
+
+export type DateRangeType = 'start' | 'end';

package/src/lib/stories/developer tools/helpers/Time/getMoment/getMoment.ts

@@ -0,0 +1,65 @@
+import type { ConfigType, OptionType } from 'dayjs';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
+import customParseFormat from 'dayjs/plugin/customParseFormat.js';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
+
+/**
+ * Acceptable input types for the `getMoment` function, compatible with dayjs.
+ */
+export type GetMomentDate = ConfigType;
+
+/**
+ * Optional formatting string used to parse the date.
+ * Refer to dayjs customParseFormat plugin for supported formats.
+ */
+export type GetMomentFormat = OptionType;
+
+/**
+ * Settings to control how the moment is returned (UTC, timezone, or local).
+ */
+export type GetMomentSettings = {
+  /**
+   * Timezone string (e.g., "America/New_York").
+   */
+  timezone?: string;
+
+  /**
+   * Whether to return the time in UTC. If true, overrides timezone.
+   */
+  utc?: boolean;
+};
+
+/**
+ * A wrapper around dayjs to return a moment-like object with optional formatting,
+ * timezone, or UTC handling.
+ *
+ * @param {GetMomentDate} [date] - The input date, time, or string to be parsed.
+ * @param {format} [format] - A custom format string for parsing the input date.
+ * @param {GetMomentSettings} [settings] - Optional settings for format, timezone, and UTC.
+ * @returns {dayjs.Dayjs} - A dayjs object in local, UTC, or specified timezone.
+ *
+ * @example
+ * getMoment('2025-01-01T12:00:00Z', { utc: true }).format()
+ * getMoment('01-01-2025', { format: 'DD-MM-YYYY', timezone: 'Asia/Kolkata' }).format()
+ */
+export default function getMoment(
+  date?: GetMomentDate,
+  format?: GetMomentFormat,
+  settings?: GetMomentSettings,
+): dayjs.Dayjs {
+  const timezone = settings?.timezone;
+  const utc = settings?.utc ? true : false;
+
+  if (utc) {
+    return dayjs.utc(dayjs(date, format));
+  } else if (timezone) {
+    return dayjs.tz(dayjs(date, format), timezone);
+  } else {
+    return dayjs(date, format);
+  }
+}

package/src/lib/styles/_components.css

@@ -5,9 +5,9 @@
   --dodo-ui-element-height-large: 50px;
 
   /* Roundness */
-  --dodo-ui-element-roundness-1: 7px;
-  --dodo-ui-element-roundness-2: 13px;
-  --dodo-ui-element-roundness-3: 31px;
+  --dodo-ui-element-roundness-1: 0.4375em;
+  --dodo-ui-element-roundness-2: 0.8125em;
+  --dodo-ui-element-roundness-3: 1.9375em;
 
   /* Border */
   --dodo-ui-element-border-width: 1px;

package/src/lib/stories/Home.mdx

@@ -1,59 +0,0 @@
-import { Source } from '@storybook/blocks';
-import item from '../../../package.json?raw';
-
-<main style={{ textAlign: 'center' }}>
-
-<img src="dodo-circle-6.png" style={{ width: 200, height: 'auto' }} />
-
-# Dodo UI
-
-<h3 style={{ fontWeight: 500 }}>v{JSON.parse(item)?.version}</h3>
-
-<h3 style={{ fontWeight: 400 }}>An open-source, opinionated UI framework for Svelte.</h3>
-
-### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)
-
-</main>
-
-<br />
-<br />
-
-## Install
-
-pnpm
-
-<Source
-  dark
-  language="bash"
-  code={`
-pnpm add @flightlesslabs/dodo-ui
-`}
-/>
-
-npm
-
-<Source
-  dark
-  language="bash"
-  code={`
-npm i @flightlesslabs/dodo-ui
-`}
-/>
-
-## Use it!
-
-Lets import [Button](?path=/docs/components-form-button--docs) component. Checkout documentation for [Button](?path=/docs/components-form-button--docs)
-
-<Source
-  dark
-  language="js"
-  code={`
-import { Button } '@flightlesslabs/dodo-ui';
-`}
-/>
-
-## Explore more
-
-- [Dark Theme](?path=/docs/developer-tools-philosophy-themes--docs#dark-theme)
-- [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
-- [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)