@synetics/ui 0.7.0-alpha

package/src/components/organisms/date-picker/date-picker.css

@@ -0,0 +1,426 @@
+/**
+ * DatePicker v3 - Kompartido Dark Theme
+ * 
+ * Styled to match Kompartido's dark interface
+ */
+/* Wrapper */
+.dp-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+}
+
+/* Input Container */
+.dp-input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+/* Input Field - Dark Theme */
+.dp-input {
+    width: 100%;
+    padding: 0.5rem 2rem 0.5rem 0.75rem;
+    border: 1px solid #374151;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    background-color: #1f2937;
+    color: #e5e7eb;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.dp-input:hover {
+    border-color: #4b5563;
+}
+
+.dp-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.dp-input:disabled {
+    background-color: #111827;
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.dp-input::placeholder {
+    color: #6b7280;
+}
+
+/* Clear Button */
+.dp-clear-btn {
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1.25rem;
+    height: 1.25rem;
+    border: none;
+    background: #ef4444;
+    color: white;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 0.75rem;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+}
+
+.dp-clear-btn:hover {
+    background: #dc2626;
+}
+
+/* Drawer - Dark Theme */
+.dp-drawer {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 0.125rem;
+    background: #1f2937;
+    border: 1px solid #374151;
+    border-radius: 0.375rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+    z-index: 50;
+    overflow: visible;
+    width: var(--dp-drawer-width, 280px);
+    display: flex;
+    justify-items: center;
+    min-height: 350px !important;
+    flex-direction: column;
+}
+
+/* Calendar Container */
+.date-picker-container {
+    padding: 0.5rem;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #1f2937;
+}
+
+/* Header */
+.date-picker-header {
+    margin-bottom: 0.3rem;
+}
+
+.date-picker-header-top {
+    display: flex;
+    gap: 0.2rem;
+    margin-bottom: 0.3rem;
+}
+
+.date-picker-header-separator {
+    height: 1px;
+    background: #374151;
+    margin: 0.3rem 0;
+}
+
+.date-picker-header-bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.3rem;
+}
+
+.date-picker-date-parts {
+    display: flex;
+    gap: 0.15rem;
+    flex: 1;
+    justify-content: center;
+}
+
+.date-picker-header-grid-mode {
+    display: flex;
+    gap: 0.3rem;
+    padding: 0.1rem 0;
+    font-size: 0.7rem;
+    color: #9ca3af;
+    font-weight: 600;
+}
+
+.date-picker-header-grid-mode>div {
+    display: grid;
+    gap: 0.1rem;
+    width: 100%;
+}
+
+/* Weekday headers for day view - 7 columns */
+.date-picker-header-grid-mode>div:has(>div:nth-child(7)) {
+    grid-template-columns: repeat(7, 1fr);
+}
+
+.date-picker-header-grid-mode>div>div {
+    text-align: center;
+    padding: 0.15rem;
+}
+
+/* Body */
+.date-picker-body {
+    display: flex;
+    flex-direction: column;
+}
+
+.date-picker-body-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.date-picker-body-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    width: 100%;
+    padding-bottom: 5px;
+}
+
+.date-picker-body-row {
+    display: contents;
+}
+
+/* Cells - Dark Theme */
+.date-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 0.2rem;
+    font-size: 0.75rem;
+    transition: all 0.2s;
+    -webkit-user-select: none;
+    user-select: none;
+    color: #e5e7eb;
+    padding: 0.12rem;
+    background-color: #1f2937;
+    border: 1px solid #374151;
+}
+
+/* Day cells - 7 columns */
+.date-cell[data-view="day"] {
+    flex: 1 0 calc(14.285% - 5px);
+    height: auto;
+    min-height: 30px;
+}
+
+/* Month cells - 3 columns */
+.date-cell[data-view="month"] {
+    flex: 1 0 calc(33.333% - 5px);
+    height: auto;
+    min-height: 50px;
+    padding: 0.10rem
+}
+
+/* Year cells - 3 columns */
+.date-cell[data-view="year"] {
+    flex: 1 0 calc(33.333% - 5px);
+    height: auto;
+    min-height: 55px;
+    padding: 0.25rem;
+}
+
+.date-cell:hover {
+    background: #374151;
+}
+
+.date-cell.current {
+    color: #e5e7eb;
+}
+
+.date-cell.previous,
+.date-cell.next {
+    color: #6b7280;
+}
+
+.date-cell.selected {
+    background: #3b82f6;
+    color: white;
+}
+
+.date-cell.selected:hover {
+    background: #2563eb;
+}
+
+.date-cell.is-now {
+    font-weight: 600;
+    border: 2px solid #3b82f6;
+}
+
+.date-cell.is-weekend {
+    color: #f87171;
+}
+
+.date-cell.selected.is-weekend {
+    color: white;
+}
+
+/* Footer */
+.date-picker-footer {
+    margin-top: 0.375rem;
+    padding-top: 0.375rem;
+    border-top: 1px solid #374151;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.72rem;
+    color: #9ca3af;
+}
+
+.date-picker-footer .grid-mode {
+    display: flex;
+    gap: 0.10rem;
+    align-items: center;
+}
+
+/* Button - Dark Theme */
+.dp-button {
+    padding: 0.3rem 0.55rem;
+    border: 1px solid #374151;
+    background: #1f2937;
+    color: #e5e7eb;
+    border-radius: 0.2rem;
+    cursor: pointer;
+    font-size: 0.75rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+
+.dp-button:hover {
+    background: #374151;
+    border-color: #4b5563;
+}
+
+.dp-button:active {
+    background: #4b5563;
+}
+
+.dp-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.dp-button:disabled:hover {
+    background: #1f2937;
+    border-color: #374151;
+}
+
+/* Utilities */
+.mr-1 {
+    margin-right: 4px;
+}
+
+.ml-1 {
+    margin-left: 4px;
+}
+
+.mx-1 {
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
+.overflow-hidden {
+    overflow: hidden;
+}
+
+/* Focus visible */
+.date-picker-container:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}
+
+/* Responsive - Mobile modal centered */
+@media (max-width: 640px) {
+    .dp-drawer {
+        border-radius: 0.5rem;
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
+        align-items: center;
+        align-content: space-between;
+        justify-content: space-between;
+        justify-items: center;
+        min-height: 350px !important;
+    }
+
+    .date-picker-container {
+        padding: 0.3rem;
+        height: 100%;
+        flex: 1 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        justify-items: center;
+        flex-direction: column;
+    }
+
+    .date-picker-header {
+        margin-bottom: 0.3rem;
+    }
+
+    .date-picker-header-top {
+        gap: 0.2rem;
+        margin-bottom: 0.25rem;
+    }
+
+    .date-picker-header-separator {
+        margin: 0.25rem 0;
+    }
+
+    .date-picker-header-bottom {
+        gap: 0.25rem;
+    }
+
+    .date-picker-header-grid-mode {
+        padding: 0.1rem 0;
+        font-size: 0.68rem;
+    }
+
+    .date-picker-header-grid-mode>div>div {
+        padding: 0.15rem;
+    }
+
+    .date-picker-body-wrapper {
+        gap: 0.1rem;
+    }
+
+    .date-picker-body-row {
+        gap: 0.05rem;
+    }
+
+    .date-picker-body {
+        flex: 1;
+        min-height: 0;
+    }
+
+    .date-cell {
+        font-size: 0.75rem;
+        min-height: 1.5rem;
+        padding: 0.1rem;
+        border-radius: 0.15rem;
+    }
+
+    .date-cell[data-view="month"],
+    .date-cell[data-view="year"] {
+        font-size: 0.8rem;
+        min-height: 2rem;
+        padding: 0.2rem;
+    }
+
+    .dp-button {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.75rem;
+    }
+
+    .date-picker-footer {
+        margin-top: 0.25rem;
+        padding-top: 0.25rem;
+        font-size: 0.68rem;
+    }
+}

package/src/components/organisms/date-picker/date-picker.drawer.content.syn

@@ -0,0 +1,238 @@
+import { useEffect, useState, useKeyBindings } from '@synetics/synetics.dev';
+
+import { setCurrentDatePickerContext, IDatePickerContext } from './components/date-picker.context';
+import DatePickerDrawerUI from './components/date-picker.drawer.content.ui';
+import { computeDaysGrid } from './core/computed/compute-days-grid';
+import { computeMonthsGrid } from './core/computed/compute-months-grid';
+import { computeYearsGrid } from './core/computed/compute-years-grid';
+import { createCell } from './core/constructors/create-cell';
+import { DatePickerGridModeType, DatePickerSelectionModeType } from './core/date-picker.types';
+import { getNextDate } from './core/getters/get-next-date';
+import { getPreviousDate } from './core/getters/get-previous-date';
+import { IDatePickerCell, IDatePickerRow } from './core/models/date-picker.models';
+import { PortalProvider } from './internal-components/portal';
+import { useToggleableContext } from './toggleable/toggleable.context.hook';
+import { DateFormatsEnum, parseDate } from './utils/date-utils';
+
+interface IDatePickerDrawerProps {
+  id: string;
+  separator?: string;
+  defaultDate?: Date | string;
+  dataFormat?: DateFormatsEnum;
+  displayFormat?: DateFormatsEnum;
+  onSelectDate: (startDate?: Date, endDate?: Date) => void;
+  onClearField?: () => void;
+  defaultSelectionMode?: DatePickerSelectionModeType;
+  defaultGridMode?: DatePickerGridModeType;
+  showFooter?: boolean;
+  width?: string;
+  height?: string;
+}
+
+/**
+ * The `DatePickerContentDrawer` component provides a date picker interface.
+ * It allows users to select dates, navigate through different grid modes (day, month, year),
+ * and manage date selections.
+ */
+const DatePickerContentDrawer = ({
+  id,
+  defaultDate,
+  onSelectDate,
+  onClearField,
+  showFooter,
+  separator = '-',
+  dataFormat = DateFormatsEnum.YYYY_MM_DD,
+  displayFormat = DateFormatsEnum.DD_MM_YYYY,
+  defaultSelectionMode = 'single',
+  defaultGridMode = 'DAY',
+  width = '100%',
+  height = '100%',
+}: IDatePickerDrawerProps) => {
+  const [gridMode, setGridMode] = useState<DatePickerGridModeType>(defaultGridMode);
+  const [gridData, setGridData] = useState<IDatePickerRow[]>([]);
+  const [selection, setSelection] = useState<IDatePickerCell[]>([]);
+  const [internalDate, setInternalDate] = useState<Date>();
+
+  const { setToggleState } = useToggleableContext();
+
+  const handleOnClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const jumpToNow = () => {
+    setInternalDate(new Date());
+  };
+
+  const jumpToSelection = () => {
+    if (selection().length === 0) return;
+    const selectedDate = selection()[0].item?.date;
+    if (selectedDate) {
+      setInternalDate(new Date(selectedDate.year, selectedDate.month, selectedDate.day));
+    }
+  };
+
+  const moveNextGetDate = (forceGridMode?: DatePickerGridModeType): Date =>
+    getNextDate(forceGridMode ?? gridMode(), internalDate() ?? new Date());
+
+  const moveNext = (forceGridMode?: DatePickerGridModeType) => {
+    setInternalDate(moveNextGetDate(forceGridMode));
+  };
+
+  const movePreviousGetDate = (forceGridMode?: DatePickerGridModeType) =>
+    getPreviousDate(forceGridMode ?? gridMode(), internalDate() ?? new Date());
+
+  const movePrevious = (forceGridMode?: DatePickerGridModeType) => {
+    setInternalDate(movePreviousGetDate(forceGridMode));
+  };
+
+  const setSelectedCellFromDate = (date?: Date) => {
+    if (!date) return;
+    const cell = createCell(date.getDate(), date.getMonth(), date.getFullYear(), {
+      selected: true,
+    });
+    setSelection([cell]);
+  };
+
+  const handleSelectionChange = (cells: IDatePickerCell[]) => {
+    setSelection(cells);
+
+    // Call onSelectDate SYNCHRONOUSLY when selection changes (before component might unmount)
+    if (cells.length > 0) {
+      const startDate = cells[0].item?.date;
+      const endDate = cells.length > 1 ? cells[cells.length - 1].item?.date : undefined;
+
+      const startDateObj = startDate
+        ? new Date(startDate.year, startDate.month, startDate.day)
+        : undefined;
+      const endDateObj = endDate ? new Date(endDate.year, endDate.month, endDate.day) : undefined;
+
+      // MUST call synchronously - if we close() the drawer, component unmounts and callback is lost
+      onSelectDate(startDateObj, endDateObj);
+    }
+  };
+
+  const updateGrid = () => {
+    if (!internalDate()) return;
+
+    switch (gridMode()) {
+      case 'MONTH':
+        setGridData(computeMonthsGrid(internalDate()!));
+        break;
+      case 'YEAR':
+        setGridData(computeYearsGrid(internalDate()!));
+        break;
+      case 'DAY':
+      default:
+        setGridData(computeDaysGrid(internalDate()!));
+        break;
+    }
+  };
+
+  // Initialize internal date ONCE on mount
+  useEffect(() => {
+    let defaultDateTemp: Date | null = null;
+
+    if (!defaultDate) {
+      defaultDateTemp = new Date();
+    } else if (defaultDate instanceof Date) {
+      defaultDateTemp = defaultDate;
+    } else if (typeof defaultDate === 'string') {
+      defaultDateTemp = parseDate(defaultDate, displayFormat);
+      if (!defaultDateTemp) {
+        console.error('Provided default date is not suitable');
+        defaultDateTemp = new Date();
+      }
+    }
+
+    if (defaultDateTemp) {
+      setInternalDate(defaultDateTemp);
+      setSelectedCellFromDate(defaultDateTemp);
+    }
+  });
+
+  useEffect(() => {
+    updateGrid();
+  });
+
+  // Note: onSelectDate is now called synchronously in handleSelectionChange
+  // to avoid issues with unmounting before the effect runs
+
+  const handleKeyDown = useKeyBindings({
+    onEscape: () => {
+      setToggleState('closed');
+    },
+    onArrowLeft: () => {
+      const dteTemp = movePreviousGetDate();
+      setInternalDate(dteTemp);
+      setSelectedCellFromDate(dteTemp);
+    },
+    onArrowRight: () => {
+      const dteTemp = moveNextGetDate();
+      setInternalDate(dteTemp);
+      setSelectedCellFromDate(dteTemp);
+    },
+    onKey(e) {
+      if (e.ctrlKey && e.key === 'Enter') {
+        setToggleState('closed');
+      }
+      if (['y', 'Y'].includes(e.key)) {
+        setGridMode('YEAR');
+      }
+      if (['m', 'M'].includes(e.key)) {
+        setGridMode('MONTH');
+      }
+      if (['d', 'D'].includes(e.key)) {
+        setGridMode('DAY');
+      }
+      if (['n', 'N'].includes(e.key)) {
+        jumpToNow();
+      }
+      if (['s', 'S'].includes(e.key)) {
+        jumpToSelection();
+      }
+    },
+  });
+
+  const datePickerContextValue: IDatePickerContext = {
+    selectionMode: () => defaultSelectionMode,
+    gridMode: gridMode,
+    internalDate: () => internalDate() ?? new Date(),
+    gridData: gridData,
+    selectedCells: selection,
+    next: moveNext,
+    previous: movePrevious,
+    jumpToNow: jumpToNow,
+    jumpToSelection: jumpToSelection,
+    updateInternalDate: (newDate: Date) => setInternalDate(newDate),
+    updateSelectedCells: (cells: IDatePickerCell[]) => handleSelectionChange(cells),
+    updateGridMode: (mode: DatePickerGridModeType) => setGridMode(mode),
+    clear: () => {
+      setSelection([]);
+      onClearField?.();
+    },
+    close: () => {
+      setToggleState('closed');
+    },
+  };
+
+  useEffect(() => {
+    setCurrentDatePickerContext(datePickerContextValue);
+  });
+
+  return (
+    <PortalProvider>
+      <DatePickerDrawerUI
+        id={id}
+        defaultSelectionMode={defaultSelectionMode}
+        showFooter={showFooter}
+        onClick={handleOnClick}
+        width={width}
+        height={height}
+        handleKeyDown={handleKeyDown}
+      />
+    </PortalProvider>
+  );
+};
+
+export default DatePickerContentDrawer;