kelt-ui-kit-react 1.2.3 → 1.2.5

package/src/action/ButtonAction.tsx

@@ -1,32 +1,32 @@
-import { Badge, BadgeInterface } from "../badge/Badge";
-import { Icon } from "../icon/Icon";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import "./action.css";
-
-export type ButtonActionProps = {
-  className?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  title?: string;
-  classIcon?: string;
-  badge?: BadgeInterface;
-};
-export const ButtonAction = ({
-  className,
-  onClick,
-  title,
-  classIcon,
-  badge,
-}: ButtonActionProps) => {
-  const handleClick = (e: React.MouseEvent) => {
-    if (onClick) {
-      onClick(e);
-    }
-  };
-  return (
-    <div className={`action ${className}`} onClick={handleClick}>
-      {badge && <Badge {...badge} />}
-      {classIcon && <Icon classIcon={classIcon} size={IconSizeEnum.LARGE} />}
-      <small>{title}</small>
-    </div>
-  );
-};
+import { Badge, BadgeInterface } from "../badge/Badge";
+import { Icon } from "../icon/Icon";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import "./action.css";
+
+export type ButtonActionProps = {
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  title?: string;
+  classIcon?: string;
+  badge?: BadgeInterface;
+};
+export const ButtonAction = ({
+  className,
+  onClick,
+  title,
+  classIcon,
+  badge,
+}: ButtonActionProps) => {
+  const handleClick = (e: React.MouseEvent) => {
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  return (
+    <div className={`action ${className}`} onClick={handleClick}>
+      {badge && <Badge {...badge} />}
+      {classIcon && <Icon classIcon={classIcon} size={IconSizeEnum.LARGE} />}
+      <small>{title}</small>
+    </div>
+  );
+};

package/src/action/action.css

@@ -1,20 +1,20 @@
-.action {
-  background-color: var(--tertiary-color);
-  color: #fff;
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0.5rem 0.5rem;
-  min-width: 120px;
-  text-align: center;
-  cursor: pointer;
-  border-radius: 4px;
-  height: 100%;
-  .badge {
-    position: absolute;
-    right: 10px;
-    top: -10px;
-  }
-}
+.action {
+  background-color: var(--tertiary-color);
+  color: #fff;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0.5rem 0.5rem;
+  min-width: 120px;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 4px;
+  height: 100%;
+  .badge {
+    position: absolute;
+    right: 10px;
+    top: -10px;
+  }
+}

package/src/badge/Badge.tsx

@@ -1,34 +1,34 @@
-import { useCallback } from "react";
-import { Icon } from "../icon/Icon";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import "./badge.css";
-export type BadgeInterface = {
-  className?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  title?: string;
-  sizeIcon?: IconSizeEnum;
-  classIcon?: string;
-};
-export const Badge = ({
-  className,
-  onClick,
-  title,
-  sizeIcon,
-  classIcon,
-}: BadgeInterface) => {
-  const handleClick = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (onClick) {
-      onClick(e);
-    }
-  }, []);
-  return (
-    <div
-      onClick={handleClick}
-      className={`badge ${className ? className : ""}`}
-    >
-      {classIcon && <Icon size={sizeIcon} classIcon={classIcon}></Icon>}
-      <span>{title}</span>
-    </div>
-  );
-};
+import { useCallback } from "react";
+import { Icon } from "../icon/Icon";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import "./badge.css";
+export type BadgeInterface = {
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  title?: string;
+  sizeIcon?: IconSizeEnum;
+  classIcon?: string;
+};
+export const Badge = ({
+  className,
+  onClick,
+  title,
+  sizeIcon,
+  classIcon,
+}: BadgeInterface) => {
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onClick) {
+      onClick(e);
+    }
+  }, []);
+  return (
+    <div
+      onClick={handleClick}
+      className={`badge ${className ? className : ""}`}
+    >
+      {classIcon && <Icon size={sizeIcon} classIcon={classIcon}></Icon>}
+      <span>{title}</span>
+    </div>
+  );
+};

package/src/badge/Badge.view.tsx

@@ -1,15 +1,15 @@
-import { Badge } from "./Badge";
-
-export const BadgeView = (): JSX.Element => {
-  return (
-    <>
-      <Badge
-        className="badge--primary"
-        title="Badge"
-        sizeIcon={undefined}
-        classIcon="bi-check-circle"
-        onClick={() => console.log("Badge clicked")}
-      />
-    </>
-  );
-};
+import { Badge } from "./Badge";
+
+export const BadgeView = (): JSX.Element => {
+  return (
+    <>
+      <Badge
+        className="badge--primary"
+        title="Badge"
+        sizeIcon={undefined}
+        classIcon="bi-check-circle"
+        onClick={() => console.log("Badge clicked")}
+      />
+    </>
+  );
+};

package/src/badge/badge.css

@@ -1,55 +1,55 @@
-.badge {
-  display: flex;
-  align-items: center;
-  padding: 0.25em 0.4em;
-  font-size: 0.5rem;
-  font-weight: 700;
-  line-height: 1;
-  color: #fff;
-  width: fit-content;
-  text-transform: uppercase;
-  border-radius: 0.2rem;
-  background-color: #007bff;
-  border: 1px solid transparent;
-  .bi {
-    font-size: 0.8rem;
-    margin-right: 0.25rem;
-  }
-  &.badge-primary {
-    background-color: var(--primary-color);
-    border-color: var(--primary-color);
-  }
-  &.badge-secondary {
-    background-color: var(--secondary-color);
-    border-color: var(--secondary-color);
-  }
-  &.badge-success {
-    background-color: #28a745;
-    border-color: #28a745;
-  }
-  &.badge-danger {
-    background-color: #dc3545;
-    border-color: #dc3545;
-  }
-  &.badge-warning {
-    background-color: #ffc107;
-    border-color: #ffc107;
-  }
-  &.badge-info {
-    background-color: #17a2b8;
-    border-color: #17a2b8;
-  }
-  &.badge-light {
-    background-color: #f8f9fa;
-    border-color: #f8f9fa;
-    color: #212529;
-  }
-  &.badge-dark {
-    background-color: #343a40;
-    border-color: #343a40;
-  }
-  &.badge-link {
-    color: #007bff;
-    text-decoration: none;
-  }
-}
+.badge {
+  display: flex;
+  align-items: center;
+  padding: 0.25em 0.4em;
+  font-size: 0.5rem;
+  font-weight: 700;
+  line-height: 1;
+  color: #fff;
+  width: fit-content;
+  text-transform: uppercase;
+  border-radius: 0.2rem;
+  background-color: #007bff;
+  border: 1px solid transparent;
+  .bi {
+    font-size: 0.8rem;
+    margin-right: 0.25rem;
+  }
+  &.badge-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+  &.badge-secondary {
+    background-color: var(--secondary-color);
+    border-color: var(--secondary-color);
+  }
+  &.badge-success {
+    background-color: #28a745;
+    border-color: #28a745;
+  }
+  &.badge-danger {
+    background-color: #dc3545;
+    border-color: #dc3545;
+  }
+  &.badge-warning {
+    background-color: #ffc107;
+    border-color: #ffc107;
+  }
+  &.badge-info {
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+  }
+  &.badge-light {
+    background-color: #f8f9fa;
+    border-color: #f8f9fa;
+    color: #212529;
+  }
+  &.badge-dark {
+    background-color: #343a40;
+    border-color: #343a40;
+  }
+  &.badge-link {
+    color: #007bff;
+    text-decoration: none;
+  }
+}

package/src/button/Button.tsx

@@ -1,44 +1,44 @@
-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,
-  classIcon,
-  positionicon = 1,
-  disabled = false,
-}: ButtonInterface) => {
-  const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (onClick) {
-      onClick(e);
-    }
-  };
-
-  return (
-    <button
-      disabled={disabled}
-      type="submit"
-      onClick={(e) => handleClick(e)}
-      className={className}
-    >
-      {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,
+  classIcon,
+  positionicon = 1,
+  disabled = false,
+}: ButtonInterface) => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  return (
+    <button
+      disabled={disabled}
+      type="submit"
+      onClick={(e) => handleClick(e)}
+      className={className}
+    >
+      {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,61 +1,61 @@
-import { useMemo } from "react";
-import { Button } from "./Button";
-import { ButtonInterface } from "./button.interface";
-import {
-  ButtonActions,
-  ButtonActionsProps,
-} from "./buttonActions/ButtonActions";
-
-export const ButtonView = (): JSX.Element => {
-  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>
-  );
-};
+import { useMemo } from "react";
+import { Button } from "./Button";
+import { ButtonInterface } from "./button.interface";
+import {
+  ButtonActions,
+  ButtonActionsProps,
+} from "./buttonActions/ButtonActions";
+
+export const ButtonView = (): JSX.Element => {
+  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>
+  );
+};

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: 16px;
-  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: "Raleway", sans-serif !important;
-  .badge {
-    position: absolute;
-    right: 10px;
-    top: -10px;
-  }
-  &:disabled {
-    opacity: 0.5;
-    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: 16px;
+  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: "Raleway", sans-serif !important;
+  .badge {
+    position: absolute;
+    right: 10px;
+    top: -10px;
+  }
+  &:disabled {
+    opacity: 0.5;
+    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,20 +1,20 @@
-import { BadgeInterface } from "../badge/Badge";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-
-export interface ButtonInterface {
-  className?: string;
-  badge?: BadgeInterface;
-  onClick?: (e: React.MouseEvent) => void;
-  title: string;
-  classIcon?: string;
-  positionicon?: number;
-  disabled?: boolean;
-  sizeIcon?: IconSizeEnum;
-}
-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;
+  onClick?: (e: React.MouseEvent) => void;
+  title: string;
+  classIcon?: string;
+  positionicon?: number;
+  disabled?: boolean;
+  sizeIcon?: IconSizeEnum;
+}
+export interface buttonActionInterface {
+  icon?: string;
+  id?: number | string;
+  label: string;
+  disabled?: boolean;
+  onClick: (a: buttonActionInterface) => void;
+}