@spaced-out/ui-design-system 0.4.5 → 0.4.6

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.4.6](https://github.com/spaced-out/ui-design-system/compare/v0.4.5...v0.4.6) (2025-07-24)
+
 ### [0.4.5](https://github.com/spaced-out/ui-design-system/compare/v0.4.4...v0.4.5) (2025-07-24)
 
 

package/lib/components/Table/Cell.js

@@ -15,9 +15,7 @@ var _TableModule = _interopRequireDefault(require("./Table.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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); } // $FlowIssue[nonstrict-import] date-fns
-// $FlowFixMe[untyped-import]
 // $FlowIssue[nonstrict-import] date-fns
-// $FlowFixMe[untyped-import]
 const Cells = _ref => {
   let {
     children,

package/lib/components/Table/Cell.js.flow

@@ -2,10 +2,8 @@
 
 import * as React from 'react';
 // $FlowIssue[nonstrict-import] date-fns
-// $FlowFixMe[untyped-import]
 import formatDistance from 'date-fns/formatDistance';
 // $FlowIssue[nonstrict-import] date-fns
-// $FlowFixMe[untyped-import]
 import parseISO from 'date-fns/parseISO';
 
 import {classify} from '../../utils/classify';

package/lib/components/index.js

@@ -212,17 +212,6 @@ Object.keys(_ConditionalWrapper).forEach(function (key) {
     }
   });
 });
-var _DatePicker = require("./DatePicker");
-Object.keys(_DatePicker).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _DatePicker[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _DatePicker[key];
-    }
-  });
-});
 var _DateRangePicker = require("./DateRangePicker");
 Object.keys(_DateRangePicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -19,7 +19,6 @@ export * from './CircularLoader';
 export * from './CollapsibleCard';
 export * from './Combobox';
 export * from './ConditionalWrapper';
-export * from './DatePicker';
 export * from './DateRangePicker';
 export * from './Dialog';
 export * from './Disclaimer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -45,13 +45,12 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.24.0",
-    "date-fns": "^4.1.0",
+    "date-fns": "^2.29.3",
     "highcharts": "^11.4.1",
     "highcharts-react-official": "^3.2.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.45",
-    "react-datepicker": "^8.4.0",
     "react-dropzone": "^14.2.3",
     "react-window": "^1.8.10"
   },

package/lib/components/DatePicker/DatePicker.js

@@ -1,194 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatePicker = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _reactDatepicker = _interopRequireWildcard(require("react-datepicker"));
-var locales = _interopRequireWildcard(require("date-fns/locale"));
-var _moment = _interopRequireDefault(require("moment"));
-var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _clickAway = require("../../utils/click-away");
-var _Input = require("../Input");
-require("react-datepicker/dist/react-datepicker.css");
-require("./custom-datepicker-style.css");
-var _DatePickerModule = _interopRequireDefault(require("./DatePicker.module.css"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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); } // $FlowFixMe[untyped-import]
-// $FlowFixMe[untyped-import]
-// $FlowFixMe[untyped-import]
-const DatePicker = _ref => {
-  let {
-    locale = 'en',
-    value,
-    onChange,
-    classNames,
-    allowCalendarToggleOnIconClick = false,
-    datePickerProps,
-    inputProps,
-    pickerType,
-    clickAwayRef
-  } = _ref;
-  const {
-    placeholder,
-    type,
-    ...restInputProps
-  } = inputProps || {};
-
-  // --- Picker Type Config ---
-  const getReactDatePickerPropsForPickerType = () => {
-    switch (pickerType) {
-      case 'date':
-        return {
-          dateFormat: 'dd/MM/yyyy',
-          popperPlacement: 'bottom',
-          ...datePickerProps
-        };
-      case 'time':
-        return {
-          dateFormat: 'HH:mm',
-          popperPlacement: 'bottom',
-          showTimeSelect: true,
-          showTimeCaption: false,
-          showTimeSelectOnly: true,
-          timeIntervals: 15,
-          ...datePickerProps
-        };
-      case 'date-time':
-        return {
-          dateFormat: 'dd/MM/yyyy HH:mm',
-          popperPlacement: 'bottom',
-          showTimeSelect: true,
-          timeCaption: '',
-          timeIntervals: 1,
-          ...datePickerProps
-        };
-      case 'week':
-        return {
-          dateFormat: 'w, YYYY',
-          popperPlacement: 'bottom',
-          selectWeek: true,
-          showWeekNumbers: true,
-          showWeekPicker: true,
-          ...datePickerProps
-        };
-      case 'month':
-        return {
-          dateFormat: 'MMMM yyyy',
-          popperPlacement: 'bottom',
-          showMonthYearPicker: true,
-          showMonthYearPickerOnly: true,
-          ...datePickerProps
-        };
-      default:
-        return {};
-    }
-  };
-
-  // To convert date to YYYY-MM-DD format
-  const formatDateToYMD = dateStr => (0, _moment.default)(dateStr).format('YYYY-MM-DD');
-
-  // To convert time to HH:mm format
-  const formatTimeToHM = dateStr => (0, _moment.default)(dateStr).format('HH:mm');
-
-  // To combine date and time in IST format
-  const combineDateTimeInISO = (datePart, timePart) => {
-    if (!datePart || !timePart) {
-      return null;
-    }
-    // Date part is in DD/MM/YYYY format, convert it to YYYY-MM-DD format
-    const datePartInYYYYMMDD = datePart.split('/').reverse().join('-');
-    const isoString = `${datePartInYYYYMMDD}T${timePart}:00+05:30`;
-    return new Date(isoString);
-  };
-
-  // To format the value based on the pickerType
-  const formatPickerValue = value => {
-    if (value === '') {
-      return null;
-    }
-    if (pickerType === 'date') {
-      return combineDateTimeInISO(value, '00:00');
-    }
-    if (pickerType === 'time') {
-      return combineDateTimeInISO(formatDateToYMD(new Date()), value || '00:00');
-    }
-    if (pickerType === 'date-time') {
-      return combineDateTimeInISO(value.split(' ')[0], value.split(' ')[1]);
-    }
-    return '';
-  };
-  const [localValue, setLocalValue] = React.useState(formatPickerValue(value));
-  React.useEffect(() => {
-    if (localValue === '') {
-      setLocalValue(null);
-    }
-  }, [localValue]);
-
-  // Register locale for date-fns
-  (0, _reactDatepicker.registerLocale)(locale, locales[locale]);
-
-  // To handle the value change
-  const handleValueChange = value => {
-    setLocalValue(value);
-    if (pickerType === 'date') {
-      onChange(formatDateToYMD(value));
-    } else if (pickerType === 'time') {
-      onChange(formatTimeToHM(value));
-    } else if (pickerType === 'date-time') {
-      onChange(`${formatDateToYMD(value)}T${formatTimeToHM(value)}`);
-    } else {
-      onChange(value);
-    }
-  };
-  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
-    clickAwayRef: clickAwayRef
-  }, _ref2 => {
-    let {
-      isOpen,
-      onOpen,
-      boundaryRef,
-      triggerRef
-    } = _ref2;
-    return /*#__PURE__*/React.createElement("div", {
-      ref: boundaryRef,
-      className: (0, _classify.default)(_DatePickerModule.default.wrapper, classNames?.wrapper)
-    }, /*#__PURE__*/React.createElement(_reactDatepicker.default, _extends({}, getReactDatePickerPropsForPickerType(), {
-      popperPlacement: datePickerProps?.popperPlacement || 'bottom',
-      selected: localValue,
-      open: isOpen,
-      onChange: handleValueChange,
-      onClickOutside: e => {
-        e.stopPropagation();
-        onOpen();
-      },
-      locale: locale,
-      placeholderText: placeholder,
-      wrapperClassName: (0, _classify.default)(_DatePickerModule.default.datePickerWrapper, datePickerProps?.wrapperClassName),
-      disabled: inputProps?.disabled,
-      popperClassName: datePickerProps?.popperClassName,
-      className: (0, _classify.default)(_DatePickerModule.default.datePicker, datePickerProps?.className),
-      customInput: /*#__PURE__*/React.createElement(_Input.Input, _extends({}, restInputProps, {
-        value: value,
-        onContainerClick: e => {
-          e.stopPropagation();
-          onOpen();
-        },
-        onIconRightClick: () => {
-          if (allowCalendarToggleOnIconClick) {
-            onOpen();
-          }
-        },
-        onIconLeftClick: () => {
-          if (allowCalendarToggleOnIconClick) {
-            onOpen();
-          }
-        },
-        ref: triggerRef
-      }))
-    })));
-  });
-};
-exports.DatePicker = DatePicker;

package/lib/components/DatePicker/DatePicker.js.flow

@@ -1,229 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-// $FlowFixMe[untyped-import]
-import ReactDatePicker, {registerLocale} from 'react-datepicker';
-// $FlowFixMe[untyped-import]
-import * as locales from 'date-fns/locale';
-// $FlowFixMe[untyped-import]
-import moment from 'moment';
-
-import classify from '../../utils/classify';
-import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
-import {type InputProps, Input} from '../Input';
-
-import 'react-datepicker/dist/react-datepicker.css';
-import './custom-datepicker-style.css';
-import css from './DatePicker.module.css';
-
-
-type ClassNames = $ReadOnly<{wrapper?: string}>;
-
-export type DatePickerProps = {
-  locale?: string,
-  value: string,
-  classNames?: ClassNames,
-  onChange: (value: string) => mixed,
-  allowCalendarToggleOnIconClick?: boolean,
-  clickAwayRef?: ClickAwayRefType,
-  datePickerProps?: {
-    dateFormat?: string,
-    popperPlacement?: string,
-    showTimeSelect?: boolean,
-    showTimeCaption?: boolean,
-    showTimeSelectOnly?: boolean,
-    timeIntervals?: number,
-    timeCaption?: string,
-    selectWeek?: boolean,
-    showWeekNumbers?: boolean,
-    showWeekPicker?: boolean,
-    weekStartsOn?: number,
-    showMonthYearPicker?: boolean,
-    showMonthYearPickerOnly?: boolean,
-    wrapperClassName?: string,
-    popperClassName?: string,
-    className?: string,
-    ...
-  },
-  inputProps?: InputProps,
-  pickerType: 'date' | 'time' | 'date-time' | 'week' | 'month',
-};
-
-export const DatePicker = ({
-  locale = 'en',
-  value,
-  onChange,
-  classNames,
-  allowCalendarToggleOnIconClick = false,
-  datePickerProps,
-  inputProps,
-  pickerType,
-  clickAwayRef,
-}: DatePickerProps): React.Node => {
-  const {placeholder, type, ...restInputProps} = inputProps || {};
-
-  // --- Picker Type Config ---
-  const getReactDatePickerPropsForPickerType = () => {
-    switch (pickerType) {
-    case 'date':
-      return {
-        dateFormat: 'dd/MM/yyyy',
-        popperPlacement: 'bottom',
-        ...datePickerProps,
-      };
-    case 'time':
-      return {
-        dateFormat: 'HH:mm',
-        popperPlacement: 'bottom',
-        showTimeSelect: true,
-        showTimeCaption: false,
-        showTimeSelectOnly: true,
-        timeIntervals: 15,
-        ...datePickerProps,
-      };
-    case 'date-time':
-      return {
-        dateFormat: 'dd/MM/yyyy HH:mm',
-        popperPlacement: 'bottom',
-        showTimeSelect: true,
-        timeCaption: '',
-        timeIntervals: 1,
-        ...datePickerProps,
-      };
-    case 'week':
-      return {
-        dateFormat: 'w, YYYY',
-        popperPlacement: 'bottom',
-        selectWeek: true,
-        showWeekNumbers: true,
-        showWeekPicker: true,
-        ...datePickerProps,
-      };
-    case 'month':
-      return {
-        dateFormat: 'MMMM yyyy',
-        popperPlacement: 'bottom',
-        showMonthYearPicker: true,
-        showMonthYearPickerOnly: true,
-        ...datePickerProps,
-      };
-    default:
-      return {};
-    }
-  };
-
-  // To convert date to YYYY-MM-DD format
-  const formatDateToYMD = (dateStr) => moment(dateStr).format('YYYY-MM-DD');
-
-  // To convert time to HH:mm format
-  const formatTimeToHM = (dateStr) => moment(dateStr).format('HH:mm');
-
-  // To combine date and time in IST format
-  const combineDateTimeInISO = (datePart, timePart) => {
-    if (!datePart || !timePart) {
-      return null;
-    }
-    // Date part is in DD/MM/YYYY format, convert it to YYYY-MM-DD format
-    const datePartInYYYYMMDD = datePart.split('/').reverse().join('-');
-    const isoString = `${datePartInYYYYMMDD}T${timePart}:00+05:30`;
-    return new Date(isoString);
-  };
-
-  // To format the value based on the pickerType
-  const formatPickerValue = (value) => {
-    if (value === '') {
-      return null;
-    }
-    if (pickerType === 'date') {
-      return combineDateTimeInISO(value, '00:00');
-    }
-    if (pickerType === 'time') {
-      return combineDateTimeInISO(
-        formatDateToYMD(new Date()),
-        value || '00:00',
-      );
-    }
-    if (pickerType === 'date-time') {
-      return combineDateTimeInISO(value.split(' ')[0], value.split(' ')[1]);
-    }
-    return '';
-  };
-
-  const [localValue, setLocalValue] = React.useState(formatPickerValue(value));
-
-  React.useEffect(() => {
-    if (localValue === '') {
-      setLocalValue(null);
-    }
-  }, [localValue]);
-
-  // Register locale for date-fns
-  registerLocale(locale, locales[locale]);
-
-  // To handle the value change
-  const handleValueChange = (value) => {
-    setLocalValue(value);
-    if (pickerType === 'date') {
-      onChange(formatDateToYMD(value));
-    } else if (pickerType === 'time') {
-      onChange(formatTimeToHM(value));
-    } else if (pickerType === 'date-time') {
-      onChange(`${formatDateToYMD(value)}T${formatTimeToHM(value)}`);
-    } else {
-      onChange(value);
-    }
-  };
-
-  return (
-    <ClickAway clickAwayRef={clickAwayRef}>
-      {({isOpen, onOpen, boundaryRef, triggerRef}) => (
-        <div
-          ref={boundaryRef}
-          className={classify(css.wrapper, classNames?.wrapper)}
-        >
-          <ReactDatePicker
-            {...getReactDatePickerPropsForPickerType()}
-            popperPlacement={datePickerProps?.popperPlacement || 'bottom'}
-            selected={localValue}
-            open={isOpen}
-            onChange={handleValueChange}
-            onClickOutside={(e) => {
-              e.stopPropagation();
-              onOpen();
-            }}
-            locale={locale}
-            placeholderText={placeholder}
-            wrapperClassName={classify(
-              css.datePickerWrapper,
-              datePickerProps?.wrapperClassName,
-            )}
-            disabled={inputProps?.disabled}
-            popperClassName={datePickerProps?.popperClassName}
-            className={classify(css.datePicker, datePickerProps?.className)}
-            customInput={
-              <Input
-                {...restInputProps}
-                value={value}
-                onContainerClick={(e) => {
-                  e.stopPropagation();
-                  onOpen();
-                }}
-                onIconRightClick={() => {
-                  if (allowCalendarToggleOnIconClick) {
-                    onOpen();
-                  }
-                }}
-                onIconLeftClick={() => {
-                  if (allowCalendarToggleOnIconClick) {
-                    onOpen();
-                  }
-                }}
-                ref={triggerRef}
-              />
-            }
-          />
-        </div>
-      )}
-    </ClickAway>
-  );
-};

package/lib/components/DatePicker/DatePicker.module.css

@@ -1,11 +0,0 @@
-@value (spaceFluid) from '../../styles/variables/_space.css';
-@value (size500) from '../../styles/variables/_size.css';
-
-.wrapper {
-  width: spaceFluid;
-  max-width: size500;
-}
-
-.datePickerWrapper {
-  width: spaceFluid;
-}

package/lib/components/DatePicker/custom-datepicker-style.css

@@ -1,43 +0,0 @@
-:root {
-  --colorFillSecondary: #efebfa;
-  --colorBorderSecondary: #d1d1d1;
-  --colorFillPrimary: #5c34cd;
-  --colorTextPrimary: #17172a;
-  --borderWidthPrimary: 1px;
-  --size8: 8px;
-}
-
-.react-datepicker {
-  font-family: 'CENTRA NO 2' !important;
-}
-
-.react-datepicker__header {
-  background-color: var(--colorFillSecondary) !important;
-}
-
-.react-datepicker__day--selected {
-  background-color: var(--colorFillSecondary) !important;
-  color: var(--colorTextPrimary);
-  border: var(--borderWidthPrimary) solid var(--colorBorderSecondary);
-}
-
-.react-datepicker__month-text {
-  padding: var(--size8);
-}
-
-.react-datepicker__month-text--selected {
-  background-color: var(--colorFillSecondary) !important;
-  color: var(--colorTextPrimary) !important;
-  border: var(--borderWidthPrimary) solid var(--colorBorderSecondary);
-}
-
-.react-datepicker__time-list-item--selected {
-  background-color: var(--colorFillSecondary) !important;
-  color: var(--colorTextPrimary) !important;
-  border: var(--borderWidthPrimary) solid var(--colorBorderSecondary);
-}
-
-.react-datepicker__week-number--selected {
-  background-color: var(--colorFillPrimary) !important;
-  border: var(--borderWidthPrimary) solid var(--colorBorderSecondary);
-}

package/lib/components/DatePicker/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _DatePicker = require("./DatePicker");
-Object.keys(_DatePicker).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _DatePicker[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _DatePicker[key];
-    }
-  });
-});

package/lib/components/DatePicker/index.js.flow

@@ -1,3 +0,0 @@
-// @flow strict
-
-export * from './DatePicker';