@takaro/lib-components 0.0.0-next.0da151e

package/src/components/inputs/ValueConfirmationField/index.tsx

@@ -0,0 +1,54 @@
+import { ChangeEvent, FC, useState } from 'react';
+import { InputWrapper, Label, UnControlledTextField } from '../../../components';
+
+export interface ValueConfirmationFieldProps {
+  /// Callback to notify the parent component if the value is correct
+  onValidChange: (valid: boolean) => void;
+  /// The value you need to type
+  value: string;
+  label?: string;
+  id: string;
+  disabled?: boolean;
+}
+
+export const ValueConfirmationField: FC<ValueConfirmationFieldProps> = ({
+  value,
+  onValidChange,
+  id,
+  label = 'Confirmation',
+  disabled = false,
+}) => {
+  const [innerValue, setInnerValue] = useState<string>('');
+  const [isValid, setIsValid] = useState<boolean>(false);
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInnerValue(e.target.value);
+
+    if (e.target.value === value && isValid === false) {
+      setIsValid(true);
+      onValidChange(true);
+    } else {
+      setIsValid(false);
+      onValidChange(false);
+    }
+  };
+
+  return (
+    <InputWrapper>
+      <Label htmlFor={id} text={label} required disabled={disabled} size="tiny" error={false} position="top" />
+      <UnControlledTextField
+        type="text"
+        value={innerValue}
+        id={id}
+        disabled={false}
+        readOnly={false}
+        hasError={true}
+        hasDescription={false}
+        name="deleteConfirmation"
+        placeholder={value}
+        required
+        onChange={handleOnChange}
+      />
+    </InputWrapper>
+  );
+};

package/src/components/inputs/index.ts

@@ -0,0 +1,72 @@
+export interface PaginationProps {
+  isFetching: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  fetchNextPage: () => void;
+}
+
+export { ControlledCheckBox as CheckBox } from './CheckBox';
+export type { ControlledCheckBoxProps as CheckBoxProps } from './CheckBox';
+export { GenericCheckBox as UnControlledCheckBox } from './CheckBox/Generic';
+
+export { ControlledSelect as SelectField } from './selects/SelectField';
+export type { ControlledSelectProps as SelectFieldProps } from './selects/SelectField';
+export { GenericSelectField as UnControlledSelectField } from './selects/SelectField/Generic';
+
+export { ControlledSelectQueryField as SelectQueryField } from './selects/SelectQueryField';
+export type { ControlledSelectQueryFieldProps as SelectQueryFieldProps } from './selects/SelectQueryField';
+export { GenericSelectQueryField as UnControlledSelectQueryField } from './selects/SelectQueryField/Generic';
+export type { SelectQueryFieldProps as UnControlledSelectQueryFieldProps } from './selects/SelectQueryField/Generic';
+
+export { ControlledSwitch as Switch } from './Switch';
+export type { ControlledSwitchProps as SwitchProps } from './Switch';
+export { GenericSwitch as UnControlledSwitch } from './Switch/Generic';
+
+export { ControlledTextField as TextField } from './TextField';
+export type { ControlledTextFieldProps as TextFieldProps } from './TextField';
+export { GenericTextField as UnControlledTextField } from './TextField/Generic';
+
+export { ControlledFileField as FileField } from './FileField';
+export type { ControlledFileFieldProps as FileFieldProps } from './FileField';
+export { GenericFileField as UnControlledFileField } from './FileField/Generic';
+
+export { ControlledTextAreaField as TextAreaField } from './TextAreaField';
+export type { ControlledTextAreaFieldProps as TextAreaFieldProps } from './TextAreaField';
+export { GenericTextAreaField as UnControlledTextAreaField } from './TextAreaField/Generic';
+
+export { CodeField } from './CodeField';
+export type { CodeFieldProps } from './CodeField';
+
+export { ValueConfirmationField } from './ValueConfirmationField';
+export type { ValueConfirmationFieldProps } from './ValueConfirmationField';
+
+export { ControlledRadioGroup as RadioGroup } from './RadioGroup/Controlled';
+export type { ControlledRadioGroupProps as RadioGroupProps } from './RadioGroup/Controlled';
+export { GenericRadioGroup as UnControlledRadioGroup } from './RadioGroup/Generic';
+
+export { ControlledTagField as TagField } from './TagField';
+export type { ControlledTagFieldProps as TagFieldProps } from './TagField';
+export { GenericTagField as UnControlledTagField } from './TagField/Generic';
+
+export { EditableField } from './EditableField';
+export type { EditableFieldProps } from './EditableField';
+
+export { Label } from './layout/Label';
+export type { LabelProps } from './layout/Label';
+
+export { ErrorMessage } from './layout/ErrorMessage';
+
+export { InputWrapper } from './layout/InputWrapper';
+export { Description } from './layout/Description';
+
+export { ControlledDateRangePicker as DateRangePicker } from './Date/DateRangePicker/Controlled';
+export type { DateRangePickerProps } from './Date/DateRangePicker/Generic';
+export { GenericDateRangePicker as UnControlledDateRangePicker } from './Date/DateRangePicker/Generic';
+
+export { ControlledDurationField as DurationField } from './DurationField/Controlled';
+export type { ControlledDurationFieldProps as DurationFieldProps } from './DurationField/Controlled';
+export { GenericDurationField as UnControlledDurationField } from './DurationField/Generic';
+
+export { ControlledDatePicker as DatePicker } from './Date/DatePicker/Controlled';
+export type { ControlledDatePickerProps as DatePickerProps } from './Date/DatePicker/Controlled';
+export { GenericDatePicker as UnControlledDatePicker } from './Date/DatePicker/Generic';

package/src/components/inputs/layout/Description.tsx

@@ -0,0 +1,33 @@
+import { FC, CSSProperties } from 'react';
+import { styled } from '../../../styled';
+
+const StyledP = styled.p`
+  margin-top: ${({ theme }) => theme.spacing['0_25']};
+  color: ${({ theme }) => theme.colors.textAlt};
+  white-space: pre-wrap;
+  line-height: 1.5;
+`;
+
+interface DescriptionProps {
+  description: string;
+  inputName: string;
+  style?: CSSProperties;
+}
+
+export const Description: FC<DescriptionProps> = ({ description, inputName, style }) => {
+  const urlPattern = /(https?:\/\/[^\s)]+)/g;
+  return (
+    <StyledP id={`${inputName}-description`} style={style}>
+      {description.split(urlPattern).map((part, i) => {
+        if (i % 2 === 1) {
+          return (
+            <a key={`${i}`} href={part} target="_blank" rel="noopener noreferrer" className="underline">
+              {part}
+            </a>
+          );
+        }
+        return part;
+      })}
+    </StyledP>
+  );
+};

package/src/components/inputs/layout/ErrorMessage/ErrorMessage.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { ErrorMessage, ErrorMessageProps } from '.';
+
+export default {
+  title: 'Inputs/ErrorMessage',
+  args: {
+    message: 'This is an error message',
+  },
+} as Meta<ErrorMessageProps>;
+
+export const SingleLine: StoryFn<ErrorMessageProps> = (args) => {
+  return (
+    <div style={{ position: 'relative', width: 'fit-content' }}>
+      <span>I am the longer reference element, this way the message can be shown on a single line</span>
+      <ErrorMessage {...args} />
+    </div>
+  );
+};
+
+export const Wrapped: StoryFn<ErrorMessageProps> = (args) => {
+  return (
+    <div style={{ position: 'relative', width: 'fit-content' }}>
+      <span>I am the reference element</span>
+      <ErrorMessage {...args} />
+    </div>
+  );
+};

package/src/components/inputs/layout/ErrorMessage/index.tsx

@@ -0,0 +1,63 @@
+import { FC, useEffect, useRef, useState } from 'react';
+import { styled } from '../../../../styled';
+import { motion } from 'framer-motion';
+import { shade } from 'polished';
+
+const Container = styled(motion.div)<{ $isWrapped: boolean }>`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  bottom: ${({ theme }) => `-${theme.spacing['5']}`};
+  left: 0;
+  width: 100%;
+  height: auto;
+  background-color: ${({ theme }): string => shade(0.5, theme.colors.error)};
+  overflow: hidden;
+  border: 1px solid ${({ theme }) => theme.colors.error};
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  z-index: ${({ theme }) => theme.zIndex.errorMessage};
+  top: 100%;
+  bottom: auto;
+  padding: ${({ theme, $isWrapped }) =>
+    $isWrapped
+      ? `${theme.spacing['0_5']} ${theme.spacing['1_5']} ${theme.spacing['0_5']} ${theme.spacing['1_5']}`
+      : `${theme.spacing['0_25']} ${theme.spacing['1_5']} ${theme.spacing['0_5']} ${theme.spacing['1_5']}`};
+`;
+
+const Content = styled.span`
+  display: flex;
+  align-items: center;
+  min-width: 100%;
+  width: 100%;
+  color: white;
+  font-weight: 500;
+  line-height: 1.2;
+  min-height: ${({ theme }) => theme.spacing['2_5']};
+  white-space: normal;
+  hyphens: auto;
+`;
+
+export interface ErrorMessageProps {
+  message: string;
+}
+
+export const ErrorMessage: FC<ErrorMessageProps> = ({ message }) => {
+  const [isWrapped, setIsWrapped] = useState<boolean>(false);
+  const contentRef = useRef<HTMLSpanElement>(null);
+
+  // useEffect required since we depend on the DOM
+  useEffect(() => {
+    if (contentRef.current) {
+      setIsWrapped(contentRef.current.offsetWidth < contentRef.current.scrollWidth);
+    }
+  }, [message]);
+
+  return (
+    <Container initial={{ y: -10 }} animate={{ y: 0 }} $isWrapped={isWrapped}>
+      <Content ref={contentRef}>
+        {message}
+        {isWrapped}
+      </Content>
+    </Container>
+  );
+};

package/src/components/inputs/layout/InputWrapper.ts

@@ -0,0 +1,6 @@
+import { styled } from '../../../styled';
+
+export const InputWrapper = styled.div`
+  width: 100%;
+  margin-bottom: ${({ theme }) => theme.spacing[2]};
+`;

package/src/components/inputs/layout/Label/index.tsx

@@ -0,0 +1,71 @@
+import { FC } from 'react';
+import { Size } from '../../../../styled';
+import { Container } from './style';
+
+export type LabelPosition = 'left' | 'right' | 'top' | 'bottom';
+
+export interface LabelProps {
+  /// if `true`, the label is displayed in an error state.
+  error: boolean;
+
+  /// if `true`, the label will indicate that the input is required
+  required: boolean;
+
+  /// the size of the component, usually follows the outer form component
+  size: Size;
+
+  /// if `true`, the component is disabled
+  disabled: boolean;
+
+  /// Visible text
+  text: string;
+
+  hint?: string;
+
+  /// The id of the element the label is bound to
+  htmlFor?: string;
+
+  /// position of the label compared to the element is bound to
+  position: LabelPosition;
+
+  ///
+  onClick?: () => unknown;
+}
+
+export const Label: FC<LabelProps> = ({
+  error,
+  required,
+  // TODO: handle disabled state
+  // disabled = false,
+  size,
+  text,
+  hint,
+  disabled,
+  position,
+  htmlFor,
+  onClick = () => {},
+}) => {
+  if (!hint && required) {
+    hint = 'Required';
+  } else if (hint && required) {
+    hint += '*';
+  }
+
+  const handleOnClick = () => {
+    onClick();
+  };
+
+  return (
+    <Container
+      onClick={handleOnClick}
+      error={error}
+      size={size}
+      position={position}
+      disabled={disabled}
+      htmlFor={htmlFor}
+    >
+      {text}
+      <span>{hint}</span>
+    </Container>
+  );
+};

package/src/components/inputs/layout/Label/style.ts

@@ -0,0 +1,50 @@
+import { LabelPosition } from '.';
+import { styled, Size } from '../../../../styled';
+
+export const Container = styled.label<{
+  error: boolean;
+  size: Size;
+  position: LabelPosition;
+  disabled: boolean;
+}>`
+  color: ${({ theme, error }): string => {
+    if (error) {
+      return theme.colors.error;
+    }
+    return theme.colors.text;
+  }};
+
+  width: 100%;
+  font-size: ${({ theme }): string => theme.fontSize.small};
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  span {
+    font-size: 1rem;
+    color: ${({ theme, error, disabled }): string => {
+      if (disabled) {
+        return theme.colors.disabled;
+      }
+      if (error) {
+        return theme.colors.error;
+      }
+      return theme.colors.text;
+    }};
+  }
+
+  margin: ${({ theme, position }) => {
+    switch (position) {
+      case 'top':
+        return `${theme.spacing[0]} ${theme.spacing[0]} ${theme.spacing['0_5']} ${theme.spacing[0]}`;
+      case 'right':
+        return `${theme.spacing[0]} ${theme.spacing[0]} ${theme.spacing[0]} ${theme.spacing['0_5']}`;
+      case 'bottom':
+        return `${theme.spacing['0_5']} ${theme.spacing[0]} ${theme.spacing[0]} ${theme.spacing[0]}`;
+      case 'left':
+        return `${theme.spacing[0]} ${theme.spacing['0_5']} ${theme.spacing[0]} ${theme.spacing[0]}`;
+    }
+  }};
+`;

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

@@ -0,0 +1,8 @@
+export { Description } from './Description';
+export { InputWrapper } from './InputWrapper';
+export { ErrorMessage } from './ErrorMessage';
+
+export { setAriaDescribedBy } from './setAriaDescribedBy';
+
+export { Label } from './Label';
+export type { LabelProps, LabelPosition } from './Label';

package/src/components/inputs/layout/setAriaDescribedBy.ts

@@ -0,0 +1,3 @@
+export const setAriaDescribedBy = (name: string, hasDescription: boolean) => {
+  return hasDescription ? `${name}-description` : undefined;
+};

package/src/components/inputs/selects/SelectField/Controlled.tsx

@@ -0,0 +1,127 @@
+import { FC, PropsWithChildren, useState } from 'react';
+import { useController } from 'react-hook-form';
+import { LoadingContainer } from './style';
+import { Container } from '../sharedStyle';
+import { ControlledInputProps, defaultInputPropsFactory, defaultInputProps } from '../../InputProps';
+import { GenericSelectField } from '.';
+import { SelectFieldProps } from './Generic';
+import { Option, OptionGroup, SubComponentTypes } from '../SubComponents';
+import { ErrorMessage, Label, InputWrapper, Description } from '../../layout';
+import { Skeleton } from '../../../../components';
+
+export type ControlledSelectFieldProps = PropsWithChildren<ControlledInputProps & SelectFieldProps>;
+
+const defaultsApplier = defaultInputPropsFactory<ControlledSelectFieldProps>(defaultInputProps);
+
+export const ControlledSelectField: FC<ControlledSelectFieldProps> & SubComponentTypes = (props) => {
+  // In most cases we don't want to set default values here, but rather in the generic component.
+  const {
+    required,
+    size: componentSize,
+    label,
+    render,
+    children,
+    readOnly,
+    disabled,
+    hint,
+    description,
+    multiple,
+    name,
+    control,
+    loading,
+    enableFilter,
+    canClear,
+  } = defaultsApplier(props);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  });
+
+  const [showError, setShowError] = useState<boolean>(true);
+
+  const handleOnBlur = () => {
+    field.onBlur();
+    setShowError(true);
+  };
+
+  const handleOnFocus = () => {
+    setShowError(false);
+  };
+
+  if (loading) {
+    return (
+      <InputWrapper>
+        <Container>
+          {label && (
+            <Label
+              error={!!error}
+              text={label}
+              required={required}
+              position="top"
+              size={componentSize}
+              disabled={disabled}
+              hint={hint}
+            />
+          )}
+          <LoadingContainer>
+            <div>
+              <Skeleton variant="rectangular" width="100%" height="38px" />
+            </div>
+          </LoadingContainer>
+        </Container>
+        {description && <Description description={description} inputName={name} />}
+      </InputWrapper>
+    );
+  }
+
+  return (
+    <InputWrapper>
+      <Container>
+        {label && (
+          <Label
+            error={!!error}
+            text={label}
+            required={required}
+            position="top"
+            size={componentSize}
+            disabled={disabled}
+            hint={hint}
+          />
+        )}
+
+        {/* Typescript cannot infer the correct types here*/}
+        {/*eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-ignore */}
+        <GenericSelectField
+          name={name}
+          id={name}
+          hasError={!!error}
+          hasDescription={!!description}
+          readOnly={readOnly}
+          canClear={canClear}
+          disabled={disabled}
+          required={required}
+          size={componentSize}
+          enableFilter={enableFilter}
+          multiple={multiple}
+          onChange={field.onChange}
+          onBlur={handleOnBlur}
+          onFocus={handleOnFocus}
+          render={render}
+          value={field.value}
+        >
+          {children}
+        </GenericSelectField>
+        {error && error.message && showError && <ErrorMessage message={error.message} />}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};
+
+ControlledSelectField.OptionGroup = OptionGroup;
+ControlledSelectField.Option = Option;

package/src/components/inputs/selects/SelectField/Generic/FilterInput.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, useState } from 'react';
+import { GenericTextField } from '../../../TextField';
+import { AiOutlineSearch as SearchIcon } from 'react-icons/ai';
+import { styled } from '../../../../../styled';
+
+const Container = styled.div`
+  input {
+    background-color: ${({ theme }) => theme.colors.background};
+  }
+  h3 {
+    margin-bottom: ${({ theme }) => theme.spacing['1']};
+  }
+  padding-bottom: ${({ theme }) => theme.spacing['0_75']};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+`;
+
+interface FilterInputProps {
+  selectName: string;
+  onFilterChange: (value: string) => void;
+}
+
+export const FilterInput = forwardRef<HTMLInputElement, FilterInputProps>(function FilterInput(
+  { selectName, onFilterChange },
+  ref,
+) {
+  const [inputValue, setInputValue] = useState<string>('');
+  const onChangeHandler = (value: string) => {
+    setInputValue(value);
+    onFilterChange(value);
+  };
+
+  return (
+    <Container>
+      <GenericTextField
+        ref={ref}
+        id={`select-${selectName}`}
+        name={`select-${selectName}`}
+        hasDescription={false}
+        icon={<SearchIcon />}
+        placeholder="Filter Options"
+        value={inputValue}
+        onChange={(e) => onChangeHandler(e.target.value)}
+        size="tiny"
+        hasError={false}
+      />
+    </Container>
+  );
+});