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

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 './util';
+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,138 @@
+import { cloneElement, useState, ChangeEvent, ReactElement, forwardRef } from 'react';
+import {
+  InputWrapper,
+  InputContainer,
+  Input,
+  PrefixContainer,
+  SuffixContainer,
+  HumanReadableCronContainer,
+} from './style';
+import cronstrue from 'cronstrue';
+
+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 type TextFieldType = 'text' | 'password' | 'email' | 'number' | 'cron';
+
+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>(
+  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 handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+      // not a perfect solution, but works for now
+      if (type === 'number') {
+        const value = e.target.value;
+        if (value === '' || /^-?\d*\.?\d*$/.test(value)) {
+          onChange(e);
+        }
+      } else {
+        onChange(e);
+      }
+    };
+
+    const cronOutput = type === 'cron' ? showHumanReadableCron(value) : null;
+
+    return (
+      <InputWrapper>
+        <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>
+        {cronOutput && (
+          <HumanReadableCronContainer isError={cronOutput.isError}>{cronOutput.value}</HumanReadableCronContainer>
+        )}
+      </InputWrapper>
+    );
+  },
+);
+
+function showHumanReadableCron(cron: string) {
+  if (cron === '') {
+    return { value: '', isError: false };
+  }
+
+  try {
+    return { value: cronstrue.toString(cron), isError: false };
+  } catch (e) {
+    return { value: `${e}`, isError: true };
+  }
+}

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

@@ -0,0 +1,217 @@
+import React, { 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, 'Name must be at least 6 characters'),
+});
+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="cron"
+        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" size="large">
+          Submit form
+        </Button>
+      </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>
+    </>
+  );
+};
+
+export const Cron: StoryFn = () => {
+  const [value, setValue] = useState<string>('');
+
+  return (
+    <GenericTextField
+      type="cron"
+      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}
+    />
+  );
+};

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';

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

@@ -0,0 +1,103 @@
+import { styled } from '../../../styled';
+
+export const Container = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+export const InputWrapper = styled.div``;
+
+export const InputContainer = styled.div`
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+
+  &.placeholder {
+    height: 3.4rem;
+  }
+
+  .icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: ${({ theme }) => `auto ${theme.spacing[0]}`};
+    left: ${({ theme }) => theme.spacing['0_75']};
+  }
+
+  &:focus {
+    .icon path {
+      transition: fill 0.2s ease-in-out;
+      fill: ${({ theme }): string => theme.colors.primary};
+      stroke: ${({ theme }): string => theme.colors.primary};
+    }
+  }
+
+  .password-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: ${({ theme }) => `auto ${theme.spacing[0]}`};
+    right: ${({ theme }) => theme.spacing['1']};
+    cursor: pointer;
+    fill: ${({ theme }) => theme.colors.textAlt};
+  }
+`;
+
+export const PrefixContainer = styled.div<{ hasError: boolean }>`
+  background-color: ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.backgroundAlt)};
+  border: 1px solid ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.backgroundAccent)};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme }) => `0 ${theme.spacing['0_75']}`};
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+  white-space: nowrap;
+`;
+
+export const SuffixContainer = styled.div<{ hasError: boolean }>`
+  background-color: ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.backgroundAlt)};
+  border: 1px solid ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.backgroundAccent)};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme }) => `0 ${theme.spacing['0_75']}`};
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+  white-space: nowrap;
+`;
+
+export const HumanReadableCronContainer = styled.div<{ isError: boolean }>`
+  color: ${({ theme, isError }) => (isError ? theme.colors.error : theme.colors.textAlt)};
+`;
+
+export const Input = styled.input<{
+  hasIcon: boolean;
+  hasError: boolean;
+  hasPrefix: boolean;
+  hasSuffix: boolean;
+  isPassword: boolean;
+}>`
+  width: 100%;
+  padding-left: ${({ hasIcon, theme }): string => (hasIcon ? theme.spacing[4] : theme.spacing['1'])};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  padding-right: ${({ theme, isPassword }) => (isPassword ? theme.spacing[4] : theme.spacing['1'])};
+  border: 1px solid ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.backgroundAccent)};
+  color: ${({ theme }) => theme.colors.text};
+
+  ::selection {
+    background-color: ${({ theme }) => theme.colors.primary};
+    color: white;
+  }
+
+  ${({ hasPrefix }) => hasPrefix && 'border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none;'}
+  ${({ hasSuffix }) => hasSuffix && 'border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;'}
+
+  &:focus {
+    border: 1px solid ${({ theme, hasError }): string => (hasError ? theme.colors.error : theme.colors.primary)};
+  }
+  ::placeholder {
+    color: ${({ theme }): string => theme.colors.textAlt};
+  }
+`;

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

@@ -0,0 +1,24 @@
+import { TextFieldType } from './Generic';
+
+export function isNumber(value: unknown) {
+  const number = Number(value);
+  return !isNaN(number) && isFinite(number);
+}
+
+export const getFieldType = (type: TextFieldType, passwordVisible: boolean) => {
+  // we only use the type number to transform the output to number
+  // so that zod is happy
+  if (passwordVisible || type === 'number' || type === 'cron') {
+    return 'text';
+  }
+
+  return type;
+};
+
+type InputModes = 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal';
+
+export const getInputMode = (type: TextFieldType): InputModes => {
+  if (type === 'password' || type === 'cron') return 'text';
+  if (type === 'number') return 'numeric';
+  return type;
+};

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Button, Dialog, ValueConfirmationField, ValueConfirmationFieldProps } from '../../../components';
+
+export default {
+  title: 'Inputs/ValueConfirmationField',
+  component: ValueConfirmationField,
+  args: {
+    id: 'deleteConfirmation',
+    value: 'Takaro is the best',
+  },
+} as Meta<ValueConfirmationFieldProps>;
+
+export const OnChange: StoryFn<ValueConfirmationFieldProps> = (args) => {
+  const [valid, setValid] = useState<boolean>(false);
+
+  return (
+    <Dialog initialOpen={true}>
+      <Dialog.Content>
+        <Dialog.Heading>New module </Dialog.Heading>
+        <Dialog.Body>
+          <h2>Delete module</h2>
+          <p style={{ textAlign: 'center' }}>
+            Are you sure you want to delete this module? This action cannot be undone. Type
+            <strong>{args.value}</strong> to confirm
+          </p>
+          <ValueConfirmationField id={args.id} onValidChange={(valid) => setValid(valid)} value={args.value} />
+          <Button disabled={valid}>Confirm</Button>
+        </Dialog.Body>
+      </Dialog.Content>
+    </Dialog>
+  );
+};