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

package/lib/components/StickyBar/StickyBar.js.flow

@@ -1,67 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-
-import css from './StickyBar.module.css';
-
-
-export type StickyBarProps = {
-  className?: string,
-  children: React.Node,
-  position?: 'top' | 'bottom',
-  ...
-};
-
-export type StickyBarChildProps = {
-  className?: string,
-  children: React.Node,
-  ...
-};
-
-export const StickyBarLeftSlot = ({
-  className,
-  children,
-  ...props
-}: StickyBarChildProps): React.Node => (
-  <div {...props} className={classify(css.leftSlot, className)}>
-    {children}
-  </div>
-);
-
-export const StickyBarRightSlot = ({
-  className,
-  children,
-  ...props
-}: StickyBarChildProps): React.Node => (
-  <div {...props} className={classify(css.rightSlot, className)}>
-    {children}
-  </div>
-);
-
-export const StickyBar: React$AbstractComponent<
-  StickyBarProps,
-  HTMLDivElement,
-> = React.forwardRef<StickyBarProps, HTMLDivElement>(
-  (
-    {className, children, position = 'bottom', ...props}: StickyBarProps,
-    ref,
-  ) => (
-    <div
-      {...props}
-      ref={ref}
-      data-testid="StickyBar"
-      className={classify(
-        css.wrapper,
-        {
-          [css.top]: position === 'top',
-          [css.bottom]: position === 'bottom',
-        },
-        className,
-      )}
-    >
-      {children}
-    </div>
-  ),
-);

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

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

package/lib/components/SubMenu/SubMenu.js.flow

@@ -1,96 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import {Button} from '../Button';
-import type {IconSize, IconType} from '../Icon';
-import {Icon} from '../Icon';
-import {SubTitleMedium, TEXT_COLORS} from '../Text';
-
-import css from './SubMenu.module.css';
-
-
-type ClassNames = $ReadOnly<{wrapper?: string}>;
-
-export type SubMenuProps = {
-  classNames?: ClassNames,
-  title: string,
-  titleIcon?: string,
-  titleIconSize?: IconSize,
-  titleIconType?: IconType,
-  children?: React.Node,
-  onClose?: () => mixed,
-  showClose?: boolean,
-};
-
-export const SubMenu: React$AbstractComponent<SubMenuProps, HTMLDivElement> =
-  React.forwardRef<SubMenuProps, HTMLDivElement>(
-    (
-      {
-        classNames,
-        children,
-        title,
-        titleIcon,
-        titleIconSize,
-        titleIconType,
-        onClose,
-        showClose = false,
-      }: SubMenuProps,
-      ref,
-    ): React.Node => {
-      const childrenWithProps = React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-          return (
-            <div className={css.menuChildWrap}>
-              {React.cloneElement(child, {})}
-            </div>
-          );
-        }
-      });
-
-      return (
-        <div
-          className={classify(css.subMenuWrapper, classNames?.wrapper)}
-          ref={ref}
-        >
-          <div className={css.subMenuTitleAndButton}>
-            <div className={css.subMenuTitleWrapper}>
-              {!!titleIcon && (
-                <Icon
-                  color={TEXT_COLORS.inverseSecondary}
-                  name={titleIcon}
-                  type={titleIconType}
-                  size={titleIconSize}
-                  className={css.titleIcon}
-                />
-              )}
-              <SubTitleMedium
-                className={css.subMenuHeader}
-                color={TEXT_COLORS.inversePrimary}
-              >
-                {title}
-              </SubTitleMedium>
-            </div>
-            {showClose && (
-              <Button
-                ariaLabel="Icon Button"
-                iconRightName="close"
-                onClick={onClose}
-                size="small"
-                type="ghost"
-                actionType="button"
-                classNames={{
-                  wrapper: css.subMenuCloseButton,
-                  icon: css.subMenuCloseIcon,
-                }}
-              />
-            )}
-          </div>
-          {childrenWithProps}
-        </div>
-      );
-    },
-  );
-
-SubMenu.displayName = 'SubMenu';

package/lib/components/SubMenu/SubMenuGroup.js.flow

@@ -1,156 +0,0 @@
-//@flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import {FocusManagerWithArrowKeyNavigation} from '../FocusManagerWithArrowKeyNavigation';
-import type {IconSize, IconType} from '../Icon';
-import {Icon} from '../Icon';
-import type {StatusSemanticType} from '../StatusIndicator';
-import {StatusIndicator} from '../StatusIndicator';
-import {ButtonTextMedium, TEXT_COLORS} from '../Text';
-
-import css from './SubMenu.module.css';
-
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  groupHeader?: string,
-  menuGroup?: string,
-}>;
-
-export type SubMenuGroupProps = {
-  children?: React.Node,
-  groupTitle?: string,
-  groupIcon?: string,
-  groupIconSize?: IconSize,
-  groupIconType?: IconType,
-  collapsible?: boolean,
-  disabled?: boolean,
-  onChange?: (value: string) => mixed,
-  selectedMenuKey?: string,
-  status?: StatusSemanticType,
-  classNames?: ClassNames,
-};
-
-export const SubMenuGroup = ({
-  children,
-  groupTitle,
-  groupIcon,
-  groupIconSize,
-  groupIconType,
-  collapsible = false,
-  disabled = false,
-  onChange,
-  selectedMenuKey,
-  status,
-  classNames,
-}: SubMenuGroupProps): React.Node => {
-  const isSubMenuGroupChildSelected = React.Children.toArray(children).some(
-    (child) => child.props.menuKey === selectedMenuKey,
-  );
-
-  const [collapsed, setCollapsed] = React.useState(
-    !isSubMenuGroupChildSelected,
-  );
-
-  const collapseHandler = () => {
-    collapsible && setCollapsed(!collapsed);
-  };
-  const onMenuItemChangeHandler = (value) => {
-    onChange && onChange(value);
-  };
-  const onKeyDownHandlerHeader = (e) => {
-    if (e.key === 'Enter') {
-      collapseHandler();
-    }
-  };
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      const {disabled: disabledChild} = child.props;
-      return React.cloneElement(child, {
-        selectedMenuKey,
-        onChange: onMenuItemChangeHandler,
-        disabled: disabledChild || disabled,
-      });
-    }
-    return child;
-  });
-
-  React.useEffect(() => {
-    setCollapsed(!isSubMenuGroupChildSelected);
-  }, [selectedMenuKey]);
-
-  return (
-    <div className={classify(css.subMenuGroupWrapper, classNames?.wrapper)}>
-      <div
-        className={classify(
-          css.subMenuGroupHeader,
-          {[css.collapsible]: collapsible},
-          {[css.highlightedMenu]: isSubMenuGroupChildSelected},
-          {[css.collapsed]: !collapsed},
-          classNames?.groupHeader,
-        )}
-        onClick={collapseHandler}
-        onKeyDown={onKeyDownHandlerHeader}
-        tabIndex={disabled ? '-1' : 0}
-      >
-        <div className={css.groupTitleWrapper}>
-          {(!!groupIcon || !!status) && (
-            <div className={css.groupIconWrapper}>
-              {!!groupIcon && (
-                <Icon
-                  color={TEXT_COLORS.inverseSecondary}
-                  name={groupIcon}
-                  type={groupIconType}
-                  size={groupIconSize}
-                  className={css.groupIcon}
-                />
-              )}
-              {!!status && collapsed && (
-                <div className={classify(css.statusIndicatorWrapper)}>
-                  <StatusIndicator
-                    status={status}
-                    className={css.statusIndicatorWrapper}
-                  />
-                </div>
-              )}
-            </div>
-          )}
-          <ButtonTextMedium
-            color={TEXT_COLORS.inverseSecondary}
-            className={css.groupTitle}
-          >
-            {groupTitle}
-          </ButtonTextMedium>
-        </div>
-        {collapsible && (
-          <Icon
-            color={TEXT_COLORS.inverseSecondary}
-            name={collapsed ? 'chevron-down' : 'chevron-up'}
-            size="small"
-          />
-        )}
-      </div>
-      <div
-        className={classify(
-          css.subMenuGroup,
-          {
-            [css.collapsed]: collapsible && collapsed,
-          },
-          classNames?.menuGroup,
-        )}
-      >
-        <FocusManagerWithArrowKeyNavigation
-          classNames={{
-            wrapper: classify(css.subMenuFocusWrapper),
-          }}
-          focusItemOnOpen={true}
-          loop={true}
-        >
-          {childrenWithProps}
-        </FocusManagerWithArrowKeyNavigation>
-      </div>
-    </div>
-  );
-};

package/lib/components/SubMenu/SubMenuItem.js.flow

@@ -1,170 +0,0 @@
-//@flow strict
-
-import * as React from 'react';
-
-import type {ColorTypes} from '../../types/typography';
-import classify from '../../utils/classify';
-import type {IconProps} from '../Icon';
-import {Icon} from '../Icon';
-import type {TextProps} from '../Text';
-import {ButtonTextMedium, TEXT_COLORS} from '../Text';
-import {Truncate} from '../Truncate';
-
-import css from './SubMenu.module.css';
-
-
-export const SubMenuItemIcon = ({
-  className,
-  ...props
-}: IconProps): React.Node => (
-  <Icon
-    {...props}
-    size="small"
-    color={TEXT_COLORS.inverseSecondary}
-    className={classify(css.menuIcon, className)}
-  />
-);
-
-SubMenuItemIcon.displayName = 'SubMenuItemIcon';
-
-export const SubMenuItemText = ({
-  children,
-  className,
-  ...props
-}: TextProps): React.Node => (
-  <ButtonTextMedium
-    {...props}
-    className={classify(css.subMenuItemText, className)}
-    color={TEXT_COLORS.inversePrimary}
-  >
-    <Truncate showFullTextOnHover={true}>{children}</Truncate>
-  </ButtonTextMedium>
-);
-SubMenuItemText.displayName = 'SubMenuItemText';
-
-export type SubMenuItemBadgesProps = {
-  children?: React.Node,
-  className?: string,
-  ...
-};
-export const SubMenuItemBadges = ({
-  children,
-  className,
-  ...props
-}: SubMenuItemBadgesProps): React.Node => (
-  <div {...props} className={classify(css.subMenuItemBadges, className)}>
-    {children}
-  </div>
-);
-SubMenuItemBadges.displayName = 'SubMenuItemBadges';
-
-export type SubMenuItemActionProps = {
-  isMenuItemSelected?: boolean,
-  children?: React.Node,
-  color?: ColorTypes,
-  className?: string,
-  ...
-};
-export const SubMenuItemAction: React$AbstractComponent<
-  SubMenuItemActionProps,
-  HTMLElement,
-> = React.forwardRef(
-  (
-    {children, className, ...props}: SubMenuItemActionProps,
-    ref,
-  ): React.Node => (
-    <div {...props} className={classify(css.actionItems, className)} ref={ref}>
-      {children}
-    </div>
-  ),
-);
-SubMenuItemAction.displayName = 'SubMenuItemAction';
-
-type ClassNames = $ReadOnly<{wrapper?: string}>;
-
-export type SubMenuItemProps = {
-  classNames?: ClassNames,
-  children?: React.Node,
-  selectedMenuKey?: string,
-  disabled?: boolean,
-  onChange?: (selectedMenuKey: string) => mixed,
-  menuKey: string,
-  ...
-};
-
-export const SubMenuItem: React$AbstractComponent<
-  SubMenuItemProps,
-  HTMLElement,
-> = React.forwardRef(
-  (
-    {
-      children,
-      selectedMenuKey,
-      disabled,
-      classNames,
-      onChange,
-      menuKey,
-      ...props
-    }: SubMenuItemProps,
-    ref,
-  ): React.Node => {
-    const onChangeHandler = () => {
-      if (!disabled) {
-        onChange?.(menuKey);
-      }
-    };
-
-    const onKeyDownHandler = (e) => {
-      if (e.key === 'Enter') {
-        onChangeHandler();
-      }
-    };
-
-    const selected = selectedMenuKey === menuKey;
-
-    const getNamedComp = (comp: string) => {
-      const childrenArray = React.Children.toArray(children);
-      if (childrenArray.length) {
-        const nodes: React.Node[] = [];
-        for (const child of childrenArray) {
-          if (child?.type?.displayName === comp) {
-            nodes.push(
-              React.cloneElement(child, {
-                selected,
-                disabled,
-              }),
-            );
-          }
-        }
-        return nodes.length > 1 ? nodes : nodes[0];
-      }
-      return null;
-    };
-
-    return (
-      <div
-        {...props}
-        className={classify(
-          css.menuItem,
-          {
-            [css.selected]: selected,
-            [css.disabled]: disabled,
-          },
-          classNames?.wrapper,
-        )}
-        onKeyDown={onKeyDownHandler}
-        onClick={onChangeHandler}
-        tabIndex={disabled ? '-1' : 0}
-        disabled={disabled}
-        ref={ref}
-      >
-        <div className={css.menuIconName}>
-          {getNamedComp('SubMenuItemIcon')}
-          {getNamedComp('SubMenuItemText')}
-          {getNamedComp('SubMenuItemBadges')}
-        </div>
-        {getNamedComp('SubMenuItemAction')}
-      </div>
-    );
-  },
-);

package/lib/components/SubMenu/SubMenuLink.js.flow

@@ -1,89 +0,0 @@
-//@flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import type {IconSize, IconType} from '../Icon';
-import {Icon} from '../Icon';
-import {ButtonTextMedium, TEXT_COLORS} from '../Text';
-import {Truncate} from '../Truncate';
-
-import css from './SubMenu.module.css';
-
-
-export type SubMenuLinkProps = {
-  menuLinkTitle?: string,
-  menuLinkIcon: string,
-  menuLinkIconSize?: IconSize,
-  menuLinkIconType?: IconType,
-  menuKey: string,
-  selectedMenuKey?: string,
-  disabled?: boolean,
-  onChange?: (selectedMenuLinkKey: string) => mixed,
-  ...
-};
-
-export const SubMenuLink: React$AbstractComponent<
-  SubMenuLinkProps,
-  HTMLElement,
-> = React.forwardRef(
-  (
-    {
-      menuLinkTitle,
-      menuLinkIcon,
-      menuLinkIconSize = 'medium',
-      menuLinkIconType,
-      menuKey,
-      selectedMenuKey,
-      disabled = false,
-      onChange,
-    }: SubMenuLinkProps,
-    ref,
-  ): React.Node => {
-    const isMenuLinkSelected = selectedMenuKey === menuKey;
-
-    const onChangeHandler = () => {
-      if (!disabled) {
-        onChange && onChange(menuKey);
-      }
-    };
-
-    const onKeyDownHandler = (e) => {
-      if (e.key === 'Enter') {
-        onChangeHandler();
-      }
-    };
-
-    return (
-      <div className={classify(css.subMenuLinkWrapper)}>
-        <div
-          className={classify(css.subMenuLink, {
-            [css.highlightedMenu]: isMenuLinkSelected,
-          })}
-          onKeyDown={onKeyDownHandler}
-          onClick={onChangeHandler}
-          ref={ref}
-          tabIndex={disabled ? '-1' : 0}
-        >
-          <div className={css.groupTitleWrapper}>
-            {!!menuLinkIcon && (
-              <Icon
-                color={TEXT_COLORS.inverseSecondary}
-                name={menuLinkIcon}
-                size={menuLinkIconSize}
-                type={menuLinkIconType}
-                className={css.menuLinkIcon}
-              />
-            )}
-            <ButtonTextMedium
-              color={TEXT_COLORS.inverseSecondary}
-              className={css.menuLinkTitle}
-            >
-              <Truncate>{menuLinkTitle}</Truncate>
-            </ButtonTextMedium>
-          </div>
-        </div>
-      </div>
-    );
-  },
-);

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

@@ -1,6 +0,0 @@
-// @flow strict
-
-export * from './SubMenu';
-export * from './SubMenuGroup';
-export * from './SubMenuItem';
-export * from './SubMenuLink';

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

@@ -1,122 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-// $FlowIssue[nonstrict-import] date-fns
-import formatDistance from 'date-fns/formatDistance';
-// $FlowIssue[nonstrict-import] date-fns
-import parseISO from 'date-fns/parseISO';
-
-import {classify} from '../../utils/classify';
-import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
-import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
-import {Avatar} from '../Avatar';
-import {BodyMedium, BodySmall, TEXT_COLORS} from '../Text';
-
-import css from './Table.module.css';
-
-
-type CellsProps = {
-  children?: React.Node,
-  className?: ?string,
-  truncatedText?: React.Node,
-  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-};
-
-export const Cells = ({
-  children,
-  className,
-  ...rest
-}: CellsProps): React.Element<'div'> => (
-  <div className={classify(css.row, className)} {...rest}>
-    {children}
-  </div>
-);
-
-export const Cell = ({
-  children,
-  className,
-}: CellsProps): React.Element<'div'> => (
-  <div className={classify(css.cell, className)}>{children}</div>
-);
-
-export const BasicSingleCell: ClassNameComponent<'td'> = makeClassNameComponent(
-  css.defaultSingleCell,
-  'td',
-);
-export const BasicDoubleCell: ClassNameComponent<'td'> = makeClassNameComponent(
-  css.defaultDoubleCell,
-  'td',
-);
-
-export const PaddedContentCell: ClassNameComponent<'td'> =
-  makeClassNameComponent(css.singleContentCell, 'td');
-
-export const PaddedDoubleContentCell: ClassNameComponent<'td'> =
-  makeClassNameComponent(css.doubleContentCell, 'td');
-
-export const SingleCell = ({
-  title,
-  className,
-}: {
-  title: string,
-  icon?: React.Node,
-  className?: string,
-}): React.Node => (
-  <PaddedContentCell className={className}>
-    <BodyMedium className={css.paddedTitleBlock}>{title}</BodyMedium>
-  </PaddedContentCell>
-);
-
-export const DoubleCell = ({
-  title,
-  subtitle,
-  className,
-}: {
-  title: React.Node,
-  subtitle?: React.Node,
-  className?: string,
-}): React.Node => (
-  <PaddedDoubleContentCell className={className}>
-    <div className={css.paddedTitleBlock}>
-      <BodyMedium className={css.doubleTitle}>{title}</BodyMedium>
-      <BodySmall color={TEXT_COLORS.tertiary} className={css.doubleSubtitle}>
-        {subtitle ?? ''}
-      </BodySmall>
-    </div>
-  </PaddedDoubleContentCell>
-);
-
-export const DateCell = ({
-  date,
-  className,
-}: {
-  date: string | Date,
-  className?: string,
-}): React.Node => {
-  const parsedDate: Date = typeof date === 'object' ? date : parseISO(date);
-  return (
-    <DoubleCell
-      title={`${parsedDate.getMonth() + 1} / ${
-        parsedDate.getDate() + 1
-      } / ${parsedDate.getFullYear()}`}
-      subtitle={`${formatDistance(parsedDate, new Date())} ago`}
-      className={className}
-    />
-  );
-};
-
-export const Monogram = ({initials}: {initials: string}): React.Node => (
-  <Avatar size="small" text={initials} />
-);
-
-export const MonogramCell = ({
-  initials,
-  className,
-}: {
-  initials: string,
-  className?: string,
-}): React.Node => (
-  <PaddedContentCell className={className}>
-    <Monogram initials={initials} />
-  </PaddedContentCell>
-);