@ftdata/ui 0.0.1

package/dist/components/Loading/Loading.stories.js

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Loading from "./Loading/index.js";
+const meta = {
+    title: "DESIGN COMPONENTS/Loading",
+    component: Loading,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ jsx("div", {
+                style: {
+                    width: "300px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                },
+                children: /*#__PURE__*/ jsx(Story, {})
+            })
+    ],
+    argTypes: {
+        variant: {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a varia\xe7\xe3o de tema de cores do Loading",
+            table: {
+                type: {
+                    summary: '"light" | "dark'
+                }
+            }
+        },
+        size: {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define o tamanho do Loading",
+            table: {
+                type: {
+                    summary: '"sm" | "md" | "lg" | "xl"'
+                }
+            }
+        }
+    }
+};
+const Loading_stories = meta;
+const Default = {
+    args: {
+        variant: "light",
+        size: "xl"
+    }
+};
+const Dark = {
+    render: ()=>/*#__PURE__*/ jsx("div", {
+            style: {
+                alignItems: "center",
+                backgroundColor: "#FF5656",
+                borderRadius: "10px",
+                display: "flex",
+                justifyContent: "center",
+                height: "120px",
+                width: "120px"
+            },
+            children: /*#__PURE__*/ jsx(Loading, {
+                variant: "dark",
+                size: "xl"
+            })
+        })
+};
+const Light = {
+    render: ()=>/*#__PURE__*/ jsx("div", {
+            style: {
+                alignItems: "center",
+                backgroundColor: "#FFF",
+                borderRadius: "10px",
+                display: "flex",
+                justifyContent: "center",
+                height: "120px",
+                width: "120px"
+            },
+            children: /*#__PURE__*/ jsx(Loading, {
+                variant: "light",
+                size: "xl"
+            })
+        })
+};
+const Sizes = {
+    render: ()=>/*#__PURE__*/ jsxs("div", {
+            style: {
+                alignItems: "center",
+                display: "flex",
+                justifyContent: "center",
+                width: "500px"
+            },
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: "100px",
+                        height: "40px",
+                        position: "relative"
+                    },
+                    children: /*#__PURE__*/ jsx(Loading, {
+                        variant: "light",
+                        size: "xl"
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: "80px",
+                        height: "40px",
+                        position: "relative"
+                    },
+                    children: /*#__PURE__*/ jsx(Loading, {
+                        variant: "light",
+                        size: "lg"
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: "80px",
+                        height: "40px",
+                        position: "relative"
+                    },
+                    children: /*#__PURE__*/ jsx(Loading, {
+                        variant: "light",
+                        size: "md"
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: "40px",
+                        height: "40px",
+                        position: "relative"
+                    },
+                    children: /*#__PURE__*/ jsx(Loading, {
+                        variant: "light",
+                        size: "sm"
+                    })
+                })
+            ]
+        })
+};
+export { Dark, Default, Light, Sizes, Loading_stories as default };

package/dist/components/Loading/index.d.ts

@@ -0,0 +1,16 @@
+import React, { JSX } from "react";
+type sizes = "sm" | "md" | "lg" | "xl";
+type LoadingProps = {
+    variant: "dark" | "light";
+    size: sizes;
+};
+declare const Loading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, LoadingProps & React.HTMLAttributes<HTMLDivElement>>> & string;
+type UseLoadingPropsReturn = {
+    Loading: (({ size, variant }: LoadingProps) => JSX.Element) | null;
+    showLoading: () => void;
+    hideLoading: () => void;
+    visibleLoading: boolean;
+    switchVisibleLoading: () => void;
+};
+export declare const useLoading: () => UseLoadingPropsReturn;
+export default Loading;

package/dist/components/Loading/index.js

@@ -0,0 +1,98 @@
+import { jsx } from "react/jsx-runtime";
+import styled_components, { keyframes } from "styled-components";
+import { BORDER_RADIUS_CIRCLE, BORDER_WIDTH_THIN, COLOR_BRAND_MEDIUM, COLOR_NEUTRAL_DAY, SPACING_INLINE_03, SPACING_INLINE_04, SPACING_INLINE_06, SPACING_INLINE_07 } from "@ftdata/f-tokens";
+import { useState } from "react";
+const spin = keyframes`
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+`;
+const LOADING_MODIFIERS = {
+    dark: `
+      &:before {
+        border-color: ${COLOR_NEUTRAL_DAY} ${COLOR_NEUTRAL_DAY} transparent;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    `,
+    light: `
+      &:before {
+        border-color: ${COLOR_BRAND_MEDIUM} ${COLOR_BRAND_MEDIUM} transparent;
+      }
+
+      &:[disabled] {
+        cursor: not-allowed;
+      }
+    `
+};
+const LoadingSizes = {
+    sm: SPACING_INLINE_03,
+    md: SPACING_INLINE_04,
+    lg: SPACING_INLINE_06,
+    xl: SPACING_INLINE_07
+};
+const Loading_Loading = styled_components("div")`
+  align-items: center;
+  background: transparent;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+
+  + i {
+    margin-right: 8px;
+  }
+
+  &:before {
+    animation: 1.5s linear infinite ${spin};
+    animation-play-state: inherit;
+    border-color: ${COLOR_NEUTRAL_DAY}
+      ${COLOR_NEUTRAL_DAY} transparent;
+    border-radius: ${BORDER_RADIUS_CIRCLE};
+    border-width: ${BORDER_WIDTH_THIN};
+    border-style: solid;
+    content: "";
+    display: block;
+    height: calc(
+      ${({ size })=>LoadingSizes[size]} - ${BORDER_WIDTH_THIN}
+    );
+    width: calc(
+      ${({ size })=>LoadingSizes[size]} - ${BORDER_WIDTH_THIN}
+    );
+    will-change: transform;
+
+    transition: all 0.2s ease;
+    &:hover,
+    &:active,
+    &:disabled,
+    &:focus {
+      transition: all 0.2s ease;
+    }
+  }
+
+  ${({ variant })=>LOADING_MODIFIERS[variant]};
+`;
+const useLoading = ()=>{
+    const [visibleLoading, setVisibleLoading] = useState(true);
+    const ComponentLoading = ({ size, variant })=>/*#__PURE__*/ jsx(Loading_Loading, {
+            size: size,
+            variant: variant
+        });
+    return {
+        Loading: visibleLoading ? ComponentLoading : null,
+        showLoading: ()=>setVisibleLoading(true),
+        hideLoading: ()=>setVisibleLoading(false),
+        visibleLoading: visibleLoading,
+        switchVisibleLoading: ()=>setVisibleLoading(!visibleLoading)
+    };
+};
+const Loading = Loading_Loading;
+export { Loading as default, useLoading };

package/dist/components/Menu/constants/icons.d.ts

@@ -0,0 +1,17 @@
+export declare const ICONS: {
+    panelist: import("react/jsx-runtime").JSX.Element;
+    registration: import("react/jsx-runtime").JSX.Element;
+    logistics: import("react/jsx-runtime").JSX.Element;
+    reports: import("react/jsx-runtime").JSX.Element;
+    driver_behavior: import("react/jsx-runtime").JSX.Element;
+    settings: import("react/jsx-runtime").JSX.Element;
+    f_analytics: import("react/jsx-runtime").JSX.Element;
+    f_speed: import("react/jsx-runtime").JSX.Element;
+    title_module_playback_f_view: import("react/jsx-runtime").JSX.Element;
+    message: import("react/jsx-runtime").JSX.Element;
+    maps: import("react/jsx-runtime").JSX.Element;
+    changelog: import("react/jsx-runtime").JSX.Element;
+    dashboard: import("react/jsx-runtime").JSX.Element;
+    mosaic: import("react/jsx-runtime").JSX.Element;
+};
+export type IconsKeys = keyof typeof ICONS;

package/dist/components/Menu/constants/icons.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { Icon } from "@ftdata/f-icons";
+const ICONS = {
+    panelist: /*#__PURE__*/ jsx(Icon, {
+        name: "ui briefcase",
+        color: "currentColor"
+    }),
+    registration: /*#__PURE__*/ jsx(Icon, {
+        name: "ui plus-add",
+        color: "currentColor"
+    }),
+    logistics: /*#__PURE__*/ jsx(Icon, {
+        name: "nav arrow-location-direction-1",
+        color: "currentColor"
+    }),
+    reports: /*#__PURE__*/ jsx(Icon, {
+        name: "bp chart-19",
+        color: "currentColor"
+    }),
+    driver_behavior: /*#__PURE__*/ jsx(Icon, {
+        name: "nav direction-arrow-road",
+        color: "currentColor"
+    }),
+    settings: /*#__PURE__*/ jsx(Icon, {
+        name: "ui settings",
+        color: "currentColor"
+    }),
+    f_analytics: /*#__PURE__*/ jsx(Icon, {
+        name: "sm google-analytics",
+        color: "currentColor"
+    }),
+    f_speed: /*#__PURE__*/ jsx(Icon, {
+        name: "cs speedometer",
+        color: "currentColor"
+    }),
+    title_module_playback_f_view: /*#__PURE__*/ jsx(Icon, {
+        name: "ui video-camera",
+        color: "currentColor"
+    }),
+    message: /*#__PURE__*/ jsx(Icon, {
+        name: "eml emails-letter-mail-2",
+        color: "currentColor"
+    }),
+    maps: /*#__PURE__*/ jsx(Icon, {
+        name: "nav earth-home-world",
+        color: "currentColor"
+    }),
+    changelog: /*#__PURE__*/ jsx(Icon, {
+        name: "ui info-information",
+        color: "currentColor"
+    }),
+    dashboard: /*#__PURE__*/ jsx(Icon, {
+        name: "ui dashboard-minimal",
+        color: "currentColor"
+    }),
+    mosaic: /*#__PURE__*/ jsx(Icon, {
+        name: "ui grid-layout-add",
+        color: "currentColor"
+    })
+};
+export { ICONS };

package/dist/components/Menu/helpers/createMenus.d.ts

@@ -0,0 +1,2 @@
+import { MenuItem, MenuItemData } from "../types/MenuItem";
+export default function createMenuItems(data: MenuItemData[], translate: (key: string) => string): MenuItem[];

package/dist/components/Menu/helpers/createMenus.js

@@ -0,0 +1,20 @@
+import { ICONS } from "../constants/icons.js";
+import { createSubMenus } from "./createSubMenus.js";
+function createMenuItems(data, translate) {
+    return data.sort((a, b)=>a.ordenation - b.ordenation).filter((item)=>!!ICONS[item.translate_key]).map((item)=>{
+        const icon = ICONS[item.translate_key];
+        const subItems = item.itens.sort((a, b)=>a.ordenation - b.ordenation);
+        return {
+            label: translate(item.translate_key),
+            icon,
+            callback: ()=>{
+                if (item.endpoint) {
+                    const url = new URL(item.endpoint, window.location.origin).toString();
+                    window.open(url, "_blank");
+                }
+            },
+            submenus: createSubMenus(subItems, translate)
+        };
+    });
+}
+export { createMenuItems as default };

package/dist/components/Menu/helpers/createSubMenus.d.ts

@@ -0,0 +1,2 @@
+import { MenuItemData, SubMenuData } from "../types/MenuItem";
+export declare function createSubMenus(data: MenuItemData[], translate: (key: string) => string): SubMenuData[];

package/dist/components/Menu/helpers/createSubMenus.js

@@ -0,0 +1,13 @@
+function createSubMenus(data, translate) {
+    const subMenus = data.map((item)=>({
+            label: translate(item.translate_key),
+            callback: ()=>{
+                if (item.endpoint) {
+                    const url = new URL(item.endpoint, window.location.origin).toString();
+                    window.open(url, "_blank");
+                }
+            }
+        }));
+    return subMenus;
+}
+export { createSubMenus };

package/dist/components/Menu/helpers/generateColorScale.d.ts

@@ -0,0 +1 @@
+export declare function generateColorScale(hex: string): Record<number, string>;

package/dist/components/Menu/helpers/generateColorScale.js

@@ -0,0 +1,62 @@
+function generateColorScale(hex) {
+    const steps = [
+        0.95,
+        0.85,
+        0.75,
+        0.6,
+        0.45,
+        0.3,
+        0.2,
+        0.1,
+        0.05
+    ];
+    const keys = [
+        50,
+        100,
+        200,
+        300,
+        400,
+        600,
+        700,
+        800,
+        900,
+        950
+    ];
+    const toRgb = (hex)=>{
+        const clean = hex.replace("#", "");
+        const bigint = parseInt(clean, 16);
+        return {
+            r: bigint >> 16 & 255,
+            g: bigint >> 8 & 255,
+            b: 255 & bigint
+        };
+    };
+    const toHex = (r, g, b)=>`#${[
+            r,
+            g,
+            b
+        ].map((c)=>Math.round(c).toString(16).padStart(2, "0")).join("")}`;
+    const mix = (c1, c2, amount)=>c1 + (c2 - c1) * amount;
+    const { r: baseR, g: baseG, b: baseB } = toRgb(hex);
+    const lighten = (amount)=>({
+            r: mix(baseR, 255, amount),
+            g: mix(baseG, 255, amount),
+            b: mix(baseB, 255, amount)
+        });
+    const darken = (amount)=>({
+            r: mix(baseR, 0, amount),
+            g: mix(baseG, 0, amount),
+            b: mix(baseB, 0, amount)
+        });
+    const scale = {
+        500: hex
+    };
+    steps.forEach((amt, i)=>{
+        const key = keys[i];
+        const isLight = key < 500;
+        const { r, g, b } = isLight ? lighten(amt) : darken(amt);
+        scale[key] = toHex(r, g, b);
+    });
+    return scale;
+}
+export { generateColorScale };

package/dist/components/Menu/helpers/getLuminance.d.ts

@@ -0,0 +1 @@
+export declare function getLuminance(hex: string): "dark" | "light";

package/dist/components/Menu/helpers/getLuminance.js

@@ -0,0 +1,9 @@
+function getLuminance(hex) {
+    const sanitizedHex = hex.replace("#", "");
+    const r = parseInt(sanitizedHex.substring(0, 2), 16);
+    const g = parseInt(sanitizedHex.substring(2, 4), 16);
+    const b = parseInt(sanitizedHex.substring(4, 6), 16);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance < 0.5 ? "dark" : "light";
+}
+export { getLuminance };

package/dist/components/Menu/index.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from "react";
+import { MenuItemData } from "./types/MenuItem";
+interface MenuProps {
+    background: string;
+    fontColor: string;
+    subMenusBackground: string;
+    logo: JSX.Element;
+    items: MenuItemData[];
+    translate: (key: string) => string;
+}
+export default function Menu({ background, fontColor, subMenusBackground, logo, items, translate, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Menu/index.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ContainerLogo, ItemMenu, ItemsContainer, MenuAside, MenuHeader, SubItemsContainer, SubItemsHeader, SubItemsWrapper, SubMenuItem } from "./styles.js";
+import createMenus from "./helpers/createMenus.js";
+import { Icon } from "@ftdata/f-icons";
+function Menu({ background, fontColor, subMenusBackground, logo, items, translate }) {
+    const [expand, setExpand] = useState(false);
+    const [submenus, setSubmenus] = useState([]);
+    const [isClosingSubmenu, setIsClosingSubmenu] = useState(false);
+    const menus = createMenus(items, translate);
+    const toggleMenu = ()=>{
+        if (expand) return void setTimeout(()=>{
+            setSubmenus([]);
+            setExpand(false);
+        }, 120);
+        setExpand(true);
+    };
+    const handleClickItem = (event, submenus, callback)=>{
+        event.stopPropagation();
+        if (!expand) return void toggleMenu();
+        if (submenus.length) return void setSubmenus(submenus);
+        callback();
+    };
+    const handleClickHamburger = (event)=>{
+        event.stopPropagation();
+        toggleMenu();
+    };
+    const handleClickBack = ()=>{
+        setIsClosingSubmenu(true);
+        setTimeout(()=>{
+            setSubmenus([]);
+            setIsClosingSubmenu(false);
+        }, 400);
+    };
+    return /*#__PURE__*/ jsxs(MenuAside, {
+        background: background,
+        onClick: expand ? ()=>null : toggleMenu,
+        expand: expand,
+        children: [
+            /*#__PURE__*/ jsxs(MenuHeader, {
+                children: [
+                    /*#__PURE__*/ jsxs(ItemMenu, {
+                        onClick: handleClickHamburger,
+                        fontColor: fontColor,
+                        expand: expand,
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    name: "ui menu-burger-square",
+                                    width: "1.5rem"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: translate("close_menu")
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(ContainerLogo, {
+                        expand: expand,
+                        children: logo
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ItemsContainer, {
+                children: menus.map((menu, idx)=>/*#__PURE__*/ jsxs(ItemMenu, {
+                        fontColor: fontColor,
+                        onClick: (event)=>handleClickItem(event, menu.submenus, menu.callback),
+                        expand: expand,
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                children: menu.icon
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: menu.label
+                            })
+                        ]
+                    }, `${menu.label}-${idx}`))
+            }),
+            submenus.length > 0 && /*#__PURE__*/ jsxs(SubItemsContainer, {
+                isClosing: isClosingSubmenu,
+                background: subMenusBackground,
+                children: [
+                    /*#__PURE__*/ jsx(SubItemsHeader, {
+                        fontColor: fontColor,
+                        children: /*#__PURE__*/ jsxs("button", {
+                            onClick: handleClickBack,
+                            children: [
+                                /*#__PURE__*/ jsx(Icon, {
+                                    name: "arw arrow-left"
+                                }),
+                                translate("back")
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(SubItemsWrapper, {
+                        background: subMenusBackground,
+                        children: submenus.map((submenu, idx)=>/*#__PURE__*/ jsx(SubMenuItem, {
+                                fontColor: fontColor,
+                                onClick: (event)=>handleClickItem(event, [], submenu.callback),
+                                children: submenu.label
+                            }, `${submenu.label}-${idx}`))
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { Menu as default };

package/dist/components/Menu/styles.d.ts

@@ -0,0 +1,17 @@
+interface ICommonProps {
+    background?: string;
+    fontColor?: string;
+    active?: boolean;
+    expand?: boolean;
+    isClosing?: boolean;
+}
+export declare const MenuAside: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, ICommonProps>> & string;
+export declare const MenuHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICommonProps>> & string;
+export declare const ContainerLogo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICommonProps>> & string;
+export declare const ItemsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ItemMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICommonProps>> & string;
+export declare const SubItemsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICommonProps>> & string;
+export declare const SubItemsHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICommonProps>> & string;
+export declare const SubItemsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICommonProps>> & string;
+export declare const SubMenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ICommonProps>> & string;
+export {};