@indico-data/design-system 2.43.1 → 2.45.0

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 };
-}

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

@@ -1,25 +0,0 @@
-import React from 'react';
-
-/**
- * Adds custom props to a react-select component
- *
- * @example
- * type Props = ComboboxProps & {
- *   multiValueProps: {
- *     'data-cy': string;
- *   };
- *
- * <StyledMultiCombobox
- *   ...
- *   components={{
- *    MultiValue: addCustomProps(MultiValue, { ...multiValueProps }),
- *    ...
- *
- * @see {@link https://gist.github.com/MikaelCarpenter/1fe226967b00eea82e6a4760b244ada1}
- */
-export const addCustomProps =
-  (Component: any, customProps: { [key: string]: string }) => (props: any) => {
-    return (
-      <Component {...props} innerProps={Object.assign({}, props.innerProps, { ...customProps })} />
-    );
-  };

package/src/legacy/components/inputs/EditableInput/EditableInput.stories.tsx

@@ -1,26 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-
-import { EditableInput } from './EditableInput';
-
-const meta = {
-  component: EditableInput,
-  title: 'legacy/inputs/EditableInput',
-  args: {
-    children: <h2>Input-Value</h2>,
-  },
-  argTypes: {},
-} satisfies Meta<typeof EditableInput>;
-
-export default meta;
-type Story = StoryObj<typeof EditableInput>;
-
-export const Normal: Story = {};
-
-export const MinLengthEight: Story = {
-  args: {
-    minLength: 8,
-  },
-};

package/src/legacy/components/inputs/EditableInput/EditableInput.styles.ts

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-
-const transitionDuration = '200ms';
-
-export const StyledEditableInput = styled.span`
-  &:hover .pencil-icon {
-    opacity: 1;
-  }
-
-  [role='textbox'] > * {
-    display: inline-block;
-  }
-
-  .pencil-icon {
-    margin-left: 0.25em;
-    margin-right: 3px;
-    opacity: 0;
-
-    transition: opacity ${transitionDuration};
-  }
-`;

package/src/legacy/components/inputs/EditableInput/EditableInput.tsx

@@ -1,103 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
-
-// todo: how to handle/inform user when length is too short?
-
-import classNames from 'classnames';
-
-import { stringUtils } from '@/legacy/utils';
-
-import { Icon } from '@/components';
-import { PermafrostComponent } from '@/types';
-
-import { StyledEditableInput } from './EditableInput.styles';
-
-type Props = PermafrostComponent & {
-  children: React.ReactNode | string;
-  minLength?: number;
-  onUpdate?(newValue: string): void;
-};
-
-/**
- * Wrapper component which enables text editing in place directly on a child component,
- * element, or plain text.
- */
-export function EditableInput(props: Props) {
-  const { children, className, minLength = 3, onUpdate } = props;
-
-  const [initialValue, setInitialValue] = useState('');
-
-  // used as unique css class name
-  const { current: id } = useRef(stringUtils.createRandomString());
-
-  const editableEl = useRef() as MutableRefObject<HTMLSpanElement>;
-
-  const handleBlur = () => {
-    const node = editableEl.current.children[0] as HTMLElement;
-    const currentValue = node.innerText || editableEl.current.innerText;
-
-    if (minLength && currentValue.length < minLength) {
-      // revert to last good value
-
-      if (node) {
-        node.textContent = initialValue;
-      } else {
-        editableEl.current.textContent = initialValue;
-      }
-    } else if (currentValue !== initialValue) {
-      // allow updated value
-      setInitialValue(currentValue);
-
-      if (onUpdate) onUpdate(currentValue);
-    }
-  };
-
-  const handleKeypress = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      editableEl.current.blur();
-    }
-  };
-
-  // Records the initial value for the text, in order to check length and compare to current text.
-  // Also ensures the size of the icon is relative to the text inside the editable element (which
-  // is the icon’s *sibling*, not ancestor).
-  useEffect(() => {
-    const style = document.createElement('style');
-    const node = editableEl.current.children[0] as HTMLElement;
-    document.head.appendChild(style);
-
-    if (node) {
-      const { fontSize } = getComputedStyle(node);
-
-      style?.sheet?.insertRule(`.${id} .pencil-icon { font-size: calc(${fontSize} * 0.8) }`);
-
-      setInitialValue(node.innerText);
-    } else {
-      style?.sheet?.insertRule(`.${id} .pencil-icon { font-size: 0.8em }`);
-      setInitialValue(editableEl.current.innerText);
-    }
-  }, []);
-
-  return (
-    <StyledEditableInput
-      className={classNames('EditableInput-container', id, className)}
-      data-cy={props['data-cy']}
-      id={props.id}
-    >
-      <span
-        role="textbox"
-        tabIndex={0}
-        contentEditable
-        suppressContentEditableWarning={true}
-        ref={editableEl}
-        onKeyDown={handleKeypress}
-        onBlur={handleBlur}
-      >
-        {children}
-      </span>
-
-      <Icon name="fa-pencil-alt" className="pencil-icon" />
-    </StyledEditableInput>
-  );
-}

package/src/legacy/components/inputs/EditableInput/index.ts

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

package/src/legacy/components/inputs/NumberInput/NumberInput.stories.tsx

@@ -1,72 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import { Meta, StoryObj } from '@storybook/react';
-
-import { NumberInput } from './NumberInput';
-
-const meta = {
-  component: NumberInput,
-  title: 'legacy/inputs/NumberInput',
-  argTypes: {
-    className: { control: { disable: true } },
-    value: { control: { disable: true } },
-  },
-} satisfies Meta<typeof NumberInput>;
-
-export default meta;
-type Story = StoryObj<typeof NumberInput>;
-
-export const Base: Story = {
-  args: { label: 'Default Number Field' },
-};
-
-export const Required: Story = {
-  args: {
-    label: 'Required Number Field',
-    required: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Disabled Number Field',
-    disabled: true,
-  },
-};
-
-export const WithMinimum: Story = {
-  args: {
-    label: 'Positive Number Field',
-    min: 0,
-  },
-};
-
-export const WithMaximum: Story = {
-  args: {
-    label: 'Under 10 Number Field',
-    max: 9,
-  },
-};
-
-export const WithMinMax: Story = {
-  args: {
-    label: 'Select a number between 15 and 20',
-    min: 15,
-    max: 20,
-  },
-};
-
-export const WithDecimalStep: Story = {
-  args: {
-    label: 'Enter a number',
-    step: '0.1',
-  },
-};
-
-export const WithPlaceholderText: Story = {
-  args: {
-    label: 'Minimum Price',
-    step: '0.1',
-    placeholder: 'none',
-  },
-};

package/src/legacy/components/inputs/NumberInput/NumberInput.styles.ts

@@ -1,66 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS } from '@/legacy/tokens';
-
-import { inputCommon, labelCommon } from '../inputsCommon.styles';
-
-export const StyledNumberField = styled.div`
-  position: relative;
-
-  min-height: 40px;
-
-  &:not(.hiddenLabel) {
-    margin-top: 35px;
-  }
-
-  input {
-    ${inputCommon};
-
-    padding: 5px 0 10px;
-    margin-top: 0;
-
-    -moz-appearance: textfield;
-
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-      appearance: none;
-    }
-
-    &::placeholder {
-      opacity: 0.5;
-      color: ${COLORS.lightFontColor};
-    }
-
-    &:disabled {
-      background-color: transparent;
-      opacity: 0.7;
-
-      pointer-events: none;
-
-      ~ .spin-buttons {
-        opacity: 0.7;
-
-        pointer-events: none;
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  label {
-    ${labelCommon};
-
-    position: absolute;
-    top: -24px;
-  }
-
-  .spin-buttons {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-
-    display: flex;
-    flex-direction: column;
-
-    margin-bottom: 0.5em;
-  }
-`;