@takaro/lib-components 0.0.1

package/src/components/inputs/TextField/style.ts

@@ -0,0 +1,97 @@
+import { styled } from '../../../styled';
+
+export const Container = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+export const InputContainer = styled.div`
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+
+  &.placeholder {
+    height: 3.4rem;
+  }
+
+  .icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: ${({ theme }) => `auto ${theme.spacing[0]}`};
+    left: ${({ theme }) => theme.spacing['0_75']};
+  }
+
+  &:focus {
+    .icon path {
+      transition: fill 0.2s ease-in-out;
+      fill: ${({ theme }): string => theme.colors.primary};
+      stroke: ${({ theme }): string => theme.colors.primary};
+    }
+  }
+
+  .password-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: ${({ theme }) => `auto ${theme.spacing[0]}`};
+    right: ${({ theme }) => theme.spacing['1']};
+    cursor: pointer;
+    fill: ${({ theme }) => theme.colors.textAlt};
+  }
+`;
+
+export const PrefixContainer = styled.div<{ hasError: boolean }>`
+  background-color: ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.backgroundAlt)};
+  border: 1px solid ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.backgroundAccent)};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme }) => `0 ${theme.spacing['0_75']}`};
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+  white-space: nowrap;
+`;
+
+export const SuffixContainer = styled.div<{ hasError: boolean }>`
+  background-color: ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.backgroundAlt)};
+  border: 1px solid ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.backgroundAccent)};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme }) => `0 ${theme.spacing['0_75']}`};
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+  white-space: nowrap;
+`;
+
+export const Input = styled.input<{
+  hasIcon: boolean;
+  hasError: boolean;
+  hasPrefix: boolean;
+  hasSuffix: boolean;
+  isPassword: boolean;
+}>`
+  width: 100%;
+  padding-left: ${({ hasIcon, theme }): string => (hasIcon ? theme.spacing[4] : theme.spacing['1'])};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  padding-right: ${({ theme, isPassword }) => (isPassword ? theme.spacing[4] : theme.spacing['1'])};
+  border: 1px solid ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.backgroundAccent)};
+  color: ${({ theme }) => theme.colors.text};
+
+  ::selection {
+    background-color: ${({ theme }) => theme.colors.primary};
+    color: white;
+  }
+
+  ${({ hasPrefix }) => hasPrefix && 'border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none;'}
+  ${({ hasSuffix }) => hasSuffix && 'border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;'}
+
+  &:focus {
+    border: 1px solid ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.primary)};
+  }
+  ::placeholder {
+    color: ${({ theme }): string => theme.colors.textAlt};
+  }
+`;

package/src/components/inputs/TextField/util.ts

@@ -0,0 +1,19 @@
+import { TextFieldType } from './Generic';
+
+export const getFieldType = (type: TextFieldType, passwordVisible: boolean) => {
+  // we only use the type number to transform the output to number
+  // so that zod is happy
+  if (passwordVisible || type === 'number') {
+    return 'text';
+  }
+
+  return type;
+};
+
+type InputModes = 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal';
+
+export const getInputMode = (type: TextFieldType): InputModes => {
+  if (type === 'password') return 'text';
+  if (type === 'number') return 'numeric';
+  return type;
+};

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Button, Dialog, ValueConfirmationField, ValueConfirmationFieldProps } from '../../../components';
+
+export default {
+  title: 'Inputs/ValueConfirmationField',
+  component: ValueConfirmationField,
+  args: {
+    id: 'deleteConfirmation',
+    value: 'Takaro is the best',
+  },
+} as Meta<ValueConfirmationFieldProps>;
+
+export const OnChange: StoryFn<ValueConfirmationFieldProps> = (args) => {
+  const [valid, setValid] = useState<boolean>(false);
+
+  return (
+    <Dialog initialOpen={true}>
+      <Dialog.Content>
+        <Dialog.Heading>New module </Dialog.Heading>
+        <Dialog.Body>
+          <h2>Delete module</h2>
+          <p style={{ textAlign: 'center' }}>
+            Are you sure you want to delete this module? This action cannot be undone. Type
+            <strong>{args.value}</strong> to confirm
+          </p>
+          <ValueConfirmationField id={args.id} onValidChange={(valid) => setValid(valid)} value={args.value} />
+          <Button disabled={valid} text="Confirm" />
+        </Dialog.Body>
+      </Dialog.Content>
+    </Dialog>
+  );
+};

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,67 @@
+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 { 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 { ControlledSlider as Slider } from './Slider';
+export type { ControlledSliderProps as SliderProps } from './Slider';
+export { GenericSlider as UnControlledSlider } from './Slider/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 { DateRangePicker } from './Date/DateRangePicker';
+export type { DateRangePickerProps } from './Date/DateRangePicker';
+
+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,40 @@
+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 (part.match(urlPattern)) {
+          return (
+            <a key={`${i}`} href={part} target="_blank" rel="noopener noreferrer" className="underline">
+              {part}
+            </a>
+          );
+        } else {
+          return part;
+        }
+      })}
+    </StyledP>
+  );
+};
+
+export const setAriaDescribedBy = (name: string, hasDescription: boolean) => {
+  return hasDescription ? `${name}-description` : undefined;
+};

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<{ marginBottom?: string }>`
+  width: 100%;
+  margin-bottom: ${({ theme, marginBottom }) => (marginBottom ? marginBottom : 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,51 @@
+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;
+  text-transform: capitalize;
+  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,6 @@
+export { Description, setAriaDescribedBy } from './Description';
+export { InputWrapper } from './InputWrapper';
+export { ErrorMessage } from './ErrorMessage';
+
+export { Label } from './Label';
+export type { LabelProps, LabelPosition } from './Label';

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

@@ -0,0 +1,130 @@
+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,
+    inPortal,
+    canClear,
+    hasMargin = true,
+  } = 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 marginBottom={hasMargin ? undefined : '0'}>
+      <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}
+          inPortal={inPortal}
+        >
+          {children}
+        </GenericSelectField>
+        {error && error.message && showError && <ErrorMessage message={error.message} />}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};
+
+ControlledSelectField.OptionGroup = OptionGroup;
+ControlledSelectField.Option = Option;