@spaced-out/ui-design-system 0.2.9 → 0.3.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.3.0](https://github.com/spaced-out/ui-design-system/compare/v0.2.10...v0.3.0) (2024-11-08)
+
+
+### Features
+
+* timeline component ([#283](https://github.com/spaced-out/ui-design-system/issues/283)) ([0f2ae3c](https://github.com/spaced-out/ui-design-system/commit/0f2ae3cf88c065e521994fab3426e32cfe4752b5))
+
+### [0.2.10](https://github.com/spaced-out/ui-design-system/compare/v0.2.9...v0.2.10) (2024-11-08)
+
+
+### Bug Fixes
+
+* support menu open for all menu related components ([#285](https://github.com/spaced-out/ui-design-system/issues/285)) ([657324a](https://github.com/spaced-out/ui-design-system/commit/657324ae683dbcd702dd54ab1d42f007fadb3db2))
+
 ### [0.2.9](https://github.com/spaced-out/ui-design-system/compare/v0.2.8...v0.2.9) (2024-11-08)
 
 

package/lib/components/Dropdown/Dropdown.js

@@ -99,7 +99,9 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: (option, e) => {
         onChange && onChange(option, e);
-        if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
+        if (
+        // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
+        !option.keepMenuOpenOnOptionSelect && (!menu.optionsVariant || menu.optionsVariant === 'normal')) {
           clickAway();
           refs.reference.current.querySelector('input').focus();
         }

package/lib/components/Dropdown/Dropdown.js.flow

@@ -122,8 +122,9 @@ export const Dropdown: React$AbstractComponent<
                   onSelect={(option, e) => {
                     onChange && onChange(option, e);
                     if (
-                      !menu.optionsVariant ||
-                      menu.optionsVariant === 'normal'
+                      // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
+                      !option.keepMenuOpenOnOptionSelect &&
+                      (!menu.optionsVariant || menu.optionsVariant === 'normal')
                     ) {
                       clickAway();
                       refs.reference.current.querySelector('input').focus();

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -93,7 +93,9 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: (option, e) => {
         onOptionSelect && onOptionSelect(option, e);
-        if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
+        if (
+        // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
+        !option.keepMenuOpenOnOptionSelect && (!menu.optionsVariant || menu.optionsVariant === 'normal')) {
           clickAway();
         }
       },

package/lib/components/InlineDropdown/InlineDropdown.js.flow

@@ -134,8 +134,9 @@ export const InlineDropdown: React$AbstractComponent<
                   onSelect={(option, e) => {
                     onOptionSelect && onOptionSelect(option, e);
                     if (
-                      !menu.optionsVariant ||
-                      menu.optionsVariant === 'normal'
+                      // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
+                      !option.keepMenuOpenOnOptionSelect &&
+                      (!menu.optionsVariant || menu.optionsVariant === 'normal')
                     ) {
                       clickAway();
                     }

package/lib/components/Timeline/Timeline.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Timeline = exports.ORIENTATION = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _TimelineModule = _interopRequireDefault(require("./Timeline.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ORIENTATION = Object.freeze({
+  left: 'left',
+  right: 'right'
+});
+exports.ORIENTATION = ORIENTATION;
+const Timeline_ = (_ref, ref) => {
+  let {
+    classNames,
+    orientation = ORIENTATION.left,
+    children
+  } = _ref;
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+  const timelineItems = childrenArray.map(timelineItem => /*#__PURE__*/React.cloneElement(timelineItem, {
+    ...timelineItem.props,
+    orientation
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: (0, _classify.classify)(_TimelineModule.default.timelineWrapper, classNames?.wrapper),
+    "data-testid": "Timeline"
+  }, timelineItems);
+};
+const Timeline = /*#__PURE__*/React.forwardRef(Timeline_);
+exports.Timeline = Timeline;

package/lib/components/Timeline/Timeline.js.flow

@@ -0,0 +1,47 @@
+// @flow strict
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './Timeline.module.css';
+
+
+export const ORIENTATION = Object.freeze({
+  left: 'left',
+  right: 'right',
+});
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+export type Orientation = $Values<typeof ORIENTATION>;
+
+export type TimelineProps = {
+  children: React.Node,
+  classNames?: ClassNames,
+  orientation?: Orientation,
+};
+
+const Timeline_ = (
+  {classNames, orientation = ORIENTATION.left, children}: TimelineProps,
+  ref,
+): React.Node => {
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+  const timelineItems = childrenArray.map((timelineItem) =>
+    React.cloneElement(timelineItem, {
+      ...timelineItem.props,
+      orientation,
+    }),
+  );
+  return (
+    <div
+      ref={ref}
+      className={classify(css.timelineWrapper, classNames?.wrapper)}
+      data-testid="Timeline"
+    >
+      {timelineItems}
+    </div>
+  );
+};
+
+export const Timeline = (React.forwardRef<TimelineProps, HTMLDivElement>(
+  Timeline_,
+): React$AbstractComponent<TimelineProps, HTMLDivElement>);

package/lib/components/Timeline/Timeline.module.css

@@ -0,0 +1,102 @@
+@value (
+  size26
+) from '../../styles/variables/_size.css';
+@value (
+  spaceXXSmall,
+  spaceMedium,
+  spaceXSmall,
+  spaceSmall,
+  spaceFluid,
+  spaceNone
+) from '../../styles/variables/_space.css';
+@value (
+  colorBorderPrimary,
+  colorInformationLightest
+) from '../../styles/variables/_color.css';
+@value (
+  borderWidthPrimary,
+  borderRadiusCircle
+) from '../../styles/variables/_border.css';
+
+.timelineWrapper {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: spaceSmall;
+}
+
+.timelineItemWrapper {
+  display: flex;
+  gap: spaceSmall;
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: var(--align);
+
+  /* According to the design specification, the last timeline item's content will not have any space at the bottom. */
+  &:last-child .timelineItemContent .timelineItemEventDetails {
+    margin-bottom: spaceNone;
+  }
+}
+
+.timelineItemIconWrapper {
+  display: flex;
+  gap: spaceXXSmall;
+  flex-direction: column;
+}
+
+.timelineItemIcon {
+  width: size26;
+  height: size26;
+  border-radius: borderRadiusCircle;
+  background-color: colorInformationLightest;
+}
+
+.timelineItemContent {
+  display: flex;
+  gap: spaceSmall;
+  width: spaceFluid;
+  flex-direction: var(--direction);
+}
+
+.timelineItemBorder {
+  display: flex;
+  width: size26;
+  flex: 1;
+  box-sizing: border-box;
+  justify-content: center;
+
+  & .border {
+    height: spaceFluid;
+    border-left: borderWidthPrimary dashed colorBorderPrimary;
+  }
+}
+
+.timelineItemEventDetails {
+  display: flex;
+  gap: spaceXSmall;
+  width: spaceFluid;
+  flex-direction: column;
+  margin-bottom: spaceMedium;
+
+  & .timelineItemTitle {
+    justify-content: var(--justify);
+  }
+}
+
+.timelineItemTitle {
+  composes: bodySmall from '../../styles/typography.module.css';
+  composes: secondary from '../../styles/typography.module.css';
+  min-height: size26;
+}
+
+.timelineItemCardWrapper {
+  width: spaceFluid;
+}
+
+.timelineItemLoader {
+  display: flex;
+  width: spaceFluid;
+  justify-content: center;
+}

package/lib/components/Timeline/TimelineItem/TimelineItem.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimelineItem = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../../types/typography");
+var _classify = require("../../../utils/classify");
+var _Card = require("../../Card");
+var _ConditionalWrapper = require("../../ConditionalWrapper");
+var _Icon = require("../../Icon");
+var _Timeline = require("../Timeline");
+var _TimelineModule = _interopRequireDefault(require("../Timeline.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const TimelineItem_ = (_ref, ref) => {
+  let {
+    id,
+    title,
+    iconName,
+    iconType = _Icon.ICON_TYPE.solid,
+    children,
+    iconColor = _typography.TEXT_COLORS.information,
+    classNames,
+    orientation = _Timeline.ORIENTATION.left,
+    parentComponent,
+    enableCardWrapper = true
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    key: id,
+    "data-testid": "Timeline-item",
+    className: (0, _classify.classify)(_TimelineModule.default.timelineItemWrapper, classNames?.wrapper),
+    style: {
+      '--align': orientation === 'left' ? 'flex-start' : 'flex-end'
+    },
+    ref: ref
+  }, parentComponent, /*#__PURE__*/React.createElement("div", {
+    style: {
+      '--direction': orientation === 'left' ? 'row' : 'row-reverse'
+    },
+    className: _TimelineModule.default.timelineItemContent
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _TimelineModule.default.timelineItemIconWrapper
+  }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: iconName,
+    type: iconType,
+    size: _Icon.ICON_SIZE.small,
+    color: iconColor,
+    className: (0, _classify.classify)(_TimelineModule.default.timelineItemIcon, classNames?.icon)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _TimelineModule.default.timelineItemBorder
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _TimelineModule.default.border
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      '--justify': orientation === 'left' ? 'flex-start' : 'flex-end'
+    },
+    className: _TimelineModule.default.timelineItemEventDetails
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_TimelineModule.default.timelineItemTitle, classNames?.title)
+  }, title), /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+    condition: enableCardWrapper,
+    wrapper: children => /*#__PURE__*/React.createElement(_Card.Card, {
+      paddingTop: _Card.PADDING_SIZES.small,
+      paddingBottom: _Card.PADDING_SIZES.small,
+      classNames: {
+        wrapper: (0, _classify.classify)(_TimelineModule.default.timelineItemCardWrapper, classNames?.card)
+      }
+    }, children)
+  }, children))));
+};
+const TimelineItem = /*#__PURE__*/React.forwardRef(TimelineItem_);
+exports.TimelineItem = TimelineItem;

package/lib/components/Timeline/TimelineItem/TimelineItem.js.flow

@@ -0,0 +1,117 @@
+// @flow strict
+import * as React from 'react';
+
+import type {ColorTypes} from '../../../types/typography';
+import {TEXT_COLORS} from '../../../types/typography';
+import {classify} from '../../../utils/classify';
+import {Card, PADDING_SIZES} from '../../Card';
+import {ConditionalWrapper} from '../../ConditionalWrapper';
+import type {IconType} from '../../Icon';
+import {Icon, ICON_SIZE, ICON_TYPE} from '../../Icon';
+import type {Orientation} from '../Timeline';
+import {ORIENTATION} from '../Timeline';
+
+import css from '../Timeline.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  card?: string,
+  icon?: string,
+  title?: string,
+  wrapper?: string,
+}>;
+
+export type TimelineItemProps = {
+  id?: string,
+  title?: React.Node,
+  iconName: string,
+  children: React.Node,
+  iconType?: IconType,
+  iconColor?: ColorTypes,
+  classNames?: ClassNames,
+  orientation?: Orientation,
+  parentComponent?: React.Node,
+  enableCardWrapper?: boolean,
+};
+
+const TimelineItem_ = (
+  {
+    id,
+    title,
+    iconName,
+    iconType = ICON_TYPE.solid,
+    children,
+    iconColor = TEXT_COLORS.information,
+    classNames,
+    orientation = ORIENTATION.left,
+    parentComponent,
+    enableCardWrapper = true,
+  }: TimelineItemProps,
+  ref,
+): React.Node => (
+  <div
+    id={id}
+    key={id}
+    data-testid="Timeline-item"
+    className={classify(css.timelineItemWrapper, classNames?.wrapper)}
+    style={{
+      '--align': orientation === 'left' ? 'flex-start' : 'flex-end',
+    }}
+    ref={ref}
+  >
+    {parentComponent}
+    <div
+      style={{
+        '--direction': orientation === 'left' ? 'row' : 'row-reverse',
+      }}
+      className={css.timelineItemContent}
+    >
+      <div className={css.timelineItemIconWrapper}>
+        <Icon
+          name={iconName}
+          type={iconType}
+          size={ICON_SIZE.small}
+          color={iconColor}
+          className={classify(css.timelineItemIcon, classNames?.icon)}
+        />
+        <div className={css.timelineItemBorder}>
+          <div className={css.border} />
+        </div>
+      </div>
+      <div
+        style={{
+          '--justify': orientation === 'left' ? 'flex-start' : 'flex-end',
+        }}
+        className={css.timelineItemEventDetails}
+      >
+        <div className={classify(css.timelineItemTitle, classNames?.title)}>
+          {title}
+        </div>
+        <ConditionalWrapper
+          condition={enableCardWrapper}
+          wrapper={(children) => (
+            <Card
+              paddingTop={PADDING_SIZES.small}
+              paddingBottom={PADDING_SIZES.small}
+              classNames={{
+                wrapper: classify(
+                  css.timelineItemCardWrapper,
+                  classNames?.card,
+                ),
+              }}
+            >
+              {children}
+            </Card>
+          )}
+        >
+          {children}
+        </ConditionalWrapper>
+      </div>
+    </div>
+  </div>
+);
+
+export const TimelineItem = (React.forwardRef<
+  TimelineItemProps,
+  HTMLDivElement,
+>(TimelineItem_): React$AbstractComponent<TimelineItemProps, HTMLDivElement>);

package/lib/components/Timeline/TimelineItem/index.js

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

package/lib/components/Timeline/TimelineItem/index.js.flow

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

package/lib/components/Timeline/index.js

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

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

@@ -0,0 +1,4 @@
+// @flow strict
+
+export * from './Timeline';
+export * from './TimelineItem';

package/lib/components/Typeahead/Typeahead.js

@@ -109,7 +109,9 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       options: menuOptions,
       onSelect: (option, e) => {
         onSelect && onSelect(option, e);
-        if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
+        if (
+        // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
+        !option.keepMenuOpenOnOptionSelect && (!menu.optionsVariant || menu.optionsVariant === 'normal')) {
           clickAway();
         }
       },

package/lib/components/Typeahead/Typeahead.js.flow

@@ -144,8 +144,10 @@ const BaseTypeahead: React$AbstractComponent<
                   onSelect={(option, e) => {
                     onSelect && onSelect(option, e);
                     if (
-                      !menu.optionsVariant ||
-                        menu.optionsVariant === 'normal'
+                    // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
+                      !option.keepMenuOpenOnOptionSelect &&
+                        (!menu.optionsVariant ||
+                          menu.optionsVariant === 'normal')
                     ) {
                       clickAway();
                     }

package/lib/utils/date-range-picker/date-range-picker.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrangleMoment = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isEndOfRange = exports.inDateRange = exports.getValidDates = exports.getTimezones = exports.getSubtractedDate = exports.getMonthEndDate = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.checkRangeValidity = exports.addTimezone = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = exports.DATE_RANGE_PICKER_ERRORS = void 0;
-var _formatISO = _interopRequireDefault(require("date-fns/formatISO"));
 var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _lodash = require("lodash");
@@ -14,8 +13,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // $FlowFixMe - strict types for date-fns
 
-// $FlowFixMe - strict types for date-fns
-
 // $FlowFixMe[untyped-import]
 
 const NAVIGATION_ACTION = Object.freeze({
@@ -107,9 +104,7 @@ const wrangleMoment = date => {
   return date instanceof _momentTimezone.default ? date.toDate() : (0, _parseISO.default)(date);
 };
 exports.wrangleMoment = wrangleMoment;
-const formatIsoDate = date => (0, _formatISO.default)(wrangleMoment(date), {
-  representation: 'date'
-});
+const formatIsoDate = date => (0, _momentTimezone.default)(date).utc().format('YYYY-MM-DD');
 exports.formatIsoDate = formatIsoDate;
 const isStartOfRange = (_ref, date) => {
   let {

package/lib/utils/date-range-picker/date-range-picker.js.flow

@@ -1,7 +1,5 @@
 // @flow strict
 
-// $FlowFixMe - strict types for date-fns
-import formatISO from 'date-fns/formatISO';
 // $FlowFixMe - strict types for date-fns
 import parseISO from 'date-fns/parseISO';
 import invariant from 'invariant';
@@ -92,9 +90,7 @@ export const wrangleMoment = (date?: string | Date): Date => {
 };
 
 export const formatIsoDate = (date?: string | Date): string =>
-  formatISO(wrangleMoment(date), {
-    representation: 'date',
-  });
+  moment(date).utc().format('YYYY-MM-DD');
 
 export const isStartOfRange = ({startDate}: DateRange, date: string): boolean =>
   Boolean(startDate) && moment(date).isSame(moment(startDate), 'd');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {