kelt-ui-kit-react 2.0.8 → 2.1.0

package/src/menus/menus.css

@@ -1,47 +1,47 @@
-.menu {
-  width: 200px;
-  padding: 2rem;
-  .submenu{
-    li{
-      a{
-        font-size : 0.9rem;
-      }
-    }
-  }
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      button {
-        background: transparent;
-        color: #000;
-        font-weight: 300;
-        padding: 0px;
-        border-radius: 0px;
-        min-width: auto;
-        margin: 0;
-        justify-content: normal;
-
-        &:hover {
-          color: #f00;
-        }
-      }
-
-      a {
-        text-decoration: none;
-        color: #000;
-        font-weight: 300;
-
-        &:hover {
-          color: #f00;
-        }
-      }
-    }
-  }
-}
+.menu {
+  width: 200px;
+  padding: 2rem;
+  .submenu{
+    li{
+      a{
+        font-size : 0.9rem;
+      }
+    }
+  }
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      button {
+        background: transparent;
+        color: #000;
+        font-weight: 300;
+        padding: 0px;
+        border-radius: 0px;
+        min-width: auto;
+        margin: 0;
+        justify-content: normal;
+
+        &:hover {
+          color: #f00;
+        }
+      }
+
+      a {
+        text-decoration: none;
+        color: #000;
+        font-weight: 300;
+
+        &:hover {
+          color: #f00;
+        }
+      }
+    }
+  }
+}

package/src/message/Message.tsx

@@ -1,30 +1,30 @@
-import { useMemo } from "react";
-import { Icon } from "../icon/Icon";
-import "./message.css";
-export type MessageProps = {
-  text: string;
-  severity: string;
-  className?: string;
-};
-export const Message = ({ text, severity, className }: MessageProps) => {
-  const icon = useMemo(() => {
-    switch (severity) {
-      case "info":
-        return "bi-info-circle";
-      case "warning":
-        return "bi-exclamation-triangle";
-      case "error":
-        return "bi-x-circle";
-      case "success":
-        return "bi-check-circle";
-      default:
-        return "bi-info-circle";
-    }
-  }, [severity]);
-  return (
-    <div className={`message message--${severity} ${className ?? ""}`}>
-      <Icon classIcon={icon} />
-      <span className="message-text">{text}</span>
-    </div>
-  );
-};
+import { useMemo } from "react";
+import { Icon } from "../icon/Icon";
+import "./message.css";
+export type MessageProps = {
+  text: string;
+  severity: string;
+  className?: string;
+};
+export const Message = ({ text, severity, className }: MessageProps) => {
+  const icon = useMemo(() => {
+    switch (severity) {
+      case "info":
+        return "bi-info-circle";
+      case "warning":
+        return "bi-exclamation-triangle";
+      case "error":
+        return "bi-x-circle";
+      case "success":
+        return "bi-check-circle";
+      default:
+        return "bi-info-circle";
+    }
+  }, [severity]);
+  return (
+    <div className={`message message--${severity} ${className ?? ""}`}>
+      <Icon classIcon={icon} />
+      <span className="message-text">{text}</span>
+    </div>
+  );
+};

package/src/message/Message.view.tsx

@@ -1,22 +1,22 @@
-import { Message } from "./Message";
-
-export const MessageView = () => {
-  const messages = [
-    { text: "Information message", severity: "info" },
-    { text: "Warning message", severity: "warning" },
-    { text: "Error message", severity: "error" },
-    { text: "Success message", severity: "success" },
-  ];
-  return (
-    <div>
-      {messages.map((msg, index) => (
-        <Message
-          className="mb-2"
-          key={index}
-          text={msg.text}
-          severity={msg.severity}
-        />
-      ))}
-    </div>
-  );
-};
+import { Message } from "./Message";
+
+export const MessageView = () => {
+  const messages = [
+    { text: "Information message", severity: "info" },
+    { text: "Warning message", severity: "warning" },
+    { text: "Error message", severity: "error" },
+    { text: "Success message", severity: "success" },
+  ];
+  return (
+    <div>
+      {messages.map((msg, index) => (
+        <Message
+          className="mb-2"
+          key={index}
+          text={msg.text}
+          severity={msg.severity}
+        />
+      ))}
+    </div>
+  );
+};

package/src/message/message.css

@@ -1,29 +1,29 @@
-.message {
-  padding: 0.75rem 1rem;
-  display: flex;
-  align-items: center;
-  border-radius: 4px;
-  .message-text {
-    margin-left: 0.5rem;
-  }
-  &.message--info {
-    background-color: #d9edf7;
-    color: #31708f;
-  }
-  &.message--success {
-    background-color: #dff0d8;
-    color: #3c763d;
-  }
-  &.message--warning {
-    background-color: #fcf8e3;
-    color: #8a6d3b;
-  }
-  &.message--error {
-    background-color: #f2dede;
-    color: #a94442;
-  }
-  &.message--default {
-    background-color: #f5f5f5;
-    color: #333333;
-  }
-}
+.message {
+  padding: 0.75rem 1rem;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  .message-text {
+    margin-left: 0.5rem;
+  }
+  &.message--info {
+    background-color: #d9edf7;
+    color: #31708f;
+  }
+  &.message--success {
+    background-color: #dff0d8;
+    color: #3c763d;
+  }
+  &.message--warning {
+    background-color: #fcf8e3;
+    color: #8a6d3b;
+  }
+  &.message--error {
+    background-color: #f2dede;
+    color: #a94442;
+  }
+  &.message--default {
+    background-color: #f5f5f5;
+    color: #333333;
+  }
+}

package/src/modal/Modal.tsx

@@ -1,59 +1,59 @@
-import React, { ReactNode } from "react";
-import { createPortal } from "react-dom";
-import { Button } from "../button/Button";
-import { Icon } from "../icon/Icon";
-import "./modal.css";
-
-interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit?: () => void;
-  titleButton?: string;
-  children: ReactNode;
-  title?: string;
-  styleContainer?: React.CSSProperties;
-  classNameContainer?: string;
-  closeOnOverlayClick?: boolean;
-}
-
-export const Modal: React.FC<ModalProps> = ({
-  isOpen,
-  onClose,
-  children,
-  onSubmit,
-  titleButton,
-  title,
-  styleContainer = {},
-  classNameContainer = "",
-  closeOnOverlayClick = true,
-}) => {
-  if (!isOpen) return null;
-  const handleOverlayMouseDown = () => {
-    if (closeOnOverlayClick) {
-      onClose();
-    }
-  };
-  return createPortal(
-    <div className="modal-overlay" onMouseDown={handleOverlayMouseDown}>
-      <div
-        className={`modal-container ${classNameContainer}`}
-        style={styleContainer}
-        onMouseDown={(e) => e.stopPropagation()}
-      >
-        <div className="modal-header">
-          {title && <h2 className="modal-title">{title}</h2>}
-          <div className="modal-close-button" onClick={onClose}>
-            <Icon classIcon="bi-x-lg" />
-          </div>
-        </div>
-        <div className="modal-content">{children}</div>
-        {onSubmit && (
-          <div className="d-flex justify-content-end">
-            <Button onClick={onSubmit} title={titleButton ?? ""} />
-          </div>
-        )}
-      </div>
-    </div>,
-    document.body,
-  );
-};
+import React, { ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { Button } from "../button/Button";
+import { Icon } from "../icon/Icon";
+import "./modal.css";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit?: () => void;
+  titleButton?: string;
+  children: ReactNode;
+  title?: string;
+  styleContainer?: React.CSSProperties;
+  classNameContainer?: string;
+  closeOnOverlayClick?: boolean;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  children,
+  onSubmit,
+  titleButton,
+  title,
+  styleContainer = {},
+  classNameContainer = "",
+  closeOnOverlayClick = true,
+}) => {
+  if (!isOpen) return null;
+  const handleOverlayMouseDown = () => {
+    if (closeOnOverlayClick) {
+      onClose();
+    }
+  };
+  return createPortal(
+    <div className="modal-overlay" onMouseDown={handleOverlayMouseDown}>
+      <div
+        className={`modal-container ${classNameContainer}`}
+        style={styleContainer}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <div className="modal-header">
+          {title && <h2 className="modal-title">{title}</h2>}
+          <div className="modal-close-button" onClick={onClose}>
+            <Icon classIcon="bi-x-lg" />
+          </div>
+        </div>
+        <div className="modal-content">{children}</div>
+        {onSubmit && (
+          <div className="d-flex justify-content-end">
+            <Button onClick={onSubmit} title={titleButton ?? ""} />
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+};

package/src/modal/Modal.view.tsx

@@ -1,26 +1,26 @@
-import { useCallback, useState } from "react";
-import { Button } from "../button/Button";
-import { Modal } from "./Modal";
-
-export const ModalView = (): JSX.Element => {
-  const [isOpen, setIsOpen] = useState(false);
-  const openModal = useCallback(() => {
-    setIsOpen(true);
-  }, [setIsOpen, true]);
-
-  return (
-    <div>
-      <Button onClick={openModal} title="Open Modal" />
-      <Modal
-        onSubmit={() => setIsOpen(false)}
-        title={"test"}
-        titleButton="Submit"
-        closeOnOverlayClick={false}
-        onClose={() => setIsOpen(false)}
-        isOpen={isOpen}
-      >
-        test
-      </Modal>
-    </div>
-  );
-};
+import { useCallback, useState } from "react";
+import { Button } from "../button/Button";
+import { Modal } from "./Modal";
+
+export const ModalView = (): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false);
+  const openModal = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen, true]);
+
+  return (
+    <div>
+      <Button onClick={openModal} title="Open Modal" />
+      <Modal
+        onSubmit={() => setIsOpen(false)}
+        title={"test"}
+        titleButton="Submit"
+        closeOnOverlayClick={false}
+        onClose={() => setIsOpen(false)}
+        isOpen={isOpen}
+      >
+        test
+      </Modal>
+    </div>
+  );
+};

package/src/modal/modal.css

@@ -1,71 +1,71 @@
-/* Modal.css */
-
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 2;
-}
-
-.modal-container {
-  background: white;
-  border-radius: 8px;
-  max-width: 500px;
-  width: 90%;
-  max-height: 90%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  position: relative;
-  animation: fadeIn 0.3s ease;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.modal-title {
-  font-size: 1.25rem;
-  margin: 0;
-}
-
-.modal-close-button {
-  background: transparent;
-  border: none;
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  cursor: pointer;
-}
-
-.modal-close-button:hover {
-  color: red;
-}
-
-.modal-content {
-  margin-top: 10px;
-  flex: 1;
-  overflow: hidden;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
+/* Modal.css */
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+}
+
+.modal-container {
+  background: white;
+  border-radius: 8px;
+  max-width: 500px;
+  width: 90%;
+  max-height: 90%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  position: relative;
+  animation: fadeIn 0.3s ease;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.modal-title {
+  font-size: 1.25rem;
+  margin: 0;
+}
+
+.modal-close-button {
+  background: transparent;
+  border: none;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+}
+
+.modal-close-button:hover {
+  color: red;
+}
+
+.modal-content {
+  margin-top: 10px;
+  flex: 1;
+  overflow: hidden;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/src/notFound/NotFound.tsx

@@ -1,3 +1,3 @@
-export const NotFound = (): JSX.Element => {
-  return <h1>404 - Page Not Found</h1>;
-};
+export const NotFound = (): JSX.Element => {
+  return <h1>404 - Page Not Found</h1>;
+};