kelt-ui-kit-react 1.8.2 → 1.8.3

package/package/src/form/inputNumber/InputNumber.tsx

@@ -0,0 +1,132 @@
+import { forwardRef, useCallback } from "react";
+import { TypeInputEnum } from "../form.enum";
+import "../input/input.css";
+
+export type InputNumberProps = {
+  id: string;
+  name: string;
+  value?: string; // ⚠️ string pour gérer la saisie manuelle
+  placeholder?: string;
+  className?: string;
+  pattern?: string; // regex pour validation (ex: "^-?\\d*[.,]?\\d*$" pour nombre décimal)
+  disabled?: boolean;
+  required?: boolean;
+  inputMode?: "numeric" | "decimal";
+  autoFocus?: boolean;
+  maxLength?: number;
+  autoComplete?: string;
+  tabIndex?: number;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange?: (
+    e: React.ChangeEvent<HTMLInputElement>,
+    valueFormat?: string,
+  ) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+};
+
+export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
+  (
+    {
+      id,
+      name,
+      value = "",
+      placeholder,
+      className,
+      disabled = false,
+      required = false,
+      autoFocus = false,
+      maxLength = 10,
+      autoComplete = "off",
+      tabIndex = 0,
+      inputMode = "numeric",
+      pattern,
+      onChange,
+      onBlur,
+      onClick,
+      onKeyDown,
+      onFocus,
+    },
+    ref,
+  ) => {
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        let newValue = e.target.value.replace(",", ".");
+
+        // ✅ Autoriser les chiffres, . , et - (mais - seulement au début)
+        if (!/^-?\d*[.,]?\d*$/.test(newValue) && newValue !== "") {
+          return; // saisie invalide → on ignore
+        }
+
+        // ✅ Empêcher plus de maxLength
+        if (maxLength && newValue.length > maxLength) {
+          return;
+        }
+
+        onChange?.(e, newValue);
+      },
+      [onChange, maxLength],
+    );
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+      // ✅ Autoriser chiffres, contrôle, ., , et -
+      const allowed =
+        /[0-9]|Backspace|Delete|ArrowLeft|ArrowRight|Tab|Enter|Home|End/.test(
+          e.key,
+        ) ||
+        e.key === "." ||
+        e.key === "," ||
+        e.key === "-";
+
+      if (!allowed) {
+        e.preventDefault();
+        return;
+      }
+
+      // ❌ Interdire plusieurs "-" ou "-" ailleurs que début
+      if (e.key === "-") {
+        const cursorPos = (e.target as HTMLInputElement).selectionStart ?? 0;
+        if (cursorPos !== 0 || value.includes("-")) {
+          e.preventDefault();
+        }
+      }
+    };
+
+    return (
+      <div className="input-container input-container-number">
+        <input
+          ref={ref}
+          id={id}
+          name={name}
+          type={TypeInputEnum.TEXT} // reste en text pour éviter les comportements natifs bizarres
+          value={value}
+          placeholder={placeholder}
+          disabled={disabled}
+          required={required}
+          autoFocus={autoFocus}
+          autoComplete={autoComplete}
+          pattern={pattern}
+          tabIndex={tabIndex}
+          inputMode={inputMode} // mobile keyboard adaptatif
+          spellCheck="false"
+          className={`input-field ${className ?? ""}`}
+          onChange={handleChange}
+          onWheel={(e) => e.currentTarget.blur()}
+          onKeyDown={handleKeyDown}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClick?.(e);
+          }}
+        />
+      </div>
+    );
+  },
+);
+
+InputNumber.displayName = "InputNumber";

package/package/src/form/inputNumber/InputNumber.view.tsx

@@ -0,0 +1,15 @@
+import { useState } from "react";
+import { InputNumber } from "./InputNumber";
+
+export const InputNumberView = () => {
+  const [value, setValue] = useState("");
+  return (
+    <InputNumber
+      id="input-number-example"
+      name="inputNumber"
+      placeholder="Enter a number"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+};

package/package/src/form/inputPrice/InputPrice.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, useCallback } from "react";
+import { InputNumber, InputNumberProps } from "../inputNumber/InputNumber";
+
+export type InputPriceProps = Omit<InputNumberProps, "onChange"> & {
+  locale?: string; // ex: 'fr-FR'
+  currency?: string; // ex: 'EUR'
+  allowDecimals?: boolean;
+  onChange?: (value: string) => void;
+  value?: string;
+};
+export const InputPrice = forwardRef<HTMLInputElement, InputPriceProps>(
+  (
+    {
+      value = "",
+      locale = "fr-FR",
+      currency = "EUR",
+      allowDecimals = true,
+      onChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const handleBlur = useCallback(() => {
+      if (onChange) {
+        let newValue = value.replace(",", ".");
+        onChange(parseFloat(newValue || "0").toFixed(2));
+      }
+    }, [onChange, value]);
+
+    return (
+      <InputNumber
+        {...props}
+        ref={ref}
+        pattern="[0-9]*[.,]?[0-9]*"
+        inputMode="decimal" // mobile keyboard adaptatif
+        value={value ?? ""}
+        onChange={(e) => onChange?.(e.target.value)}
+        onBlur={handleBlur} // Force le formatage à 2 décimales en sortie
+      />
+    );
+  },
+);

package/package/src/form/inputPrice/InputPrice.view.tsx

@@ -0,0 +1,15 @@
+import { useState } from "react";
+import { InputPrice } from "./InputPrice";
+
+export const InputPriceView = () => {
+  const [value, setValue] = useState("");
+  return (
+    <InputPrice
+      id="input-price-example"
+      name="inputPrice"
+      placeholder="Enter a price"
+      value={value}
+      onChange={setValue}
+    />
+  );
+};

package/package/src/form/textArea/TextArea.tsx

@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useState } from "react";
+import "./textArea.css";
+export type TextAreaProps = {
+  name: string;
+  id?: string;
+  value?: string;
+  disabled?: boolean;
+  width?: string;
+  className?: string;
+  onChange?: (value: string, name: string) => void;
+  placeholder?: string;
+  rows?: number;
+  cols?: number;
+  required?: boolean;
+};
+export const TextArea = ({
+  name,
+  id,
+  value,
+  disabled,
+  width,
+  className,
+  onChange,
+  placeholder,
+  cols,
+  rows,
+  required = false,
+}: TextAreaProps) => {
+  const [textAreaValue, setTextAreaValue] = useState(value);
+  useEffect(() => {
+    setTextAreaValue(value);
+  }, [value]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      setTextAreaValue(newValue);
+      if (onChange) {
+        onChange(newValue, name);
+      }
+    },
+    [onChange, name]
+  );
+  return (
+    <textarea
+      id={id}
+      style={{ width: width }}
+      className={`form-control-textarea ${className ?? ""}`}
+      name={name}
+      disabled={disabled}
+      value={textAreaValue}
+      onChange={handleChange}
+      placeholder={placeholder}
+      cols={cols}
+      rows={rows}
+      required={required}
+    />
+  );
+};

package/package/src/form/textArea/TextArea.view.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import { TextArea } from "./TextArea";
+
+export const TextAreaView = () => {
+  const textAreaData = useMemo(
+    () => [
+      {
+        name: "textArea",
+        value:
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        placeholder: "Enter text here...",
+        rows: 5,
+        cols: 50,
+      },
+    ],
+    []
+  );
+  return (
+    <div>
+      <h1>TextArea</h1>
+      {textAreaData.map((textArea, index) => (
+        <div key={index}>
+          <TextArea
+            name={textArea.name}
+            value={textArea.value}
+            placeholder={textArea.placeholder}
+            rows={textArea.rows}
+            cols={textArea.cols}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

package/package/src/form/textArea/textArea.css

@@ -0,0 +1,9 @@
+.form-control-textarea {
+  border: 1px solid #cfbdbd;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  margin: 0.25rem 0;
+  min-width: 250px;
+  resize: none;
+  font-size: 0.9rem;
+}

package/package/src/grid/Grid.tsx

@@ -0,0 +1,21 @@
+import { Col } from "./col/Col";
+import { Container } from "./container/Container";
+import { GridInterface } from "./grid.interface";
+import { Row } from "./row/Row";
+type GridProps = {
+  items: GridInterface[];
+  className?: string;
+  scroll?: boolean;
+};
+
+export const Grid = ({ items, className, scroll }: GridProps) => {
+  return (
+    <Container>
+      <Row scroll={scroll} className={className}>
+        {items.map((item, id) => (
+          <Col key={id} {...item} />
+        ))}
+      </Row>
+    </Container>
+  );
+};

package/package/src/grid/Grid.view.tsx

@@ -0,0 +1,24 @@
+import { Grid } from "./Grid";
+import { GridInterface } from "./grid.interface";
+
+export const GridView = (): JSX.Element => {
+  const mockItems: GridInterface[] = [
+    {
+      md: 6,
+      lg: 4,
+      children: <>test</>,
+    },
+    {
+      md: 6,
+      lg: 4,
+      children: <>test 2 </>,
+    },
+    {
+      md: 6,
+      lg: 4,
+      children: <>test 3 </>,
+    },
+  ];
+
+  return <Grid items={mockItems} />;
+};

package/package/src/grid/col/Col.tsx

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

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

@@ -0,0 +1,41 @@
+import styled, { css } from "styled-components";
+const getColWidth = (size = 12) => `${(size / 12) * 100}%`;
+type ColStyledProps = {
+  $xs?: number;
+  $sm?: number;
+  $md?: number;
+  $lg?: number;
+};
+export const ColStyled = styled.div<ColStyledProps>`
+  padding: 0 15px;
+  flex: 0 0 ${({ $xs }) => getColWidth($xs)};
+  max-width: ${({ $xs }) => getColWidth($xs)};
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  ${({ $sm }) =>
+    $sm &&
+    css`
+      @container (min-width: 576px) {
+        flex: 0 0 ${getColWidth($sm)};
+        max-width: ${getColWidth($sm)};
+      }
+    `}
+
+  ${({ $md }) =>
+    $md &&
+    css`
+      @container (min-width: 768px) {
+        flex: 0 0 ${getColWidth($md)};
+        max-width: ${getColWidth($md)};
+      }
+    `}
+
+  ${({ $lg }) =>
+    $lg &&
+    css`
+      @container (min-width: 992px) {
+        flex: 0 0 ${getColWidth($lg)};
+        max-width: ${getColWidth($lg)};
+      }
+    `}
+`;

package/package/src/grid/container/Container.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import "./container.css";
+type ContainerProps = {
+  children: React.ReactNode;
+};
+export const Container: React.FC<ContainerProps> = ({ children }) => (
+  <div className="container">{children}</div>
+);

package/package/src/grid/container/container.css

@@ -0,0 +1,5 @@
+.container {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 15px;
+}

package/package/src/grid/grid.interface.tsx

@@ -0,0 +1,7 @@
+export interface GridInterface {
+  sm?: number;
+  xs?: number;
+  md?: number;
+  lg?: number;
+  children: React.ReactNode;
+}

package/package/src/grid/row/Row.tsx

@@ -0,0 +1,12 @@
+import "./row.css";
+type RowProps = {
+  children: React.ReactNode;
+  className?: string;
+  scroll?: boolean;
+};
+
+export const Row: React.FC<RowProps> = ({ children, className, scroll }) => (
+  <div className={`grid-row ${className ?? ""} ${scroll ? "scroll" : ""}`}>
+    {children}
+  </div>
+);

package/package/src/grid/row/row.css

@@ -0,0 +1,18 @@
+.grid-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -15px;
+  &.scroll {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+  }
+}
+
+@container (min-width: 998px) {
+  .grid-row {
+    &.scroll {
+      overflow-x: auto;
+      flex-wrap: wrap;
+    }
+  }
+}

package/package/src/header/Header.tsx

@@ -0,0 +1,62 @@
+import { useCallback, useRef, useState } from "react";
+import { Icon } from "../icon/Icon";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import { OverlayPanel } from "../overlayPanel/OverlayPanel";
+import "./header.css";
+import { HeaderInterface } from "./header.interface";
+
+export const Header = ({
+  children,
+  logo,
+  onClickMenu,
+  userChildren,
+  positionFixed,
+  onClickLogo,
+  showBackNavigation,
+  onClickBackNavigation,
+}: HeaderInterface): JSX.Element => {
+  const refButton = useRef<HTMLDivElement>(null);
+  const [openOverlay, setOpenOverlay] = useState(false);
+  const onClickUser = useCallback(() => {
+    setOpenOverlay(!openOverlay);
+  }, [openOverlay, setOpenOverlay]);
+  return (
+    <div className={`header ${positionFixed ? "header--fixed" : ""}`}>
+      <div className="flex-1 d-flex align-items-center">
+        <span onClick={onClickMenu}>
+          <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-list"></Icon>
+        </span>
+        {showBackNavigation && (
+          <span className="chevron-back" onClick={onClickBackNavigation}>
+            <Icon
+              size={IconSizeEnum.EXTRA_SMALL}
+              classIcon="bi-caret-left-fill"
+            ></Icon>
+          </span>
+        )}
+
+        <span
+          className={`header-logo ${onClickLogo && "cursor-pointer"} `}
+          onClick={onClickLogo}
+        >
+          {logo && <img src={logo} alt="logo" />}
+        </span>
+      </div>
+      <div className="d-flex align-items-center">
+        {children}
+        <div ref={refButton} onClick={onClickUser}>
+          <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-person-circle"></Icon>
+        </div>
+        {openOverlay && refButton.current && (
+          <OverlayPanel
+            position="bottomRight"
+            show={openOverlay}
+            closeOverlay={setOpenOverlay}
+            referenceElement={refButton.current}
+            children={userChildren}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/package/src/header/Header.view.tsx

@@ -0,0 +1,5 @@
+import { Header } from "./Header";
+
+export const HeaderView = (): JSX.Element => {
+  return <Header showBackNavigation={true} />;
+};

package/package/src/header/header.css

@@ -0,0 +1,26 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  height: 50px;
+  border-bottom: 1px solid #cfbdbd;
+  background-color: #fff;
+  width: 100%;
+
+  &.header--fixed {
+    position: fixed;
+  }
+
+  .header-logo {
+    margin-left: 1rem;
+
+    img {
+      width: 50px;
+    }
+  }
+
+  .bi {
+    cursor: pointer;
+  }
+}

package/package/src/header/header.interface.tsx

@@ -0,0 +1,10 @@
+export interface HeaderInterface {
+  logo?: string;
+  children?: React.ReactNode;
+  positionFixed?: boolean;
+  onClickMenu?: () => void;
+  userChildren?: React.ReactNode;
+  onClickLogo?: () => void;
+  showBackNavigation?: boolean;
+  onClickBackNavigation?: () => void;
+}

package/package/src/home/Home.tsx

@@ -0,0 +1,3 @@
+export const Home = (): JSX.Element => {
+  return <h1>Home</h1>;
+};

package/package/src/icon/Icon.tsx

@@ -0,0 +1,6 @@
+import "./icon.css";
+import { IconInterface } from "./icon.interface";
+
+export const Icon = ({ classIcon, size }: IconInterface): JSX.Element => {
+  return <i className={`bi ${classIcon} ${size ?? "sm"}`} />;
+};

package/package/src/icon/Icons.view.tsx

@@ -0,0 +1,29 @@
+import { Icon } from "./Icon";
+import { IconInterface } from "./icon.interface";
+
+export const IconsView = (): JSX.Element => {
+  const mockItems: IconInterface[] = [
+    {
+      classIcon: "bi-list",
+    },
+    {
+      classIcon: "bi-person-circle",
+    },
+    {
+      classIcon: "bi-volume-mute-fill",
+    },
+  ];
+
+  return (
+    <>
+      <p>
+        <a href="https://icons.getbootstrap.com/#usage" target="_blank">
+          Liste des icons utilisables
+        </a>
+      </p>
+      {mockItems.map((item, idx) => (
+        <Icon key={idx} classIcon={item.classIcon} />
+      ))}
+    </>
+  );
+};

package/package/src/icon/icon.css

@@ -0,0 +1,20 @@
+.bi {
+  &.xs {
+    font-size: 1rem;
+  }
+  &.sm {
+    font-size: 1.2rem;
+  }
+
+  &.md {
+    font-size: 1.4rem;
+  }
+
+  &.xl {
+    font-size: 1.6rem;
+  }
+
+  &.xxl {
+    font-size: 2rem;
+  }
+}

package/package/src/icon/icon.interface.tsx

@@ -0,0 +1,6 @@
+import { IconSizeEnum } from "./iconSize.enum";
+
+export interface IconInterface {
+  classIcon: string;
+  size?: IconSizeEnum;
+}

package/package/src/icon/iconSize.enum.ts

@@ -0,0 +1,7 @@
+export enum IconSizeEnum {
+  EXTRA_SMALL = "xs",
+  SMALL = "sm",
+  MEDIUM = "md",
+  LARGE = "xl",
+  EXTRA_LARGE = "xxl",
+}