@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/components/ButtonTabs/ButtonTabDropdown.js.flow

@@ -0,0 +1,150 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate,
+  // $FlowFixMe[untyped-import]
+  flip,
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  FloatingPortal,
+  // $FlowFixMe[untyped-import]
+  offset,
+  // $FlowFixMe[untyped-import]
+  shift,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+import {includes} from 'lodash';
+
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import classify from '../../utils/classify';
+import {ClickAway} from '../../utils/click-away';
+import {mergeRefs} from '../../utils/merge-refs';
+import type {AnchorType} from '../ButtonDropdown';
+import {Menu} from '../Menu';
+import type {ElevationType} from '../Tooltip';
+import {getElevationValue} from '../Tooltip';
+
+import type {ButtonTabProps} from './ButtonTab';
+import {ButtonTab} from './ButtonTab';
+
+import css from './ButtonTabDropdown.module.css';
+
+
+export type ButtonTabDropdownProps = {
+  ...ButtonTabProps,
+  title: string,
+  elevation?: ElevationType,
+  dropdownClass?: string,
+  anchorPosition?: AnchorType,
+  ...
+};
+
+export const ButtonTabDropdown = ({
+  title,
+  elevation = 'modal',
+  anchorPosition = 'bottom-end',
+  ...buttonTabProps
+}: ButtonTabDropdownProps): React.Node => {
+  const {
+    size,
+    children,
+    selectedButtonTabId,
+    onButtonTabSelect: onTabSelect,
+    dropdownClass,
+  } = buttonTabProps;
+  const childrenArray = React.Children.toArray(children);
+  const menuOptions = childrenArray.map((child) => {
+    const {
+      id,
+      children,
+      disabled,
+      iconName,
+      iconType,
+      classNames,
+      size: buttonSize,
+    } = child.props;
+    return {
+      key: id,
+      disabled,
+      classNames,
+      label: children,
+      iconLeft: iconName,
+      iconLeftType: iconType,
+      customComponent: children,
+      optionSize: buttonSize ?? size,
+    };
+  });
+  const moreTabSelectedId = includes(
+    menuOptions.map(({key}) => key),
+    selectedButtonTabId,
+  )
+    ? 'more-tab'
+    : selectedButtonTabId;
+
+  const {x, y, refs, strategy, context} = useFloating({
+    open: true,
+    strategy: 'absolute',
+    placement: anchorPosition,
+    whileElementsMounted: autoUpdate,
+    middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+  });
+
+  return (
+    <ClickAway>
+      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
+        <div
+          data-testid="ButtonTabDropdown"
+          className={classify(css.buttonTabDropDownWrapper, dropdownClass)}
+        >
+          <ButtonTab
+            {...buttonTabProps}
+            ref={mergeRefs([refs.setReference, triggerRef])}
+            selectedButtonTabId={moreTabSelectedId}
+            onButtonTabSelect={(id, e) => {
+              e?.stopPropagation();
+              onOpen();
+            }}
+          >
+            {title}
+          </ButtonTab>
+          {isOpen && (
+            <FloatingPortal>
+              <FloatingFocusManager
+                modal={false}
+                context={context}
+                initialFocus={refs.reference}
+              >
+                <div
+                  className={css.menuWrapper}
+                  ref={mergeRefs([refs.setFloating, boundaryRef])}
+                  style={{
+                    display: 'flex',
+                    position: strategy,
+                    top: y ?? spaceNone,
+                    left: x ?? spaceNone,
+                    '--menu-elevation': getElevationValue(elevation),
+                  }}
+                >
+                  <Menu
+                    onSelect={(option, e) => {
+                      onTabSelect && onTabSelect(option.key, e);
+                      clickAway();
+                    }}
+                    size={size}
+                    options={menuOptions}
+                    onTabOut={clickAway}
+                    selectedKeys={[selectedButtonTabId ?? '']}
+                  />
+                </div>
+              </FloatingFocusManager>
+            </FloatingPortal>
+          )}
+        </div>
+      )}
+    </ClickAway>
+  );
+};

package/lib/components/ButtonTabs/ButtonTabs.js

@@ -29,7 +29,6 @@ const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref
   let wrappedNodes = [];
   if (typeof wrapAfter === 'number' && wrapAfter > -1) {
     unwrappedNodes = childrenArray.slice(0, wrapAfter);
-    // @ts-ignore - TS2322 - Type '(string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>)[]' is not assignable to type 'never[]'.
     wrappedNodes = childrenArray.slice(wrapAfter);
     if (wrappedNodes.length) {
       unwrappedNodes.push(/*#__PURE__*/React.createElement(_ButtonTabDropdown.ButtonTabDropdown, {
@@ -44,7 +43,6 @@ const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref
   }
   const childrenWithProps = unwrappedNodes.map((child, index) => {
     if (/*#__PURE__*/React.isValidElement(child)) {
-      // @ts-ignore - TS2339 - Property 'disabled' does not exist on type 'unknown'. | TS2339 - Property 'classNames' does not exist on type 'unknown'.
       const {
         disabled: disabledChild,
         classNames: classNamesChild
@@ -52,7 +50,6 @@ const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref
       const isFirst = index === 0;
       const isLast = index === unwrappedNodes.length - 1;
       return /*#__PURE__*/React.cloneElement(child, {
-        // @ts-ignore - TS2698 - Spread types may only be created from object types.
         ...child.props,
         isFluid,
         size,

package/lib/components/ButtonTabs/ButtonTabs.js.flow

@@ -0,0 +1,121 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import type {AnchorType} from '../ButtonDropdown';
+import type {ElevationType} from '../Tooltip';
+
+import {ButtonTabDropdown} from './ButtonTabDropdown';
+
+import css from './ButtonTabs.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  buttonTabDropdownWrapper?: string,
+}>;
+
+export type ButtonTabsProps = {
+  classNames?: ClassNames,
+  children: React.Node,
+  isFluid?: boolean,
+  size?: 'medium' | 'small',
+  disabled?: boolean,
+  selectedButtonTabId?: string,
+  onButtonTabSelect?: ?(id: string, e?: ?SyntheticEvent<HTMLElement>) => mixed,
+  wrapAfter?: number,
+  elevation?: ElevationType,
+  wrapTabTitle?: string,
+  anchorPosition?: AnchorType,
+};
+
+export const ButtonTabs: React$AbstractComponent<
+  ButtonTabsProps,
+  HTMLDivElement,
+> = React.forwardRef<ButtonTabsProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      children,
+      isFluid,
+      size = 'medium',
+      disabled,
+      selectedButtonTabId,
+      onButtonTabSelect,
+      wrapAfter,
+      elevation = 'modal',
+      wrapTabTitle = 'more',
+      anchorPosition,
+    }: ButtonTabsProps,
+    ref,
+  ): React.Node => {
+    const childrenArray = React.Children.toArray(children);
+
+    let unwrappedNodes = childrenArray;
+    let wrappedNodes = [];
+
+    if (typeof wrapAfter === 'number' && wrapAfter > -1) {
+      unwrappedNodes = childrenArray.slice(0, wrapAfter);
+      wrappedNodes = childrenArray.slice(wrapAfter);
+
+      if (wrappedNodes.length) {
+        unwrappedNodes.push(
+          <ButtonTabDropdown
+            id="more-tab"
+            title={wrapTabTitle}
+            iconName="ellipsis-vertical"
+            elevation={elevation}
+            anchorPosition={anchorPosition}
+            dropdownClass={classNames?.buttonTabDropdownWrapper}
+          >
+            {wrappedNodes}
+          </ButtonTabDropdown>,
+        );
+      }
+    }
+
+    const childrenWithProps = unwrappedNodes.map((child, index) => {
+      if (React.isValidElement(child)) {
+        const {disabled: disabledChild, classNames: classNamesChild} =
+          child.props;
+        const isFirst = index === 0;
+        const isLast = index === unwrappedNodes.length - 1;
+
+        return React.cloneElement(child, {
+          ...child.props,
+          isFluid,
+          size,
+          isLeftCurved: isFirst,
+          isRightCurved: isLast,
+          disabled: disabledChild || disabled,
+          selectedButtonTabId,
+          onButtonTabSelect,
+          classNames: {
+            wrapper: classNamesChild?.wrapper,
+          },
+        });
+      }
+      return child;
+    });
+
+    return (
+      <div
+        data-testid="ButtonTabs"
+        ref={ref}
+        className={classify(
+          css.buttonTabsWrapper,
+          {
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.isFluid]: isFluid,
+            [css.disabled]: disabled,
+          },
+          classNames?.wrapper,
+        )}
+      >
+        {childrenWithProps}
+      </div>
+    );
+  },
+);

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

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

package/lib/components/Card/Card.js

@@ -20,7 +20,6 @@ const PADDING_SIZES = exports.PADDING_SIZES = Object.freeze({
 });
 const getPaddingValue = size => {
   const spaceKey = 'space' + (0, _string.capitalize)(size);
-  // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/diwaker/SpacedOut/ui-design-system/src/styles/variables/_space")'.
   return SPACES[spaceKey] || SPACES['spaceNone'];
 };
 const CardHeader = _ref => {
@@ -108,11 +107,9 @@ const ClickableCard = exports.ClickableCard = /*#__PURE__*/React.forwardRef((_re
     ...props
   } = _ref7;
   const componentRef = React.useRef(null);
-  // @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLDivElement'.
   React.useImperativeHandle(ref, () => componentRef.current);
   React.useEffect(() => {
     if (disabled) {
-      // @ts-ignore - TS2339 - Property 'blur' does not exist on type 'never'.
       componentRef.current?.blur();
     }
   }, [disabled]);
@@ -131,9 +128,7 @@ const ClickableCard = exports.ClickableCard = /*#__PURE__*/React.forwardRef((_re
       wrapper: (0, _classify.default)(_CardModule.default.clickableCard, {
         [_CardModule.default.disabled]: disabled
       }, classNames?.wrapper)
-    }
-    // @ts-ignore - TS2322 - Type '{ classNames: { wrapper: string; }; tabIndex: number; onClick: (e: any) => void; onKeyDown: (e: any) => void; ref: ForwardedRef<HTMLDivElement>; children: React.ReactNode; paddingTop?: string | undefined; paddingRight?: string | undefined; paddingBottom?: string | undefined; paddingLeft?: string | undefined; }' is not assignable to type 'IntrinsicAttributes & CardProps & RefAttributes<HTMLDivElement>'.
-    ,
+    },
     tabIndex: disabled ? -1 : 0,
     onClick: onClickHandler,
     onKeyDown: onKeyDownHandler,

package/lib/components/Card/Card.js.flow

@@ -0,0 +1,174 @@
+// @flow strict
+
+import * as React from 'react';
+
+import * as SPACES from '../../styles/variables/_space';
+import classify from '../../utils/classify';
+import {capitalize} from '../../utils/string';
+
+import css from './Card.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const PADDING_SIZES = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  none: 'none',
+});
+
+export type PaddingSizeType = $Values<typeof PADDING_SIZES>;
+
+export type CardProps = {
+  classNames?: ClassNames,
+  children: React.Node,
+  paddingTop?: PaddingSizeType,
+  paddingRight?: PaddingSizeType,
+  paddingBottom?: PaddingSizeType,
+  paddingLeft?: PaddingSizeType,
+  ...
+};
+
+export type CardChildProps = {
+  className?: string,
+  children: React.Node,
+  ...
+};
+
+export type ClickableCardProps = {
+  ...CardProps,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  disabled?: boolean,
+  ...
+};
+
+const getPaddingValue = (size: PaddingSizeType): string => {
+  const spaceKey = 'space' + capitalize(size);
+  return SPACES[spaceKey] || SPACES['spaceNone'];
+};
+
+export const CardHeader = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.Node => (
+  <div {...props} className={classify(css.cardHeader, className)}>
+    {children}
+  </div>
+);
+
+export const CardTitle = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.Node => (
+  <div {...props} className={classify(css.cardTitle, className)}>
+    {children}
+  </div>
+);
+
+export const CardActions = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.Node => (
+  <div {...props} className={classify(css.cardActions, className)}>
+    {children}
+  </div>
+);
+
+export const CardFooter = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.Node => (
+  <div {...props} className={classify(css.cardFooter, className)}>
+    {children}
+  </div>
+);
+
+export const CardContent = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.Node => (
+  <div {...props} className={classify(css.cardContent, className)}>
+    {children}
+  </div>
+);
+
+export const Card: React$AbstractComponent<CardProps, HTMLDivElement> =
+  React.forwardRef<CardProps, HTMLDivElement>(
+    (
+      {
+        children,
+        classNames,
+        paddingTop = 'medium',
+        paddingRight = 'medium',
+        paddingBottom = 'medium',
+        paddingLeft = 'medium',
+        ...props
+      }: CardProps,
+      ref,
+    ): React.Node => (
+      <div
+        {...props}
+        style={{
+          '--card-padding-top': getPaddingValue(paddingTop),
+          '--card-padding-right': getPaddingValue(paddingRight),
+          '--card-padding-bottom': getPaddingValue(paddingBottom),
+          '--card-padding-left': getPaddingValue(paddingLeft),
+        }}
+        data-testid="Card"
+        className={classify(css.cardWrapper, classNames?.wrapper)}
+        ref={ref}
+      >
+        {children}
+      </div>
+    ),
+  );
+
+export const ClickableCard: React$AbstractComponent<
+  ClickableCardProps,
+  HTMLDivElement,
+> = React.forwardRef<ClickableCardProps, HTMLDivElement>(
+  (
+    {classNames, onClick, disabled = false, ...props}: ClickableCardProps,
+    ref,
+  ): React.Node => {
+    const componentRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => componentRef.current);
+    React.useEffect(() => {
+      if (disabled) {
+        componentRef.current?.blur();
+      }
+    }, [disabled]);
+    const onClickHandler = (e) => {
+      if (!disabled) {
+        onClick && onClick(e);
+      }
+    };
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        onClickHandler(e);
+      }
+    };
+    return (
+      <Card
+        {...props}
+        classNames={{
+          wrapper: classify(
+            css.clickableCard,
+            {[css.disabled]: disabled},
+            classNames?.wrapper,
+          ),
+        }}
+        tabIndex={disabled ? -1 : 0}
+        onClick={onClickHandler}
+        onKeyDown={onKeyDownHandler}
+        ref={ref}
+      />
+    );
+  },
+);

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

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

package/lib/components/Charts/ChartTooltip/index.js.flow

@@ -0,0 +1,15 @@
+// @flow strict
+
+import type {Tooltip} from '../../../types/charts';
+
+import typographyCss from '../../../styles/typography.module.css';
+import css from './ChartTooltip.module.css';
+
+
+export const tooltipTheme: Tooltip = {
+  headerFormat: `<span class="${typographyCss.bodySmall} ${css.tooltipHeader}">{point.key}</span>`,
+  pointFormat: `<span class=${css.tooltipPoint}>
+      <span style="background-color:{point.color};" class=${css.indicatorCircle}></span>
+      <span class="${css.tooltipContent} ${typographyCss.bodyMedium}"> {series.name}: {point.y}</span>
+    </span>`,
+};

package/lib/components/Charts/ChartWrapper/ChartWrapper.js

@@ -17,6 +17,10 @@ var _CircularLoader = require("../../CircularLoader");
 var _ChartWrapperModule = _interopRequireDefault(require("./ChartWrapper.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); }
+//$FlowFixMe[untyped-import]
+//$FlowFixMe[untyped-import]
+//$FlowFixMe[untyped-import]
+//$FlowFixMe[untyped-import]
 const EXPORT_OPTIONS = exports.EXPORT_OPTIONS = Object.freeze({
   download_as_png: {
     key: 'download_as_png',
@@ -41,9 +45,7 @@ const EXPORT_OPTIONS = exports.EXPORT_OPTIONS = Object.freeze({
 });
 
 // on assumption that all export options will be shown by default
-const DEFAULT_EXPORT_OPTIONS = Object.keys(EXPORT_OPTIONS).map(
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ download_as_png: { key: string; label: string; format: string; }; download_as_jpeg: { key: string; label: string; format: string; }; download_as_pdf: { key: string; label: string; format: string; }; download_as_svg: { ...; }; }>'.
-exportKey => EXPORT_OPTIONS[exportKey]);
+const DEFAULT_EXPORT_OPTIONS = Object.keys(EXPORT_OPTIONS).map(exportKey => EXPORT_OPTIONS[exportKey]);
 const CustomExportButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     customExportOptions = null
@@ -65,9 +67,9 @@ const CustomExportButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const handleDownload = exportKey => {
     const exportOptionObject = exportOptions.find(exportOption => exportOption.key === exportKey);
     const exportFormat = exportOptionObject?.format || '';
-    // @ts-ignore - TS2531 - Object is possibly 'null'. | TS2339 - Property 'current' does not exist on type '((instance: HTMLDivElement | null) => void) | MutableRefObject<HTMLDivElement | null>'.
     if (ref.current) {
-      // @ts-ignore - TS2531 - Object is possibly 'null'. | TS2339 - Property 'current' does not exist on type '((instance: HTMLDivElement | null) => void) | MutableRefObject<HTMLDivElement | null>'.
+      // $FlowFixMe[prop-missing]
+      // $FlowFixMe[incompatible-use]
       ref.current.chart?.exportChart({
         type: exportFormat
       });