npm - fui-material - Versions diffs - 1.16.2 → 1.16.4 - Mend

fui-material 1.16.2 → 1.16.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (542) hide show

package/README.md CHANGED Viewed

@@ -1,13 +1,50 @@
-# FUI-KIT
-## Material UI Kit for gis.favr
-Dillinger is a React JS, TypeScript, JS, HTML5, CSS.
-## О наборе
-> Данный UI набор предназначен для разработки сервисов и приложений gis.favr
-> Он адаптирован под React приложения с использованием TS
-[FUI-KIT](https://allorion.github.io/fui-storybook/) - Просмотреть имеющиеся компоненты
-©Allori
+# React + TypeScript + Vite
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Currently, two official plugins are available:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Expanding the ESLint configuration
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+- Configure the top-level `parserOptions` property like this:
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/eslint.config.js ADDED Viewed

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,75 +1,38 @@
-{
-  "name": "fui-material",
-  "version": "1.16.2",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "private": false,
-  "dependencies": {
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
-    "axios": "^1.7.4",
-    "buffer": "^6.0.3",
-    "jszip": "^3.10.1",
-    "postcss-import": "^16.0.0",
-    "postcss-url": "^10.1.3",
-    "process": "^0.11.10",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "rollup-plugin-polyfill-node": "^0.12.0",
-    "typescript": "^4.9.3"
-  },
-  "scripts": {
-    "build": "rollup -c",
-    "build-publish": "rollup -c && npm publish",
-    "publish": "npm publish"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest",
-      "plugin:storybook/recommended",
-      "plugin:storybook/recommended"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-image": "^3.0.2",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@rollup/plugin-json": "^6.1.0",
-    "bootstrap": "^5.2.2",
-    "rollup": "^2.60.0",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-dts": "^4.0.1",
-    "rollup-plugin-image": "^1.0.2",
-    "rollup-plugin-node-polyfills": "^0.2.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0"
-  },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "files": [
-    "dist"
-  ],
-  "types": "dist/index.d.ts"
-}
+{
+  "name": "fui-material",
+  "version": "1.16.4",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "private": false,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.app.json",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.4",
+    "jszip": "^3.10.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@rollup/plugin-image": "^3.0.3",
+    "@types/node": "^22.4.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1"
+  }
+}

package/src/dop-function/generateUniqueId.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export function generateUniqueId(): string {
+    const timestamp: number = new Date().getTime();
+    const randomPart: number = Math.floor(Math.random() * 1000000);
+    return `${timestamp}-${randomPart}`;
+}

package/src/function-elements/Notification/fNotification/fNotification.css ADDED Viewed

@@ -0,0 +1,166 @@
+#block-notification {
+    z-index: 999999;
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    margin: 16px;
+    gap: 16px;
+    position: fixed;
+    top: 0;
+    right: 0;
+}
+.f-function-block-notification {
+    opacity: 0;
+}
+.f-function-notification {
+    z-index: 9999999999;
+    display: flex;
+    flex-direction: row;
+    width: fit-content;
+    min-height: 75px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
+    position: relative;
+    max-width: 500px;
+}
+.f-function-notification-ico {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 45px;
+    border-bottom-left-radius: 10px;
+    border-top-left-radius: 10px;
+}
+.f-function-notification-ico.info-notification {
+    color: #2164BE !important;
+    background-color: rgba(149, 191, 255, 0.4) !important;
+    fill: #2164BE !important;
+}
+.f-function-notification-ico.error-notification {
+    color: #D10000 !important;
+    background-color: rgba(209, 0, 0, 0.4) !important;
+    fill: #D10000 !important;
+}
+.f-function-notification-ico.success-notification {
+    color: #0f7a11 !important;
+    background-color: rgba(72, 159, 73, 0.4) !important;
+    fill: #0f7a11 !important;
+}
+.f-function-notification-ico.warning-notification {
+    color: #ffc107 !important;
+    background-color: rgba(255, 193, 7, 0.4) !important;
+    fill: #ffc107 !important;
+}
+.f-function-notification-inside {
+    display: flex;
+    flex-direction: column;
+    margin: 16px;
+    gap: 9px;
+}
+.f-function-notification-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.f-function-notification-header h4 {
+    font-family: "SF UI Display", sans-serif;
+    color: #000;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.2;
+    margin-bottom: 0;
+}
+.f-function-notification-body {
+    display: flex;
+    flex-direction: column;
+}
+.f-function-notification-body span {
+    font-size: 14px;
+    font-weight: bold;
+    color: #656565;
+    white-space: normal;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    word-wrap: anywhere;
+}
+.f-function-notification-hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s 1s, opacity 1s linear;
+}
+.f-function-notification-visible {
+    visibility: visible;
+    opacity: 1;
+    transition: visibility 0s 1s, opacity 1s linear;
+}
+.close-not {
+    cursor: pointer;
+}
+.f-notification-progress {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: calc(100% - 40px);
+}
+.f-notification-progress-bar {
+    position: relative;
+    border: 0;
+    height: 6px;
+    background-color: #e9ecef !important;
+    border-bottom-left-radius: 10px;
+    border-top-left-radius: 10px;
+    width: 100%;
+}
+.f-notification-progress-value {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    border-bottom-left-radius: 10px;
+    border-top-left-radius: 10px;
+    transform: rotate(180deg) scaleX(1);
+    height: 6px;
+    width: 100%;
+}
+.f-notification-progress-value.info {
+    background-color: rgba(149, 191, 255, 0.4) !important;
+}
+.f-notification-progress-value.error {
+    background-color: rgba(209, 0, 0, 0.4) !important;
+}
+.f-notification-progress-value.success {
+    background-color: rgba(72, 159, 73, 0.4) !important;
+}
+.f-notification-progress-value.warning {
+    background-color: rgba(255, 193, 7, 0.4) !important;
+}
+@keyframes notification-progress-animated {
+    from {
+        width: 100%;
+    }
+    to {
+        width: 0;
+    }
+}

package/src/function-elements/Notification/fNotification/fNotification.ts ADDED Viewed

@@ -0,0 +1,138 @@
+import './fNotification.css'
+import { generateUniqueId } from "@dop-function/generateUniqueId";
+export interface IfNotification {
+    title?: string;
+    body: string;
+    variant: 'info' | 'error' | 'success' | 'warning';
+    timeSecClose?: number;
+    buttonClose?: boolean;
+    id?: string
+}
+const fNotification = (
+    {
+        title,
+        body,
+        variant = 'info',
+        timeSecClose,
+        buttonClose = false,
+        id,
+    }: IfNotification
+): Promise<string> => {
+    return new Promise((resolve) => {
+        let ico = ''
+        switch (variant) {
+            case 'info':
+                ico = '<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>'
+                break
+            case "success":
+                ico = '<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z"/>'
+                break
+            case 'error':
+                ico = '<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>'
+                break
+            case 'warning':
+                ico = '<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>'
+                break
+        }
+        const arrBody: string[] = []
+        body.split('\n').map(opt => {
+            arrBody.push(
+                `<span>${opt}</span>`
+            )
+        })
+        const randId = generateUniqueId()
+        const idFuncBlockNot = 'f-function-block-notification-' + randId
+        const not = `
+            <div class='f-function-block-notification' id="${id === undefined ? idFuncBlockNot : id}">
+                <div class='f-function-notification'>
+                    <div class='f-function-notification-ico ${variant}-notification'>
+                        <svg width="28" height="28" viewBox="0 0 16 16">
+                            ${ico}
+                        </svg>
+                    </div>
+                    <div class='f-function-notification-inside'>
+                        <div class='f-function-notification-header'>
+                            <h4>${title !== undefined ? title : ''}</h4>
+                            ${buttonClose ? `<svg
+                                                    width="25"
+                                                    class="bi bi-x-lg primary close-not"
+                                                    viewBox="0 0 16 16"
+                                                >
+                                                    <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
+                                                </svg>` : ''}
+                        </div>
+                        <div class='f-function-notification-body'>
+                             ${arrBody.join('')}
+                        </div>
+                    </div>
+                   ${timeSecClose ? `<div class="f-notification-progress">
+                       <div class="f-notification-progress-bar">
+                            <div class="f-notification-progress-value ${variant}" id="f-notification-progress-value-${randId}" style="animation: notification-progress-animated ${timeSecClose}s linear;"/>
+                       </div>
+                   </div>` : ''}
+                </div>
+            </div>
+        `
+        let blockNotification: HTMLDivElement | null = document.querySelector(`#block-notification`)
+        if (blockNotification === null) {
+            blockNotification = document.createElement('div');
+            blockNotification.id = 'block-notification'
+            blockNotification.insertAdjacentHTML('afterbegin', not);
+            document.body.appendChild(blockNotification);
+        } else {
+            blockNotification.insertAdjacentHTML("afterbegin", not);
+        }
+        if (buttonClose) {
+            const el = window.document.querySelector(`#${idFuncBlockNot}`);
+            if (el !== null) {
+                const svgElement = el.querySelector('.close-not');
+                if (svgElement !== null) {
+                    svgElement.addEventListener('click', () => {
+                        el.classList.remove('f-function-notification-visible');
+                        el.classList.add('f-function-notification-hidden');
+                        setTimeout(() => {
+                            if (el.parentNode) {
+                                el.parentNode.removeChild(el);
+                            }
+                        }, 1000); // Remove the element after 1 second
+                    });
+                }
+            }
+        }
+        setTimeout(() => {
+            const el = window.document.querySelector(`#${idFuncBlockNot}`);
+            if (el !== null && el !== undefined) {
+                el.className += " " + 'f-function-notification-visible';
+            }
+        });
+        if (timeSecClose !== undefined) {
+            const el = window.document.querySelector(`#${idFuncBlockNot}`);
+            if (el !== null) {
+                setTimeout(() => {
+                    el.className = 'f-function-notification-hidden';
+                }, (timeSecClose - 1) * 1000);
+                setTimeout(() => {
+                    if (el.parentNode) {
+                        el.parentNode.removeChild(el);
+                    }
+                }, timeSecClose * 1000);
+            }
+        }
+        resolve(`#${idFuncBlockNot}`)
+    })
+}
+export default fNotification

package/src/function-elements/Notification/fNotification/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default } from "./fNotification"

package/src/function-elements/Notification/fNotificationDelete/fNotificationDelete.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import "../fNotification/fNotification.css"
+const fNotificationDelete = (id: string): void => {
+    const el = window.document.querySelector(id);
+    if (el !== null) {
+        el.className = 'f-function-notification-hidden';
+        setTimeout(() => {
+            el.classList.remove('f-function-notification-visible');
+        }, 1000);
+        setTimeout(() => {
+            if (el.parentNode) {
+                el.parentNode.removeChild(el);
+            }
+        }, 2000);
+    }
+}
+export default fNotificationDelete

package/src/function-elements/Notification/fNotificationDelete/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default } from "./fNotificationDelete"

package/src/function-elements/fAlert/fAlert.css ADDED Viewed

@@ -0,0 +1,101 @@
+.f-function-block-alert {
+    z-index: 9999999999;
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(47, 128, 237, 0.35);
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: all;
+    transition: 1s;
+}
+.f-function-alert {
+    display: flex;
+    flex-direction: row;
+    width: 625px;
+    min-height: 75px;
+    background-color: white;
+    border-radius: 10px;
+}
+.f-function-alert-ico {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    border-bottom-left-radius: 10px;
+    border-top-left-radius: 10px;
+}
+.f-function-alert-ico.info-alert {
+    color: #2164BE !important;
+    background-color: rgba(149, 191, 255, 0.4) !important;
+    fill: #2164BE !important;
+}
+.f-function-alert-ico.error-alert {
+    color: #D10000 !important;
+    background-color: rgba(209, 0, 0, 0.4) !important;
+    fill: #D10000 !important;
+}
+.f-function-alert-ico.success-alert {
+    color: #0f7a11 !important;
+    background-color: rgba(72, 159, 73, 0.4) !important;
+    fill: #0f7a11 !important;
+}
+.f-function-alert-ico.warning-alert {
+    color: #ffc107 !important;
+    background-color: rgba(255, 193, 7, 0.4) !important;
+    fill: #ffc107 !important;
+}
+.f-function-alert-inside {
+    display: flex;
+    flex-direction: column;
+    margin: 16px;
+    gap: 16px;
+    width: 553px;
+}
+.f-function-alert-header {
+    display: flex;
+    align-items: center;
+}
+.f-function-alert-header h4 {
+    font-family: "SF UI Display", sans-serif;
+    color: #000;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.2;
+}
+.f-function-alert-body {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: 8px;
+}
+.f-function-alert-body span {
+    font-size: 12px;
+    font-weight: bold;
+    color: #656565;
+    white-space: normal;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    word-wrap: anywhere;
+}
+.f-function-alert-footer {
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+}