@addev-be/ui 0.17.2 → 0.17.4

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

@@ -1,81 +1,81 @@
-import { FormRow, FormRowProps } from './Row';
-import {
-  ForwardedRef,
-  SelectHTMLAttributes,
-  forwardRef,
-  useCallback,
-} from 'react';
-
-import { ReadOnlyValue } from './styles';
-
-type SelectProps<T> = {
-  items: T[];
-  value: T | null;
-  itemKey: (item: T, index: number) => string;
-  itemLabel: (item: T, index: number) => string;
-  readOnly?: boolean;
-  onChange?: (value: T | null) => void;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const SelectInner = <T,>(
-  {
-    icon,
-    label,
-    items,
-    itemKey,
-    itemLabel,
-    readOnly,
-    onChange,
-    value,
-    ...props
-  }: FormRowProps &
-    Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> &
-    SelectProps<T>,
-  ref: ForwardedRef<HTMLSelectElement>
-) => {
-  const onSelectChange = useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) => {
-      if (onChange) {
-        const selectedValue = event.target.value;
-        const selectedItem = items.find(
-          (item, index) => itemKey(item, index) == selectedValue
-        );
-        onChange(selectedItem ?? null);
-      }
-    },
-    [items, itemKey, onChange]
-  );
-
-  const selectedValue = value ? itemKey(value, -1) : undefined;
-
-  return (
-    <FormRow label={label} icon={icon} readOnly={readOnly}>
-      {readOnly ? (
-        <ReadOnlyValue>
-          {(value ? itemLabel(value, 0) : '-') || '-'}
-        </ReadOnlyValue>
-      ) : (
-        <select
-          {...props}
-          disabled={readOnly}
-          value={selectedValue}
-          onChange={onSelectChange}
-          ref={ref}
-        >
-          {items.map((item, index) => {
-            const key = itemKey(item, index);
-            const label = itemLabel(item, index);
-            return (
-              <option key={key} value={key}>
-                {label}
-              </option>
-            );
-          })}
-        </select>
-      )}
-    </FormRow>
-  );
-};
-
-export const Select = forwardRef(SelectInner);
+import { FormRow, FormRowProps } from './Row';
+import {
+  ForwardedRef,
+  SelectHTMLAttributes,
+  forwardRef,
+  useCallback,
+} from 'react';
+
+import { ReadOnlyValue } from './styles';
+
+type SelectProps<T> = {
+  items: T[];
+  value: T | null;
+  itemKey: (item: T, index: number) => string;
+  itemLabel: (item: T, index: number) => string;
+  readOnly?: boolean;
+  onChange?: (value: T | null) => void;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const SelectInner = <T,>(
+  {
+    icon,
+    label,
+    items,
+    itemKey,
+    itemLabel,
+    readOnly,
+    onChange,
+    value,
+    ...props
+  }: FormRowProps &
+    Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> &
+    SelectProps<T>,
+  ref: ForwardedRef<HTMLSelectElement>
+) => {
+  const onSelectChange = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      if (onChange) {
+        const selectedValue = event.target.value;
+        const selectedItem = items.find(
+          (item, index) => itemKey(item, index) == selectedValue
+        );
+        onChange(selectedItem ?? null);
+      }
+    },
+    [items, itemKey, onChange]
+  );
+
+  const selectedValue = value ? itemKey(value, -1) : undefined;
+
+  return (
+    <FormRow label={label} icon={icon} readOnly={readOnly}>
+      {readOnly ? (
+        <ReadOnlyValue>
+          {(value ? itemLabel(value, 0) : '-') || '-'}
+        </ReadOnlyValue>
+      ) : (
+        <select
+          {...props}
+          disabled={readOnly}
+          value={selectedValue}
+          onChange={onSelectChange}
+          ref={ref}
+        >
+          {items.map((item, index) => {
+            const key = itemKey(item, index);
+            const label = itemLabel(item, index);
+            return (
+              <option key={key} value={key}>
+                {label}
+              </option>
+            );
+          })}
+        </select>
+      )}
+    </FormRow>
+  );
+};
+
+export const Select = forwardRef(SelectInner);

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

@@ -1,17 +1,17 @@
-import { ComponentProps, FC } from 'react';
-import { FormRow, FormRowProps } from './Row';
-
-import { AutoTextArea } from '../AutoTextArea';
-import { ReadOnlyValue } from './styles';
-
-export const TextArea: FC<
-  FormRowProps & ComponentProps<typeof AutoTextArea>
-> = ({ label, icon, ...props }) => (
-  <FormRow label={label} icon={icon}>
-    {props.readOnly ? (
-      <ReadOnlyValue>{props.value || '-'}</ReadOnlyValue>
-    ) : (
-      <AutoTextArea {...props} />
-    )}
-  </FormRow>
-);
+import { ComponentProps, FC } from 'react';
+import { FormRow, FormRowProps } from './Row';
+
+import { AutoTextArea } from '../AutoTextArea';
+import { ReadOnlyValue } from './styles';
+
+export const TextArea: FC<
+  FormRowProps & ComponentProps<typeof AutoTextArea>
+> = ({ label, icon, ...props }) => (
+  <FormRow label={label} icon={icon}>
+    {props.readOnly ? (
+      <ReadOnlyValue>{props.value || '-'}</ReadOnlyValue>
+    ) : (
+      <AutoTextArea {...props} />
+    )}
+  </FormRow>
+);

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

@@ -1,45 +1,45 @@
-import { FC, PropsWithChildren, useCallback } from 'react';
-import { FormCondensedFields, FormFields } from './styles';
-
-import { Checkbox } from './Checkbox';
-import { FormGroup } from './FormGroup';
-import { FormRow } from './Row';
-import { Input } from './Input';
-import { Select } from './Select';
-import { TextArea } from './TextArea';
-
-export type FormProps = PropsWithChildren<{
-  onSubmit?: () => void;
-}>;
-
-export type FormFC = FC<FormProps> & {
-  Checkbox: typeof Checkbox;
-  CondensedFields: typeof FormCondensedFields;
-  Fields: typeof FormFields;
-  Group: typeof FormGroup;
-  Input: typeof Input;
-  Row: typeof FormRow;
-  Select: typeof Select;
-  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.Checkbox = Checkbox;
-Form.CondensedFields = FormCondensedFields;
-Form.Fields = FormFields;
-Form.Group = FormGroup;
-Form.Input = Input;
-Form.Row = FormRow;
-Form.Select = Select;
-Form.TextArea = TextArea;
+import { FC, PropsWithChildren, useCallback } from 'react';
+import { FormCondensedFields, FormFields } from './styles';
+
+import { Checkbox } from './Checkbox';
+import { FormGroup } from './FormGroup';
+import { FormRow } from './Row';
+import { Input } from './Input';
+import { Select } from './Select';
+import { TextArea } from './TextArea';
+
+export type FormProps = PropsWithChildren<{
+  onSubmit?: () => void;
+}>;
+
+export type FormFC = FC<FormProps> & {
+  Checkbox: typeof Checkbox;
+  CondensedFields: typeof FormCondensedFields;
+  Fields: typeof FormFields;
+  Group: typeof FormGroup;
+  Input: typeof Input;
+  Row: typeof FormRow;
+  Select: typeof Select;
+  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.Checkbox = Checkbox;
+Form.CondensedFields = FormCondensedFields;
+Form.Fields = FormFields;
+Form.Group = FormGroup;
+Form.Input = Input;
+Form.Row = FormRow;
+Form.Select = Select;
+Form.TextArea = TextArea;

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

@@ -1,171 +1,180 @@
-import styled, { css } from 'styled-components';
-
-import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
-import { mediaQueries } from '../../../helpers/responsive';
-
-export const FormGroupContainer = styled.fieldset<{
-  color?: ThemeColorWithIntensity;
-}>`
-  display: flex;
-  flex-direction: column;
-  background: var(--color-neutral-100);
-  border-radius: var(--rounded-md);
-  box-shadow: var(--shadow-md);
-
-  padding: var(--space-2);
-  gap: var(--space-1);
-
-  ${mediaQueries.lgUp} {
-    padding: var(--space-4);
-    gap: var(--space-2);
-  }
-
-  margin: 0;
-  border: 1px solid var(--color-neutral-100);
-  border-left: 8px solid ${({ color = 'neutral' }) => `var(--color-${color})`};
-`;
-
-export const FormGroupHeader = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 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 inputCss = css`
-  font-family: inherit;
-  font-size: var(--text-lg);
-
-  border: none;
-  color: var(--color-neutral-900);
-  background: var(--color-neutral-0);
-
-  box-sizing: border-box;
-  width: 100%;
-  padding: var(--space-1);
-  ${mediaQueries.lgUp} {
-    text-align: right;
-  }
-
-  &:focus {
-    outline: none;
-  }
-`;
-
-export const FormRowLabel = styled.span`
-  color: var(--color-neutral-500);
-  font-size: var(--text-base);
-  padding: var(--space-1) 0;
-  display: flex;
-  flex-direction: row;
-  gap: var(--space-2);
-  line-height: 1.25;
-  font-weight: bold;
-  align-self: flex-start;
-
-  & > svg {
-    width: var(--space-4);
-    height: var(--space-4);
-    fill: var(--color-neutral-500);
-    flex-shrink: 0;
-  }
-`;
-
-export const FormRowInputContainer = styled.div`
-  flex: 1;
-  text-align: right;
-
-  ${mediaQueries.mdDown} {
-    width: 100%;
-    text-align: left;
-  }
-
-  & > select,
-  & > input,
-  & > textarea {
-    ${inputCss}
-  }
-`;
-
-export const FormRowContainer = styled.label<{
-  $readOnly?: boolean;
-}>`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0;
-  padding: var(--space-2);
-
-  ${mediaQueries.lgUp} {
-    flex-direction: row;
-    gap: var(--space-2);
-    padding: var(--space-1) var(--space-2);
-  }
-
-  border: 1px solid var(--color-neutral-200);
-  background: var(--color-neutral-0);
-  &:focus-within {
-    outline: 2px solid var(--color-primary-500);
-    z-index: 1;
-  }
-
-  &.read-only {
-    background: none;
-    border: none;
-    &:focus-within {
-      outline: none;
-    }
-
-    & + & {
-      border-top: 1px solid var(--color-neutral-300);
-    }
-
-    & > div > select,
-    & > div > select[disabled],
-    & > div > input,
-    & > div > textarea {
-      background: none;
-      color: var(--color-neutral-900);
-    }
-  }
-`;
-
-export const StyledCheckbox = styled.input.attrs({ type: 'checkbox' })`
-  width: var(--space-4);
-  height: var(--space-4);
-`;
-
-export const ReadOnlyValue = styled.span`
-  font-size: var(--text-lg);
-  padding: var(--space-1) 0;
-`;
-
-export const FormFields = styled.div<{ $readOnly?: boolean }>`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ $readOnly }) => ($readOnly ? '0' : 'var(--space-2)')};
-`;
-
-export const FormCondensedFields = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  ${mediaQueries.lgUp} & > ${FormRowContainer} {
-    padding: var(--space-0_5) var(--space-2);
-  }
-
-  > ${FormRowContainer}:not(.read-only) + ${FormRowContainer}:not(.read-only) {
-    border-top: none;
-  }
-`;
+import styled, { css } from 'styled-components';
+
+import { mediaQueries } from '../../../helpers/responsive';
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
+
+export const FormGroupContainer = styled.fieldset<{
+  color?: ThemeColorWithIntensity;
+}>`
+  display: flex;
+  flex-direction: column;
+  background: var(--color-neutral-100);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-md);
+
+  // Ensure children are not larger than the container
+  min-width: 0;
+
+  padding: var(--space-2);
+  gap: var(--space-1);
+
+  ${mediaQueries.lgUp} {
+    padding: var(--space-4);
+    gap: var(--space-2);
+  }
+
+  margin: 0;
+  border: 1px solid var(--color-neutral-300);
+  border-left: 8px solid ${({ color = 'neutral' }) => `var(--color-${color})`};
+`;
+
+export const FormGroupHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+
+  & > 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);
+  }
+
+  & > svg {
+    width: var(--space-6);
+    height: var(--space-6);
+  }
+`;
+
+export const inputCss = css`
+  font-family: inherit;
+  font-size: var(--text-lg);
+
+  border: none;
+  color: var(--color-neutral-900);
+  background: var(--color-neutral-0);
+
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--space-1);
+  ${mediaQueries.lgUp} {
+    text-align: right;
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const FormRowLabel = styled.span`
+  color: var(--color-neutral-500);
+  font-size: var(--text-base);
+  padding: var(--space-1) 0;
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-2);
+  line-height: 1.25;
+  font-weight: bold;
+  align-self: flex-start;
+
+  & > svg {
+    width: var(--space-4);
+    height: var(--space-4);
+    fill: var(--color-neutral-500);
+    flex-shrink: 0;
+  }
+`;
+
+export const FormRowInputContainer = styled.div`
+  flex: 1;
+  text-align: right;
+
+  ${mediaQueries.mdDown} {
+    width: 100%;
+    text-align: left;
+  }
+
+  & > select,
+  & > input,
+  & > textarea {
+    ${inputCss}
+  }
+`;
+
+export const FormRowContainer = styled.label<{
+  $readOnly?: boolean;
+}>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  padding: var(--space-2);
+
+  ${mediaQueries.lgUp} {
+    flex-direction: row;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-2);
+  }
+
+  border: 1px solid var(--color-neutral-200);
+  background: var(--color-neutral-0);
+  &:focus-within {
+    outline: 2px solid var(--color-primary-500);
+    z-index: 1;
+  }
+
+  &.read-only {
+    background: none;
+    border: none;
+    &:focus-within {
+      outline: none;
+    }
+
+    & + & {
+      border-top: 1px solid var(--color-neutral-300);
+    }
+
+    & > div > select,
+    & > div > select[disabled],
+    & > div > input,
+    & > div > textarea {
+      background: none;
+      color: var(--color-neutral-900);
+    }
+  }
+`;
+
+export const StyledCheckbox = styled.input.attrs({ type: 'checkbox' })`
+  width: var(--space-4);
+  height: var(--space-4);
+`;
+
+export const ReadOnlyValue = styled.span`
+  font-size: var(--text-lg);
+  padding: var(--space-1) 0;
+`;
+
+export const FormFields = styled.div<{ $readOnly?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ $readOnly }) => ($readOnly ? '0' : 'var(--space-2)')};
+`;
+
+export const FormCondensedFields = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${mediaQueries.lgUp} & > ${FormRowContainer} {
+    padding: var(--space-0_5) var(--space-2);
+  }
+
+  > ${FormRowContainer}:not(.read-only) + ${FormRowContainer}:not(.read-only) {
+    border-top: none;
+  }
+`;