siam-ui-utils 2.0.24 → 2.0.26

package/src/index.css

@@ -0,0 +1,74 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 0.2;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 1.2em;
+  line-height: 1.1;
+}
+
+h2 {
+  font-size: 1.2em;
+  line-height: 1.1;
+}
+
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/index.js

@@ -1,7 +1,7 @@
-export * from './archivos-adjuntos'
-export * from './archivos-adjuntos/dropzone-uploader-dni-digital'
-export * from './bridges'
-export * from './CustomBootstrap'
-export * from './CustomSelectInput'
-export * from './IntlMessages'
-export * from './tomar-foto'
+export * from './archivos-adjuntos';
+export * from './archivos-adjuntos/dropzone-uploader-dni-digital';
+export * from './bridges';
+export * from './CustomBootstrap';
+export * from './CustomSelectInput';
+export * from './tomar-foto';
+export * from './react-notifications';

package/src/main.jsx

@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import './assets/css/vendor/bootstrap.min.css';
+import './assets/css/vendor/bootstrap.rtl.only.min.css';
+
+import App from './App';
+
+createRoot(document.getElementById('root')).render(<App />);

package/src/react-notifications/Notification.jsx

@@ -0,0 +1,89 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const Notification = ({
+  title,
+  type,
+  message,
+  customClassName,
+  timeOut,
+  onClick,
+  onRequestHide,
+}) => {
+  const requestHide = () => {
+    if (onRequestHide) {
+      onRequestHide();
+    }
+  };
+
+  useEffect(() => {
+    let timer = null;
+    if (timeOut !== 0) {
+      timer = setTimeout(requestHide, timeOut);
+    }
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+    requestHide();
+  };
+
+  const className = classnames([
+    'notification',
+    `notification-${type}`,
+    customClassName,
+  ]);
+  const titleHtml = title ? <h4 className="title">{title}</h4> : null;
+  return (
+    <div className={className} onClick={() => handleClick()}>
+      <div className="notification-message" role="alert">
+        {titleHtml}
+        <div className="message">{message}</div>
+      </div>
+    </div>
+  );
+};
+
+Notification.propTypes = {
+  type: PropTypes.oneOf([
+    'info',
+    'success',
+    'warning',
+    'error',
+    'primary',
+    'secondary',
+  ]),
+  title: PropTypes.node,
+  message: PropTypes.node,
+  timeOut: PropTypes.number,
+  onClick: PropTypes.func,
+  onRequestHide: PropTypes.func,
+  customClassName: PropTypes.string,
+};
+
+Notification.defaultProps = {
+  type: 'info',
+  title: null,
+  message: null,
+  timeOut: 5000,
+
+  onClick: () => {
+    undefined;
+  },
+  onRequestHide: () => {
+    undefined;
+  },
+
+  customClassName: '',
+};
+
+export default Notification;

package/src/react-notifications/NotificationContainer.jsx

@@ -0,0 +1,53 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import NotificationManager from './NotificationManager';
+import Notifications from './Notifications';
+
+class NotificationContainer extends Component {
+  constructor(props) {
+    super(props);
+    NotificationManager.addChangeListener(this.handleStoreChange);
+    this.state = {
+      notifications: [],
+    };
+  }
+
+  componentWillUnmount = () => {
+    NotificationManager.removeChangeListener(this.handleStoreChange);
+  };
+
+  handleStoreChange = (notifications) => {
+    this.setState({
+      notifications,
+    });
+  };
+
+  handleRequestHide = (notification) => {
+    NotificationManager.remove(notification);
+  };
+
+  render() {
+    const { notifications } = this.state;
+    const { enterTimeout, leaveTimeout } = this.props;
+    return (
+      <Notifications
+        enterTimeout={enterTimeout}
+        leaveTimeout={leaveTimeout}
+        notifications={notifications}
+        onRequestHide={this.handleRequestHide}
+      />
+    );
+  }
+}
+
+NotificationContainer.propTypes = {
+  enterTimeout: PropTypes.number,
+  leaveTimeout: PropTypes.number,
+};
+
+NotificationContainer.defaultProps = {
+  enterTimeout: 400,
+  leaveTimeout: 400,
+};
+
+export default NotificationContainer;

package/src/react-notifications/NotificationManager.js

@@ -0,0 +1,135 @@
+import { EventEmitter } from "events";
+
+const createUUID = () => {
+  const pattern = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
+  return pattern.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
+const Constants = {
+  CHANGE: "change",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  INFO: "info",
+  SUCCESS: "success",
+  WARNING: "warning",
+  ERROR: "error",
+};
+
+class NotificationManager extends EventEmitter {
+  constructor() {
+    super();
+    this.listNotify = [];
+  }
+
+  create(notify) {
+    const defaultNotify = {
+      id: createUUID(),
+      type: "info",
+      title: null,
+      message: null,
+      timeOut: 3000,
+      customClassName: "",
+    };
+    if (notify.priority) {
+      this.listNotify.unshift(Object.assign(defaultNotify, notify));
+    } else {
+      this.listNotify.push(Object.assign(defaultNotify, notify));
+    }
+    this.emitChange();
+  }
+
+  primary(message, title, timeOut, onClick, priority, customClassName) {
+    this.create({
+      type: Constants.PRIMARY,
+      message,
+      title,
+      timeOut,
+      onClick,
+      priority,
+      customClassName,
+    });
+  }
+
+  secondary(message, title, timeOut, onClick, priority, customClassName) {
+    this.create({
+      type: Constants.SECONDARY,
+      message,
+      title,
+      timeOut,
+      onClick,
+      priority,
+      customClassName,
+    });
+  }
+
+  info(message, title, timeOut, onClick, priority, customClassName) {
+    this.create({
+      type: Constants.INFO,
+      message,
+      title,
+      timeOut,
+      onClick,
+      priority,
+      customClassName,
+    });
+  }
+
+  success(message, title, timeOut, onClick, priority, customClassName) {
+    this.create({
+      type: Constants.SUCCESS,
+      message,
+      title,
+      timeOut,
+      onClick,
+      priority,
+      customClassName,
+    });
+  }
+
+  warning(message, title, timeOut, onClick, priority, customClassName) {
+    this.create({
+      type: Constants.WARNING,
+      message,
+      title,
+      timeOut,
+      onClick,
+      priority,
+      customClassName,
+    });
+  }
+
+  error(message, title, timeOut, onClick, priority, customClassName) {
+    this.create({
+      type: Constants.ERROR,
+      message,
+      title,
+      timeOut,
+      onClick,
+      priority,
+      customClassName,
+    });
+  }
+
+  remove(notification) {
+    this.listNotify = this.listNotify.filter((n) => notification.id !== n.id);
+    this.emitChange();
+  }
+
+  emitChange() {
+    this.emit(Constants.CHANGE, this.listNotify);
+  }
+
+  addChangeListener(callback) {
+    this.addListener(Constants.CHANGE, callback);
+  }
+
+  removeChangeListener(callback) {
+    this.removeListener(Constants.CHANGE, callback);
+  }
+}
+
+export default new NotificationManager();

package/src/react-notifications/Notifications.jsx

@@ -0,0 +1,66 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import classnames from 'classnames';
+import Notification from './Notification';
+
+class Notifications extends Component {
+  handleRequestHide = (notification) => () => {
+    const { onRequestHide } = this.props;
+    if (onRequestHide) {
+      onRequestHide(notification);
+    }
+  };
+
+  render() {
+    const { notifications, enterTimeout, leaveTimeout } = this.props;
+    const className = classnames('notification-container', {
+      'notification-container-empty': notifications.length === 0,
+    });
+    return (
+      <div className={className}>
+        <TransitionGroup>
+          {notifications.map((notification) => {
+            const key = notification.id || new Date().getTime();
+            return (
+              <CSSTransition
+                classNames="notification"
+                key={key}
+                timeout={{ exit: leaveTimeout, enter: enterTimeout }}
+              >
+                <Notification
+                  key={key}
+                  type={notification.type}
+                  title={notification.title}
+                  message={notification.message}
+                  timeOut={notification.timeOut}
+                  onClick={notification.onClick}
+                  onRequestHide={this.handleRequestHide(notification)}
+                  customClassName={notification.customClassName}
+                />
+              </CSSTransition>
+            );
+          })}
+        </TransitionGroup>
+      </div>
+    );
+  }
+}
+Notifications.propTypes = {
+  notifications: PropTypes.array,
+  onRequestHide: PropTypes.func,
+  enterTimeout: PropTypes.number,
+  leaveTimeout: PropTypes.number,
+};
+
+Notifications.defaultProps = {
+  notifications: [],
+
+  onRequestHide: () => {
+    undefined;
+  },
+
+  enterTimeout: 400,
+  leaveTimeout: 400,
+};
+export default Notifications;

package/src/react-notifications/index.js

@@ -0,0 +1,5 @@
+import Notifications from './Notifications';
+import NotificationContainer from './NotificationContainer';
+import NotificationManager from './NotificationManager';
+
+export { Notifications, NotificationContainer, NotificationManager };

package/vite.config.ts

@@ -1,10 +1,14 @@
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vitest/config";
-import eslint from 'vite-plugin-eslint';
+import commonjs from 'vite-plugin-commonjs'
 
 export default defineConfig({
-  plugins: [react(), eslint()],
-  test: {
-    globals: true,
-  },
+    plugins: [react(), commonjs()],
+    css: {
+        preprocessorOptions: {
+            scss: {
+                silenceDeprecations: ['legacy-js-api'],
+            },
+        },
+    },
 });

package/.eslintrc.json

@@ -1,25 +0,0 @@
-{
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:react-hooks/recommended"
-    ],
-    "plugins": [
-        "react",
-        "react-hooks"
-    ],
-    "parserOptions": {
-        "ecmaVersion": 2020,
-        "sourceType": "module",
-        "ecmaFeatures": {
-            "jsx": true
-        }
-    },
-    "env": {
-        "browser": true,
-        "es2020": true
-    },
-    "rules": {
-        "react/react-in-jsx-scope": "off"
-    }
-}

package/src/IntlMessages.tsx

@@ -1,11 +0,0 @@
-
-import {
-  FormattedMessage,
-  injectIntl
-} from 'react-intl';
-
-const _InjectMassage = (props: any) => <FormattedMessage {...props} />;
-
-export const IntlMessages = injectIntl(_InjectMassage, {
-  withRef: false,
-} as any);