@indico-data/design-system 2.43.0 → 2.44.0

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

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

@@ -1,154 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import { v4 as uuid } from 'uuid';
-
-import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/components';
-import { PermafrostComponent } from '@/types';
-
-import { StyledNumberField } from './NumberInput.styles';
-
-export type Props = PermafrostComponent & {
-  autoFocus?: boolean;
-  decrement?(): void;
-  disabled?: boolean;
-  hiddenLabel?: boolean;
-  increment?(): void;
-  label: string;
-  max?: number;
-  min?: number;
-  onChange(value: number | ''): void;
-  placeholder?: string;
-  required?: boolean;
-  step?: string;
-  tabIndex?: number;
-  value: number | '';
-};
-
-/**
- * Basic numeric input field. A label is required, but may be visually hidden
- * using the `hiddenLabel` property.
- */
-export function NumberInput(props: Props): React.ReactElement {
-  // ensures unique value to associate label with input
-  const fieldId = uuid();
-  const {
-    autoFocus,
-    className,
-    disabled,
-    hiddenLabel,
-    id,
-    label,
-    max,
-    min,
-    onChange,
-    placeholder,
-    required,
-    step,
-    tabIndex,
-    value,
-  } = props;
-
-  const [currentValue, setCurrentValue] = useState<number | ''>(
-    value ? value : value === 0 ? 0 : '',
-  );
-
-  const inputEl = useRef<HTMLInputElement>(null);
-
-  const increment = () => {
-    const input = inputEl.current;
-    if (input) {
-      input.stepUp();
-      // convert string value to number
-      setCurrentValue(+input.value);
-    }
-    if (props.increment) props.increment();
-  };
-
-  const decrement = () => {
-    const input = inputEl.current;
-    if (input) {
-      input.stepDown();
-      // convert string value to number
-      setCurrentValue(+input.value);
-    }
-    if (props.decrement) props.decrement();
-  };
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const targetValue = event?.target?.value;
-    setCurrentValue(targetValue === '' ? '' : +targetValue);
-  };
-
-  // When external state changes, we update local state to match, if not already
-  useEffect(() => {
-    if (currentValue === value) {
-      return;
-    }
-    setCurrentValue(value);
-  }, [value]);
-
-  // todo: this is problematic because it means on mount the onChange handler will always be fired
-  // therefore - if the onChange is some heavy operation or call to the BE - that will automatically get called
-  // without the user even doing anything
-  useEffect(() => {
-    // We must debounce the min/max evaluation until after the user has finished typing
-    const delayDebounceFn = setTimeout(() => {
-      if ((min || min === 0) && +currentValue < min) {
-        setCurrentValue('');
-        onChange('');
-      } else if ((max || max === 0) && +currentValue > max) {
-        setCurrentValue('');
-        onChange('');
-      } else if (+currentValue < 0) {
-        setCurrentValue('');
-        onChange('');
-      } else {
-        onChange(currentValue);
-      }
-    }, 1000);
-    return () => clearTimeout(delayDebounceFn);
-  }, [currentValue]);
-
-  return (
-    <StyledNumberField
-      className={classNames(className, {
-        hiddenLabel,
-      })}
-      data-cy={props['data-cy']}
-      id={id}
-    >
-      <input
-        tabIndex={tabIndex}
-        autoFocus={autoFocus}
-        id={fieldId}
-        type="number"
-        value={currentValue}
-        disabled={disabled}
-        max={max}
-        min={min}
-        onChange={handleChange}
-        placeholder={placeholder}
-        required={required}
-        step={step}
-        aria-label={hiddenLabel ? label : ''}
-        ref={inputEl}
-      />
-
-      {!hiddenLabel && <label htmlFor={fieldId}>{label}</label>}
-
-      {/* since user can increment/decrement using arrow keys, these don’t need to be tabbable */}
-      <div className="spin-buttons">
-        <Button variant="no-style" onClick={increment} tabindex={-1}>
-          <Icon name="fa-caret-up" ariaLabel="increase" />
-        </Button>
-
-        <Button variant="no-style" onClick={decrement} tabindex={-1}>
-          <Icon name="fa-caret-down" ariaLabel="decrease" />
-        </Button>
-      </div>
-    </StyledNumberField>
-  );
-}

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

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

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

@@ -1,84 +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 React, { useState } from 'react';
-
-import { COLORS } from '@/legacy/tokens';
-import { Radio, RadioGroup } from './RadioButtons';
-
-const meta = {
-  component: RadioGroup,
-  title: 'legacy/inputs/RadioButtons',
-  args: {},
-  tags: ['autodocs'],
-} satisfies Meta<typeof RadioGroup>;
-
-export default meta;
-type Story = StoryObj<typeof RadioGroup>;
-
-function StoryRender(props: any) {
-  const [value, setValue] = useState<string>('andy');
-  return (
-    <RadioGroup
-      {...props}
-      defaultValue="andy"
-      value={value}
-      onChange={(value: string) => setValue(value)}
-    >
-      <Radio value="andy">Andy</Radio>
-      <Radio value="jess">Jess</Radio>
-      <Radio value="mike">Mike</Radio>
-    </RadioGroup>
-  );
-}
-
-export const Normal: Story = {
-  args: {
-    label: 'Select a person:',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const CustomColors: Story = {
-  args: {
-    label: 'Select a person:',
-    color: `${COLORS.red}`,
-    labelColor: `${COLORS.black}`,
-    hoverAndSelectedColor: `${COLORS.blueDarknut}`,
-    focusRingColor: `${COLORS.blueDarknut}`,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const WithHiddenLabel: Story = {
-  args: {
-    ['aria-label']: 'Select a person:',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Horizontal: Story = {
-  args: {
-    label: 'Select a person:',
-    orientation: 'horizontal',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Select a person:',
-    isDisabled: true,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};

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

@@ -1,82 +0,0 @@
-import styled from 'styled-components';
-
-import { ANIMATION, COLORS, SPACING } from '@/legacy/tokens';
-import { AbstractRadioGroup } from '../RadioGroup';
-
-const radioSize = '20px';
-const strokeWidth = 2;
-
-export const StyledRadioGroup = styled(AbstractRadioGroup)<{
-  hideFocusRing: boolean;
-  color: string;
-  labelColor: string;
-  hoverAndSelectedColor: string;
-  focusRingColor: string;
-}>`
-  color: ${(props) => props.color || 'currentColor'};
-
-  .groupLabel {
-    margin-bottom: ${SPACING.sm};
-    font-size: 16px;
-    color: ${(props) => props.labelColor || COLORS.lightGray};
-  }
-
-  // this is the Radio component; something gets cranky and styles end up
-  // not applied if we create a separate StyledComponent for Radio.
-  label {
-    display: flex;
-    align-items: center;
-
-    margin-bottom: ${SPACING.sm};
-
-    &.disabled {
-      cursor: not-allowed;
-    }
-
-    &:not(.disabled) {
-      cursor: pointer;
-
-      &.selected,
-      &:hover {
-        color: ${(props) => props.hoverAndSelectedColor || COLORS.white};
-      }
-    }
-
-    transition: color ${ANIMATION.duration} ${ANIMATION.timing};
-
-    svg {
-      width: ${radioSize};
-      height: ${radioSize};
-
-      margin-top: 1px;
-      margin-right: ${SPACING.sm};
-    }
-
-    .radioCircle {
-      stroke-width: ${strokeWidth};
-    }
-
-    .radioDot {
-      opacity: 0;
-    }
-
-    .focusRing {
-      opacity: 0;
-
-      stroke: ${(props) => props.focusRingColor || COLORS.curiousBlue};
-      stroke-width: ${strokeWidth};
-    }
-
-    &.selected {
-      .radioDot {
-        opacity: 1;
-      }
-    }
-
-    &.focused {
-      .focusRing {
-        opacity: ${(props) => (props.hideFocusRing ? 0 : 1)};
-      }
-    }
-  }
-`;

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

@@ -1,63 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-import { AriaRadioProps, RadioGroupProps } from '@react-types/radio';
-
-import { AbstractRadio } from '@/legacy/components';
-import { PermafrostComponent } from '@/types';
-import { StyledRadioGroup } from './RadioButtons.styles';
-
-type Props = {
-  ['aria-label']: string;
-  children?: React.ReactNode;
-  hideFocusRing: boolean;
-  color: string;
-  labelColor: string;
-  hoverAndSelectedColor: string;
-  focusRingColor: string;
-  value: string;
-} & RadioGroupProps &
-  PermafrostComponent;
-
-/**
- * Renders a group of radio buttons.
- *
- * A group label must be included: either pass a string or markup into the
- * `label` prop, or include an `aria-label` or `aria-labelledby` attribute.
- */
-export function RadioGroup({ children, ...props }: Props) {
-  const { value, color, hideFocusRing, labelColor, hoverAndSelectedColor, focusRingColor } = props;
-  return (
-    <StyledRadioGroup
-      {...props}
-      hideFocusRing={hideFocusRing}
-      data-cy={props['data-cy']}
-      color={color}
-      labelColor={labelColor}
-      hoverAndSelectedColor={hoverAndSelectedColor}
-      focusRingColor={focusRingColor}
-      value={value}
-    >
-      {children}
-    </StyledRadioGroup>
-  );
-}
-
-/**
- * A single radio button and its label.
- */
-export function Radio({ children, ...props }: AriaRadioProps) {
-  return (
-    <AbstractRadio {...props}>
-      <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false" overflow="visible">
-        <circle cx={10} cy={10} r={9} fill="none" stroke="currentColor" className="radioCircle" />
-
-        <circle cx={10} cy={10} r={5} fill="currentColor" stroke="none" className="radioDot" />
-
-        <circle cx={10} cy={10} r={12} fill="none" className="focusRing" />
-      </svg>
-
-      {children}
-    </AbstractRadio>
-  );
-}