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

package/src/components/feedback/snacks/NetworkDetector/index.tsx

@@ -0,0 +1,73 @@
+import { forwardRef } from 'react';
+import { styled } from '../../../../styled';
+import { useTheme } from '../../../../hooks';
+import { FiWifi as WifiIcon, FiWifiOff as WifiOffIcon } from 'react-icons/fi';
+import { AiOutlineClose as CloseIcon } from 'react-icons/ai';
+import { CustomContentProps, useSnackbar } from 'notistack';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.2rem;
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  width: 300px;
+  background-color: white;
+  p {
+    font-size: 1.325rem;
+  }
+`;
+const CloseIconContainer = styled.div`
+  border-radius: 50%;
+  padding: 0.3rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }): string => theme.colors.background};
+    svg {
+      fill: white;
+      stroke: white;
+    }
+  }
+`;
+
+export const NetworkDetectorOfflineSnack = forwardRef<HTMLDivElement, CustomContentProps>(
+  function NetworkDetectorOfflineSnack({ id, message }, ref) {
+    const { closeSnackbar } = useSnackbar();
+
+    const handleClose = () => {
+      closeSnackbar(id);
+    };
+
+    return (
+      <Container ref={ref}>
+        <WifiOffIcon size={18} style={{ stroke: 'black' }} />
+        <p>{message}</p>
+        <CloseIconContainer>
+          <CloseIcon onClick={handleClose} size={18} style={{ cursor: 'pointer' }} />
+        </CloseIconContainer>
+      </Container>
+    );
+  },
+);
+
+export const NetworkDetectorOnlineSnack = forwardRef<HTMLDivElement, CustomContentProps>(
+  function NetworkDetectorOnlineSnack({ id, message }, ref) {
+    const theme = useTheme();
+    const { closeSnackbar } = useSnackbar();
+
+    const handleClose = () => {
+      closeSnackbar(id);
+    };
+
+    return (
+      <Container ref={ref}>
+        <WifiIcon size={20} style={{ stroke: theme.colors.success }} />
+        <p>{message}</p>
+        <CloseIconContainer>
+          <CloseIcon onClick={handleClose} size={18} style={{ cursor: 'pointer' }} />
+        </CloseIconContainer>
+      </Container>
+    );
+  },
+);

package/src/components/feedback/snacks/index.d.ts

@@ -0,0 +1,15 @@
+import { DefaultSnackProps } from './Default';
+import { DrawerSnackProps } from './Drawer';
+
+declare module 'notistack' {
+  interface VariantOverrides {
+    // disable default variants
+    success: false;
+    error: false;
+    info: false;
+    warning: false;
+
+    default: DefaultSnackProps;
+    draw: DrawerSnackProps;
+  }
+}

package/src/components/feedback/snacks/index.ts

@@ -0,0 +1,8 @@
+export { DefaultSnack } from './Default';
+export type { DefaultSnackProps } from './Default';
+
+export { DrawerSnack } from './Drawer';
+
+export { NetworkDetectorOfflineSnack, NetworkDetectorOnlineSnack } from './NetworkDetector';
+
+export { CookieConsentSnack } from './CookieConsent';

package/src/components/index.ts

@@ -0,0 +1,9 @@
+export * from './actions';
+export * from './feedback';
+export * from './inputs';
+export * from './data';
+export * from './charts';
+export * from './visual';
+export * from './navigation';
+export * from './other';
+export * from './dialogs/Dialog';

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { CheckBox, CheckBoxProps, Button } from '../../../components';
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
+
+const Wrapper = styled.div`
+  padding: 5rem;
+`;
+
+export default {
+  title: 'Inputs/Checkbox',
+  component: CheckBox,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+  args: {
+    name: 'checkbox',
+    loading: false,
+    defaultValue: false,
+    readOnly: false,
+    label: 'this is the label',
+    labelPosition: 'left',
+    disabled: false,
+    required: true,
+    size: 'medium',
+  },
+} as Meta<CheckBoxProps>;
+
+export const OnSubmit: StoryFn<CheckBoxProps & { defaultValue: boolean }> = (args) => {
+  type FormFields = { checkbox: boolean };
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    defaultValues: {
+      checkbox: args.defaultValue,
+    },
+  });
+  const [result, setResult] = React.useState<boolean>(false);
+
+  const onSubmit: SubmitHandler<FormFields> = (values) => {
+    setResult(values[args.name]);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CheckBox {...args} control={control} />
+        <Button type="submit">submit</Button>
+      </form>
+      <pre>value: {result ? 'true' : 'false'}</pre>
+      <p>NOTE: defaultValue will only be set on initial load. Limitation of react-hook-form.</p>
+    </>
+  );
+};
+
+export const OnChange: StoryFn<CheckBoxProps> = (args) => {
+  const { control } = useForm();
+  const CheckBoxValue = useWatch({ control, name: args.name });
+
+  return (
+    <>
+      <CheckBox {...args} control={control} />
+      <pre>value: {CheckBoxValue ? 'true' : 'false'}</pre>
+    </>
+  );
+};

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

@@ -0,0 +1,123 @@
+import { FC } from 'react';
+import { useController } from 'react-hook-form';
+import { GenericCheckBox } from '.';
+import { Container, LoadingCheckBox } from './style';
+
+import { defaultInputProps, defaultInputPropsFactory, ControlledInputProps } from '../InputProps';
+import { Label, ErrorMessage, InputWrapper, Description } from '../layout';
+
+export interface CheckBoxProps {
+  labelPosition?: 'left' | 'right';
+}
+
+export type ControlledCheckBoxProps = ControlledInputProps & CheckBoxProps;
+
+const defaultsApplier = defaultInputPropsFactory<ControlledCheckBoxProps>(defaultInputProps);
+
+export const ControlledCheckBox: FC<ControlledCheckBoxProps> = (props) => {
+  const {
+    name,
+    size,
+    label,
+    loading,
+    required,
+    readOnly,
+    disabled,
+    description,
+    labelPosition = 'left',
+    hint,
+    control,
+  } = defaultsApplier(props);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  });
+
+  if (loading) {
+    return (
+      <InputWrapper>
+        <Container>
+          {/* CASE: Show label before <CheckBox /> */}
+          {labelPosition === 'left' && label && (
+            <Label
+              error={!!error}
+              position={labelPosition}
+              size={size}
+              text={label}
+              disabled={disabled}
+              required={required}
+              hint={hint}
+              htmlFor={name}
+            />
+          )}
+          <LoadingCheckBox className="placeholder" />
+          {/* CASE: show label after <CheckBox /> */}
+          {labelPosition === 'right' && label && (
+            <Label
+              error={!!error}
+              position={labelPosition}
+              size={size}
+              text={label}
+              disabled={disabled}
+              required={required}
+              hint={hint}
+              htmlFor={name}
+            />
+          )}
+        </Container>
+        {description && <Description description={description} inputName={name} />}
+      </InputWrapper>
+    );
+  }
+
+  return (
+    <InputWrapper>
+      <Container>
+        {/* CASE: Show label before <CheckBox /> */}
+        {labelPosition === 'left' && label && (
+          <Label
+            error={!!error}
+            position={labelPosition}
+            size={size}
+            text={label}
+            disabled={disabled}
+            required={required}
+            htmlFor={name}
+          />
+        )}
+        <GenericCheckBox
+          id={name}
+          hasError={!!error}
+          hasDescription={!!description}
+          name={name}
+          disabled={disabled}
+          size={size}
+          readOnly={readOnly}
+          required={required}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          value={field.value}
+        />
+
+        {/* CASE: show label after <CheckBox /> */}
+        {labelPosition === 'right' && label && (
+          <Label
+            error={!!error}
+            position={labelPosition}
+            text={label}
+            disabled={disabled}
+            required={required}
+            htmlFor={name}
+            size={size}
+          />
+        )}
+        {error && error.message && <ErrorMessage message={error.message} />}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};

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

@@ -0,0 +1,42 @@
+import { ChangeEvent, forwardRef } from 'react';
+import { Input } from './style';
+import { defaultInputPropsFactory, defaultInputProps, GenericInputProps } from '../InputProps';
+
+export type GenericCheckBoxProps = GenericInputProps<boolean, HTMLInputElement>;
+const defaultsApplier = defaultInputPropsFactory<GenericCheckBoxProps>(defaultInputProps);
+
+// TODO: write a test that checks if the value is being processed as a boolean.
+export const GenericCheckBox = forwardRef<HTMLInputElement, GenericCheckBoxProps>(function Switch(props, ref) {
+  const {
+    readOnly,
+    disabled,
+    value = false,
+    hasError,
+    onChange,
+    id,
+    name,
+    hasDescription,
+    required,
+  } = defaultsApplier(props);
+
+  function handleOnChange(e: ChangeEvent<HTMLInputElement>) {
+    if (readOnly || disabled) return;
+    onChange(e);
+  }
+
+  return (
+    <Input
+      name={name}
+      type="checkbox"
+      hasError={hasError}
+      hasDescription={hasDescription}
+      aria-required={required}
+      checked={value}
+      readOnly={readOnly}
+      disabled={disabled}
+      id={id}
+      onChange={handleOnChange}
+      ref={ref}
+    />
+  );
+});

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

@@ -0,0 +1,4 @@
+export { GenericCheckBox } from './Generic';
+
+export { ControlledCheckBox } from './Controlled';
+export type { ControlledCheckBoxProps } from './Controlled';

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

@@ -0,0 +1,56 @@
+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 LoadingCheckBox = styled.div`
+  &.placeholder {
+    border: none;
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+    width: 2rem;
+    height: 2rem;
+    cursor: default;
+  }
+`;
+
+export const Input = styled.input<{ hasError: boolean; hasDescription: boolean }>`
+  width: 2rem;
+  height: 2rem;
+  border: 0.1rem solid ${({ theme, hasError }) => (hasError ? theme.colors.error : theme.colors.backgroundAccent)};
+  cursor: pointer;
+  position: relative;
+  padding: ${({ theme }) => theme.spacing['0_75']};
+  background: ${({ theme }) => theme.colors.backgroundAlt};
+  transition: 0.15ms linear background;
+  vertical-align: middle;
+
+  :disabled {
+    background: ${({ theme }) => theme.colors.disabled};
+  }
+
+  :checked {
+    background: ${({ theme }) => theme.colors.primary};
+
+    :disabled {
+      background: ${({ theme }) => theme.colors.disabled};
+    }
+
+    ::after {
+      position: absolute;
+      content: '';
+      display: block;
+      left: 6px;
+      width: 4px;
+      top: 3px;
+      height: 8px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+  }
+`;

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

@@ -0,0 +1,86 @@
+import React, { useState, useMemo } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { CodeField, CodeFieldProps } from '../../../components';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { Button } from '../../actions';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+export default {
+  title: 'Inputs/CodeField',
+  component: CodeField,
+  args: {
+    required: true,
+    disabled: false,
+    loading: false,
+    readOnly: false,
+    fields: 6,
+    label: 'Code field',
+    size: 'medium',
+  },
+} as Meta<CodeFieldProps>;
+
+type FormFields = { code: string };
+
+export const OnSubmit: StoryFn<CodeFieldProps> = (args) => {
+  const [result, setResult] = useState<string>();
+
+  const validationSchema = useMemo(
+    () =>
+      z.object({
+        code: z.string().min(args.fields).max(args.fields),
+      }),
+    [args.fields],
+  );
+
+  const { handleSubmit, control } = useForm<FormFields>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+  });
+  const onSubmit: SubmitHandler<FormFields> = async ({ code }) => {
+    setResult(code);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CodeField
+          control={control}
+          fields={args.fields}
+          name="code"
+          loading={args.loading}
+          disabled={args.disabled}
+          required={args.required}
+          readOnly={args.readOnly}
+          label={args.label}
+          size={args.size}
+        />
+        <Button type="submit">Submit form</Button>
+      </form>
+      <div>{result}</div>
+    </>
+  );
+};
+
+export const AutoSubmit: StoryFn<CodeFieldProps> = () => {
+  const [result, setResult] = useState<string>();
+  const { control, handleSubmit } = useForm<FormFields>();
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit: SubmitHandler<FormFields> = async ({ code }) => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+      setResult(code);
+    }, 2000);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CodeField autoSubmit={handleSubmit(onSubmit)} control={control} fields={6} loading={loading} name="code" />
+      </form>
+      <div>Result: {result}</div>
+    </>
+  );
+};

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

@@ -0,0 +1,174 @@
+import React, { KeyboardEvent, FC, useRef, useEffect, ChangeEvent, useState } from 'react';
+import { Container, InputContainer, Input, LoadingField } from './style';
+import { defaultInputProps, defaultInputPropsFactory, ControlledInputProps } from '../InputProps';
+import { useController } from 'react-hook-form';
+import { Label, ErrorMessage, Description, setAriaDescribedBy } from '../layout';
+
+export type CodeFieldProps = Omit<ControlledInputProps, 'hasError'> & {
+  name: string;
+  fields: number;
+  allowedCharacters?: RegExp;
+  autoSubmit?: () => unknown;
+};
+
+const defaultsApplier = defaultInputPropsFactory<CodeFieldProps>(defaultInputProps);
+
+export const CodeField: FC<CodeFieldProps> = (props) => {
+  const {
+    loading,
+    name,
+    fields,
+    autoSubmit,
+    allowedCharacters = /[0-9]/,
+    hint,
+    size,
+    disabled,
+    control,
+    required,
+    description,
+    readOnly,
+    label,
+  } = defaultsApplier(props);
+
+  const [showError, setShowError] = useState<boolean>(false);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({ name, control });
+
+  const fieldRefs = useRef<HTMLInputElement[]>([]);
+
+  useEffect(() => {
+    if (fieldRefs.current.length) {
+      fieldRefs.current[0].focus();
+    }
+  }, []);
+
+  const sendResult = () => {
+    const res = fieldRefs.current.map((field) => field.value).join('');
+    field.onChange(res);
+
+    if (res.length === fields) {
+      if (autoSubmit) autoSubmit();
+    }
+  };
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
+
+    const {
+      target: { value, nextElementSibling },
+    } = e;
+
+    if (value.match(allowedCharacters)) {
+      if (nextElementSibling !== null) {
+        (nextElementSibling as HTMLInputElement).focus();
+      }
+    } else {
+      e.target.value = '';
+    }
+    sendResult();
+  };
+
+  const handleOnFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    setShowError(true);
+    e.target.select();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement;
+
+    if (e.key === 'Backspace') {
+      if (target.value === '' && target.previousElementSibling !== null) {
+        if (target.previousElementSibling !== null) {
+          (target.previousElementSibling as HTMLInputElement).focus();
+          e.preventDefault();
+        }
+      } else {
+        target.value = '';
+      }
+      sendResult();
+    }
+  };
+
+  const handleOnBlur = () => {
+    if (disabled) return;
+    field.onBlur();
+    setShowError(false);
+  };
+
+  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    const value = e.clipboardData.getData('Text');
+    if (value.match(allowedCharacters)) {
+      for (let i = 0; i < fields && i < value.length; i++) {
+        fieldRefs.current[i].value = value.charAt(i);
+        if (fieldRefs.current[i].nextElementSibling !== null) {
+          (fieldRefs.current[i].nextElementSibling as HTMLInputElement).focus();
+        }
+      }
+      sendResult();
+    }
+    e.preventDefault();
+  };
+
+  if (loading) {
+    return (
+      <Container>
+        <InputContainer fields={fields}>
+          {Array.from(Array(fields).keys()).map((_, idx) => (
+            <LoadingField key={`loading-field-array-${idx}`} className="placeholder" />
+          ))}
+        </InputContainer>
+      </Container>
+    );
+  }
+
+  return (
+    <Container>
+      {label && (
+        <Label
+          required={required}
+          disabled={disabled}
+          size={size}
+          hint={hint}
+          text={label}
+          position="top"
+          error={!!error}
+          htmlFor={`${name}-0`}
+        />
+      )}
+      <InputContainer fields={fields} aria-describedby={setAriaDescribedBy(name, !!description)}>
+        {Array.from(Array(fields).keys()).map((_, i) => (
+          <Input
+            key={`${name}-${i}`}
+            autoCapitalize="off"
+            autoComplete="off"
+            hasError={!!error}
+            isDisabled={disabled}
+            disabled={disabled}
+            id={`${name}-${i}`}
+            maxLength={1}
+            name={`${name}-${i}`}
+            aria-required={required}
+            onChange={handleOnChange}
+            onFocus={handleOnFocus}
+            onBlur={handleOnBlur}
+            onKeyDown={handleKeyDown}
+            onPaste={handleOnPaste}
+            readOnly={readOnly}
+            ref={(el) => {
+              if (el) {
+                fieldRefs.current[i] = el;
+              }
+            }}
+            type="text"
+          />
+        ))}
+        {error && error.message && showError && <ErrorMessage message={error.message} />}
+        {description && <Description description={description} inputName={name} />}
+      </InputContainer>
+    </Container>
+  );
+};