kelt-ui-kit-react 1.9.9 → 2.0.0

package/dist/toaster/store/useToasterStore.d.ts

@@ -12,6 +12,7 @@ type ToasterState = {
         severity?: "info" | "success" | "error" | "warning";
         duration?: number;
         children?: React.ReactNode;
+        close?: boolean;
     }) => void;
     hideToast: () => void;
 };

package/index.html

@@ -5,8 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
-    rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vite + React + TS</title>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.9.9",
+  "version": "2.0.0",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -53,4 +53,4 @@
     "typescript": "^4.9.5",
     "vite-plugin-checker": "^0.8.0"
   }
-}
+}

package/src/button/button.css

@@ -5,7 +5,7 @@ button {
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 500;
   transition: background-color 0.3s;
   display: flex;
@@ -14,7 +14,7 @@ button {
   position: relative;
   align-items: center;
   justify-content: center;
-  font-family: "Raleway", sans-serif !important;
+  font-family: "Lexend", sans-serif;
   .badge {
     position: absolute;
     right: 10px;

package/src/card/card.css

@@ -87,12 +87,12 @@
   }
 
   .card-title {
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 600;
   }
 
   .card-content {
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 400;
     display: none;
   }

package/src/dataTable/dataTable.css

@@ -54,7 +54,7 @@
   .data-table {
     width: 100%;
     border-spacing: 0;
-    font-size: 14px;
+    font-size: 16px;
     color: #333;
 
     .select-cell {
@@ -84,7 +84,7 @@
         top: 0;
         z-index: 2;
         background-color: #fff;
-        color: #bdbaba;
+        color: var(--tertiary-color);
         min-width: 100px;
         padding: .5rem;
       }
@@ -125,7 +125,7 @@
           border: 1px solid #dcdcdc;
           background-color: #f8f9fa;
           color: #333;
-          font-size: 14px;
+          font-size: 16px;
           line-height: 1;
           cursor: pointer;
           transition: background-color 0.15s, border-color 0.15s;

package/src/expands/expands.css

@@ -77,7 +77,7 @@
       .expand-header-title-left {
         margin-right: 0.5rem;
         text-transform: uppercase;
-        font-size: 14px;
+        font-size: 18px;
         font-weight: 500;
       }
     }

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

@@ -59,4 +59,21 @@ form {
   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;
+  }
 }

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,10 +1,13 @@
 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>`
   padding: 0 15px;
@@ -38,4 +41,13 @@ export const ColStyled = styled.div<ColStyledProps>`
         max-width: ${getColWidth($lg)};
       }
     `}
+
+  ${({ $xl }) =>
+    $xl &&
+    css`
+      @container (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;