@takaro/lib-components 0.0.1 → 0.0.5

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

@@ -22,117 +22,117 @@ export interface TagFieldProps {
 // 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)]);
+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;
       }
 
-      // 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}
+      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}
-          onKeyDown={handleKeyDown}
-          onKeyUp={onKeyUp}
           readOnly={readOnly}
-          onBlur={onBlur}
-          onPaste={handleOnPaste}
-          onFocus={onFocus}
-          aria-describedby={setAriaDescribedBy(name, hasDescription)}
-          aria-required={required}
+          color="secondary"
         />
-      </TagsContainer>
-    );
-  }
-);
+      ))}
+      <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/TextAreaField/Generic.tsx

@@ -12,45 +12,47 @@ export interface TextAreaFieldProps {
 export type GenericTextAreaFieldProps = TextAreaFieldProps & GenericInputProps<string, HTMLTextAreaElement>;
 
 const defaultsApplier = defaultInputPropsFactory<TextAreaFieldProps & GenericInputProps<string, HTMLTextAreaElement>>(
-  defaultInputProps
+  defaultInputProps,
 );
 
-export const GenericTextAreaField = forwardRef<HTMLTextAreaElement, GenericTextAreaFieldProps>((props, ref) => {
-  const {
-    disabled,
-    required,
-    onBlur = () => {},
-    placeholder,
-    onChange,
-    onFocus = () => {},
-    name,
-    rows = 4,
-    hasError,
-    hasDescription,
-    value,
-    readOnly,
-    id,
-  } = defaultsApplier(props);
+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>
-  );
-});
+    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

@@ -1,5 +1,4 @@
-import React from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { styled } from '../../../styled';
 import { TextAreaField, TextAreaFieldProps, Button } from '../../../components';
@@ -31,7 +30,7 @@ export default {
 } as Meta<TextAreaFieldProps>;
 
 const validationSchema = z.object({
-  name: z.string().min(6).nonempty('Name is a required field.'),
+  name: z.string().min(6),
 });
 
 type FormFields = { name: string };

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

@@ -27,87 +27,89 @@ export type GenericTextFieldProps = GenericInputProps<string, HTMLInputElement>
 
 const defaultsApplier = defaultInputPropsFactory<GenericTextFieldProps>(defaultInputProps);
 
-export const GenericTextField = forwardRef<HTMLInputElement, GenericTextFieldProps>((props, ref) => {
-  const {
-    onChange,
-    onBlur = () => {},
-    onFocus = () => {},
-    name,
-    disabled,
-    required,
-    readOnly,
-    hasError,
-    placeholder,
-    icon,
-    type = 'text',
-    prefix,
-    suffix,
-    value,
-    id,
-    hasDescription,
-  } = defaultsApplier(props);
+export const GenericTextField = forwardRef<HTMLInputElement, GenericTextFieldProps>(
+  function GenericTextField(props, ref) {
+    const {
+      onChange,
+      onBlur = () => {},
+      onFocus = () => {},
+      name,
+      disabled,
+      required,
+      readOnly,
+      hasError,
+      placeholder,
+      icon,
+      type = 'text',
+      prefix,
+      suffix,
+      value,
+      id,
+      hasDescription,
+    } = defaultsApplier(props);
 
-  const [showPassword, setShowPassword] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
 
-  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
-    // not a perfect solution, but works for now
-    if (type === 'number') {
-      if (isNumber(e.target.value) || e.target.value === '-') {
+    const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+      // not a perfect solution, but works for now
+      if (type === 'number') {
+        if (isNumber(e.target.value) || e.target.value === '-') {
+          onChange(e);
+        }
+      } else {
         onChange(e);
       }
-    } else {
-      onChange(e);
-    }
-  };
+    };
 
-  return (
-    <InputContainer>
-      {prefix && <PrefixContainer hasError={hasError}>{prefix}</PrefixContainer>}
-      {icon && cloneElement(icon, { size: 18, className: 'icon' })}
-      <Input
-        autoCapitalize="off"
-        autoComplete={type === 'password' ? 'new-password' : 'off'}
-        hasError={hasError}
-        hasIcon={!!icon}
-        hasPrefix={!!prefix}
-        hasSuffix={!!suffix}
-        isPassword={type === 'password'}
-        id={id}
-        name={name}
-        onChange={handleOnChange}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        placeholder={placeholder}
-        disabled={disabled}
-        readOnly={readOnly}
-        role="presentation"
-        inputMode={getInputMode(type)}
-        type={getFieldType(type, showPassword)}
-        ref={ref}
-        value={value}
-        aria-readonly={readOnly}
-        aria-required={required}
-        aria-describedby={setAriaDescribedBy(name, hasDescription)}
-      />
-      {type === 'password' &&
-        (showPassword ? (
-          <HidePasswordIcon
-            className="password-icon"
-            onClick={() => {
-              setShowPassword(false);
-            }}
-            size={18}
-          />
-        ) : (
-          <ShowPasswordIcon
-            className="password-icon"
-            onClick={() => {
-              setShowPassword(true);
-            }}
-            size={18}
-          />
-        ))}
-      {suffix && <SuffixContainer hasError={hasError}>{suffix}</SuffixContainer>}
-    </InputContainer>
-  );
-});
+    return (
+      <InputContainer>
+        {prefix && <PrefixContainer hasError={hasError}>{prefix}</PrefixContainer>}
+        {icon && cloneElement(icon, { size: 18, className: 'icon' })}
+        <Input
+          autoCapitalize="off"
+          autoComplete={type === 'password' ? 'new-password' : 'off'}
+          hasError={hasError}
+          hasIcon={!!icon}
+          hasPrefix={!!prefix}
+          hasSuffix={!!suffix}
+          isPassword={type === 'password'}
+          id={id}
+          name={name}
+          onChange={handleOnChange}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          placeholder={placeholder}
+          disabled={disabled}
+          readOnly={readOnly}
+          role="presentation"
+          inputMode={getInputMode(type)}
+          type={getFieldType(type, showPassword)}
+          ref={ref}
+          value={value}
+          aria-readonly={readOnly}
+          aria-required={required}
+          aria-describedby={setAriaDescribedBy(name, hasDescription)}
+        />
+        {type === 'password' &&
+          (showPassword ? (
+            <HidePasswordIcon
+              className="password-icon"
+              onClick={() => {
+                setShowPassword(false);
+              }}
+              size={18}
+            />
+          ) : (
+            <ShowPasswordIcon
+              className="password-icon"
+              onClick={() => {
+                setShowPassword(true);
+              }}
+              size={18}
+            />
+          ))}
+        {suffix && <SuffixContainer hasError={hasError}>{suffix}</SuffixContainer>}
+      </InputContainer>
+    );
+  },
+);

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { styled } from '../../../styled';
 import { TextField, TextFieldProps, Button } from '../../../components';
@@ -38,11 +37,11 @@ export default {
 } as Meta<TextFieldProps>;
 
 const validationSchema = z.object({
-  name: z.string().min(6).nonempty('Name is a required field.'),
+  name: z.string().min(6, 'Name must be at least 6 characters'),
 });
 type FormFields = { name: string };
 
-export const onChange: StoryFn<TextFieldProps> = (args) => {
+export const OnChange: StoryFn<TextFieldProps> = (args) => {
   const { control } = useForm({ mode: 'onChange' });
   const TextFieldValue = useWatch({ name: args.name, control });
 

package/src/components/inputs/index.ts

@@ -55,8 +55,9 @@ 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 { 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';

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

@@ -27,9 +27,8 @@ export const Description: FC<DescriptionProps> = ({ description, inputName, styl
               {part}
             </a>
           );
-        } else {
-          return part;
         }
+        return part;
       })}
     </StyledP>
   );

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

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

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

@@ -32,7 +32,6 @@ export const ControlledSelectField: FC<ControlledSelectFieldProps> & SubComponen
     enableFilter,
     inPortal,
     canClear,
-    hasMargin = true,
   } = defaultsApplier(props);
 
   const {
@@ -81,7 +80,7 @@ export const ControlledSelectField: FC<ControlledSelectFieldProps> & SubComponen
   }
 
   return (
-    <InputWrapper marginBottom={hasMargin ? undefined : '0'}>
+    <InputWrapper>
       <Container>
         {label && (
           <Label

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

@@ -19,7 +19,10 @@ interface FilterInputProps {
   onFilterChange: (value: string) => void;
 }
 
-export const FilterInput = forwardRef<HTMLInputElement, FilterInputProps>(({ selectName, onFilterChange }, ref) => {
+export const FilterInput = forwardRef<HTMLInputElement, FilterInputProps>(function FilterInput(
+  { selectName, onFilterChange },
+  ref,
+) {
   const [inputValue, setInputValue] = useState<string>('');
   const onChangeHandler = (value: string) => {
     setInputValue(value);

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

@@ -1,6 +1,5 @@
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
-import { useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Button, SelectField, SelectFieldProps } from '../../../../components';
 import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import { styled } from '../../../../styled';
@@ -34,7 +33,7 @@ const OptionIcon = styled.img`
   color: transparent;
 `;
 
-export const onChange: StoryFn<SelectFieldProps & ExtraStoryProps> = (args) => {
+export const OnChange: StoryFn<SelectFieldProps & ExtraStoryProps> = (args) => {
   const { control } = useForm();
   const selectValue = useWatch({ control, name: 'film' });
 
@@ -88,7 +87,7 @@ export const OnSubmit: StoryFn<SelectFieldProps> = (args) => {
       z.object({
         film: z.enum(['not-sure-how-this-works', ...films.map((film) => film.name)]),
       }),
-    []
+    [],
   );
 
   const { control, handleSubmit } = useForm<FormFields>({
@@ -151,7 +150,7 @@ export const MultiSelect: StoryFn<SelectFieldProps> = (args) => {
       z.object({
         film: z.string().array(),
       }),
-    []
+    [],
   );
 
   const { control, handleSubmit } = useForm<FormFields>({
@@ -182,11 +181,11 @@ export const MultiSelect: StoryFn<SelectFieldProps> = (args) => {
                 {selectedFilms.length === 0
                   ? 'Select...'
                   : selectedFilms.length <= 3
-                  ? selectedFilms.map((film) => film.name).join(', ')
-                  : `${selectedFilms
-                      .slice(0, 3)
-                      .map((film) => film.name)
-                      .join(', ')} and ${selectedFilms.length - 3} more`}
+                    ? selectedFilms.map((film) => film.name).join(', ')
+                    : `${selectedFilms
+                        .slice(0, 3)
+                        .map((film) => film.name)
+                        .join(', ')} and ${selectedFilms.length - 3} more`}
               </div>
             );
           }}