@indico-data/design-system 2.43.1 → 2.44.0

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

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

@@ -1 +0,0 @@
-export { Radio, RadioGroup } from './RadioButtons';

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

@@ -1,66 +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 { Radio, RadioGroup } from './RadioGroup';
-
-const meta = {
-  component: RadioGroup,
-  title: 'legacy/inputs/RadioGroup',
-  args: {
-    value: 'andy',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof RadioGroup>;
-
-export default meta;
-type Story = StoryObj<typeof RadioGroup>;
-
-function StoryRender(props: any) {
-  return (
-    <RadioGroup {...props} defaultValue="andy">
-      <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 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/RadioGroup/RadioGroup.styles.ts

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledRadioGroup = styled.div`
-  &.horizontal {
-    display: flex;
-
-    > * {
-      margin-right: 10px;
-    }
-  }
-`;

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

@@ -1,119 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React, { createContext, useContext, useRef, useState } from 'react';
-import classNames from 'classnames';
-import { AriaRadioGroupProps, AriaRadioProps } from '@react-types/radio';
-import { useRadio, useRadioGroup } from '@react-aria/radio';
-import { useFocusRing } from '@react-aria/focus';
-import { useVisuallyHidden } from '@react-aria/visually-hidden';
-import { RadioGroupState, useRadioGroupState } from 'react-stately';
-
-import { PermafrostComponent } from '@/types';
-import { StyledRadioGroup } from './RadioGroup.styles';
-
-export type RadioGroupProps = PermafrostComponent & {
-  value?: string;
-  onChange?: (value: string) => void;
-  children: React.ReactNode;
-  className?: string;
-} & AriaRadioGroupProps;
-
-export const RadioContext = createContext({} as RadioGroupState);
-
-/**
- * Renders a group of radio buttons with no styling. This component is not
- * designed to be user-facing, and should only be used to provide functionality.
- *
- * 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(props: RadioGroupProps) {
-  const {
-    children,
-    className,
-    value,
-    id,
-    isDisabled,
-    isReadOnly,
-    label,
-    name,
-    onChange,
-    orientation,
-    defaultValue,
-  } = props;
-
-  const [lastFocusedValue, setLastFocusedValue] = useState<string | null>(null);
-
-  const radioGroupState = {
-    isDisabled: isDisabled || false,
-    isReadOnly: isReadOnly || false,
-    lastFocusedValue,
-    name: name || '',
-    defaultValue,
-    value,
-    setLastFocusedValue,
-    onChange: onChange ? (value: string) => onChange(value) : undefined,
-  };
-
-  const state = useRadioGroupState(radioGroupState);
-  const { radioGroupProps, labelProps } = useRadioGroup(props, state);
-
-  return (
-    <StyledRadioGroup
-      {...radioGroupProps}
-      className={classNames(className, { horizontal: orientation === 'horizontal' })}
-      data-cy={props['data-cy']}
-      id={id}
-    >
-      {label && (
-        <div className="groupLabel" {...labelProps}>
-          {label}
-        </div>
-      )}
-
-      <RadioContext.Provider value={state}>{children}</RadioContext.Provider>
-    </StyledRadioGroup>
-  );
-}
-
-/**
- * A single radio button and its label; no styling is applied, and the native
- * radio button is visually hidden.
- */
-export function Radio(
-  props: AriaRadioProps & {
-    className?: string;
-    isVisuallySelected?: (selectedValue: string) => void;
-  },
-) {
-  const { children, className, isDisabled, isVisuallySelected } = props;
-  const state = useContext(RadioContext);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const { visuallyHiddenProps } = useVisuallyHidden();
-
-  const { inputProps } = useRadio(props, state, inputRef);
-  const { isFocusVisible, focusProps } = useFocusRing();
-
-  let isSelected;
-
-  if (isVisuallySelected) {
-    isSelected = isVisuallySelected(state.selectedValue as string);
-  } else {
-    isSelected = state.selectedValue === props.value;
-  }
-
-  return (
-    <label
-      className={classNames(className, {
-        disabled: isDisabled || state.isDisabled,
-        selected: isSelected,
-        focused: isFocusVisible,
-      })}
-    >
-      <input {...inputProps} {...visuallyHiddenProps} {...focusProps} ref={inputRef} />
-
-      {children}
-    </label>
-  );
-}

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

@@ -1 +0,0 @@
-export { Radio as AbstractRadio, RadioGroup as AbstractRadioGroup } from './RadioGroup';

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

@@ -1,37 +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 { SearchInput } from './SearchInput';
-
-const meta = {
-  component: SearchInput,
-  title: 'legacy/inputs/SearchInput',
-  argTypes: {},
-  args: { placeholder: 'Search field placeholder' },
-} satisfies Meta<typeof SearchInput>;
-
-export default meta;
-type Story = StoryObj<typeof SearchInput>;
-
-export const Base: Story = {};
-
-export const Border: Story = {
-  args: { inputBorder: true },
-};
-
-export const SearchIcon: Story = {
-  args: { showSearchIcon: true },
-};
-
-export const BorderAndSearchIcon: Story = {
-  args: { inputBorder: true, showSearchIcon: true },
-};
-
-export const ClearInputIcon: Story = {
-  args: { showClearInputIcon: true },
-};
-
-export const ClearInputIconWithBorder: Story = {
-  args: { showClearInputIcon: true, inputBorder: true },
-};

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

@@ -1,51 +0,0 @@
-import styled from 'styled-components';
-
-import { TYPOGRAPHY } from '@/legacy/tokens';
-
-import { inputCommon } from '../inputsCommon.styles';
-
-export const StyledSearchField = styled.div`
-  position: relative;
-  background: transparent;
-
-  label {
-    position: absolute;
-    top: 4px;
-    left: 0;
-    font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-  }
-
-  input {
-    ${inputCommon};
-    padding: 5px;
-    font-size: ${TYPOGRAPHY.fontSize.base};
-    margin-bottom: 0;
-  }
-
-  &.border.showSearchIcon label {
-    top: 7px;
-    left: 5px;
-  }
-
-  &.inputBorder {
-    border: 1px solid currentColor;
-    border-radius: 4px;
-  }
-
-  &.showSearchIcon input {
-    padding: 5px 5px 5px 25px;
-  }
-
-  &.showClearInputIcon .clear-input {
-    cursor: pointer;
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    &:hover {
-      opacity: 0.5;
-    }
-  }
-`;