@addev-be/ui 2.7.3 → 2.7.5

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

@@ -1,86 +1,86 @@
-import { FormRow, FormRowProps } from './Row';
-import {
-  ForwardedRef,
-  SelectHTMLAttributes,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-} from 'react';
-
-import { ReadOnlyValue } from './styles';
-
-type CustomSelectProps<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;
-  ref?: ForwardedRef<HTMLSelectElement>;
-};
-
-export const CustomSelect = <T,>({
-  icon,
-  label,
-  items,
-  itemKey,
-  itemLabel,
-  readOnly,
-  onChange,
-  value,
-  ref,
-  ...props
-}: FormRowProps &
-  Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> &
-  CustomSelectProps<T>) => {
-  const selectRef = useRef<HTMLSelectElement>(null);
-  useImperativeHandle(ref, () => selectRef.current!, []);
-
-  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);
-        selectRef.current?.blur();
-      }
-    },
-    [items, itemKey, onChange]
-  );
-
-  const selectedValue = value ? itemKey(value, -1) : undefined;
-
-  return (
-    <FormRow label={label} icon={icon} readOnly={readOnly}>
-      {readOnly ? (
-        <ReadOnlyValue>
-          {(value !== null ? itemLabel(value, 0) : '-') || '-'}
-        </ReadOnlyValue>
-      ) : (
-        <select
-          {...props}
-          disabled={readOnly}
-          value={selectedValue}
-          onChange={onSelectChange}
-          ref={selectRef}
-        >
-          {items.map((item, index) => {
-            const key = itemKey(item, index);
-            const label = itemLabel(item, index);
-            return (
-              <option
-                key={key}
-                value={key}
-                onSelect={() => console.log('selected')}
-              >
-                {label}
-              </option>
-            );
-          })}
-        </select>
-      )}
-    </FormRow>
-  );
-};
+import { FormRow, FormRowProps } from './Row';
+import {
+  ForwardedRef,
+  SelectHTMLAttributes,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+
+import { ReadOnlyValue } from './styles';
+
+type CustomSelectProps<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;
+  ref?: ForwardedRef<HTMLSelectElement>;
+};
+
+export const CustomSelect = <T,>({
+  icon,
+  label,
+  items,
+  itemKey,
+  itemLabel,
+  readOnly,
+  onChange,
+  value,
+  ref,
+  ...props
+}: FormRowProps &
+  Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> &
+  CustomSelectProps<T>) => {
+  const selectRef = useRef<HTMLSelectElement>(null);
+  useImperativeHandle(ref, () => selectRef.current!, []);
+
+  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);
+        selectRef.current?.blur();
+      }
+    },
+    [items, itemKey, onChange]
+  );
+
+  const selectedValue = value ? itemKey(value, -1) : undefined;
+
+  return (
+    <FormRow label={label} icon={icon} readOnly={readOnly}>
+      {readOnly ? (
+        <ReadOnlyValue>
+          {(value !== null ? itemLabel(value, 0) : '-') || '-'}
+        </ReadOnlyValue>
+      ) : (
+        <select
+          {...props}
+          disabled={readOnly}
+          value={selectedValue}
+          onChange={onSelectChange}
+          ref={selectRef}
+        >
+          {items.map((item, index) => {
+            const key = itemKey(item, index);
+            const label = itemLabel(item, index);
+            return (
+              <option
+                key={key}
+                value={key}
+                onSelect={() => console.log('selected')}
+              >
+                {label}
+              </option>
+            );
+          })}
+        </select>
+      )}
+    </FormRow>
+  );
+};

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

@@ -1,33 +1,33 @@
-import { FC, PropsWithChildren } from 'react';
-import { FormGroupContainer, FormGroupHeader } from './styles';
-
-import { IconFC } from '../../../Icons';
-import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
-
-type FormGroupProps = PropsWithChildren<{
-  color?: ThemeColorWithIntensity;
-  title?: string;
-  subTitle?: string;
-  icon?: IconFC;
-  columns?: number;
-}>;
-
-export const FormGroup: FC<FormGroupProps> = ({
-  children,
-  color,
-  title,
-  subTitle,
-  icon: Icon,
-  columns,
-}) => (
-  <FormGroupContainer $color={color} $columns={columns}>
-    {(title || subTitle) && (
-      <FormGroupHeader $columns={columns}>
-        {Icon && <Icon />}
-        {title && <h3>{title}</h3>}
-        {subTitle && <h4>{subTitle}</h4>}
-      </FormGroupHeader>
-    )}
-    {children}
-  </FormGroupContainer>
-);
+import { FC, PropsWithChildren } from 'react';
+import { FormGroupContainer, FormGroupHeader } from './styles';
+
+import { IconFC } from '../../../Icons';
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
+
+type FormGroupProps = PropsWithChildren<{
+  color?: ThemeColorWithIntensity;
+  title?: string;
+  subTitle?: string;
+  icon?: IconFC;
+  columns?: number;
+}>;
+
+export const FormGroup: FC<FormGroupProps> = ({
+  children,
+  color,
+  title,
+  subTitle,
+  icon: Icon,
+  columns,
+}) => (
+  <FormGroupContainer $color={color} $columns={columns}>
+    {(title || subTitle) && (
+      <FormGroupHeader $columns={columns}>
+        {Icon && <Icon />}
+        {title && <h3>{title}</h3>}
+        {subTitle && <h4>{subTitle}</h4>}
+      </FormGroupHeader>
+    )}
+    {children}
+  </FormGroupContainer>
+);

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

@@ -1,16 +1,16 @@
-import { FC, InputHTMLAttributes } from 'react';
-import { FormRow, FormRowProps } from './Row';
-
-import { ReadOnlyValue } from './styles';
-
-export const Input: FC<
-  FormRowProps & InputHTMLAttributes<HTMLInputElement>
-> = ({ label, icon, ...props }) => (
-  <FormRow label={label} icon={icon} readOnly={props.readOnly}>
-    {props.readOnly ? (
-      <ReadOnlyValue>{props.value || '-'}</ReadOnlyValue>
-    ) : (
-      <input {...props} />
-    )}
-  </FormRow>
-);
+import { FC, InputHTMLAttributes } from 'react';
+import { FormRow, FormRowProps } from './Row';
+
+import { ReadOnlyValue } from './styles';
+
+export const Input: FC<
+  FormRowProps & InputHTMLAttributes<HTMLInputElement>
+> = ({ label, icon, ...props }) => (
+  <FormRow label={label} icon={icon} readOnly={props.readOnly}>
+    {props.readOnly ? (
+      <ReadOnlyValue>{props.value || '-'}</ReadOnlyValue>
+    ) : (
+      <input {...props} />
+    )}
+  </FormRow>
+);

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

@@ -1,28 +1,28 @@
-import { FC, PropsWithChildren } from 'react';
-import { FormRowContainer, FormRowLabel } from './styles';
-
-import { IconFC } from '../../../Icons';
-
-export type FormRowProps = PropsWithChildren<{
-  label?: string;
-  icon?: IconFC;
-  readOnly?: boolean;
-  condensed?: boolean;
-}>;
-
-export const FormRow: FC<FormRowProps> = ({
-  label,
-  icon: Icon,
-  readOnly,
-  children,
-}) => (
-  <FormRowContainer className={readOnly ? 'read-only' : ''}>
-    {(label || Icon) && (
-      <FormRowLabel>
-        {Icon && <Icon />}
-        {label}
-      </FormRowLabel>
-    )}
-    {children}
-  </FormRowContainer>
-);
+import { FC, PropsWithChildren } from 'react';
+import { FormRowContainer, FormRowLabel } from './styles';
+
+import { IconFC } from '../../../Icons';
+
+export type FormRowProps = PropsWithChildren<{
+  label?: string;
+  icon?: IconFC;
+  readOnly?: boolean;
+  condensed?: boolean;
+}>;
+
+export const FormRow: FC<FormRowProps> = ({
+  label,
+  icon: Icon,
+  readOnly,
+  children,
+}) => (
+  <FormRowContainer className={readOnly ? 'read-only' : ''}>
+    {(label || Icon) && (
+      <FormRowLabel>
+        {Icon && <Icon />}
+        {label}
+      </FormRowLabel>
+    )}
+    {children}
+  </FormRowContainer>
+);

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

@@ -1,99 +1,99 @@
-import { FormRow, FormRowProps } from './Row';
-import {
-  ForwardedRef,
-  SelectHTMLAttributes,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-} 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;
-  ref?: ForwardedRef<HTMLSelectElement>;
-  allowNull?: boolean;
-  nullText?: string;
-};
-
-export const Select = <T,>({
-  icon,
-  label,
-  items,
-  itemKey,
-  itemLabel,
-  readOnly,
-  onChange,
-  value,
-  ref,
-  allowNull = false,
-  nullText = 'Aucun(e)',
-  ...props
-}: FormRowProps &
-  Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> &
-  SelectProps<T>) => {
-  const selectRef = useRef<HTMLSelectElement>(null);
-  useImperativeHandle(ref, () => selectRef.current!, []);
-
-  const onSelectChange = useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) => {
-      if (onChange) {
-        const selectedValue = event.target.value;
-        if (allowNull && selectedValue === null) {
-          onChange(null);
-        } else {
-          const selectedItem = items.find(
-            (item, index) => itemKey(item, index) == selectedValue
-          );
-          onChange(selectedItem || null);
-        }
-        selectRef.current?.blur();
-      }
-    },
-    [items, itemKey, onChange, allowNull]
-  );
-
-  const selectedValue = value
-    ? itemKey(value, -1)
-    : allowNull
-    ? null
-    : undefined;
-
-  return (
-    <FormRow label={label} icon={icon} readOnly={readOnly}>
-      {readOnly ? (
-        <ReadOnlyValue>
-          {(value !== null ? itemLabel(value, 0) : '-') || '-'}
-        </ReadOnlyValue>
-      ) : (
-        <select
-          {...props}
-          disabled={readOnly}
-          value={selectedValue || ''}
-          onChange={onSelectChange}
-          ref={selectRef}
-        >
-          {allowNull && (
-            <option disabled={!allowNull} value="">
-              {nullText}
-            </option>
-          )}
-          {items.map((item, index) => {
-            const key = itemKey(item, index);
-            const label = itemLabel(item, index);
-            return (
-              <option key={key} value={key}>
-                {label}
-              </option>
-            );
-          })}
-        </select>
-      )}
-    </FormRow>
-  );
-};
+import { FormRow, FormRowProps } from './Row';
+import {
+  ForwardedRef,
+  SelectHTMLAttributes,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} 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;
+  ref?: ForwardedRef<HTMLSelectElement>;
+  allowNull?: boolean;
+  nullText?: string;
+};
+
+export const Select = <T,>({
+  icon,
+  label,
+  items,
+  itemKey,
+  itemLabel,
+  readOnly,
+  onChange,
+  value,
+  ref,
+  allowNull = false,
+  nullText = 'Aucun(e)',
+  ...props
+}: FormRowProps &
+  Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> &
+  SelectProps<T>) => {
+  const selectRef = useRef<HTMLSelectElement>(null);
+  useImperativeHandle(ref, () => selectRef.current!, []);
+
+  const onSelectChange = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      if (onChange) {
+        const selectedValue = event.target.value;
+        if (allowNull && selectedValue === null) {
+          onChange(null);
+        } else {
+          const selectedItem = items.find(
+            (item, index) => itemKey(item, index) == selectedValue
+          );
+          onChange(selectedItem || null);
+        }
+        selectRef.current?.blur();
+      }
+    },
+    [items, itemKey, onChange, allowNull]
+  );
+
+  const selectedValue = value
+    ? itemKey(value, -1)
+    : allowNull
+    ? null
+    : undefined;
+
+  return (
+    <FormRow label={label} icon={icon} readOnly={readOnly}>
+      {readOnly ? (
+        <ReadOnlyValue>
+          {(value !== null ? itemLabel(value, 0) : '-') || '-'}
+        </ReadOnlyValue>
+      ) : (
+        <select
+          {...props}
+          disabled={readOnly}
+          value={selectedValue || ''}
+          onChange={onSelectChange}
+          ref={selectRef}
+        >
+          {allowNull && (
+            <option disabled={!allowNull} value="">
+              {nullText}
+            </option>
+          )}
+          {items.map((item, index) => {
+            const key = itemKey(item, index);
+            const label = itemLabel(item, index);
+            return (
+              <option key={key} value={key}>
+                {label}
+              </option>
+            );
+          })}
+        </select>
+      )}
+    </FormRow>
+  );
+};

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,48 +1,48 @@
-import { FC, PropsWithChildren, useCallback } from 'react';
-import { FormCondensedFields, FormFields } from './styles';
-
-import { Checkbox } from './Checkbox';
-import { CustomSelect } from './CustomSelect';
-import { FormGroup } from './FormGroup';
-import { FormRow } from './Row';
-import { Input } from './Input';
-import { Select } from './Select';
-import { TextArea } from './TextArea';
-
-export type CardFormProps = PropsWithChildren<{
-  onSubmit?: () => void;
-}>;
-
-export type CardFormFC = FC<CardFormProps> & {
-  Checkbox: typeof Checkbox;
-  CondensedFields: typeof FormCondensedFields;
-  Fields: typeof FormFields;
-  Group: typeof FormGroup;
-  Input: typeof Input;
-  Row: typeof FormRow;
-  Select: typeof Select;
-  TextArea: typeof TextArea;
-  CustomSelect: typeof CustomSelect;
-};
-
-export const CardForm = ({ children, onSubmit }: CardFormProps) => {
-  const handleSubmit = useCallback(
-    (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      onSubmit?.();
-    },
-    [onSubmit]
-  );
-
-  return <form onSubmit={handleSubmit}>{children}</form>;
-};
-
-CardForm.Checkbox = Checkbox;
-CardForm.CondensedFields = FormCondensedFields;
-CardForm.Fields = FormFields;
-CardForm.Group = FormGroup;
-CardForm.Input = Input;
-CardForm.Row = FormRow;
-CardForm.Select = Select;
-CardForm.TextArea = TextArea;
-CardForm.CustomSelect = CustomSelect;
+import { FC, PropsWithChildren, useCallback } from 'react';
+import { FormCondensedFields, FormFields } from './styles';
+
+import { Checkbox } from './Checkbox';
+import { CustomSelect } from './CustomSelect';
+import { FormGroup } from './FormGroup';
+import { FormRow } from './Row';
+import { Input } from './Input';
+import { Select } from './Select';
+import { TextArea } from './TextArea';
+
+export type CardFormProps = PropsWithChildren<{
+  onSubmit?: () => void;
+}>;
+
+export type CardFormFC = FC<CardFormProps> & {
+  Checkbox: typeof Checkbox;
+  CondensedFields: typeof FormCondensedFields;
+  Fields: typeof FormFields;
+  Group: typeof FormGroup;
+  Input: typeof Input;
+  Row: typeof FormRow;
+  Select: typeof Select;
+  TextArea: typeof TextArea;
+  CustomSelect: typeof CustomSelect;
+};
+
+export const CardForm = ({ children, onSubmit }: CardFormProps) => {
+  const handleSubmit = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      onSubmit?.();
+    },
+    [onSubmit]
+  );
+
+  return <form onSubmit={handleSubmit}>{children}</form>;
+};
+
+CardForm.Checkbox = Checkbox;
+CardForm.CondensedFields = FormCondensedFields;
+CardForm.Fields = FormFields;
+CardForm.Group = FormGroup;
+CardForm.Input = Input;
+CardForm.Row = FormRow;
+CardForm.Select = Select;
+CardForm.TextArea = TextArea;
+CardForm.CustomSelect = CustomSelect;