@indico-data/design-system 1.0.1

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

@@ -0,0 +1,72 @@
+// 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: '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/components/inputs/NumberInput/NumberInput.styles.ts

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+
+import { COLORS } from '@/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/components/inputs/NumberInput/NumberInput.tsx

@@ -0,0 +1,153 @@
+// 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, 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/components/inputs/NumberInput/index.ts

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

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

@@ -0,0 +1,17 @@
+// 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: 'inputs/SearchInput',
+  argTypes: {},
+  args: { placeholder: 'Search field placeholder' },
+} satisfies Meta<typeof SearchInput>;
+
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+
+export const Base: Story = {};

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

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+import { TYPOGRAPHY } from '@/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 5px 5px 25px;
+    font-size: ${TYPOGRAPHY.fontSize.base};
+    margin-bottom: 0;
+  }
+`;

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

@@ -0,0 +1,47 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+import { v4 as uuid } from 'uuid';
+
+import { Icon } from '@/components';
+import { PermafrostComponent } from '@/types';
+
+import { StyledSearchField } from './SearchInput.styles';
+
+type Props = PermafrostComponent & {
+  inputProps?: { [key: string]: string };
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  value?: string;
+};
+
+export const SearchInput = (props: Props) => {
+  const { className, inputProps, onChange, onKeyUp, placeholder, value } = props;
+
+  const id = uuid();
+
+  return (
+    <StyledSearchField className={className} data-cy={props['data-cy']} id={props.id}>
+      <label htmlFor={id}>
+        <Icon name="fa-search" ariaLabel="search" />
+      </label>
+
+      <input
+        type="search"
+        id={id}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        onKeyUp={onKeyUp}
+        {...inputProps}
+      />
+    </StyledSearchField>
+  );
+};
+
+SearchInput.defaultProps = {
+  className: '',
+};
+
+export default SearchInput;

package/src/components/inputs/SearchInput/index.ts

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

package/src/components/inputs/TextInput/TextInput.stories.tsx

@@ -0,0 +1,104 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React, { ChangeEvent, useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { TextInput } from './TextInput';
+
+const validationErrors = [
+  'Some helpful error to display to user',
+  'Another error that may not be so helpful',
+];
+
+function StoryRender(props) {
+  const [value, setValue] = useState<string>(props.value);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return <TextInput {...props} onChange={handleChange} value={value} />;
+}
+
+const meta = {
+  component: TextInput,
+  title: 'inputs/TextInput',
+  argTypes: {
+    autoComplete: { control: { disable: true } },
+    className: { control: { disable: true } },
+    defaultValue: { control: { disable: true } },
+    inputProps: { control: { disable: true } },
+    name: { control: { disable: true } },
+    promptProps: { control: { disable: true } },
+    type: { control: { disable: true } },
+    validationErrors: { control: { disable: true } },
+    value: { control: { disable: true } },
+  },
+  args: {},
+} satisfies Meta<typeof TextInput>;
+
+export default meta;
+type Story = StoryObj<typeof TextInput>;
+
+export const Base: Story = {
+  args: { label: 'Default Text Field', placeholder: 'Placeholder for Default Input' },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const Required: Story = {
+  args: { label: 'Required Text Field', placeholder: 'Required Placeholder', required: true },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const WithPrompt: Story = {
+  args: {
+    label: 'Text Field with Prompts',
+    placeholder: 'Prompt Example',
+    displayErrors: false,
+    required: true,
+    validationErrors,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Text Field with Errors',
+    placeholder: 'Error Example',
+    displayErrors: true,
+    validationErrors,
+    value: 'This text is incorrect for some reason',
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled Text Field',
+    placeholder: 'Disabled field',
+    displayErrors: true,
+    disabled: true,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const CharacterLimit: Story = {
+  args: {
+    label: 'Text Field with a character limit',
+    maxLength: 12,
+    value: '',
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};

package/src/components/inputs/TextInput/TextInput.styles.ts

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+
+import { ANIMATION, COLORS, TYPOGRAPHY } from '@/tokens';
+
+import {
+  inputInfoCommon,
+  inputCommon,
+  labelCommon,
+  placeholderCommon,
+} from '../inputsCommon.styles';
+
+export const StyledTextInput = styled.div`
+  position: relative;
+  color: ${COLORS.defaultFontColor};
+  font-family: ${TYPOGRAPHY.fontFamily.base};
+
+  min-height: 40px;
+  margin-top: 35px;
+
+  label {
+    pointer-events: none;
+
+    position: absolute;
+    top: 6px;
+
+    transition: transform ${ANIMATION.duration} ${ANIMATION.timing};
+  }
+
+  input {
+    ${inputCommon};
+
+    padding: 5px 0 10px;
+    margin-top: 0;
+
+    border: 0 solid currentColor;
+    border-bottom-width: 1px;
+
+    &::placeholder {
+      color: inherit;
+      opacity: 0;
+
+      transition: opacity ${ANIMATION.duration} ${ANIMATION.timing};
+    }
+
+    &:focus,
+    &.filled {
+      ${placeholderCommon}
+
+      + label {
+        ${labelCommon};
+
+        transform: translateY(-30px);
+      }
+    }
+  }
+`;
+
+export const StyledInputInfo = styled.div`
+  ${inputInfoCommon};
+
+  display: flex;
+
+  p {
+    margin: 0;
+  }
+
+  .count {
+    margin-left: auto;
+  }
+
+  .isMax {
+    color: ${COLORS.white};
+  }
+`;

package/src/components/inputs/TextInput/TextInput.tsx

@@ -0,0 +1,116 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React, { ChangeEvent } from 'react';
+import classNames from 'classnames';
+import { v4 as uuid } from 'uuid';
+
+import { PermafrostComponent } from '@/types';
+
+import { StyledInputInfo, StyledTextInput } from './TextInput.styles';
+
+export type Props = PermafrostComponent & {
+  autoComplete?: 'email' | 'current-password' | 'new-password' | string;
+  autoFocus?: boolean;
+  defaultValue?: string;
+  disabled?: boolean;
+  displayErrors?: boolean;
+  inputProps?: any;
+  label?: string;
+  maxLength?: number;
+  name?: string;
+  onBlur?(): void;
+  onChange?(event: ChangeEvent<HTMLInputElement>): void;
+  onFocus?(): void;
+  placeholder?: string;
+  promptProps?: any;
+  required?: boolean;
+  type?: 'text' | 'email' | 'password' | string;
+  validationErrors?: string[];
+  value?: string;
+  readOnly?: boolean;
+};
+
+export function TextInput(props: Props): React.ReactElement {
+  // ensures unique value to associate label with input
+  const inputId = uuid();
+  const {
+    autoComplete,
+    autoFocus,
+    className,
+    defaultValue,
+    disabled,
+    displayErrors,
+    id,
+    inputProps,
+    label,
+    maxLength,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    placeholder,
+    promptProps,
+    required,
+    type = 'text',
+    validationErrors,
+    value,
+    readOnly,
+  } = props;
+
+  const errorClass: string = displayErrors ? 'error' : 'prompt';
+
+  return (
+    <StyledTextInput className={className} data-cy={props['data-cy']} id={id}>
+      <input
+        autoComplete={autoComplete}
+        autoFocus={autoFocus}
+        className={classNames('text-input__input-element', {
+          filled: (value && value.length > 0) || defaultValue,
+        })}
+        disabled={disabled}
+        defaultValue={defaultValue}
+        id={inputId}
+        maxLength={maxLength}
+        name={name}
+        onBlur={onBlur}
+        onChange={onChange}
+        onFocus={onFocus}
+        onKeyUp={(e) => {
+          if (e.key === 'Enter') {
+            e.currentTarget.blur();
+          }
+        }}
+        placeholder={placeholder}
+        required={required}
+        type={type}
+        value={value}
+        readOnly={readOnly}
+        {...inputProps}
+      />
+
+      {label ? <label htmlFor={inputId}>{label}</label> : null}
+
+      {(validationErrors || maxLength) && (
+        <StyledInputInfo>
+          {validationErrors && (
+            <div>
+              {validationErrors.map((err, i) => {
+                return (
+                  <p className={errorClass} key={i} {...promptProps}>
+                    {err}
+                  </p>
+                );
+              })}
+            </div>
+          )}
+
+          {maxLength && (
+            <div className={classNames('count', { isMax: value?.length === maxLength })}>
+              {value?.length || 0} / {maxLength}
+            </div>
+          )}
+        </StyledInputInfo>
+      )}
+    </StyledTextInput>
+  );
+}

package/src/components/inputs/TextInput/index.ts

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

package/src/components/inputs/index.ts

@@ -0,0 +1,4 @@
+export { EditableInput } from './EditableInput';
+export { NumberInput } from './NumberInput';
+export { SearchInput } from './SearchInput';
+export { TextInput } from './TextInput';