@ftdata/ui 0.0.1

package/dist/components/TooltipWrapper/Tooltip.stories.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { TooltipWrapper } from "./index.js";
+const meta = {
+    title: "DESIGN COMPONENTS/TooltipWrapper",
+    component: TooltipWrapper,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        spacing: {
+            description: "Espa\xe7amento entre o elemento e o tooltip."
+        }
+    }
+};
+const Tooltip_stories = meta;
+const Default = {
+    render: ()=>/*#__PURE__*/ jsx(TooltipWrapper, {
+            children: ({ showTooltip, hideTooltip })=>/*#__PURE__*/ jsx("div", {
+                    style: {
+                        padding: "10px",
+                        backgroundColor: "#f5f5f5",
+                        borderRadius: "8px",
+                        cursor: "pointer",
+                        color: "#6b757c",
+                        fontWeight: "500"
+                    },
+                    onMouseEnter: (e)=>showTooltip(e, "Tooltip Padr\xe3o!"),
+                    onMouseLeave: hideTooltip,
+                    children: "Passe o mouse aqui"
+                })
+        })
+};
+const Spacing = {
+    render: ()=>/*#__PURE__*/ jsx(TooltipWrapper, {
+            spacing: 64,
+            children: ({ showTooltip, hideTooltip })=>/*#__PURE__*/ jsx("div", {
+                    style: {
+                        padding: "10px",
+                        backgroundColor: "#f5f5f5",
+                        borderRadius: "8px",
+                        cursor: "pointer",
+                        color: "#6b757c",
+                        fontWeight: "500"
+                    },
+                    onMouseEnter: (e)=>showTooltip(e, "Tooltip com espa\xe7amento"),
+                    onMouseLeave: hideTooltip,
+                    children: "Passe o mouse aqui"
+                })
+        })
+};
+export { Default, Spacing, Tooltip_stories as default };

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

@@ -0,0 +1,20 @@
+import React, { JSX } from "react";
+interface TooltipProps {
+    text: string;
+    position: {
+        top: number;
+        left: number;
+    };
+    visible: boolean;
+}
+export declare function Tooltip({ text, position, visible }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+interface ChildrenProps {
+    showTooltip: (event: React.MouseEvent<HTMLElement>, text: string) => void;
+    hideTooltip: () => void;
+}
+interface TooltipWrapperProps {
+    children: (props: ChildrenProps) => JSX.Element;
+    spacing?: number;
+}
+export declare function TooltipWrapper({ children, spacing }: TooltipWrapperProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TooltipWrapper/index.js

@@ -0,0 +1,56 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { TooltipContainer } from "./styles.js";
+function Tooltip({ text, position, visible }) {
+    if (!visible) return /*#__PURE__*/ jsx(Fragment, {});
+    return /*#__PURE__*/ jsx(TooltipContainer, {
+        position: position,
+        children: text
+    });
+}
+function TooltipWrapper({ children, spacing = 8 }) {
+    const [tooltip, setTooltip] = useState({
+        text: "",
+        position: {
+            top: 0,
+            left: 0
+        },
+        visible: false
+    });
+    const wrapperRef = useRef(null);
+    const showTooltip = (event, text)=>{
+        if (!wrapperRef.current) return;
+        const wrapperRect = wrapperRef.current.getBoundingClientRect();
+        const targetRect = event.currentTarget.getBoundingClientRect();
+        setTooltip({
+            text,
+            position: {
+                top: targetRect.top - wrapperRect.top,
+                left: targetRect.right - wrapperRect.left + spacing
+            },
+            visible: true
+        });
+    };
+    const hideTooltip = ()=>setTooltip({
+            ...tooltip,
+            visible: false
+        });
+    return /*#__PURE__*/ jsxs("div", {
+        ref: wrapperRef,
+        style: {
+            position: "relative"
+        },
+        children: [
+            children({
+                showTooltip,
+                hideTooltip
+            }),
+            /*#__PURE__*/ jsx(Tooltip, {
+                text: tooltip.text,
+                position: tooltip.position,
+                visible: tooltip.visible
+            })
+        ]
+    });
+}
+export { Tooltip, TooltipWrapper };

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

@@ -0,0 +1,6 @@
+export declare const TooltipContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    position: {
+        top: number;
+        left: number;
+    };
+}>> & string;

package/dist/components/TooltipWrapper/styles.js

@@ -0,0 +1,20 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK } from "@ftdata/f-tokens";
+const TooltipContainer = styled_components.div`
+  position: absolute;
+  top: ${({ position })=>position.top}px;
+  left: ${({ position })=>position.left}px;
+  background-color: ${COLOR_NEUTRAL_DUSK};
+  color: ${COLOR_NEUTRAL_DAY};
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  overflow-wrap: break-word;
+  line-height: 0.875rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  max-width: 15rem;
+  width: 100%;
+  pointer-events: none;
+  z-index: 1000;
+`;
+export { TooltipContainer };

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

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Tooltips from ".";
+/**
+ * Tooltips são pequenas caixas de texto que surgem ao passar o mouse sobre um elemento, revelando informações extras.
+ * Este componente também funciona com os atributos nativos de um HTML div element.
+ */
+declare const meta: Meta<typeof Tooltips>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do Tooltips quando apenas as propriedades obrigatórias são fornecidas.
+ */
+export declare const Default: Story;
+/**
+ * Todas as variações de posição onde o Tolltips é renderizado.
+ */
+export declare const Positions: Story;
+/**
+ * Exemplo simples da usabilidade do componente.
+ */
+export declare const ExampleWithButton: Story;
+/**
+ * Exemplo simples da usabilidade do componente.
+ */
+export declare const ExampleWithIcon: Story;

package/dist/components/Tooltips/Tooltips.stories.js

@@ -0,0 +1,139 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import index from "./index.js";
+import Button from "../Button/index.js";
+import chat from "../../assets/svg/chat.js";
+const defaultExample = /*#__PURE__*/ jsx("div", {
+    style: {
+        color: "#FF5656",
+        fontWeight: "800",
+        padding: "0.5rem"
+    },
+    children: /*#__PURE__*/ jsx("div", {
+        children: "Passe o mouse"
+    })
+});
+const firstExample = /*#__PURE__*/ jsx(Button, {
+    variant: "secondary",
+    children: "Passe o Mouse"
+});
+const secondExample = /*#__PURE__*/ jsx("img", {
+    src: chat,
+    style: {
+        width: "40px"
+    }
+});
+const meta = {
+    title: "DESIGN COMPONENTS/Tooltips",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        children: {
+            control: {
+                type: "select"
+            },
+            description: "Define o conte\xfado que ser\xe1 renderizado dentro do componente.",
+            mapping: {
+                "Default Example": defaultExample,
+                "First Example": firstExample,
+                "Second Example": secondExample
+            },
+            options: [
+                "Default Example",
+                "First Example",
+                "Second Example"
+            ],
+            table: {
+                type: {
+                    summary: "ReactNode"
+                }
+            }
+        },
+        text: {
+            description: "Define o texto dentro do Tooltip."
+        },
+        position: {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a posi\xe7\xe3o que o Tooltip ser\xe1 renderizado.",
+            table: {
+                type: {
+                    summary: '"left" | "right" | "top" | "bottom"'
+                }
+            }
+        }
+    }
+};
+const Tooltips_stories = meta;
+const Default = {
+    args: {
+        children: defaultExample,
+        text: "tooltip",
+        position: "bottom"
+    }
+};
+const Positions = {
+    render: ()=>/*#__PURE__*/ jsxs("div", {
+            style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: "4rem",
+                width: "100%"
+            },
+            children: [
+                /*#__PURE__*/ jsx(index, {
+                    position: "top",
+                    text: "tooltip",
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "secondary",
+                        children: "top"
+                    })
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    position: "bottom",
+                    text: "tooltip",
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "secondary",
+                        children: "bottom"
+                    })
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    position: "left",
+                    text: "tooltip",
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "secondary",
+                        children: "left"
+                    })
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    position: "right",
+                    text: "tooltip",
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "secondary",
+                        children: "right"
+                    })
+                })
+            ]
+        })
+};
+const ExampleWithButton = {
+    args: {
+        children: firstExample,
+        text: "Bot\xe3o",
+        position: "right"
+    }
+};
+const ExampleWithIcon = {
+    args: {
+        children: secondExample,
+        text: "icone",
+        position: "bottom"
+    }
+};
+export { Default, ExampleWithButton, ExampleWithIcon, Positions, Tooltips_stories as default };

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

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    position?: "left" | "right" | "top" | "bottom";
+    text?: string;
+    children?: ReactElement;
+}
+declare const Tooltips: React.FC<Props>;
+export default Tooltips;

package/dist/components/Tooltips/index.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { TooltipContainer } from "./styles.js";
+const Tooltips = ({ children, text, position, ...rest })=>{
+    const [show, setShow] = useState(false);
+    return /*#__PURE__*/ jsxs(TooltipContainer, {
+        position: position,
+        children: [
+            show && /*#__PURE__*/ jsxs("div", {
+                className: "tooltip-box",
+                children: [
+                    text,
+                    /*#__PURE__*/ jsx("span", {
+                        className: "tooltipArrow"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                onMouseEnter: ()=>setShow(true),
+                onMouseLeave: ()=>setShow(false),
+                ...rest,
+                children: children
+            })
+        ]
+    });
+};
+const components_Tooltips = Tooltips;
+export { components_Tooltips as default };

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

@@ -0,0 +1,5 @@
+interface PositionProps {
+    position?: "left" | "right" | "top" | "bottom";
+}
+export declare const TooltipContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, PositionProps>> & string;
+export {};

package/dist/components/Tooltips/styles.js

@@ -0,0 +1,37 @@
+import styled_components from "styled-components";
+const TooltipContainer = styled_components("div")`
+  position: relative;
+  width: max-content;
+  display: flex;
+  justify-content: center;
+
+  & > .tooltip-box {
+    font-size: 12px;
+    font-weight: 600;
+    position: absolute;
+    background: #26333b;
+    color: #fff;
+    padding: 4px 8px;
+    border-radius: 4px;
+    top: ${({ position })=>"bottom" === position && "calc(100% + 5px)" || "left" === position && "-2px" || "right" === position && "-2px"};
+    bottom: ${({ position })=>"top" === position && "calc(100% + 5px)"};
+    right: ${({ position })=>"left" === position && "calc(100% + 5px)"};
+    left: ${({ position })=>"right" === position && "calc(100% + 5px)"};
+    width: max-content;
+    font-family: "Inter";
+    font-style: normal;
+  }
+
+  .tooltipArrow {
+    position: absolute;
+    left: ${({ position })=>"top" === position && "50%" || "bottom" === position && "50%" || "right" === position && "-10px"};
+    right: ${({ position })=>"left" === position && "-0.65rem"};
+    top: ${({ position })=>"bottom" === position && "-10px" || "left" === position && "30%" || "right" === position && "30%"};
+    bottom: ${({ position })=>"top" === position && "-10px"};
+    border-width: 5px;
+    margin: ${({ position })=>"top" === position && "0 -5px" || "bottom" === position && "0 -5px"};
+    border-style: solid;
+    border-color: ${({ position })=>"top" === position && "#26333b transparent transparent transparent" || "right" === position && "transparent #26333b transparent transparent" || "bottom" === position && "transparent transparent #26333b transparent" || "left" === position && "transparent transparent transparent #26333b"};
+  }
+`;
+export { TooltipContainer };

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

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import UserMenu from ".";
+/**
+ * UserMenu é um componente de menu que permite ao usuário realizar ações como efetuar logout ou ajustar suas configurações pessoais.
+ */
+declare const meta: Meta<typeof UserMenu>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do UserMenu quando são passadas apenas propriedades obrigatórias.
+ */
+export declare const Default: Story;
+/**
+ * Variação padrão do UserMenu opções customizadas são passadas.
+ */
+export declare const CustomOptions: Story;
+/**
+ * Exemplo interativo do componente UserMenu para demonstrar seu comportamento e funcionalidades.
+ * ##### importante: A interatividade só está disponivel na storie do componente.
+ */
+export declare const Clickable: Story;
+/**
+ * Exemplo interativo do componente UserMenu com opções customizadas para demonstrar seu comportamento e funcionalidades.
+ * ##### importante: A interatividade só está disponivel na storie do componente.
+ */
+export declare const ClickableCustom: Story;

package/dist/components/UserMenu/UserMenu.stories.js

@@ -0,0 +1,174 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import index from "./index.js";
+import Avatar from "../Avatar/index.js";
+import { COLOR_CUSTOM_COLUMNBG, COLOR_NEUTRAL_DAY } from "@ftdata/f-tokens";
+import { Icon } from "@ftdata/f-icons";
+const meta = {
+    title: "DESIGN COMPONENTS/UserMenu",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        slug: {
+            description: "Recebe o slug da empresa para o logout."
+        },
+        translate: {
+            description: "Fun\xe7\xe3o respons\xe1vel pela tradu\xe7\xe3o dos textos do UserMenu."
+        },
+        setIsOpen: {
+            description: "Recebe o estado que controla se o menu est\xe1 aberto ou fechado.",
+            table: {
+                type: {
+                    summary: "React.Dispatch<React.SetStateAction<boolean>>"
+                }
+            }
+        }
+    }
+};
+const UserMenu_stories = meta;
+const mockTranslate = (key)=>"exit" === key ? "Sair" : "settings" === key ? "Configura\xe7\xf5es" : "Acessar outras empresas";
+const containerDecorator = (Story)=>/*#__PURE__*/ jsxs("div", {
+        style: {
+            alignItems: "center",
+            color: COLOR_NEUTRAL_DAY,
+            fontWeight: 600,
+            position: "relative",
+            background: COLOR_CUSTOM_COLUMNBG,
+            padding: "0.5rem 1rem",
+            width: "100%",
+            display: "flex",
+            justifyContent: "space-between",
+            borderRadius: "14px 14px 0 0",
+            fontSize: "0.8rem"
+        },
+        children: [
+            /*#__PURE__*/ jsx("p", {
+                children: "Container exemplo para mostrar o UserMenu"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                style: {
+                    cursor: "pointer"
+                },
+                children: /*#__PURE__*/ jsx(Avatar, {
+                    size: "large"
+                })
+            }),
+            /*#__PURE__*/ jsx(Story, {})
+        ]
+    });
+const Default = {
+    decorators: [
+        containerDecorator
+    ],
+    args: {
+        slug: "slug-da-empresa",
+        translate: mockTranslate,
+        setIsOpen: ()=>null,
+        isOpen: true
+    }
+};
+const customOptions = [
+    {
+        icon: /*#__PURE__*/ jsx(Icon, {
+            name: "bld hotel-building",
+            color: "currentColor"
+        }),
+        text: mockTranslate("access_other_companies")
+    }
+];
+const CustomOptions = {
+    decorators: [
+        containerDecorator
+    ],
+    args: {
+        slug: "slug-da-empresa",
+        translate: mockTranslate,
+        setIsOpen: ()=>null,
+        isOpen: true,
+        customOptions: customOptions
+    }
+};
+const Clickable = {
+    render: ()=>{
+        const [isOpen, setIsOpen] = useState(false);
+        return /*#__PURE__*/ jsxs("div", {
+            style: {
+                alignItems: "center",
+                color: COLOR_NEUTRAL_DAY,
+                fontWeight: 600,
+                position: "absolute",
+                background: COLOR_CUSTOM_COLUMNBG,
+                padding: "0.5rem 1rem",
+                width: "calc(100% - 2rem)",
+                display: "flex",
+                justifyContent: "space-between",
+                borderRadius: "14px 14px 0 0",
+                fontSize: "0.8rem"
+            },
+            children: [
+                /*#__PURE__*/ jsx("p", {
+                    children: "Container exemplo para mostrar o UserMenu"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    style: {
+                        cursor: "pointer"
+                    },
+                    children: /*#__PURE__*/ jsx(Avatar, {
+                        size: "large",
+                        onClick: ()=>setIsOpen(!isOpen)
+                    })
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    slug: "teste",
+                    isOpen: isOpen,
+                    setIsOpen: setIsOpen,
+                    translate: mockTranslate
+                })
+            ]
+        });
+    }
+};
+const ClickableCustom = {
+    render: ()=>{
+        const [isOpen, setIsOpen] = useState(false);
+        return /*#__PURE__*/ jsxs("div", {
+            style: {
+                alignItems: "center",
+                color: COLOR_NEUTRAL_DAY,
+                fontWeight: 600,
+                position: "absolute",
+                background: COLOR_CUSTOM_COLUMNBG,
+                padding: "0.5rem 1rem",
+                width: "calc(100% - 2rem)",
+                display: "flex",
+                justifyContent: "space-between",
+                borderRadius: "14px 14px 0 0",
+                fontSize: "0.8rem"
+            },
+            children: [
+                /*#__PURE__*/ jsx("p", {
+                    children: "Container exemplo para mostrar o UserMenu"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    style: {
+                        cursor: "pointer"
+                    },
+                    children: /*#__PURE__*/ jsx(Avatar, {
+                        size: "large",
+                        onClick: ()=>setIsOpen(!isOpen)
+                    })
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    slug: "teste",
+                    isOpen: isOpen,
+                    setIsOpen: setIsOpen,
+                    translate: mockTranslate,
+                    customOptions: customOptions
+                })
+            ]
+        });
+    }
+};
+export { Clickable, ClickableCustom, CustomOptions, Default, UserMenu_stories as default };

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

@@ -0,0 +1,19 @@
+import React, { JSX } from "react";
+export interface SelectProps {
+    value: string | number;
+    label: string;
+}
+interface UserMenu {
+    translate: (key: string) => string;
+    slug?: string;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    isOpen: boolean;
+    customOptions?: DropdownOption[] | [];
+}
+interface DropdownOption {
+    icon: JSX.Element;
+    onClick?: () => void;
+    text: string;
+}
+export default function UserMenu({ translate, slug, setIsOpen, isOpen, customOptions, }: UserMenu): import("react/jsx-runtime").JSX.Element;
+export {};