@opengovsg/oui 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/oui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "sideEffects": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",
@@ -34,8 +34,7 @@
     }
   },
   "devDependencies": {
-    "@storybook/react": "8.6.4",
-    "@storybook/test": "8.6.4",
+    "@storybook/react-vite": "9.0.0-beta.11",
     "@types/lodash-es": "^4.17.12",
     "@types/prop-types": "^15.7.14",
     "@types/react": "^19.0.12",
@@ -45,12 +44,13 @@
     "lucide-react": "^0.475.0",
     "motion": "^12.4.2",
     "prettier": "^3.5.0",
+    "storybook": "9.0.0-beta.11",
     "tsx": "^4.19.2",
     "typescript": "5.7.3",
-    "@opengovsg/oui-theme": "0.0.7",
-    "@oui/chromatic": "0.0.0",
+    "@opengovsg/oui-theme": "0.0.11",
     "@oui/eslint-config": "0.0.0",
     "@oui/prettier-config": "0.0.0",
+    "@oui/chromatic": "0.0.0",
     "@oui/typescript-config": "0.0.0"
   },
   "dependencies": {
@@ -76,12 +76,12 @@
     "type-fest": "^4.34.1",
     "use-deep-compare": "^1.3.0"
   },
+  "prettier": "@oui/prettier-config",
   "peerDependencies": {
     "motion": ">=11.12.0 || >=12.0.0-alpha.1",
     "react-aria-components": "^1.7.1",
-    "@opengovsg/oui-theme": "0.0.7"
+    "@opengovsg/oui-theme": "0.0.11"
   },
-  "prettier": "@oui/prettier-config",
   "scripts": {
     "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",
     "changeset": "cd ../.. && pnpm changeset",

package/dist/cjs/calendar/calendar-base.cjs

@@ -1,347 +0,0 @@
-"use strict";
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var date = require('@internationalized/date');
-var reactAria = require('react-aria');
-var reactAriaComponents = require('react-aria-components');
-var ouiTheme = require('@opengovsg/oui-theme');
-var button = require('../button/button.cjs');
-var calendarStyleContext = require('./calendar-style-context.cjs');
-var utils = require('./utils.cjs');
-var chevronRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.cjs');
-var chevronLeft = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-left.cjs');
-var select = require('../select/select.cjs');
-var selectItem = require('../select/select-item.cjs');
-
-const useCalendarSelectors = (state) => {
-  const yearRange = react.useMemo(() => {
-    const start = state.minValue.year ?? 1900;
-    const end = state.maxValue.year ?? 2100;
-    return { start, end };
-  }, [state.maxValue, state.minValue]);
-  const dateFormatter = reactAria.useDateFormatter(state);
-  const datePartOrder = react.useMemo(() => {
-    const parts = dateFormatter.formatToParts(
-      state.visibleRange.start.toDate(state.timeZone)
-    );
-    const filteredParts = parts.filter(
-      (part) => ["year", "month"].includes(part.type)
-    );
-    const filteredPartNames = filteredParts.map((part) => part.type);
-    return filteredPartNames;
-  }, [dateFormatter, state.timeZone, state.visibleRange.start]);
-  const months = utils.useGenerateLocalizedMonths(state.timeZone);
-  const years = utils.useGenerateLocalizedYears(
-    yearRange.start,
-    yearRange.end,
-    state.timeZone
-  );
-  return react.useMemo(() => {
-    return {
-      months,
-      years,
-      datePartOrder
-    };
-  }, [datePartOrder, months, years]);
-};
-const i18nStrings = {
-  "en-SG": {
-    selectMonth: "Select month",
-    selectYear: "Select year",
-    today: "Today"
-  },
-  "zh-SG": {
-    selectMonth: "\u9009\u62E9\u6708\u4EFD",
-    selectYear: "\u9009\u62E9\u5E74\u4EFD",
-    today: "\u4ECA\u5929"
-  },
-  "ms-SG": {
-    selectMonth: "Pilih bulan",
-    selectYear: "Pilih tahun",
-    today: "Hari ini"
-  },
-  "ta-SG": {
-    selectMonth: "\u0BAE\u0BBE\u0BA4\u0BA4\u0BCD\u0BA4\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
-    selectYear: "\u0B86\u0BA3\u0BCD\u0B9F\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
-    today: "\u0B87\u0BA9\u0BCD\u0BB1\u0BC1"
-  }
-};
-const CalendarBottomContent = ({
-  bottomContent,
-  showTodayButton
-}) => {
-  const state = react.useContext(reactAriaComponents.CalendarStateContext);
-  const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
-  const formatMessage = reactAria.useMessageFormatter(i18nStrings);
-  if (bottomContent) {
-    return bottomContent;
-  }
-  if (!showTodayButton) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: slots.bottomContentWrapper({
-        className: classNames?.bottomContentWrapper
-      }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        button.Button,
-        {
-          isDisabled: state.isDisabled,
-          variant: "clear",
-          color: "sub",
-          size,
-          slot: null,
-          className: slots.todayButton({ className: classNames?.todayButton }),
-          onPress: () => {
-            state.setFocusedDate(date.today(date.getLocalTimeZone()));
-          },
-          children: formatMessage("today")
-        }
-      )
-    }
-  );
-};
-function CalendarBase({
-  weekdayStyle = "narrow",
-  calendarRef,
-  minValue = new date.CalendarDate(1900, 0, 1),
-  maxValue = new date.CalendarDate(2100, 12, 31),
-  bottomContent,
-  showTodayButton = true,
-  ...props
-}) {
-  const { slots, className, classNames } = calendarStyleContext.useCalendarStyleContext();
-  const numberOfVisibleMonths = props.visibleDuration?.months ?? 1;
-  const dateToHighlight = react.useMemo(() => {
-    return props.defaultFocusedValue ?? date.today(date.getLocalTimeZone());
-  }, [props.defaultFocusedValue]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactAriaComponents.Calendar,
-    {
-      pageBehavior: "single",
-      ...props,
-      ref: calendarRef,
-      minValue,
-      maxValue,
-      className: reactAriaComponents.composeRenderProps(
-        className,
-        (className2, renderProps) => slots.base({
-          className: ouiTheme.cn(classNames?.base, className2),
-          ...renderProps
-        })
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: slots.gridWrapper({
-              className: classNames?.gridWrapper
-            }),
-            children: Array.from({ length: numberOfVisibleMonths }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: slots.calendar({ className: classNames?.calendar }),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(CalendarHeader, { offsetMonths: index }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    reactAriaComponents.CalendarGrid,
-                    {
-                      className: slots.grid({ className: classNames?.grid }),
-                      weekdayStyle,
-                      offset: { months: index },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(CalendarGridHeader, {}),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          reactAriaComponents.CalendarGridBody,
-                          {
-                            className: slots.gridBody({ className: classNames?.gridBody }),
-                            children: (date) => /* @__PURE__ */ jsxRuntime.jsx(
-                              reactAriaComponents.CalendarCell,
-                              {
-                                className: reactAriaComponents.composeRenderProps(
-                                  classNames?.cell,
-                                  (className2, renderProps) => slots.cell({
-                                    className: className2,
-                                    isMultipleMonths: numberOfVisibleMonths >= 2,
-                                    isDateHighlighted: date.compare(dateToHighlight) === 0,
-                                    ...renderProps
-                                  })
-                                ),
-                                date
-                              }
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ]
-              },
-              index
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          CalendarBottomContent,
-          {
-            bottomContent,
-            showTodayButton
-          }
-        )
-      ]
-    }
-  );
-}
-const CalendarMonthDaySelector = () => {
-  const { slots, size, classNames } = calendarStyleContext.useCalendarStyleContext();
-  const state = react.useContext(reactAriaComponents.CalendarStateContext);
-  const { months, years, datePartOrder } = useCalendarSelectors(state);
-  const formatMessage = reactAria.useMessageFormatter(i18nStrings);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Group, { className: slots.selectors({ className: classNames?.selectors }), children: datePartOrder.map((part) => {
-    if (part === "month") {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        select.Select,
-        {
-          isDisabled: state.isDisabled,
-          size,
-          items: months,
-          variant: "clear",
-          classNames: {
-            trigger: slots.monthSelector({
-              className: classNames?.monthSelector
-            }),
-            list: slots.monthList({ className: classNames?.monthList }),
-            selectedText: slots.selectorText({
-              className: classNames?.selectorText
-            }),
-            popover: "min-w-[12ch]"
-          },
-          selectedKey: state.visibleRange.start.month,
-          "aria-label": formatMessage("selectMonth"),
-          onSelectionChange: (month) => {
-            state.setFocusedDate(
-              new date.CalendarDate(state.focusedDate.year, Number(month), 1)
-            );
-          },
-          children: (month) => /* @__PURE__ */ jsxRuntime.jsx(selectItem.SelectItem, { children: month.textValue })
-        },
-        part
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      select.Select,
-      {
-        isDisabled: state.isDisabled,
-        size,
-        variant: "clear",
-        items: years,
-        classNames: {
-          trigger: slots.yearSelector({
-            className: classNames?.yearSelector
-          }),
-          list: slots.yearList({ className: classNames?.yearList }),
-          selectedText: slots.selectorText({
-            className: classNames?.selectorText
-          })
-        },
-        selectedKey: state.visibleRange.start.year,
-        "aria-label": formatMessage("selectYear"),
-        onSelectionChange: (year) => {
-          state.setFocusedDate(
-            new date.CalendarDate(
-              Number(year),
-              state.focusedDate.month,
-              state.focusedDate.day
-            )
-          );
-        },
-        children: (year) => /* @__PURE__ */ jsxRuntime.jsx(selectItem.SelectItem, { children: year.textValue })
-      },
-      part
-    );
-  }) });
-};
-function CalendarHeader({ offsetMonths = 0 }) {
-  const { direction } = reactAriaComponents.useLocale();
-  const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
-  const state = react.useContext(reactAriaComponents.CalendarStateContext);
-  const monthYearTitle = utils.useLocalizedMonthYear(
-    state.visibleRange.start.add({ months: offsetMonths }),
-    state.timeZone
-  );
-  if (offsetMonths === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.header({ className: classNames?.header }), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CalendarMonthDaySelector, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        reactAriaComponents.Group,
-        {
-          className: slots.buttonGroup({ className: classNames?.buttonGroup }),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              button.Button,
-              {
-                size,
-                isIconOnly: true,
-                variant: "clear",
-                color: "sub",
-                slot: "previous",
-                className: slots.prevButton({ className: classNames?.prevButton }),
-                children: direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(chevronRight.default, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.default, { "aria-hidden": true })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              button.Button,
-              {
-                size,
-                variant: "clear",
-                color: "sub",
-                isIconOnly: true,
-                slot: "next",
-                className: slots.nextButton({
-                  className: classNames?.nextButton
-                }),
-                children: direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.default, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(chevronRight.default, { "aria-hidden": true })
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.Heading,
-    {
-      className: slots.header({ className: classNames?.header }),
-      "aria-hidden": true,
-      level: 2,
-      children: monthYearTitle
-    }
-  );
-}
-function CalendarGridHeader() {
-  const { slots, classNames } = calendarStyleContext.useCalendarStyleContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.CalendarGridHeader,
-    {
-      className: slots.gridHeader({ className: classNames?.gridHeader }),
-      children: (day) => /* @__PURE__ */ jsxRuntime.jsx(
-        reactAriaComponents.CalendarHeaderCell,
-        {
-          className: slots.gridHeaderCell({
-            className: classNames?.gridHeaderCell
-          }),
-          children: day
-        }
-      )
-    }
-  );
-}
-
-exports.CalendarBase = CalendarBase;
-exports.CalendarGridHeader = CalendarGridHeader;
-exports.CalendarHeader = CalendarHeader;