@spaced-out/ui-design-system 0.4.15-beta.0 → 0.4.15

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

@@ -0,0 +1,32 @@
+// @flow strict
+
+export {TEXT_COLORS} from '../../types/typography';
+export type {TextProps} from './Text';
+export {
+  BodyLarge,
+  BodyLargeBold,
+  BodyMedium,
+  BodyMediumBold,
+  BodySmall,
+  BodySmallBold,
+  ButtonTextExtraSmall,
+  ButtonTextExtraSmallUnderline,
+  ButtonTextMedium,
+  ButtonTextMediumUnderline,
+  ButtonTextSmall,
+  ButtonTextSmallUnderline,
+  FormInputMedium,
+  FormInputSmall,
+  FormLabelMedium,
+  FormLabelSmall,
+  JumboLarge,
+  JumboMedium,
+  JumboSmall,
+  MenuTextMedium,
+  MenuTextSmall,
+  SubTitleExtraSmall,
+  SubTitleLarge,
+  SubTitleMedium,
+  SubTitleSmall,
+  TitleMedium,
+} from './Text';

package/lib/components/TextTile/TextTile.js.flow

@@ -0,0 +1,44 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
+import {BodyLarge, JumboMedium} from '../Text';
+
+import css from './TextTile.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, title?: string}>;
+
+export type TextTileProps = {
+  header?: string,
+  iconName?: string,
+  classNames?: ClassNames,
+  description?: string,
+};
+
+export const TextTile: React$AbstractComponent<TextTileProps, HTMLDivElement> =
+  React.forwardRef<TextTileProps, HTMLDivElement>(
+    (
+      {header, iconName = 'sparkles', classNames, description}: TextTileProps,
+      ref,
+    ) => (
+      <div
+        ref={ref}
+        data-testid="TextTile"
+        className={classify(css.textTileWrapper, classNames?.wrapper)}
+      >
+        <div className={classify(css.textTileTitle, classNames?.title)}>
+          <Icon
+            size={ICON_SIZE.large}
+            name={iconName}
+            type={ICON_TYPE.solid}
+            className={css.sparkles}
+          />
+          <JumboMedium>{header}</JumboMedium>
+        </div>
+        <BodyLarge>{description}</BodyLarge>
+      </div>
+    ),
+  );

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

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

package/lib/components/Textarea/Textarea.js

@@ -66,20 +66,12 @@ const Textarea_ = (props, ref) => {
     }, classNames?.box)
   }, /*#__PURE__*/React.createElement("textarea", _extends({}, textareaProps, {
     disabled: locked || disabled,
-    name: name
-    // @ts-ignore - TS2322 - Type '{ current: HTMLTextAreaElement | null; } | ((arg1: HTMLTextAreaElement | null) => unknown)' is not assignable to type 'Ref<HTMLTextAreaElement> | undefined'.
-    ,
+    name: name,
     ref: ref,
     placeholder: placeholder,
-    value: value
-    // @ts-ignore - TS2322 - Type '((evt: ChangeEvent<HTMLInputElement>, isEnter?: boolean | undefined) => unknown) | undefined' is not assignable to type 'ChangeEventHandler<HTMLTextAreaElement> | undefined'.
-    ,
-    onChange: onChange
-    // @ts-ignore - TS2322 - Type '((e: ChangeEvent<HTMLInputElement>) => unknown) | undefined' is not assignable to type 'FocusEventHandler<HTMLTextAreaElement> | undefined'.
-    ,
-    onFocus: onFocus
-    // @ts-ignore - TS2322 - Type '((e: ChangeEvent<HTMLInputElement>) => unknown) | undefined' is not assignable to type 'FocusEventHandler<HTMLTextAreaElement> | undefined'.
-    ,
+    value: value,
+    onChange: onChange,
+    onFocus: onFocus,
     onBlur: onBlur,
     className: classNames?.textarea
   }))), (Boolean(helperText) || error) && /*#__PURE__*/React.createElement("div", {
@@ -88,6 +80,4 @@ const Textarea_ = (props, ref) => {
     color: error && errorText ? 'danger' : disabled ? 'disabled' : 'secondary'
   }, error && errorText ? errorText : helperText ?? '')));
 };
-
-// @ts-ignore - TS2345 - Argument of type '(props: TextareaProps, ref: { current: null | HTMLTextAreaElement; } | ((arg1: null | HTMLTextAreaElement) => unknown)) => React.JSX.Element' is not assignable to parameter of type 'ForwardRefRenderFunction<HTMLTextAreaElement, TextareaProps>'.
 const Textarea = exports.Textarea = /*#__PURE__*/React.forwardRef(Textarea_);

package/lib/components/Textarea/Textarea.js.flow

@@ -0,0 +1,139 @@
+// @flow strict
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+import {BodySmall, FormLabelSmall} from '../Text';
+
+import css from './Textarea.module.css';
+
+
+type ClassNames = $ReadOnly<{box?: string, textarea?: string}>;
+
+export type TextareaProps = {
+  value?: string,
+  onChange?: (
+    evt: SyntheticInputEvent<HTMLInputElement>,
+    isEnter?: boolean,
+  ) => mixed,
+  onFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+  name?: string,
+  disabled?: boolean,
+  placeholder?: string,
+  locked?: boolean,
+  error?: boolean,
+  errorText?: string,
+  label?: string | React.Node,
+  helperText?: string | React.Node,
+  classNames?: ClassNames,
+  size?: 'medium' | 'small',
+  required?: boolean,
+  textCountLimit?: number,
+  ...
+};
+
+const Textarea_ = (props: TextareaProps, ref): React.Node => {
+  const {
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    name,
+    disabled,
+    placeholder,
+    error,
+    locked,
+    errorText,
+    label,
+    helperText,
+    classNames,
+    size = 'medium',
+    required,
+    textCountLimit,
+    ...textareaProps
+  } = props;
+
+  const [textCountError, setTextCountError] = React.useState(false);
+
+  React.useEffect(() => {
+    if (textCountLimit) {
+      if (value && value.length > textCountLimit) {
+        setTextCountError(true);
+      } else {
+        setTextCountError(false);
+      }
+    }
+  }, [value]);
+
+  const controlledTextareaFilled = value !== '';
+
+  return (
+    <div
+      className={classify(css.wrapper, {
+        [css.filled]: controlledTextareaFilled ?? false,
+        [css.withError]: (error || textCountError) ?? false,
+      })}
+    >
+      {Boolean(label) && (
+        <div className={css.info}>
+          <div className={css.infoContent}>
+            <FormLabelSmall color="secondary">{label ?? ''}</FormLabelSmall>
+            &nbsp;
+            {required && <FormLabelSmall color="danger">{'*'}</FormLabelSmall>}
+          </div>
+          <FormLabelSmall
+            color={error || textCountError ? 'danger' : 'secondary'}
+          >
+            {!!textCountLimit &&
+              ((value && value.length) || 0) + '/' + textCountLimit}
+          </FormLabelSmall>
+        </div>
+      )}
+      <div
+        className={classify(
+          css.box,
+          {
+            [css.inputDisabled]: disabled ?? false,
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.locked]: locked,
+          },
+          classNames?.box,
+        )}
+      >
+        <textarea
+          {...textareaProps}
+          disabled={locked || disabled}
+          name={name}
+          ref={ref}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          className={classNames?.textarea}
+        ></textarea>
+      </div>
+      {(Boolean(helperText) || error) && (
+        <div className={css.info}>
+          <BodySmall
+            color={
+              error && errorText
+                ? 'danger'
+                : disabled
+                  ? 'disabled'
+                  : 'secondary'
+            }
+          >
+            {error && errorText ? errorText : helperText ?? ''}
+          </BodySmall>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const Textarea = (React.forwardRef<TextareaProps, HTMLTextAreaElement>(
+  Textarea_,
+): React$AbstractComponent<TextareaProps, HTMLTextAreaElement>);

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

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {TextareaProps} from './Textarea';
+export {Textarea} from './Textarea';

package/lib/components/Timeline/Timeline.js

@@ -20,21 +20,14 @@ const Timeline_ = (_ref, ref) => {
     children
   } = _ref;
   const childrenArray = React.Children.toArray(children).filter(Boolean);
-  const timelineItems = childrenArray.map(timelineItem =>
-  /*#__PURE__*/
-  // @ts-ignore - TS2769 - No overload matches this call.
-  React.cloneElement(timelineItem, {
-    // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.
+  const timelineItems = childrenArray.map(timelineItem => /*#__PURE__*/React.cloneElement(timelineItem, {
     ...timelineItem.props,
     orientation
   }));
   return /*#__PURE__*/React.createElement("div", {
-    // @ts-ignore - TS2322 - Type '{ current: HTMLDivElement | null; } | ((arg1: HTMLDivElement | null) => unknown)' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
     ref: ref,
     className: (0, _classify.classify)(_TimelineModule.default.timelineWrapper, classNames?.wrapper),
     "data-testid": "Timeline"
   }, timelineItems);
 };
-
-// @ts-ignore - TS2345 - Argument of type '({ classNames, orientation, children, }: TimelineProps, ref: { current: null | HTMLDivElement; } | ((arg1: null | HTMLDivElement) => unknown)) => React.JSX.Element' is not assignable to parameter of type 'ForwardRefRenderFunction<HTMLDivElement, TimelineProps>'.
 const Timeline = exports.Timeline = /*#__PURE__*/React.forwardRef(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/TimelineItem/TimelineItem.js

@@ -19,7 +19,6 @@ const TimelineItem_ = (_ref, ref) => {
     id,
     title,
     iconName,
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type '"regular" | "solid" | "duotone" | "brands"'.
     iconType = _Icon.ICON_TYPE.solid,
     children,
     iconColor = _typography.TEXT_COLORS.information,
@@ -36,9 +35,7 @@ const TimelineItem_ = (_ref, ref) => {
     className: (0, _classify.classify)(_TimelineModule.default.timelineItemWrapper, classNames?.wrapper),
     style: {
       '--align': orientation === 'left' ? 'flex-start' : 'flex-end'
-    }
-    // @ts-ignore - TS2322 - Type '{ current: HTMLDivElement | null; } | ((arg1: HTMLDivElement | null) => unknown)' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
-    ,
+    },
     ref: ref
   }, parentComponent, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -49,9 +46,7 @@ const TimelineItem_ = (_ref, ref) => {
     className: _TimelineModule.default.timelineItemIconWrapper
   }, /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconName,
-    type: iconType
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    type: iconType,
     size: _Icon.ICON_SIZE.small,
     color: iconColor,
     className: (0, _classify.classify)(_TimelineModule.default.timelineItemIcon, classNames?.icon)
@@ -78,6 +73,4 @@ const TimelineItem_ = (_ref, ref) => {
     }, children)
   }, children))));
 };
-
-// @ts-ignore - TS2345 - Argument of type '({ id, title, iconName, iconType, children, iconColor, classNames, description, orientation, parentComponent, enableCardWrapper, }: TimelineItemProps, ref: { current: null | HTMLDivElement; } | ((arg1: null | HTMLDivElement) => unknown)) => React.JSX.Element' is not assignable to parameter of type 'ForwardRefRenderFunction<HTMLDivElement, TimelineItemProps>'.
 const TimelineItem = exports.TimelineItem = /*#__PURE__*/React.forwardRef(TimelineItem_);

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

@@ -0,0 +1,127 @@
+// @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,
+  description?: string,
+}>;
+
+export type TimelineItemProps = {
+  id?: string,
+  title?: React.Node,
+  iconName: string,
+  children: React.Node,
+  iconType?: IconType,
+  iconColor?: ColorTypes,
+  classNames?: ClassNames,
+  description?: React.Node,
+  orientation?: Orientation,
+  parentComponent?: React.Node,
+  enableCardWrapper?: boolean,
+};
+
+const TimelineItem_ = (
+  {
+    id,
+    title,
+    iconName,
+    iconType = ICON_TYPE.solid,
+    children,
+    iconColor = TEXT_COLORS.information,
+    classNames,
+    description,
+    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 className={css.timelineItemEventDetails}>
+        <div className={css.timelineItemInfo}>
+          <div className={classify(css.timelineItemTitle, classNames?.title)}>
+            {title}
+          </div>
+          {description ? (
+            <div
+              className={classify(
+                css.timelineItemDescription,
+                classNames?.description,
+              )}
+            >
+              {description}
+            </div>
+          ) : null}
+        </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.flow

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

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

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

package/lib/components/Toast/Toast.js

@@ -66,7 +66,6 @@ const ToastIcon = _ref => {
 const ToastTitle = exports.ToastTitle = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
-    // @ts-ignore
     semantic = '',
     className,
     ...props
@@ -100,7 +99,6 @@ const ToastFooter = _ref4 => {
   const footerActions = React.Children.map(children, (child, index) => {
     const isLast = index === arrayChildren.length - 1;
     if (/*#__PURE__*/React.isValidElement(child)) {
-      // @ts-ignore - TS2339 - Property 'onClick' does not exist on type 'unknown'.
       const {
         onClick
       } = child.props;
@@ -108,22 +106,17 @@ const ToastFooter = _ref4 => {
         onClose && onClose();
         onClick && onClick(e);
       };
-
-      // @ts-ignore - TS2339 - Property 'displayName' does not exist on type 'string | JSXElementConstructor<any>'.
       if (child?.type?.displayName === 'Button' && isLast) {
         return /*#__PURE__*/React.cloneElement(child, {
           size: 'small',
           type: 'primary',
-          // @ts-ignore - TS2698 - Spread types may only be created from object types.
           ...child.props,
           onClick: buttonClickHandler
         });
-        // @ts-ignore - TS2339 - Property 'displayName' does not exist on type 'string | JSXElementConstructor<any>'.
       } else if (child?.type?.displayName === 'Button') {
         return /*#__PURE__*/React.cloneElement(child, {
           size: 'small',
           type: 'tertiary',
-          // @ts-ignore - TS2698 - Spread types may only be created from object types.
           ...child.props,
           onClick: buttonClickHandler
         });
@@ -159,9 +152,7 @@ const Toast = _ref5 => {
     if (childrenArray.length) {
       const nodes = [];
       for (const child of childrenArray) {
-        // @ts-ignore - TS2339 - Property 'type' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.
         if (child?.type?.displayName === comp) {
-          // @ts-ignore - TS2769 - No overload matches this call.
           nodes.push(/*#__PURE__*/React.cloneElement(child, {
             semantic
           }));
@@ -172,7 +163,7 @@ const Toast = _ref5 => {
     return null;
   };
   const footer = getComp('ToastFooter');
-  // @ts-ignore - TS2769 - No overload matches this call.
+  // $FlowFixMe
   const footerWithClose = footer ? /*#__PURE__*/React.cloneElement(footer, {
     onClose
   }) : null;