@capillarytech/blaze-ui 5.1.12 → 5.1.13

package/CapTimePicker/README.md

@@ -0,0 +1,170 @@
+# CapTimePicker Migration Guide
+
+## Overview
+
+CapTimePicker has been migrated to support Ant Design v6 APIs while maintaining backward compatibility with deprecated props from v3-v5.
+
+## Breaking Changes
+
+### API Changes (v3 → v6)
+
+| Old API (v3-v5) | New API (v6) | Migration |
+|----------------|--------------|-----------|
+| `allowEmpty` | `allowClear` | Use `allowClear` prop |
+| `addon` | `renderExtraFooter` | Use `renderExtraFooter` prop |
+| `dropdownClassName` | `classNames.popup.root` or `popupClassName` | Use `popupClassName` or `classNames.popup.root` |
+| `popupStyle` (v5) | `styles.popup.root` or `popupStyle` | Use `popupStyle` or `styles.popup.root` |
+| `bordered` | `variant` | Use `variant` prop (`'outlined'`, `'borderless'`, or `'filled'`) |
+
+## Deprecated Props
+
+The following props are deprecated but still supported for backward compatibility. They will be removed in the next major version.
+
+| Deprecated Prop | Replacement | Notes |
+|----------------|-------------|-------|
+| `allowEmpty` | `allowClear` | Maps to `allowClear` internally |
+| `addon` | `renderExtraFooter` | Maps to `renderExtraFooter` internally |
+| `dropdownClassName` | `popupClassName` or `classNames.popup.root` | Merged with `popupClassName` |
+| `dropdownStyle` | `popupStyle` or `styles.popup.root` | Merged with `popupStyle` |
+| `bordered` | `variant` | `bordered={false}` → `variant="borderless"`, `bordered={true}` → `variant="outlined"` |
+
+## Migration Examples
+
+### Example 1: Basic Usage
+
+**Before (v3-v5):**
+```tsx
+import CapTimePicker from '@capillarytech/blaze-ui/components/CapTimePicker';
+
+<CapTimePicker
+  value={moment('12:00:00', 'HH:mm:ss')}
+  onChange={(time) => console.log(time)}
+  allowEmpty={false}
+  bordered={true}
+/>
+```
+
+**After (v6):**
+```tsx
+import CapTimePicker from '@capillarytech/blaze-ui/components/CapTimePicker';
+import dayjs from 'dayjs';
+
+<CapTimePicker
+  value={dayjs('12:00:00', 'HH:mm:ss')}
+  onChange={(time) => console.log(time)}
+  allowClear={false}
+  variant="outlined"
+/>
+```
+
+### Example 2: Custom Popup Styling
+
+**Before (v5):**
+```tsx
+<CapTimePicker
+  dropdownClassName="custom-popup"
+  dropdownStyle={{ zIndex: 1000 }}
+/>
+```
+
+**After (v6) - Option 1 (Direct props):**
+```tsx
+<CapTimePicker
+  popupClassName="custom-popup"
+  popupStyle={{ zIndex: 1000 }}
+/>
+```
+
+**After (v6) - Option 2 (Object-based API):**
+```tsx
+<CapTimePicker
+  classNames={{
+    popup: {
+      root: 'custom-popup'
+    }
+  }}
+  styles={{
+    popup: {
+      root: { zIndex: 1000 }
+    }
+  }}
+/>
+```
+
+### Example 3: Custom Footer
+
+**Before (v5):**
+```tsx
+<CapTimePicker
+  addon={() => <div>Custom Footer</div>}
+/>
+```
+
+**After (v6):**
+```tsx
+<CapTimePicker
+  renderExtraFooter={() => <div>Custom Footer</div>}
+/>
+```
+
+## Backward Compatibility
+
+All deprecated props are automatically mapped to their new equivalents:
+
+- `allowEmpty` → `allowClear`
+- `addon` → `renderExtraFooter`
+- `dropdownClassName` → merged with `popupClassName`
+- `dropdownStyle` → merged with `popupStyle`
+- `bordered` → converted to `variant` (`false` → `'borderless'`, `true` → `'outlined'`)
+
+**Note:** Deprecated props will log warnings in development mode when used.
+
+## Moment.js → Day.js Migration
+
+CapTimePicker supports both Moment.js and Day.js for backward compatibility:
+
+```tsx
+// Both work:
+<CapTimePicker value={moment('12:00:00', 'HH:mm:ss')} />
+<CapTimePicker value={dayjs('12:00:00', 'HH:mm:ss')} />
+```
+
+However, **Day.js is recommended** as Moment.js is deprecated. The component automatically detects and converts Moment objects to Day.js internally.
+
+## Theme Customization
+
+CapTimePicker styling is now handled via design tokens in `getCapThemeConfig.ts`:
+
+```typescript
+components: {
+  TimePicker: {
+    controlHeight: 40, // Input height
+    colorIcon: '#091e42', // Icon color
+  },
+}
+```
+
+All previous SCSS overrides have been migrated to design tokens. No `:global` overrides are needed.
+
+## TypeScript Support
+
+Full TypeScript support is available:
+
+```tsx
+import CapTimePicker, { CapTimePickerProps } from '@capillarytech/blaze-ui/components/CapTimePicker';
+
+const props: CapTimePickerProps = {
+  value: dayjs('12:00:00', 'HH:mm:ss'),
+  onChange: (time, timeString) => {},
+};
+```
+
+## Validation
+
+This migration has been validated against:
+
+- ✅ **SCSS File Content**: No `:global` or `.ant-` overrides without comments
+- ✅ **Theme Config Update**: `getCapThemeConfig.ts` updated with TimePicker tokens
+- ✅ **TypeScript Compilation**: Zero compilation errors
+- ✅ **Backward Compatibility**: All deprecated props supported with warnings
+- ✅ **CSS Modules**: Component uses CSS Modules pattern

package/CapTimePicker/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ *
+ * CapTimePicker
+ *
+ */
+import React from 'react';
+import type { CapTimePickerProps } from './types';
+declare const CapTimePicker: React.FC<CapTimePickerProps>;
+export default CapTimePicker;
+export type { CapTimePickerProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/CapTimePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapTimePicker/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAIlD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoF/C,CAAC;AAEF,eAAe,aAAa,CAAC;AAC7B,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/CapTimePicker/index.js

@@ -179,6 +179,24 @@ module.exports = require("dayjs/plugin/weekYear");
 
 /***/ }),
 
+/***/ 19224:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+exports.__esModule = true;
+exports["default"] = logDeprecationWarning;
+var _isNil = _interopRequireDefault(__webpack_require__(69843));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function logDeprecationWarning(componentName, deprecatedPropName, deprecatedPropValue, replacementPropName) {
+  // @ts-ignore - process.env is provided by webpack/build tools
+  if (false) // removed by dead control flow
+{}
+}
+
+/***/ }),
+
 /***/ 21020:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
@@ -940,6 +958,14 @@ module.exports = require("dayjs/plugin/isBetween");
 
 /***/ }),
 
+/***/ 64273:
+/***/ ((module) => {
+
+"use strict";
+module.exports = require("antd-v5");
+
+/***/ }),
+
 /***/ 64284:
 /***/ ((module) => {
 
@@ -1483,12 +1509,10 @@ var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ = __webpack_require__(31601);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(76314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.cap-timepicker-v2 .ant-time-picker-input{height:40px;padding:6px 11px}.cap-timepicker-v2 .ant-time-picker-clock-icon{color:#091e42}`, ""]);
+___CSS_LOADER_EXPORT___.push([module.id, `.cap-timepicker-v2 .ant-picker-suffix{color:#091e42}`, ""]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
-	"cap-timepicker-v2": `cap-timepicker-v2`,
-	"ant-time-picker-input": `ant-time-picker-input`,
-	"ant-time-picker-clock-icon": `ant-time-picker-clock-icon`
+	"cap-timepicker-v2": `cap-timepicker-v2`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
 
@@ -1509,14 +1533,6 @@ module.exports = require("dayjs/plugin/isSameOrAfter");
 "use strict";
 module.exports = require("dayjs/plugin/advancedFormat");
 
-/***/ }),
-
-/***/ 97185:
-/***/ ((module) => {
-
-"use strict";
-module.exports = require("antd");
-
 /***/ })
 
 /******/ 	});
@@ -1613,58 +1629,89 @@ var exports = __webpack_exports__;
 
 exports.__esModule = true;
 exports["default"] = void 0;
-var _antd = __webpack_require__(97185);
+var _antdV = __webpack_require__(64273);
 var _classnames = _interopRequireDefault(__webpack_require__(46942));
 var _react = _interopRequireDefault(__webpack_require__(9206));
 var _dayjs = __webpack_require__(25549);
-__webpack_require__(83624);
+var _logDeprecationWarning = _interopRequireDefault(__webpack_require__(19224));
+var _styles = _interopRequireDefault(__webpack_require__(83624));
 var _jsxRuntime = __webpack_require__(74848);
-const _excluded = ["className", "popupClassName", "value", "defaultValue", "defaultOpenValue", "onChange"];
+const _excluded = ["className", "popupClassName", "value", "defaultValue", "defaultOpenValue", "onChange", "allowEmpty", "allowClear", "addon", "renderExtraFooter", "dropdownClassName", "dropdownStyle", "popupStyle", "classNames", "styles", "bordered", "variant"];
 /**
  *
  * CapTimePicker
  *
  */
-// import styled from 'styled-components';
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 const clsPrefix = 'cap-timepicker-v2';
-class CapTimePicker extends _react.default.PureComponent {
-  render() {
-    const _this$props = this.props,
-      {
-        className,
-        popupClassName,
-        value,
-        defaultValue,
-        defaultOpenValue,
-        onChange
-      } = _this$props,
-      rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
-    // Detect if consumer is using moment
-    const isConsumerUsingMoment = (0, _dayjs.isMomentObject)(value) || (0, _dayjs.isMomentObject)(defaultValue) || (0, _dayjs.isMomentObject)(defaultOpenValue);
-
-    // Convert moment to dayjs
-    const dayjsValue = (0, _dayjs.momentToDayjs)(value);
-    const dayjsDefaultValue = (0, _dayjs.momentToDayjs)(defaultValue);
-    const dayjsDefaultOpenValue = (0, _dayjs.momentToDayjs)(defaultOpenValue);
-    const handleChange = (dayjsTime, timeString) => {
-      if (!onChange) return;
-      const result = (0, _dayjs.normalizeDateValue)(isConsumerUsingMoment, dayjsTime);
-      onChange(result, timeString);
-    };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.TimePicker, _extends({
-      className: (0, _classnames.default)(clsPrefix, className),
-      popupClassName: (0, _classnames.default)(clsPrefix + "-popup", popupClassName),
-      value: dayjsValue,
-      defaultValue: dayjsDefaultValue,
-      defaultOpenValue: dayjsDefaultOpenValue,
-      onChange: handleChange
-    }, rest));
-  }
-}
+const CapTimePicker = _ref => {
+  let {
+      className,
+      popupClassName,
+      value,
+      defaultValue,
+      defaultOpenValue,
+      onChange,
+      allowEmpty,
+      allowClear,
+      addon,
+      renderExtraFooter,
+      dropdownClassName,
+      dropdownStyle,
+      popupStyle,
+      classNames: classNamesProp,
+      styles: stylesProp,
+      bordered,
+      variant
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  // Deprecation warnings
+  (0, _logDeprecationWarning.default)('CapTimePicker', 'allowEmpty', allowEmpty, 'allowClear');
+  (0, _logDeprecationWarning.default)('CapTimePicker', 'addon', addon, 'renderExtraFooter');
+  (0, _logDeprecationWarning.default)('CapTimePicker', 'dropdownClassName', dropdownClassName, 'classNames.popup.root or popupClassName');
+  (0, _logDeprecationWarning.default)('CapTimePicker', 'dropdownStyle', dropdownStyle, 'styles.popup.root or popupStyle');
+  (0, _logDeprecationWarning.default)('CapTimePicker', 'bordered', bordered, 'variant');
+
+  // Detect if consumer is using moment
+  const isConsumerUsingMoment = (0, _dayjs.isMomentObject)(value) || (0, _dayjs.isMomentObject)(defaultValue) || (0, _dayjs.isMomentObject)(defaultOpenValue);
+
+  // Convert moment to dayjs
+  const dayjsValue = (0, _dayjs.momentToDayjs)(value);
+  const dayjsDefaultValue = (0, _dayjs.momentToDayjs)(defaultValue);
+  const dayjsDefaultOpenValue = (0, _dayjs.momentToDayjs)(defaultOpenValue);
+  const handleChange = (dayjsTime, timeString) => {
+    if (!onChange) return;
+    const result = (0, _dayjs.normalizeDateValue)(isConsumerUsingMoment, dayjsTime);
+    onChange(result != null ? result : null, timeString != null ? timeString : null);
+  };
+
+  // Backward compatibility: map deprecated props to new props
+  const finalAllowClear = allowClear != null ? allowClear : allowEmpty;
+  const finalRenderExtraFooter = renderExtraFooter != null ? renderExtraFooter : addon;
+
+  // Backward compatibility: merge deprecated props with new props
+  const finalPopupClassName = (0, _classnames.default)(clsPrefix + "-popup", popupClassName, dropdownClassName);
+  const finalPopupStyle = popupStyle != null ? popupStyle : dropdownStyle;
+
+  // Handle variant prop (v6 API)
+  const finalVariant = variant != null ? variant : bordered === false ? 'borderless' : bordered === true ? 'outlined' : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antdV.TimePicker, _extends({
+    className: (0, _classnames.default)(_styles.default[clsPrefix], className),
+    popupClassName: finalPopupClassName,
+    popupStyle: finalPopupStyle,
+    classNames: classNamesProp,
+    styles: stylesProp,
+    variant: finalVariant,
+    value: dayjsValue != null ? dayjsValue : undefined,
+    defaultValue: dayjsDefaultValue != null ? dayjsDefaultValue : undefined,
+    defaultOpenValue: dayjsDefaultOpenValue != null ? dayjsDefaultOpenValue : undefined,
+    onChange: handleChange,
+    allowClear: finalAllowClear,
+    renderExtraFooter: finalRenderExtraFooter
+  }, rest));
+};
 var _default = exports["default"] = CapTimePicker;
 })();