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

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

@@ -0,0 +1,5 @@
+export { GenericFileField } from './Generic';
+export type { GenericFileFieldProps, FileFieldProps } from './Generic';
+
+export { ControlledFileField } from './Controlled';
+export type { ControlledFileFieldProps } from './Controlled';

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

@@ -0,0 +1,34 @@
+import { styled } from '../../../styled';
+
+export const Container = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+export const InputContainer = styled.div``;
+
+export const ContentContainer = styled.div<{ hasError: boolean }>`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+
+  border: 1px solid ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.backgroundAccent)};
+  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing[1]}`};
+  border-width: 0.1rem;
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  font-size: ${({ theme }) => theme.fontSize.small};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  color: ${({ theme }) => theme.colors.textAlt};
+
+  &:focus {
+    border: 1px solid ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.primary)};
+  }
+
+  span {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+`;

package/src/components/inputs/InputProps.ts

@@ -0,0 +1,59 @@
+import { ChangeEventHandler, FocusEventHandler } from 'react';
+import { Control, FieldValues } from 'react-hook-form';
+import { Size } from '../../styled';
+
+// Props that available on all fields (but no default value)
+interface InputProps extends DefaultInputProps {
+  name: string;
+}
+
+// Props for generic input props
+export interface GenericInputProps<V, T> extends InputProps {
+  value: V;
+  // Although name could be used as a unique field identifier, name is not retrievable in JsonSchemaForm/FieldTemplate
+  id: string;
+  hasDescription: boolean;
+  hasError: boolean;
+  onChange: ChangeEventHandler<T>;
+  onBlur?: FocusEventHandler<T>;
+  onFocus?: FocusEventHandler<T>;
+}
+export interface GenericInputPropsFunctionHandlers<V, D> extends InputProps {
+  value: V;
+  id: string;
+  hasError: boolean;
+  hasDescription: boolean;
+  onChange: (val: V) => void;
+  onBlur?: FocusEventHandler<D>;
+  onFocus?: FocusEventHandler<D>;
+}
+
+export interface ControlledInputProps extends InputProps {
+  control: Control<FieldValues> | Control<any>;
+  label?: string;
+  loading?: boolean;
+  hint?: string;
+  description?: string;
+}
+
+// All input components have a set of props in common which all should have the same default values.
+interface DefaultInputProps {
+  required?: boolean;
+  readOnly?: boolean;
+  disabled?: boolean;
+  size?: Size;
+}
+
+type Required<T> = {
+  [P in keyof T]-?: T[P];
+};
+export const defaultInputProps: Required<DefaultInputProps> = {
+  required: false,
+  readOnly: false,
+  disabled: false,
+  size: 'medium',
+};
+
+export function defaultInputPropsFactory<T extends InputProps>(defaultValues: Required<DefaultInputProps>) {
+  return (values: T) => Object.assign({} as Required<DefaultInputProps> & T, defaultValues, values);
+}

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

@@ -0,0 +1,45 @@
+import { FC, PropsWithChildren } from 'react';
+import { useController } from 'react-hook-form';
+import { ControlledInputProps, defaultInputProps, defaultInputPropsFactory } from '../InputProps';
+
+import { Container } from './style';
+import { RadioItem } from './RadioItem';
+import { InputWrapper, ErrorMessage, Description } from '../layout';
+import { GenericRadioGroup, RadioGroupSubComponents } from './Generic';
+
+export type ControlledRadioGroupProps = PropsWithChildren<ControlledInputProps>;
+
+const defaultsApplier = defaultInputPropsFactory<ControlledRadioGroupProps>(defaultInputProps);
+
+export const ControlledRadioGroup: FC<ControlledRadioGroupProps> & RadioGroupSubComponents = (props) => {
+  const { name, control, description, children, disabled, readOnly, required } = defaultsApplier(props);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({ name, control });
+
+  return (
+    <InputWrapper>
+      <Container>
+        <GenericRadioGroup
+          id={name}
+          name={name}
+          onChange={field.onChange}
+          value={field.value}
+          disabled={disabled}
+          readOnly={readOnly}
+          hasError={!!error}
+          required={required}
+          hasDescription={!!description}
+        >
+          {children}
+        </GenericRadioGroup>
+        {error && error.message && <ErrorMessage message={error.message} />}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};
+
+ControlledRadioGroup.Item = RadioItem;

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

@@ -0,0 +1,34 @@
+import { ChangeEvent, FC, PropsWithChildren } from 'react';
+import { defaultInputProps, defaultInputPropsFactory, GenericInputProps } from '../InputProps';
+import { RadioItem } from './RadioItem';
+import { Container } from './style';
+import { setAriaDescribedBy } from '../layout';
+import { RadioGroupContext } from './context';
+
+export interface RadioGroupSubComponents {
+  Item: typeof RadioItem;
+}
+
+export type RadioGroupProps = PropsWithChildren<GenericInputProps<string, HTMLInputElement>>;
+const defaultsApplier = defaultInputPropsFactory<RadioGroupProps>(defaultInputProps);
+
+export const GenericRadioGroup: FC<RadioGroupProps> & RadioGroupSubComponents = (props) => {
+  const { readOnly, value, name, onChange, hasDescription, disabled, children } = defaultsApplier(props);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (readOnly || disabled) return;
+    onChange(e);
+  };
+
+  return (
+    <Container role="radiogroup" aria-describedby={setAriaDescribedBy(name, hasDescription)}>
+      <RadioGroupContext.Provider
+        value={{ name, selectedValue: value, setSelectedValue: handleChange, readOnly, disabled }}
+      >
+        {children}
+      </RadioGroupContext.Provider>
+    </Container>
+  );
+};
+
+GenericRadioGroup.Item = RadioItem;

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

@@ -0,0 +1,118 @@
+import React, { ChangeEvent, useMemo, useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Button, RadioGroup, RadioGroupProps } from '../../../components';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { GenericRadioGroup } from './Generic';
+
+const options = [
+  { value: 'm', label: 'male' },
+  { value: 'f', label: 'female' },
+];
+
+export default {
+  title: 'Inputs/RadioGroup',
+  component: RadioGroup,
+  args: {
+    readOnly: false,
+    disabled: false,
+    loading: false,
+    hint: 'this is the hint',
+    label: 'Enter your gender',
+    description: 'this is the description',
+    required: true,
+  },
+} as Meta<RadioGroupProps>;
+
+export const OnSubmit: StoryFn<RadioGroupProps> = (args) => {
+  type FormFields = {
+    gender: string;
+  };
+
+  const [result, setResult] = useState<string>('');
+
+  const validationSchema = useMemo(
+    () =>
+      z.object({
+        gender: z.enum(['m', 'f']),
+      }),
+    [],
+  );
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    resolver: zodResolver(validationSchema),
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = async ({ gender }) => {
+    setResult(gender);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <RadioGroup
+          control={control}
+          loading={args.loading}
+          readOnly={args.readOnly}
+          label={args.label}
+          name="gender"
+          hint={args.hint}
+          disabled={args.disabled}
+          required={args.required}
+          description={args.description}
+        >
+          {options.map(({ value, label }) => (
+            <div
+              key={`gender-${value}`}
+              style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}
+            >
+              <RadioGroup.Item value={value} id={value} />
+              <label htmlFor={value} style={{ cursor: !args.disabled && !args.readOnly ? 'pointer' : 'default' }}>
+                {label}
+              </label>
+            </div>
+          ))}
+        </RadioGroup>
+        <Button type="submit">submit</Button>
+      </form>
+      <div>Result: {result}</div>
+    </>
+  );
+};
+
+export const Generic: StoryFn<RadioGroupProps> = (args) => {
+  const id = 'gender';
+  const [value, setValue] = useState<string>('m');
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+  return (
+    <div>
+      <GenericRadioGroup
+        id={id}
+        readOnly={args.readOnly}
+        name="gender"
+        required={args.required}
+        disabled={args.disabled}
+        hasDescription={!!args.description}
+        hasError={false}
+        value={value}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        onChange={handleOnChange}
+      >
+        {options.map(({ value, label }) => (
+          <div
+            key={`${id}-${value}`}
+            style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}
+          >
+            <GenericRadioGroup.Item value={value} id={value} />
+            <label htmlFor={value}>{label}</label>
+          </div>
+        ))}
+      </GenericRadioGroup>
+      <>{value}</>
+    </div>
+  );
+};

package/src/components/inputs/RadioGroup/RadioItem.tsx

@@ -0,0 +1,130 @@
+import { forwardRef, useRef } from 'react';
+import { useRadioGroupContext } from './context';
+import { styled } from '../../../styled';
+import { motion } from 'framer-motion';
+import { AiOutlineCheck as CheckMarkIcon } from 'react-icons/ai';
+import { shade } from 'polished';
+
+const RadioItemContainer = styled.div<{ readOnly: boolean; isChecked: boolean; disabled: boolean }>`
+  display: grid;
+  place-items: center;
+  min-width: ${({ theme }) => theme.spacing['2_5']};
+  min-height: ${({ theme }) => theme.spacing['2_5']};
+  width: ${({ theme }) => theme.spacing['2_5']};
+  height: ${({ theme }) => theme.spacing['2_5']};
+  max-width: ${({ theme }) => theme.spacing['2_5']};
+  max-height: ${({ theme }) => theme.spacing['2_5']};
+  align-items: center;
+  justify-content: center;
+  border: 0.1rem solid
+    ${({ theme, readOnly, isChecked }): string => {
+      if (readOnly) return theme.colors.backgroundAccent;
+      if (isChecked) return theme.colors.primary;
+      return theme.colors.backgroundAccent;
+    }};
+
+  background-color: ${({ theme, readOnly, disabled }) =>
+    readOnly || disabled ? theme.colors.backgroundAccent : shade(0.5, theme.colors.background)};
+  border-radius: 100%;
+  cursor: ${({ readOnly, disabled }) => {
+    if (disabled) return 'not-allowed';
+    if (readOnly) return 'default';
+    return 'pointer';
+  }};
+
+  overflow: visible;
+
+  &.placeholder {
+    border: none;
+    border-radius: 50%;
+    width: 2.2rem; /* 2.1rem + 1px shadow */
+    height: 2.2rem;
+    cursor: default;
+  }
+`;
+
+const Inner = styled(motion.div)<{ $isChecked: boolean; $readOnly: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ theme }) => theme.spacing['2_5']};
+  height: ${({ theme }) => theme.spacing['2_5']};
+  border-radius: 100%;
+  background-color: ${({ theme, $readOnly }) => {
+    if ($readOnly) return theme.colors.backgroundAlt;
+    return shade(0.5, theme.colors.primary);
+  }};
+  overflow: hidden;
+  opacity: ${({ $isChecked }): number => ($isChecked ? 1 : 0)};
+  transition: 0.1s opacity linear cubic-bezier(0.215, 0.61, 0.355, 1);
+`;
+
+export interface RadioItemProps {
+  value: string;
+  id: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+}
+
+const variants = {
+  checked: { scale: 1 },
+  unchecked: { scale: 0 },
+};
+
+export const RadioItem = forwardRef<HTMLDivElement, RadioItemProps>(function RadioItem(
+  { readOnly = false, disabled = false, value },
+  ref,
+) {
+  const {
+    setSelectedValue,
+    selectedValue,
+    name,
+    disabled: groupDisabled,
+    readOnly: groupReadOnly,
+  } = useRadioGroupContext();
+  const checked = selectedValue === value;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleOnClick = () => {
+    if (readOnly || disabled || groupDisabled || groupReadOnly) return;
+    inputRef.current?.click();
+  };
+
+  return (
+    <>
+      <input
+        id={value}
+        name={name}
+        type="radio"
+        style={{ position: 'absolute', opacity: 0, margin: 0, padding: 0, pointerEvents: 'none' }}
+        aria-hidden="true"
+        value={value}
+        tabIndex={-1}
+        checked={checked}
+        aria-readonly={readOnly || groupReadOnly}
+        aria-disabled={disabled || groupDisabled}
+        onChange={(e) => setSelectedValue(e)}
+        ref={inputRef}
+      />
+      <RadioItemContainer
+        isChecked={checked}
+        readOnly={readOnly || groupReadOnly}
+        disabled={disabled || groupDisabled}
+        onClick={handleOnClick}
+        tabIndex={disabled ? -1 : 0}
+        role="radio"
+        ref={ref}
+      >
+        <Inner
+          initial={checked ? 'checked' : 'unchecked'}
+          animate={checked ? 'checked' : 'unchecked'}
+          $isChecked={checked}
+          $readOnly={readOnly || groupReadOnly}
+          variants={variants}
+        >
+          {checked && <CheckMarkIcon />}
+        </Inner>
+      </RadioItemContainer>
+    </>
+  );
+});

package/src/components/inputs/RadioGroup/context.tsx

@@ -0,0 +1,20 @@
+import { ChangeEvent, createContext, useContext } from 'react';
+
+interface ContextValue {
+  selectedValue: string;
+  setSelectedValue: (e: ChangeEvent<HTMLInputElement>) => void;
+  name: string;
+  disabled: boolean;
+  readOnly: boolean;
+}
+
+export const RadioGroupContext = createContext<ContextValue>({} as ContextValue);
+
+export const useRadioGroupContext = () => {
+  const context = useContext(RadioGroupContext);
+
+  if (!context) {
+    throw new Error('Component must be wrapped with RadioGroup');
+  }
+  return context;
+};

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

@@ -0,0 +1,5 @@
+export { GenericRadioGroup } from './Generic';
+export type { RadioGroupProps as RadioGroupProps } from './Generic';
+
+export { ControlledRadioGroup } from './Controlled';
+export type { ControlledRadioGroupProps } from './Controlled';

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

@@ -0,0 +1,3 @@
+import { styled } from '../../../styled';
+
+export const Container = styled.div``;

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

@@ -0,0 +1,57 @@
+import { useController } from 'react-hook-form';
+import { FC } from 'react';
+import { GenericSwitch } from '.';
+import { ControlledInputProps, defaultInputProps, defaultInputPropsFactory } from '../InputProps';
+import { Label } from '../../../components';
+import { Container } from './style';
+import { InputWrapper, Description } from '../layout';
+
+export type ControlledSwitchProps = ControlledInputProps;
+
+const defaultsApplier = defaultInputPropsFactory<ControlledSwitchProps>(defaultInputProps);
+
+export const ControlledSwitch: FC<ControlledSwitchProps> = (props) => {
+  const { readOnly, size, name, required, disabled, hint, label, control, description } = defaultsApplier(props);
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  });
+
+  return (
+    <InputWrapper>
+      <Container>
+        {label && (
+          <Label
+            htmlFor={name}
+            text={label}
+            position="top"
+            error={!!error}
+            size={size}
+            required={required}
+            hint={hint}
+            disabled={disabled}
+          />
+        )}
+        <GenericSwitch
+          id={name}
+          hasError={!!error}
+          hasDescription={!!description}
+          readOnly={readOnly}
+          required={required}
+          disabled={disabled}
+          name={name}
+          size={size}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          value={field.value}
+          ref={field.ref}
+        />
+      </Container>
+      {description && <Description description={description} inputName={name} style={{ marginTop: 0 }} />}
+    </InputWrapper>
+  );
+};

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

@@ -0,0 +1,40 @@
+import { ChangeEvent, forwardRef } from 'react';
+import { Input } from './style';
+import { defaultInputProps, defaultInputPropsFactory, GenericInputProps } from '../InputProps';
+
+export type GenericSwitchProps = GenericInputProps<boolean, HTMLInputElement>;
+
+const defaultsApplier = defaultInputPropsFactory<GenericSwitchProps>(defaultInputProps);
+
+export const GenericSwitch = forwardRef<HTMLInputElement, GenericSwitchProps>(function Switch(props, ref) {
+  const {
+    readOnly,
+    onChange,
+    value: isChecked = false,
+    id,
+    hasDescription,
+    name,
+    disabled,
+    hasError,
+  } = defaultsApplier(props);
+
+  function handleOnChange(e: ChangeEvent<HTMLInputElement>) {
+    if (disabled || readOnly) return;
+    onChange(e);
+  }
+
+  return (
+    <Input
+      name={name}
+      hasError={hasError}
+      hasDescription={hasDescription}
+      readOnly={readOnly}
+      disabled={disabled}
+      type="checkbox"
+      checked={isChecked}
+      id={id}
+      onChange={handleOnChange}
+      ref={ref}
+    />
+  );
+});

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

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { Switch, SwitchProps, Button } from '../../../components';
+import { useForm, SubmitHandler, useWatch } from 'react-hook-form';
+
+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">submit</Button>
+      </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';