@mich8060/unified-design-system 0.1.10

package/src/ui/Datepicker/Datepicker.jsx

@@ -0,0 +1,330 @@
+import React, { useState, useMemo } from "react";
+import Button from "../Button/Button";
+import "./Datepicker.scss";
+
+const BASE_CLASS = "uds-datepicker";
+
+const DAYS_OF_WEEK = ["S", "M", "T", "W", "T", "F", "S"];
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+/**
+ * Datepicker component - A calendar component for date selection with range support
+ * @param {Date} value - Selected date (optional)
+ * @param {Date} startDate - Start date for range selection (optional)
+ * @param {Date} endDate - End date for range selection (optional)
+ * @param {Date} month - Month to display (default: current month)
+ * @param {function} onDateSelect - Callback when a date is selected: (date: Date) => void
+ * @param {array} unavailableDates - Array of dates that are unavailable
+ * @param {object} dateData - Object mapping dates to data (travel, onAssignment)
+ * @param {string} size - Calendar size: 'desktop' or 'mobile' (default: 'desktop')
+ * @param {boolean} showWeekdays - Whether to show weekday header (default: true)
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props
+ */
+export default function Datepicker({
+  value,
+  startDate,
+  endDate,
+  month,
+  onDateSelect,
+  unavailableDates = [],
+  dateData = {},
+  size = "desktop",
+  showWeekdays = true,
+  className = "",
+  ...props
+}) {
+  const [currentMonth, setCurrentMonth] = useState(month || new Date());
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const year = currentMonth.getFullYear();
+  const monthIndex = currentMonth.getMonth();
+
+  // Get first day of month and number of days
+  const firstDay = new Date(year, monthIndex, 1);
+  const lastDay = new Date(year, monthIndex + 1, 0);
+  const daysInMonth = lastDay.getDate();
+  const startingDayOfWeek = firstDay.getDay();
+
+  // Generate calendar days
+  const calendarDays = useMemo(() => {
+    const days = [];
+
+    // Add empty cells for days before month starts
+    for (let i = 0; i < startingDayOfWeek; i++) {
+      days.push(null);
+    }
+
+    // Add days of the month
+    for (let day = 1; day <= daysInMonth; day++) {
+      const date = new Date(year, monthIndex, day);
+      date.setHours(0, 0, 0, 0);
+      days.push(date);
+    }
+
+    // Add trailing empty cells to complete the last row
+    const remainder = days.length % 7;
+    if (remainder > 0) {
+      for (let i = 0; i < 7 - remainder; i++) {
+        days.push("trailing");
+      }
+    }
+
+    return days;
+  }, [year, monthIndex, startingDayOfWeek, daysInMonth]);
+
+  const isToday = (date) => {
+    if (!date) return false;
+    return date.getTime() === today.getTime();
+  };
+
+  const isSelected = (date) => {
+    if (!date) return false;
+    if (value) {
+      const selectedDate = new Date(value);
+      selectedDate.setHours(0, 0, 0, 0);
+      return date.getTime() === selectedDate.getTime();
+    }
+    return false;
+  };
+
+  const isInRange = (date) => {
+    if (!date || !startDate || !endDate) return false;
+    const checkDate = new Date(date);
+    checkDate.setHours(0, 0, 0, 0);
+    const start = new Date(startDate);
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(endDate);
+    end.setHours(0, 0, 0, 0);
+    return checkDate >= start && checkDate <= end;
+  };
+
+  const isRangeStart = (date) => {
+    if (!date || !startDate) return false;
+    const checkDate = new Date(date);
+    checkDate.setHours(0, 0, 0, 0);
+    const start = new Date(startDate);
+    start.setHours(0, 0, 0, 0);
+    return checkDate.getTime() === start.getTime();
+  };
+
+  const isRangeEnd = (date) => {
+    if (!date || !endDate) return false;
+    const checkDate = new Date(date);
+    checkDate.setHours(0, 0, 0, 0);
+    const end = new Date(endDate);
+    end.setHours(0, 0, 0, 0);
+    return checkDate.getTime() === end.getTime();
+  };
+
+  const isUnavailable = (date) => {
+    if (!date) return false;
+    return unavailableDates.some((unavail) => {
+      const unavailDate = new Date(unavail);
+      unavailDate.setHours(0, 0, 0, 0);
+      return date.getTime() === unavailDate.getTime();
+    });
+  };
+
+  const getDateData = (date) => {
+    if (!date) return null;
+    const dateKey = date.toISOString().split("T")[0];
+    return dateData[dateKey] || null;
+  };
+
+  // Check if a date is the last day of a string of on-assignment days
+  const isLastOnAssignmentDay = (date, dateIndex) => {
+    if (!date || !getDateData(date)?.onAssignment) return false;
+    
+    // Check next day in calendar
+    if (dateIndex < calendarDays.length - 1) {
+      const nextDate = calendarDays[dateIndex + 1];
+      if (nextDate && getDateData(nextDate)?.onAssignment) {
+        return false; // Next day also has onAssignment
+      }
+    }
+    return true; // This is the last day
+  };
+
+  const handleDateClick = (date) => {
+    if (date && !isUnavailable(date) && onDateSelect) {
+      onDateSelect(date);
+    }
+  };
+
+  const handlePrevMonth = () => {
+    setCurrentMonth(new Date(year, monthIndex - 1, 1));
+  };
+
+  const handleNextMonth = () => {
+    setCurrentMonth(new Date(year, monthIndex + 1, 1));
+  };
+
+  const classNames = [
+    BASE_CLASS,
+    size === "mobile" && `${BASE_CLASS}--mobile`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={classNames} {...props}>
+      {/* Header */}
+      <div className={`${BASE_CLASS}__header`}>
+        <Button icon="ArrowLeft" size="small" appearance="text" onClick={handlePrevMonth} aria-label="Previous month" />
+        <h3 className={`${BASE_CLASS}__title`}>
+          {MONTHS[monthIndex]} {year}
+        </h3>
+        <Button icon="ArrowRight" size="small" appearance="text" onClick={handleNextMonth} aria-label="Next month" />
+      </div>
+
+      {/* Weekday Header */}
+      {showWeekdays && (
+        <div className={`${BASE_CLASS}__weekdays`}>
+          {DAYS_OF_WEEK.map((day, index) => (
+            <div key={index} className={`${BASE_CLASS}__weekday`}>
+              {day}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Calendar Grid */}
+      <div className={`${BASE_CLASS}__grid`}>
+        {calendarDays.map((date, index) => {
+          // Trailing empty cells (pad last row to 7)
+          if (date === "trailing") {
+            return (
+              <div
+                key={`trailing-${index}`}
+                className={`${BASE_CLASS}__day ${BASE_CLASS}__day--trailing-empty`}
+              />
+            );
+          }
+
+          // Leading empty cells (before first day of month)
+          if (!date) {
+            return (
+              <div
+                key={`empty-${index}`}
+                className={`${BASE_CLASS}__day ${BASE_CLASS}__day--empty`}
+              />
+            );
+          }
+
+          const dateInfo = getDateData(date);
+          const travel = dateInfo?.travel || false;
+          const onAssignment = dateInfo?.onAssignment || false;
+          const unavailable = isUnavailable(date);
+          const today = isToday(date);
+          const selected = isSelected(date);
+          const inRange = isInRange(date);
+          const rangeStart = isRangeStart(date);
+          const rangeEnd = isRangeEnd(date);
+
+          // Determine if this is first or last day of on-assignment string
+          const lastOnAssignment = isLastOnAssignmentDay(date, index);
+
+          // Determine icon order based on rules:
+          // - First day of on-assignment string with travel: travel comes first
+          // - Last day of on-assignment string with both: on-assignment comes first
+          // - Default: travel first, then on-assignment
+          const showAssignmentFirst = lastOnAssignment && travel && onAssignment;
+
+          let dayState = "available";
+          if (unavailable) {
+            dayState = "unavailable";
+          } else if (selected || rangeStart || rangeEnd) {
+            dayState = "selected";
+          } else if (inRange) {
+            dayState = "range";
+          } else if (onAssignment && !travel) {
+            dayState = "on-assignment";
+          }
+
+          return (
+            <button
+              key={date.toISOString()}
+              type="button"
+              className={[
+                `${BASE_CLASS}__day`,
+                `${BASE_CLASS}__day--${dayState}`,
+                today && `${BASE_CLASS}__day--today`,
+                rangeStart && `${BASE_CLASS}__day--range-start`,
+                rangeEnd && `${BASE_CLASS}__day--range-end`,
+              ]
+                .filter(Boolean)
+                .join(" ")}
+              onClick={() => handleDateClick(date)}
+              disabled={unavailable}
+              aria-label={`${date.getDate()} ${MONTHS[monthIndex]} ${year}`}
+            >
+              <span className={`${BASE_CLASS}__day-number`}>
+                {date.getDate()}
+              </span>
+              {unavailable && (
+                <span className={`${BASE_CLASS}__day-unavailable-line`} />
+              )}
+              {(travel || onAssignment) && (
+                <div className={`${BASE_CLASS}__icons`}>
+                  {showAssignmentFirst ? (
+                    // Last day: on-assignment first, then travel
+                    <>
+                      {onAssignment && (
+                        <span className={`${BASE_CLASS}__icon ${BASE_CLASS}__icon--assignment`}>
+                          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="8" cy="8" r="7.5" fill="#DBEAFF" stroke="#1D4ED7"/>
+                          </svg>
+                        </span>
+                      )}
+                      {travel && (
+                        <span className={`${BASE_CLASS}__icon ${BASE_CLASS}__icon--travel`}>
+                          <svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M17.5791 15.4736H0.865265L9.22171 1L17.5791 15.4736Z" fill="#DCFCE7" stroke="#157F3D"/>
+                          </svg>
+                        </span>
+                      )}
+                    </>
+                  ) : (
+                    // First day or default: travel first, then on-assignment
+                    <>
+                      {travel && (
+                        <span className={`${BASE_CLASS}__icon ${BASE_CLASS}__icon--travel`}>
+                          <svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M17.5791 15.4736H0.865265L9.22171 1L17.5791 15.4736Z" fill="#DCFCE7" stroke="#157F3D"/>
+                          </svg>
+                        </span>
+                      )}
+                      {onAssignment && (
+                        <span className={`${BASE_CLASS}__icon ${BASE_CLASS}__icon--assignment`}>
+                          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="8" cy="8" r="7.5" fill="#DBEAFF" stroke="#1D4ED7"/>
+                          </svg>
+                        </span>
+                      )}
+                    </>
+                  )}
+                </div>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/ui/Datepicker/Datepicker.scss

@@ -0,0 +1,206 @@
+@use "../../styles/typography" as *;
+
+.uds-datepicker {
+  display: inline-flex;
+  flex-direction: column;
+  width: fit-content;
+  min-width: 280px;
+  gap: 0px;
+  background: var(--uds-surface-primary);
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+  border-radius: var(--uds-radius-8);
+  width: 450px;
+
+  &--mobile {
+    width: 375px;
+  }
+
+  &__header {
+    border-bottom: var(--uds-border-width-1) solid var(--uds-border-primary);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--uds-spacing-12) var(--uds-spacing-16);
+  }
+
+  &__title {
+    @include uds-body-16-semibold;
+    margin: 0;
+    color: var(--uds-text-primary);
+  }
+
+  &__weekdays {
+    display: flex;
+    flex-direction: row;
+    padding: var(--uds-spacing-8) 0;
+    border-bottom: var(--uds-border-width-1) solid var(--uds-border-primary);
+  }
+
+  &__weekday {
+    @include uds-body-12-medium;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1 1 0;
+    color: var(--uds-text-secondary);
+    text-align: center;
+  }
+
+  &__grid {
+    background: var(--uds-surface-secondary);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    overflow: hidden;
+    border-bottom-left-radius: var(--uds-radius-8);
+    border-bottom-right-radius: var(--uds-radius-8);
+  }
+
+  &__day {
+    all: unset;
+    @include uds-body-14;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    flex: 1 1 calc(100% / 7);
+    aspect-ratio: 1;
+    min-width: 0;
+    border-bottom: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-right: var(--uds-border-width-1) solid var(--uds-border-primary);
+    background: var(--uds-surface-primary);
+    color: var(--uds-text-primary);
+    cursor: pointer;
+    padding: var(--uds-spacing-8);
+    transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+    max-width: calc(100% / 7);
+    gap: var(--uds-gap-8);
+    
+    &:nth-child(7n) {
+      border-right: none;
+    }
+
+    // Remove border-bottom from the last row (grid is always padded to full rows of 7)
+    &:nth-last-child(-n+7) {
+      border-bottom: none;
+    }
+
+    &:hover:not(:disabled):not(&--selected):not(&--range):not(&--on-assignment) {
+      background: var(--uds-surface-secondary);
+    }
+
+    &:focus-visible {
+      outline: solid 2px var(--uds-border-focus);
+      outline-offset: 2px;
+    }
+
+    &--empty {
+      cursor: default;
+      pointer-events: none;
+      background: transparent;
+      border-right: var(--uds-border-width-1) solid var(--uds-border-primary);
+      border-bottom: var(--uds-border-width-1) solid var(--uds-border-primary);
+    }
+
+    &--trailing-empty {
+      cursor: default;
+      pointer-events: none;
+      background: transparent;
+    }
+
+    &--selected {
+      background: var(--uds-system-action-primary);
+      color: var(--uds-text-inverse);
+      font-weight: 600;
+    }
+
+    &--range {
+      background: var(--uds-color-primary-100);
+      color: var(--uds-text-primary);
+    }
+
+    &--range-start {
+      background: var(--uds-system-action-primary);
+      color: var(--uds-text-inverse);
+      font-weight: 600;
+    }
+
+    &--range-end {
+      background: var(--uds-system-action-primary);
+      color: var(--uds-text-inverse);
+      font-weight: 600;
+    }
+
+    &--today {
+      background: var(--uds-system-action-quaternary);
+
+      &.uds-datepicker__day--selected {
+        background: var(--uds-system-action-primary);
+        color: var(--uds-text-inverse);
+      }
+    }
+
+    &--unavailable {
+      background: var(--uds-system-destructive-quaternary);
+      cursor: not-allowed;
+    }
+
+    &--on-assignment {
+      background: var(--uds-color-primary-600);
+      color: var(--uds-text-inverse);
+    }
+  }
+
+  &__day-number {
+    @include uds-body-14;
+    color: inherit;
+    z-index: 1;
+  }
+
+  &__day-unavailable-line {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: var(--uds-system-destructive-primary);
+    transform: translateY(-50%);
+    z-index: 2;
+  }
+
+  &__icons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--uds-spacing-2);
+    z-index: 1;
+  }
+
+  &__icon {
+    &--travel {
+      svg {
+        width: 19px;
+        height: 16px;
+        display: block;
+      }
+    }
+
+    &--assignment {
+      svg {
+        width: 16px;
+        height: 16px;
+        display: block;
+      }
+    }
+  }
+
+  // Mobile size adjustments
+  &--mobile {
+    width: 375px;
+
+    &__day {
+      min-height: 48px;
+    }
+  }
+}

package/src/ui/Datepicker/Datepicker.spec.ts

@@ -0,0 +1,12 @@
+export const DATEPICKER_DEFAULTS = {
+  className: "",
+} as const;
+
+export const DATEPICKER_STORY_SPEC = {
+  defaults: {
+    className: DATEPICKER_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/Datepicker/Datepicker.stories.jsx

@@ -0,0 +1,14 @@
+import Datepicker from "./Datepicker";
+
+export default {
+  title: "Components/Datepicker",
+  component: Datepicker,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Datepicker/Datepicker.stories.tsx

@@ -0,0 +1,14 @@
+import Datepicker from "./Datepicker.jsx";
+
+export default {
+  title: "Components/Datepicker",
+  component: Datepicker,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Datepicker/Datepicker.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/Datepicker/Datepicker.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyDatepicker from "./Datepicker.jsx";
+
+const Datepicker = LegacyDatepicker as ComponentType<any>;
+
+export default Datepicker;

package/src/ui/Datepicker/Datepicker.types.ts

@@ -0,0 +1,3 @@
+export interface DatepickerProps {
+  className?: string;
+}

package/src/ui/Datepicker/index.js

@@ -0,0 +1,2 @@
+export { default as Datepicker } from "./Datepicker";
+export { default } from "./Datepicker";

package/src/ui/Divider/Divider.ai.md

@@ -0,0 +1,34 @@
+# Divider
+
+Visual separator for content sections with optional label and icon.
+
+## When to Use
+- Separating content sections within a page or panel
+- Visual break between groups of related items
+- Section headers with divider lines
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `variant` | `string` | `"line"` | `"line"`, `"solid"` | Line divider or solid 8px block |
+| `label` | `string` | — | — | Label text on the divider |
+| `icon` | `string` | — | Phosphor icon name | Icon on the divider |
+| `alignment` | `string` | `"center"` | `"left"`, `"center"`, `"right"` | Label/icon alignment (line variant only) |
+| `labelWithIcon` | `boolean` | `false` | — | Show icon inline with label text |
+| `className` | `string` | `""` | — | Additional CSS classes |
+
+## Examples
+
+```jsx
+<Divider />
+<Divider label="Or" />
+<Divider label="Section Title" alignment="left" />
+<Divider variant="solid" />
+<Divider icon="Star" />
+<Divider label="New Section" icon="Plus" labelWithIcon />
+```
+
+## Note
+- Has `role="separator"` for accessibility
+- `solid` variant ignores label/icon props