@scalepad/ui 0.1.0

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,242 @@
+import { useCallback } from 'react';
+
+import {
+  Box,
+  Flex,
+  Group,
+  ScrollArea,
+  SegmentedControl,
+  Stack,
+} from '@mantine/core';
+import { type DateValue } from '@mantine/dates';
+
+import {
+  endOfMonth,
+  endOfYear,
+  getCurrentDate,
+  getCurrentQuarter,
+  startOfMonth,
+  startOfYear,
+  toDate,
+} from '@scalepad/ui-utils/date';
+
+import { Button } from '../Button';
+import { Text } from '../Typography';
+import { CustomRangePicker } from './CustomRangePicker';
+import { DateInput } from './DateInput';
+import { MonthlyRangePicker } from './MonthlyRangePicker';
+import { QuarterlyRangePicker } from './QuarterlyRangePicker';
+import { QuickPicksSidebar } from './QuickPicksSidebar';
+import { YearlyRangePicker } from './YearlyRangePicker';
+
+import type { DatePickerGranularity, DateRange } from './types';
+
+/**
+ * Fully controlled DatePicker component.
+ * Parent component must manage all state (startDate, endDate, granularity).
+ */
+export interface DatePickerProps {
+  /** Current start date (controlled) */
+  startDate: DateValue;
+  /** Current end date (controlled) */
+  endDate: DateValue;
+  /** Current range type (controlled) */
+  granularity?: DatePickerGranularity;
+  /** Allowed range types to show. If not specified, all types are allowed. */
+  allowedRangeTypes?: DatePickerGranularity[];
+  /** Maximum historical date that can be selected */
+  maxDataHistory?: DateValue;
+  /** Called when any date or range type changes */
+  onChange?: (range: DateRange, granularity: DatePickerGranularity) => void;
+  /** Called when user clicks Apply button */
+  onApply?: (range: DateRange, granularity: DatePickerGranularity) => void;
+}
+
+export function DatePicker({
+  startDate,
+  endDate,
+  granularity = 'quarterly',
+  allowedRangeTypes,
+  maxDataHistory,
+  onChange,
+  onApply,
+}: DatePickerProps) {
+  const today = getCurrentDate();
+
+  // Filter allowed range types (default to all if not specified)
+  const allRangeTypes: DatePickerGranularity[] = [
+    'monthly',
+    'quarterly',
+    'yearly',
+    'custom',
+  ];
+  const availableRangeTypes = allowedRangeTypes || allRangeTypes;
+
+  // Convert DateValue to Date for Mantine components
+  const minDate = maxDataHistory ? toDate(maxDataHistory) : undefined;
+  const maxDate = today;
+
+  // All changes immediately propagate to parent via onChange
+  const handleChange = useCallback(
+    (range: DateRange, nextRangeType: DatePickerGranularity = granularity) => {
+      onChange?.(range, nextRangeType);
+    },
+    [onChange, granularity],
+  );
+
+  const handleRangeTypeChange = useCallback(
+    (newRangeType: DatePickerGranularity) => {
+      // When range type changes, reset to current period for that type
+      let newStartDate: Date;
+      let newEndDate: Date;
+
+      switch (newRangeType) {
+        case 'monthly':
+          newStartDate = startOfMonth(today);
+          newEndDate = endOfMonth(today);
+          break;
+        case 'quarterly': {
+          const currentQ = getCurrentQuarter(today);
+          newStartDate = currentQ.start;
+          newEndDate = currentQ.end;
+          break;
+        }
+        case 'yearly':
+          newStartDate = startOfYear(today);
+          newEndDate = endOfYear(today);
+          break;
+        case 'custom':
+          // For custom, keep the current dates or fallback to current month
+          if (startDate && endDate) {
+            newStartDate =
+              startDate instanceof Date ? startDate : new Date(startDate);
+            newEndDate = endDate instanceof Date ? endDate : new Date(endDate);
+          } else {
+            newStartDate = startOfMonth(today);
+            newEndDate = endOfMonth(today);
+          }
+          break;
+      }
+
+      onChange?.(
+        { startDate: newStartDate, endDate: newEndDate },
+        newRangeType,
+      );
+    },
+    [onChange, today, startDate, endDate],
+  );
+
+  const handleApply = useCallback(() => {
+    onApply?.({ startDate, endDate }, granularity);
+  }, [startDate, endDate, onApply, granularity]);
+
+  return (
+    <Flex gap="md" align="stretch">
+      {/* Quick Picks Sidebar */}
+      <Box
+        style={{ borderRight: '1px solid var(--color-stroke-subdued-default)' }}
+        pr="lg"
+      >
+        <QuickPicksSidebar
+          minDate={minDate}
+          maxDate={maxDate}
+          allowedRangeTypes={availableRangeTypes}
+          onChange={(range, nextGranularity) => {
+            handleChange(range, nextGranularity);
+          }}
+        />
+      </Box>
+
+      {/* Main Content */}
+      <Stack gap="0" style={{ flex: 1 }}>
+        {/* Tabs */}
+        <Group justify="center" align="center">
+          <SegmentedControl
+            value={granularity}
+            onChange={value =>
+              handleRangeTypeChange(value as DatePickerGranularity)
+            }
+            data={[
+              { label: 'Monthly', value: 'monthly' },
+              { label: 'Quarterly', value: 'quarterly' },
+              { label: 'Yearly', value: 'yearly' },
+              { label: 'Custom', value: 'custom' },
+            ].filter(item =>
+              availableRangeTypes.includes(item.value as DatePickerGranularity),
+            )}
+          />
+        </Group>
+
+        {/* Content Area */}
+        <ScrollArea h="420px">
+          <Box py="md">
+            {granularity === 'quarterly' && (
+              <QuarterlyRangePicker
+                startDate={startDate}
+                endDate={endDate}
+                minDate={minDate}
+                maxDate={maxDate}
+                onChange={handleChange}
+              />
+            )}
+
+            {granularity === 'monthly' && (
+              <MonthlyRangePicker
+                startDate={startDate}
+                endDate={endDate}
+                minDate={minDate}
+                maxDate={maxDate}
+                onChange={handleChange}
+              />
+            )}
+
+            {granularity === 'yearly' && (
+              <YearlyRangePicker
+                startDate={startDate}
+                endDate={endDate}
+                minDate={minDate}
+                maxDate={maxDate}
+                onChange={handleChange}
+              />
+            )}
+
+            {granularity === 'custom' && (
+              <CustomRangePicker
+                startDate={startDate}
+                endDate={endDate}
+                minDate={minDate}
+                maxDate={maxDate}
+                onChange={handleChange}
+              />
+            )}
+          </Box>
+        </ScrollArea>
+
+        {/* Date Range Inputs and Apply Button */}
+        <Group
+          justify="space-between"
+          align="center"
+          style={{ borderTop: '1px solid var(--color-stroke-subdued-default)' }}
+          pt="md"
+        >
+          <Group gap="xs">
+            <DateInput
+              date={startDate}
+              onChange={date => {
+                handleChange({ startDate: date, endDate }, 'custom');
+              }}
+            />
+            <Text variant="caption1">to</Text>
+            <DateInput
+              date={endDate}
+              onChange={date => {
+                handleChange({ startDate, endDate: date }, 'custom');
+              }}
+            />
+          </Group>
+          <Button onClick={handleApply}>Apply</Button>
+        </Group>
+      </Stack>
+    </Flex>
+  );
+}

package/src/components/DatePicker/MonthlyRangePicker.tsx

@@ -0,0 +1,231 @@
+import { useMemo } from 'react';
+
+import { Box, Card, Group, Stack } from '@mantine/core';
+import type { DateValue } from '@mantine/dates';
+
+import {
+  createDate,
+  DateFormat,
+  endOfMonth,
+  formatDate,
+  getCurrentDate,
+  getMonth,
+  getYear,
+  isAfter,
+  isBefore,
+  isSameDay,
+  startOfMonth,
+} from '@scalepad/ui-utils/date';
+
+import { Text } from '../Typography';
+
+import type { DateRange } from './types';
+
+interface MonthlyRangePickerProps {
+  startDate: DateValue;
+  endDate: DateValue;
+  minDate?: DateValue;
+  maxDate: DateValue;
+  onChange?: (range: DateRange) => void;
+}
+
+export function MonthlyRangePicker({
+  startDate,
+  endDate,
+  minDate,
+  maxDate,
+  onChange,
+}: MonthlyRangePickerProps) {
+  const today = getCurrentDate();
+  const currentYear = getYear(today);
+  const currentMonth = getMonth(today);
+
+  // Generate months for display
+  const monthsByYear = useMemo(() => {
+    const months: Array<{ year: number; month: number; label: string }> = [];
+    const startYear = minDate ? getYear(minDate) : currentYear - 1;
+    const endYear = currentYear;
+
+    for (let year = endYear; year >= startYear; year--) {
+      // For current year, show all months (they'll be disabled if in the future)
+      // For past years, show all 12 months (they've all ended)
+      const endMonth = 11; // Always show all 12 months
+      for (let m = endMonth; m >= 0; m--) {
+        const monthEnd = endOfMonth(createDate(year, m, 1));
+
+        // Skip if before minDate
+        if (minDate && isBefore(monthEnd, minDate)) {
+          continue;
+        }
+        // Skip if after today (only for past years - current year shows all months)
+        if (year !== currentYear && isAfter(monthEnd, today)) {
+          continue;
+        }
+
+        months.push({
+          year,
+          month: m,
+          label: formatDate(createDate(year, m, 1), DateFormat.MONTH_SHORT),
+        });
+      }
+    }
+
+    // Group months by year
+    const grouped: Record<
+      number,
+      Array<{ year: number; month: number; label: string }>
+    > = {};
+    months.forEach(m => {
+      if (!grouped[m.year]) {
+        grouped[m.year] = [];
+      }
+      grouped[m.year].push(m);
+    });
+
+    // Reverse the order of months within each year (Jan, Feb, ..., Dec instead of Dec, ..., Feb, Jan)
+    Object.keys(grouped).forEach(year => {
+      grouped[parseInt(year, 10)].reverse();
+    });
+
+    return grouped;
+  }, [minDate, currentYear, today]);
+
+  // Check if a month is the current month
+  const isCurrentMonth = (year: number, month: number) => {
+    return year === currentYear && month === currentMonth;
+  };
+
+  // Handle month selection
+  const handleMonthSelect = (year: number, month: number) => {
+    const monthDate = createDate(year, month, 1);
+    const monthStart = startOfMonth(monthDate);
+    const monthEnd = endOfMonth(monthDate);
+
+    let newStartDate = monthStart;
+    let newEndDate = monthEnd;
+
+    // Ensure dates are within bounds
+    if (minDate) {
+      const minDateObj =
+        minDate instanceof Date ? minDate : minDate ? new Date(minDate) : null;
+      if (minDateObj && isBefore(newStartDate, minDateObj)) {
+        newStartDate = minDateObj;
+      }
+    }
+    const maxDateObj =
+      maxDate instanceof Date ? maxDate : maxDate ? new Date(maxDate) : null;
+    if (maxDateObj && isAfter(newEndDate, maxDateObj)) {
+      newEndDate = maxDateObj;
+    }
+
+    onChange?.({
+      startDate: newStartDate,
+      endDate: newEndDate,
+    });
+  };
+
+  // Check if month is selected
+  const isMonthSelected = (year: number, month: number) => {
+    if (!startDate || !endDate) {
+      return false;
+    }
+    const monthDate = createDate(year, month, 1);
+    const monthStart = startOfMonth(monthDate);
+    const monthEnd = endOfMonth(monthDate);
+    // Check if the selected range matches this month
+    // Start date should be at or before month start, end date should be within or at month end
+    return (
+      (isBefore(startDate, monthStart) || isSameDay(startDate, monthStart)) &&
+      (isAfter(endDate, monthEnd) ||
+        isSameDay(endDate, monthEnd) ||
+        (isAfter(endDate, monthStart) && isBefore(endDate, monthEnd)))
+    );
+  };
+
+  return (
+    <Stack gap="xs">
+      {Object.entries(monthsByYear)
+        .sort(([a], [b]) => parseInt(b, 10) - parseInt(a, 10))
+        .map(([year, months]) => {
+          const yearNum = parseInt(year, 10);
+          return (
+            <Stack key={year} gap="xs">
+              <Text variant="caption1.stronger">{year}</Text>
+              <Group gap="md">
+                {months.map(m => {
+                  const isCurrent = isCurrentMonth(yearNum, m.month);
+                  const isSelected = isMonthSelected(yearNum, m.month);
+                  const monthDate = createDate(yearNum, m.month, 1);
+                  const monthStart = startOfMonth(monthDate);
+                  const monthEnd = endOfMonth(monthDate);
+                  const minDateObj = minDate
+                    ? minDate instanceof Date
+                      ? minDate
+                      : new Date(minDate)
+                    : null;
+                  // Disable if before minDate or if the month hasn't started yet (completely in the future)
+                  // Allow current month to be selected even if incomplete
+                  const isDisabled =
+                    (minDateObj && isBefore(monthEnd, minDateObj)) ||
+                    isAfter(monthStart, today);
+
+                  return (
+                    <Card
+                      key={`${year}-${m.month}`}
+                      p="xs"
+                      withBorder
+                      shadow="none"
+                      style={{
+                        width: 103,
+                        minHeight: 60,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        cursor: isDisabled ? 'not-allowed' : 'pointer',
+                        opacity: isDisabled ? 0.5 : 1,
+                        borderColor: isSelected
+                          ? 'var(--color-stroke-primary-default)'
+                          : undefined,
+                        position: 'relative',
+                      }}
+                      onClick={() =>
+                        !isDisabled && handleMonthSelect(yearNum, m.month)
+                      }
+                    >
+                      <Text
+                        variant="caption1.stronger"
+                        c={
+                          isSelected
+                            ? 'text.primary.default'
+                            : isDisabled
+                              ? 'text.disabled.default'
+                              : undefined
+                        }
+                      >
+                        {m.label}
+                      </Text>
+                      {isCurrent && (
+                        <Box
+                          style={{
+                            position: 'absolute',
+                            bottom: 4,
+                            left: '50%',
+                            transform: 'translateX(-50%)',
+                            width: 6,
+                            height: 6,
+                            borderRadius: '50%',
+                            backgroundColor:
+                              'var(--color-background-primary-filled)',
+                          }}
+                        />
+                      )}
+                    </Card>
+                  );
+                })}
+              </Group>
+            </Stack>
+          );
+        })}
+    </Stack>
+  );
+}

package/src/components/DatePicker/QuarterlyRangePicker.tsx

@@ -0,0 +1,224 @@
+import { useMemo } from 'react';
+
+import { Box, Card, Group, Stack } from '@mantine/core';
+import type { DateValue } from '@mantine/dates';
+
+import {
+  getCurrentDate,
+  getQuarter,
+  getQuarterEnd,
+  getQuarterStart,
+  getYear,
+  isAfter,
+  isBefore,
+  isSameDay,
+} from '@scalepad/ui-utils/date';
+
+import { Text } from '../Typography';
+
+import type { DateRange } from './types';
+
+interface QuarterlyRangePickerProps {
+  startDate: DateValue;
+  endDate: DateValue;
+  minDate?: DateValue;
+  maxDate: DateValue;
+  onChange?: (range: DateRange) => void;
+}
+
+export function QuarterlyRangePicker({
+  startDate,
+  endDate,
+  minDate,
+  maxDate,
+  onChange,
+}: QuarterlyRangePickerProps) {
+  const today = getCurrentDate();
+  const currentYear = getYear(today);
+  const currentQuarter = getQuarter(today);
+
+  // Generate quarters for display
+  const quartersByYear = useMemo(() => {
+    const quarters: Array<{ year: number; quarter: number; label: string }> =
+      [];
+    const startYear = minDate ? getYear(minDate) : currentYear - 2;
+    const endYear = currentYear;
+
+    for (let year = endYear; year >= startYear; year--) {
+      // For current year, show all quarters (they'll be disabled if in the future)
+      // For past years, only show quarters that have ended
+      for (let q = 3; q >= 0; q--) {
+        const quarterEnd = getQuarterEnd(year, q);
+
+        // Skip if before minDate
+        if (minDate && isBefore(quarterEnd, minDate)) {
+          continue;
+        }
+        // Skip if after today (only for past years - current year shows all quarters)
+        if (year !== currentYear && isAfter(quarterEnd, today)) {
+          continue;
+        }
+
+        quarters.push({
+          year,
+          quarter: q,
+          label: `Q${q + 1}`,
+        });
+      }
+    }
+
+    // Group quarters by year
+    const grouped: Record<
+      number,
+      Array<{ year: number; quarter: number; label: string }>
+    > = {};
+    quarters.forEach(q => {
+      if (!grouped[q.year]) {
+        grouped[q.year] = [];
+      }
+      grouped[q.year].push(q);
+    });
+
+    // Reverse the order of quarters within each year (Q1, Q2, Q3, Q4 instead of Q4, Q3, Q2, Q1)
+    Object.keys(grouped).forEach(year => {
+      grouped[parseInt(year, 10)].reverse();
+    });
+
+    return grouped;
+  }, [minDate, currentYear, today]);
+
+  // Check if a quarter is the current quarter
+  const isCurrentQuarter = (year: number, quarter: number) => {
+    return year === currentYear && quarter === currentQuarter;
+  };
+
+  // Handle quarter selection
+  const handleQuarterSelect = (year: number, quarter: number) => {
+    const quarterStart = getQuarterStart(year, quarter);
+    const quarterEnd = getQuarterEnd(year, quarter);
+
+    let newStartDate = quarterStart;
+    let newEndDate = quarterEnd;
+
+    // Ensure dates are within bounds
+    if (minDate) {
+      const minDateObj =
+        minDate instanceof Date ? minDate : minDate ? new Date(minDate) : null;
+      if (minDateObj && isBefore(newStartDate, minDateObj)) {
+        newStartDate = minDateObj;
+      }
+    }
+    const maxDateObj =
+      maxDate instanceof Date ? maxDate : maxDate ? new Date(maxDate) : null;
+    if (maxDateObj && isAfter(newEndDate, maxDateObj)) {
+      newEndDate = maxDateObj;
+    }
+
+    onChange?.({
+      startDate: newStartDate,
+      endDate: newEndDate,
+    });
+  };
+
+  // Check if quarter is selected
+  const isQuarterSelected = (year: number, quarter: number) => {
+    if (!startDate || !endDate) {
+      return false;
+    }
+    const quarterStart = getQuarterStart(year, quarter);
+    const quarterEnd = getQuarterEnd(year, quarter);
+    // Check if the selected range matches this quarter
+    // Start date should be at or before quarter start, end date should be within or at quarter end
+    return (
+      (isBefore(startDate, quarterStart) ||
+        isSameDay(startDate, quarterStart)) &&
+      (isAfter(endDate, quarterEnd) ||
+        isSameDay(endDate, quarterEnd) ||
+        (isAfter(endDate, quarterStart) && isBefore(endDate, quarterEnd)))
+    );
+  };
+
+  return (
+    <Stack gap="xs">
+      {Object.entries(quartersByYear)
+        .sort(([a], [b]) => parseInt(b, 10) - parseInt(a, 10))
+        .map(([year, quarters]) => (
+          <Stack key={year} gap="xs">
+            <Text variant="caption1.stronger">{year}</Text>
+            <Group gap="md">
+              {quarters.map(q => {
+                const yearNum = parseInt(year, 10);
+                const isCurrent = isCurrentQuarter(yearNum, q.quarter);
+                const isSelected = isQuarterSelected(yearNum, q.quarter);
+                const quarterStart = getQuarterStart(yearNum, q.quarter);
+                const quarterEnd = getQuarterEnd(yearNum, q.quarter);
+                const minDateObj = minDate
+                  ? minDate instanceof Date
+                    ? minDate
+                    : new Date(minDate)
+                  : null;
+                // Disable if before minDate or if the quarter hasn't started yet (completely in the future)
+                // Allow current quarter to be selected even if incomplete
+                const isDisabled =
+                  (minDateObj && isBefore(quarterEnd, minDateObj)) ||
+                  isAfter(quarterStart, today);
+
+                return (
+                  <Card
+                    key={`${year}-Q${q.quarter + 1}`}
+                    p="xs"
+                    withBorder
+                    shadow="none"
+                    style={{
+                      flex: 1,
+                      minHeight: 60,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      cursor: isDisabled ? 'not-allowed' : 'pointer',
+                      opacity: isDisabled ? 0.5 : 1,
+                      borderColor: isSelected
+                        ? 'var(--color-stroke-primary-default)'
+                        : undefined,
+                      position: 'relative',
+                    }}
+                    onClick={() =>
+                      !isDisabled && handleQuarterSelect(yearNum, q.quarter)
+                    }
+                  >
+                    <Text
+                      variant="caption1.stronger"
+                      c={
+                        isSelected
+                          ? 'text.primary.default'
+                          : isDisabled
+                            ? 'text.disabled.default'
+                            : undefined
+                      }
+                    >
+                      {q.label}
+                    </Text>
+                    {isCurrent && (
+                      <Box
+                        style={{
+                          position: 'absolute',
+                          bottom: 4,
+                          left: '50%',
+                          transform: 'translateX(-50%)',
+                          width: 6,
+                          height: 6,
+                          borderRadius: '50%',
+                          backgroundColor:
+                            'var(--color-background-primary-filled)',
+                        }}
+                      />
+                    )}
+                  </Card>
+                );
+              })}
+            </Group>
+          </Stack>
+        ))}
+    </Stack>
+  );
+}