@takaro/lib-components 0.0.1

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

@@ -0,0 +1,56 @@
+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>((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,98 @@
+import React from 'react';
+import { 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).nonempty('Name is a required field.'),
+});
+
+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" text="Submit form" size="large" />
+      </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';

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

@@ -0,0 +1,28 @@
+import { styled } from '../../../styled';
+
+export const Container = styled.div`
+  width: 100%;
+  position: relative;
+
+  p {
+    margin-top: ${({ theme }) => theme.spacing['1']};
+    color: ${({ theme }) => theme.colors.textAlt};
+    white-space: pre-wrap;
+    line-height: 1.5;
+  }
+`;
+
+export const TextAreaContainer = styled.div``;
+
+export const TextArea = styled.textarea<{ hasError: boolean }>`
+  width: 100%;
+  border: 0.1rem solid ${({ theme, hasError }) => (hasError ? theme.colors.error : theme.colors.backgroundAccent)};
+
+  &:focus {
+    border-color: ${({ theme, hasError }) => (hasError ? theme.colors.error : theme.colors.primary)};
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.textAlt};
+  }
+`;

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

@@ -0,0 +1,120 @@
+import { FC, useState } from 'react';
+import { useController } from 'react-hook-form';
+import { ControlledInputProps, defaultInputProps, defaultInputPropsFactory } from '../InputProps';
+import { TextFieldProps, GenericTextField } from '.';
+import { isNumber } from './Generic';
+import { Container, InputContainer } from './style';
+import { Label, ErrorMessage, InputWrapper, Description } from '../layout';
+
+export type ControlledTextFieldProps = ControlledInputProps & TextFieldProps;
+
+const defaultsApplier = defaultInputPropsFactory<ControlledTextFieldProps>(defaultInputProps);
+
+export const ControlledTextField: FC<ControlledTextFieldProps> = (props) => {
+  const {
+    description,
+    loading,
+    label,
+    hint,
+    disabled,
+    required,
+    name,
+    size,
+    readOnly,
+    placeholder,
+    icon,
+    type = 'text',
+    prefix,
+    suffix,
+    control,
+  } = defaultsApplier(props);
+
+  const [showError, setShowError] = useState<boolean>(false);
+  const { field, fieldState } = useController({
+    name,
+    control,
+  });
+
+  const handleOnFocus = () => {
+    setShowError(true);
+  };
+
+  const handleOnBlur = () => {
+    field.onBlur();
+    setShowError(false);
+  };
+
+  if (loading) {
+    return (
+      <InputWrapper>
+        <Container>
+          {label && (
+            <Label
+              required={required}
+              htmlFor={name}
+              error={!!fieldState.error}
+              size={size}
+              disabled={disabled}
+              text={label}
+              position="top"
+            />
+          )}
+          <InputContainer className="placeholder" />
+        </Container>
+      </InputWrapper>
+    );
+  }
+
+  return (
+    <InputWrapper>
+      <Container>
+        {label && (
+          <Label
+            required={required}
+            hint={hint}
+            htmlFor={name}
+            error={!!fieldState.error}
+            size={size}
+            text={label}
+            disabled={disabled}
+            position="top"
+          />
+        )}
+        <GenericTextField
+          hasError={!!fieldState.error}
+          disabled={disabled}
+          name={name}
+          id={name}
+          required={required}
+          size={size}
+          readOnly={readOnly}
+          onChange={(e) => {
+            if (type === 'number') {
+              if (isNumber(e.target.value)) {
+                field.onChange(Number(e.target.value));
+              } else {
+                field.onChange(undefined);
+              }
+            } else {
+              field.onChange(e.target.value);
+            }
+          }}
+          onFocus={handleOnFocus}
+          prefix={prefix}
+          suffix={suffix}
+          icon={icon}
+          onBlur={handleOnBlur}
+          placeholder={placeholder}
+          value={field.value}
+          type={type}
+          ref={field.ref}
+          hasDescription={!!description}
+        />
+        {fieldState.error && fieldState.error.message && showError && (
+          <ErrorMessage message={fieldState.error.message} />
+        )}
+      </Container>
+      {description && <Description description={description} inputName={name} />}
+    </InputWrapper>
+  );
+};

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

@@ -0,0 +1,113 @@
+import { cloneElement, useState, ChangeEvent, ReactElement, forwardRef } from 'react';
+import { InputContainer, Input, PrefixContainer, SuffixContainer } from './style';
+
+import { Size } from '../../../styled';
+import { AiOutlineEye as ShowPasswordIcon, AiOutlineEyeInvisible as HidePasswordIcon } from 'react-icons/ai';
+import { getFieldType, getInputMode } from './util';
+import { defaultInputProps, defaultInputPropsFactory, GenericInputProps } from '../InputProps';
+import { setAriaDescribedBy } from '../layout';
+
+export function isNumber(value: unknown) {
+  const number = Number(value);
+  return !isNaN(number) && isFinite(number);
+}
+
+export type TextFieldType = 'text' | 'password' | 'email' | 'number';
+
+export interface TextFieldProps {
+  type?: TextFieldType;
+  placeholder?: string;
+  size?: Size;
+  prefix?: string;
+  suffix?: string | ReactElement;
+  icon?: ReactElement;
+}
+
+export type GenericTextFieldProps = GenericInputProps<string, HTMLInputElement> & TextFieldProps;
+
+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);
+
+  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 === '-') {
+        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>
+  );
+});

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

@@ -0,0 +1,196 @@
+import React from 'react';
+import { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { TextField, TextFieldProps, Button } from '../../../components';
+import { useForm, SubmitHandler, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { GenericTextField } from './Generic';
+
+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/TextField',
+  component: TextField,
+  args: {
+    label: 'Url',
+    placeholder: 'placeholder',
+    required: true,
+    hint: 'this is the hint',
+    prefix: 'https://',
+    type: 'text',
+    suffix: '.io',
+    loading: false,
+    name: 'name',
+    readOnly: false,
+    disabled: false,
+    description: 'this is the description',
+  },
+} as Meta<TextFieldProps>;
+
+const validationSchema = z.object({
+  name: z.string().min(6).nonempty('Name is a required field.'),
+});
+type FormFields = { name: string };
+
+export const onChange: StoryFn<TextFieldProps> = (args) => {
+  const { control } = useForm({ mode: 'onChange' });
+  const TextFieldValue = useWatch({ name: args.name, control });
+
+  return (
+    <>
+      <TextField
+        type={args.type}
+        name={args.name}
+        description={args.description}
+        control={control}
+        placeholder={args.placeholder}
+        required={args.required}
+        loading={args.loading}
+        label={args.label}
+        prefix={args.prefix}
+        suffix={args.suffix}
+        hint={args.hint}
+        readOnly={args.readOnly}
+        disabled={args.disabled}
+      />
+      <p>Value: {TextFieldValue}</p>
+    </>
+  );
+};
+
+export const OnSubmit: StoryFn<TextFieldProps> = (args) => {
+  const [result, setResult] = useState<string>('none');
+
+  const { control, handleSubmit } = useForm<FormFields>({
+    defaultValues: {
+      [args.name]: '',
+    },
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = ({ name }) => {
+    setResult(name);
+  };
+
+  return (
+    <Wrapper>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <TextField
+          control={control}
+          label={args.label}
+          name={args.name}
+          type={args.type}
+          placeholder={args.placeholder}
+          required={args.required}
+          loading={args.loading}
+          hint={args.hint}
+          readOnly={args.readOnly}
+          disabled={args.disabled}
+          description={args.description}
+        />
+        <TextField
+          control={control}
+          label={args.label}
+          name={args.name}
+          placeholder={args.placeholder}
+          prefix={args.prefix}
+          loading={args.loading}
+          required={args.required}
+          hint={args.hint}
+          readOnly={args.readOnly}
+          disabled={args.disabled}
+          description={args.description}
+        />
+        <TextField
+          control={control}
+          label={args.label}
+          name={args.name}
+          placeholder={args.placeholder}
+          suffix={args.suffix}
+          loading={args.loading}
+          required={args.required}
+          hint={args.hint}
+          readOnly={args.readOnly}
+          disabled={args.disabled}
+          description={args.description}
+        />
+        <TextField
+          control={control}
+          label={args.label}
+          name={args.name}
+          placeholder={args.placeholder}
+          prefix={args.prefix}
+          suffix={args.suffix}
+          required={args.required}
+          loading={args.loading}
+          hint={args.hint}
+          readOnly={args.readOnly}
+          disabled={args.disabled}
+          description={args.description}
+        />
+        <Button type="submit" text="Submit form" size="large" />
+      </form>
+      <p>result: {result}</p>
+    </Wrapper>
+  );
+};
+
+export const Password: StoryFn<TextFieldProps> = (args) => {
+  type FormFields = { password: string };
+  const { control } = useForm<FormFields>({
+    defaultValues: {
+      [args.name]: '',
+    },
+  });
+
+  return (
+    <Wrapper>
+      <TextField
+        control={control}
+        label={args.label}
+        name={args.name}
+        placeholder={args.placeholder}
+        type="password"
+        hint={args.hint}
+        required={args.required}
+        loading={args.loading}
+        readOnly={args.readOnly}
+        disabled={args.disabled}
+        description={args.description}
+      />
+    </Wrapper>
+  );
+};
+
+export const Generic: StoryFn = () => {
+  const [value, setValue] = useState<string>('');
+
+  return (
+    <>
+      <GenericTextField
+        hasError={false}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder="placeholder"
+        required={false}
+        name="name"
+        value={value}
+        id="generic-text-field"
+        hasDescription={false}
+        disabled={false}
+        readOnly={false}
+      />
+      <pre>{value}</pre>
+    </>
+  );
+};

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

@@ -0,0 +1,5 @@
+export { GenericTextField } from './Generic';
+export type { TextFieldProps, GenericTextFieldProps } from './Generic';
+
+export { ControlledTextField } from './Controlled';
+export type { ControlledTextFieldProps } from './Controlled';