@ftdata/ui 0.0.1

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

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Column, Row } from "../index.js";
+import { Element } from "../utils.js";
+import index from "./index.js";
+const Container_stories_element = /*#__PURE__*/ jsx(Element, {
+    style: {
+        backgroundColor: "#FF5656",
+        fontFamily: "sans-serif",
+        border: "none",
+        color: "#f5f5f5",
+        fontWeight: "800"
+    },
+    children: "Element"
+});
+const example0 = /*#__PURE__*/ jsx(Row, {
+    justify: "space-between",
+    children: /*#__PURE__*/ jsx(Column, {
+        lg: 12,
+        children: Container_stories_element
+    })
+});
+const example1 = /*#__PURE__*/ jsxs(Row, {
+    justify: "space-between",
+    children: [
+        /*#__PURE__*/ jsx(Column, {
+            lg: 10,
+            children: Container_stories_element
+        }),
+        /*#__PURE__*/ jsx(Column, {
+            lg: 2,
+            children: Container_stories_element
+        }),
+        /*#__PURE__*/ jsx(Column, {
+            lg: 2,
+            children: Container_stories_element
+        })
+    ]
+});
+const example2 = /*#__PURE__*/ jsxs(Row, {
+    children: [
+        /*#__PURE__*/ jsx(Column, {
+            lg: 6,
+            children: Container_stories_element
+        }),
+        /*#__PURE__*/ jsx(Column, {
+            children: Container_stories_element
+        }),
+        /*#__PURE__*/ jsx(Column, {
+            children: Container_stories_element
+        })
+    ]
+});
+const meta = {
+    title: "DESIGN COMPONENTS/Grid/Container",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        fluid: {
+            control: {
+                type: "boolean"
+            },
+            description: "Define seo Container possui largura de 100%.",
+            table: {
+                type: {
+                    summary: "boolean"
+                },
+                defaultValue: {
+                    summary: "false"
+                }
+            }
+        },
+        children: {
+            control: {
+                type: "select"
+            },
+            description: "Define o conte\xfado que ser\xe1 exibido dentro do Container.",
+            mapping: {
+                "deafult example": example0,
+                "example 1": example1,
+                "example 2": example2
+            },
+            options: [
+                "deafult example",
+                "example 1",
+                "example 2"
+            ],
+            table: {
+                type: {
+                    summary: "ReactNode"
+                }
+            }
+        }
+    }
+};
+const Container_stories = meta;
+const Default = {
+    args: {
+        children: example0,
+        style: {
+            border: "4px dashed #FF5656",
+            borderRadius: "10px"
+        }
+    },
+    argTypes: {
+        style: {
+            table: {
+                disable: true
+            }
+        }
+    }
+};
+export { Default, Container_stories as default };

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    fluid: boolean;
+}
+export default function Container({ fluid, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Row from ".";
+/**
+ * O componente Row é usado para organizar os Columns 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 Row>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do Row quando apenas as propriedades obrigatórias são fornecidas.
+ */
+export declare const Default: Story;
+/**
+ *  Exemplo simples da usabilidade do componente.
+ */
+export declare const FirstExample: Story;
+/**
+ *  Exemplo simples da usabilidade do componente.
+ */
+export declare const SecondExample: Story;

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

@@ -0,0 +1,248 @@
+import { jsx } from "react/jsx-runtime";
+import { Element } from "../utils.js";
+import index from "./index.js";
+import { Column } from "../index.js";
+const Row_stories_element = /*#__PURE__*/ jsx(Element, {
+    style: {
+        backgroundColor: "#FF5656",
+        fontFamily: "sans-serif",
+        border: "none",
+        color: "#f5f5f5",
+        fontWeight: "800"
+    },
+    children: "Element"
+});
+const defautlExample = /*#__PURE__*/ jsx(Column, {
+    lg: 4,
+    children: Row_stories_element
+});
+const firstExample = [
+    /*#__PURE__*/ jsx(Column, {
+        lg: 10,
+        children: Row_stories_element
+    }, 1),
+    /*#__PURE__*/ jsx(Column, {
+        lg: 2,
+        children: Row_stories_element
+    }, 2),
+    /*#__PURE__*/ jsx(Column, {
+        lg: 6,
+        children: Row_stories_element
+    }, 3)
+];
+const secondExample = [
+    /*#__PURE__*/ jsx(Column, {
+        lg: 11,
+        children: Row_stories_element
+    }, 1),
+    /*#__PURE__*/ jsx(Column, {
+        lg: 8,
+        children: Row_stories_element
+    }, 2),
+    /*#__PURE__*/ jsx(Column, {
+        lg: 5,
+        children: Row_stories_element
+    }, 3),
+    /*#__PURE__*/ jsx(Column, {
+        lg: 5,
+        children: Row_stories_element
+    }, 4)
+];
+const sumaryJustifyTypes = {
+    summary: '"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "inherit"'
+};
+const sumaryAlignTypes = {
+    summary: '"stretch" | "flex-start" | "flex-end" | "center" | "baseline"'
+};
+const sumaryDirectionTypes = {
+    summary: '"stretch" | "flex-start" | "flex-end" | "center" | "baseline"'
+};
+const meta = {
+    title: "DESIGN COMPONENTS/Grid/Row",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        children: {
+            control: {
+                type: "select"
+            },
+            description: "Recebe o conte\xfado que ser\xe1 renderizado dentro do Row.",
+            mapping: {
+                "Default Example": defautlExample,
+                "First Example": firstExample,
+                "Second Example": secondExample
+            },
+            options: [
+                "Default Example",
+                "First Example",
+                "Second Example"
+            ],
+            table: {
+                type: {
+                    summary: "ReactNode"
+                }
+            }
+        },
+        style: {
+            table: {
+                disable: true
+            }
+        },
+        justify: {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a propriedade justify-content para o Row.",
+            table: {
+                type: sumaryJustifyTypes
+            }
+        },
+        "justify-lg": {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a propriedade 'justify' do Row em dispositivos desktop.",
+            table: {
+                type: sumaryJustifyTypes
+            }
+        },
+        "justify-md": {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a propriedade 'justify' do Row em tablets.",
+            table: {
+                type: sumaryJustifyTypes
+            }
+        },
+        "justify-sm": {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a propriedade 'justify' do Row em dispositivos mobile.",
+            table: {
+                type: sumaryJustifyTypes
+            }
+        },
+        align: {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a propriedade 'align-items' para o elemento.",
+            table: {
+                type: sumaryAlignTypes
+            }
+        },
+        "align-lg": {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a propriedade 'align-items' para o elemento em dispositivos desktop.",
+            table: {
+                type: sumaryAlignTypes
+            }
+        },
+        "align-md": {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a propriedade 'align-items' para o elemento em tablets.",
+            table: {
+                type: sumaryAlignTypes
+            }
+        },
+        "align-sm": {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a propriedade 'align-items' para o elemento em dispositivos m\xf3veis.",
+            table: {
+                type: sumaryAlignTypes
+            }
+        },
+        direction: {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a propriedade 'flex-direction' para o elemento.",
+            table: {
+                type: sumaryDirectionTypes
+            }
+        },
+        "direction-lg": {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a propriedade 'flex-direction' para o elemento em dispositivos desktop.",
+            table: {
+                type: sumaryDirectionTypes
+            }
+        },
+        "direction-md": {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a propriedade 'flex-direction' para o elemento em tablets.",
+            table: {
+                type: sumaryDirectionTypes
+            }
+        },
+        "direction-sm": {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define a propriedade 'flex-direction' para o elemento em dispositivos m\xf3veis.",
+            table: {
+                type: sumaryDirectionTypes
+            }
+        },
+        wrap: {
+            control: "inline-radio",
+            description: "Define a propriedade 'wrap' para o elemento.",
+            options: [
+                true,
+                false,
+                "reverse"
+            ],
+            table: {
+                type: {
+                    summary: 'true | false | "reverse"'
+                }
+            }
+        }
+    }
+};
+const Row_stories = meta;
+const Default = {
+    args: {
+        children: defautlExample,
+        style: {
+            border: "4px dashed #FF5656",
+            borderRadius: "10px",
+            minHeight: "200px"
+        }
+    }
+};
+const FirstExample = {
+    args: {
+        children: firstExample,
+        style: {
+            border: "4px dashed #FF5656",
+            borderRadius: "10px",
+            minHeight: "200px"
+        }
+    }
+};
+const SecondExample = {
+    args: {
+        children: secondExample,
+        style: {
+            border: "4px dashed #FF5656",
+            borderRadius: "10px",
+            minHeight: "200px"
+        }
+    }
+};
+export { Default, FirstExample, SecondExample, Row_stories as default };

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

@@ -0,0 +1,20 @@
+type justifyTypes = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "inherit";
+type alignTypes = "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
+type directionTypes = "row" | "row-reverse" | "column" | "column-reverse";
+interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+    justify?: justifyTypes;
+    "justify-lg"?: justifyTypes;
+    "justify-md"?: justifyTypes;
+    "justify-sm"?: justifyTypes;
+    align?: alignTypes;
+    "align-lg"?: alignTypes;
+    "align-md"?: alignTypes;
+    "align-sm"?: alignTypes;
+    direction?: directionTypes;
+    "direction-lg"?: directionTypes;
+    "direction-md"?: directionTypes;
+    "direction-sm"?: directionTypes;
+    wrap?: boolean | "reverse";
+}
+export default function Row({ ...rest }: RowProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,38 @@
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    fluid: boolean;
+}
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, ContainerProps>> & string;
+type justifyTypes = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "inherit";
+type alignTypes = "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
+type directionTypes = "row" | "row-reverse" | "column" | "column-reverse";
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+    justify?: justifyTypes;
+    "justify-lg"?: justifyTypes;
+    "justify-md"?: justifyTypes;
+    "justify-sm"?: justifyTypes;
+    align?: alignTypes;
+    "align-lg"?: alignTypes;
+    "align-md"?: alignTypes;
+    "align-sm"?: alignTypes;
+    direction?: directionTypes;
+    "direction-lg"?: directionTypes;
+    "direction-md"?: directionTypes;
+    "direction-sm"?: directionTypes;
+    wrap?: boolean | "reverse";
+}
+export declare const Row: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, RowProps>> & string;
+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 declare const Column: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, ColumnProps>> & string;
+export {};

package/dist/components/Grid/index.js

@@ -0,0 +1,121 @@
+import styled_components from "styled-components";
+import { SPACING_INLINE_02, SPACING_INLINE_04, SPACING_STACK_03, SPACING_STACK_04 } from "@ftdata/f-tokens";
+const Container = styled_components("div")`
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+  height: 100%;
+  margin: 0 ${({ fluid })=>fluid && SPACING_STACK_03};
+  max-width: ${({ fluid })=>fluid ? "100%" : "1032px"};
+  width: 100%;
+
+  @media (min-width: 415px) {
+    margin: 0 ${({ fluid })=>fluid && SPACING_STACK_04};
+  }
+
+  @media (min-width: 800px) {
+    margin: 0 ${({ fluid })=>fluid ? SPACING_STACK_03 : "auto"};
+  }
+`;
+const Row = styled_components("section")`
+  align-items: ${({ align, "align-sm": alignMedia })=>alignMedia || align || "flex-start"};
+  display: flex;
+  flex-direction: ${({ direction })=>direction || "row"};
+  flex-wrap: ${({ wrap })=>"reverse" === wrap && "wrap-reverse" || false === wrap && "nowrap" || "wrap"};
+  justify-content: ${({ justify, "justify-sm": justifyMedia })=>justifyMedia || justify || "flex-start"};
+  height: auto;
+  margin: 0;
+  position: relative;
+  width: 100%;
+  @media (min-width: 415px) {
+    align-items: ${({ align, "align-md": alignMedia })=>alignMedia || align || "flex-start"};
+    justify-content: ${({ justify, "justify-md": justifyMedia })=>justifyMedia || justify || "flex-start"};
+  }
+  @media (min-width: 800px) {
+    align-items: ${({ align, "align-lg": alignMedia })=>alignMedia || align || "flex-start"};
+    justify-content: ${({ justify, "justify-lg": justifyMedia })=>justifyMedia || justify || "flex-start"};
+  }
+`;
+function getColumnFlexProportion(numberOfColumns, proportion) {
+    if (proportion) {
+        const percent = 100 / numberOfColumns * proportion;
+        return `0 0 ${percent}%`;
+    }
+    return "1 1 0";
+}
+function getColumnOffsetProportion(numberOfColumns, proportion) {
+    if (proportion) {
+        const percent = 100 / numberOfColumns * proportion;
+        return `${percent}%`;
+    }
+    return "0";
+}
+function getColumnWidthProportion(numberOfColumns, proportion) {
+    if (proportion) {
+        const percent = 100 / numberOfColumns * proportion;
+        return `${percent}%`;
+    }
+    return "100%";
+}
+const Column = styled_components("div")`
+  display: flex;
+  flex: ${({ sm })=>getColumnFlexProportion(4, sm)};
+  margin-left: ${({ offset, "offset-sm": offsetMedia })=>{
+    if (offset) {
+        if (offsetMedia) return getColumnOffsetProportion(4, offsetMedia);
+        return getColumnOffsetProportion(12, offset);
+    }
+    return "0";
+}};
+  max-width: ${({ sm })=>getColumnWidthProportion(4, sm)};
+  min-height: 1px;
+  order: ${({ order, "order-sm": orderMedia })=>{
+    if (order) {
+        if (orderMedia) return orderMedia;
+        return order;
+    }
+    return "0";
+}};
+  padding-left: ${SPACING_INLINE_02};
+  padding-right: ${SPACING_INLINE_02};
+  width: 100%;
+
+  @media (min-width: 415px) {
+    flex: ${({ md })=>getColumnFlexProportion(8, md)};
+    margin-left: ${({ offset, "offset-md": offsetMedia })=>{
+    if (offset) {
+        if (offsetMedia) return getColumnOffsetProportion(8, offsetMedia);
+        return getColumnOffsetProportion(12, offset);
+    }
+    return "0";
+}};
+    max-width: ${({ md })=>getColumnWidthProportion(8, md)};
+    order: ${({ "order-md": orderMedia })=>{
+    if (orderMedia) return orderMedia;
+    return "0";
+}};
+  }
+
+  @media (min-width: 800px) {
+    flex: ${({ lg })=>getColumnFlexProportion(12, lg)};
+    margin-left: ${({ offset, "offset-lg": offsetMedia })=>{
+    if (offset) {
+        if (offsetMedia) return getColumnOffsetProportion(12, offsetMedia);
+        return getColumnOffsetProportion(12, offset);
+    }
+    return "0";
+}};
+    max-width: ${({ lg })=>getColumnWidthProportion(12, lg)};
+    order: ${({ order, "order-lg": orderMedia })=>{
+    if (order) {
+        if (orderMedia) return orderMedia;
+        return order;
+    }
+    return "0";
+}};
+    padding-left: calc(${SPACING_INLINE_04} / 2);
+    padding-right: calc(${SPACING_INLINE_04} / 2);
+  }
+`;
+export { Column, Container, Row };

package/dist/components/Grid/utils.d.ts

@@ -0,0 +1 @@
+export declare const Element: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, import("react").FC<{}>>> & string;

package/dist/components/Grid/utils.js

@@ -0,0 +1,18 @@
+import styled_components from "styled-components";
+import { BORDER_WIDTH_HAIRLINE, COLOR_BRAND_MEDIUM, COLOR_SUCCESS_MEDIUM } from "@ftdata/f-tokens";
+const Element = styled_components("div")`
+  background-color: ${COLOR_SUCCESS_MEDIUM};
+  border: ${BORDER_WIDTH_HAIRLINE} solid
+    ${COLOR_BRAND_MEDIUM};
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+  margin: 16px 0;
+  width: 100%;
+`;
+export { Element };

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

@@ -0,0 +1,7 @@
+type sizes = "sm" | "md" | "lg" | "xl";
+interface LoadingProps {
+    variant: "dark" | "light";
+    size: sizes;
+}
+export default function Loading({ variant, size }: LoadingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Loading/Loading/index.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import index from "../index.js";
+function Loading({ variant, size }) {
+    return /*#__PURE__*/ jsx(index, {
+        variant: variant,
+        size: size
+    });
+}
+export { Loading as default };

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

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Loading from "./Loading";
+/**
+ * Loadings são usados para mostrar que algo está sendo carregado.
+ */
+declare const meta: Meta<typeof Loading>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do Input quando apenas as propriedades obrigatórias são fornecidas.
+ */
+export declare const Default: Story;
+/**
+ * Variação de tema 'dark' do Loading para fundos escuros.
+ */
+export declare const Dark: Story;
+/**
+ * Variação de tema 'dark' do Loading para fundos claros.
+ */
+export declare const Light: Story;
+/**
+ * Variações de tamanho padrão do Loading.
+ */
+export declare const Sizes: Story;