fui-material 0.2.59 → 0.2.60

package/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -1 +1,15 @@
-https://allorion.github.io/fui
+# fui
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.0.1. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

package/package.json

@@ -1,93 +1,40 @@
 {
   "name": "fui-material",
-  "version": "0.2.59",
+  "version": "0.2.60",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "private": false,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
-    "eslint": "^8.50.0",
-    "eslint-plugin-react": "^7.33.2",
-    "node-fetch": "^2.7.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "rollup-plugin-image": "^1.0.2",
-    "typescript": "^4.9.3",
-    "web-vitals": "^2.1.4",
-    "util": "^0.12.5"
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.5",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.2",
+    "bootstrap": "^5.2.2",
+    "bun-types": "^1.0.5-canary.20231006T140143",
+    "gh-pages": "^6.0.0",
+    "rollup": "^4.0.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
   },
   "scripts": {
-    "test": "jest",
-    "rollup": "rollup -c",
-    "build-publish": "rollup -c && npm publish",
-    "storybook": "storybook dev -p 6006",
-    "deploy-storybook": "storybook build && gh-pages -d storybook-static",
-    "build-storybook": "storybook build"
+    "build": "rollup -c --bundleConfigAsCjs",
+    "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"
+      "react-app"
     ]
   },
-  "devDependencies": {
-    "@babel/core": "^7.20.2",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-image": "^3.0.2",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-typescript": "^8.3.3",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
-    "@storybook/addon-mdx-gfm": "^7.4.6",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.4.6",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-webpack5": "^7.4.6",
-    "@storybook/testing-library": "^0.2.2",
-    "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.3",
-    "babel-loader": "^8.3.0",
-    "bootstrap": "^5.2.2",
-    "eslint-plugin-storybook": "^0.6.14",
-    "gh-pages": "^4.0.0",
-    "jest": "^27.5.1",
-    "rollup": "^2.60.0",
-    "rollup-plugin-dts": "^4.0.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "storybook": "^7.4.6"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0"
-  },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "files": [
-    "dist"
-  ],
-  "types": "dist/index.d.ts"
+  "dependencies": {
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
 }

package/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/rollup.config.js

@@ -0,0 +1,33 @@
+
+import image from '@rollup/plugin-image';
+import json from '@rollup/plugin-json';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import postcss from 'rollup-plugin-postcss';
+import typescript from "rollup-plugin-typescript2";
+
+export default {
+    input: 'src/index.ts',
+    output: [
+        {
+            file: 'dist/bundle.js',
+            format: 'cjs',
+        },
+        {
+            file: 'dist/bundle.esm.js',
+            format: 'esm',
+        },
+    ],
+    plugins: [
+        resolve(),
+        commonjs(),
+        typescript(),
+        image(),
+        json(),
+        postcss({
+            extract: true,
+            extensions: ['.css'],
+        }),
+    ],
+    external: ['react', 'react-dom'],
+};

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

@@ -0,0 +1,99 @@
+.f-function-block-alert {
+    z-index: 9999999999;
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(0,0,0,0.4);
+    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;
+    align-items: center;
+}
+
+.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;
+}

package/src/function-elements/fAlert/fAlert.ts

@@ -0,0 +1,66 @@
+import './fAlert.css'
+
+export interface IfAlert {
+    title?: string,
+    body: string,
+    variant: 'info' | 'error' | 'success' | 'warning'
+}
+
+const fAlert = (
+    {
+        title,
+        body,
+        variant = 'info'
+    }: IfAlert
+) => {
+
+    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
+    }
+
+    window.document.body.insertAdjacentHTML(
+        'afterbegin',
+        `
+            <div class='f-function-block-alert' id='f-function-block-alert'>
+                <div class='f-function-alert'>
+                    <div class='f-function-alert-ico ${variant}-alert'>
+                        <svg width="28" height="28" viewBox="0 0 16 16">
+                            ${ico}
+                        </svg>
+                    </div>
+                    <div class='f-function-alert-inside'>
+                        <div class='f-function-alert-header'>
+                            <h4>${title !== undefined ? title : ''}</h4>
+                        </div>
+                        <div class='f-function-alert-body'>
+                            <span>${body}</span>
+                        </div>
+                        <div class='f-function-alert-footer'>
+                            <button
+                                class='btn btn-primary btn-sm'
+                                onclick='document.querySelector("#f-function-block-alert").remove()'
+                            >
+                                Закрыть
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `
+    );
+}
+
+export default fAlert

package/src/function-elements/fAlert/index.tsx

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

package/src/function-elements/fConfirm/fConfirm.css

@@ -0,0 +1,80 @@
+.f-function-block-confirm {
+    z-index: 9999999999;
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(0, 0, 0, 0.4);
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: all;
+    transition: 1s;
+}
+
+.f-function-confirm {
+    display: flex;
+    flex-direction: row;
+    width: 625px;
+    min-height: 75px;
+    background-color: white;
+    border-radius: 10px;
+}
+
+.f-function-confirm-ico {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    border-bottom-left-radius: 10px;
+    border-top-left-radius: 10px;
+}
+
+.f-function-confirm-ico.warning {
+    color: #ffc107 !important;
+    background-color: rgba(255, 193, 7, 0.4) !important;
+    fill: #ffc107 !important;
+}
+
+.f-function-confirm-inside {
+    display: flex;
+    flex-direction: column;
+    margin: 16px;
+    gap: 16px;
+    width: 553px;
+}
+
+.f-function-confirm-header {
+    display: flex;
+    align-items: center;
+}
+
+.f-function-confirm-header h4 {
+    font-family: "SF UI Display", sans-serif;
+    color: #000;
+    font-size: 15px;
+}
+
+.f-function-confirm-body {
+    display: flex;
+    align-items: center;
+}
+
+.f-function-confirm-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-confirm-footer {
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    gap: 8px;
+}

package/src/function-elements/fConfirm/fConfirm.ts

@@ -0,0 +1,66 @@
+import './fConfirm.css'
+
+export interface IfConfirm {
+    title?: string,
+    body: string,
+}
+
+const fConfirm = ({title, body}: IfConfirm): Promise<boolean> => {
+    return new Promise((resolve) => {
+        window.document.body.insertAdjacentHTML(
+            'afterbegin',
+            `
+            <div class='f-function-block-confirm' id='f-function-block-confirm'>
+                <div class='f-function-confirm'>
+                    <div class='f-function-confirm-ico warning'>
+                        <svg width="28" height="28" viewBox="0 0 16 16">
+                            <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="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
+                        </svg>
+                    </div>
+                    <div class='f-function-confirm-inside'>
+                        <div class='f-function-confirm-header'>
+                            <h4>${title !== undefined ? title : ''}</h4>
+                        </div>
+                        <div class='f-function-confirm-body'>
+                            <span>${body}</span>
+                        </div>
+                        <div class='f-function-confirm-footer'>
+                            <button
+                                id="f-function-confirm-ok"
+                                class='btn btn-success btn-sm'
+                                onclick='document.querySelector("#f-function-block-confirm").remove()'
+                            >
+                                Ок
+                            </button>
+                            <button
+                                id="f-function-confirm-cancellation"
+                                class='btn btn-danger btn-sm'
+                                onclick='document.querySelector("#f-function-block-confirm").remove()'
+                            >
+                                Отменить
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `
+        );
+
+        let ok = document.querySelector('#f-function-confirm-ok')
+        let cancellation = document.querySelector('#f-function-confirm-cancellation')
+
+
+        ok!.addEventListener('click', function () {
+            resolve(true);
+        })
+        cancellation!.addEventListener('click', function () {
+            resolve(false);
+        })
+
+    });
+};
+
+export default fConfirm;

package/src/function-elements/fConfirm/index.tsx

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