fui-material 0.2.60 → 0.2.61

package/src/material/Dropdown/FDropdown/FDropdown.tsx

@@ -1,60 +0,0 @@
-import React, {FC} from "react";
-import '../statick/FDropdown.css'
-import {FButton, FStack} from "../../index";
-
-// @ts-ignore
-import downArrow from '../statick/down-arrow.png'
-
-export interface IFDropdown {
-    label?: React.ReactChild | React.ReactNode,
-    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
-    st?: React.CSSProperties,
-    className?: string
-    id?: string,
-}
-
-const FDropdown: FC<IFDropdown> = ({
-                                       label,
-                                       variant = 'contained',
-                                       color = 'primary',
-                                       size = 'btn-sm',
-                                       disabled,
-                                       st,
-                                       className,
-                                       id,
-                                       children
-                                   }) => {
-
-    return (
-        <React.Fragment>
-            <div className={'f-dropdown'}>
-                <FButton
-                    variant={variant}
-                    color={color}
-                    size={size}
-                    disabled={disabled}
-                    st={st}
-                    className={`f-dropdown-bottom ${className !== undefined ? className : ''}`}
-                    id={id}
-                    onClick={() => {
-                        document.getElementsByClassName('#heading');
-                    }}
-                >
-                    <FStack direction={'row'} spacing={1} justifyContent={"center"} alignItems={'center'}>
-                        {label}
-                        <img className={'f-dropdown-down-arrow'} src={downArrow}/>
-                    </FStack>
-                </FButton>
-                <div className="f-dropdown-content">
-                    {children}
-                </div>
-            </div>
-        </React.Fragment>
-    )
-}
-
-export default FDropdown

package/src/material/Dropdown/FDropdownItem/FDropdownItem.tsx

@@ -1,35 +0,0 @@
-import React, {FC} from "react";
-
-export interface IFDropdownItem {
-    disabled?: boolean
-    st?: React.CSSProperties,
-    className?: string
-    id?: string,
-    children?: React.ReactChild | React.ReactNode,
-    onClick?: React.MouseEventHandler<HTMLLIElement> | undefined
-}
-
-const FDropdownItem: FC<IFDropdownItem> = ({
-                                               disabled,
-                                               st,
-                                               className,
-                                               id,
-                                               children,
-                                               onClick
-                                           }) => {
-
-    return (
-        <React.Fragment>
-            <li
-                className={`f-dropdown-link ${className !== undefined ? className : ''} ${disabled ? 'disabled' : ''}`}
-                id={id}
-                style={st}
-                onClick={onClick}
-            >
-                {children}
-            </li>
-        </React.Fragment>
-    )
-}
-
-export default FDropdownItem

package/src/material/Dropdown/statick/FDropdown.css

@@ -1,68 +0,0 @@
-.f-dropdown {
-    position: relative;
-    display: inline-block;
-    padding: 16px;
-}
-
-.f-dropdown-content {
-    display: none;
-    flex-direction: column;
-    position: absolute;
-    padding: 10px;
-    box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
-    border-radius: 10px;
-    min-width: 200px;
-    max-width: 400px;
-    z-index: 6;
-    margin-top: 10px;
-    opacity: 0;
-    background-color: white;
-}
-
-.f-dropdown-link {
-    padding: 8px;
-    color: #656565;
-    font-size: 14px;
-    border-bottom: 1px solid #C4C4C4;
-    cursor: pointer;
-    list-style-type: none;
-}
-
-.f-dropdown:hover .f-dropdown-content {
-    display: flex;
-    opacity: 1;
-    animation: fadeInFromNone 0.3s ease;
-}
-
-.f-dropdown-link:last-child {
-    border-bottom: 0;
-}
-
-.f-dropdown-link:hover {
-    color: #2F80ED;
-}
-
-.f-dropdown-down-arrow {
-    width: 2rem;
-    height: 2rem;
-}
-
-
-@keyframes fadeInFromNone {
-    0% {
-        display: none;
-        opacity: 0;
-    }
-
-    1% {
-        display: flex;
-        opacity: 0;
-        transform: translateY(-10%);
-    }
-
-    100% {
-        display: flex;
-        opacity: 1;
-        transform: translateY(0);
-    }
-}

package/src/material/FAccordion/FAccordion.css

@@ -1,80 +0,0 @@
-:root {
-    --color-bg: #eeedeb;
-    --color-title: #0e1c4e;
-    --color-summary-1: #fff6ee;
-    --color-summary-1-highlight: #FBE62B;
-    --color-summary-2: #fafaff;
-    --color-summary-2-highlight: #2F80ED;
-    --color-summary-3: #fff0f3;
-    --color-summary-3-highlight: #D10000;
-}
-
-.card h1 {
-    font-style: normal;
-    font-weight: bold;
-    font-size: 20px;
-    line-height: 1.2;
-    color: var(--color-title);
-}
-
-.fv-accord-title {
-    cursor: pointer;
-}
-
-.card details {
-    display: flex;
-    border-radius: 5px;
-    overflow: hidden;
-    background: rgba(0, 0, 0, 0.05);
-    border-left: 15px solid gray;
-    padding: 15px;
-    margin: 0;
-}
-
-.card details.warning {
-    --highlight: var(--color-summary-1-highlight);
-    background: var(--color-summary-1);
-    border-left-color: var(--color-summary-1-highlight);
-}
-
-.card details.warning p {
-    list-style-type: corona-warning;
-}
-
-.card details.info {
-    --highlight: var(--color-summary-2-highlight);
-    background: var(--color-summary-2);
-    border-left-color: var(--color-summary-2-highlight);
-}
-
-.card details.info p {
-    list-style-type: corona-info;
-}
-
-.card details.alert {
-    --highlight: var(--color-summary-3-highlight);
-    background: var(--color-summary-3);
-    border-left-color: var(--highlight);
-}
-
-.card details.alert p {
-    list-style-type: corona-alert;
-}
-
-.card details summary,
-.card details p {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-content: center;
-    justify-content: flex-start;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 18px;
-    color: var(--color-title);
-    padding: 20px;
-}
-
-.card details[open] summary {
-    font-weight: 700;
-}

package/src/material/FAccordion/FAccordion.tsx

@@ -1,37 +0,0 @@
-import React, {FC} from 'react';
-import './FAccordion.css'
-
-export interface IFAccordion {
-    children?: React.ReactChild | React.ReactNode,
-    variant?: 'info' | 'alert' | 'warning'
-    title?: string,
-    id?: string,
-    className?: string,
-    st?: React.CSSProperties,
-    defaultOpen?: boolean
-}
-
-const FAccordion: FC<IFAccordion> = ({
-                                         variant = 'info',
-                                         title,
-                                         children,
-                                         id,
-                                         className,
-                                         st,
-                                         defaultOpen
-                                     }) => {
-    return (
-        <React.Fragment>
-            <div className={`card ${className !== undefined ? className : ''}`} id={id}>
-
-                <details className={`${variant}`} open={defaultOpen} style={st}>
-                    <summary className={'fv-accord-title'}>{title}</summary>
-                    {children}
-                </details>
-
-            </div>
-        </React.Fragment>
-    );
-};
-
-export default FAccordion;

package/src/material/FAccordion/index.ts

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

package/src/material/FAlert/FAlert.css

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

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

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