@addev-be/ui 0.12.2 → 0.13.0

package/src/components/forms/AutoTextArea.tsx

@@ -1,41 +1,41 @@
-import {
-  DetailedHTMLProps,
-  TextareaHTMLAttributes,
-  useEffect,
-  useState,
-} from 'react';
-
-type TextAreaProps = DetailedHTMLProps<
-  TextareaHTMLAttributes<HTMLTextAreaElement>,
-  HTMLTextAreaElement
->;
-type AutoTextAreaProps = TextAreaProps & {
-  minRows?: number;
-  maxRows?: number;
-  canGrow?: boolean;
-  canShrink?: boolean;
-};
-
-export const AutoTextArea = ({
-  className,
-  canGrow = true,
-  canShrink = true,
-  minRows = 1,
-  maxRows = 10,
-  value,
-  ...props
-}: AutoTextAreaProps) => {
-  const [rows, setRows] = useState(minRows);
-
-  useEffect(() => {
-    const linesCount = String(value).split('\n').length;
-    const rowsCount = Math.min(maxRows, Math.max(minRows, linesCount));
-    if ((canGrow && rowsCount > rows) || (canShrink && rowsCount < rows)) {
-      setRows(rowsCount);
-    }
-  }, [canGrow, canShrink, maxRows, minRows, rows, value]);
-
-  return (
-    <textarea {...props} className={className} rows={rows} value={value} />
-  );
-};
+import {
+  DetailedHTMLProps,
+  TextareaHTMLAttributes,
+  useEffect,
+  useState,
+} from 'react';
+
+type TextAreaProps = DetailedHTMLProps<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  HTMLTextAreaElement
+>;
+type AutoTextAreaProps = TextAreaProps & {
+  minRows?: number;
+  maxRows?: number;
+  canGrow?: boolean;
+  canShrink?: boolean;
+};
+
+export const AutoTextArea = ({
+  className,
+  canGrow = true,
+  canShrink = true,
+  minRows = 1,
+  maxRows = 10,
+  value,
+  ...props
+}: AutoTextAreaProps) => {
+  const [rows, setRows] = useState(minRows);
+
+  useEffect(() => {
+    const linesCount = String(value).split('\n').length;
+    const rowsCount = Math.min(maxRows, Math.max(minRows, linesCount));
+    if ((canGrow && rowsCount > rows) || (canShrink && rowsCount < rows)) {
+      setRows(rowsCount);
+    }
+  }, [canGrow, canShrink, maxRows, minRows, rows, value]);
+
+  return (
+    <textarea {...props} className={className} rows={rows} value={value} />
+  );
+};

package/src/components/forms/Button.tsx

@@ -1,133 +1,133 @@
-import { ComponentProps, forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { IconFC } from '../../Icons';
-import { ThemeColor } from '../../providers/ThemeProvider/types';
-
-type StyledButtonProps = {
-  $color?: ThemeColor;
-  $rounded?: boolean;
-  $bordered?: boolean;
-};
-
-export const StyledButton = styled.button.withConfig({
-  shouldForwardProp: () => true,
-})<StyledButtonProps>`
-  display: inline-flex;
-  vertical-align: middle;
-  align-items: center;
-  justify-content: center;
-  box-shadow: var(--shadow-sm);
-  /* font-weight: bold; */
-  border-radius: var(--rounded-md);
-  font-family: var(--font-sans);
-  cursor: pointer;
-
-  ${({ $color, $bordered = true }) =>
-    $color
-      ? css`
-          background-color: var(--color-${$color}-400);
-          border: ${$bordered
-            ? `1px solid var(--color-${$color}-500)`
-            : 'none'};
-          &:hover {
-            background-color: var(--color-${$color}-300);
-            border: ${$bordered
-              ? `1px solid var(--color-${$color}-400)`
-              : 'none'};
-          }
-          color: var(--color-${$color}-950);
-          svg {
-            fill: var(--color-${$color}-950);
-          }
-        `
-      : css`
-          background-color: var(--color-neutral-100);
-          border: ${$bordered ? `1px solid var(--color-neutral-300)` : 'none'};
-          &:hover {
-            background-color: var(--color-neutral-200);
-            border: ${$bordered
-              ? `1px solid var(--color-neutral-400)`
-              : 'none'};
-          }
-          color: var(--color-neutral-900);
-          svg {
-            fill: var(--color-neutral-900);
-          }
-        `}
-
-  ${({ $rounded }) => $rounded && 'border-radius: var(--rounded-full);'}
-
-  &.small {
-    padding: var(--space-1) var(--space-1_5);
-    font-size: var(--text-sm);
-    height: var(--space-6);
-    box-shadow: var(--shadow-sm);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-3);
-      height: var(--space-3);
-    }
-  }
-  &.medium {
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--text-base);
-    height: var(--space-8);
-    box-shadow: var(--shadow-sm);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-4);
-      height: var(--space-4);
-    }
-  }
-  &.large {
-    padding: var(--space-3) var(--space-4);
-    font-size: var(--text-lg);
-    height: var(--space-10);
-    box-shadow: var(--shadow-sm);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-5);
-      height: var(--space-5);
-    }
-  }
-`;
-
-export type ButtonProps = {
-  color?: ThemeColor;
-  size?: 'small' | 'medium' | 'large';
-  icon?: IconFC;
-  rounded?: boolean;
-  bordered?: boolean;
-};
-
-export const Button = forwardRef<
-  HTMLButtonElement,
-  ComponentProps<typeof StyledButton> & ButtonProps
->(
-  (
-    {
-      children,
-      size = 'medium',
-      icon: Icon,
-      className,
-      rounded = false,
-      color = 'neutral',
-      bordered = true,
-      ...props
-    },
-    ref
-  ) => (
-    <StyledButton
-      ref={ref}
-      className={`${size} ${className}`}
-      $color={color}
-      $rounded={rounded}
-      $bordered={bordered}
-      {...props}
-    >
-      {Icon && <Icon />}
-      {children}
-    </StyledButton>
-  )
-);
+import { ComponentProps, forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { IconFC } from '../../Icons';
+import { ThemeColor } from '../../providers/ThemeProvider/types';
+
+type StyledButtonProps = {
+  $color?: ThemeColor;
+  $rounded?: boolean;
+  $bordered?: boolean;
+};
+
+export const StyledButton = styled.button.withConfig({
+  shouldForwardProp: () => true,
+})<StyledButtonProps>`
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-sm);
+  /* font-weight: bold; */
+  border-radius: var(--rounded-md);
+  font-family: var(--font-sans);
+  cursor: pointer;
+
+  ${({ $color, $bordered = true }) =>
+    $color
+      ? css`
+          background-color: var(--color-${$color}-400);
+          border: ${$bordered
+            ? `1px solid var(--color-${$color}-500)`
+            : 'none'};
+          &:hover {
+            background-color: var(--color-${$color}-300);
+            border: ${$bordered
+              ? `1px solid var(--color-${$color}-400)`
+              : 'none'};
+          }
+          color: var(--color-${$color}-950);
+          svg {
+            fill: var(--color-${$color}-950);
+          }
+        `
+      : css`
+          background-color: var(--color-neutral-100);
+          border: ${$bordered ? `1px solid var(--color-neutral-300)` : 'none'};
+          &:hover {
+            background-color: var(--color-neutral-200);
+            border: ${$bordered
+              ? `1px solid var(--color-neutral-400)`
+              : 'none'};
+          }
+          color: var(--color-neutral-900);
+          svg {
+            fill: var(--color-neutral-900);
+          }
+        `}
+
+  ${({ $rounded }) => $rounded && 'border-radius: var(--rounded-full);'}
+
+  &.small {
+    padding: var(--space-1) var(--space-1_5);
+    font-size: var(--text-sm);
+    height: var(--space-6);
+    box-shadow: var(--shadow-sm);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-3);
+      height: var(--space-3);
+    }
+  }
+  &.medium {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-base);
+    height: var(--space-8);
+    box-shadow: var(--shadow-sm);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-4);
+      height: var(--space-4);
+    }
+  }
+  &.large {
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--text-lg);
+    height: var(--space-10);
+    box-shadow: var(--shadow-sm);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-5);
+      height: var(--space-5);
+    }
+  }
+`;
+
+export type ButtonProps = {
+  color?: ThemeColor;
+  size?: 'small' | 'medium' | 'large';
+  icon?: IconFC;
+  rounded?: boolean;
+  bordered?: boolean;
+};
+
+export const Button = forwardRef<
+  HTMLButtonElement,
+  ComponentProps<typeof StyledButton> & ButtonProps
+>(
+  (
+    {
+      children,
+      size = 'medium',
+      icon: Icon,
+      className,
+      rounded = false,
+      color = 'neutral',
+      bordered = true,
+      ...props
+    },
+    ref
+  ) => (
+    <StyledButton
+      ref={ref}
+      className={`${size} ${className}`}
+      $color={color}
+      $rounded={rounded}
+      $bordered={bordered}
+      {...props}
+    >
+      {Icon && <Icon />}
+      {children}
+    </StyledButton>
+  )
+);

package/src/components/forms/Form/Checkbox.tsx

@@ -0,0 +1,13 @@
+import { FC, InputHTMLAttributes } from 'react';
+
+import { InputContainerProps } from './types';
+import { InputWithLabel } from './InputWithLabel';
+import { StyledCheckbox } from './styles';
+
+export const Checkbox: FC<
+  InputContainerProps & InputHTMLAttributes<HTMLInputElement>
+> = ({ label, icon, ...props }) => (
+  <InputWithLabel label={label} icon={icon}>
+    <StyledCheckbox {...props} />
+  </InputWithLabel>
+);

package/src/components/forms/Form/FormGroup.tsx

@@ -0,0 +1,27 @@
+import { FC, PropsWithChildren } from 'react';
+import { FormGroupContainer, FormGroupHeader } from './styles';
+
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
+
+type FormGroupProps = PropsWithChildren<{
+  color?: ThemeColorWithIntensity;
+  title?: string;
+  subTitle?: string;
+}>;
+
+export const FormGroup: FC<FormGroupProps> = ({
+  children,
+  color,
+  title,
+  subTitle,
+}) => (
+  <FormGroupContainer color={color}>
+    {(title || subTitle) && (
+      <FormGroupHeader>
+        {title && <h3>{title}</h3>}
+        {subTitle && <h4>{subTitle}</h4>}
+      </FormGroupHeader>
+    )}
+    {children}
+  </FormGroupContainer>
+);

package/src/components/forms/Form/Input.tsx

@@ -0,0 +1,13 @@
+import { FC, InputHTMLAttributes } from 'react';
+
+import { InputContainerProps } from './types';
+import { InputWithLabel } from './InputWithLabel';
+import { StyledInput } from './styles';
+
+export const Input: FC<
+  InputContainerProps & InputHTMLAttributes<HTMLInputElement>
+> = ({ label, icon, ...props }) => (
+  <InputWithLabel label={label} icon={icon}>
+    <StyledInput {...props} />
+  </InputWithLabel>
+);

package/src/components/forms/Form/InputWithLabel.tsx

@@ -0,0 +1,18 @@
+import { InputContainer } from './styles';
+import { InputContainerProps } from './types';
+
+export const InputWithLabel = ({
+  label,
+  icon: Icon,
+  children,
+}: InputContainerProps) => (
+  <InputContainer>
+    {(label || Icon) && (
+      <span>
+        {Icon && <Icon />}
+        {label}
+      </span>
+    )}
+    {children}
+  </InputContainer>
+);

package/src/components/forms/Form/Select.tsx

@@ -0,0 +1,49 @@
+import { InputContainerProps } from './types';
+import { InputWithLabel } from './InputWithLabel';
+import { SelectHTMLAttributes } from 'react';
+import { StyledSelect } from './styles';
+
+type SelectProps<T> = {
+  items: T[];
+  itemKey: keyof T | ((item: T, index: number) => string);
+  itemLabel: keyof T | ((item: T, index: number) => string);
+  readOnly?: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Select = <T,>({
+  icon,
+  label,
+  items,
+  itemKey,
+  itemLabel,
+  readOnly,
+  ...props
+}: InputContainerProps &
+  SelectProps<T> &
+  SelectHTMLAttributes<HTMLSelectElement>) => {
+  const keyGetter =
+    typeof itemKey === 'function'
+      ? itemKey
+      : (item: T) => String(item[itemKey]);
+  const labelGetter =
+    typeof itemLabel === 'function'
+      ? itemLabel
+      : (item: T) => String(item[itemLabel]);
+
+  return (
+    <InputWithLabel label={label} icon={icon}>
+      <StyledSelect {...props} disabled={readOnly}>
+        {items.map((item, index) => {
+          const key = keyGetter(item, index);
+          const label = labelGetter(item, index);
+          return (
+            <option key={key} value={key}>
+              {label}
+            </option>
+          );
+        })}
+      </StyledSelect>
+    </InputWithLabel>
+  );
+};

package/src/components/forms/Form/TextArea.tsx

@@ -0,0 +1,13 @@
+import { FC, TextareaHTMLAttributes } from 'react';
+
+import { InputContainerProps } from './types';
+import { InputWithLabel } from './InputWithLabel';
+import { StyledTextArea } from './styles';
+
+export const TextArea: FC<
+  InputContainerProps & TextareaHTMLAttributes<HTMLTextAreaElement>
+> = ({ label, icon, ...props }) => (
+  <InputWithLabel label={label} icon={icon}>
+    <StyledTextArea {...props} />
+  </InputWithLabel>
+);

package/src/components/forms/Form/index.tsx

@@ -0,0 +1,37 @@
+import { FC, PropsWithChildren, useCallback } from 'react';
+
+import { Checkbox } from './Checkbox';
+import { FormGroup } from './FormGroup';
+import { Input } from './Input';
+import { Select } from './Select';
+import { TextArea } from './TextArea';
+
+export type FormProps = PropsWithChildren<{
+  onSubmit?: () => void;
+}>;
+
+export type FormFC = FC<FormProps> & {
+  Group: typeof FormGroup;
+  Input: typeof Input;
+  Select: typeof Select;
+  Checkbox: typeof Checkbox;
+  TextArea: typeof TextArea;
+};
+
+export const Form = ({ children, onSubmit }: FormProps) => {
+  const handleSubmit = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      onSubmit?.();
+    },
+    [onSubmit]
+  );
+
+  return <form onSubmit={handleSubmit}>{children}</form>;
+};
+
+Form.Group = FormGroup;
+Form.Input = Input;
+Form.Select = Select;
+Form.Checkbox = Checkbox;
+Form.TextArea = TextArea;

package/src/components/forms/Form/styles.ts

@@ -0,0 +1,105 @@
+import styled, { css } from 'styled-components';
+
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
+import { getColor } from '../../../providers/ThemeProvider/helpers';
+
+export const FormGroupContainer = styled.fieldset<{
+  color?: ThemeColorWithIntensity;
+}>`
+  display: flex;
+  flex-direction: column;
+  background: ${({ color = 'neutral-100' }) =>
+    `linear-gradient(180deg, var(--color-${getColor(
+      color
+    )}-200) 0%, var(--color-neutral-100) var(--space-10))`};
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-4);
+  margin: 0;
+  border: 1px solid var(--color-neutral-100);
+  gap: var(--space-2);
+  border-left: 4px solid ${({ color = 'neutral' }) => `var(--color-${color})`};
+`;
+
+export const FormGroupHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  margin-bottom: var(--space-1);
+
+  & > h3 {
+    margin: 0;
+    font-size: var(--text-lg);
+    font-weight: bold;
+  }
+  & > h4 {
+    margin: 0;
+    font-size: var(--text-sm);
+    font-weight: var(--font-normal);
+    color: var(--color-neutral-500);
+  }
+`;
+
+export const InputContainer = styled.label<{ readOnly?: boolean }>`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  border: 1px solid var(--color-neutral-200);
+  background-color: ${({ readOnly }) =>
+    readOnly ? 'var(--color-neutral-50)' : 'var(--color-neutral-0)'};
+
+  & > span {
+    color: var(--color-neutral-500);
+    font-size: var(--text-base);
+    padding: var(--space-1);
+    display: flex;
+    flex-direction: row;
+    gap: var(--space-2);
+    line-height: 1.25;
+
+    & > svg {
+      width: var(--space-4);
+      height: var(--space-4);
+      fill: var(--color-neutral-500);
+      flex-shrink: 0;
+    }
+  }
+
+  &:focus-within {
+    outline: 2px solid var(--color-primary-500);
+  }
+`;
+
+const inputCss = css`
+  font-family: inherit;
+  font-size: var(--text-base);
+  color: var(--color-neutral-900);
+  border: none;
+  padding: var(--space-1);
+  flex: 1;
+  text-align: right;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const StyledInput = styled.input`
+  ${inputCss}
+`;
+
+export const StyledSelect = styled.select`
+  ${inputCss}
+`;
+
+export const StyledTextArea = styled.textarea`
+  ${inputCss}
+  resize: none;
+`;
+
+export const StyledCheckbox = styled.input.attrs({ type: 'checkbox' })`
+  width: var(--space-4);
+  height: var(--space-4);
+`;

package/src/components/forms/Form/types.ts

@@ -0,0 +1,7 @@
+import { IconFC } from '../../../Icons';
+import { PropsWithChildren } from 'react';
+
+export type InputContainerProps = PropsWithChildren<{
+  label?: string;
+  icon?: IconFC;
+}>;