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

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

@@ -0,0 +1,62 @@
+import { styled } from '../../../styled';
+
+export const Container = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  text-align: left;
+  margin-bottom: ${({ theme }) => theme.spacing['0_5']};
+`;
+
+export const Input = styled.input<{ hasError: boolean; hasDescription: boolean }>`
+  position: relative;
+  display: inline-block;
+  background: ${({ theme }) => theme.colors.backgroundAlt};
+  height: 2.475rem;
+  width: 4.125rem;
+  vertical-align: middle;
+  border-radius: 3rem;
+  box-shadow: 0px 1.5px 4.5px ${({ theme }) => theme.colors.backgroundAccent}33 inset;
+  transition: 0.25s linear background;
+  cursor: pointer;
+
+  ::before {
+    content: '';
+    display: block;
+    width: 1.875rem;
+    height: 1.875rem;
+    background: #fff;
+    border-radius: 1.8rem;
+    position: absolute;
+    top: 0.3rem;
+    left: 0.25rem;
+    box-shadow: 0px 1.5px 4.5px ${({ theme }) => theme.colors.backgroundAccent}30;
+    transition: 0.2s ease-in-out transform;
+    transform: translateX(0rem);
+  }
+
+  :focus-visible {
+    outline: 2px solid dodgerblue;
+    outline-offset: 2px;
+  }
+
+  :focus {
+    outline: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  }
+
+  :disabled {
+    background: ${({ theme }) => theme.colors.disabled};
+  }
+
+  :checked {
+    background: ${({ theme }) => theme.colors.primary};
+
+    :disabled {
+      background: ${({ theme }) => theme.colors.disabled};
+    }
+
+    ::before {
+      transform: translateX(1.5rem);
+    }
+  }
+`;

package/src/components/inputs/TagField/Controlled.tsx

@@ -0,0 +1,103 @@
+import { FC, useState } from 'react';
+import { useController } from 'react-hook-form';
+import { TagFieldProps, GenericTagField } from '.';
+import { Container, TagsContainer } from './style';
+import { ControlledInputProps, defaultInputProps, defaultInputPropsFactory } from '../InputProps';
+import { InputWrapper, Description, ErrorMessage, Label } from '../layout';
+
+export type ControlledTagFieldProps = TagFieldProps & ControlledInputProps;
+
+const defaultsApplier = defaultInputPropsFactory<ControlledTagFieldProps>(defaultInputProps);
+
+export const ControlledTagField: FC<ControlledTagFieldProps> = (props) => {
+  const {
+    loading,
+    label,
+    hint,
+    disabled,
+    required,
+    description,
+    placeholder,
+    name,
+    size,
+    readOnly,
+    control,
+    allowDuplicates,
+  } = defaultsApplier(props);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  });
+
+  const [showError, setShowError] = useState<boolean>(false);
+
+  const handleOnBlur = () => {
+    field.onBlur();
+    setShowError(false);
+  };
+
+  const handleOnFocus = () => {};
+
+  if (loading) {
+    return (
+      <Container>
+        {label && (
+          <Label
+            required={required}
+            htmlFor={name}
+            error={!!error}
+            size={size}
+            disabled={disabled}
+            text={label}
+            position="top"
+          />
+        )}
+        <TagsContainer className="placeholder" />
+      </Container>
+    );
+  }
+
+  return (
+    <InputWrapper>
+      <Container>
+        {label && (
+          <Label
+            text={label}
+            htmlFor={name}
+            error={false}
+            disabled={disabled}
+            required={required}
+            position="top"
+            size="medium"
+            hint={hint}
+          />
+        )}
+
+        <GenericTagField
+          readOnly={readOnly}
+          size={size}
+          name={name}
+          id={name}
+          ref={field.ref}
+          onBlur={handleOnBlur}
+          onFocus={handleOnFocus}
+          onChange={(values) => {
+            field.onChange(values);
+          }}
+          placeholder={placeholder}
+          allowDuplicates={allowDuplicates}
+          hasError={!!error}
+          hasDescription={!!description}
+          disabled={disabled}
+          value={field.value as string[]}
+        />
+        {error && error.message && showError && <ErrorMessage message={error.message} />}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};

package/src/components/inputs/TagField/Generic.tsx

@@ -0,0 +1,138 @@
+import { forwardRef, KeyboardEvent, ClipboardEvent, useState, useEffect } from 'react';
+import { GenericInputPropsFunctionHandlers } from '../InputProps';
+import { ZodType } from 'zod';
+import { TagsContainer, Tag } from './style';
+import { splitPaste, useDidUpdateEffect } from './util';
+import { setAriaDescribedBy } from '../layout';
+
+const defaultSeparators = ['Enter'];
+
+export interface TagFieldProps {
+  onRemoved?: (tag: string) => void;
+  tagValidationSchema?: ZodType<{ tags: string[] }, any, any>;
+  separators?: string[];
+  disableBackspaceRemove?: boolean;
+  // When using backspace, the item itself is removed and the value is shown in the inputfield
+  isEditOnRemove?: boolean;
+  allowDuplicates?: boolean;
+  placeholder?: string;
+  onKeyUp?: (e: KeyboardEvent<HTMLInputElement>) => void;
+}
+
+// these are props that should only be available on the generic version.
+export type GenericTagFieldProps = TagFieldProps & GenericInputPropsFunctionHandlers<string[], HTMLInputElement>;
+
+export const GenericTagField = forwardRef<HTMLDivElement, GenericTagFieldProps>(function GenericTagField(
+  {
+    onRemoved,
+    separators = [],
+    name,
+    readOnly,
+    placeholder,
+    // TODO: tagValidationSchema,
+    disableBackspaceRemove,
+    value = [],
+    onKeyUp,
+    allowDuplicates = false,
+    isEditOnRemove,
+    disabled = false,
+    onBlur = () => {},
+    onFocus = () => {},
+    onChange,
+    required,
+    hasDescription,
+  },
+  ref,
+) {
+  const combinedSeparators = [...defaultSeparators, ...separators];
+  const [tags, setTags] = useState<string[]>(Array.isArray(value) ? value : []);
+
+  useDidUpdateEffect(() => {
+    onChange(tags);
+  }, [tags]);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    const text = e.currentTarget.value;
+
+    // handle tag removing
+    if (!text && !disableBackspaceRemove && tags.length && e.key === 'Backspace') {
+      e.currentTarget.value = isEditOnRemove ? `${tags.at(-1)} ` : '';
+      setTags([...tags.slice(0, -1)]);
+    }
+
+    // handle new tag confirmation
+    if (text && combinedSeparators.includes(e.key)) {
+      e.preventDefault();
+
+      // TODO: check tag validation logic
+      // if (tagValidationSchema && tagValidationSchema.parse(tags)) return;
+
+      if (tags.includes(text) && !allowDuplicates) {
+        // should not add duplicate tags
+        return;
+      }
+
+      setTags([...tags, text]);
+
+      // clear input field
+      e.currentTarget.value = '';
+    }
+  };
+
+  useEffect(() => {
+    // remove duplicates from tag list when allowDuplicates is set to false
+    if (!allowDuplicates) {
+      setTags([...new Set(tags)]);
+    }
+  }, [allowDuplicates]);
+
+  const onTagDelete = (text: string) => {
+    setTags(tags.filter((tag) => tag !== text));
+    if (onRemoved) {
+      onRemoved(text);
+    }
+  };
+
+  const handleOnPaste = (event: ClipboardEvent<HTMLInputElement>) => {
+    const pasteText = event.clipboardData.getData('text');
+    if (pasteText.length < 1) return;
+
+    const pasteTags = splitPaste({
+      text: pasteText,
+      tags,
+      separators: combinedSeparators,
+    });
+    setTags([...tags, ...pasteTags]);
+    event.preventDefault();
+  };
+
+  return (
+    <TagsContainer aria-labelledby={name} ref={ref}>
+      {tags.map((tag) => (
+        <Tag
+          key={tag}
+          label={tag}
+          onDelete={() => onTagDelete(tag)}
+          disabled={disabled}
+          readOnly={readOnly}
+          color="secondary"
+        />
+      ))}
+      <input
+        type="text"
+        name={name}
+        placeholder={placeholder}
+        disabled={disabled}
+        onKeyDown={handleKeyDown}
+        onKeyUp={onKeyUp}
+        readOnly={readOnly}
+        onBlur={onBlur}
+        onPaste={handleOnPaste}
+        onFocus={onFocus}
+        aria-describedby={setAriaDescribedBy(name, hasDescription)}
+        aria-required={required}
+      />
+    </TagsContainer>
+  );
+});

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

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Button, TagField, TagFieldProps } from '../../../components';
+import { z } from 'zod';
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
+
+export default {
+  title: 'Inputs/TagField',
+  component: TagField,
+  args: {
+    label: 'Fruits',
+    placeholder: 'Press ENTER to save a value',
+    required: true,
+    disabled: false,
+    isEditOnRemove: true,
+    readOnly: false,
+    separators: [','],
+    description: 'Very basic description. But atleast it is here and can be improved in the future.',
+    name: 'fruits',
+    hint: '',
+    onBlur: () => {},
+  },
+} as Meta<TagFieldProps>;
+
+interface FormInputs {
+  tags: string[];
+}
+
+export const OnSubmit: StoryFn<TagFieldProps> = (args) => {
+  const [result, setResult] = useState<string[]>([]);
+  const { control, handleSubmit } = useForm<FormInputs>({
+    defaultValues: {
+      tags: ['jari'],
+    },
+  });
+
+  const beforeAddValidationSchema = z.object({
+    tags: z.array(z.string()),
+  });
+
+  const onSubmit: SubmitHandler<FormInputs> = ({ tags }) => {
+    setResult(() => [...tags]);
+  };
+
+  return (
+    <div style={{ marginBottom: '32px' }}>
+      <h1>Add Fruits</h1>
+      <pre>paste tester: apple,banana,jeroen</pre>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <TagField {...args} tagValidationSchema={beforeAddValidationSchema} control={control} name="tags" />
+        <Button type="submit">Submit</Button>
+      </form>
+      <pre>result: {result.join(', ')}</pre>
+    </div>
+  );
+};
+
+export const OnChange: StoryFn<TagFieldProps> = (args) => {
+  const { control } = useForm({ mode: 'onChange' });
+  const TagFieldValues = useWatch({ control, name: args.name });
+
+  return (
+    <>
+      <TagField {...args} control={control} />
+      <pre>{TagFieldValues}</pre>
+    </>
+  );
+};

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

@@ -0,0 +1,5 @@
+export { GenericTagField } from './Generic';
+export type { GenericTagFieldProps, TagFieldProps } from './Generic';
+
+export { ControlledTagField } from './Controlled';
+export type { ControlledTagFieldProps } from './Controlled';

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

@@ -0,0 +1,25 @@
+import { Chip } from '../../data/Chip';
+import { styled } from '../../../styled';
+
+export const Container = styled.div``;
+
+export const TagsContainer = styled.div`
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing['0_5']} 0 ${theme.spacing['0_5']}`};
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing[1]};
+  margin-bottom: ${({ theme }) => theme.spacing['0_75']};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+
+  input {
+    display: inline;
+    width: 100%;
+    padding-top: 0;
+    border-radius: 0;
+  }
+`;
+
+export const Tag = styled(Chip)``;

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

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+
+export function useDidUpdateEffect(fn: () => unknown, inputs: unknown[]) {
+  const didMountRef = useRef(false);
+
+  useEffect(() => {
+    if (didMountRef.current) fn();
+    else didMountRef.current = true;
+  }, inputs);
+}
+
+type splitPasteParamType = {
+  tags: Array<string>;
+  text: string;
+  separators: Array<string>;
+};
+
+export function splitPaste({ tags, text, separators }: splitPasteParamType) {
+  const dirtyTags: string[] = separators.reduce((accumulator: string[], separator) => {
+    const splitText = text.split(separator);
+    if (splitText.length > accumulator.length) accumulator = splitText;
+    return accumulator;
+  }, []);
+  const cleanTags = dirtyTags.map((tag) => tag.trim());
+
+  const cleanDuplicateTags = cleanTags.reduce((accumulator: string[], tag) => {
+    if (!tags.includes(tag)) {
+      accumulator.push(tag);
+    }
+    return accumulator;
+  }, []);
+
+  return cleanDuplicateTags;
+}

package/src/components/inputs/TextAreaField/Controlled.tsx

@@ -0,0 +1,101 @@
+import { FC, useState } from 'react';
+import { TextAreaFieldProps, GenericTextAreaField } from '.';
+import { ControlledInputProps, defaultInputPropsFactory, defaultInputProps } from '../InputProps';
+import { Container, TextAreaContainer } from './style';
+import { useController } from 'react-hook-form';
+import { InputWrapper, Description, Label, ErrorMessage } from '../layout';
+
+export type ControlledTextAreaFieldProps = TextAreaFieldProps & ControlledInputProps;
+
+const defaultsApplier = defaultInputPropsFactory<ControlledTextAreaFieldProps>(defaultInputProps);
+
+export const ControlledTextAreaField: FC<ControlledTextAreaFieldProps> = (props) => {
+  const {
+    loading,
+    label,
+    hint,
+    disabled,
+    required,
+    description,
+    placeholder,
+    control,
+    name,
+    rows = 5,
+    size,
+    readOnly,
+  } = defaultsApplier(props);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  });
+
+  const [showError, setShowError] = useState<boolean>(false);
+
+  const handleOnBlur = () => {
+    field.onBlur();
+    setShowError(false);
+  };
+  const handleOnFocus = () => {
+    setShowError(true);
+  };
+
+  if (loading) {
+    return (
+      <Container>
+        {label && (
+          <Label
+            required={required}
+            htmlFor={name}
+            error={!!error}
+            size={size}
+            disabled={disabled}
+            text={label}
+            position="top"
+          />
+        )}
+        <TextAreaContainer className="placeholder" />
+      </Container>
+    );
+  }
+
+  return (
+    <InputWrapper>
+      <Container>
+        {label && (
+          <Label
+            required={required}
+            htmlFor={name}
+            error={!!error}
+            size={size}
+            disabled={disabled}
+            text={label}
+            hint={hint}
+            position="top"
+          />
+        )}
+        <GenericTextAreaField
+          name={name}
+          id={name}
+          required={required}
+          readOnly={readOnly}
+          disabled={disabled}
+          rows={rows}
+          placeholder={placeholder}
+          value={field.value}
+          onBlur={handleOnBlur}
+          onChange={field.onChange}
+          onFocus={handleOnFocus}
+          hasError={!!error}
+          hasDescription={!!description}
+          ref={field.ref}
+        />
+        {error && error.message && showError && <ErrorMessage message={error.message} />}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};

package/src/components/inputs/TextAreaField/Generic.tsx

@@ -0,0 +1,58 @@
+import { forwardRef } from 'react';
+import { TextAreaContainer, TextArea } from './style';
+
+import { GenericInputProps, defaultInputProps, defaultInputPropsFactory } from '../InputProps';
+import { setAriaDescribedBy } from '../layout';
+
+export interface TextAreaFieldProps {
+  placeholder?: string;
+  rows?: number;
+}
+
+export type GenericTextAreaFieldProps = TextAreaFieldProps & GenericInputProps<string, HTMLTextAreaElement>;
+
+const defaultsApplier = defaultInputPropsFactory<TextAreaFieldProps & GenericInputProps<string, HTMLTextAreaElement>>(
+  defaultInputProps,
+);
+
+export const GenericTextAreaField = forwardRef<HTMLTextAreaElement, GenericTextAreaFieldProps>(
+  function GenericTextAreaField(props, ref) {
+    const {
+      disabled,
+      required,
+      onBlur = () => {},
+      placeholder,
+      onChange,
+      onFocus = () => {},
+      name,
+      rows = 4,
+      hasError,
+      hasDescription,
+      value,
+      readOnly,
+      id,
+    } = defaultsApplier(props);
+
+    return (
+      <TextAreaContainer>
+        <TextArea
+          hasError={hasError}
+          id={id}
+          name={name}
+          onChange={onChange}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          role="presentation"
+          disabled={disabled}
+          ref={ref}
+          value={value}
+          rows={rows}
+          aria-required={required}
+          aria-describedby={setAriaDescribedBy(name, hasDescription)}
+        />
+      </TextAreaContainer>
+    );
+  },
+);

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

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { TextAreaField, TextAreaFieldProps, Button } from '../../../components';
+import { useForm, SubmitHandler, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+const Wrapper = styled.div`
+  display: flex;
+  height: 100vh;
+  width: 50%;
+  margin: 0 auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default {
+  title: 'Inputs/TextAreaField',
+  component: TextAreaField,
+  args: {
+    label: 'Name',
+    placeholder: 'this is the placeholder',
+    required: true,
+    readOnly: false,
+    disabled: false,
+    name: 'TextAreaField',
+  },
+} as Meta<TextAreaFieldProps>;
+
+const validationSchema = z.object({
+  name: z.string().min(6),
+});
+
+type FormFields = { name: string };
+
+export const OnChange: StoryFn<TextAreaFieldProps> = (args) => {
+  const { control } = useForm<FormFields>({
+    mode: 'onChange',
+    resolver: zodResolver(validationSchema),
+  });
+  const TextAreaFieldValue = useWatch({
+    name: 'name',
+    control,
+    defaultValue: '',
+  });
+
+  return (
+    <>
+      <TextAreaField
+        name="name"
+        placeholder={args.placeholder}
+        required={args.required}
+        hint={args.hint}
+        label={args.label}
+        control={control}
+        readOnly={args.readOnly}
+        disabled={args.disabled}
+      />
+      <pre>value: {TextAreaFieldValue}</pre>
+    </>
+  );
+};
+
+export const OnSubmit: StoryFn<TextAreaFieldProps> = (args) => {
+  const [result, setResult] = useState<string>('none');
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    defaultValues: {
+      name: '',
+    },
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = ({ name }) => {
+    setResult(name);
+  };
+
+  return (
+    <Wrapper>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <TextAreaField
+          control={control}
+          label={args.label}
+          name="name"
+          placeholder={args.placeholder}
+          required={args.required}
+          hint={args.hint}
+        />
+        <Button type="submit" size="large">
+          Submit form
+        </Button>
+      </form>
+      <pre>result: {result}</pre>
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,5 @@
+export { GenericTextAreaField } from './Generic';
+export type { TextAreaFieldProps } from './Generic';
+
+export { ControlledTextAreaField } from './Controlled';
+export type { ControlledTextAreaFieldProps } from './Controlled';