kelt-ui-kit-react 2.0.6 → 2.0.9

package/src/form/Form.view.tsx

@@ -1,67 +1,67 @@
-import { DynamicForm } from "./Form";
-import { TypeInputEnum } from "./form.enum";
-
-import { FormInterface, FormValuesInterface } from "./form.interface";
-interface FormData {
-  nom: string;
-  age: number;
-  validate: boolean;
-  password: string;
-  [key: string]: string | number | boolean | Date | string[]; // Signature d'index ajoutée
-}
-export const FormView = (): JSX.Element => {
-  const initialValues: FormInterface[] = [
-    {
-      value: "Alexandre",
-      label: "Nom",
-      focus: true,
-      name: "nom",
-      type: TypeInputEnum.PASSWORD,
-      required: true,
-      col: { xs: 12, md: 6 },
-    },
-    {
-      value: 30,
-      label: "Age",
-      name: "age",
-      type: TypeInputEnum.NUMBER,
-      col: { xs: 12, md: 6 },
-    },
-    {
-      value: false,
-      name: "validate",
-      label: "Validate",
-      type: TypeInputEnum.CHECKBOX,
-    },
-    {
-      value: "password",
-      name: "password",
-      label: "Password",
-      type: TypeInputEnum.PASSWORD,
-    },
-    {
-      value: "",
-      name: "selectOption",
-      label: "Select Option",
-      placeholder: "Choose an option",
-      type: TypeInputEnum.SELECT,
-      options: [
-        { value: "option1", label: "Option 1" },
-        { value: "option2", label: "Option 2" },
-        { value: "option3", label: "Option 3" },
-      ],
-    },
-  ];
-
-  // Fonction qui sera appelée lors de la soumission du formulaire
-  const handleSubmit = (values: FormValuesInterface<FormData>) => {
-    console.log("Form Submitted: ", values);
-  };
-  return (
-    <DynamicForm
-      mode="edit"
-      onSubmit={handleSubmit}
-      initialForm={initialValues}
-    />
-  );
-};
+import { DynamicForm } from "./Form";
+import { TypeInputEnum } from "./form.enum";
+
+import { FormInterface, FormValuesInterface } from "./form.interface";
+interface FormData {
+  nom: string;
+  age: number;
+  validate: boolean;
+  password: string;
+  [key: string]: string | number | boolean | Date | string[]; // Signature d'index ajoutée
+}
+export const FormView = (): JSX.Element => {
+  const initialValues: FormInterface[] = [
+    {
+      value: "Alexandre",
+      label: "Nom",
+      focus: true,
+      name: "nom",
+      type: TypeInputEnum.PASSWORD,
+      required: true,
+      col: { xs: 12, md: 6 },
+    },
+    {
+      value: 30,
+      label: "Age",
+      name: "age",
+      type: TypeInputEnum.NUMBER,
+      col: { xs: 12, md: 6 },
+    },
+    {
+      value: false,
+      name: "validate",
+      label: "Validate",
+      type: TypeInputEnum.CHECKBOX,
+    },
+    {
+      value: "password",
+      name: "password",
+      label: "Password",
+      type: TypeInputEnum.PASSWORD,
+    },
+    {
+      value: "",
+      name: "selectOption",
+      label: "Select Option",
+      placeholder: "Choose an option",
+      type: TypeInputEnum.SELECT,
+      options: [
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
+        { value: "option3", label: "Option 3" },
+      ],
+    },
+  ];
+
+  // Fonction qui sera appelée lors de la soumission du formulaire
+  const handleSubmit = (values: FormValuesInterface<FormData>) => {
+    console.log("Form Submitted: ", values);
+  };
+  return (
+    <DynamicForm
+      mode="edit"
+      onSubmit={handleSubmit}
+      initialForm={initialValues}
+    />
+  );
+};

package/src/form/form.css

@@ -1,136 +1,136 @@
-input {
-  border: 1px solid #b2a1a1;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  margin: 0.25rem 0 0.25rem 0;
-  min-width: 250px;
-
-  &:focus-visible {
-    outline: 1px solid #9696a7;
-  }
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-  min-width: auto;
-  padding: 0;
-  margin: 0;
-  height: 18px;
-  width: 18px;
-}
-
-form {
-  .form-section+.form-section {
-    margin-top: 1.25rem;
-  }
-
-  .form-section-title {
-    margin: 0 0 0.5rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid #dedede;
-    color: var(--primary-color);
-    font-size: 1rem;
-    font-weight: 600;
-  }
-
-  &.form-row {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-
-    .form-group {
-      margin-right: 1rem;
-      flex: 1;
-      padding: 0;
-
-      .input-container {
-        min-width: auto;
-
-        input {
-          min-width: auto;
-        }
-      }
-    }
-  }
-
-  label {
-    font-weight: 600;
-    font-size: 0.85rem;
-    padding-bottom: 0.15rem;
-  }
-
-  .form-group-checkbox {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-top: 0.5rem;
-
-    label {
-      margin-right: 1rem;
-      padding: 0;
-    }
-
-    input {
-      min-width: auto;
-      padding: 0;
-      margin: 0;
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  button {
-    margin-top: 1rem;
-  }
-
-  .form-read-value {
-    width: 100%;
-    min-width: 250px;
-    min-height: 0px;
-    box-sizing: border-box;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    margin: 0.25rem 0;
-    padding: 0;
-    font-size: 0.8rem;
-    line-height: normal;
-    overflow-wrap: anywhere;
-  }
-
-  .form-read-value--textarea {
-    min-height: 3.25rem;
-    white-space: pre-wrap;
-  }
-
-  .grid-row {
-
-    /* Bouton submit placé dans la grid (submitCol) : aligné en bas, sur les inputs */
-    .form-submit-col {
-      display: flex;
-      align-items: flex-end;
-      justify-content: flex-end;
-      height: 100%;
-
-      button {
-        margin-top: 0;
-        margin-bottom: 0.25rem;
-      }
-    }
-
-    .form-group,
-    .input-container,
-    .select-container,
-    .form-read-value {
-      min-width: 0;
-    }
-
-    input:not([type="checkbox"]):not([type="radio"]),
-    .form-control-textarea,
-    .form-read-value {
-      box-sizing: border-box;
-      min-width: 0;
-      width: 100%;
-    }
-  }
+input {
+  border: 1px solid #b2a1a1;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  margin: 0.25rem 0 0.25rem 0;
+  min-width: 250px;
+
+  &:focus-visible {
+    outline: 1px solid #9696a7;
+  }
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  min-width: auto;
+  padding: 0;
+  margin: 0;
+  height: 18px;
+  width: 18px;
+}
+
+form {
+  .form-section+.form-section {
+    margin-top: 1.25rem;
+  }
+
+  .form-section-title {
+    margin: 0 0 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #dedede;
+    color: var(--primary-color);
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  &.form-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+
+    .form-group {
+      margin-right: 1rem;
+      flex: 1;
+      padding: 0;
+
+      .input-container {
+        min-width: auto;
+
+        input {
+          min-width: auto;
+        }
+      }
+    }
+  }
+
+  label {
+    font-weight: 600;
+    font-size: 0.85rem;
+    padding-bottom: 0.15rem;
+  }
+
+  .form-group-checkbox {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 0.5rem;
+
+    label {
+      margin-right: 1rem;
+      padding: 0;
+    }
+
+    input {
+      min-width: auto;
+      padding: 0;
+      margin: 0;
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  button {
+    margin-top: 1rem;
+  }
+
+  .form-read-value {
+    width: 100%;
+    min-width: 250px;
+    min-height: 0px;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    margin: 0.25rem 0;
+    padding: 0;
+    font-size: 0.8rem;
+    line-height: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .form-read-value--textarea {
+    min-height: 3.25rem;
+    white-space: pre-wrap;
+  }
+
+  .grid-row {
+
+    /* Bouton submit placé dans la grid (submitCol) : aligné en bas, sur les inputs */
+    .form-submit-col {
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+      height: 100%;
+
+      button {
+        margin-top: 0;
+        margin-bottom: 0.25rem;
+      }
+    }
+
+    .form-group,
+    .input-container,
+    .select-container,
+    .form-read-value {
+      min-width: 0;
+    }
+
+    input:not([type="checkbox"]):not([type="radio"]),
+    .form-control-textarea,
+    .form-read-value {
+      box-sizing: border-box;
+      min-width: 0;
+      width: 100%;
+    }
+  }
 }

package/src/form/form.enum.ts

@@ -1,15 +1,16 @@
-export enum TypeInputEnum {
-  ADDRESS = "address",
-  TEXT = "text",
-  BUTTON = "button",
-  EMAIL = "email",
-  HIDDEN = "hidden",
-  PASSWORD = "password",
-  NUMBER = "number",
-  CHECKBOX = "checkbox",
-  RADIO = "radio",
-  DATE = "date",
-  SELECT = "select",
-  TEXTAREA = "textarea",
-  PRICE = "price",
-}
+export enum TypeInputEnum {
+  ADDRESS = "address",
+  TEXT = "text",
+  BUTTON = "button",
+  EMAIL = "email",
+  HIDDEN = "hidden",
+  PASSWORD = "password",
+  NUMBER = "number",
+  CHECKBOX = "checkbox",
+  RADIO = "radio",
+  DATE = "date",
+  DATERANGE = "daterange",
+  SELECT = "select",
+  TEXTAREA = "textarea",
+  PRICE = "price",
+}

package/src/form/form.interface.tsx

@@ -1,67 +1,67 @@
-import { TypeInputEnum } from "./form.enum";
-import { GridBreakpoints } from "../grid/grid.interface";
-import {
-  GeocodedAddress,
-  GeocodingProvider,
-} from "../geocoding/geocoding.interface";
-
-export type FormMode = "read" | "edit";
-
-export type FormValuesInterface<
-  T extends { [key: string]: string | number | boolean | Date | string[] }
-> = Partial<{
-  [K in keyof T]: T[K];
-}>;
-export interface FormCondition {
-  errorMessage: string;
-  regex: string;
-}
-
-export interface FormSection {
-  title?: React.ReactNode;
-  fields: FormInterface[];
-  className?: string;
-}
-
-export interface FormInterface {
-  value: string | number | boolean | Date | string[];
-  id?: string;
-  label?: string;
-  focus?: boolean;
-  type: TypeInputEnum;
-  placeholder?: string;
-  name: string;
-  disabled?: boolean;
-  required?: boolean;
-  condition?: FormCondition;
-  icon?: string;
-  multiple?: boolean;
-  usePortal?: boolean;
-  searchable?: boolean;
-  options?: { value: string; label: string }[]; // <--- pour les <option>
-  className?: string;
-  col?: GridBreakpoints;
-  addressSearch?: {
-    minimumQueryLength?: number;
-    debounceTime?: number;
-    limit?: number;
-    provider?: GeocodingProvider;
-    manualEntryLabel?: string;
-    mapAddress?: (
-      address: GeocodedAddress,
-    ) => Record<string, string | number | boolean | Date | string[]>;
-    onSelect?: (address: GeocodedAddress) => void;
-  };
-  formatReadValue?: (
-    value: string | number | boolean | Date | string[]
-  ) => React.ReactNode;
-  autoComplete?: string;
-  step?: string;
-  onChange?: (
-    value: string | number | boolean | Date | string[],
-    name?: string
-  ) => void;
-  onRequired?: (value: string | number | boolean | Date | string[]) => boolean;
-  onDisabled?: (value: string | number | boolean | Date | string[]) => boolean;
-  onInvalid?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
+import { TypeInputEnum } from "./form.enum";
+import { GridBreakpoints } from "../grid/grid.interface";
+import {
+  GeocodedAddress,
+  GeocodingProvider,
+} from "../geocoding/geocoding.interface";
+
+export type FormMode = "read" | "edit";
+
+export type FormValuesInterface<
+  T extends { [key: string]: string | number | boolean | Date | string[] }
+> = Partial<{
+  [K in keyof T]: T[K];
+}>;
+export interface FormCondition {
+  errorMessage: string;
+  regex: string;
+}
+
+export interface FormSection {
+  title?: React.ReactNode;
+  fields: FormInterface[];
+  className?: string;
+}
+
+export interface FormInterface {
+  value: string | number | boolean | Date | string[];
+  id?: string;
+  label?: string;
+  focus?: boolean;
+  type: TypeInputEnum;
+  placeholder?: string;
+  name: string;
+  disabled?: boolean;
+  required?: boolean;
+  condition?: FormCondition;
+  icon?: string;
+  multiple?: boolean;
+  usePortal?: boolean;
+  searchable?: boolean;
+  options?: { value: string; label: string }[]; // <--- pour les <option>
+  className?: string;
+  col?: GridBreakpoints;
+  addressSearch?: {
+    minimumQueryLength?: number;
+    debounceTime?: number;
+    limit?: number;
+    provider?: GeocodingProvider;
+    manualEntryLabel?: string;
+    mapAddress?: (
+      address: GeocodedAddress,
+    ) => Record<string, string | number | boolean | Date | string[]>;
+    onSelect?: (address: GeocodedAddress) => void;
+  };
+  formatReadValue?: (
+    value: string | number | boolean | Date | string[]
+  ) => React.ReactNode;
+  autoComplete?: string;
+  step?: string;
+  onChange?: (
+    value: string | number | boolean | Date | string[],
+    name?: string
+  ) => void;
+  onRequired?: (value: string | number | boolean | Date | string[]) => boolean;
+  onDisabled?: (value: string | number | boolean | Date | string[]) => boolean;
+  onInvalid?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}