px-react-ui-components 1.0.0

package/dist/components/MyTabs/MyTabs.css

@@ -0,0 +1,105 @@
+.my-TabsContainer {
+    display: flex;
+    width: 100%;
+    gap: 0px;
+    flex-direction: column;
+}
+
+.my-TabsTabList {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    list-style: none;
+    padding: 0 0 0 7px;
+    margin: 0px;
+}
+
+.my-TabsTabList li {
+    display: flex;
+    flex-direction: row;
+    padding: 8px 17px;
+    min-width: 100px;
+    text-align: center;
+    background: #f5f5f5;
+    margin-right: 1px;
+    font-size: 13px;
+    border-radius: 8px 8px 0 0;
+    gap: 0.5rem;
+    justify-content: center;
+    align-items: center;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+    border: 1px solid #dfe3e6;
+    border-bottom: none;
+}
+
+.my-TabsTabList li .icon {
+    font-size: 17px;
+    color: #8a9ba4;
+}
+
+.my-TabsTabList li .badge {
+    font-size: 9px;
+    color: #39464d;
+    background-color: #0000001f;
+    border-radius: 5px;
+    padding: 1px 5px 1px 5px;
+    margin-left: 5px;
+    margin-right: -8px;
+}
+
+.my-TabsTabList li .title {
+    font-size: 13px;
+    color: #000;
+
+}
+
+
+.my-TabsTabList li .description {
+    font-size: 11px;
+    color: #8a9ba4;
+}
+
+.my-TabsTabList li.active {
+    background: #b3d2e6;
+}
+.my-TabsTabList li.active .badge {
+    background-color: #2e465685;
+    color: #fff;
+}
+.my-TabsTabList li.active .title {
+    font-weight: 600;
+}
+.my-TabsTabList li.active .icon {
+    color: #000;
+}
+.my-TabsTabList li.active .description {
+    color: #435d6e;
+}
+
+.my-TabsTabList li:hover {
+    cursor: pointer;
+    background: #eeeeee;
+}
+.my-TabsTabList li.active:hover {
+    background: #c1ddf3;
+}
+
+.my-TabsTabBody {
+    display: inline-block;
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #d9dee1;
+    border-radius: 8px;
+    border-top-width: 2px;
+    border-top-color: #b3d2e6;
+}
+.my-TabsTabBody .my-TabsTabContainer {
+    display: none;
+    width: 100%;
+}
+.my-TabsTabBody .my-TabsTabContainer.active {
+    display: inline-block;
+    width: 100%;
+}

package/dist/components/MyTabs/MyTabs.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import "./MyTabs.css";
+function MyTabs({
+  children,
+  className = null,
+  style = null,
+  onChange = null,
+  activePaneIndex = -1,
+  activePaneName = null
+}) {
+  const [activei, setActivei] = useState(activePaneIndex > -1 ? activePaneIndex : 0);
+  const arrChild = React.Children.toArray(children);
+  useEffect(() => {
+    if (onChange) {
+      onChange({
+        index: activei,
+        name: arrChild[activei].props.name,
+        label: arrChild[activei].props.label && arrChild[activei].props.label || arrChild[activei].props.title
+      });
+    }
+  }, [activei]);
+  useEffect(() => {
+    if (activePaneName) {
+      const index = arrChild.findIndex(item => item.props.name === activePaneName);
+      if (index > -1) {
+        setActivei(index);
+      }
+    }
+  }, [activePaneName]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "my-TabsContainer " + (className ? className : ''),
+    style: style
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "my-TabsTabList"
+  }, arrChild.map((item, i) => {
+    return /*#__PURE__*/React.createElement("li", {
+      key: i,
+      className: (i == activei && 'active') + ' ' + (item.props.tabClassName ? item.props.tabClassName : ''),
+      style: item.props.tabStyle,
+      onClick: () => setActivei(i),
+      title: item.props.title
+    }, item.props.icon != undefined && /*#__PURE__*/React.createElement("div", {
+      className: "icon"
+    }, item.props.icon), /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-col gap-0 text-start"
+    }, item.props.label != undefined ? /*#__PURE__*/React.createElement("span", {
+      className: "title"
+    }, item.props.label) : /*#__PURE__*/React.createElement("span", {
+      className: "title"
+    }, item.props.title), item.props.description != undefined && /*#__PURE__*/React.createElement("div", {
+      className: "description"
+    }, item.props.description)), item.props.badge != undefined && /*#__PURE__*/React.createElement("div", {
+      className: "badge"
+    }, item.props.badge));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "my-TabsTabBody"
+  }, arrChild.map((item, i) => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: "my-TabsTabContainer " + (i == activei && 'active') + ' ' + (item.props.className ? item.props.className : ''),
+      style: item.props.style,
+      onClick: () => setActivei(i)
+    }, item.props.children);
+  })));
+}
+export default MyTabs;

package/dist/components/MyWaiting/MyWaiting.css

@@ -0,0 +1,28 @@
+.my-waiting-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #282c39de;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999999;
+}
+
+.my-waiting-content{
+  display: block;
+  color : #fff;
+}
+
+.my-waiting-content > div{
+  justify-content: center;
+}
+
+
+.my-waiting-message{
+  display: block;
+  padding: 15px 0;
+  text-align: center;
+}

package/dist/components/MyWaiting/MyWaiting.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { Oval } from "react-loader-spinner";
+import './MyWaiting.css'; // Modal için CSS dosyası
+
+export default function MyWaiting({
+  show = false,
+  message = null
+}) {
+  if (!show) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "my-waiting-backdrop"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "my-waiting-content"
+  }, /*#__PURE__*/React.createElement(Oval, {
+    visible: true,
+    height: "60",
+    width: "60",
+    color: "#fff",
+    secondaryColor: "#cdcdcd",
+    ariaLabel: "oval-loading",
+    strokeWidth: 5
+  }), message && /*#__PURE__*/React.createElement("span", {
+    className: "my-waiting-message"
+  }, message)));
+}

package/dist/components/MyZoomImage/MyZoomImage.js

@@ -0,0 +1,108 @@
+import React, { useRef, useState } from "react";
+import { TransformWrapper, TransformComponent, useControls } from "react-zoom-pan-pinch";
+import "./MyZoomImage.css";
+import { PiMinusBold, PiPlusBold, PiX, PiArrowUpBold, PiArrowDownBold, PiArrowLeftBold, PiArrowRightBold, PiArrowsIn } from "react-icons/pi";
+const Controls = ({
+  wrapperRef,
+  openArrow
+}) => {
+  const {
+    zoomIn,
+    zoomOut,
+    resetTransform,
+    centerView
+  } = useControls();
+  const handlePan = (x, y) => {
+    if (wrapperRef.current) {
+      // debugger
+      // Mevcut pozisyonu al
+      const state = wrapperRef.current.instance.transformState;
+      // Pozisyonu güncelle
+      wrapperRef.current.instance.setTransformState(state.scale, state.positionX + x, state.positionY + y);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "absolute flex flex-col gap-1 z-50 top-3 left-5"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-1 mb-3"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "bg-slate-400 hover:bg-slate-500 rounded-full p-2",
+    onClick: () => zoomIn(),
+    title: "Zoom +"
+  }, /*#__PURE__*/React.createElement(PiPlusBold, {
+    className: "text-lg text-white"
+  })), /*#__PURE__*/React.createElement("button", {
+    className: "bg-slate-400 hover:bg-slate-500 rounded-full p-2",
+    onClick: () => zoomOut(),
+    title: "Zoom -"
+  }, /*#__PURE__*/React.createElement(PiMinusBold, {
+    className: "text-lg text-white"
+  })), /*#__PURE__*/React.createElement("button", {
+    className: "bg-slate-400 hover:bg-slate-500 rounded-full p-2",
+    onClick: () => resetTransform(),
+    title: "Zoom Cancel"
+  }, /*#__PURE__*/React.createElement(PiX, {
+    className: "text-lg text-white"
+  }))), openArrow && /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-center p-2"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2 mb-1",
+    onClick: () => handlePan(0, 30)
+  }, /*#__PURE__*/React.createElement(PiArrowUpBold, {
+    className: "text-lg text-white"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2",
+    onClick: () => handlePan(30, 0)
+  }, /*#__PURE__*/React.createElement(PiArrowLeftBold, {
+    className: "text-lg text-white"
+  })), /*#__PURE__*/React.createElement("button", {
+    className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2 ml-1 mr-1",
+    onClick: () => centerView(),
+    title: "Center"
+  }, /*#__PURE__*/React.createElement(PiArrowsIn, {
+    className: "text-lg text-white"
+  })), /*#__PURE__*/React.createElement("button", {
+    className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2",
+    onClick: () => handlePan(-30, 0)
+  }, /*#__PURE__*/React.createElement(PiArrowRightBold, {
+    className: "text-lg text-white"
+  }))), /*#__PURE__*/React.createElement("button", {
+    className: "bg-blue-400 hover:bg-blue-500 rounded-full p-2 mt-1",
+    onClick: () => handlePan(0, -30)
+  }, /*#__PURE__*/React.createElement(PiArrowDownBold, {
+    className: "text-lg text-white"
+  }))));
+};
+const MyImageZoom = ({
+  image,
+  children = null,
+  onZoomChange = null
+}) => {
+  const wrapperRef = useRef(null); // Ref oluştur
+  const [openArrow, setOpenArrow] = useState(false);
+  const handlerTransform = e => {
+    setOpenArrow(e.state.scale != 1);
+    if (onZoomChange != null) {
+      onZoomChange(e.state);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "zoom-container flex justify-center items-center"
+  }, /*#__PURE__*/React.createElement(TransformWrapper, {
+    ref: wrapperRef,
+    className: "w-full flex items-center justify-center",
+    onTransformed: handlerTransform
+  }, /*#__PURE__*/React.createElement(Controls, {
+    wrapperRef: wrapperRef,
+    openArrow: openArrow
+  }), /*#__PURE__*/React.createElement(TransformComponent, {
+    className: "w-full flex items-center justify-center"
+  }, children || /*#__PURE__*/React.createElement("img", {
+    src: image,
+    alt: "Zoomable",
+    className: "max-w-full object-cover rounded-md "
+  }))));
+};
+export default MyImageZoom;

package/dist/index.js

@@ -0,0 +1,15 @@
+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';

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "px-react-ui-components",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "babel src --out-dir dist --copy-files"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "ui-components",
+    "library",
+    "design system",
+    "styled-components",
+    "tailwindcss",
+    "input",
+    "select",
+    "datepicker",
+    "container",
+    "tabs"
+  ],
+  "author": "Piri AYKUT | piriaykut@gmail.com",
+  "license": "MIT",
+  "description": "React UI components library",
+  "devDependencies": {
+    "@babel/cli": "^7.27.0",
+    "@babel/core": "^7.26.10",
+    "@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-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"
+  }
+}

package/src/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/src/components/MyAlert/MyAlert.jsx

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1,90 @@
+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;