@ftdata/ui 0.0.1

package/dist/components/DoubleList/style.js

@@ -0,0 +1,92 @@
+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";
+const DoubleListContainer = styled_components.div`
+  display: flex;
+  background-color: ${COLOR_NEUTRAL_DAY};
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+`;
+const HeadingContainer = styled_components.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+
+  h3 {
+    color: ${COLOR_NEUTRAL_DUSK};
+    max-width: 60%;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1rem;
+  }
+
+  span {
+    color: ${COLOR_NEUTRAL_DARKER};
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.125rem;
+  }
+`;
+const ListsContainer = styled_components.div`
+  display: flex;
+  gap: 0.625rem;
+  width: 100%;
+
+  & > div:nth-child(1) {
+    border-right: solid 1px ${COLOR_NEUTRAL_LIGHT};
+  }
+`;
+const ListContainer = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_DAY};
+  display: flex;
+  overflow: overlay;
+  width: calc(50% - 0.313rem);
+
+  *::-webkit-scrollbar {
+    width: 0.875rem;
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-track {
+    background-color: ${COLOR_NEUTRAL_DAY};
+    background: transparent;
+    border-radius: 0 0.25rem 0.25rem 0;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: #d5d8da;
+    border-radius: 0.5rem;
+    width: 0.375rem;
+    box-sizing: border-box;
+    border: 0.25rem solid transparent;
+    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 };

package/dist/components/EmptyState/Empty.stories.d.ts

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import EmptyState from ".";
+/**
+ * EmptyStates são usados para exibir uma página em branco e informar o motivo pelo qual ela está vazia.
+ * Este componente também funciona com os atributos nativos de um HTML div element.
+ */
+declare const meta: Meta<typeof EmptyState>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do EmptyState quando apenas as propriedades obrigatórias são fornecidas.
+ */
+export declare const Default: Story;
+/**
+ * EmptyState com textos informativos orientam os usuários sobre o que está acontecendo e como eles podem interagir.
+ */
+export declare const WithText: Story;
+/**
+ * Custom images are utilized to personalize the message for the user's experience.
+ * ###### Observação: A imagem apresentada neste exemplo é utilizada apenas para fins ilustrativos e não representa necessariamente a funcionalidade ou o design final do componente.
+ */
+export declare const CustomImage: Story;
+/**
+ * EmptyState com botões possiblitando que os usuários tomem uma ação.
+ */
+export declare const Actions: Story;

package/dist/components/EmptyState/Empty.stories.js

@@ -0,0 +1,72 @@
+import index from "./index.js";
+import mailbox_bro from "../../assets/svg/mailbox-bro.js";
+const meta = {
+    title: "DESIGN COMPONENTS/EmptyState",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        image: {
+            description: "Define a imagem personalizada do EmptySate"
+        },
+        title: {
+            description: "Define o t\xedtulo do EmptySate."
+        },
+        primaryLabel: {
+            description: "Define o r\xf3tulo do bot\xe3o prim\xe1rio do EmptyState."
+        },
+        onPrimaryClick: {
+            description: "Define a fun\xe7\xe3o de callback para o clique do bot\xe3o prim\xe1rio do EmptyState."
+        },
+        secondaryLabel: {
+            description: "Define o r\xf3tulo do bot\xe3o secund\xe1rio do EmptyState."
+        },
+        onSecondaryClick: {
+            description: "Define a fun\xe7\xe3o de callback para o clique do bot\xe3o secund\xe1rio do EmptyState."
+        },
+        children: {
+            control: {
+                type: "text"
+            },
+            description: "Define o conte\xfado que ser\xe1 exibido ao usu\xe1rio, geralmente um texto.",
+            table: {
+                type: {
+                    summary: "string | ReactNode"
+                }
+            }
+        }
+    }
+};
+const Empty_stories = meta;
+const Default = {};
+const WithText = {
+    args: {
+        image: "",
+        title: "Com T\xedtulo e Texto",
+        primaryLabel: "",
+        secondaryLabel: "",
+        children: "Esta mensagem explica por que n\xe3o h\xe1 conte\xfado nesta p\xe1gina e sugere a\xe7\xf5es que voc\xea pode realizar. "
+    }
+};
+const CustomImage = {
+    args: {
+        image: mailbox_bro,
+        title: "Imagem Personalizada",
+        children: "Esta mensagem explica por que n\xe3o h\xe1 conte\xfado nesta p\xe1gina e sugere a\xe7\xf5es que voc\xea pode realizar. "
+    }
+};
+const Actions = {
+    args: {
+        title: "A\xe7\xf5es",
+        primaryLabel: "A\xe7\xe3o Prim\xe1ria",
+        onPrimaryClick: ()=>"click - Primary Button clicado",
+        secondaryLabel: "A\xe7\xe3o Secund\xe1ria",
+        onSecondaryClick: ()=>"click - Secondary Button clicado",
+        children: "Esta mensagem explica por que n\xe3o h\xe1 conte\xfado nesta p\xe1gina e sugere a\xe7\xf5es que voc\xea pode realizar. "
+    }
+};
+export { Actions, CustomImage, Default, WithText, Empty_stories as default };

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

@@ -0,0 +1,10 @@
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    image?: string;
+    title?: string;
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    onPrimaryClick?: () => void;
+    onSecondaryClick?: () => void;
+}
+declare const EmptyState: React.FC<Props>;
+export default EmptyState;

package/dist/components/EmptyState/index.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Image, Wrapper } from "./styles.js";
+import EmptyPage from "../../assets/EmptyPage.js";
+import { Paragraph, Title } from "../Text/index.js";
+import Button from "../Button/index.js";
+const EmptyState_EmptyState = ({ onPrimaryClick, onSecondaryClick, primaryLabel, secondaryLabel, children, image, title })=>{
+    console.log({
+        onPrimaryClick,
+        onSecondaryClick,
+        primaryLabel,
+        secondaryLabel,
+        children,
+        image,
+        title
+    });
+    return /*#__PURE__*/ jsxs(Wrapper, {
+        children: [
+            image ? /*#__PURE__*/ jsx(Image, {
+                alt: `${title} image`,
+                src: image
+            }) : /*#__PURE__*/ jsx(EmptyPage, {}),
+            title && /*#__PURE__*/ jsx(Title, {
+                size: "section",
+                children: title
+            }),
+            children && /*#__PURE__*/ jsx(Paragraph, {
+                size: "sm",
+                children: children
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                children: [
+                    primaryLabel && onPrimaryClick && /*#__PURE__*/ jsx(Button, {
+                        variant: "primary",
+                        onClick: onPrimaryClick,
+                        children: primaryLabel
+                    }),
+                    secondaryLabel && onSecondaryClick && /*#__PURE__*/ jsx(Button, {
+                        variant: "secondary",
+                        onClick: onSecondaryClick,
+                        children: secondaryLabel
+                    })
+                ]
+            })
+        ]
+    });
+};
+const EmptyState = EmptyState_EmptyState;
+export { EmptyState as default };

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

@@ -0,0 +1,3 @@
+import type { ImgHTMLAttributes } from "react";
+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 Image: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, ImgHTMLAttributes<HTMLImageElement>>> & string;

package/dist/components/EmptyState/styles.js

@@ -0,0 +1,39 @@
+import styled_components from "styled-components";
+import { SPACING_INLINE_02, SPACING_STACK_03, SPACING_STACK_05 } from "@ftdata/f-tokens";
+const Wrapper = styled_components.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+  width: 100%;
+
+  svg,
+  img {
+    height: auto;
+    margin-bottom: ${SPACING_STACK_05};
+    max-width: 240px;
+    width: 100%;
+  }
+
+  div {
+    display: flex;
+
+    button {
+      margin: 0 ${SPACING_INLINE_02};
+    }
+  }
+
+  p {
+    margin-bottom: ${SPACING_STACK_05};
+    margin-top: ${SPACING_STACK_03};
+    max-width: 240px;
+  }
+`;
+const Image = styled_components.img`
+  height: auto;
+  max-width: 240px;
+  width: 100%;
+`;
+export { Image, Wrapper };

package/dist/components/Grid/Column/Column.stories.d.ts

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Column from ".";
+/**
+ * O componente Column é usado para definir colunas dentro de uma Row dentro de um Container.
+ * Este componente também funciona com os atributos nativos de um HTML div element.
+ * ###### importante: Estilos como cores e linhas não são aplicados por padrão; eles foram usados apenas para melhor visualização.
+ */
+declare const meta: Meta<typeof Column>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do Column quando apenas as propriedades obrigatórias são fornecidas.
+ */
+export declare const Default: Story;
+/**
+ * Exemplo simples do componente.
+ */
+export declare const FirstExample: Story;
+/**
+ * Exemplo simples do componente.
+ */
+export declare const SecondExample: Story;
+/**
+ * Exemplo com as variações de tamanho padrão.
+ */
+export declare const Sizes: Story;

package/dist/components/Grid/Column/Column.stories.js

@@ -0,0 +1,335 @@
+import { jsx } from "react/jsx-runtime";
+import { Element } from "../utils.js";
+import index from "./index.js";
+const sizes = [
+    1,
+    2,
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    10,
+    11,
+    12
+];
+const Column_stories_element = /*#__PURE__*/ jsx(Element, {
+    style: {
+        backgroundColor: "#FF5656",
+        fontFamily: "sans-serif",
+        border: "none",
+        color: "#f5f5f5",
+        fontWeight: "800",
+        margin: "0.5rem"
+    },
+    children: "Element"
+});
+const firstExample = [
+    Column_stories_element,
+    Column_stories_element
+];
+const secondExample = [
+    Column_stories_element,
+    Column_stories_element,
+    Column_stories_element,
+    Column_stories_element,
+    Column_stories_element,
+    Column_stories_element
+];
+const meta = {
+    title: "DESIGN COMPONENTS/Grid/Column",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    decorators: [
+        (Story)=>/*#__PURE__*/ jsx("div", {
+                style: {
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                },
+                children: /*#__PURE__*/ jsx(Story, {})
+            })
+    ],
+    argTypes: {
+        style: {
+            table: {
+                disable: true
+            }
+        },
+        children: {
+            control: {
+                type: "select"
+            },
+            description: "Recebe o conte\xfado que ser\xe1 renderizado dentro do Column.",
+            mapping: {
+                "Default example": Column_stories_element,
+                "First Example": firstExample,
+                "Second Example": secondExample
+            },
+            options: [
+                "Default example",
+                "First Example",
+                "Second Example"
+            ],
+            table: {
+                type: {
+                    summary: "ReactNode"
+                }
+            }
+        },
+        lg: {
+            description: "Define o tamanho do Column para dispositivos de desktop (acima de 800px de largura).",
+            mapping: {
+                "Default lg": null
+            },
+            options: [
+                "Default lg",
+                1,
+                2,
+                3,
+                4,
+                5,
+                6,
+                7,
+                8,
+                9,
+                10,
+                11,
+                12
+            ],
+            table: {
+                type: {
+                    summary: "number(1...12)"
+                }
+            }
+        },
+        md: {
+            description: "Define o tamanho do Column para dispositivos tablet (abaixo de 800px de largura).",
+            mapping: {
+                "Default md": null
+            },
+            options: [
+                "Default md",
+                1,
+                2,
+                3,
+                4,
+                5,
+                6,
+                7,
+                8
+            ],
+            table: {
+                type: {
+                    summary: "number(1...8)"
+                }
+            }
+        },
+        sm: {
+            control: {
+                type: "select"
+            },
+            description: "Define o tamanho do Column para dispositivos m\xf3veis (abaixo de 415px de largura).",
+            mapping: {
+                "Default sm": null
+            },
+            options: [
+                "Default sm",
+                1,
+                2,
+                3,
+                4
+            ],
+            table: {
+                type: {
+                    summary: "number(1...4)"
+                }
+            }
+        },
+        offset: {
+            control: {
+                type: "select"
+            },
+            description: "Define o deslocamento do Column para a esquerda, em n\xfamero de colunas.",
+            mapping: {
+                "Default offset": null
+            },
+            options: [
+                "Default offset",
+                1,
+                2,
+                3,
+                4,
+                5,
+                6,
+                7,
+                8,
+                9,
+                10,
+                11,
+                12
+            ],
+            table: {
+                type: {
+                    summary: "number(1...12)"
+                }
+            }
+        },
+        "offset-lg": {
+            description: "Define o 'offset' para dispositivos desktop.",
+            mapping: {
+                "Default lg": null
+            },
+            options: [
+                "Default lg",
+                1,
+                2,
+                3,
+                4,
+                5,
+                6,
+                7,
+                8,
+                9,
+                10,
+                11,
+                12
+            ],
+            table: {
+                type: {
+                    summary: "number(1...12)"
+                }
+            }
+        },
+        "offset-md": {
+            description: "Define o 'offset' para tablets.",
+            mapping: {
+                "Default md": null
+            },
+            options: [
+                "Default md",
+                1,
+                2,
+                3,
+                4,
+                5,
+                6,
+                7,
+                8
+            ],
+            table: {
+                type: {
+                    summary: "number(1...8)"
+                }
+            }
+        },
+        "offset-sm": {
+            control: {
+                type: "select"
+            },
+            description: "Define o 'offset' para dispositivos m\xf3veis.",
+            mapping: {
+                "Default sm": null
+            },
+            options: [
+                "Default sm",
+                1,
+                2,
+                3,
+                4
+            ],
+            table: {
+                type: {
+                    summary: "number(1...4)"
+                }
+            }
+        },
+        order: {
+            description: "Define a posi\xe7\xe3o de ordena\xe7\xe3o do Column, usada como refer\xeancia para outras Colums."
+        },
+        "order-lg": {
+            description: "Define o 'order' para dispositivos desktop."
+        },
+        "order-md": {
+            description: "Define o 'order' para tablets."
+        },
+        "order-sm": {
+            description: "Define o 'order' para dispositivos m\xf3veis."
+        }
+    }
+};
+const Column_stories = meta;
+const Default = {
+    args: {
+        children: Column_stories_element,
+        style: {
+            border: "4px dashed #FF5656",
+            borderRadius: "10px"
+        }
+    }
+};
+const FirstExample = {
+    args: {
+        children: "First Example",
+        style: {
+            border: "4px dashed #FF5656",
+            borderRadius: "10px"
+        }
+    }
+};
+const SecondExample = {
+    args: {
+        children: "Second Example",
+        style: {
+            border: "4px dashed #FF5656",
+            borderRadius: "10px"
+        }
+    }
+};
+const Sizes = {
+    render: ()=>/*#__PURE__*/ jsx("div", {
+            style: {
+                display: "flex",
+                justifyContent: "center",
+                gap: "2.5rem",
+                width: "100%",
+                flexDirection: "column-reverse"
+            },
+            children: sizes.map((size)=>/*#__PURE__*/ jsx(index, {
+                    lg: size,
+                    style: {
+                        border: "4px dashed #FF5656",
+                        borderRadius: "10px"
+                    },
+                    children: Column_stories_element
+                }, size))
+        }),
+    argTypes: {
+        children: {
+            table: {
+                disable: true
+            }
+        },
+        "offset-sm": {
+            table: {
+                disable: true
+            }
+        },
+        offset: {
+            table: {
+                disable: true
+            }
+        },
+        sm: {
+            table: {
+                disable: true
+            }
+        }
+    }
+};
+export { Default, FirstExample, SecondExample, Sizes, Column_stories as default };

package/dist/components/Grid/Column/index.d.ts

@@ -0,0 +1,15 @@
+interface ColumnProps extends React.HTMLAttributes<HTMLDivElement> {
+    lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    md?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    sm?: 1 | 2 | 3 | 4;
+    offset?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    "offset-lg"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    "offset-md"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    "offset-sm"?: 1 | 2 | 3 | 4;
+    order?: number;
+    "order-lg"?: number;
+    "order-md"?: number;
+    "order-sm"?: number;
+}
+export default function Column({ ...rest }: ColumnProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Grid/Column/index.js

@@ -0,0 +1,10 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Column } from "../index.js";
+function Column_Column({ ...rest }) {
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Column, {
+            ...rest
+        })
+    });
+}
+export { Column_Column as default };

package/dist/components/Grid/Container/Container.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Container from ".";
+/**
+ * O Container é o elemento de nível mais alto no sistema de Grid, usado para encapsular Rows e Columns.
+ * Este componente também funciona com os atributos nativos de um HTML div element.
+ * ###### importante: Estilos como cores e linhas não são aplicados por padrão; eles foram usados apenas para melhor visualização.
+ */
+declare const meta: Meta<typeof Container>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;