px-react-ui-components 1.0.1 → 1.0.3

package/dist/index.js

@@ -1,15 +1,131 @@
-export { default as MyInput } from './components/MyInput';
-export { default as MyAlert } from './components/MyAlert';
-export { default as MyContainer } from './components/MyContainer';
-export { default as MyEditor } from './components/MyEditor';
-export { default as MyFileUpload } from './components/MyFileUpload';
-export { default as MyImageCropper } from './components/MyImageCropper';
-export { default as MyMaps } from './components/MyMaps';
-export { default as MyMenu } from './components/MyMenu';
-export { default as MyModal } from './components/MyModal';
-export { default as MyNotFound } from './components/MyNotFound';
-export { default as MyScrollableCard } from './components/MyScrollableCard';
-export { default as MyTable } from './components/MyTable';
-export { default as MyTabs } from './components/MyTabs';
-export { default as MyWaiting } from './components/MyWaiting';
-export { default as MyZoomImage } from './components/MyZoomImage';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MyAlert", {
+  enumerable: true,
+  get: function get() {
+    return _MyAlert["default"];
+  }
+});
+Object.defineProperty(exports, "MyContainer", {
+  enumerable: true,
+  get: function get() {
+    return _MyContainer["default"];
+  }
+});
+Object.defineProperty(exports, "MyEditor", {
+  enumerable: true,
+  get: function get() {
+    return _MyEditor["default"];
+  }
+});
+Object.defineProperty(exports, "MyFileUpload", {
+  enumerable: true,
+  get: function get() {
+    return _MyFileUpload["default"];
+  }
+});
+Object.defineProperty(exports, "MyImageCropper", {
+  enumerable: true,
+  get: function get() {
+    return _MyImageCropper["default"];
+  }
+});
+Object.defineProperty(exports, "MyInput", {
+  enumerable: true,
+  get: function get() {
+    return _MyInput["default"];
+  }
+});
+exports.MyInputType = void 0;
+Object.defineProperty(exports, "MyMaps", {
+  enumerable: true,
+  get: function get() {
+    return _MyMaps["default"];
+  }
+});
+Object.defineProperty(exports, "MyMenu", {
+  enumerable: true,
+  get: function get() {
+    return _MyMenu["default"];
+  }
+});
+Object.defineProperty(exports, "MyModal", {
+  enumerable: true,
+  get: function get() {
+    return _MyModal["default"];
+  }
+});
+Object.defineProperty(exports, "MyNotFound", {
+  enumerable: true,
+  get: function get() {
+    return _MyNotFound["default"];
+  }
+});
+Object.defineProperty(exports, "MyScrollableCard", {
+  enumerable: true,
+  get: function get() {
+    return _MyScrollableCard["default"];
+  }
+});
+Object.defineProperty(exports, "MyTable", {
+  enumerable: true,
+  get: function get() {
+    return _MyTable["default"];
+  }
+});
+Object.defineProperty(exports, "MyTabs", {
+  enumerable: true,
+  get: function get() {
+    return _MyTabs["default"];
+  }
+});
+Object.defineProperty(exports, "MyWaiting", {
+  enumerable: true,
+  get: function get() {
+    return _MyWaiting["default"];
+  }
+});
+Object.defineProperty(exports, "MyZoomImage", {
+  enumerable: true,
+  get: function get() {
+    return _MyZoomImage["default"];
+  }
+});
+var _MyInput = _interopRequireDefault(require("./components/MyInput"));
+var _MyAlert = _interopRequireDefault(require("./components/MyAlert"));
+var _MyContainer = _interopRequireDefault(require("./components/MyContainer"));
+var _MyEditor = _interopRequireDefault(require("./components/MyEditor"));
+var _MyFileUpload = _interopRequireDefault(require("./components/MyFileUpload"));
+var _MyImageCropper = _interopRequireDefault(require("./components/MyImageCropper"));
+var _MyMaps = _interopRequireDefault(require("./components/MyMaps"));
+var _MyMenu = _interopRequireDefault(require("./components/MyMenu"));
+var _MyModal = _interopRequireDefault(require("./components/MyModal"));
+var _MyNotFound = _interopRequireDefault(require("./components/MyNotFound"));
+var _MyScrollableCard = _interopRequireDefault(require("./components/MyScrollableCard"));
+var _MyTable = _interopRequireDefault(require("./components/MyTable"));
+var _MyTabs = _interopRequireDefault(require("./components/MyTabs"));
+var _MyWaiting = _interopRequireDefault(require("./components/MyWaiting"));
+var _MyZoomImage = _interopRequireDefault(require("./components/MyZoomImage"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// Export types
+var MyInputType = exports.MyInputType = {
+  TEXT: 'text',
+  PASSWORD: 'password',
+  SELECT: 'select',
+  SELECTFILTER: 'selectfilter',
+  FILE: 'file',
+  IMAGE: 'image',
+  TEXTAREA: 'textarea',
+  COLOR: 'color',
+  READONLY: 'readonly',
+  DATE: 'date',
+  DATETIME: 'datetime',
+  TIME: 'time',
+  MONEY: 'money',
+  NUMBER: 'number',
+  MAIL: 'mail',
+  PHONE: 'phone'
+};

package/package.json

@@ -1,9 +1,22 @@
 {
   "name": "px-react-ui-components",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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"
+    "build": "babel src --out-dir dist --copy-files --extensions \".js,.jsx\"",
+    "prepare": "npm run build"
   },
   "keywords": [
     "react",
@@ -26,16 +39,17 @@
   "devDependencies": {
     "@babel/cli": "^7.27.0",
     "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "katex": "^0.16.21",
     "quill": "^2.0.3",
     "quill-image-resize-module-react": "^3.0.0",
     "quill-table-ui": "^1.0.7",
+    "react": "^18.3.1",
     "react-confirm-alert": "^3.0.6",
+    "react-dom": "^18.3.1",
     "react-icons": "^5.5.0",
     "react-image-crop": "^11.0.7",
     "react-loader-spinner": "^6.1.6",

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;