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

package/lib/components/RadioButton/RadioButton.tsx

@@ -1,135 +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 css from './RadioButton.module.css';
-
-/**
- * Note:
- * Do not wrap Radio in a label. For simplicity's sake, Radio uses an
- * internal label tag to handle click delegation to the hidden input, and
- * nesting labels is a bad idea.
- */
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  label?: string;
-  radio?: string;
-}>;
-
-export type RadioButtonProps = {
-  children?: React.ReactNode;
-  value?: string;
-  disabled?: boolean;
-  focused?: boolean;
-  name?: string;
-  selectedValue?: string;
-  align?: GroupAlign;
-  classNames?: ClassNames;
-  error?: boolean;
-  onChange?: (newValue: string) => unknown;
-  tabIndex?: number;
-  ariaLabel?: string;
-};
-
-export const RadioButton: Flow.AbstractComponent<RadioButtonProps, HTMLInputElement> = React.forwardRef<HTMLInputElement, RadioButtonProps>((
-  {
-    children,
-    disabled = false,
-    value = '',
-    focused = false,
-    name = 'radio',
-    selectedValue,
-    onChange,
-    align = 'vertical',
-    classNames,
-    error = false,
-    tabIndex = 0,
-    ariaLabel = '',
-    ...props
-  }: RadioButtonProps,
-  forwardRef,
-) => {
-  const radioInput = React.createRef<HTMLInputElement>();
-// @ts-ignore - TS2322 - Type 'HTMLInputElement | null' is not assignable to type 'HTMLInputElement'.
-  React.useImperativeHandle(forwardRef, () => radioInput.current);
-
-  const checked = selectedValue === value;
-
-  React.useEffect(() => {
-    if (radioInput.current && focused) {
-      radioInput.current.focus();
-    }
-  }, [focused]);
-
-  const onWrapClickHandler = () => {
-    radioInput.current?.click();
-  };
-
-  const onChangeHandler = (e: any) => {
-    if (!disabled) {
-      onChange && onChange(e?.target?.value);
-    }
-  };
-
-  const onKeyDownHandler = (e: any) => {
-    if (e.key === 'Enter') {
-      onChangeHandler(e);
-    }
-  };
-
-  return (
-    <div
-      className={classify(
-        css.container,
-        {
-          [css.horizontalRadioButton]: align === 'horizontal-fixed',
-          [css.fluidRadioButton]: align === 'horizontal-fluid',
-          [css.containerDisabled]: disabled,
-        },
-        classNames?.wrapper,
-      )}
-      onClick={onWrapClickHandler}
-    >
-{ /* @ts-ignore - TS2322 - Type '{ type: "radio"; checked: boolean; disabled: boolean; className: string; ref: RefObject<HTMLInputElement | null>; onChange: (e: any) => void; onKeyDown: (e: any) => void; tabIndex: number; name: string; value: string; "aria-label": React.ReactNode; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'. */}
-      <input
-        type="radio"
-        checked={checked}
-        disabled={disabled}
-        className={classify(
-          css.radio,
-          {
-            [css.unselected]: !checked && !disabled && !error,
-            [css.selected]: checked && !disabled && !error,
-            [css.disabled]: disabled,
-            [css.error]: error && !disabled,
-          },
-          classNames?.radio,
-        )}
-        ref={radioInput}
-        onChange={onChangeHandler}
-        onKeyDown={onKeyDownHandler}
-        tabIndex={disabled ? -1 : tabIndex}
-        name={name}
-        value={value || ''}
-        aria-label={ariaLabel || children}
-        {...props}
-      />
-      {React.Children.count(children) > 0 && (
-        <div
-          color="secondary"
-          className={classify(
-            css.radioLabel,
-            {[css.labelDisabled]: disabled},
-            classNames?.label,
-          )}
-        >
-          {children}
-        </div>
-      )}
-    </div>
-  );
-});

package/lib/components/RadioButton/RadioGroup.stories.tsx

@@ -1,283 +0,0 @@
-import * as React from 'react';
-
-import {Avatar, AVATAR_COLOR} from '../Avatar';
-import {ButtonTextMedium} from '../Text';
-import {Truncate} from '../Truncate';
-
-import {RadioButton} from './RadioButton';
-import type {RadioGroupProps} from './RadioGroup';
-import {RadioGroup} from './RadioGroup';
-
-import css from './RadioGroup.stories.module.css';
-
-//This is controlled radio group, meaning there is an external state that determines if it is checked, the component does not manages its own state.
-
-export default {
-  tags: ['autodocs'],
-  title: 'Form Components/Radio Group',
-  component: RadioGroup,
-  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'},
-        defaultValue: {summary: 'sample'},
-      },
-      control: {
-        disable: true,
-      },
-    },
-    error: {
-      name: 'error',
-      description: `Error state on group level. Meaning that, if true all the child radio buttons will be shown in error state.
-      If you just want few of the radio buttons to be in error state then pass error prop as true to the individual radio buttons`,
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    errorText: {
-      description:
-        'Error message to show in the bottom of RadioGroup in case of error state',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    children: {
-      type: {required: true},
-      description:
-        'Provide a collection of RadioButton components to render in the group',
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    classNames: {
-      description:
-        'Provide an optional className to be applied to the wrapper, radioGroup or errorText',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{wrapper?: string, radioGroup?: string, errorText?: string}',
-        },
-      },
-    },
-    name: {
-      description: 'Specify the name of the underlying `input` nodes',
-      type: {required: true},
-    },
-    onChange: {
-      description:
-        'The callback function that is triggered when the state changes',
-      action: 'changed',
-      type: {summary: '(string) => mixed'},
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a RadioGroup component',
-      description: {
-        component: `
-\`\`\`js
-import { RadioGroup, RadioButton } from "@spaced-out/ui-design-system/lib/components/RadioButton";
-\`\`\`
-Radios are used when only one choice may be selected in a series of options.
-
-RadioGroup component will have multiple RadioButton children.
-
-It is a controlled component, meaning that, you need to pass the value to Radio Group.
-Internally the value passed to RadioGroup is passed down to children RadioButtons as selectedValue.
-You will pass a callback function in onChange prop, if any child RadioButton is clicked this function will be called and you will receive
-the new value which will the value prop of the clicked RadioButton.
-
-Refer the <a href="../?path=/docs/form-components-radio-button--docs">RadioButton</a> documentation here.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/RadioButton/RadioGroup.jsx',
-    },
-  },
-};
-
-export const _RadioGroupVertical = (args: RadioGroupProps) => {
-  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 (
-    <RadioGroup {...args} onChange={onChangeHandler} value={value}>
-      <RadioButton value={'1'}>Option #1</RadioButton>
-      <RadioButton value={'2'}>Option #2</RadioButton>
-      <RadioButton value={'3'}>Option #3</RadioButton>
-      <RadioButton value={'4'}>Option #4</RadioButton>
-      <RadioButton value={'5'}>Option #5</RadioButton>
-      <RadioButton value={'6'}>Option #6</RadioButton>
-    </RadioGroup>
-  );
-};
-
-_RadioGroupVertical.args = {
-  error: false,
-  align: 'vertical',
-  name: 'radio-group-1',
-  errorText: '*A selection must be made to continue',
-};
-
-export const _RadioGroupHorizontal = (args: RadioGroupProps) => {
-  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}>
-      <RadioGroup {...args} onChange={onChangeHandler} value={value}>
-        <RadioButton value={'1'}>Option #1 Option #1</RadioButton>
-        <RadioButton value={'2'}>Option #2 Option #2 Option #2</RadioButton>
-        <RadioButton value={'3'} disabled>
-          Option #3
-        </RadioButton>
-        <RadioButton value={'4'}>Option #4</RadioButton>
-        <RadioButton value={'5'}>Option #5 Option #5</RadioButton>
-        <RadioButton value={'6'}>Option #6</RadioButton>
-      </RadioGroup>
-    </div>
-  );
-};
-
-_RadioGroupHorizontal.args = {
-  error: false,
-  align: 'horizontal-fixed',
-  name: 'radio-group-2',
-  errorText: '*A selection must be made to continue',
-};
-
-export const _RadioGroupHorizontalFluid = (args: RadioGroupProps) => {
-  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}>
-      <RadioGroup {...args} onChange={onChangeHandler} value={value}>
-        <RadioButton value={'1'}>The Walt Disney Company</RadioButton>
-        <RadioButton value={'2'}>Nintendo</RadioButton>
-        <RadioButton value={'3'}>Starbucks</RadioButton>
-        <RadioButton value={'4'}>General Electric</RadioButton>
-        <RadioButton value={'5'}>The Walt Disney Company 2</RadioButton>
-        <RadioButton value={'6'}>IBM</RadioButton>
-        <RadioButton value={'7'}>Bank of America</RadioButton>
-        <RadioButton value={'8'}>Apple </RadioButton>
-        <RadioButton value={'9'}>eBay</RadioButton>
-      </RadioGroup>
-    </div>
-  );
-};
-
-_RadioGroupHorizontalFluid.args = {
-  error: false,
-  name: 'radio-group-3',
-  align: 'horizontal-fluid',
-  errorText: '*A selection must be made to continue',
-};
-
-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)];
-}
-
-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'},
-];
-
-export const _CustomRadioButton = (args: RadioGroupProps) => {
-  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}>
-      <RadioGroup {...args} onChange={onChangeHandler} value={value}>
-        {sampleOptions.map(({label, value}) => (
-          <RadioButton
-            value={value}
-            classNames={{label: css.radioLabel}}
-            key={value}
-          >
-            <Avatar
-              iconType="regular"
-              size="small"
-              text={label}
-// @ts-ignore - TS2769 - No overload matches this call.
-              color={getRandomProperty(AVATAR_COLOR)}
-            />
-            <ButtonTextMedium color="secondary">
-              <Truncate>{label}</Truncate>
-            </ButtonTextMedium>
-          </RadioButton>
-        ))}
-      </RadioGroup>
-    </div>
-  );
-};
-
-_RadioGroupHorizontalFluid.args = {
-  error: false,
-  name: 'radio-group-3',
-  align: 'horizontal-fluid',
-  errorText: '*A selection must be made to continue',
-};

package/lib/components/RadioButton/RadioGroup.tsx

@@ -1,90 +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 './RadioGroup.module.css';
-
-/**
- * Note:
- * Do not wrap Radio in a label. For simplicity's sake, Radio uses an
- * internal label tag to handle click delegation to the hidden input, and
- * nesting labels is a bad idea.
- */
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  radioGroup?: string;
-  errorText?: string;
-}>;
-
-export type RadioGroupProps = {
-  align?: GroupAlign;
-  name: string;
-  value?: string;
-  onChange?: (value: string) => unknown;
-  children?: React.ReactNode;
-  classNames?: ClassNames;
-  error?: boolean;
-  errorText?: string;
-};
-
-export const RadioGroup: Flow.AbstractComponent<RadioGroupProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, RadioGroupProps>((
-  {
-    align = 'vertical',
-    name,
-    value,
-    onChange,
-    children,
-    classNames,
-    error = false,
-    errorText = '',
-  }: RadioGroupProps,
-  forwardRef,
-) => {
-  const onChangeHandler = (value: any) => {
-    if (onChange) {
-      onChange(value);
-    }
-  };
-
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, {
-// @ts-ignore - TS2769 - No overload matches this call.
-        name,
-        selectedValue: value,
-        onChange: onChangeHandler,
-        align,
-        error,
-      });
-    }
-    return child;
-  });
-
-  return (
-    <div className={classify(css.radioGroupContainer, classNames?.wrapper)}>
-      <div
-        className={classify(
-          {
-            [css.vertical]: align === 'vertical',
-            [css.horizontal]: align === 'horizontal-fixed',
-            [css.horizontalFluid]: align === 'horizontal-fluid',
-          },
-          classNames?.radioGroup,
-        )}
-        ref={forwardRef}
-      >
-        {childrenWithProps}
-      </div>
-      {error && (
-        <BodySmall color="danger" className={classNames?.errorText}>
-          {errorText}
-        </BodySmall>
-      )}
-    </div>
-  );
-});

package/lib/components/RadioButton/index.ts

@@ -1,2 +0,0 @@
-export {RadioButton} from './RadioButton';
-export {RadioGroup} from './RadioGroup';