px-react-ui-components 1.0.0

package/.babelrc

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

package/README.md

@@ -0,0 +1,126 @@
+# My React UI Components
+
+A modern, customizable React UI components library designed to simplify web development. This library provides a comprehensive set of reusable components with built-in functionality for various input types, containers, and tab navigation.
+
+## Features
+
+- 🎨 Modern and responsive design
+- 📱 Multiple input types (Text, Select, Date, Number, Phone, Email)
+- 🧩 Customizable components with extensive props
+- 🎯 Built with React 18 for optimal performance
+- 🔧 Easy to integrate and use
+- 📚 Comprehensive documentation
+- 🎭 Tab navigation with rich features (labels, titles, descriptions, badges, icons)
+- 🛠️ Type-safe components
+
+## Quick Start
+
+```bash
+# Install the main package
+npm install px-react-ui-components
+
+# Install required peer dependencies
+npm install 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-confirm-alert@^3.0.6 react-icons@^5.5.0 react-image-crop@^11.0.7 react-loader-spinner@^6.1.6 react-zoom-pan-pinch@^3.7.0
+```
+
+## Peer Dependencies
+
+This library requires the following peer dependencies to be installed in your project:
+
+```json
+{
+  "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-confirm-alert": "^3.0.6",
+  "react-icons": "^5.5.0",
+  "react-image-crop": "^11.0.7",
+  "react-loader-spinner": "^6.1.6",
+  "react-zoom-pan-pinch": "^3.7.0"
+}
+```
+
+## Available Components
+
+The library includes the following components:
+
+- `MyAlert` :
+- `MyEditor` :
+- `MyFileUpload` :
+- `MyImageCropper` :
+- `MyMaps` :
+- `MyMenu` :
+- `MyModal` :
+- `MyNotFound` :
+- `MyScrollableCard` :
+- `MyTable` :
+- `MyWaiting` :
+- `MyZoomImage` :
+- `MyInput`: A versatile input component supporting multiple types:
+  - TEXT
+  - PASSWORD
+  - SELECT
+  - SELECTFILTER
+  - FILE
+  - IMAGE
+  - TEXTAREA
+  - COLOR
+  - READONLY
+  - DATE
+  - DATETIME
+  - TIME
+  - MONEY
+  - NUMBER
+  - MAIL
+  - PHONE
+- `MyContainer`: A flexible container component
+- `MyTabs`: Advanced tab navigation with rich features
+
+
+## Usage
+
+Import components as needed:
+
+```jsx
+import { MyInput, MyContainer, MyTabs, MyTabPane, MyInputType } from 'px-react-ui-components';
+
+// Example usage
+function App() {
+  return (
+    <MyContainer>
+      <MyInput type={MyInputType.TEXT} value={param} onChange={() => setParam(e.value)} placeholder="Enter text" />
+      <MyInput type={MyInputType.SELECT} value={param} onChange={() => setParam(e.value)} placeholder="Enter text" />
+      <MyInput type={MyInputType.DATE} value={param} onChange={() => setParam(e.value)} placeholder="Enter text" />
+      <MyInput type={MyInputType.NUMBER} value={param} onChange={() => setParam(e.value)} placeholder="Enter text" />
+      <MyInput type={MyInputType.PHONE} value={param} onChange={() => setParam(e.value)} placeholder="Enter text" />
+      <MyInput type={MyInputType.MAIL} value={param} onChange={() => setParam(e.value)} placeholder="Enter text" />
+
+      <MyTabs>
+        <MyTabPane label="Tab 1" title="" description="" badge="" icon="" className="">Content for Tab 1</MyTabPane>
+        <MyTabPane label="Tab 2" title="" description="" badge="" icon="" className="">Content for Tab 2</MyTabPane>
+      </MyTabs>
+    </MyContainer>
+  );
+}
+```
+
+## Development
+
+To build the project:
+
+```bash
+npm run build
+```
+
+This will compile the source files from `src` to `dist` directory.
+
+## License
+
+MIT © Piri AYKUT
+
+## Author
+
+Piri AYKUT | piriaykut@gmail.com

package/dist/components/MyAlert/MyAlert.css

@@ -0,0 +1,113 @@
+
+.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/dist/components/MyAlert/MyAlert.js

@@ -0,0 +1,109 @@
+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: /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: typeof message === 'string' ? message : message.props?.children || message.toString()
+      }
+    }),
+    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/dist/components/MyContainer/MyContainer.js

@@ -0,0 +1,59 @@
+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 /*#__PURE__*/React.createElement("section", {
+    className: `${styles.container} ${className || ""}`,
+    style: style
+  }, (title || childHeaderRight) && /*#__PURE__*/React.createElement("div", {
+    className: `${styles.header} ${headerClassName || ""}`,
+    style: headerStyle
+  }, title && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h3", {
+    className: styles.title,
+    style: titleTextStyle
+  }, title), description && /*#__PURE__*/React.createElement("span", {
+    className: styles.description
+  }, description)), childHeaderRight && childHeaderRight), /*#__PURE__*/React.createElement("div", {
+    className: `${styles.body} ${bodyClassName || ""}`,
+    style: title ? {
+      paddingTop: "12px"
+    } : null
+  }, childBody), childFooter && /*#__PURE__*/React.createElement("div", {
+    className: `${styles.footer} ${footerClassName || ""}`,
+    style: title ? {
+      paddingTop: "12px"
+    } : null
+  }, childFooter));
+}
+export default MyContainer;

package/dist/components/MyContainer/MyContainer.module.css

@@ -0,0 +1,110 @@
+.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/dist/components/MyContainer/MyContainerBody.js

@@ -0,0 +1,9 @@
+import React from "react";
+function MyContainerBody({
+  children
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "MyContainerTagBody"
+  }, children);
+}
+export default MyContainerBody;

package/dist/components/MyContainer/MyContainerFooter.js

@@ -0,0 +1,9 @@
+import React from "react";
+function MyContainerFooter({
+  children
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "MyContainerTagFooter"
+  }, children);
+}
+export default MyContainerFooter;

package/dist/components/MyContainer/MyContainerRight.js

@@ -0,0 +1,10 @@
+import React from "react";
+import styles from "./MyContainer.module.css";
+function MyContainerRight({
+  children
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "MyContainerTagRight " + styles.rightBlock
+  }, children);
+}
+export default MyContainerRight;