@capillarytech/blaze-ui 5.2.1 → 5.3.0

package/CapDateRangePicker/README.md

@@ -0,0 +1,159 @@
+# CapDateRangePicker
+
+A wrapper component around Ant Design's DatePicker.RangePicker that provides consistent styling, timezone support, and a simplified API for date range selection in Capillary applications.
+
+## Migration from react-dates to Ant Design v6
+
+This component has been **completely rewritten** — the underlying library changed from `react-dates` (Airbnb) to `antd-v5` (Ant Design v6) `DatePicker.RangePicker`.
+
+### Breaking Changes
+
+#### 1. Library Change
+
+| Before | After |
+|--------|-------|
+| `react-dates` (Airbnb) | `antd-v5` DatePicker.RangePicker |
+| Moment.js | Day.js |
+| Class component with internal state | Functional component (stateless) |
+| `react-dates/initialize` + CSS import | No separate initialization needed |
+
+#### 2. API Changes
+
+| Old API (react-dates) | New API (antd v6) | Status | Migration Guide |
+|-----------------------|-------------------|--------|-----------------|
+| `initialStartDate` / `initialEndDate` | `defaultValue: [Dayjs, Dayjs]` | Deprecated | Use `defaultValue` with Dayjs array |
+| `onDatesChange({startDate, endDate})` | `onChange([start, end], [str1, str2])` | Changed | Callback shape changed |
+| `focusedInput` / `onFocusChange` | `open` / `onOpenChange` | Deprecated | Antd manages focus internally |
+| `showCalendarOnly` | N/A | Deprecated | Limited support via CSS |
+| `allowYearNavigation` | N/A | Deprecated | Built-in in antd RangePicker |
+| `hideCalendar` | `open={false}` | Deprecated | Use `open` prop directly |
+| `isDayBlocked` | `disabledDate` | Deprecated | Use `disabledDate` |
+| `customInputIcon` | `suffixIcon` | Deprecated | Use `suffixIcon` |
+| `customArrowIcon` | `separator` | Deprecated | Use `separator` |
+| `displayFormat` | `format` | Deprecated | Use `format` |
+| `rootClass` | `getPopupContainer` | Deprecated | Use `getPopupContainer` |
+| `dropdownClassName` | `popupClassName` | Deprecated | Use `popupClassName` |
+| `dropdownStyle` | `popupStyle` | Deprecated | Use `popupStyle` |
+| `getCalendarContainer` | `getPopupContainer` | Deprecated | Use `getPopupContainer` |
+| `minimumNights` | `disabledDate` | Deprecated | Implement via `disabledDate` |
+| `autoFocusEndDate` | `autoFocus` | Deprecated | Use `autoFocus` |
+| `minDate` (string) | `minDate` (Dayjs) / `disabledDate` | Deprecated | Use `disabledDate` or `minDate` |
+
+#### 3. Date Library Migration
+
+The component now uses Day.js instead of Moment.js:
+
+```javascript
+// Before (moment)
+import moment from 'moment-timezone';
+<CapDateRangePicker
+  initialStartDate={moment('2024-01-01')}
+  initialEndDate={moment('2024-01-31')}
+  onChange={(dates) => console.log(dates)} // dates = [momentStart, momentEnd]
+/>
+
+// After (dayjs)
+import dayjs from '@dayjs';
+<CapDateRangePicker
+  defaultValue={[dayjs('2024-01-01'), dayjs('2024-01-31')]}
+  onChange={(dates, dateStrings) => console.log(dates, dateStrings)}
+/>
+```
+
+**Note:** The component maintains backward compatibility for Moment.js objects passed as props — they are automatically converted to Dayjs internally. However, callbacks will always return Dayjs objects.
+
+### Backward Compatibility
+
+All deprecated props still work with deprecation warnings in development:
+
+- **`initialStartDate` / `initialEndDate`**: Mapped to `defaultValue` array
+- **`onFocusChange`**: Mapped to `onOpenChange`
+- **`isDayBlocked`**: Merged into `disabledDate`
+- **`customInputIcon`**: Mapped to `suffixIcon`
+- **`customArrowIcon`**: Mapped to `separator`
+- **`displayFormat`**: Mapped to `format`
+- **`dropdownClassName`**: Mapped to `popupClassName`
+- **`dropdownStyle`**: Mapped to `popupStyle`
+- **`getCalendarContainer`**: Mapped to `getPopupContainer`
+- **`showCalendarOnly`**: Supported via CSS (hides input, keeps picker open)
+- **`hideCalendar`**: Mapped to `open={false}`
+- **`allowYearNavigation`**: No-op (built-in in antd)
+- **`autoFocusEndDate`**: Mapped to `autoFocus`
+
+### Style Changes
+
+**Approach**: The component uses CSS Modules with design tokens:
+- All react-dates CSS overrides removed (no longer relevant)
+- CSS Modules classes for component-specific styles (timezone footer)
+- Shared `datePickerCommon.scss` for common DatePicker styling patterns
+- Design tokens via `$CAP_*` variables and `getCapThemeConfig` DatePicker section
+
+### Timezone Footer
+
+The timezone footer is preserved from the original implementation:
+
+```tsx
+<CapDateRangePicker
+  showTimezone
+  timezone="Asia/Kolkata"
+  onChange={(dates) => console.log(dates)}
+/>
+// Footer shows: "Asia/Kolkata (UTC+05:30)"
+```
+
+### What Stayed the Same
+
+- Timezone footer display
+- Custom icon support (calendar suffix icon, separator)
+- Size variants (small, default, large)
+- ComponentWithLabelHOC integration
+- Default date format (`DD MMM YYYY`)
+
+### What Changed
+
+- **Removed**: react-dates dependency, PropTypes, class component, internal state management
+- **Added**: TypeScript types, CSS Modules, Day.js support, deprecation warnings
+- **Updated**: Import from `antd-v5` DatePicker.RangePicker
+- **Updated**: Moment.js → Day.js (with automatic backward conversion)
+
+## Usage
+
+```tsx
+import CapDateRangePicker from '@capillarytech/blaze-ui/components/CapDateRangePicker';
+import dayjs from '@dayjs';
+
+function MyComponent() {
+  const [dates, setDates] = useState<[dayjs.Dayjs | null, dayjs.Dayjs | null] | null>(null);
+
+  return (
+    <CapDateRangePicker
+      value={dates}
+      onChange={(newDates) => setDates(newDates)}
+      size="large"
+      timezone="America/New_York"
+      showTimezone
+      format="DD MMM YYYY"
+      popupClassName="my-custom-popup"
+    />
+  );
+}
+```
+
+## Props
+
+See `types.ts` for complete prop definitions. Key props:
+
+- `value`: `[Dayjs | null, Dayjs | null] | null`
+- `defaultValue`: `[Dayjs | null, Dayjs | null] | null`
+- `onChange`: `(dates, dateStrings) => void`
+- `size`: `'small' | 'default' | 'large'` (default: `'large'`)
+- `timezone`: Timezone string (default: `'UTC'`)
+- `showTimezone`: Whether to show timezone footer (default: `false`)
+- `format`: Date format string (default: `'DD MMM YYYY'`)
+- `popupClassName`: Custom class for popup
+- `popupStyle`: Custom style for popup
+- `getPopupContainer`: Container for popup
+- `suffixIcon`: Custom suffix icon
+- `separator`: Custom separator between date inputs
+- `disabledDate`: Function to disable specific dates
+- `renderExtraFooter`: Render extra footer in calendar panel

package/CapDateRangePicker/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ *
+ * CapDateRangePicker
+ *
+ */
+import React from 'react';
+import '../styles/datePickerCommon.scss';
+declare const _default: React.ComponentType<import("../assets/HOCs/ComponentWithLabelHOC/types").ComponentWithLabelProps & Omit<import("../assets/HOCs/ComponentWithLabelHOC/types").WrappedComponentProps, keyof import("../assets/HOCs/ComponentWithLabelHOC/types").WrappedComponentProps>>;
+export default _default;
+export type { CapDateRangePickerProps, RangeValue } from './types';
+//# sourceMappingURL=index.d.ts.map

package/CapDateRangePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapDateRangePicker/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,iCAAiC,CAAC;;AAkPzC,wBAAyD;AACzD,YAAY,EAAE,uBAAuB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}