kelt-ui-kit-react 2.0.8 → 2.1.0

package/src/button/Button.tsx

@@ -1,48 +1,48 @@
-import { Badge } from "../badge/Badge";
-import { Icon } from "../icon/Icon";
-import "./button.css";
-import { ButtonInterface } from "./button.interface";
-
-export const Button = ({
-  className,
-  onClick,
-  badge,
-  title,
-  sizeIcon,
-  id,
-  classIcon,
-  positionicon = 1,
-  disabled = false,
-  style,
-}: ButtonInterface) => {
-  const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (onClick) {
-      onClick(e);
-    }
-  };
-
-  return (
-    <button
-      id={id ?? ""}
-      disabled={disabled}
-      type="submit"
-      onClick={(e) => handleClick(e)}
-      className={className}
-      style={style}
-    >
-      {badge && <Badge {...badge} />}
-      {classIcon && positionicon == 1 && (
-        <span className={`${title ? "mr-2" : ""}`}>
-          <Icon size={sizeIcon} classIcon={classIcon}></Icon>
-        </span>
-      )}
-      <span>{title}</span>
-      {classIcon && positionicon == 2 && (
-        <span className="ml-2">
-          <Icon classIcon={classIcon}></Icon>
-        </span>
-      )}
-    </button>
-  );
-};
+import { Badge } from "../badge/Badge";
+import { Icon } from "../icon/Icon";
+import "./button.css";
+import { ButtonInterface } from "./button.interface";
+
+export const Button = ({
+  className,
+  onClick,
+  badge,
+  title,
+  sizeIcon,
+  id,
+  classIcon,
+  positionicon = 1,
+  disabled = false,
+  style,
+}: ButtonInterface) => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  return (
+    <button
+      id={id ?? ""}
+      disabled={disabled}
+      type="submit"
+      onClick={(e) => handleClick(e)}
+      className={className}
+      style={style}
+    >
+      {badge && <Badge {...badge} />}
+      {classIcon && positionicon == 1 && (
+        <span className={`${title ? "mr-2" : ""}`}>
+          <Icon size={sizeIcon} classIcon={classIcon}></Icon>
+        </span>
+      )}
+      <span>{title}</span>
+      {classIcon && positionicon == 2 && (
+        <span className="ml-2">
+          <Icon classIcon={classIcon}></Icon>
+        </span>
+      )}
+    </button>
+  );
+};

package/src/button/Button.view.tsx

@@ -1,85 +1,85 @@
-import { useMemo } from "react";
-import { TypeInputEnum } from "../form/form.enum";
-import { FormInterface } from "../form/form.interface";
-import { Button } from "./Button";
-import { ButtonInterface } from "./button.interface";
-import {
-  ButtonActions,
-  ButtonActionsProps,
-} from "./buttonActions/ButtonActions";
-import { ButtonFilters } from "./buttonFilters/ButtonFilters";
-
-export const ButtonView = (): JSX.Element => {
-  const initialValues: FormInterface[] = [
-    {
-      value: false,
-      name: "test1",
-      label: "test 1",
-      type: TypeInputEnum.CHECKBOX,
-    },
-    {
-      value: false,
-      name: "test2",
-      label: "test 2",
-      type: TypeInputEnum.CHECKBOX,
-    },
-  ];
-  const mockButtonItems: ButtonInterface[] = [
-    {
-      title: "Envoyer",
-      onClick: () => console.log("Envoyer"),
-      classIcon: "bi-send",
-      disabled: true,
-      positionicon: 1,
-      badge: {
-        className: "badge--primary",
-        title: "Badge",
-        sizeIcon: undefined,
-        classIcon: "bi-check-circle",
-        onClick: () => console.log("Badge clicked"),
-      },
-    },
-    {
-      title: "Annuler",
-      onClick: () => console.log("Envoyer"),
-      className: "button--secondary",
-    },
-  ];
-  const mockButtonAction: ButtonActionsProps = useMemo(() => {
-    return {
-      title: "Supprimer",
-      onClick: () => console.log("Supprimer"),
-      className: "button--secondary",
-
-      actions: [
-        {
-          id: "1",
-          label: "Supprimer",
-          onClick: () => console.log("Supprimer action"),
-        },
-        {
-          id: "2",
-          label: "Supprimer définitivement",
-          onClick: () => console.log("Supprimer définitivement"),
-        },
-      ],
-    };
-  }, []);
-  return (
-    <div className="d-flex">
-      {mockButtonItems.map((item, index) => (
-        <div className="mr-2" key={index}>
-          <Button {...item} />
-        </div>
-      ))}
-      <ButtonActions {...mockButtonAction} />
-      <div className="ml-2">
-        <ButtonFilters
-          classIcon="bi-send"
-          {...mockButtonAction}
-          dataForm={initialValues}
-        />
-      </div>
-    </div>
-  );
-};
+import { useMemo } from "react";
+import { TypeInputEnum } from "../form/form.enum";
+import { FormInterface } from "../form/form.interface";
+import { Button } from "./Button";
+import { ButtonInterface } from "./button.interface";
+import {
+  ButtonActions,
+  ButtonActionsProps,
+} from "./buttonActions/ButtonActions";
+import { ButtonFilters } from "./buttonFilters/ButtonFilters";
+
+export const ButtonView = (): JSX.Element => {
+  const initialValues: FormInterface[] = [
+    {
+      value: false,
+      name: "test1",
+      label: "test 1",
+      type: TypeInputEnum.CHECKBOX,
+    },
+    {
+      value: false,
+      name: "test2",
+      label: "test 2",
+      type: TypeInputEnum.CHECKBOX,
+    },
+  ];
+  const mockButtonItems: ButtonInterface[] = [
+    {
+      title: "Envoyer",
+      onClick: () => console.log("Envoyer"),
+      classIcon: "bi-send",
+      disabled: true,
+      positionicon: 1,
+      badge: {
+        className: "badge--primary",
+        title: "Badge",
+        sizeIcon: undefined,
+        classIcon: "bi-check-circle",
+        onClick: () => console.log("Badge clicked"),
+      },
+    },
+    {
+      title: "Annuler",
+      onClick: () => console.log("Envoyer"),
+      className: "button--secondary",
+    },
+  ];
+  const mockButtonAction: ButtonActionsProps = useMemo(() => {
+    return {
+      title: "Supprimer",
+      onClick: () => console.log("Supprimer"),
+      className: "button--secondary",
+
+      actions: [
+        {
+          id: "1",
+          label: "Supprimer",
+          onClick: () => console.log("Supprimer action"),
+        },
+        {
+          id: "2",
+          label: "Supprimer définitivement",
+          onClick: () => console.log("Supprimer définitivement"),
+        },
+      ],
+    };
+  }, []);
+  return (
+    <div className="d-flex">
+      {mockButtonItems.map((item, index) => (
+        <div className="mr-2" key={index}>
+          <Button {...item} />
+        </div>
+      ))}
+      <ButtonActions {...mockButtonAction} />
+      <div className="ml-2">
+        <ButtonFilters
+          classIcon="bi-send"
+          {...mockButtonAction}
+          dataForm={initialValues}
+        />
+      </div>
+    </div>
+  );
+};

package/src/button/button.css

@@ -1,53 +1,53 @@
-button {
-  background-color: var(--primary-color);
-  color: white;
-  border: none;
-  padding: 10px;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 18px;
-  font-weight: 500;
-  transition: background-color 0.3s;
-  display: flex;
-  max-height: 40px;
-  min-width: 150px;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  font-family: "Lexend", sans-serif;
-  .badge {
-    position: absolute;
-    right: 10px;
-    top: -10px;
-  }
-  &:disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-  }
-  &.button--primary {
-    background-color: var(--primary-color);
-  }
-
-  &.button--secondary {
-    background-color: var(--secondary-color);
-  }
-  &.button--tertiary {
-    background-color: var(--tertiary-color);
-  }
-  &.button--transparent {
-    background-color: transparent;
-    color: var(--primary-color);
-    border: 1px solid;
-  }
-  &.button--success {
-    background-color: var(--success-color);
-  }
-
-  &.button--info {
-    background-color: var(--info-color);
-  }
-
-  &.button--warning {
-    background-color: var(--warning-color);
-  }
-}
+button {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 500;
+  transition: background-color 0.3s;
+  display: flex;
+  max-height: 40px;
+  min-width: 150px;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  font-family: "Lexend", sans-serif;
+  .badge {
+    position: absolute;
+    right: 10px;
+    top: -10px;
+  }
+  &:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+  &.button--primary {
+    background-color: var(--primary-color);
+  }
+
+  &.button--secondary {
+    background-color: var(--secondary-color);
+  }
+  &.button--tertiary {
+    background-color: var(--tertiary-color);
+  }
+  &.button--transparent {
+    background-color: transparent;
+    color: var(--primary-color);
+    border: 1px solid;
+  }
+  &.button--success {
+    background-color: var(--success-color);
+  }
+
+  &.button--info {
+    background-color: var(--info-color);
+  }
+
+  &.button--warning {
+    background-color: var(--warning-color);
+  }
+}

package/src/button/button.interface.tsx

@@ -1,22 +1,22 @@
-import { BadgeInterface } from "../badge/Badge";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-
-export interface ButtonInterface {
-  className?: string;
-  badge?: BadgeInterface;
-  id?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  title: string;
-  classIcon?: string;
-  positionicon?: number;
-  disabled?: boolean;
-  sizeIcon?: IconSizeEnum;
-  style?: React.CSSProperties;
-}
-export interface buttonActionInterface {
-  icon?: string;
-  id?: number | string;
-  label: string;
-  disabled?: boolean;
-  onClick: (a: buttonActionInterface) => void;
-}
+import { BadgeInterface } from "../badge/Badge";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+
+export interface ButtonInterface {
+  className?: string;
+  badge?: BadgeInterface;
+  id?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  title: string;
+  classIcon?: string;
+  positionicon?: number;
+  disabled?: boolean;
+  sizeIcon?: IconSizeEnum;
+  style?: React.CSSProperties;
+}
+export interface buttonActionInterface {
+  icon?: string;
+  id?: number | string;
+  label: string;
+  disabled?: boolean;
+  onClick: (a: buttonActionInterface) => void;
+}

package/src/button/buttonActions/ButtonActions.tsx

@@ -1,104 +1,104 @@
-import { useCallback, useMemo, useRef, useState } from "react";
-import { Icon } from "../../icon/Icon";
-import { IconSizeEnum } from "../../icon/iconSize.enum";
-import { MenuInterface } from "../../menus/menu/menu.interface";
-import { Menus } from "../../menus/Menus";
-import { OverlayPanel, PositionOverlay } from "../../overlayPanel/OverlayPanel";
-import { Button } from "../Button";
-import { buttonActionInterface } from "../button.interface";
-
-export type ButtonActionsProps = {
-  className?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  title: string;
-  actions?: buttonActionInterface[];
-  classIcon?: string;
-  positionActions?: PositionOverlay;
-  disabled?: boolean;
-  id?: string;
-};
-export const ButtonActions = ({
-  className,
-  onClick,
-  title,
-  actions,
-  positionActions = "topRight",
-  disabled = false,
-  id,
-}: ButtonActionsProps) => {
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    if (onClick) {
-      onClick(e);
-    }
-  };
-  const refButton = useRef<HTMLDivElement>(null);
-  const [openOverlay, setOpenOverlay] = useState(false);
-  const onClickActions = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (actions) setOpenOverlay(!openOverlay);
-    },
-    [openOverlay, setOpenOverlay],
-  );
-  const overlayMenu: MenuInterface[] = useMemo(() => {
-    if (!actions) return [];
-    return actions.map((a, index) => {
-      return {
-        id: a.id ?? index,
-        icon: a.icon,
-        name: a.label,
-        children: (
-          <Button
-            key={index}
-            classIcon={a.icon}
-            sizeIcon={IconSizeEnum.LARGE}
-            onClick={(e) => {
-              e.stopPropagation();
-              closeOverlay();
-              a.onClick && a.onClick(a);
-            }}
-            title={a.label || ""}
-          />
-        ),
-      };
-    }) as MenuInterface[];
-  }, [actions]);
-  const closeOverlay = useCallback(() => {
-    setOpenOverlay(false);
-  }, [setOpenOverlay]);
-  return (
-    <>
-      <button
-        id={id ?? ""}
-        disabled={disabled}
-        type="submit"
-        onClick={(e) => handleClick(e)}
-        className={` ${className} button-actions`}
-      >
-        <span className="mr-2 flex-1">{title}</span>
-
-        <span
-          className="ml-2"
-          ref={refButton}
-          onClick={(e) => onClickActions(e)}
-        >
-          <Icon classIcon="bi-chevron-up" />
-        </span>
-      </button>
-      {actions && openOverlay && refButton.current && (
-        <OverlayPanel
-          show={openOverlay}
-          position={positionActions}
-          closeOverlay={setOpenOverlay}
-          referenceElement={refButton.current}
-          children={
-            <div>
-              <Menus className="card-action-menu" items={overlayMenu} />
-            </div>
-          }
-        />
-      )}
-    </>
-  );
-};
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Icon } from "../../icon/Icon";
+import { IconSizeEnum } from "../../icon/iconSize.enum";
+import { MenuInterface } from "../../menus/menu/menu.interface";
+import { Menus } from "../../menus/Menus";
+import { OverlayPanel, PositionOverlay } from "../../overlayPanel/OverlayPanel";
+import { Button } from "../Button";
+import { buttonActionInterface } from "../button.interface";
+
+export type ButtonActionsProps = {
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  title: string;
+  actions?: buttonActionInterface[];
+  classIcon?: string;
+  positionActions?: PositionOverlay;
+  disabled?: boolean;
+  id?: string;
+};
+export const ButtonActions = ({
+  className,
+  onClick,
+  title,
+  actions,
+  positionActions = "topRight",
+  disabled = false,
+  id,
+}: ButtonActionsProps) => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  const refButton = useRef<HTMLDivElement>(null);
+  const [openOverlay, setOpenOverlay] = useState(false);
+  const onClickActions = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (actions) setOpenOverlay(!openOverlay);
+    },
+    [openOverlay, setOpenOverlay],
+  );
+  const overlayMenu: MenuInterface[] = useMemo(() => {
+    if (!actions) return [];
+    return actions.map((a, index) => {
+      return {
+        id: a.id ?? index,
+        icon: a.icon,
+        name: a.label,
+        children: (
+          <Button
+            key={index}
+            classIcon={a.icon}
+            sizeIcon={IconSizeEnum.LARGE}
+            onClick={(e) => {
+              e.stopPropagation();
+              closeOverlay();
+              a.onClick && a.onClick(a);
+            }}
+            title={a.label || ""}
+          />
+        ),
+      };
+    }) as MenuInterface[];
+  }, [actions]);
+  const closeOverlay = useCallback(() => {
+    setOpenOverlay(false);
+  }, [setOpenOverlay]);
+  return (
+    <>
+      <button
+        id={id ?? ""}
+        disabled={disabled}
+        type="submit"
+        onClick={(e) => handleClick(e)}
+        className={` ${className} button-actions`}
+      >
+        <span className="mr-2 flex-1">{title}</span>
+
+        <span
+          className="ml-2"
+          ref={refButton}
+          onClick={(e) => onClickActions(e)}
+        >
+          <Icon classIcon="bi-chevron-up" />
+        </span>
+      </button>
+      {actions && openOverlay && refButton.current && (
+        <OverlayPanel
+          show={openOverlay}
+          position={positionActions}
+          closeOverlay={setOpenOverlay}
+          referenceElement={refButton.current}
+          children={
+            <div>
+              <Menus className="card-action-menu" items={overlayMenu} />
+            </div>
+          }
+        />
+      )}
+    </>
+  );
+};