@ftdata/ui 0.0.8 → 0.0.10

package/dist/assets/fonts/Inter-Italic.js

@@ -0,0 +1,2 @@
+import Inter_Italic_namespaceObject from "../../static/font/Inter-Italic.ttf";
+export { Inter_Italic_namespaceObject as default };

package/dist/assets/fonts/Inter.js

@@ -0,0 +1,2 @@
+import Inter_namespaceObject from "../../static/font/Inter.ttf";
+export { Inter_namespaceObject as default };

package/dist/components/DoubleList/DoubleList.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from "@storybook/react";
-import FilterList from ".";
+import { Meta, StoryObj } from '@storybook/react';
+import FilterList from '.';
 /**
  * DoubleList exibe duas listas separadas, permitindo ao usuário visualizar diferentes itens simultaneamente.
 

package/dist/components/DoubleList/DoubleList.stories.js

@@ -1,31 +1,31 @@
 import { jsx } from "react/jsx-runtime";
 import index from "./index.js";
 const meta = {
-    title: "DESIGN COMPONENTS/FilterList",
+    title: 'UI/DoubleList',
     component: index,
     tags: [
-        "autodocs"
+        'autodocs'
     ],
     decorators: [
         (Story)=>/*#__PURE__*/ jsx("div", {
                 style: {
-                    background: "#fff",
-                    width: "32rem",
-                    borderRadius: "0.5rem",
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    padding: "1rem"
+                    background: 'pink',
+                    width: '32rem',
+                    borderRadius: '0.5rem',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: '1rem'
                 },
                 children: /*#__PURE__*/ jsx(Story, {})
             })
     ],
     parameters: {
-        layout: "centered"
+        layout: 'centered'
     },
     argTypes: {
         total: {
-            description: "Recebe a quantidade total de intens."
+            description: 'Recebe a quantidade total de intens.'
         },
         options: {
             description: "Recebe um Array de strings que ser\xe3o renderizadas nas listas."
@@ -34,45 +34,45 @@ const meta = {
             description: "Define a quantidade de op\xe7\xf5es que aparecem por vez nas listas."
         },
         title: {
-            description: "Define o titulo acima do componente."
+            description: 'Define o titulo acima do componente.'
         },
         selected: {
-            description: "Define a quantidade que foi selecionada."
+            description: 'Define a quantidade que foi selecionada.'
         }
     }
 };
 const DoubleList_stories = meta;
 const placas = [
-    "XJZ874",
-    "TRK951",
-    "LMP230",
-    "QWV615",
-    "BNC472",
-    "DFT389",
-    "GHR526",
-    "VXZ731",
-    "JFK198",
-    "MNL543",
-    "ZXC741",
-    "PLM852",
-    "QWE963",
-    "TYU357",
-    "BNM147",
-    "ASD951",
-    "GHJ635",
-    "XCV284",
-    "LKJ578",
-    "POI963",
-    "MNB753",
-    "WER852",
-    "OIU246",
-    "YTR159",
-    "ZXA6345",
-    "QWERTY",
-    "PLACAEXEMPLO",
-    "EXEMPLO123",
-    "TESTEPLACAGRANDETESTEPLACAGRANDETESTEPLACAGRANDE",
-    "AB"
+    'XJZ874',
+    'TRK951',
+    'LMP230',
+    'QWV615',
+    'BNC472',
+    'DFT389',
+    'GHR526',
+    'VXZ731',
+    'JFK198',
+    'MNL543',
+    'ZXC741',
+    'PLM852',
+    'QWE963',
+    'TYU357',
+    'BNM147',
+    'ASD951',
+    'GHJ635',
+    'XCV284',
+    'LKJ578',
+    'POI963',
+    'MNB753',
+    'WER852',
+    'OIU246',
+    'YTR159',
+    'ZXA6345',
+    'QWERTY',
+    'PLACAEXEMPLO',
+    'EXEMPLO123',
+    'TESTEPLACAGRANDETESTEPLACAGRANDETESTEPLACAGRANDE',
+    'AB'
 ];
 const Default = {
     args: {

package/dist/components/DoubleList/Row/index.d.ts

@@ -0,0 +1,4 @@
+import { type RowComponentProps } from "react-window";
+export default function Row({ index, style, data, }: RowComponentProps<{
+    data: string[];
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/components/DoubleList/Row/index.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { OptionContainer } from "./style.js";
+function Row({ index, style, data }) {
+    const label = data[index];
+    return /*#__PURE__*/ jsx(OptionContainer, {
+        style: style,
+        children: /*#__PURE__*/ jsx("span", {
+            children: label
+        })
+    });
+}
+export { Row as default };

package/dist/components/DoubleList/Row/style.d.ts

@@ -0,0 +1 @@
+export declare const OptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/DoubleList/Row/style.js

@@ -0,0 +1,31 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHTER, FONT_FAMILY_01, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
+const OptionContainer = styled_components.div`
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  width: 100%;
+  align-items: center;
+
+  &:hover {
+    background-color: ${COLOR_NEUTRAL_LIGHTER};
+
+    span {
+      color: ${COLOR_NEUTRAL_DUSK};
+    }
+  }
+
+  span {
+    color: ${COLOR_NEUTRAL_DARKER};
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-family: ${FONT_FAMILY_01};
+    font-weight: ${FONT_WEIGHT_MEDIUM};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+export { OptionContainer };

package/dist/components/DoubleList/index.js

@@ -1,15 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { FixedSizeList } from "react-window";
-import { DoubleListContainer, HeadingContainer, ListContainer, ListsContainer, OptionContainer } from "./style.js";
-const renderRow = ({ data, index, style })=>{
-    const label = data[index];
-    return /*#__PURE__*/ jsx(OptionContainer, {
-        style: style,
-        children: /*#__PURE__*/ jsx("span", {
-            children: label
-        })
-    });
-};
+import { List } from "react-window";
+import { DoubleListContainer, HeadingContainer, ListContainer, ListsContainer } from "./style.js";
+import Row from "./Row/index.js";
 function DoubleList({ options, listHeight = 5, title, selected, total, ...rest }) {
     const OPTION_SIZE = 36;
     const height = listHeight * OPTION_SIZE;
@@ -33,33 +25,33 @@ function DoubleList({ options, listHeight = 5, title, selected, total, ...rest }
             /*#__PURE__*/ jsxs(ListsContainer, {
                 children: [
                     /*#__PURE__*/ jsx(ListContainer, {
-                        children: /*#__PURE__*/ jsx(FixedSizeList, {
-                            itemCount: firstHalf.length,
-                            itemData: firstHalf,
-                            itemSize: 36,
-                            height: height,
-                            width: "100%",
-                            itemKey: (index)=>options[index] || index,
-                            children: ({ index, style, data })=>renderRow({
-                                    data,
-                                    index,
-                                    style
-                                })
+                        children: /*#__PURE__*/ jsx(List, {
+                            rowComponent: Row,
+                            rowCount: firstHalf.length,
+                            rowHeight: OPTION_SIZE,
+                            rowProps: {
+                                data: firstHalf
+                            },
+                            style: {
+                                height: `${height / 16}rem`,
+                                width: "100%"
+                            },
+                            overscanCount: 0
                         })
                     }),
                     /*#__PURE__*/ jsx(ListContainer, {
-                        children: /*#__PURE__*/ jsx(FixedSizeList, {
-                            itemCount: secondHalf.length,
-                            itemData: secondHalf,
-                            itemSize: 36,
-                            height: height,
-                            width: "100%",
-                            itemKey: (index)=>options[index] || index,
-                            children: ({ index, style, data })=>renderRow({
-                                    data,
-                                    index,
-                                    style
-                                })
+                        children: /*#__PURE__*/ jsx(List, {
+                            rowComponent: Row,
+                            rowCount: secondHalf.length,
+                            rowHeight: OPTION_SIZE,
+                            rowProps: {
+                                data: secondHalf
+                            },
+                            style: {
+                                height: `${height / 16}rem`,
+                                width: "100%"
+                            },
+                            overscanCount: 0
                         })
                     })
                 ]

package/dist/components/DoubleList/style.d.ts

@@ -2,4 +2,3 @@ export declare const DoubleListContainer: import("styled-components/dist/types")
 export declare const HeadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ListsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const OptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/DoubleList/style.js

@@ -1,8 +1,7 @@
 import styled_components from "styled-components";
-import { COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER } from "@ftdata/f-tokens";
+import { COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT } from "@ftdata/f-tokens";
 const DoubleListContainer = styled_components.div`
   display: flex;
-  background-color: ${COLOR_NEUTRAL_DAY};
   flex-direction: column;
   gap: 0.75rem;
   width: 100%;
@@ -37,7 +36,6 @@ const ListsContainer = styled_components.div`
   }
 `;
 const ListContainer = styled_components.div`
-  background-color: ${COLOR_NEUTRAL_DAY};
   display: flex;
   overflow: overlay;
   width: calc(50% - 0.313rem);
@@ -62,31 +60,4 @@ const ListContainer = styled_components.div`
     background-clip: padding-box;
   }
 `;
-const OptionContainer = styled_components.div`
-  align-items: center;
-  background-color: ${COLOR_NEUTRAL_DAY};
-  box-sizing: border-box;
-  display: inline-flex;
-  gap: 0.5rem;
-  padding: 0.5rem 0;
-  width: 100%;
-  overflow: hidden;
-  transition: all 0.18s fowards;
-
-  &:hover {
-    background-color: ${COLOR_NEUTRAL_LIGHTER};
-  }
-
-  span {
-    font-size: 0.875rem;
-    color: ${COLOR_NEUTRAL_DARKER};
-    line-height: 1.25rem;
-    letter-spacing: 0px;
-    max-width: 90%;
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
-export { DoubleListContainer, HeadingContainer, ListContainer, ListsContainer, OptionContainer };
+export { DoubleListContainer, HeadingContainer, ListContainer, ListsContainer };

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Menu from "./index";
+declare const meta: Meta<typeof Menu>;
+export default meta;
+type Story = StoryObj<typeof Menu>;
+export declare const Default: Story;

package/dist/components/Menu/Menu.stories.js

@@ -0,0 +1,116 @@
+import { jsx } from "react/jsx-runtime";
+import index from "./index.js";
+import { Icon } from "@ftdata/f-icons";
+const meta = {
+    title: "Components/Menu",
+    component: index,
+    argTypes: {
+        background: {
+            control: "color"
+        },
+        fontcolor: {
+            control: "color"
+        },
+        subMenusBackground: {
+            control: "color"
+        },
+        active: {
+            control: "text"
+        }
+    }
+};
+const Menu_stories = meta;
+const mockLogo = /*#__PURE__*/ jsx(Icon, {
+    name: "ui airplay-signal",
+    width: "2rem"
+});
+const mockItems = [
+    {
+        id: 1,
+        description: "Dashboard principal",
+        endpoint: "/dashboard",
+        itens: [
+            {
+                id: 11,
+                description: "Relat\xf3rios",
+                endpoint: "/dashboard/reports",
+                itens: [
+                    {
+                        id: 12,
+                        description: "Estat\xedsticas",
+                        endpoint: "/dashboard/statistics",
+                        itens: [],
+                        menu_icon: "ui statistics",
+                        translate_key: "changelog",
+                        ordenation: 2
+                    },
+                    {
+                        id: 12,
+                        description: "Estat\xedsticas",
+                        endpoint: "/dashboard/statistics",
+                        itens: [],
+                        menu_icon: "ui statistics",
+                        translate_key: "changelog",
+                        ordenation: 2
+                    },
+                    {
+                        id: 12,
+                        description: "Estat\xedsticas",
+                        endpoint: "/dashboard/statistics",
+                        itens: [],
+                        menu_icon: "ui statistics",
+                        translate_key: "changelog",
+                        ordenation: 2
+                    }
+                ],
+                menu_icon: "ui report",
+                translate_key: "reports",
+                ordenation: 1
+            },
+            {
+                id: 12,
+                description: "Estat\xedsticas",
+                endpoint: "/dashboard/statistics",
+                itens: [],
+                menu_icon: "ui statistics",
+                translate_key: "changelog",
+                ordenation: 2
+            }
+        ],
+        menu_icon: "ui dashboard",
+        translate_key: "dashboard",
+        ordenation: 1
+    },
+    {
+        id: 2,
+        description: "Configura\xe7\xf5es do sistema",
+        endpoint: "/settings",
+        itens: [],
+        menu_icon: "ui settings",
+        translate_key: "settings",
+        ordenation: 2
+    }
+];
+const mockTranslate = (key)=>{
+    const dict = {
+        menu: "Menu",
+        dashboard: "Dashboard",
+        settings: "Configura\xe7\xf5es",
+        back: "Voltar",
+        reports: "Relat\xf3rios",
+        statistics: "Estat\xedsticas"
+    };
+    return dict[key] || key;
+};
+const Default = {
+    args: {
+        background: "#222",
+        fontcolor: "#fff",
+        subMenusBackground: "#333",
+        logo: mockLogo,
+        items: mockItems,
+        translate: mockTranslate,
+        active: "dashboard"
+    }
+};
+export { Default, Menu_stories as default };

package/dist/components/Menu/index.js

@@ -7,14 +7,22 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
     const [expand, setExpand] = useState(false);
     const [submenus, setSubmenus] = useState([]);
     const [isClosingSubmenu, setIsClosingSubmenu] = useState(false);
+    const [menuAnimating, setMenuAnimating] = useState(false);
     const menuRef = useRef(null);
     const menus = createMenus(items, translate);
     const toggleMenu = ()=>{
-        if (expand) return void setTimeout(()=>{
-            setSubmenus([]);
-            setExpand(false);
-        }, 120);
+        if (expand) {
+            setMenuAnimating(true);
+            setTimeout(()=>{
+                setSubmenus([]);
+                setExpand(false);
+                setMenuAnimating(false);
+            }, 120);
+            return;
+        }
         setExpand(true);
+        setMenuAnimating(true);
+        setTimeout(()=>setMenuAnimating(false), 120);
     };
     const handleClickItem = (event, submenus, callback)=>{
         event.stopPropagation();
@@ -26,6 +34,10 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
         event.stopPropagation();
         toggleMenu();
     };
+    const handleClickAside = (event)=>{
+        if (!expand) return void toggleMenu();
+        if (event.target === event.currentTarget) toggleMenu();
+    };
     const handleClickBack = ()=>{
         setIsClosingSubmenu(true);
         setTimeout(()=>{
@@ -50,7 +62,7 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
     return /*#__PURE__*/ jsxs(MenuAside, {
         ref: menuRef,
         background: background,
-        onClick: expand ? ()=>null : toggleMenu,
+        onClick: handleClickAside,
         $expand: expand,
         children: [
             /*#__PURE__*/ jsxs(MenuHeader, {
@@ -59,6 +71,7 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
                         onClick: handleClickHamburger,
                         fontcolor: fontcolor,
                         $expand: expand,
+                        $animating: menuAnimating,
                         children: [
                             /*#__PURE__*/ jsx("div", {
                                 children: /*#__PURE__*/ jsx(Icon, {
@@ -83,6 +96,7 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
                         onClick: (event)=>handleClickItem(event, menu.submenus, menu.callback),
                         $expand: expand || void 0,
                         $active: menu.label === translate(active || ""),
+                        $animating: menuAnimating,
                         children: [
                             /*#__PURE__*/ jsx("div", {
                                 children: menu.icon
@@ -97,23 +111,24 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
                 $isClosing: isClosingSubmenu || void 0,
                 background: subMenusBackground,
                 children: [
-                    /*#__PURE__*/ jsx(SubItemsHeader, {
+                    /*#__PURE__*/ jsxs(SubItemsHeader, {
                         fontcolor: fontcolor,
-                        children: /*#__PURE__*/ jsxs("button", {
-                            onClick: handleClickBack,
-                            children: [
-                                /*#__PURE__*/ jsx(Icon, {
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                onClick: handleClickBack,
+                                children: /*#__PURE__*/ jsx(Icon, {
                                     name: "arw arrow-left"
-                                }),
-                                translate("back")
-                            ]
-                        })
+                                })
+                            }),
+                            translate("back")
+                        ]
                     }),
                     /*#__PURE__*/ jsx(SubItemsWrapper, {
                         background: subMenusBackground,
                         children: submenus.map((submenu, idx)=>/*#__PURE__*/ jsx(SubMenuItem, {
                                 fontcolor: fontcolor,
                                 onClick: (event)=>handleClickItem(event, [], submenu.callback),
+                                $animating: menuAnimating,
                                 children: submenu.label
                             }, `${submenu.label}-${idx}`))
                     })

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

@@ -4,6 +4,7 @@ interface ICommonProps {
     $active?: boolean;
     $expand?: boolean;
     $isClosing?: boolean;
+    $animating?: 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;