kelt-ui-kit-react 1.9.9 → 2.0.1

package/src/form/Form.tsx

@@ -9,9 +9,35 @@ import { Button } from "../button/Button";
 import { Icon } from "../icon/Icon";
 import { Select } from "../select/Select"; // <--- ton composant
 import "./form.css";
-import { FormInterface, FormValuesInterface } from "./form.interface";
+import {
+  FormInterface,
+  FormMode,
+  FormValuesInterface,
+} from "./form.interface";
 import { Input } from "./input/Input";
+import { InputPrice } from "./inputPrice/InputPrice";
 import { TextArea } from "./textArea/TextArea";
+import { Col } from "../grid/col/Col";
+import { Row } from "../grid/row/Row";
+import { TypeInputEnum } from "./form.enum";
+
+const euroFormatter = new Intl.NumberFormat("fr-FR", {
+  style: "currency",
+  currency: "EUR",
+});
+
+type FormFieldContainerProps = {
+  field: FormInterface;
+  gridEnabled: boolean;
+  children: React.ReactNode;
+};
+
+const FormFieldContainer = ({
+  field,
+  gridEnabled,
+  children,
+}: FormFieldContainerProps) =>
+  gridEnabled ? <Col {...field.col}>{children}</Col> : <>{children}</>;
 
 export type FormProps<
   T extends { [key: string]: string | number | boolean | Date | string[] }
@@ -24,6 +50,7 @@ export type FormProps<
   children?: React.ReactNode;
   initialForm: FormInterface[];
   disabledSubmit?: boolean;
+  mode?: FormMode;
   onSubmit?: (values: FormValuesInterface<T>) => void;
   onChange?: (values: FormValuesInterface<T>) => void;
 };
@@ -40,6 +67,7 @@ export const DynamicForm = forwardRef(
       onChange,
       hideSubmit,
       disabledSubmit = false,
+      mode = "edit",
       className,
     }: FormProps<T>,
     ref: React.Ref<{
@@ -179,6 +207,52 @@ export const DynamicForm = forwardRef(
       setBtnDisabledSubmit,
     }));
 
+    const gridEnabled = initialForm.some((field) => field.col !== undefined);
+    const FieldsContainer = gridEnabled ? Row : React.Fragment;
+    const getReadValue = (field: FormInterface): React.ReactNode => {
+      const value = values[field.name];
+
+      if (field.formatReadValue) {
+        return field.formatReadValue(value ?? "");
+      }
+
+      if (field.type === TypeInputEnum.SELECT) {
+        const selectedValues = Array.isArray(value) ? value : [value];
+        const labels = selectedValues
+          .map(
+            (selectedValue) =>
+              field.options?.find((option) => option.value === selectedValue)
+                ?.label ?? selectedValue,
+          )
+          .filter((selectedValue) => selectedValue !== undefined);
+
+        return labels.join(", ") || "-";
+      }
+
+      if (field.type === TypeInputEnum.PRICE) {
+        const amount = Number(value);
+        return value === "" || value === undefined || Number.isNaN(amount)
+          ? "-"
+          : euroFormatter.format(amount);
+      }
+
+      if (typeof value === "boolean") {
+        return value ? "Oui" : "Non";
+      }
+
+      if (value instanceof Date) {
+        return value.toLocaleDateString();
+      }
+
+      if (Array.isArray(value)) {
+        return value.join(", ") || "-";
+      }
+
+      return value === undefined || value === null || value === ""
+        ? "-"
+        : String(value);
+    };
+
     return (
       <form
         autoComplete={autoComplete ?? "off"}
@@ -186,6 +260,7 @@ export const DynamicForm = forwardRef(
         className={className ?? ""}
       >
         <div className="form-content">
+          <FieldsContainer>
           {initialForm.map((v, key) => {
             const required = v.onRequired
               ? v.onRequired(v.value)
@@ -195,16 +270,26 @@ export const DynamicForm = forwardRef(
               : v.disabled ?? false;
 
             return (
-              <div
-                key={key}
-                className={`d-flex flex-column ${
-                  v.className ?? ""
-                } form-group form-group-${v.type}`}
-              >
+              <FormFieldContainer key={key} field={v} gridEnabled={gridEnabled}>
+                <div
+                  className={`d-flex flex-column ${
+                    v.className ?? ""
+                  } form-group form-group-${v.type}`}
+                >
                 {v.label && <label>{v.label}</label>}
                 {v.icon && <Icon classIcon={v.icon} />}
 
-                {v.type === "select" ? (
+                {mode === "read" ? (
+                  <div
+                    className={`form-read-value ${
+                      v.type === TypeInputEnum.TEXTAREA
+                        ? "form-read-value--textarea"
+                        : ""
+                    }`}
+                  >
+                    {getReadValue(v)}
+                  </div>
+                ) : v.type === "select" ? (
                   <Select
                     id={v.id ?? v.name}
                     label={undefined}
@@ -236,6 +321,22 @@ export const DynamicForm = forwardRef(
                       handleChangeTextArea(name, value, v)
                     }
                   />
+                ) : v.type === TypeInputEnum.PRICE ? (
+                  <InputPrice
+                    id={v.id ?? v.name}
+                    ref={(el) => (inputRefs.current[v.name] = el)}
+                    name={v.name}
+                    placeholder={v.placeholder ?? ""}
+                    autoComplete={v.autoComplete}
+                    tabIndex={0}
+                    disabled={disabled}
+                    autoFocus={v.focus ?? false}
+                    required={required}
+                    value={String(values[v.name] ?? "")}
+                    onChange={(value) =>
+                      handleChangeTextArea(v.name, value, v)
+                    }
+                  />
                 ) : (
                   <Input
                     id={v.id ?? v.name}
@@ -259,13 +360,15 @@ export const DynamicForm = forwardRef(
                     onInvalid={v.onInvalid ? v.onInvalid : undefined}
                   />
                 )}
-              </div>
+                </div>
+              </FormFieldContainer>
             );
           })}
           {children}
+          </FieldsContainer>
         </div>
         <div className="d-flex justify-content-end form-footer">
-          {!hideSubmit && (
+          {mode === "edit" && !hideSubmit && (
             <Button
               id={`button-${id}`}
               disabled={btnDisabledSubmit}

package/src/form/Form.view.tsx

@@ -18,12 +18,14 @@ export const FormView = (): JSX.Element => {
       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,
@@ -55,5 +57,11 @@ export const FormView = (): JSX.Element => {
   const handleSubmit = (values: FormValuesInterface<FormData>) => {
     console.log("Form Submitted: ", values);
   };
-  return <DynamicForm onSubmit={handleSubmit} initialForm={initialValues} />;
+  return (
+    <DynamicForm
+      mode="edit"
+      onSubmit={handleSubmit}
+      initialForm={initialValues}
+    />
+  );
 };

package/src/form/form.css

@@ -4,10 +4,12 @@ input {
   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;
@@ -16,38 +18,46 @@ input[type="radio"] {
   height: 18px;
   width: 18px;
 }
+
 form {
   &.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;
@@ -56,7 +66,45 @@ form {
       width: 18px;
     }
   }
+
   button {
     margin-top: 1rem;
   }
-}
+
+  .form-read-value {
+    width: 100%;
+    min-width: 250px;
+    min-height: calc(1em + 1rem + 2px);
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    margin: 0.25rem 0;
+    padding: 0.5rem 1rem;
+    font-size: 0.8rem;
+    line-height: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .form-read-value--textarea {
+    min-height: 3.25rem;
+    white-space: pre-wrap;
+  }
+
+  .grid-row {
+
+    .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

@@ -10,4 +10,5 @@ export enum TypeInputEnum {
   DATE = "date",
   SELECT = "select",
   TEXTAREA = "textarea",
+  PRICE = "price",
 }

package/src/form/form.interface.tsx

@@ -1,4 +1,7 @@
 import { TypeInputEnum } from "./form.enum";
+import { GridBreakpoints } from "../grid/grid.interface";
+
+export type FormMode = "read" | "edit";
 
 export type FormValuesInterface<
   T extends { [key: string]: string | number | boolean | Date | string[] }
@@ -25,6 +28,10 @@ export interface FormInterface {
   multiple?: boolean;
   options?: { value: string; label: string }[]; // <--- pour les <option>
   className?: string;
+  col?: GridBreakpoints;
+  formatReadValue?: (
+    value: string | number | boolean | Date | string[]
+  ) => React.ReactNode;
   autoComplete?: string;
   step?: string;
   onChange?: (

package/src/grid/col/Col.tsx

@@ -1,14 +1,12 @@
 import { ColStyled } from "./colStyled/ColStyled";
-type ColProps = {
-  xs?: number;
-  sm?: number;
-  md?: number;
-  lg?: number;
+import { GridBreakpoints } from "../grid.interface";
+
+type ColProps = GridBreakpoints & {
   children: React.ReactNode;
 };
-export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, children }) => {
+export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, xl, children }) => {
   return (
-    <ColStyled $xs={xs} $sm={sm} $md={md} $lg={lg}>
+    <ColStyled $xs={xs} $sm={sm} $md={md} $lg={lg} $xl={xl}>
       {children}
     </ColStyled>
   );

package/src/grid/col/colStyled/ColStyled.tsx

@@ -1,12 +1,17 @@
 import styled, { css } from "styled-components";
+import { GridColumnSpan } from "../../grid.interface";
+
 const getColWidth = (size = 12) => `${(size / 12) * 100}%`;
 type ColStyledProps = {
-  $xs?: number;
-  $sm?: number;
-  $md?: number;
-  $lg?: number;
+  $xs?: GridColumnSpan;
+  $sm?: GridColumnSpan;
+  $md?: GridColumnSpan;
+  $lg?: GridColumnSpan;
+  $xl?: GridColumnSpan;
 };
 export const ColStyled = styled.div<ColStyledProps>`
+  box-sizing: border-box;
+  min-width: 0;
   padding: 0 15px;
   flex: 0 0 ${({ $xs }) => getColWidth($xs)};
   max-width: ${({ $xs }) => getColWidth($xs)};
@@ -15,7 +20,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $sm }) =>
     $sm &&
     css`
-      @container (min-width: 576px) {
+      @media (min-width: 576px) {
         flex: 0 0 ${getColWidth($sm)};
         max-width: ${getColWidth($sm)};
       }
@@ -24,7 +29,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $md }) =>
     $md &&
     css`
-      @container (min-width: 768px) {
+      @media (min-width: 768px) {
         flex: 0 0 ${getColWidth($md)};
         max-width: ${getColWidth($md)};
       }
@@ -33,9 +38,18 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $lg }) =>
     $lg &&
     css`
-      @container (min-width: 992px) {
+      @media (min-width: 992px) {
         flex: 0 0 ${getColWidth($lg)};
         max-width: ${getColWidth($lg)};
       }
     `}
+
+  ${({ $xl }) =>
+    $xl &&
+    css`
+      @media (min-width: 1200px) {
+        flex: 0 0 ${getColWidth($xl)};
+        max-width: ${getColWidth($xl)};
+      }
+    `}
 `;

package/src/grid/grid.interface.tsx

@@ -1,7 +1,13 @@
-export interface GridInterface {
-  sm?: number;
-  xs?: number;
-  md?: number;
-  lg?: number;
+export type GridColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface GridBreakpoints {
+  xs?: GridColumnSpan;
+  sm?: GridColumnSpan;
+  md?: GridColumnSpan;
+  lg?: GridColumnSpan;
+  xl?: GridColumnSpan;
+}
+
+export interface GridInterface extends GridBreakpoints {
   children: React.ReactNode;
 }

package/src/header/Header.tsx

@@ -40,7 +40,7 @@ export const Header = ({
           className={`header-logo ${onClickLogo && "cursor-pointer"} `}
           onClick={onClickLogo}
         >
-          {logo && <img src={logo} alt="logo" />}
+          {logo && logo}
         </span>
       </div>
       <div className="d-flex align-items-center">

package/src/header/header.interface.tsx

@@ -1,5 +1,5 @@
 export interface HeaderInterface {
-  logo?: string;
+  logo?: React.ReactNode;
   children?: React.ReactNode;
   positionFixed?: boolean;
   onClickMenu?: () => void;

package/src/index.css

@@ -1,9 +1,9 @@
 /* variables couleur */
 :root {
-  --primary-color: #004aad;
-  --secondary-color: #ff914d;
-  --tertiary-color: #00ada1;
-  --quaternary-color: #0082ad;
+  --primary-color: #123852;
+  --secondary-color: #EB5E3B;
+  --tertiary-color: #30B8C2;
+  --quaternary-color: #7dc2ef;
   --success-color: #28a745;
   --info-color: #17a2b8;
   --warning-color: #ec942c;
@@ -17,7 +17,10 @@
 html,
 body {
   margin: 0;
-  font-family: "Raleway", sans-serif !important;
+  font-family: "Lexend", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-size: 18px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: 100%;
@@ -28,38 +31,48 @@ body {
   width: 100%;
   background-color: #fff;
 }
+
 .app {
   container: app-container/ inline-size;
 }
 
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none; /* Chrome, Safari, Edge */
+  -webkit-appearance: none;
+  /* Chrome, Safari, Edge */
   margin: 0;
 }
+
 /* flex properties */
 
 .d-flex {
   display: flex;
 }
+
 .justify-content-start {
   justify-content: start;
 }
+
 .justify-content-end {
   justify-content: end;
 }
+
 .justify-content-center {
   justify-content: center;
 }
+
 .justify-content-between {
   justify-content: space-between;
 }
+
 .justify-content-around {
   justify-content: space-around;
 }
+
 .justify-content-evenly {
   justify-content: space-evenly;
 }
+
 .align-items-start {
   align-items: start;
 }
@@ -310,63 +323,83 @@ a {
 .mb-3 {
   margin-bottom: 1rem;
 }
+
 .pb-0 {
   padding-bottom: 0;
 }
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
+
 .pb-3 {
   padding-bottom: 1rem;
 }
+
 .pt-0 {
   padding-top: 0;
 }
+
 .pt-1 {
   padding-top: 0.25rem;
 }
+
 .pt-2 {
   padding-top: 0.5rem;
 }
+
 .pt-3 {
   padding-top: 1rem;
 }
+
 .pl-0 {
   padding-left: 0;
 }
+
 .pl-1 {
   padding-left: 0.25rem;
 }
+
 .pl-2 {
   padding-left: 0.5rem;
 }
+
 .pl-3 {
   padding-left: 1rem;
 }
+
 .pr-0 {
   padding-right: 0;
 }
+
 .pr-1 {
   padding-right: 0.25rem;
 }
+
 .pr-2 {
   padding-right: 0.5rem;
 }
+
 .pr-3 {
   padding-right: 1rem;
 }
+
 .p-0 {
   padding: 0;
 }
+
 .p-1 {
   padding: 0.25rem;
 }
+
 .p-2 {
   padding: 0.5rem;
 }
+
 .p-3 {
   padding: 1rem;
 }
@@ -375,25 +408,32 @@ a {
 .border-bottom {
   border-bottom: 1px solid #cfbdbd;
 }
+
 .border-top {
   border-top: 1px solid #cfbdbd;
 }
+
 .border-left {
   border-left: 1px solid #cfbdbd;
 }
+
 .border-right {
   border-right: 1px solid #cfbdbd;
 }
+
 /* fonts */
 .font-weight-bold {
   font-weight: 600;
 }
+
 .font-weight-light {
   font-weight: 300;
 }
+
 .font-weight-normal {
   font-weight: 400;
 }
+
 .font-weight-italic {
   font-style: italic;
 }
@@ -402,32 +442,41 @@ a {
 .visible {
   visibility: visible;
 }
+
 .hidden {
   visibility: hidden;
 }
+
 .position-relative {
   position: relative;
 }
+
 .position-absolute {
   position: absolute;
 }
+
 .cursor-pointer {
   cursor: pointer;
 }
+
 .w-100 {
   width: 100%;
 }
+
 .min-width-auto {
   min-width: auto;
 }
+
 .disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
 }
+
 .overflow-auto {
   overflow: auto;
 }
+
 .toggle-btn {
   display: flex;
   width: 100%;
@@ -492,11 +541,8 @@ a {
   /* Couleurs : gris pour la barre, transparent pour le fond */
 }
 
-@media (min-width: 576px) {
-}
+@media (min-width: 576px) {}
 
-@media (min-width: 768px) {
-}
+@media (min-width: 768px) {}
 
-@media (min-width: 992px) {
-}
+@media (min-width: 992px) {}