px-react-ui-components 1.0.1 → 1.0.2

package/package.json

@@ -1,7 +1,19 @@
 {
   "name": "px-react-ui-components",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "dist/index.js",
+  "module": "dist/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "scripts": {
     "build": "babel src --out-dir dist --copy-files"
   },

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-react"]
-}

package/src/components/MyAlert/MyAlert.css

@@ -1,113 +0,0 @@
-
-.react-confirm-alert-blur {
-    filter: url(#gaussian-blur);
-    filter: blur(2px);
-    -webkit-filter: blur(2px);
-}
-
-.react-confirm-alert-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 9999;
-    background: rgba(99, 99, 99, 0.9);
-    display: -webkit-flex;
-    display: -moz-flex;
-    display: -ms-flex;
-    display: -o-flex;
-    display: flex;
-    justify-content: center;
-    -ms-align-items: center;
-    align-items: center;
-    opacity: 0;
-    -webkit-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-    -moz-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-    -o-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-    animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-}
-
-.react-confirm-alert-body {
-    font-family: "Nunito", sans-serif;
-    width: 90%; /* Daha geniş cihazlarda %90 genişlik */
-    max-width: 400px; /* Maksimum genişlik sınırı */
-    padding: 20px;
-    text-align: left;
-    background: #fff;
-    border-radius: 10px;
-    box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
-    color: #666;
-    text-align: center;
-    margin: 0 auto; /* Orta hizalama */
-}
-
-@media (max-width: 600px) {
-    .react-confirm-alert-body {
-        width: 95%; /* Küçük ekranlarda daha fazla boşluk */
-        max-width: 320px; /* Maksimum genişlik daha küçük */
-    }
-}
-
-.react-confirm-alert-svg {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.react-confirm-alert-body > h1 {
-    margin-top: 0;
-    color: #1e293b !important;
-    font-weight: bold;
-    font-size: 1.3em;
-    border-radius: 0px;
-}
-
-.react-confirm-alert-body > h3 {
-    margin: 0;
-    font-size: 3.5em !important;
-    color: #1e293b !important;
-}
-
-.react-confirm-alert-button-group {
-    display: -webkit-flex;
-    display: -moz-flex;
-    display: -ms-flex;
-    display: -o-flex;
-    display: flex;
-    justify-content: space-between;
-    margin-top: 30px;
-}
-
-.react-confirm-alert-button-group > button {
-    outline: none;
-    background: #1e293b;
-    border: none;
-    display: inline-block;
-    padding: 10px 18px;
-    color: #fff;
-    margin-right: 10px;
-    border-radius: 5px;
-    font-size: 1em;
-    cursor: pointer;
-    width: 100%;
-
-    &:hover {
-        opacity: 0.8;
-    }
-
-    &:last-child {
-        background: #506280 !important;
-        color: #fff;
-    }
-    &:first-child {
-        background: #1e293b !important;
-        color: #fff;
-    }
-}
-
-.react-confirm-alert-body {
-    width: 500px;
-    max-height: 300px;
-    overflow: auto;
-}

package/src/components/MyAlert/MyAlert.jsx

@@ -1,96 +0,0 @@
-import React from "react";
-
-import { confirmAlert } from "react-confirm-alert";
-import "react-confirm-alert/src/react-confirm-alert.css";
-import "./MyAlert.css";
-
-// import Swal from "sweetalert2";
-
-export const MyAlertType = {
-  WARNING: 'warning',
-  ERROR: 'error',
-  SUCCESS: 'success',
-  INFO: 'info',
-  QUESTION: 'question'
-};
-
-Object.freeze(MyAlertType); // Enum sabitlerini değiştirmeyi engeller
-
-export const MyAlert = (message, type = MyAlertType.INFO, { title = '', buttontext = { confirm: 'Tamam', cancel: 'İptal' }, callback = null } = {}) => {
-  let _showCancelButton = false;
-  switch (type) {
-    case MyAlertType.WARNING:
-      title = title ? title : 'Uyarı';
-      break;
-    case MyAlertType.ERROR:
-      title = title ? title : 'Hata!';
-      break;
-    case MyAlertType.SUCCESS:
-      title = title ? title : 'İşlem Başarılı';
-      break;
-    case MyAlertType.INFO:
-      title = title ? title : 'Bilgi';
-      break;
-    case MyAlertType.QUESTION:
-      title = title ? title : 'Onaylıyor musunuz?';
-      _showCancelButton = true;
-
-      if (buttontext.confirm == "Tamam") {
-        buttontext.confirm = "Evet";
-        buttontext.cancel = "Hayır";
-      }
-      break;
-  }
-
-  let _buttons = [
-    {
-      label: buttontext.confirm,
-      onClick: () => {
-        if (callback) callback({ isConfirmed: true, isDenied: false });
-      },
-    },
-  ];
-
-  if (_showCancelButton) {
-    _buttons.push({
-      label: buttontext.cancel,
-      onClick: () => {
-        if (callback) callback({ isConfirmed: false, isDenied: true });
-      },
-    });
-  }
-
-  confirmAlert({
-    title: title,
-    message: <div dangerouslySetInnerHTML={{
-      __html: (typeof message === 'string' ? message : message.props?.children || message.toString())
-    }}></div>,
-    buttons: _buttons,
-    onClickOutside: () => {
-      if (callback) callback({ isConfirmed: false, isDenied: true });
-    },
-    onKeypressEscape: () => {
-      if (callback) callback({ isConfirmed: false, isDenied: true });
-    }
-  });
-
-  // Swal.fire({
-  //   title: title,
-  //   html: message,
-  //   icon: type,
-  //   focusConfirm: true,
-  //   confirmButtonText: buttontext.confirm,
-  //   cancelButtonText: buttontext.cancel,
-  //   showCancelButton: _showCancelButton
-  // }).then((result) => {
-  //   if (callback){
-  //     callback(result);
-  //   }
-  //   // /* Read more about isConfirmed, isDenied below */
-  //   // if (result.isConfirmed) {
-  //   //   // Swal.fire("Saved!", "", "success");
-  //   // } else if (result.isDenied) {
-  //   //   // Swal.fire("Changes are not saved", "", "info");
-  //   // }
-  // });
-}

package/src/components/MyContainer/MyContainer.jsx

@@ -1,90 +0,0 @@
-import React from "react";
-import styles from "./MyContainer.module.css";
-
-function MyContainer({
-    children,
-    title = "",
-    description = null,
-    icon = null,
-    className = null,
-    titleTextStyle = null,
-    style = null,
-    headerClassName = null,
-    headerStyle = null,
-    bodyClassName = null,
-    bodyStyle = null,
-    footerClassName = null,
-    footerStyle = null,
-}) {
-    const arrChild = React.Children.toArray(children);
-
-    let childHeaderRight = null;
-    let childBody = null;
-    let childFooter = null;
-
-    for (let i = 0; i < arrChild.length; i++) {
-        const el = arrChild[i];
-        if (el.type && el.type.toString().includes("MyContainerTagRight")) {
-            childHeaderRight = el;
-        } else if (
-            el.type &&
-            el.type.toString().includes("MyContainerTagBody")
-        ) {
-            childBody = el;
-        } else if (
-            el.type &&
-            el.type.toString().includes("MyContainerTagFooter")
-        ) {
-            childFooter = el;
-        } else if (childBody == null) {
-            childBody = el;
-        } else if (
-            childBody != null &&
-            childFooter == null &&
-            i == arrChild.length - 1
-        ) {
-            childFooter = el;
-        }
-    }
-
-    return (
-        <section
-            className={`${styles.container} ${className || ""}`}
-            style={style}
-        >
-            {(title || childHeaderRight) && (
-                <div className={`${styles.header} ${headerClassName || ""}`} style={headerStyle}>
-                {title &&
-                    <>
-                        <h3 className={styles.title} style={titleTextStyle}>
-                            {title}
-                        </h3>
-                        {description && (
-                            <span className={styles.description}>
-                                {description}
-                            </span>
-                        )}
-                    </>
-                }
-                    {childHeaderRight && childHeaderRight}
-                </div>
-            )}
-            <div
-                className={`${styles.body} ${bodyClassName || ""}`}
-                style={(title ? { paddingTop: "12px" } : null)}
-            >
-                {childBody}
-            </div>
-            {childFooter && (
-                <div
-                    className={`${styles.footer} ${footerClassName || ""}`}
-                    style={(title ? { paddingTop: "12px" } : null) }
-                >
-                    {childFooter}
-                </div>
-            )}
-        </section>
-    );
-}
-
-export default MyContainer;

package/src/components/MyContainer/MyContainer.module.css

@@ -1,110 +0,0 @@
-.container {
-    position: relative;
-    display: block;
-    width: 100%;
-    background: #ffff;
-    border-radius: 15px;
-}
-
-.header {
-    position: relative;
-    display: block;
-    width: 100%;
-    padding: 15px;
-    padding-left: 20px;
-    padding-bottom: 7.5px;
-    border-bottom: 1px solid #d0d6de;
-    color: #464255;
-}
-
-.title {
-    margin: 0px !important;
-}
-
-.description {
-    font-size: 12px;
-}
-
-.rightBlock {
-    position: absolute;
-    right: 15px;
-    z-index: 2;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-}
-
-.rightBlock button {
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    justify-items: center;
-    align-items: center;
-    padding: 10px 15px;
-}
-
-.body {
-    display: block;
-    width: 100%;
-    padding: 15px;
-}
-
-.footer {
-    display: block;
-    width: 100%;
-    padding: 15px;
-    border-top: 1px solid #d0d6de;
-}
-
-@media screen and (max-width: 768px) {
-    .header {
-        padding: 10px;
-        padding-left: 15px;
-        padding-bottom: 5px;
-    }
-
-    .rightBlock {
-        position: relative;
-        right: auto;
-        top: auto;
-        transform: none;
-        margin-top: 10px;
-        justify-content: flex-end;
-    }
-
-    .rightBlock button {
-        padding: 8px 12px;
-        font-size: 14px;
-    }
-
-    .body {
-        padding: 10px;
-    }
-
-    .footer {
-        padding: 10px;
-    }
-}
-
-@media screen and (max-width: 480px) {
-    .header {
-        padding: 8px;
-        padding-left: 12px;
-        padding-bottom: 4px;
-    }
-
-    .rightBlock button {
-        padding: 6px 10px;
-        font-size: 12px;
-    }
-
-    .body {
-        padding: 8px;
-    }
-
-    .footer {
-        padding: 8px;
-    }
-}

package/src/components/MyContainer/MyContainerBody.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-function MyContainerBody({ children }) {
-  return (
-    <div className="MyContainerTagBody">{children}</div>
-  )
-}
-export default MyContainerBody

package/src/components/MyContainer/MyContainerFooter.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-function MyContainerFooter({ children }) {
-  return (
-    <div className="MyContainerTagFooter">{children}</div>
-  )
-}
-export default MyContainerFooter

package/src/components/MyContainer/MyContainerRight.jsx

@@ -1,11 +0,0 @@
-import React from "react";
-import styles from "./MyContainer.module.css";
-
-function MyContainerRight({ children }) {
-    return (
-        <div className={"MyContainerTagRight " + styles.rightBlock}>
-            {children}
-        </div>
-    );
-}
-export default MyContainerRight;