@scripso-homepad/ui 0.4.2 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",
@@ -46,12 +46,12 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
+    "lucide-react": ">=0.400",
     "react": ">=18",
     "react-native": ">=0.74",
     "react-native-svg": ">=13",
     "react-native-web": ">=0.19",
-    "react-router-dom": ">=6",
-    "lucide-react": ">=0.400"
+    "react-router-dom": ">=6"
   },
   "peerDependenciesMeta": {
     "react-native-svg": {
@@ -79,16 +79,17 @@
     "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/vite": "^4.1.13",
     "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.7",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.14.0",
     "lucide-react": "^0.563.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.9.1",
     "react-native": "^0.76.5",
     "react-native-svg": "^15.11.2",
     "react-native-web": "^0.19.13",
+    "react-router-dom": "^7.9.1",
     "storybook": "^8.4.7",
     "tailwindcss": "^4.1.13",
     "tsup": "^8.3.5",

package/src/components/Calendar.stories.tsx

@@ -0,0 +1,337 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { CalendarIcon } from "../icons/CalendarIcon";
+import {
+  CALENDAR_DROPDOWN_GAP,
+  CALENDAR_FIELD_ICON_SIZE,
+  calendarFieldMetrics,
+  calendarFieldPlaceholderTypography,
+  calendarFieldTypography,
+} from "../theme/calendar";
+import { getSelectFieldStyles, resolveInputVisualState } from "../theme/select";
+import { colors } from "../theme/tokens";
+import { formatCalendarDate } from "../utils/calendarDays";
+import { formatLocalizedCalendarMonthYear } from "../utils/calendarLocalization";
+import {
+  Calendar,
+  type CalendarLabels,
+  type CalendarRangeProps,
+  type CalendarSingleProps,
+  type DateRange,
+} from "./Calendar";
+import { DatePicker, type DatePickerRangeProps } from "./DatePicker";
+
+const figmaViewDate = new Date(2026, 5, 1);
+const figmaSampleDate = new Date(2026, 5, 25);
+
+function getCurrentMonthStart() {
+  const now = new Date();
+  return new Date(now.getFullYear(), now.getMonth(), 1);
+}
+
+function getSampleRange(): DateRange {
+  const now = new Date();
+  return {
+    start: new Date(now.getFullYear(), now.getMonth(), 20),
+    end: new Date(now.getFullYear(), now.getMonth(), 28),
+  };
+}
+
+const figmaLabels: CalendarLabels = {
+  weekdays: ["ԵՐ", "ԵՔ", "ՉՐ", "ՀՆ", "ՈՒՐ", "ՇԲ", "ԿՐ"],
+  formatMonthYear: (date) => formatLocalizedCalendarMonthYear(date, "hy-AM"),
+};
+
+const sharedCalendarArgs = {
+  mode: "single" as const,
+  locale: "hy-AM" as const,
+  defaultViewDate: getCurrentMonthStart(),
+};
+
+const figmaCalendarArgs = {
+  ...sharedCalendarArgs,
+  today: figmaSampleDate,
+  defaultViewDate: figmaViewDate,
+  labels: figmaLabels,
+};
+
+function FullCalendarDemo({
+  initialValue,
+  placeholder = "Ընտրել ամսաթիվ",
+  calendarProps = sharedCalendarArgs,
+}: {
+  initialValue?: Date;
+  placeholder?: string;
+  calendarProps?: CalendarSingleProps;
+}) {
+  const [value, setValue] = useState<Date | undefined>(initialValue);
+  const fieldStyles = getSelectFieldStyles(resolveInputVisualState({}));
+  const displayText = value
+    ? formatCalendarDate(value, calendarProps.locale ?? "hy-AM")
+    : placeholder;
+
+  return (
+    <View style={styles.full}>
+      <View style={fieldStyles.outline}>
+        <View style={[calendarFieldMetrics.container, fieldStyles.container]}>
+          <Text
+            style={[
+              calendarFieldMetrics.value,
+              value
+                ? { ...calendarFieldTypography, color: fieldStyles.value.color }
+                : calendarFieldPlaceholderTypography,
+            ]}
+            numberOfLines={1}
+          >
+            {displayText}
+          </Text>
+          <View style={styles.iconSlot}>
+            <CalendarIcon
+              size={CALENDAR_FIELD_ICON_SIZE}
+              color={colors.stormGray150}
+            />
+          </View>
+        </View>
+      </View>
+
+      <Calendar
+        {...calendarProps}
+        value={value}
+        onChange={setValue}
+        style={styles.calendarPanel}
+      />
+    </View>
+  );
+}
+
+const meta = {
+  title: "Components/Calendar",
+  component: Calendar,
+  parameters: {
+    layout: "centered",
+  },
+  args: sharedCalendarArgs,
+} satisfies Meta<CalendarSingleProps>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Full UI — click field to open calendar (range DatePicker). */
+export const Full = {
+  render: function FullDatePickerStory() {
+    const [value, setValue] = useState<DateRange | undefined>(getSampleRange);
+
+    return (
+      <View style={styles.full}>
+        <DatePicker
+          mode="range"
+          locale={sharedCalendarArgs.locale}
+          defaultViewDate={sharedCalendarArgs.defaultViewDate}
+          placeholder="Ընտրել ժամանակահատված"
+          value={value}
+          onChange={setValue}
+        />
+      </View>
+    );
+  },
+} satisfies StoryObj<DatePickerRangeProps>;
+
+/** Static preview — field + calendar always visible (Figma layout). */
+export const FullStatic: Story = {
+  render: () => (
+    <FullCalendarDemo
+      calendarProps={figmaCalendarArgs}
+      initialValue={figmaSampleDate}
+    />
+  ),
+};
+
+export const FullWithSelectedDate: Story = {
+  render: () => (
+    <FullCalendarDemo
+      calendarProps={figmaCalendarArgs}
+      initialValue={figmaSampleDate}
+    />
+  ),
+};
+
+export const WithSelectedDay: Story = {
+  render: function SelectedDayStory() {
+    const [value, setValue] = useState<Date | undefined>(new Date(2026, 5, 26));
+
+    return (
+      <View style={styles.panel}>
+        <Calendar {...figmaCalendarArgs} value={value} onChange={setValue} />
+      </View>
+    );
+  },
+};
+
+export const PanelOnly: Story = {
+  render: function PanelOnlyStory() {
+    const [value, setValue] = useState<Date | undefined>();
+
+    return (
+      <View style={styles.panel}>
+        <Calendar {...sharedCalendarArgs} value={value} onChange={setValue} />
+      </View>
+    );
+  },
+};
+
+export const Interactive: Story = {
+  render: function InteractiveCalendarStory() {
+    const [value, setValue] = useState<Date | undefined>();
+
+    return (
+      <View style={styles.panel}>
+        <Calendar {...sharedCalendarArgs} value={value} onChange={setValue} />
+      </View>
+    );
+  },
+};
+
+export const WithMinDate: Story = {
+  render: function MinDateCalendarStory() {
+    const minDate = new Date();
+    const [value, setValue] = useState<Date | undefined>(minDate);
+
+    return (
+      <View style={styles.panel}>
+        <Calendar
+          {...sharedCalendarArgs}
+          value={value}
+          onChange={setValue}
+          minDate={minDate}
+        />
+      </View>
+    );
+  },
+};
+
+export const Range = {
+  render: function RangeCalendarStory() {
+    const [value, setValue] = useState<DateRange | undefined>(getSampleRange);
+
+    return (
+      <View style={styles.panel}>
+        <Calendar
+          locale="en-US"
+          defaultViewDate={getCurrentMonthStart()}
+          mode="range"
+          value={value}
+          onChange={setValue}
+        />
+      </View>
+    );
+  },
+} satisfies StoryObj<CalendarRangeProps>;
+
+export const RangeInteractive = {
+  render: function RangeInteractiveCalendarStory() {
+    const [value, setValue] = useState<DateRange | undefined>(getSampleRange);
+
+    return (
+      <View style={styles.panel}>
+        <Calendar
+          locale="en-US"
+          defaultViewDate={getCurrentMonthStart()}
+          mode="range"
+          value={value}
+          onChange={setValue}
+        />
+      </View>
+    );
+  },
+} satisfies StoryObj<CalendarRangeProps>;
+
+/** Click the header to open month picker, then click the year for year picker. */
+export const MonthYearPicker: Story = {
+  render: function MonthYearPickerStory() {
+    const [value, setValue] = useState<Date | undefined>();
+
+    return (
+      <View style={styles.panel}>
+        <Calendar {...sharedCalendarArgs} value={value} onChange={setValue} />
+      </View>
+    );
+  },
+};
+
+export const EnglishLocale: Story = {
+  render: function EnglishCalendarStory() {
+    const [value, setValue] = useState<Date | undefined>();
+
+    return (
+      <View style={styles.panel}>
+        <Calendar
+          mode="single"
+          locale="en-US"
+          defaultViewDate={getCurrentMonthStart()}
+          value={value}
+          onChange={setValue}
+        />
+      </View>
+    );
+  },
+};
+
+export const ArmenianLocale: Story = {
+  render: function ArmenianCalendarStory() {
+    const [value, setValue] = useState<Date | undefined>();
+
+    return (
+      <View style={styles.panel}>
+        <Calendar
+          mode="single"
+          locale="hy-AM"
+          defaultViewDate={getCurrentMonthStart()}
+          value={value}
+          onChange={setValue}
+        />
+      </View>
+    );
+  },
+};
+
+export const RussianLocale: Story = {
+  render: function RussianCalendarStory() {
+    const [value, setValue] = useState<Date | undefined>();
+
+    return (
+      <View style={styles.panel}>
+        <Calendar
+          mode="single"
+          locale="ru-RU"
+          defaultViewDate={getCurrentMonthStart()}
+          value={value}
+          onChange={setValue}
+        />
+      </View>
+    );
+  },
+};
+
+const styles = StyleSheet.create({
+  full: {
+    width: 296,
+    maxWidth: "100%",
+    gap: CALENDAR_DROPDOWN_GAP,
+  },
+  iconSlot: {
+    width: CALENDAR_FIELD_ICON_SIZE,
+    height: CALENDAR_FIELD_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  calendarPanel: {
+    width: "100%",
+    minWidth: 0,
+  },
+  panel: {
+    width: 296,
+    maxWidth: "100%",
+  },
+});