@widgetic/editor 3.11.3 → 4.0.1

package/dist/components/ic/DatePickerInputController.svelte

@@ -0,0 +1,364 @@
+<!-- 
+ * DatePickerInputController
+ * 
+ * A sophisticated date picker component that provides a user-friendly interface for date selection.
+ * Integrates with the shadcn UI library and handles complex date management and user interactions.
+ * 
+ * Key Features:
+ * - Calendar-based date selection
+ * - Internationalized date handling
+ * - Dropdown management
+ * - Accessibility support
+ * 
+ * Edge Cases:
+ * - Handles undefined dates
+ * - Manages focus states
+ * - Prevents scroll-related UI issues
+ * - Maintains dropdown state consistency
+-->
+
+<script lang="ts">
+  // Svelte imports
+  import { onMount, onDestroy } from 'svelte';
+
+  // Shadcn UI Components
+  import { Button, Select } from '@widgetic/design-system/components';
+  import { Popover } from '@widgetic/design-system/components';
+  import { InputControllerHeader } from './index';
+  import { Calendar } from '@widgetic/design-system/components';
+
+  // Internationalized date imports
+  import { CalendarDate, getLocalTimeZone, today, DateFormatter } from "@internationalized/date";
+  import type { DateValue } from "@internationalized/date";
+
+  // Lucide Icons
+  import { IconCalendar } from '@widgetic/design-system/icons';
+
+  // Component props with TypeScript types
+  export let label: string;
+  export let value: any;
+  export let onChange: (newValue: CalendarDate) => void;
+  export let description: string | undefined = undefined;
+  export let controllerId: string;
+  export let openDropdowns: any;
+  export let toggleDropdown: (id: string) => void;
+  export let onFocus: () => void = () => {};
+
+  // Default to today's date in local timezone for placeholder
+  let placeholder = today(getLocalTimeZone());
+  let currentValue: CalendarDate | undefined;
+
+  // Month and year options setup
+  const monthFmt = new DateFormatter('en-US', { month: 'long' });
+  const monthOptions = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+  ].map((month, i) => ({ value: String(i + 1), label: month }));
+
+  const yearOptions = Array.from({ length: 100 }, (_, i) => {
+    const year = String(new Date().getFullYear() - i);
+    return { label: year, value: year };
+  });
+
+  $: defaultYear = placeholder ? {
+    value: String(placeholder.year),
+    label: String(placeholder.year)
+  } : undefined;
+
+  $: defaultMonth = placeholder ? {
+    value: String(placeholder.month),
+    label: monthFmt.format(placeholder.toDate(getLocalTimeZone()))
+  } : undefined;
+
+  /**
+   * Updates the current value when the external value changes
+   * Handles initialization and updates of the date state
+   * Creates a new CalendarDate instance to prevent reference issues
+   */
+  function updateCurrentValue() {
+    console.log('🔄 [DatePicker] updateCurrentValue called with:', { value, type: typeof value });
+    
+    if (!value) {
+      currentValue = undefined;
+      placeholder = today(getLocalTimeZone());
+      console.log('✅ [DatePicker] Set to undefined, placeholder:', placeholder);
+      return;
+    }
+
+    if (value instanceof CalendarDate) {
+      currentValue = value;
+      console.log('✅ [DatePicker] Already CalendarDate:', currentValue);
+    } else if (typeof value === 'object' && value !== null && 'year' in value && 'month' in value && 'day' in value) {
+      try {
+        currentValue = new CalendarDate(value.year, value.month, value.day);
+        console.log('✅ [DatePicker] Created CalendarDate from object:', { original: value, created: currentValue });
+      } catch (error) {
+        console.error('❌ [DatePicker] Failed to create CalendarDate from object:', { value, error });
+        currentValue = undefined;
+      }
+    } else {
+      console.warn('⚠️ [DatePicker] Invalid date value provided:', value);
+      currentValue = undefined;
+    }
+
+    placeholder = currentValue ?? today(getLocalTimeZone());
+    console.log('🎯 [DatePicker] Final state:', { currentValue, placeholder });
+  }
+
+  // Watch for value changes and update internal state
+  $: value, updateCurrentValue();
+
+  // Track dropdown state through store subscription
+  $: open = $openDropdowns?.has(controllerId) || false;
+
+  // Computed values for Calendar component with extra safety
+  $: calendarValue = currentValue;
+  $: calendarDefaultMonth = placeholder;
+  $: isCalendarReady = placeholder instanceof CalendarDate;
+
+  /**
+   * Formats a CalendarDate for display
+   * Handles undefined dates and invalid objects
+   * Returns a user-friendly date string
+   * @param date - The date to format
+   * @returns Formatted date string
+   */
+  function formatDate(date: CalendarDate | undefined): string {
+    if (!date || !(date instanceof CalendarDate)) return 'Pick a date';
+    try {
+      // Convert to JavaScript Date for localized formatting
+      const jsDate = new Date(date.year, date.month - 1, date.day);
+      return jsDate.toLocaleDateString('en-US', { dateStyle: 'long' });
+    } catch (error) {
+      console.error('Error formatting date:', error);
+      return 'Pick a date';
+    }
+  }
+
+  /**
+   * Handles date selection from the calendar
+   * Validates the selected date and updates state
+   * Closes the dropdown after selection
+   * @param newValue - The newly selected date
+   */
+  function handleSelect(newValue: DateValue | undefined) {
+    if (newValue instanceof CalendarDate) {
+      onChange(newValue);
+      toggleDropdown(controllerId);
+    }
+  }
+
+  /**
+   * Toggles the date picker dropdown visibility
+   * Manages dropdown state through the provided toggle function
+   */
+  function handleToggle() {
+    toggleDropdown(controllerId);
+  }
+
+  /**
+   * Closes the dropdown if it's currently open
+   * Used for cleanup and external close triggers
+   */
+  function closeDropdown() {
+    if (open) {
+      toggleDropdown(controllerId);
+    }
+  }
+
+  /**
+   * Handles scroll events to prevent UI issues
+   * Closes the dropdown when scrolling occurs outside the dropdowns
+   */
+  function handleScroll(event: Event) {
+    // Ensure target is an HTMLElement
+    if (!(event.target instanceof HTMLElement)) {
+      return;
+    }
+    
+    const target = event.target;
+    
+    // Check if scroll happened inside our dropdowns
+    const isInsideDropdown = target.closest('.month-year-dropdown-content');
+    
+    // If scrolling is inside our dropdowns, don't close
+    if (isInsideDropdown) {
+      return;
+    }
+
+    // If scrolling outside our dropdowns, close
+    if (open) {
+      closeDropdown();
+    }
+  }
+
+  // Setup scroll event listener on mount
+  onMount(() => {
+    window.addEventListener('scroll', handleScroll, { capture: true });
+  });
+
+  // Cleanup scroll event listener on destroy
+  onDestroy(() => {
+    window.removeEventListener('scroll', handleScroll, true);
+  });
+</script>
+
+<!-- Date Picker Container -->
+<div class="flex flex-col gap-2 widgetic-colors">
+  <div class="flex items-center w-full relative">
+    <div class="flex-1 min-w-0">
+      <InputControllerHeader {label} />
+    </div>
+    
+    <div class="absolute right-0">
+      <div 
+        class="h-[48px] w-[185px] rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green"
+        on:focusin={onFocus}
+      >
+        <Popover.Root {open} onOpenChange={handleToggle}>
+          <Popover.Trigger class="w-full h-full">
+            <div class="w-full h-full px-[16px] flex items-center">
+              <Button
+                id="date-picker"
+                variant="ghost"
+                class="w-full h-full justify-between text-left border-0 bg-transparent hover:bg-transparent focus:bg-transparent p-0 group"
+              >
+                <span class="subtext text-grey7 {!currentValue ? 'text-grey3' : ''}">{formatDate(currentValue)}</span>
+                <IconCalendar class="w-[20px] h-[20px] text-grey5 transition-colors duration-200 group-hover:text-grey7" />
+              </Button>
+            </div>
+          </Popover.Trigger>
+          
+          <Popover.Content class="w-auto p-0 z-50" sideOffset={4}>
+            <div class="rounded-md border p-3">
+              <div class="flex w-full items-center justify-between gap-2 mb-3">
+                <Select.Root
+                  type="single"
+                  value={defaultMonth?.value}
+                  onValueChange={(value: string) => {
+                    if (!value || !placeholder) return;
+                    const monthValue = parseInt(value, 10);
+                    if (monthValue === placeholder?.month) return;
+                    // Re-create placeholder/currValue using explicit CalendarDate constructor to ensure
+                    // we pass a plain CalendarDate instance that the Calendar component can recognise.
+                    placeholder = new CalendarDate(
+                      placeholder.year,
+                      monthValue,
+                      placeholder.day
+                    );
+                    if (currentValue) {
+                      const newValue = new CalendarDate(
+                        currentValue.year,
+                        monthValue,
+                        currentValue.day
+                      );
+                      currentValue = newValue;
+                      onChange(newValue);
+                    }
+                  }}
+                >
+                  <Select.Trigger aria-label="Select month" class="w-[60%] month-year-dropdown-content">
+                    <span class="text-sm">{defaultMonth?.label || "Select month"}</span>
+                  </Select.Trigger>
+                  <Select.Content class="max-h-[200px] overflow-y-auto month-year-dropdown-content">
+                    {#each monthOptions as { value, label }}
+                      <Select.Item {value} {label}>
+                        {label}
+                      </Select.Item>
+                    {/each}
+                  </Select.Content>
+                </Select.Root>
+                <Select.Root
+                  type="single"
+                  value={defaultYear?.value}
+                  onValueChange={(value: string) => {
+                    if (!value || !placeholder) return;
+                    const yearValue = parseInt(value, 10);
+                    if (yearValue === placeholder?.year) return;
+                    // Same fix as above – ensure a clean CalendarDate instance.
+                    placeholder = new CalendarDate(
+                      yearValue,
+                      placeholder.month,
+                      placeholder.day
+                    );
+                    if (currentValue) {
+                      const newValue = new CalendarDate(
+                        yearValue,
+                        currentValue.month,
+                        currentValue.day
+                      );
+                      currentValue = newValue;
+                      onChange(newValue);
+                    }
+                  }}
+                >
+                  <Select.Trigger aria-label="Select year" class="w-[40%] month-year-dropdown-content">
+                    <span class="text-sm">{defaultYear?.label || "Select year"}</span>
+                  </Select.Trigger>
+                  <Select.Content class="max-h-[200px] overflow-y-auto month-year-dropdown-content">
+                    {#each yearOptions as { value, label }}
+                      <Select.Item {value} {label}>
+                        {label}
+                      </Select.Item>
+                    {/each}
+                  </Select.Content>
+                </Select.Root>
+              </div>
+              <div class="calendar-no-header">
+                <Calendar
+                  mode="single"
+                  onValueChange={(date: DateValue | undefined) => {
+                    console.log('📅 [DatePicker] Calendar onValueChange:', { date, isCalendarDate: date instanceof CalendarDate });
+                    if (date instanceof CalendarDate) {
+                      currentValue = date;
+                      placeholder = date;
+                      onChange(date);
+                      closeDropdown();
+                    }
+                  }}
+                  fixedWeeks
+                />
+              </div>
+            </div>
+          </Popover.Content>
+        </Popover.Root>
+      </div>
+    </div>
+  </div>
+
+  {#if description}
+    <p class="subtext text-grey5">{description}</p>
+  {/if}
+</div>
+
+<style>
+  /* Remove focus ring from trigger */
+  :global(.date-picker-trigger:focus-visible) {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Style the calendar content */
+  :global(.calendar-content) {
+    border: 1px solid hsl(var(--grey2)) !important;
+    background: white !important;
+    border-radius: var(--radius) !important;
+    margin-top: 4px !important;
+  }
+
+  /* Remove button styles */
+  :global(button.bg-transparent) {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  :global(button.bg-transparent:hover),
+  :global(button.bg-transparent:focus) {
+    background-color: transparent !important;
+  }
+
+  /* Hide calendar header */
+  :global(.calendar-no-header header) {
+    display: none !important;
+  }
+</style>

package/dist/components/ic/DatePickerInputController.svelte.d.ts

@@ -0,0 +1,28 @@
+import { CalendarDate } from "@internationalized/date";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DatePickerInputController: $$__sveltets_2_IsomorphicComponent<{
+    label: string;
+    value: any;
+    onChange: (newValue: CalendarDate) => void;
+    description?: string | undefined;
+    controllerId: string;
+    openDropdowns: any;
+    toggleDropdown: (id: string) => void;
+    onFocus?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DatePickerInputController = InstanceType<typeof DatePickerInputController>;
+export default DatePickerInputController;

package/dist/components/ic/DropdownInputController.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+  /**
+   * DropdownInputController Component
+   * A reusable dropdown/select input component that handles selection from a list of options.
+   * Supports custom styling, external state management, and accessibility features.
+   */
+
+  /**
+   * Svelte Lifecycle Imports
+   * Required for component setup and cleanup
+   */
+  import { onMount, onDestroy } from 'svelte';
+  import type { InputControllerConfig } from './index';
+
+  // Local Components imports
+  import { InputControllerHeader } from './index';
+
+  /**
+   * UI Components Imports
+   * Shadcn UI select components for consistent styling and behavior
+   */
+  import { Select } from '@widgetic/design-system/components';
+
+  // Icons imports
+  import { IconCaretDownFilled } from '@widgetic/design-system/icons';
+
+  /**
+   * Component Props
+   * External properties that configure the dropdown's behavior and appearance
+   */
+  export let label: string;                 // Display label for the dropdown
+  export let defaultSelectedLabel: string = "Select an option";          // Default value for the dropdown
+  export let value: string | { value: string; label: string };       // Currently selected value
+  export let onChange: (newValue: string) => void;  // Callback for value changes
+  export let config: InputControllerConfig = {};    // Additional configuration options
+  
+  /**
+   * Configuration Options
+   * Derived from config prop with fallbacks
+   */
+  export let options: { value: string; label: string }[] = config.options || [];  // Available options
+  export let description: string | undefined = undefined;  // Optional help text
+  export let controllerId: string;          // Unique identifier for the controller
+  export let openDropdowns: any;           // External store tracking open dropdowns
+  export let toggleDropdown: (id: string) => void;  // Function to toggle dropdown state
+  export let onFocus: () => void = () => {};  // Focus event handler
+
+  /**
+   * Reactive State
+   * Tracks whether this dropdown is currently open
+   */
+  $: open = $openDropdowns?.has(controllerId) || false;
+
+  /**
+   * Closes the dropdown if it's currently open
+   * Used for cleanup and external close triggers
+   */
+  function closeDropdown() {
+    if (open) {
+      toggleDropdown(controllerId);
+    }
+  }
+
+  /**
+   * Scroll Event Handler
+   * Closes dropdown when scrolling occurs to prevent floating UI issues
+   */
+  function handleScroll() {
+    closeDropdown();
+  }
+
+  /**
+   * Lifecycle Hooks
+   * Setup and cleanup of scroll event listeners
+   */
+  onMount(() => {
+    // console.log('DropdownInputController: onMount:', value);
+    window.addEventListener('scroll', handleScroll, true);
+  });
+
+  onDestroy(() => {
+    window.removeEventListener('scroll', handleScroll, true);
+  });
+
+  /**
+   * Value Change Handler
+   * Updates parent component and closes dropdown after selection
+   * @param newValue - The newly selected value
+   */
+  function handleValueChange(newValue: string) {
+    console.log('DropdownInputController: handleValueChange', newValue);
+    onChange(newValue);
+    closeDropdown();
+  }
+
+  /**
+   * Open State Change Handler
+   * Ensures dropdown open state stays in sync with external store
+   * @param isOpen - Whether the dropdown should be open
+   */
+  function handleOpenChange(isOpen: boolean) {
+    if (isOpen !== open) {
+      toggleDropdown(controllerId);
+    }
+  }
+
+  $: triggerContent = options.find((o) => o.value === (value.value || value))?.label ?? defaultSelectedLabel;
+</script>
+
+<!-- Dropdown Container -->
+<div class="dropdown-ic flex flex-col gap-2 widgetic-colors">
+  <div class="flex items-center w-full relative">
+    <div class="flex-1 min-w-0">
+      <InputControllerHeader {label} />
+    </div>
+    
+    <div class="absolute right-0">
+      <div 
+        class="dropdown-main-container rounded-large flex items-center transition-colors duration-200 group"
+        style="height: 48px; width: 185px; border: 1px solid hsl(var(--grey2)); background: hsl(var(--grey1));"
+        onfocusin={onFocus}
+      >
+        <Select.Root 
+          type="single"
+          value={value.value || value}
+          onValueChange={handleValueChange}
+          open={open}
+          onOpenChange={handleOpenChange}
+        >
+          <Select.Trigger 
+            class="dropdown-ic-trigger h-full w-full border-0 bg-transparent subtext hover:bg-transparent focus:bg-transparent data-[state=open]:bg-transparent" 
+            style="padding-left: 16px; padding-right: 16px; color: hsl(var(--grey7));"
+            id={controllerId}
+          >
+            <span class="truncate flex-1 text-left subtext" style="color: hsl(var(--grey7));">
+              {triggerContent}
+            </span>
+            <IconCaretDownFilled class="dropdown-ic-trigger-icon" style="width: 20px; height: 20px; color: hsl(var(--grey5));"/>
+          </Select.Trigger>
+          
+          <Select.Content 
+            class="dropdown-ic-content widgetic-colors shadow-md" 
+            style="min-width: 185px; background: white; border: 1px solid hsl(var(--grey2)); border-radius: var(--radius);"
+            strategy="fixed"
+            sideOffset={4}
+          >
+            {#each options as option}
+              <Select.Item 
+                value={option.value} 
+                label={option.label}
+                class="dropdown-ic-item h6 px-4 py-2 cursor-pointer"
+                style="color: hsl(var(--grey5)); gap: 20px;"
+              >
+                {option.label}
+              </Select.Item>
+            {/each}
+          </Select.Content>
+        </Select.Root>
+      </div>
+    </div>
+  </div>
+
+  {#if description}
+    <p class="subtext" style="color: hsl(var(--grey5));">{description}</p>
+  {/if}
+</div>
+
+<style>
+  .dropdown-main-container:hover {
+    border-color: hsl(var(--forest-green)) !important;
+  }
+
+  /* Remove focus ring from trigger */
+  :global(.dropdown-input-controller [data-radix-select-trigger]) {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Style the dropdown content */
+  :global(.dropdown-input-controller [role="listbox"]) {
+    border: 1px solid hsl(var(--grey2)) !important;
+    background: white !important;
+    border-radius: var(--radius) !important;
+    margin-top: 0 !important;
+  }
+
+  /* Style the dropdown items */
+  :global(.dropdown-input-controller [role="option"]) {
+    padding: 8px 16px !important;
+  }
+
+  :global(.dropdown-input-controller [role="option"][data-highlighted]) {
+    background: white !important;
+  }
+
+  :global(.dropdown-input-controller [role="option"][aria-selected="true"]) {
+    color: hsl(var(--sage-green)) !important;
+    background: hsl(var(--light-green)) !important;
+  }
+
+  /* Dropdown Item */
+  :global(.dropdown-ic-item[data-selected]) {
+    background-color: hsl(var(--sage-green)) !important;
+    color: hsl(var(--light-green)) !important;
+  }
+
+  /* set position relative to the check icon parent */
+  :global(.dropdown-ic-item > span) {
+    position: relative !important;
+  }
+
+  /* Remove checkmark icon
+  :global(.dropdown-ic-item > span > .lucide-check) {
+    display: none !important;
+  }*/
+
+  :global(.dropdown-ic-trigger .lucide-chevron-down) {
+    display: none;
+  }
+
+  /* Override bits-ui floating wrapper z-index (default 50 is too low).
+     The wrapper is portaled to body by bits-ui, so we target it globally. */
+  :global([data-bits-floating-content-wrapper]) {
+    z-index: 99999 !important;
+  }
+</style>

package/dist/components/ic/DropdownInputController.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { InputControllerConfig } from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DropdownInputController: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Component Props
+       * External properties that configure the dropdown's behavior and appearance
+       */ label: string;
+    defaultSelectedLabel?: string;
+    value: string | {
+        value: string;
+        label: string;
+    };
+    onChange: (newValue: string) => void;
+    config?: InputControllerConfig;
+    /**
+       * Configuration Options
+       * Derived from config prop with fallbacks
+       */ options?: {
+        value: string;
+        label: string;
+    }[];
+    description?: string | undefined;
+    controllerId: string;
+    openDropdowns: any;
+    toggleDropdown: (id: string) => void;
+    onFocus?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DropdownInputController = InstanceType<typeof DropdownInputController>;
+export default DropdownInputController;