@takaro/lib-components 0.0.1

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

@@ -0,0 +1,67 @@
+import { forwardRef, useRef } from 'react';
+import { getTransition } from '../../../helpers';
+import { Dot, ContentContainer } from './style';
+import { defaultInputProps, defaultInputPropsFactory, GenericInputProps } from '../InputProps';
+import { setAriaDescribedBy } from '../layout';
+
+export type GenericSwitchProps = GenericInputProps<boolean, HTMLInputElement>;
+
+const defaultsApplier = defaultInputPropsFactory<GenericSwitchProps>(defaultInputProps);
+
+export const GenericSwitch = forwardRef<HTMLButtonElement, GenericSwitchProps>((props, ref) => {
+  const {
+    readOnly,
+    onChange,
+    value: isChecked = false,
+    id,
+    hasDescription,
+    name,
+    disabled,
+    hasError,
+  } = defaultsApplier(props);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  function handleOnClick(): void {
+    if (readOnly || disabled) return;
+    inputRef.current?.click();
+  }
+
+  return (
+    <>
+      <input
+        type="checkbox"
+        aria-hidden="true"
+        style={{ position: 'absolute', pointerEvents: 'none', opacity: 0, margin: 0 }}
+        checked={isChecked}
+        tabIndex={-1}
+        id={`${id}-hidden-input`}
+        value="on"
+        onChange={(e) => onChange(e)}
+        ref={inputRef}
+      />
+      <ContentContainer
+        role="switch"
+        id={id}
+        isChecked={isChecked}
+        disabled={disabled}
+        readOnly={readOnly}
+        onClick={handleOnClick}
+        ref={ref}
+        aria-describedby={setAriaDescribedBy(name, hasDescription)}
+        aria-checked={isChecked}
+        hasError={hasError}
+        tabIndex={readOnly || disabled ? -1 : 0}
+        type="button"
+      >
+        <Dot
+          initial={{ right: isChecked ? '2px' : '25px' }}
+          animate={{ right: isChecked ? '2px' : '25px' }}
+          $readOnly={readOnly}
+          $isChecked={isChecked}
+          layout
+          transition={getTransition()}
+        />
+      </ContentContainer>
+    </>
+  );
+});

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import {} from '.';
+import { Switch, SwitchProps, Button } from '../../../components';
+import { useForm, SubmitHandler, useWatch } from 'react-hook-form';
+import { useState } from 'react';
+
+const Wrapper = styled.div`
+  padding: 5rem;
+  background: ${({ theme }) => theme.colors.background};
+
+  & > div {
+    margin: 0 auto;
+    padding: 0.2rem 1rem;
+  }
+
+  form {
+    width: 100%;
+  }
+`;
+
+export default {
+  title: 'Inputs/Switch',
+  component: Switch,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+  args: {
+    label: 'Do you have a car?',
+    loading: false,
+    name: 'hasCar',
+    description: 'This is a description',
+    readOnly: false,
+    required: true,
+    disabled: false,
+  },
+} as Meta<SwitchProps>;
+
+type FormFields = {
+  hasCar: boolean;
+};
+
+export const onSubmit: StoryFn<SwitchProps> = (args) => {
+  const [value, setValue] = useState<boolean>();
+  const { control, handleSubmit } = useForm<FormFields>();
+
+  const onSubmit: SubmitHandler<FormFields> = ({ hasCar }) => {
+    setValue(hasCar);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Switch
+          name={args.name}
+          label={args.label}
+          control={control}
+          description={args.description}
+          hint={args.hint}
+          loading={args.loading}
+          disabled={args.disabled}
+          required={args.required}
+          readOnly={args.readOnly}
+        />
+        <Button type="submit" text="submit" />
+      </form>
+      submitted value: {value ? 'true' : 'false'}
+    </>
+  );
+};
+
+export const OnChange: StoryFn<SwitchProps> = (args) => {
+  const { control } = useForm({ mode: 'onChange' });
+  const switchValue = useWatch({ control, name: args.name });
+
+  return (
+    <>
+      <Switch
+        control={control}
+        name={args.name}
+        label={args.label}
+        description={args.description}
+        hint={args.hint}
+        loading={args.loading}
+        disabled={args.disabled}
+        required={args.required}
+        readOnly={args.readOnly}
+      />
+      <pre>value: {switchValue ? 'true' : 'false'}</pre>
+    </>
+  );
+};

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

@@ -0,0 +1,5 @@
+export { GenericSwitch } from './Generic';
+export type { GenericSwitchProps } from './Generic';
+
+export { ControlledSwitch } from './Controlled';
+export type { ControlledSwitchProps } from './Controlled';

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

@@ -0,0 +1,56 @@
+import { styled } from '../../../styled';
+import { motion } from 'framer-motion';
+import { shade } from 'polished';
+
+export const Container = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  text-align: left;
+  margin-bottom: ${({ theme }) => theme.spacing['0_5']};
+`;
+
+export const ContentContainer = styled.button<{ isChecked: boolean; hasError: boolean; readOnly: boolean }>`
+  position: relative;
+  width: 4.2rem;
+  height: 2.5rem;
+  display: block;
+  cursor: ${({ readOnly }) => (readOnly ? 'default' : 'pointer')};
+  border-radius: 9999px;
+  border: 0.1rem solid ${({ theme, hasError }) => (hasError ? theme.colors.error : theme.colors.primary)};
+  margin: ${({ theme }) => theme.spacing[0]};
+  background-color: ${({ theme, isChecked, hasError }) => {
+    if (isChecked && hasError) {
+      return theme.colors.error;
+    }
+    return isChecked ? theme.colors.primaryShade : shade(0.5, theme.colors.background);
+  }};
+
+  &:focus {
+    border: 0.1rem solid ${({ theme, hasError }) => (hasError ? theme.colors.error : theme.colors.primary)};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+
+export const Dot = styled(motion.span)<{
+  $isChecked: boolean;
+  $readOnly: boolean;
+}>`
+  will-change: right;
+  position: absolute;
+  margin-top: -0.45rem;
+  top: calc(50% - 0.62rem);
+  border-radius: 50%;
+  width: 2.1rem;
+  height: 2.1rem;
+  background-color: ${({ theme, $readOnly, $isChecked }) => {
+    let color = $isChecked ? theme.colors.white : theme.colors.white;
+    if ($readOnly) {
+      color = theme.colors.backgroundAccent;
+    }
+    return color;
+  }};
+`;

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>(
+  (
+    {
+      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));
+      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" text="Submit" />
+      </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>
+  );
+};