fui-material 0.2.58 → 0.2.60

package/src/material/FAlert/FAlert.css

@@ -0,0 +1,153 @@
+.f-block-alert {
+    z-index: 999;
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+}
+
+.f-alert-component {
+    margin: 16px;
+    position: absolute;
+}
+
+.f-alert {
+    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;
+}
+
+.f-alert-ico {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    border-bottom-left-radius: 10px;
+    border-top-left-radius: 10px;
+}
+
+.f-alert-ico.info {
+    color: #2164BE !important;
+    background-color: rgba(149, 191, 255, 0.4) !important;
+    fill: #2164BE !important;
+}
+
+.f-alert-ico.error {
+    color: #D10000 !important;
+    background-color: rgba(209, 0, 0, 0.4) !important;
+    fill: #D10000 !important;
+}
+
+.f-alert-ico.success {
+    color: #0f7a11 !important;
+    background-color: rgba(72, 159, 73, 0.4) !important;
+    fill: #0f7a11 !important;
+}
+
+.f-alert-ico.warning {
+    color: #ffc107 !important;
+    background-color: rgba(255, 193, 7, 0.4) !important;
+    fill: #ffc107 !important;
+}
+
+.f-alert-inside {
+    display: flex;
+    flex-direction: column;
+    margin: 16px;
+    gap: 16px;
+}
+
+.f-alert-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.f-alert-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-alert-body {
+    display: flex;
+    align-items: center;
+}
+
+.f-alert-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-alert-hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s 1s, opacity 1s linear;
+}
+
+.f-alert-visible {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 1s linear;
+}
+
+.f-alert-progress {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: calc(100% - 40px);
+}
+
+.f-alert-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-alert-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-alert-progress-value.info {
+    background-color: rgba(149, 191, 255, 0.4) !important;
+}
+
+.f-alert-progress-value.error {
+    background-color: rgba(209, 0, 0, 0.4) !important;
+}
+
+.f-alert-progress-value.success {
+    background-color: rgba(72, 159, 73, 0.4) !important;
+}
+
+.f-alert-progress-value.warning {
+    background-color: rgba(255, 193, 7, 0.4) !important;
+}

package/src/material/FAlert/FAlert.tsx

@@ -0,0 +1,226 @@
+import React, {FC, useEffect, useRef} from "react";
+import {FCloseIcon} from "../../icons";
+import './FAlert.css'
+
+export interface IFAlert {
+    title?: string,
+    body?: string,
+    variant: 'info' | 'error' | 'success' | 'warning',
+    onClose?: (e: boolean) => void,
+    st?: React.CSSProperties | undefined,
+    open: boolean,
+    vertical?: 'top' | 'bottom' | 'center',
+    horizontal?: 'left' | 'center' | 'right',
+    buttonClose?: boolean,
+    className?: string,
+    displayTime?: number,
+    size?: string
+}
+
+const FAlert: FC<IFAlert> = (
+    {
+        title,
+        body,
+        variant = 'info',
+        displayTime,
+        open,
+        onClose,
+        vertical = 'center',
+        horizontal = 'center',
+        buttonClose = false,
+        size
+    }
+) => {
+
+    const visible = useRef<number>();
+    const hidden = useRef<number>();
+    const close = useRef<number>();
+
+    const randomId = useRef<string>((Math.random() + 1).toString(36).substring(2))
+
+    let newTime = displayTime
+
+    useEffect(() => {
+
+        const progress = document.getElementById(`f-alert-progress-value-${randomId.current}`)
+
+        visible.current = setTimeout(() => {
+            if (open) {
+                const el = document.querySelector(`#f-block-alert-${randomId.current}`)
+                el!.classList.add('f-alert-visible')
+                if (progress !== null) {
+                    progress!.style.width = '0'
+                }
+            }
+        })
+
+        if (newTime !== undefined && open && onClose !== undefined) {
+
+            if (newTime < 1) newTime = 1
+
+            const el = document.querySelector(`#f-block-alert-${randomId.current}`)
+
+            progress!.style.transition = `${newTime}s linear`
+
+            hidden.current = setTimeout(() => {
+                el!.classList.remove('f-alert-visible')
+                el!.classList.add('f-alert-hidden')
+            }, (newTime - 1) * 1000)
+            close.current = setTimeout(() => {
+                onClose(false)
+                el!.classList.remove('f-alert-hidden')
+                el!.classList.remove('f-alert-visible')
+            }, newTime * 1000)
+        }
+    }, [open]);
+
+    const handlerIco = (): JSX.Element => {
+        let ico: JSX.Element = <>
+            <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"/>
+        </>
+
+        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="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"/>
+                </>
+                break
+        }
+        return ico
+    }
+
+    const handlerPosition = () => {
+
+        const styleVertical: {
+            top?: string | number,
+            bottom?: string | number,
+            transform?: string
+        } = {}
+
+        const styleHorizontal: {
+            left?: string | number,
+            right?: string | number,
+            transform?: string
+        } = {}
+
+        switch (vertical) {
+            case 'top':
+                styleVertical.top = 0
+                break
+            case 'bottom':
+                styleVertical.bottom = 0
+                break
+            case 'center':
+                if (vertical === 'center' && horizontal !== 'center') {
+                    styleVertical.transform = 'translateY(-50%)'
+                }
+                styleVertical.top = '50%'
+                break
+        }
+
+        switch (horizontal) {
+            case 'left':
+                styleHorizontal.left = 0
+                break
+            case 'right':
+                styleHorizontal.right = 0
+                break
+            case 'center':
+                if (vertical === 'center' && horizontal === 'center') {
+                    styleHorizontal.transform = 'translate(-50%, -50%)'
+                } else {
+                    styleHorizontal.transform = 'translateX(-50%)'
+                }
+                styleHorizontal.left = '50%'
+                break
+        }
+
+
+        return Object.assign({}, styleHorizontal, styleVertical)
+    }
+
+    return (
+        <React.Fragment>
+            {open &&
+                <div className='f-block-alert' id={`f-block-alert-${randomId.current}`}>
+                    <div className="f-alert-component" style={handlerPosition()}>
+                        <div className='f-alert'>
+                            <div className={`f-alert-ico ${variant}`}>
+                                <svg width="28" height="28" viewBox="0 0 16 16">
+                                    {handlerIco()}
+                                </svg>
+                            </div>
+                            <div className='f-alert-inside'
+                                 style={{width: size !== undefined ? `${size}` : "fit-content"}}>
+                                <div className='f-alert-header'>
+                                    <h4>{title !== undefined ? title : ''}</h4>
+                                    {(buttonClose && onClose) &&
+                                        <FCloseIcon
+                                            size={25}
+                                            st={{
+                                                cursor: 'pointer'
+                                            }}
+                                            handleClose={() => {
+                                                const el = document.querySelector(`#f-block-alert-${randomId.current}`)
+                                                el!.classList.remove('f-alert-visible')
+                                                el!.classList.add('f-alert-hidden')
+                                                onClose(false)
+                                                el!.classList.remove('f-alert-visible')
+                                                el!.classList.remove('f-alert-hidden')
+                                                clearTimeout(visible.current)
+                                                clearTimeout(hidden.current)
+                                                clearTimeout(close.current)
+                                            }}/>
+                                    }
+                                </div>
+                                <div className='f-alert-body'>
+                                    <span>{body}</span>
+                                </div>
+                            </div>
+                            {newTime &&
+                                <div className={'f-alert-progress'}>
+                                    <div className="f-alert-progress-bar">
+                                        <div className={`f-alert-progress-value ${variant}`}
+                                             id={`f-alert-progress-value-${randomId.current}`}/>
+                                    </div>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                </div>
+            }
+        </React.Fragment>
+    )
+};
+
+export default FAlert;

package/src/material/FAlert/index.ts

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

package/src/material/FButton/FButton.css

@@ -0,0 +1,50 @@
+.btn {
+    height: min-content;
+}
+
+.btn-default-primary {
+    color: #2F80ED !important;
+    background-color: #fff !important;
+    border-color: #2F80ED !important;
+}
+.btn-default-secondary {
+    color: #6c757d !important;
+    background-color: #fff !important;
+    border-color: #6c757d !important;
+}
+.btn-default-success {
+    color: #2E7D32 !important;
+    background-color: #EFF5F0 !important;
+    border-color: #2E7D32 !important;
+}
+.btn-default-danger {
+    color: #dc3545 !important;
+    background-color: #fff !important;
+    border-color: #dc3545 !important;
+}
+.btn-default-warning {
+    color: #ffc107 !important;
+    background-color: #fff !important;
+    border-color: #ffc107 !important;
+}
+.btn-default-info {
+    color: #0dcaf0 !important;
+    background-color: #fff !important;
+    border-color: #0dcaf0 !important;
+}
+.btn-default-light {
+    color: #f8f9fa !important;
+    background-color: #fff !important;
+    border-color: #f8f9fa !important;
+}
+.btn-default-dark {
+    color: #212529 !important;
+    background-color: #fff !important;
+    border-color: #212529 !important;
+}
+.btn-default-link {
+    color: #0a58ca !important;
+    background-color: #fff !important;
+    border-color: #0a58ca !important;
+    text-decoration: underline !important;
+}

package/src/material/FButton/FButton.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import './FButton.css'
+import "../statick/Colors.css"
+
+export interface IFButton {
+    children?: React.ReactChild | React.ReactNode,
+    variant?: 'contained' | 'default'
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
+    size?: 'btn-lg' | 'btn-sm' | 'btn-xs'
+    disabled?: boolean
+    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
+    st?: React.CSSProperties,
+    className?: string
+    fullWidth?: boolean
+    id?: string,
+    type?: "button" | "submit" | "reset" | undefined
+}
+
+const FButton = (
+    {
+        children,
+        variant = 'contained',
+        color = 'primary',
+        size = 'btn-sm',
+        disabled,
+        onClick,
+        st,
+        className,
+        fullWidth,
+        id,
+        type = 'button'
+    }: IFButton
+) => {
+
+    if (fullWidth) {
+        if (st === undefined) {
+            st = {
+                width: '100%'
+            }
+        } else {
+            st.width = '100%'
+        }
+    } else {
+        if (st === undefined) {
+            st = {
+                width: "fit-content"
+            }
+        } else {
+            st.width = "fit-content"
+        }
+    }
+
+    return (
+        <React.Fragment>
+            <button
+                disabled={disabled}
+                type={type}
+                className={`btn ${variant === 'contained' ? 'btn' : 'btn-default'}-${color} ${size} ${className !== undefined ? className : ''}`}
+                onClick={onClick}
+                style={st}
+                id={id}
+            >
+                {children}
+            </button>
+        </React.Fragment>
+    )
+}
+
+export default FButton

package/src/material/FButton/index.ts

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

package/src/material/FButtonFile/FButtonFile.css

@@ -0,0 +1,180 @@
+.btn-default-primary {
+    color: #2F80ED !important;
+    background-color: #fff !important;
+    border-color: #2F80ED !important;
+}
+.btn-default-secondary {
+    color: #6c757d !important;
+    background-color: #fff !important;
+    border-color: #6c757d !important;
+}
+.btn-default-success {
+    color: #198754 !important;
+    background-color: #fff !important;
+    border-color: #198754 !important;
+}
+.btn-default-danger {
+    color: #dc3545 !important;
+    background-color: #fff !important;
+    border-color: #dc3545 !important;
+}
+.btn-default-warning {
+    color: #ffc107 !important;
+    background-color: #fff !important;
+    border-color: #ffc107 !important;
+}
+.btn-default-info {
+    color: #0dcaf0 !important;
+    background-color: #fff !important;
+    border-color: #0dcaf0 !important;
+}
+.btn-default-light {
+    color: #f8f9fa !important;
+    background-color: #fff !important;
+    border-color: #f8f9fa !important;
+}
+.btn-default-dark {
+    color: #212529 !important;
+    background-color: #fff !important;
+    border-color: #212529 !important;
+}
+.btn-default-link {
+    color: #0a58ca !important;
+    background-color: #fff !important;
+    border-color: #0a58ca !important;
+    text-decoration: underline !important;
+}
+
+.cl-btn-3 {
+    width: 10px;
+    height: 10px;
+    position: relative;
+    transform: rotate(45deg) scale(2);
+}
+
+.cl-btn-3 .top,
+.cl-btn-3 .bot {
+    display: block;
+    background: #337AB7;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    animation-iteration-count: 1;
+}
+
+.cl-btn-3 .top {
+    height: 100%;
+    width: 2px;
+    margin-left: -1px;
+    transform: skewY(45deg);
+    top: 0;
+}
+
+.cl-btn-3 .bot {
+    width: 100%;
+    height: 2px;
+    margin-top: -1px;
+    transform: skewX(-45deg);
+    left: 0;
+}
+
+.cl-btn-3:hover {
+    cursor: pointer;
+}
+
+.cl-btn-3:hover .top {
+    animation: top-out 0.25s forwards, top-in 0.25s forwards 0.25s;
+}
+
+.cl-btn-3:hover .bot {
+    animation: bot-out 0.25s forwards 0.1s, bot-in 0.25s forwards 0.35s;
+}
+
+@-webkit-keyframes top-out {
+    from {
+        top: 0%;
+        height: 100%;
+    }
+    to {
+        top: 100%;
+        height: 0%;
+    }
+}
+
+@keyframes top-out {
+    from {
+        top: 0%;
+        height: 100%;
+    }
+    to {
+        top: 100%;
+        height: 0%;
+    }
+}
+
+@-webkit-keyframes top-in {
+    from {
+        top: -100%;
+        height: 0%;
+    }
+    to {
+        top: 0%;
+        height: 100%;
+    }
+}
+
+@keyframes top-in {
+    from {
+        top: -100%;
+        height: 0%;
+    }
+    to {
+        top: 0%;
+        height: 100%;
+    }
+}
+
+@-webkit-keyframes bot-out {
+    from {
+        left: 0%;
+        width: 100%;
+    }
+    to {
+        left: 100%;
+        width: 0%;
+    }
+}
+
+@keyframes bot-out {
+    from {
+        left: 0%;
+        width: 100%;
+    }
+    to {
+        left: 100%;
+        width: 0%;
+    }
+}
+
+@-webkit-keyframes bot-in {
+    from {
+        left: -100%;
+        width: 0%;
+    }
+    to {
+        left: 0%;
+        width: 100%;
+    }
+}
+
+@keyframes bot-in {
+    from {
+        left: -100%;
+        width: 0%;
+    }
+    to {
+        left: 0%;
+        width: 100%;
+    }
+}