@scripso-homepad/ui 0.4.2 → 0.4.4

package/src/components/DatePicker.tsx

@@ -0,0 +1,366 @@
+import { useEffect, useRef, useState, type ComponentRef } from "react";
+import {
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { CalendarIcon } from "../icons/CalendarIcon";
+import {
+  CALENDAR_FIELD_ICON_SIZE,
+  CALENDAR_FIELD_WIDTH,
+  CALENDAR_PANEL_HEIGHT,
+  CALENDAR_PANEL_WIDTH,
+  calendarFieldMetrics,
+  calendarFieldPlaceholderTypography,
+  calendarFieldTypography,
+  calendarLabelTypography,
+  resolveCalendarDropdownLeft,
+  resolveCalendarDropdownTop,
+} from "../theme/calendar";
+import { getSelectFieldStyles, resolveInputVisualState, SELECT_LABEL_GAP } from "../theme/select";
+import { colors } from "../theme/tokens";
+import {
+  formatCalendarDate,
+  formatCalendarDateRange,
+  type DateRange,
+} from "../utils/calendarDays";
+import { getCalendarTranslations } from "../utils/calendarLocalization";
+import { useCalendarLocale } from "../utils/calendarLocaleContext";
+import { useApplyWebClassName } from "../utils/useApplyWebClassName";
+import {
+  Calendar,
+  type CalendarLabels,
+  type CalendarRangeProps,
+  type CalendarSingleProps,
+} from "./Calendar";
+import { Label } from "./Label";
+
+export type { CalendarLabels, DateRange };
+
+type DatePickerFieldProps = {
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  error?: string;
+  invalid?: boolean;
+  hint?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  className?: string;
+  fieldClassName?: string;
+  panelClassName?: string;
+  labelClassName?: string;
+  errorClassName?: string;
+  hintClassName?: string;
+  /** Opens the calendar popup on mount (useful for Storybook previews). */
+  defaultOpen?: boolean;
+  /** Closes the popup after a complete range is selected. Defaults to true in range mode. */
+  closeOnRangeComplete?: boolean;
+};
+
+export type DatePickerSingleProps = Omit<CalendarSingleProps, "style" | "className"> &
+  DatePickerFieldProps & {
+    mode?: "single";
+    formatDate?: (date: Date) => string;
+  };
+
+export type DatePickerRangeProps = Omit<CalendarRangeProps, "style" | "className"> &
+  DatePickerFieldProps & {
+    mode: "range";
+    formatRange?: (range: DateRange) => string;
+    rangeSeparator?: string;
+  };
+
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+
+export function DatePicker(props: DatePickerProps) {
+  const {
+    label,
+    placeholder,
+    locale,
+    labels,
+    minDate,
+    maxDate,
+    today,
+    viewDate,
+    defaultViewDate,
+    onViewDateChange,
+    disabled = false,
+    error,
+    invalid,
+    hint,
+    containerStyle,
+    className,
+    fieldClassName,
+    panelClassName,
+    labelClassName,
+    errorClassName,
+    hintClassName,
+    defaultOpen = false,
+  } = props;
+  const mode = props.mode ?? "single";
+  const closeOnRangeComplete =
+    props.mode === "range" ? (props.closeOnRangeComplete ?? true) : false;
+  const resolvedLocale = useCalendarLocale(locale);
+  const translations = getCalendarTranslations(resolvedLocale);
+  const resolvedPlaceholder =
+    placeholder ?? (mode === "range" ? translations.rangePlaceholder : translations.datePlaceholder);
+  const wrapperRef = useRef<ComponentRef<typeof View>>(null);
+  const triggerRef = useRef<ComponentRef<typeof Pressable>>(null);
+  const helperRef = useRef<ComponentRef<typeof Text>>(null);
+  const [open, setOpen] = useState(defaultOpen);
+  const [anchor, setAnchor] = useState<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>(null);
+
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(triggerRef, fieldClassName);
+  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+
+  useEffect(() => {
+    if (!defaultOpen || disabled) {
+      return;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      triggerRef.current?.measureInWindow((x, y, width, height) => {
+        setAnchor({ x, y, width, height });
+        setOpen(true);
+      });
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [defaultOpen, disabled]);
+
+  const hasError = Boolean(error) || Boolean(invalid);
+  const fieldStyles = getSelectFieldStyles(
+    resolveInputVisualState({
+      error: hasError,
+      disabled,
+    }),
+  );
+
+  const hasValue =
+    mode === "single"
+      ? Boolean(props.value)
+      : Boolean(props.mode === "range" && props.value?.start);
+  const displayValue = (() => {
+    if (props.mode === "range") {
+      if (!props.value?.start) {
+        return resolvedPlaceholder;
+      }
+
+      return (
+        props.formatRange?.(props.value) ??
+        formatCalendarDateRange(props.value, resolvedLocale, props.rangeSeparator)
+      );
+    }
+
+    if (props.value) {
+      return props.formatDate?.(props.value) ?? formatCalendarDate(props.value, resolvedLocale);
+    }
+
+    return resolvedPlaceholder;
+  })();
+  const isPlaceholder = !hasValue;
+  const valueTextStyle = isPlaceholder
+    ? {
+        ...calendarFieldPlaceholderTypography,
+        color: disabled ? colors.stormGray300 : calendarFieldPlaceholderTypography.color,
+      }
+    : {
+        ...calendarFieldTypography,
+        color: fieldStyles.value.color,
+      };
+  const helperMessage = error ?? hint;
+  const panelWidth = CALENDAR_PANEL_WIDTH;
+  const panelLeft = anchor ? resolveCalendarDropdownLeft(anchor, panelWidth) : 0;
+  const dropdownTop = anchor ? resolveCalendarDropdownTop(anchor) : 0;
+  const resolvedDefaultViewDate =
+    defaultViewDate ??
+    (props.mode === "range" ? props.value?.start : props.value) ??
+    today;
+
+  function closePicker() {
+    setOpen(false);
+    setAnchor(null);
+  }
+
+  function openPicker() {
+    if (disabled) {
+      return;
+    }
+
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setAnchor({ x, y, width, height });
+      setOpen(true);
+    });
+  }
+
+  function handleSingleSelect(date: Date) {
+    if (props.mode === "range") {
+      return;
+    }
+
+    props.onChange?.(date);
+    closePicker();
+  }
+
+  function handleRangeSelect(range: DateRange) {
+    if (props.mode !== "range") {
+      return;
+    }
+
+    props.onChange?.(range);
+
+    if (closeOnRangeComplete && range.end) {
+      closePicker();
+    }
+  }
+
+  return (
+    <View ref={wrapperRef} style={[styles.wrapper, containerStyle]}>
+      {label ? (
+        <Label disabled={disabled} style={styles.label} className={labelClassName}>
+          {label}
+        </Label>
+      ) : null}
+
+      <View style={[fieldStyles.outline, styles.fieldOutline]}>
+        <Pressable
+          ref={triggerRef}
+          accessibilityRole="button"
+          accessibilityState={{ disabled, expanded: open }}
+          disabled={disabled}
+          onPress={openPicker}
+          style={[calendarFieldMetrics.container, fieldStyles.container]}
+        >
+          <Text
+            style={[calendarFieldMetrics.value, valueTextStyle]}
+            numberOfLines={1}
+          >
+            {displayValue}
+          </Text>
+          <View style={styles.iconSlot}>
+            <CalendarIcon
+              size={CALENDAR_FIELD_ICON_SIZE}
+              color={disabled ? colors.stormGray200 : colors.stormGray150}
+            />
+          </View>
+        </Pressable>
+      </View>
+
+      {helperMessage ? (
+        <Text ref={helperRef} style={error ? styles.error : styles.hint}>
+          {helperMessage}
+        </Text>
+      ) : null}
+
+      <Modal visible={open} transparent animationType="fade" onRequestClose={closePicker}>
+        <View style={styles.modalRoot}>
+          <Pressable
+            style={styles.backdrop}
+            onPress={closePicker}
+            accessibilityRole="button"
+            accessibilityLabel={labels?.closeCalendar ?? translations.closeCalendar}
+          />
+          {anchor ? (
+            <View
+              style={[
+                styles.panelPosition,
+                {
+                  top: dropdownTop,
+                  left: panelLeft,
+                  width: panelWidth,
+                  height: CALENDAR_PANEL_HEIGHT,
+                },
+              ]}
+            >
+              {props.mode === "range" ? (
+                <Calendar
+                  mode="range"
+                  value={props.value}
+                  onChange={handleRangeSelect}
+                  viewDate={viewDate}
+                  defaultViewDate={resolvedDefaultViewDate}
+                  onViewDateChange={onViewDateChange}
+                  locale={resolvedLocale}
+                  labels={labels}
+                  minDate={minDate}
+                  maxDate={maxDate}
+                  today={today}
+                  className={panelClassName}
+                />
+              ) : (
+                <Calendar
+                  mode="single"
+                  value={props.value}
+                  onChange={handleSingleSelect}
+                  viewDate={viewDate}
+                  defaultViewDate={resolvedDefaultViewDate}
+                  onViewDateChange={onViewDateChange}
+                  locale={resolvedLocale}
+                  labels={labels}
+                  minDate={minDate}
+                  maxDate={maxDate}
+                  today={today}
+                  className={panelClassName}
+                />
+              )}
+            </View>
+          ) : null}
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: CALENDAR_FIELD_WIDTH,
+    maxWidth: "100%",
+    gap: SELECT_LABEL_GAP,
+  },
+  fieldOutline: {
+    width: CALENDAR_FIELD_WIDTH,
+    maxWidth: "100%",
+    alignSelf: "flex-start",
+  },
+  label: {
+    ...calendarLabelTypography,
+  },
+  iconSlot: {
+    width: CALENDAR_FIELD_ICON_SIZE,
+    height: CALENDAR_FIELD_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  modalRoot: {
+    flex: 1,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: colors.transparent,
+  },
+  panelPosition: {
+    position: "absolute",
+    zIndex: 1,
+  },
+  error: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.inputError,
+  },
+  hint: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.stormGray300,
+  },
+});

package/src/components/Select.stories.tsx

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import { KeyIcon } from "../icons/KeyIcon";
+import { Select, type SelectOption } from "./Select";
+
+const demoOptions: SelectOption[] = Array.from({ length: 7 }, (_, index) => ({
+  value: String(index + 1),
+  label: `Select Item ${index + 1}`,
+}));
+
+const meta = {
+  title: "Components/Select",
+  component: Select,
+  args: {
+    label: "Label",
+    placeholder: "placeholder",
+    leftIcon: <KeyIcon />,
+    options: demoOptions,
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Controlled: Story = {
+  render: function ControlledSelectStory() {
+    const [value, setValue] = useState<string | undefined>();
+
+    return (
+      <View style={styles.field}>
+        <Select
+          label="Label"
+          placeholder="placeholder"
+          leftIcon={<KeyIcon />}
+          options={demoOptions}
+          value={value}
+          onValueChange={setValue}
+        />
+      </View>
+    );
+  },
+};
+
+export const Open: Story = {
+  render: function OpenSelectStory() {
+    const [value, setValue] = useState("1");
+
+    return (
+      <View style={styles.field}>
+        <Select
+          label="Label"
+          placeholder="placeholder"
+          leftIcon={<KeyIcon />}
+          options={demoOptions}
+          value={value}
+          onValueChange={setValue}
+        />
+      </View>
+    );
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    error: "Please select an item",
+    invalid: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: "1",
+    disabled: true,
+  },
+};
+
+const multiSelectOptions: SelectOption[] = Array.from({ length: 8 }, (_, index) => ({
+  value: String(index + 1),
+  label: `Selected Item ${index + 1}`,
+}));
+
+export const Multiple: Story = {
+  render: function MultipleSelectStory() {
+    const [value, setValue] = useState<string[]>(["1", "2", "3", "4", "5"]);
+
+    return (
+      <View style={styles.field}>
+        <Select
+          multiple
+          label="Label"
+          placeholder="placeholder"
+          leftIcon={<KeyIcon />}
+          options={multiSelectOptions}
+          value={value}
+          onValueChange={setValue}
+        />
+      </View>
+    );
+  },
+};
+
+export const MultipleNarrow: Story = {
+  render: function MultipleNarrowSelectStory() {
+    const [value, setValue] = useState<string[]>(["1", "2", "3", "4", "5"]);
+
+    return (
+      <View style={styles.narrowField}>
+        <Select
+          multiple
+          label="Label"
+          placeholder="placeholder"
+          leftIcon={<KeyIcon />}
+          options={multiSelectOptions}
+          value={value}
+          onValueChange={setValue}
+        />
+      </View>
+    );
+  },
+};
+
+const styles = StyleSheet.create({
+  field: {
+    width: 360,
+    maxWidth: "100%",
+  },
+  narrowField: {
+    width: 240,
+    maxWidth: "100%",
+  },
+});