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

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.js.flow

@@ -1,152 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-import {
-  // $FlowFixMe[untyped-import]
-  FloatingFocusManager,
-  // $FlowFixMe[untyped-import]
-  useFloating,
-  // $FlowFixMe[untyped-import]
-  useInteractions,
-  // $FlowFixMe[untyped-import]
-  useListNavigation,
-} from '@floating-ui/react';
-
-import classify from '../../utils/classify';
-import type {FocusManagerProps} from '../FocusManager';
-
-import css from './FocusManagerWithArrowKeyNavigation.module.css';
-
-
-const SKIP_ELEMENT_DISPLAY_NAME = 'SkipElementFromNavigation';
-
-export type SkipElementFromNavigationProps = {
-  children: React.Node,
-  className?: string,
-  ...
-};
-
-export const SkipElementFromNavigation: React$AbstractComponent<
-  SkipElementFromNavigationProps,
-  HTMLDivElement,
-> = React.forwardRef<SkipElementFromNavigationProps, HTMLDivElement>(
-  (
-    {children, className, ...restProps}: SkipElementFromNavigationProps,
-    ref,
-  ) => (
-    <div {...restProps} className={className} tabIndex={-1} ref={ref}>
-      {children}
-    </div>
-  ),
-);
-
-SkipElementFromNavigation.displayName = SKIP_ELEMENT_DISPLAY_NAME;
-
-export type FocusManagerWithArrowKeyNavigationProps = {
-  ...FocusManagerProps,
-  cols?: number,
-  orientation?: 'horizontal' | 'vertical',
-  focusItemOnOpen?: 'auto' | boolean,
-  loop?: boolean,
-  listReference?: {current: Array<HTMLElement>},
-};
-
-export const FocusManagerWithArrowKeyNavigation = (
-  props: FocusManagerWithArrowKeyNavigationProps,
-): React.Node => {
-  const {
-    classNames,
-    children,
-    initialFocus = -1,
-    orientation = 'vertical',
-    modal = false,
-    cols = 1,
-    focusItemOnOpen = 'auto',
-    loop = false,
-    listReference,
-    ...restFloatingFocusManagerProps
-  } = props;
-
-  const {refs, context} = useFloating({open: true});
-  const [activeIndex, setActiveIndex] = React.useState(null);
-  const listRef = React.useRef([]);
-  const childrenArray = React.Children.toArray(children).filter(Boolean);
-
-  // Note(Nishant): This is to correctly call the onClick handler which could have been on child
-  // we also need to set the active index correctly on click for list navigation to work
-  const childOnClickPassthrough = (childOnClickHandler, index, ...args) => {
-    if (childOnClickHandler) {
-      childOnClickHandler(...args);
-    }
-    setActiveIndex(index);
-  };
-
-  // Add childOnClickPassthrough for the list of references passed in case of custom nodes passed
-  if (listReference) {
-    listReference.current.map((element, index) => {
-      const childClickHandler = element.onclick;
-      element.onclick = (...args) => {
-        childOnClickPassthrough(childClickHandler, index, ...args);
-      };
-    });
-  }
-  // Note(Nishant): Force the list navigation props onto the children
-  // while using this component make sure your all the passed children have a focus state
-
-  let skippedChildrenCount = 0;
-
-  const clonedChildren = listReference
-    ? children
-    : childrenArray.map((child, index) => {
-      const {onClick: childClickHandler} = child.props;
-
-      let adjustedIndex = index - skippedChildrenCount;
-
-      if (child?.type?.displayName === SKIP_ELEMENT_DISPLAY_NAME) {
-        skippedChildrenCount++;
-        adjustedIndex = null;
-      }
-
-      return React.cloneElement(child, {
-        ...child.props,
-        tabIndex: activeIndex === index ? 0 : -1,
-        ref: (node) => {
-          if (adjustedIndex !== null) {
-            listRef.current[adjustedIndex] = node;
-          }
-        },
-        onClick: (...args) => {
-          childOnClickPassthrough(childClickHandler, adjustedIndex, ...args);
-        },
-      });
-    });
-
-  const listNavigation = useListNavigation(context, {
-    orientation,
-    cols,
-    listRef: listReference ? listReference : listRef,
-    activeIndex,
-    onNavigate: setActiveIndex,
-    focusItemOnOpen,
-    loop,
-  });
-  const {getFloatingProps} = useInteractions([listNavigation]);
-
-  return (
-    <FloatingFocusManager
-      context={context}
-      modal={modal}
-      initialFocus={initialFocus}
-      {...restFloatingFocusManagerProps}
-    >
-      <div
-        ref={refs.setFloating}
-        data-testid="FocusManagerWithArrowKeyNavigation"
-        {...getFloatingProps()}
-        className={classify(css.wrapper, classNames?.wrapper)}
-      >
-        {clonedChildren}
-      </div>
-    </FloatingFocusManager>
-  );
-};

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

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

package/lib/components/FormTitleWrapper/FormTitleWrapper.js.flow

@@ -1,68 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import type {ColorTypes} from '../../types/typography';
-import classify from '../../utils/classify';
-import type {IconSize, IconType} from '../Icon';
-import {Icon} from '../Icon';
-
-import css from './FormTitleWrapper.module.css';
-
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  title?: string,
-  rightSlot?: string,
-}>;
-
-export type FormTitleWrapperProps = {
-  classNames?: ClassNames,
-  iconType?: IconType,
-  iconName?: string,
-  iconSize?: IconSize,
-  iconColor?: ColorTypes,
-  title: React.Node, // Should always atleast have a title
-  rightSlot?: React.Node,
-};
-
-export const FormTitleWrapper: React$AbstractComponent<
-  FormTitleWrapperProps,
-  HTMLDivElement,
-> = React.forwardRef<FormTitleWrapperProps, HTMLDivElement>(
-  (
-    {
-      classNames,
-      iconType,
-      iconName,
-      iconSize = 'small',
-      iconColor,
-      title,
-      rightSlot,
-    }: FormTitleWrapperProps,
-    ref,
-  ) => (
-    <div ref={ref} data-testid="FormTitleWrapper" className={css.container}>
-      <div className={classify(css.leftSection, classNames?.wrapper)}>
-        {!!iconName && (
-          <Icon
-            type={iconType}
-            name={iconName}
-            size={iconSize}
-            color={iconColor}
-          />
-        )}
-        {/* This is to safeguard semantics as it internally composes from a subTitleSmall className
-            we don't fix the component here as <SubtitleSmall> resolves to <h4> and since title is a React.Node,
-            this would break semantics in case custom components are passed inside
-         */}
-        <div className={classify(css.componentHousing, classNames?.title)}>
-          {title}
-        </div>
-      </div>
-      <div className={classify(css.rightSection, classNames?.rightSlot)}>
-        {rightSlot}
-      </div>
-    </div>
-  ),
-);

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

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

package/lib/components/Grid/Grid.js.flow

@@ -1,110 +0,0 @@
-// @flow strict
-import * as React from 'react';
-
-import {classify} from '../../utils/classify';
-
-import css from './Grid.module.css';
-
-
-export type RowProps = {
-  className?: string,
-  children?: React.Node,
-  span?: number,
-  offset?: number,
-  gridType?: 'small' | 'medium' | 'large' | 'autoFill' | 'autoFit',
-  repeatTracks?: string,
-};
-
-const GRID_SYSTEM_MAP = {
-  small: 24,
-  medium: 12,
-  large: 6,
-  autoFill: 'auto-fill',
-  autoFit: 'auto-fit',
-};
-
-export const Row = ({
-  className,
-  children,
-  span = 1,
-  gridType = 'medium',
-  repeatTracks = '1fr',
-}: RowProps): React.Node => {
-  const gridRepeatCount = GRID_SYSTEM_MAP[gridType];
-  let columnSpanCount = 0;
-  let lastChildColCount = 0;
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      const {span = 1, offset = 0} = child.props;
-      if (span < 1) {
-        console.error(`span can not be less than one`);
-        return;
-      }
-      if (offset < 0) {
-        console.error(`offset can not be negative`);
-        return;
-      }
-      lastChildColCount = columnSpanCount;
-      columnSpanCount = lastChildColCount + offset + span;
-      let gridColumnStart = 0,
-        gridColumnEnd = 0;
-      if (gridType === 'autoFill' || gridType === 'autoFit') {
-        gridColumnStart = 'auto';
-        return React.cloneElement(child, {
-          gridColumnStart,
-          gridColumnEnd: `span ${span}`,
-        });
-      } else if (
-        typeof gridRepeatCount === 'number' &&
-        columnSpanCount <= gridRepeatCount
-      ) {
-        gridColumnStart = lastChildColCount + offset + 1;
-        return React.cloneElement(child, {
-          gridColumnStart,
-          gridColumnEnd: `span ${span}`,
-        });
-      } else {
-        console.error(`number of column exceed ${gridRepeatCount}`);
-      }
-    }
-  });
-
-  return (
-    <div
-      data-testid="Grid"
-      className={classify(css.gridRow, className)}
-      style={{
-        '--grid-repeat-count': gridRepeatCount,
-        '--repeat-tracks': repeatTracks,
-      }}
-    >
-      {childrenWithProps}
-    </div>
-  );
-};
-
-export type ColProps = {
-  className?: string,
-  children?: React.Node,
-  span?: number,
-  offset?: number,
-  gridColumnStart?: number,
-  gridColumnEnd?: number,
-};
-
-export const Col = ({
-  className,
-  children,
-  gridColumnStart,
-  gridColumnEnd,
-}: ColProps): React.Node => (
-  <div
-    className={classify(css.gridColumn, className)}
-    style={{
-      '--grid-column-start': gridColumnStart,
-      '--grid-column-end': gridColumnEnd,
-    }}
-  >
-    {children}
-  </div>
-);

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

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

package/lib/components/Icon/ClickableIcon.js.flow

@@ -1,111 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import type {ColorTypes} from '../../types/typography';
-import classify from '../../utils/classify';
-import {UnstyledButton} from '../Button';
-import {TEXT_COLORS} from '../Text';
-
-import type {IconProps, IconSize, IconType} from './';
-import {Icon} from './';
-
-import css from './ClickableIcon.module.css';
-
-
-type ClassNames = $ReadOnly<{
-  icon?: string,
-  button?: string,
-}>;
-
-export type ClickableIconProps = {
-  ...IconProps,
-  disabled?: boolean,
-  classNames?: ClassNames,
-};
-
-export const ClickableIcon: React$AbstractComponent<
-  ClickableIconProps,
-  HTMLButtonElement,
-> = React.forwardRef<ClickableIconProps, HTMLButtonElement>(
-  (
-    {
-      size = 'medium',
-      ariaLabel,
-      onClick,
-      className, // Deprecated for Clickable Icon
-      classNames,
-      disabled = false,
-      ...props
-    }: ClickableIconProps,
-    ref,
-  ) => {
-    const onKeyDownHandler = (e) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        onClick && onClick(e);
-      }
-    };
-    return (
-      <UnstyledButton
-        {...props}
-        onClick={onClick}
-        disabled={disabled}
-        onKeyDown={onKeyDownHandler}
-        ariaLabel={ariaLabel}
-        className={classify(
-          css.button,
-          {
-            [css.small]: size === 'small',
-            [css.medium]: size === 'medium',
-            [css.large]: size === 'large',
-          },
-          classNames?.button,
-        )}
-        ref={ref}
-      >
-        <Icon
-          {...props}
-          size={size}
-          color={disabled ? TEXT_COLORS.disabled : props.color}
-          className={classNames?.icon || className}
-        />
-      </UnstyledButton>
-    );
-  },
-);
-
-export type CloseIconProps = {
-  size?: IconSize,
-  type?: IconType,
-  color?: ColorTypes,
-  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  className?: string, // Deprecated for Clickable Icon
-  ariaLabel?: string,
-  disabled?: boolean,
-  classNames?: ClassNames,
-};
-
-export const CloseIcon: React$AbstractComponent<
-  CloseIconProps,
-  HTMLButtonElement,
-> = React.forwardRef<CloseIconProps, HTMLButtonElement>(
-  (
-    {
-      size = 'medium',
-      type = 'regular',
-      color = TEXT_COLORS.primary,
-      ...props
-    }: CloseIconProps,
-    ref,
-  ) => (
-    <ClickableIcon
-      name="close"
-      size={size}
-      type={type}
-      color={color}
-      {...props}
-      ref={ref}
-    />
-  ),
-);

package/lib/components/Icon/Icon.docs.js.flow

@@ -1,120 +0,0 @@
-// @flow strict
-
-import {TEXT_COLORS} from '../../types/typography';
-
-import {ICON_SIZE} from './Icon';
-
-
-const colorOptions: Array<mixed> = [...Object.values(TEXT_COLORS)];
-const iconSize: Array<mixed> = [...Object.values(ICON_SIZE)];
-
-export const ICON_DOCS = {
-  argTypes: {
-    type: {
-      description:
-        'Type represents 5 unique icon styles :- Solid, Regular, Light, Thin, Duotone',
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    name: {
-      description:
-        'Icon Name represents name of icon as supported by fontawesome',
-      type: {required: true},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'face-party'},
-      },
-    },
-    color: {
-      description: 'Same set of colors as supported in text',
-      options: colorOptions,
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'primary'},
-      },
-    },
-    size: {
-      description:
-        'Icon supports three size variants namely small and medium. `small` < `medium` < `large`',
-      options: iconSize,
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    swapOpacity: {
-      name: 'swapOpacity',
-      description: `Swap the default opacity of each layer in a duotone icon.`,
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    className: {
-      description: 'External className to be applied on container',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    onClick: {
-      description: 'onClick handler',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    disabled: {
-      description: 'If **true**, the clickable icon is disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    ariaLabel: {
-      control: {
-        type: 'text',
-      },
-      description:
-        '**aria-label** should be added where `ClickableIcon` and `CloseIcon` is used. This would avoid accessibility violations in screen readers',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Icon component',
-      description: {
-        component: `
-\`\`\`js
-import {
-  Icon,
-  ClickableIcon,
-  CloseIcon,
-  SemanticIcon
-} from "@spaced-out/ui-design-system/lib/components/Icon";
-\`\`\`
-Icon component uses <a href="https://fontawesome.com/icons" target="_blank">fontawesome</a> icon internally.
-The name prop has be to consistent with one used in fontawesome.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Icon/Icon.js',
-    },
-  },
-};

package/lib/components/Icon/Icon.js.flow

@@ -1,77 +0,0 @@
-// @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 typographyStyle from '../../styles/typography.module.css';
-
-
-export const ICON_TYPE = Object.freeze({
-  regular: 'regular',
-  solid: 'solid',
-  duotone: 'duotone',
-  brands: 'brands',
-});
-
-export const ICON_SIZE = Object.freeze({
-  small: 'small',
-  medium: 'medium',
-  large: 'large',
-});
-
-export type IconSize = $Keys<typeof ICON_SIZE>;
-export type IconType = $Keys<typeof ICON_TYPE>;
-
-export type IconProps = {
-  type?: IconType,
-  name: string,
-  size?: IconSize,
-  color?: ColorTypes,
-  className?: string,
-  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  ariaLabel?: string,
-  swapOpacity?: boolean,
-  style?: {[string]: string},
-};
-
-export const Icon: React$AbstractComponent<IconProps, HTMLDivElement> =
-  React.forwardRef<IconProps, HTMLDivElement>(
-    (
-      {
-        type = 'regular',
-        name = '',
-        size = 'medium',
-        color = TEXT_COLORS.primary,
-        className,
-        style,
-        onClick,
-        swapOpacity,
-      }: IconProps,
-      forwardRef,
-    ) => (
-      <>
-        {!!name && (
-          <div
-            className={classify(
-              typographyStyle.centerAlignFlex,
-              typographyStyle[`${size}Icon`],
-              typographyStyle[color],
-              className,
-            )}
-            onClick={onClick}
-            ref={forwardRef}
-          >
-            <i
-              className={classify(`fa-${type} fa-${name} `, {
-                ['fa-swap-opacity']: swapOpacity,
-              })}
-              style={style}
-            />
-          </div>
-        )}
-      </>
-    ),
-  );

package/lib/components/Icon/SemanticIcon.js.flow

@@ -1,48 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import type {AlertSemanticType} from '../../types/common';
-import {TEXT_COLORS} from '../../types/typography';
-import classify from '../../utils/classify';
-
-import type {IconProps} from './Icon';
-import {Icon} from './Icon';
-
-import css from './SemanticIcon.module.css';
-
-
-type ClassNames = $ReadOnly<{wrapper?: string, icon?: string}>;
-
-export type SemanticIconProps = {
-  ...IconProps,
-  classNames?: ClassNames,
-  semantic?: AlertSemanticType,
-};
-
-export const SemanticIcon = ({
-  semantic = 'neutral',
-  classNames,
-  size = 'medium',
-  ...iconProps
-}: SemanticIconProps): React.Node => (
-  <>
-    {!!iconProps.name && (
-      <div
-        className={classify(
-          css.iconContainer,
-          css[semantic],
-          css[size],
-          classNames?.wrapper,
-        )}
-      >
-        <Icon
-          {...iconProps}
-          className={classify(iconProps.className, classNames?.icon)}
-          color={TEXT_COLORS[semantic]}
-          size={size === 'large' ? 'medium' : size}
-        />
-      </div>
-    )}
-  </>
-);

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

@@ -1,5 +0,0 @@
-// @flow strict
-
-export * from './ClickableIcon';
-export * from './Icon';
-export * from './SemanticIcon';