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

package/lib/components/Checkbox/Checkbox.tsx

@@ -1,168 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import type {GroupAlign} from '../../types/common';
-import classify from '../../utils/classify';
-import {Icon} from '../Icon';
-
-import css from './Checkbox.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  checkboxSquare?: string;
-  label?: string;
-}>;
-
-/*
-  Note: An indeterminate state has a higher priority.
-  If true checkbox would be in an indeterminate state. If indeterminate is false, it will owner checked value.
-*/
-
-export type CheckboxProps = {
-  name?: string;
-  value?: string;
-  children?: React.ReactNode;
-  checked?: boolean;
-  indeterminate?: boolean;
-  focused?: boolean;
-  disabled?: boolean;
-  error?: boolean;
-  onChange?: (
-    arg1: {
-      value: string;
-      checked: boolean;
-    },
-    arg2?: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  align?: GroupAlign;
-  classNames?: ClassNames;
-  tabIndex?: number;
-  ariaLabel?: string;
-};
-
-export const Checkbox: Flow.AbstractComponent<CheckboxProps, HTMLInputElement> = React.forwardRef<HTMLInputElement, CheckboxProps>((
-  {
-    name = 'checkbox',
-    value = '',
-    children,
-    checked = false,
-    indeterminate = false,
-    focused = false,
-    disabled = false,
-    error = false,
-    onChange,
-    align,
-    classNames,
-    tabIndex = 0,
-    ariaLabel = '',
-  }: CheckboxProps,
-  forwardRef,
-) => {
-  const checkboxInput = React.createRef<HTMLInputElement>();
-// @ts-ignore - TS2322 - Type 'HTMLInputElement | null' is not assignable to type 'HTMLInputElement'.
-  React.useImperativeHandle(forwardRef, () => checkboxInput.current);
-
-  const handleOnClick = (event: any) => {
-    if (!disabled) {
-      onChange &&
-        onChange(
-          {
-            value,
-            checked: !checked,
-          },
-          event,
-        );
-    }
-  };
-
-  React.useEffect(() => {
-    if (checkboxInput.current && focused) {
-      checkboxInput.current.focus();
-    }
-  }, [focused]);
-
-  React.useEffect(() => {
-    if (checkboxInput.current && indeterminate) {
-      checkboxInput.current.indeterminate = true;
-    }
-    if (checkboxInput.current && !indeterminate) {
-      checkboxInput.current.indeterminate = false;
-    }
-  }, [indeterminate]);
-
-  return (
-    <div
-      data-testid="checkbox"
-      className={classify(
-        css.checkboxContainer,
-        {
-          [css.disabled]: disabled,
-          [css.horizontalCheckbox]: align === 'horizontal-fixed',
-          [css.fluidCheckbox]: align === 'horizontal-fluid',
-        },
-        classNames?.wrapper,
-      )}
-      onClick={handleOnClick}
-    >
-      <span
-        className={classify(
-          css.checkboxSquare,
-          {
-            [css.disabled]: disabled,
-          },
-          classNames?.checkboxSquare,
-        )}
-      >
-{ /* @ts-ignore - TS2322 - Type '{ tabIndex: number; type: "checkbox"; checked: boolean; readOnly: true; ref: RefObject<HTMLInputElement | null>; className: string; disabled: boolean; name: string; "aria-label": React.ReactNode; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'. */}
-        <input
-          tabIndex={disabled ? -1 : tabIndex}
-          type="checkbox"
-          checked={checked}
-          readOnly
-          ref={checkboxInput}
-          className={classify(css.inputCheckbox)}
-          disabled={disabled}
-          name={name}
-          aria-label={ariaLabel || children}
-        />
-        <span
-          className={classify(css.checkboxSquareInner, {
-            [css.enabled]: !disabled && !error,
-            [css.disabled]: disabled,
-            [css.error]: error && !disabled,
-          })}
-        >
-          {indeterminate && (
-            <Icon
-              color={disabled ? 'disabled' : 'inversePrimary'}
-              name="hyphen"
-              size="small"
-              type="regular"
-            />
-          )}
-          {checked && !indeterminate && (
-            <Icon
-              color={disabled ? 'disabled' : 'inversePrimary'}
-              name="check"
-              size="small"
-              type="regular"
-            />
-          )}
-        </span>
-      </span>
-      {React.Children.count(children) > 0 && (
-        <div
-          className={classify(
-            css.checkboxLabel,
-            {[css.labelDisabled]: disabled},
-            classNames?.label,
-          )}
-        >
-          {children}
-        </div>
-      )}
-    </div>
-  );
-});

package/lib/components/Checkbox/CheckboxGroup.stories.tsx

@@ -1,381 +0,0 @@
-import * as React from 'react';
-
-import {classify} from '../../utils/classify';
-import {Avatar, AVATAR_COLOR} from '../Avatar';
-import {ButtonTextMedium} from '../Text';
-import {Truncate} from '../Truncate';
-
-import type {CheckboxGroupProps} from './';
-import {Checkbox, CheckboxGroup} from './';
-
-import css from './CheckboxGroup.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Form Components/Checkbox Group',
-  component: [CheckboxGroup],
-  argTypes: {
-    align: {
-      description:
-        'Pass the alignment string. Make sure to wrap the checkbox in a container with fixed width to get the alignment effect',
-      options: ['vertical', 'horizontal-fixed', 'horizontal-fluid'],
-      table: {
-        defaultValue: {summary: 'vertical'},
-      },
-      control: 'select',
-    },
-    // controlled value prop
-    value: {
-      name: 'value',
-      description: 'Specify the value that is currently selected in the group',
-      table: {
-        type: {summary: 'string[]'},
-      },
-      control: {
-        disable: true,
-      },
-    },
-    error: {
-      name: 'error',
-      description: `Error state on group level. Meaning that, if true all the child checkboxes will be shown in error state.
-      If you just want few of the checkboxes to be in error state then pass error prop as true to the individual checkboxes`,
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    errorText: {
-      description:
-        'Error message to show in the bottom of CheckboxGroup in case of error state',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    classNames: {
-      description:
-        'Provide an optional className to be applied to the wrapper, checkboxGroup or errorText',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{wrapper?: string, checkboxGroup?: string, errorText?: string}',
-        },
-      },
-    },
-    name: {
-      description: 'Specify the name of the underlying `input` nodes',
-      type: {required: true},
-    },
-    disabled: {
-      name: 'disabled',
-      description: `All the child checkboxes will be Disabled`,
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    onChange: {
-      description:
-        'The callback function that is triggered when the state changes',
-      action: 'changed',
-      type: {summary: '(string[]) => mixed'},
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle:
-        'A CheckboxGroup allows users to select one or more items from a list of choices',
-      description: {
-        component: `
-\`\`\`js
-import { CheckboxGroup, Checkbox } from "@spaced-out/ui-design-system/lib/components/Checkbox";
-\`\`\`
-CheckboxGroup accepts multiple <a href="../?path=/docs/form-components-checkbox--docs">Checkbox</a> elements as children.
-Each Checkbox represents an option that can be selected, labeled by its children.
-
-CheckboxGroup supports selecting zero or more items.
-A controlled value can be provided using the value prop. Value prop accept an array of selected items, which map to the value prop on each item.
-CheckboxGroup accepts an onChange prop, which is triggered when a user adds or removes an item from the selection.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Checkbox/CheckboxGroup.jsx',
-    },
-  },
-};
-
-const sampleOptions = [
-  {value: '1', label: 'The Walt Disney Company'},
-  {
-    value: '2',
-    label: 'Nintendo',
-    imageSrc:
-      'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',
-  },
-  {value: '3', label: 'Starbucks'},
-  {value: '4', label: 'General Electric'},
-  {value: '5', label: 'Zee Entertainment Enterprises'},
-  {value: '6', label: 'IBM'},
-  {value: '7', label: 'Bank of America'},
-  {value: '8', label: 'eBay'},
-];
-
-const checkboxOptions = sampleOptions.map(({label, value}) => (
-  <Checkbox value={value} key={value}>
-    {label}
-  </Checkbox>
-));
-
-export const _CheckboxGroupVertical = (args: CheckboxGroupProps) => {
-  const [value, setValue] = React.useState(args.value);
-// @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
-  const onChangeHandler = (...params): void => {
-// @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    args.onChange && args.onChange(...params);
-// @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    setValue(...params);
-  };
-
-  return (
-    <CheckboxGroup {...args} onChange={onChangeHandler} value={value}>
-      {checkboxOptions}
-    </CheckboxGroup>
-  );
-};
-
-_CheckboxGroupVertical.args = {
-  error: false,
-  align: 'vertical',
-  name: 'Checkbox-group-1',
-  errorText: '*A selection must be made to continue',
-};
-
-export const _CheckboxGroupHorizontal = (args: CheckboxGroupProps) => {
-  const [value, setValue] = React.useState(args.value);
-// @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
-  const onChangeHandler = (...params): void => {
-// @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    args.onChange && args.onChange(...params);
-// @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    setValue(...params);
-  };
-
-  return (
-    <div className={css.horizontalContainer}>
-      <CheckboxGroup {...args} onChange={onChangeHandler} value={value}>
-        {checkboxOptions}
-      </CheckboxGroup>
-    </div>
-  );
-};
-
-_CheckboxGroupHorizontal.args = {
-  error: false,
-  align: 'horizontal-fixed',
-  name: 'Checkbox-group-2',
-  errorText: '*A selection must be made to continue',
-};
-
-export const _CheckboxGroupHorizontalFluid = (args: CheckboxGroupProps) => {
-  const [value, setValue] = React.useState(args.value);
-// @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
-  const onChangeHandler = (...params): void => {
-// @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    args.onChange && args.onChange(...params);
-// @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    setValue(...params);
-  };
-
-  return (
-    <div className={css.horizontalFluidContainer}>
-      <CheckboxGroup {...args} onChange={onChangeHandler} value={value}>
-        {checkboxOptions}
-      </CheckboxGroup>
-    </div>
-  );
-};
-
-_CheckboxGroupHorizontalFluid.args = {
-  error: false,
-  align: 'horizontal-fluid',
-  name: 'Checkbox-group-3',
-  errorText: '*A selection must be made to continue',
-};
-
-_CheckboxGroupHorizontal.args = {
-  error: false,
-  align: 'horizontal-fixed',
-  name: 'Checkbox-group-2',
-  errorText: '*A selection must be made to continue',
-};
-
-type IndeterminateCheckboxProps = CheckboxGroupProps & {
-  defaultCheckedList: Array<string>;
-  options: Array<{
-    label: string;
-    value: string;
-  }>;
-};
-
-export const _Indeterminate = (args: IndeterminateCheckboxProps) => {
-  const { options, name, error, errorText, defaultCheckedList, align } = args;
-  const allValueList = options.map((option) => option.value);
-
-  const [checkedList, setCheckedList] = React.useState([...defaultCheckedList]);
-  const [indeterminate, setIndeterminate] = React.useState(true);
-  const [checkAll, setCheckAll] = React.useState(false);
-
-  const onChangeHandler = (list: string[]): void => {
-    setCheckedList(list);
-    setIndeterminate(!!list.length && list.length < options.length);
-    setCheckAll(list.length === options.length);
-    args.onChange && args.onChange([...list]);
-  };
-
-// @ts-ignore - TS7031 - Binding element 'checked' implicitly has an 'any' type.
-  const onCheckAllChange = ({checked}) => {
-    if (checked) {
-      setCheckedList(checked ? allValueList : []);
-      setCheckAll(checked);
-      args.onChange && args.onChange([...allValueList]);
-    } else {
-      setCheckedList([]);
-      args.onChange && args.onChange([]);
-      setCheckAll(false);
-    }
-    setIndeterminate(false);
-  };
-
-  return (
-    <div className={css.indeterminateContainer}>
-      <Checkbox
-        indeterminate={indeterminate}
-        onChange={onCheckAllChange}
-        checked={checkAll}
-        name={'parent'}
-        error={error}
-      >
-        Parent
-      </Checkbox>
-
-      <CheckboxGroup
-        error={error}
-        name={name}
-        errorText={errorText}
-        onChange={onChangeHandler}
-        value={checkedList}
-        classNames={{checkboxGroup: css.shiftChildren}}
-        align={align}
-      >
-        {options.map(({label, value}) => (
-          <Checkbox value={value} key={name + value}>
-            {label}
-          </Checkbox>
-        ))}
-      </CheckboxGroup>
-    </div>
-  );
-};
-
-_Indeterminate.args = {
-  error: false,
-  name: 'Checkbox-group-4',
-  errorText: '*A selection must be made to continue',
-  options: [
-    {label: 'Child 1', value: 'child_1'},
-    {label: 'Child 2', value: 'child_2'},
-    {label: 'Child 3', value: 'child_3'},
-  ],
-  defaultCheckedList: ['child_2', 'child_3'],
-  align: 'vertical',
-};
-
-function getRandomProperty(obj: {
-  blue: string;
-  gray: string;
-  green: string;
-  indigo: string;
-  orange: string;
-  red: string;
-}) {
-  const keys = Object.keys(obj);
-  return keys[Math.floor(Math.random() * keys.length)];
-}
-
-// @ts-ignore - TS7031 - Binding element 'label' implicitly has an 'any' type. | TS7031 - Binding element 'value' implicitly has an 'any' type. | TS7031 - Binding element 'checked' implicitly has an 'any' type. | TS7031 - Binding element 'imageSrc' implicitly has an 'any' type. | TS7031 - Binding element 'onChange' implicitly has an 'any' type.
-const CustomCheckboxOption = ({label, value, checked, imageSrc, onChange}) => {
-  const [randomColor] = React.useState(getRandomProperty(AVATAR_COLOR));
-
-  return (
-    <Checkbox
-      value={value}
-      key={value}
-      classNames={{
-        wrapper: classify(css.memberOption, {
-          [css.selected]: checked,
-        }),
-      }}
-      checked={checked}
-      onChange={onChange}
-    >
-      <div className={css.labelContainer}>
-        <Avatar
-          iconType="regular"
-          imageSrc={imageSrc}
-          size="small"
-          text={label}
-// @ts-ignore - TS2769 - No overload matches this call.
-          color={randomColor}
-        />
-        <ButtonTextMedium color="secondary">
-          <Truncate>{label}</Truncate>
-        </ButtonTextMedium>
-      </div>
-    </Checkbox>
-  );
-};
-
-export const _CustomCheckboxOptions = (args: CheckboxGroupProps) => {
-  const [value, setValue] = React.useState(args.value);
-// @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
-  const onChangeHandler = (...params): void => {
-// @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    args.onChange && args.onChange(...params);
-// @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    setValue(...params);
-  };
-
-  return (
-    <CheckboxGroup
-      {...args}
-      onChange={onChangeHandler}
-      value={value}
-      classNames={{wrapper: css.customCheckboxWrap}}
-    >
-      {sampleOptions.map(({label, value, imageSrc}) => (
-// @ts-ignore - TS2739 - Type '{ value: string; key: string; label: string; imageSrc: string | undefined; }' is missing the following properties from type '{ label: any; value: any; checked: any; imageSrc: any; onChange: any; }': checked, onChange
-        <CustomCheckboxOption
-          value={value}
-          key={value}
-          label={label}
-          imageSrc={imageSrc}
-        />
-      ))}
-    </CheckboxGroup>
-  );
-};
-
-_CheckboxGroupVertical.args = {
-  error: false,
-  align: 'vertical',
-  name: 'Checkbox-group-1',
-  errorText: '*A selection must be made to continue',
-};

package/lib/components/Checkbox/CheckboxGroup.tsx

@@ -1,119 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import type {GroupAlign} from '../../types/common';
-import classify from '../../utils/classify';
-import {BodySmall} from '../Text/Text';
-
-import css from './CheckboxGroup.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  checkboxGroup?: string;
-  errorText?: string;
-}>;
-export type CheckboxOptions = Array<{
-  label: React.ReactNode;
-  value: string;
-}>;
-
-export type CheckboxGroupProps = {
-  align?: GroupAlign;
-  disabled?: boolean;
-  name: string;
-  value?: Array<string>;
-  onChange?: (value: Array<string>) => unknown;
-  classNames?: ClassNames;
-  error?: boolean;
-  errorText?: string;
-  children?: React.ReactNode;
-};
-
-export const CheckboxGroup: Flow.AbstractComponent<CheckboxGroupProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, CheckboxGroupProps>((
-  {
-    align = 'vertical',
-    disabled = false,
-    name,
-    value: checkedList,
-    onChange,
-    classNames,
-    error = false,
-    errorText = '',
-    children,
-  }: CheckboxGroupProps,
-  forwardRef,
-) => {
-// @ts-ignore - TS7031 - Binding element 'value' implicitly has an 'any' type. | TS7031 - Binding element 'checked' implicitly has an 'any' type.
-  const onChangeHandler = ({value, checked}) => {
-    const checkedListTemp = checkedList ? [...checkedList] : [];
-    if (checked && !checkedListTemp.includes(value)) {
-      checkedListTemp.push(value);
-    } else if (!checked && checkedListTemp.includes(value)) {
-      for (let i = 0; i < checkedListTemp.length; i++) {
-        if (checkedListTemp[i] === value) {
-          checkedListTemp.splice(i, 1);
-          break;
-        }
-      }
-    }
-    onChange && onChange(checkedListTemp);
-  };
-
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      const {
-// @ts-ignore - TS2339 - Property 'value' does not exist on type 'unknown'.
-        value,
-// @ts-ignore - TS2339 - Property 'disabled' does not exist on type 'unknown'.
-        disabled: disabledChild,
-// @ts-ignore - TS2339 - Property 'error' does not exist on type 'unknown'.
-        error: errorChild,
-// @ts-ignore - TS2339 - Property 'onChange' does not exist on type 'unknown'.
-        onChange,
-      } = child.props;
-// @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
-      const childOnChange = (...params) => {
-// @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-        onChangeHandler(...params);
-        onChange && onChange(...params);
-      };
-      return React.cloneElement(child, {
-// @ts-ignore - TS2769 - No overload matches this call.
-        name,
-        checked: !!checkedList?.includes(value),
-        onChange: childOnChange,
-        align,
-        error: errorChild || error,
-        disabled: disabledChild || disabled,
-      });
-    }
-    return child;
-  });
-
-  return (
-    <div
-      className={classify(css.checkboxGroupContainer, classNames?.wrapper)}
-    >
-      <div
-        className={classify(
-          {
-            [css.vertical]: align === 'vertical',
-            [css.horizontal]: align === 'horizontal-fixed',
-            [css.horizontalFluid]: align === 'horizontal-fluid',
-          },
-          classNames?.checkboxGroup,
-        )}
-        ref={forwardRef}
-      >
-        {childrenWithProps}
-      </div>
-      {error && (
-        <BodySmall className={classify(classNames?.errorText)} color="danger">
-          {errorText}
-        </BodySmall>
-      )}
-    </div>
-  );
-});

package/lib/components/Checkbox/index.ts

@@ -1,2 +0,0 @@
-export * from './Checkbox';
-export * from './CheckboxGroup';