@ftdata/ui 0.0.1

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Breadcrumb from ".";
+/**
+ * Breadcrumbs são usados para mostrar os níveis de navegação e sua hierarquia.
+ * Este componente também funciona com os atributos nativos de um HTML div element.
+ */
+declare const meta: Meta<typeof Breadcrumb>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do breadcrumb.
+ */
+export declare const Default: Story;
+/**
+ * Variação do breadcrumb quando a propriedade de cor é passada.
+ */
+export declare const Color: Story;

package/dist/components/Breadcrumb/Breadcrumb.stories.js

@@ -0,0 +1,51 @@
+import index from "./index.js";
+const defaultItems = [
+    {
+        label: "Home",
+        redirect: ()=>null
+    },
+    {
+        label: "Configura\xe7\xf5es",
+        redirect: ()=>null
+    },
+    {
+        label: "Privacidade e Seguran\xe7a",
+        redirect: ()=>null
+    }
+];
+const meta = {
+    title: "UI/Breadcrumb",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        items: {
+            description: "Define o conte\xfado do breadcrumb e a fun\xe7\xe3o de callback para redirecionamento de cada n\xedvel.",
+            control: {
+                type: "object"
+            },
+            table: {
+                type: {
+                    summary: " BreadcrumbNode - { label: string; redirect: function }[]"
+                }
+            }
+        }
+    }
+};
+const Breadcrumb_stories = meta;
+const Default = {
+    args: {
+        items: defaultItems
+    }
+};
+const Color = {
+    args: {
+        items: defaultItems,
+        color: "var(--color-brand)"
+    }
+};
+export { Color, Default, Breadcrumb_stories as default };

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

@@ -0,0 +1,10 @@
+export type BreadcrumbNode = {
+    label: string;
+    redirect: () => void;
+};
+type BreadcrumbProps = {
+    items: BreadcrumbNode[];
+    color?: string;
+};
+export default function Breadcrumb({ items, color }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Breadcrumb/index.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BreadcrumbContainer, Item, LastItem, Wrapper, WrapperLast } from "./styles.js";
+function Breadcrumb({ items, color }) {
+    const lastIndex = items.length - 1;
+    const lastItem = items[lastIndex];
+    const remainingItems = items.slice(0, lastIndex);
+    return /*#__PURE__*/ jsxs(BreadcrumbContainer, {
+        children: [
+            remainingItems.map((item, idx)=>/*#__PURE__*/ jsxs(Wrapper, {
+                    onClick: item.redirect,
+                    children: [
+                        /*#__PURE__*/ jsx(Item, {
+                            color: color,
+                            children: item.label
+                        }),
+                        /*#__PURE__*/ jsx(Item, {
+                            className: "breadcrumb-dash",
+                            color: color,
+                            onClick: (event)=>event.stopPropagation(),
+                            children: "/"
+                        })
+                    ]
+                }, `__${item.label}${idx}`)),
+            /*#__PURE__*/ jsx(WrapperLast, {
+                onClick: ()=>null,
+                children: /*#__PURE__*/ jsx(LastItem, {
+                    color: color,
+                    children: lastItem.label
+                })
+            })
+        ]
+    });
+}
+export { Breadcrumb as default };

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

@@ -0,0 +1,9 @@
+export declare const BreadcrumbContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+interface DefaultItemProps {
+    color?: string;
+}
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const WrapperLast: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
+export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "color"> & DefaultItemProps, never>> & string;
+export declare const LastItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "color"> & DefaultItemProps, never>> & string;
+export {};

package/dist/components/Breadcrumb/styles.js

@@ -0,0 +1,43 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DUSK, FONT_FAMILY_01, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
+const BreadcrumbContainer = styled_components.div`
+  display: flex;
+  align-items: center;
+  height: 2rem;
+`;
+const DefaultItem = styled_components.span`
+  font-family: ${FONT_FAMILY_01};
+  font-weight: ${FONT_WEIGHT_MEDIUM};
+  line-height: 1.125rem;
+  font-size: 0.75rem;
+`;
+const Wrapper = styled_components.div`
+  cursor: pointer;
+  display: flex;
+
+  span {
+    white-space: nowrap;
+    display: flex;
+  }
+
+  .breadcrumb-dash {
+    cursor: default;
+    padding: 0 0.5rem;
+  }
+`;
+const WrapperLast = styled_components(Wrapper)`
+  cursor: text;
+`;
+const Item = styled_components(DefaultItem)`
+  color: ${({ color })=>color ? color : COLOR_NEUTRAL_DARKER};
+  transition: 0.2s ease color;
+  font-weight: 500;
+  opacity: ${({ color })=>color ? "0.8" : "1"};
+`;
+const LastItem = styled_components(DefaultItem)`
+  color: ${({ color })=>color ? color : COLOR_NEUTRAL_DUSK};
+  transition: 0.2s ease color;
+  font-size: 12px;
+  font-weight: 600;
+`;
+export { BreadcrumbContainer, Item, LastItem, Wrapper, WrapperLast };

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

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Button from ".";
+/**
+ * Botões são usados para disparar ações dentro da aplicação.
+ * Este componente também funciona com os atributos nativos de um HTML button element.
+ */
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do Button quando apenas as propriedades obrigatórias são fornecidas.
+ */
+export declare const Default: Story;
+/**
+ * Variante 'primary' do Button: Essa configuração altera o esquema de cores para destacar o Button como a principal chamada para ação.
+ * Botões primários são usados para chamar atenção e indicar a ação mais importante em uma página, incentivando os usuários a clicar.
+ */
+export declare const Primary: Story;
+/**
+ * Variante 'secondary' do Button: Essa configuração modifica o esquema de cores para identificar o Button como uma chamada para ação secundária.
+ * Botões secundários são usados para sinalizar a segunda ação mais importante em uma página,
+ * oferecendo uma opção alternativa aos usuários sem ofuscar a ação primária.
+ */
+export declare const Secondary: Story;
+/**
+ * Variante 'ghost' do Button: Geralmente utilizada para criar um ponto focal sem sobrecarregar o layout, mantendo a interface limpa e simples.
+ */
+export declare const Ghost: Story;
+/**
+ * Variante do Button quando está desativado para o usuário.
+ */
+export declare const Disabled: Story;
+/**
+ * Variante 'wide' do Button: Essa configuração habilita que o Button ocupe toda a largura disponível do seu componente pai.
+ */
+export declare const Wide: Story;
+/**
+ * Variante do Button com ícone personalizado à direita.
+ * ###### Observação: O ícone apresentado neste exemplo é utilizado apenas para fins ilustrativos e não representa necessariamente a funcionalidade ou o design final do componente.
+ */
+export declare const RightIcon: Story;
+/**
+ * Variante do Button com ícone personalizado à esquerda.
+ * ###### Observação: O ícone apresentado neste exemplo é utilizado apenas para fins ilustrativos e não representa necessariamente a funcionalidade ou o design final do componente.
+ */
+export declare const LeftIcon: Story;
+/**
+ * Variante do Button em carregamento.
+ */
+export declare const Loading: Story;
+/**
+ * Variante do Button com múltiplas ações.
+ */
+export declare const Select: Story;
+/**
+ * Essa variante define um tamanho menor para o Button, tornando-o ideal para espaços limitados.
+ */
+export declare const Small: Story;

package/dist/components/Button/Button.stories.js

@@ -0,0 +1,284 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import index from "./index.js";
+import { SelectButton } from "./styles.js";
+import { Icon } from "@ftdata/f-icons";
+const meta = {
+    title: "DESIGN COMPONENTS/Button",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered",
+        actions: {
+            handles: [
+                "mouseover",
+                "click .btn"
+            ]
+        }
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ jsx("div", {
+                style: {
+                    width: "300px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                },
+                children: /*#__PURE__*/ jsx(Story, {})
+            })
+    ],
+    args: {
+        onClick: ()=>"click - clicou no bot\xe3o"
+    },
+    argTypes: {
+        children: {
+            control: {
+                type: "text"
+            },
+            description: `Aceita conte\xfado personalizado dentro do Button, como texto, \xedcones ou outros elementos visuais. 
+                          Especifica o que ser\xe1 exibido ao usu\xe1rio no Button.`,
+            mapping: {
+                text: "label"
+            },
+            table: {
+                type: {
+                    summary: "ReactNode"
+                }
+            },
+            options: [
+                "text"
+            ]
+        },
+        CustomDropdown: {
+            control: {
+                type: "select"
+            },
+            description: "Children personalizado para o dropdown, quando a propriedade 'select' \xe9 verdadeira.",
+            options: [
+                "none",
+                "text"
+            ],
+            mapping: {
+                none: null,
+                text: ()=>/*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(SelectButton, {
+                                onClick: ()=>console.log("action 1"),
+                                children: "Action 1"
+                            }, 1),
+                            /*#__PURE__*/ jsx(SelectButton, {
+                                onClick: ()=>console.log("action 2"),
+                                children: "Action 2"
+                            }, 2)
+                        ]
+                    })
+            },
+            table: {
+                type: {
+                    summary: "ReactFunctionComponent"
+                }
+            }
+        },
+        variant: {
+            control: "inline-radio",
+            description: "Define a varia\xe7\xe3o de tema de de cores do Button.",
+            table: {
+                type: {
+                    summary: '"primary" | "secondary" | "ghost"'
+                }
+            }
+        },
+        disabled: {
+            description: "Define se o Button est\xe1 desabilitado.",
+            table: {
+                defaultValue: {
+                    summary: "false"
+                }
+            }
+        },
+        onClick: {
+            control: false,
+            description: "Aceita uma fun\xe7\xe3o que \xe9 disparada quando o Button \xe9 clicado.",
+            table: {
+                type: {
+                    summary: "() => any"
+                }
+            }
+        },
+        wide: {
+            description: "Faz com que o Button ocupe toda a largura dispon\xedvel dentro do seu cont\xeainer pai.",
+            table: {
+                defaultValue: {
+                    summary: "false"
+                }
+            }
+        },
+        LeftIcon: {
+            control: {
+                type: "select"
+            },
+            description: "Define o \xedcone do Button \xe0 esquerda.",
+            mapping: {
+                none: null,
+                "example 1": /*#__PURE__*/ jsx(Icon, {
+                    name: "nav pin-location"
+                }),
+                "example 2": /*#__PURE__*/ jsx(Icon, {
+                    name: "arw caret-right"
+                })
+            },
+            options: [
+                "none",
+                "example 1",
+                "example 2"
+            ]
+        },
+        RightIcon: {
+            control: {
+                type: "select"
+            },
+            description: "Define o \xedcone do Button \xe0 direita. ArrowDown Icon \xe9 definido por padr\xe3o, caso o dropdown menu estiver habilitado.",
+            mapping: {
+                none: null,
+                "example 1": /*#__PURE__*/ jsx(Icon, {
+                    name: "nav pin-location"
+                }),
+                "example 2": /*#__PURE__*/ jsx(Icon, {
+                    name: "arw caret-right"
+                })
+            },
+            options: [
+                "none",
+                "example 1",
+                "example 2"
+            ]
+        },
+        loading: {
+            description: "Define se o Button est\xe1 carregando."
+        },
+        options: {
+            description: "Define os bot\xf5es do dropdown menu."
+        },
+        select: {
+            description: "Define se o Button \xe9 um bot\xe3o de dropdown menu."
+        },
+        small: {
+            description: "Reduz o tamanho do Button, incluindo o texto e o \xedcone, caso estejam presentes."
+        },
+        type: {
+            control: "inline-radio",
+            description: "Define o tipo do Button.",
+            table: {
+                type: {
+                    summary: '"button" | "submit" | "reset"'
+                }
+            }
+        }
+    }
+};
+const Button_stories = meta;
+const Default = {
+    args: {
+        variant: "primary",
+        children: "Default"
+    }
+};
+const Primary = {
+    args: {
+        variant: "primary",
+        children: "Primary"
+    }
+};
+const Secondary = {
+    args: {
+        variant: "secondary",
+        children: "Secondary"
+    }
+};
+const Ghost = {
+    args: {
+        variant: "ghost",
+        children: "Ghost"
+    }
+};
+const Disabled = {
+    args: {
+        variant: "primary",
+        children: "Disabled",
+        disabled: true
+    }
+};
+const Wide = {
+    args: {
+        variant: "primary",
+        children: "Wide",
+        wide: true
+    }
+};
+const RightIcon = {
+    args: {
+        variant: "primary",
+        children: "Right Icon",
+        RightIcon: ()=>/*#__PURE__*/ jsx(Icon, {
+                name: "nav pin-location"
+            })
+    }
+};
+const LeftIcon = {
+    args: {
+        variant: "primary",
+        children: "Left Icon",
+        LeftIcon: ()=>/*#__PURE__*/ jsx(Icon, {
+                name: "nav pin-location"
+            })
+    }
+};
+const Loading = {
+    args: {
+        variant: "primary",
+        children: "Loading",
+        loading: true
+    }
+};
+const Select = {
+    args: {
+        variant: "primary",
+        children: "Select",
+        options: [
+            {
+                label: "A\xe7\xe3o 1",
+                action: ()=>"click - clicou na a\xe7\xe3o 1"
+            },
+            {
+                label: "A\xe7\xe3o 2",
+                action: ()=>"click - clicou na a\xe7\xe3o 2"
+            },
+            {
+                label: "A\xe7\xe3o 3",
+                action: ()=>"click - clicou na a\xe7\xe3o 3"
+            },
+            {
+                label: "A\xe7\xe3o 4",
+                action: ()=>"click - clicou na a\xe7\xe3o 4"
+            }
+        ],
+        select: true
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ jsx("div", {
+                style: {
+                    height: "200px"
+                },
+                children: /*#__PURE__*/ jsx(Story, {})
+            })
+    ]
+};
+const Small = {
+    args: {
+        variant: "primary",
+        children: "Small",
+        small: true
+    }
+};
+export { Default, Disabled, Ghost, LeftIcon, Loading, Primary, RightIcon, Secondary, Select, Small, Wide, Button_stories as default };

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

@@ -0,0 +1,26 @@
+import { MouseEventHandler as ReactMouseEventHandler, JSX } from "react";
+type DropdownOption = {
+    label: string;
+    action: ReactMouseEventHandler<HTMLDivElement>;
+};
+interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    CustomDropdown?: () => JSX.Element;
+    variant: "primary" | "secondary" | "ghost";
+    wide?: boolean;
+    disabled?: boolean;
+    LeftIcon?: React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
+        title?: string | undefined;
+    }>;
+    RightIcon?: React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
+        title?: string | undefined;
+    }>;
+    loading?: boolean;
+    onClick?: ReactMouseEventHandler<HTMLButtonElement>;
+    options?: Array<DropdownOption>;
+    select?: boolean;
+    small?: boolean;
+    type?: "button" | "submit" | "reset";
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/Button/index.js

@@ -0,0 +1,69 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { ButtonWrapper, Dropdown, SelectButton, Spinner } from "./styles.js";
+import { Icon } from "@ftdata/f-icons";
+const Button = ({ children, CustomDropdown, disabled, variant, wide, LeftIcon, RightIcon, loading, onClick: buttonAction, options, select, small, type, ...rest })=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const buttonRef = useRef(null);
+    useLayoutEffect(()=>{
+        const handleClickOutside = (e)=>{
+            if (buttonRef.current && !buttonRef.current.contains(e.target)) setIsOpen(false);
+        };
+        document.addEventListener("click", handleClickOutside);
+        return ()=>{
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, []);
+    const buttonHandler = (e)=>{
+        if (disabled || loading) return;
+        if (select) return void setIsOpen(!isOpen);
+        if (buttonAction) buttonAction(e);
+    };
+    const LoadingTheme = {
+        primary: "dark",
+        secondary: "light",
+        ghost: "light"
+    };
+    return /*#__PURE__*/ jsxs(ButtonWrapper, {
+        disabled: disabled,
+        open: isOpen,
+        onClick: buttonHandler,
+        ref: buttonRef,
+        small: small,
+        variant: variant,
+        wide: wide,
+        type: type,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    LeftIcon && /*#__PURE__*/ jsx(LeftIcon, {
+                        viewBox: "0 0 24 24"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: children
+                    }),
+                    select && !RightIcon && /*#__PURE__*/ jsx(Icon, {
+                        name: "arw caret-down"
+                    }),
+                    RightIcon && /*#__PURE__*/ jsx(RightIcon, {}),
+                    select && isOpen && !CustomDropdown && /*#__PURE__*/ jsx(Dropdown, {
+                        children: options && options.map(({ action, label }, index)=>/*#__PURE__*/ jsx(SelectButton, {
+                                onClick: action,
+                                children: label
+                            }, index))
+                    }),
+                    select && isOpen && CustomDropdown && /*#__PURE__*/ jsx(Dropdown, {
+                        children: /*#__PURE__*/ jsx(CustomDropdown, {})
+                    })
+                ]
+            }),
+            loading && /*#__PURE__*/ jsx(Spinner, {
+                size: "sm",
+                variant: LoadingTheme[variant]
+            })
+        ]
+    });
+};
+const components_Button = Button;
+export { components_Button as default };

package/dist/components/Button/modifiers.d.ts

@@ -0,0 +1,8 @@
+export type ButtonModifiersType = {
+    primary: string;
+    secondary: string;
+    ghost: string;
+    wide: string;
+    small: string;
+};
+export declare const BUTTON_MODIFIERS: ButtonModifiersType;

package/dist/components/Button/modifiers.js

@@ -0,0 +1,41 @@
+import { COLOR_BRAND_MEDIUM, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, FONT_SIZE_SM, IC_SIZE_SMALL, LINE_HEIGHT_TIGHT, OPACITY_LEVEL_MEDIUM } from "@ftdata/f-tokens";
+const BUTTON_MODIFIERS = {
+    primary: `
+      background-color: ${COLOR_BRAND_MEDIUM};
+      color: ${COLOR_NEUTRAL_DAY};
+
+      &:disabled {
+        opacity: ${OPACITY_LEVEL_MEDIUM};
+      }
+    `,
+    secondary: `
+      background-color: ${COLOR_NEUTRAL_LIGHTER};
+      color: ${COLOR_NEUTRAL_DARKER};
+
+      &:disabled {
+        color: ${COLOR_NEUTRAL_MEDIUM};
+      }
+    `,
+    ghost: `
+      background-color: transparent;
+      color: ${COLOR_NEUTRAL_DARKER};
+
+      &:disabled {
+        color: ${COLOR_NEUTRAL_MEDIUM};
+      }
+    `,
+    wide: `
+      flex: 1;
+      width: 100%;
+    `,
+    small: `
+      font-size: ${FONT_SIZE_SM};
+      line-height: ${LINE_HEIGHT_TIGHT};
+      
+      svg {
+        height: ${IC_SIZE_SMALL};
+        width: ${IC_SIZE_SMALL};
+    }
+    `
+};
+export { BUTTON_MODIFIERS };

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

@@ -0,0 +1,25 @@
+import type { MouseEventHandler } from "react";
+type ButtonProps = {
+    variant: "primary" | "secondary" | "ghost";
+    disabled?: boolean;
+    open?: boolean;
+    wide?: boolean;
+    small?: boolean;
+};
+export declare const ButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>, ButtonProps>> & string;
+export declare const Dropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type SelectButtonProps = {
+    onClick: MouseEventHandler<HTMLDivElement>;
+};
+export declare const SelectButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, SelectButtonProps>> & string;
+type SpinnerProps = {
+    variant: string;
+};
+export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof {
+    variant: "dark" | "light";
+    size: "sm" | "md" | "lg" | "xl";
+}> & {
+    variant: "dark" | "light";
+    size: "sm" | "md" | "lg" | "xl";
+} & import("react").HTMLAttributes<HTMLDivElement>, SpinnerProps>> & string;
+export {};