@indico-data/design-system 2.43.0 → 2.44.0

package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.tsx

@@ -1,123 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-import { components } from 'react-select';
-
-import { PermafrostComponent } from '@/types';
-import { Icon } from '@/components';
-import { addCustomProps } from '../utils';
-import type { ComboboxProps, ComboboxOption } from '../types';
-
-import { StyledMultiCombobox } from './MultiCombobox.styles';
-
-type Props = PermafrostComponent &
-  ComboboxProps & {
-    /**
-     * MultiValue is a selected option in the input area
-     */
-    multiValueProps?: {
-      'data-cy': string;
-    };
-    optionProps?: {
-      'data-cy': string;
-    };
-    // validationErrors?: string[];
-    values?: ComboboxOption[];
-    onChange: (selectedOption: ComboboxOption[]) => void;
-  };
-
-/**
- * Multiselect combobox component. If selections are not bound to outside state
- * via the `value` prop, you will need to import and use the `useCombobox` hook
- * in order to clear its selected value .
- *
- * @see [useCombobox]{@link import('useCombobox').useCombobox}
- */
-export const MultiCombobox = React.forwardRef((props: Props, ref: any) => {
-  const {
-    className,
-    closeMenuOnSelect,
-    customOption,
-    customOptionLabel,
-    customOptionValue,
-    defaultValue,
-    disabled,
-    id,
-    loading,
-    menuIsOpen,
-    multiValueProps = {},
-    noOptionsMessage,
-    onChange,
-    optionProps = {},
-    options,
-    placeholder,
-    // validationErrors,
-    values,
-  } = props;
-
-  const MultiValue = (props: any) => {
-    return <components.MultiValue {...props} />;
-  };
-
-  const MultiValueRemove = (props: any) => {
-    return (
-      <components.MultiValueRemove {...props}>
-        <Icon name="x-close" ariaLabel="remove" size="xs" />
-      </components.MultiValueRemove>
-    );
-  };
-
-  // handles a custom option component generator, if passed in
-  const Option = (props: any) => {
-    if (customOption) {
-      return (
-        <components.Option {...props} {...optionProps}>
-          {customOption(props)}
-        </components.Option>
-      );
-    }
-
-    return <components.Option {...props} {...optionProps} />;
-  };
-
-  const ComboboxComponent = () => (
-    <StyledMultiCombobox
-      aria-label={props['aria-label']}
-      aria-labelledby={props['aria-labelledby']}
-      ref={ref}
-      className={className}
-      classNamePrefix="combobox"
-      closeMenuOnSelect={closeMenuOnSelect}
-      components={{
-        MultiValue: addCustomProps(MultiValue, multiValueProps),
-        MultiValueRemove,
-        Option: addCustomProps(Option, optionProps),
-      }}
-      defaultValue={defaultValue}
-      getOptionLabel={customOptionLabel}
-      getOptionValue={customOptionValue}
-      id={id}
-      isClearable={false}
-      isDisabled={disabled}
-      isMulti
-      isLoading={loading}
-      menuIsOpen={menuIsOpen}
-      noOptionsMessage={() => noOptionsMessage}
-      onChange={onChange as any}
-      options={options}
-      placeholder={placeholder}
-      // validationErrors={validationErrors}
-      value={values}
-    />
-  );
-
-  if (props['data-cy']) {
-    return (
-      <div data-cy={props['data-cy']}>
-        <ComboboxComponent />
-      </div>
-    );
-  }
-
-  return <ComboboxComponent />;
-});

package/src/legacy/components/dropdowns/MultiCombobox/index.ts

@@ -1 +0,0 @@
-export { MultiCombobox } from './MultiCombobox';

package/src/legacy/components/dropdowns/Select/Select.stories.tsx

@@ -1,54 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Select } from './Select';
-
-const meta = {
-  component: Select,
-  title: 'legacy/dropdowns/Select',
-  argTypes: {},
-  args: {
-    onChange: () => {},
-    options: [
-      { name: 'Andy', value: 'andy' },
-      { name: 'Jackson', value: 'jackson' },
-      { name: 'Mike', value: 'mike' },
-    ],
-  },
-} satisfies Meta<typeof Select>;
-
-export default meta;
-type Story = StoryObj<typeof Select>;
-
-export const Base: Story = {};
-
-export const InitialText: Story = {
-  args: {
-    initialText: 'Select Name',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-  },
-};
-
-export const Light: Story = {
-  args: {
-    variant: 'light',
-  },
-  parameters: {
-    backgrounds: {
-      default: 'light',
-      values: [{ name: 'light', value: '#fff' }],
-    },
-  },
-};

package/src/legacy/components/dropdowns/Select/Select.styles.ts

@@ -1,73 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS, FONT_SIZE } from '@/legacy/tokens';
-
-export const StyledSelect = styled.div`
-  display: inline-block;
-
-  .Select__container {
-    position: relative;
-    z-index: 0;
-
-    select {
-      color: ${COLORS.defaultFontColor};
-      appearance: none;
-      background: transparent;
-      border: none;
-      z-index: 1;
-
-      &:focus {
-        outline: 0;
-      }
-    }
-
-    option {
-      color: ${COLORS.black};
-
-      &:not(:checked) {
-        color: ${COLORS.black};
-      }
-    }
-
-    .chevron {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      z-index: -1;
-    }
-
-    &.light {
-      select {
-        color: ${COLORS.black};
-      }
-
-      .chevron {
-        color: ${COLORS.black};
-      }
-    }
-
-    &.small {
-      select {
-        font-size: ${FONT_SIZE.base};
-        padding: 0;
-        padding-right: 15px;
-      }
-
-      .chevron {
-        right: 0px;
-      }
-    }
-
-    &.medium {
-      font-size: ${FONT_SIZE.subheadSmall};
-
-      select {
-        padding: 7px 35px 8px 15px;
-      }
-
-      .chevron {
-        right: 12px;
-      }
-    }
-  }
-`;

package/src/legacy/components/dropdowns/Select/Select.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-
-import { v4 as uuid } from 'uuid';
-
-import { Icon } from '@/components';
-import { PermafrostComponent } from '@/types';
-
-import { StyledSelect } from './Select.styles';
-import classNames from 'classnames';
-import { ComboboxSize, ComboboxVariant } from '../types';
-
-type Props = PermafrostComponent & {
-  disabled?: boolean;
-  initialText?: string;
-  options: { name: string; value: string | number }[];
-  size?: ComboboxSize;
-  style?: object;
-  value?: string | number;
-  variant?: ComboboxVariant;
-  onChange(e: React.ChangeEvent<HTMLSelectElement>): void;
-  onClick?(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
-};
-
-export const Select = (props: Props) => {
-  const {
-    id,
-    className,
-    disabled,
-    initialText,
-    onChange,
-    options,
-    size = 'medium',
-    style = {},
-    value,
-    variant,
-    onClick,
-  } = props;
-
-  const selectId = uuid();
-
-  return (
-    <StyledSelect className={className} data-cy={props['data-cy']} id={id} style={style}>
-      <div
-        className={classNames('Select__container', size, variant)}
-        onClick={(e) => (onClick ? onClick(e) : null)}
-      >
-        <select onChange={onChange} value={value} disabled={disabled} id={selectId}>
-          {initialText && (
-            <option disabled value="">
-              {initialText}
-            </option>
-          )}
-
-          {options.map((o) => {
-            const key = uuid();
-
-            return (
-              <option key={key} value={o.value}>
-                {o.name}
-              </option>
-            );
-          })}
-        </select>
-        {/* TODO: Fix this size mismatch when bringing Select into DS */}
-        <Icon className="chevron" name="chevron-down" size={size === 'small' ? 'xs' : 'sm'} />
-      </div>
-    </StyledSelect>
-  );
-};

package/src/legacy/components/dropdowns/Select/index.ts

@@ -1 +0,0 @@
-export { Select } from './Select';

package/src/legacy/components/dropdowns/SingleCombobox/SingleCombobox.stories.tsx

@@ -1,61 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ComboboxOption } from '../types';
-import { SingleCombobox } from './SingleCombobox';
-
-const options = [
-  { value: 'due-date', label: 'Due Date' },
-  { value: 'invoice-number', label: 'Invoice Number' },
-  { value: 'invoice', label: 'Invoice' },
-  { value: 'line-item-value', label: 'Line Item Value' },
-  { value: 'line-item', label: 'Line Item' },
-  { value: 'vendor', label: 'Vendor' },
-];
-
-const meta = {
-  component: SingleCombobox,
-  title: 'legacy/dropdowns/SingleCombobox',
-  argTypes: {},
-  args: {
-    options,
-    placeholder: 'Select Label to add to Label Group',
-    onChange: (selectedOption: ComboboxOption) => console.info(selectedOption),
-  },
-} satisfies Meta<typeof SingleCombobox>;
-
-export default meta;
-type Story = StoryObj<typeof SingleCombobox>;
-
-export const Normal: Story = {
-  args: {
-    dropdownIndicatorProps: {
-      'data-cy': 'dropdownIndicatorSelector',
-    },
-  },
-};
-
-export const Open: Story = {
-  args: {
-    menuIsOpen: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const WithDataCyAttributes: Story = {
-  args: {
-    'data-cy': 'cypressSelector',
-    dropdownIndicatorProps: {
-      'data-cy': 'dropdownIndicatorSelector',
-    },
-    optionProps: {
-      'data-cy': 'optionSelector',
-    },
-  },
-};

package/src/legacy/components/dropdowns/SingleCombobox/SingleCombobox.styles.ts

@@ -1,56 +0,0 @@
-import styled from 'styled-components';
-
-import ReactSelect from 'react-select';
-
-import { COLORS } from '@/legacy/tokens';
-
-import { basicDefaults } from '../commonStyles';
-
-export const StyledSingleCombobox = styled(ReactSelect)`
-  ${basicDefaults};
-
-  // overall component container
-  .combobox__control {
-    border-radius: 0;
-
-    background-color: transparent;
-
-    border-top: none;
-    border-right: none;
-    border-bottom: 1px solid ${COLORS.defaultFontColor};
-    border-left: none;
-
-    :hover {
-      border-color: ${COLORS.lightFontColor};
-    }
-  }
-
-  .combobox__control--is-disabled {
-    :hover {
-      border-color: ${COLORS.defaultFontColor};
-    }
-  }
-
-  // the dropdown list container
-  .combobox__menu {
-    background-color: ${COLORS.clay};
-    border: 1px solid ${COLORS.mediumGray};
-  }
-
-  // the dropdown list
-  .combobox__menu-list {
-    border-radius: inherit;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  // text input placeholder text
-  .combobox__placeholder {
-    color: ${COLORS.defaultFontColor};
-  }
-
-  // selected item text inside input
-  .combobox__single-value {
-    color: ${COLORS.lightFontColor};
-  }
-`;

package/src/legacy/components/dropdowns/SingleCombobox/SingleCombobox.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-
-import { components } from 'react-select';
-
-import { Icon } from '@/components';
-import { PermafrostComponent } from '@/types';
-import { addCustomProps } from '../utils';
-
-import { StyledSingleCombobox } from './SingleCombobox.styles';
-
-import type { ComboboxProps, ComboboxOption } from '../types';
-
-type Props = PermafrostComponent &
-  ComboboxProps & {
-    dropdownIndicatorProps?: {
-      'data-cy': string;
-    };
-    optionProps?: {
-      'data-cy': string;
-    };
-    // validationErrors?: string[];
-    value?: ComboboxOption;
-    onChange: (selectedOption: ComboboxOption) => void;
-  };
-
-/**
- * Combobox component to select a single option. If selections are not bound to
- * outside state via the `value` prop, you will need to import and use the
- * `useCombobox` hook in order to clear its selected value.
- *
- * @see [useCombobox]{@link import('useCombobox').useCombobox}
- */
-export const SingleCombobox = React.forwardRef((props: Props, ref: any) => {
-  const {
-    className,
-    closeMenuOnSelect,
-    customOptionLabel,
-    customOptionValue,
-    defaultValue,
-    disabled,
-    dropdownIndicatorProps = {},
-    id,
-    menuIsOpen,
-    noOptionsMessage,
-    onChange,
-    optionProps = {},
-    options,
-    placeholder,
-    // validationErrors,
-    value,
-  } = props;
-
-  const DropdownIndicator = (props: any) => {
-    return (
-      <components.DropdownIndicator {...props}>
-        <Icon name="fa-caret-down" ariaLabel="open dropdown" />
-      </components.DropdownIndicator>
-    );
-  };
-
-  const Option = (props: any) => {
-    return <components.Option {...props} {...optionProps} />;
-  };
-
-  const ComboboxComponent = () => (
-    <StyledSingleCombobox
-      aria-label={props['aria-label']}
-      aria-labelledby={props['aria-labelledby']}
-      ref={ref}
-      className={className}
-      classNamePrefix="combobox"
-      closeMenuOnSelect={closeMenuOnSelect}
-      components={{
-        DropdownIndicator: addCustomProps(DropdownIndicator, dropdownIndicatorProps),
-        Option: addCustomProps(Option, optionProps),
-      }}
-      defaultValue={defaultValue}
-      getOptionLabel={customOptionLabel}
-      getOptionValue={customOptionValue}
-      id={id}
-      isClearable={false}
-      isDisabled={disabled}
-      isMulti={false}
-      menuIsOpen={menuIsOpen}
-      noOptionsMessage={() => noOptionsMessage}
-      onChange={onChange as any}
-      options={options}
-      placeholder={placeholder}
-      // validationErrors={validationErrors}
-      value={value}
-    />
-  );
-
-  if (props['data-cy']) {
-    return (
-      <div data-cy={props['data-cy']}>
-        <ComboboxComponent />
-      </div>
-    );
-  }
-
-  return <ComboboxComponent />;
-});

package/src/legacy/components/dropdowns/SingleCombobox/index.ts

@@ -1 +0,0 @@
-export { SingleCombobox } from './SingleCombobox';

package/src/legacy/components/dropdowns/commonStyles.ts

@@ -1,65 +0,0 @@
-import { css } from 'styled-components';
-
-import { COLORS, TYPOGRAPHY } from '@/legacy/tokens';
-
-export const basicDefaults = css`
-  font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-  color: ${COLORS.lightFontColor};
-
-  &.combobox--is-disabled {
-    pointer-events: auto;
-    opacity: 0.6;
-  }
-
-  // overall component container
-  .combobox__control {
-    box-shadow: none;
-    min-height: unset;
-  }
-
-  .combobox__control--is-disabled {
-    cursor: not-allowed;
-  }
-
-  // container component for the text input
-  .combobox__input-container {
-    color: ${COLORS.defaultFontColor};
-    cursor: text;
-
-    input {
-      margin-bottom: 0;
-      caret-color: ${COLORS.white};
-    }
-  }
-
-  // the dropdown list
-  .combobox__menu-list {
-    border-radius: inherit;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  // each available item in the dropdown list
-  .combobox__option {
-    background-color: inherit;
-
-    :hover,
-    &--is-focused {
-      background-color: ${COLORS.oxfordBlue};
-    }
-  }
-
-  // normally displays as a thin vertical line before the buttons on the far right
-  .combobox__indicator-separator {
-    display: none;
-  }
-
-  // caret button to open/close menu
-  .combobox__dropdown-indicator {
-    color: ${COLORS.lightFontColor};
-
-    :hover {
-      color: ${COLORS.white};
-    }
-  }
-`;

package/src/legacy/components/dropdowns/index.ts

@@ -1,4 +0,0 @@
-export { BorderSelect } from './BorderSelect';
-export { Select } from './Select';
-export { MultiCombobox } from './MultiCombobox';
-export { SingleCombobox } from './SingleCombobox';

package/src/legacy/components/dropdowns/types.ts

@@ -1,45 +0,0 @@
-export type ComboboxProps = {
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-  className?: string;
-  closeMenuOnSelect?: boolean;
-  /**
-   * Function to generate a custom React component for every available list `Option`
-   * @see {@link https://react-select.com/props#option}
-   */
-  customOption?: (props: any) => JSX.Element;
-  /**
-   * Customize the text to appear in selected items.
-   *
-   * @example (option) => `${option.value}`
-   */
-  customOptionLabel?(option: any): string;
-  /**
-   * Customize the value for the Combobox to use. Defaults to `value`
-   *
-   * @example (option) => `${option.id}`
-   */
-  customOptionValue?(option: any): string;
-  defaultValue?: any[];
-  disabled?: boolean;
-  loading?: boolean;
-  menuIsOpen?: boolean;
-  /**
-   * Custom text to show if there are no more items available to select
-   */
-  noOptionsMessage?: string;
-  /**
-   * Combobox defaults to expect { label: string; value: string; } at minimum - use `customOptionLabel` and `customOptionValue` props to change
-   */
-  options: ComboboxOption[];
-  /**
-   * Input placeholder text
-   */
-  placeholder?: string;
-};
-
-// ComboboxOption is an object that needs to contain prop label, along with any other values you need returned onChange
-export type ComboboxOption = { label?: string; [key: string]: any };
-
-export type ComboboxSize = 'small' | 'medium';
-export type ComboboxVariant = 'default' | 'light';

package/src/legacy/components/dropdowns/useCombobox.ts

@@ -1,32 +0,0 @@
-import React from 'react';
-
-/**
- * @filename useCombobox.ts
- * Allows access to the internals of a MultiCombobox component. For example, a discrete
- * button to clear all selected values.
- *
- * In your component’s file, import this hook and create a `ref` to the component.
- * Then, pass the ref into this hook.
- *
- * @example
- * const comboboxEl = useRef(null);
- * const { clearValue } = useCombobox(comboboxEl);
- *
- * <MultiCombobox ref={comboboxEl} ... />
- *
- * const handleSubmit = () => {
- *   clearValue();
- * };
- *
- * @see {@link https://react-select.com/props}
- * @see {@link https://github.com/JedWatson/react-select/discussions/4352}
- */
-export function useCombobox(comboboxEl: React.RefObject<any>) {
-  const clearValue = () => {
-    if (comboboxEl?.current) {
-      comboboxEl.current.clearValue();
-    }
-  };
-
-  return { clearValue };
-}