@ftdata/ui 0.0.1

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

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from "@storybook/react";
+import StateAlert from ".";
+/**
+ * StateAlert é um componente de alerta visual, usado para informar o estado atual de uma ação (sucesso, erro, alerta, etc.).
+ * Ele pode ser customizado com estilos próprios e configurado para exibir uma mensagem, ícone e barra de progresso.
+ * ##### importante: para a documentação ele está fixo na tela através da prop keep, por padrão essa prop não é atribuida e o componente desaparece da tela assim que acaba a animação.
+ */
+declare const meta: Meta<typeof StateAlert>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Exemplo padrão do StateAlert com o tipo "success" e uma mensagem de sucesso.
+ */
+export declare const Default: Story;
+/**
+ * Alerta do tipo "danger" para indicar um erro crítico.
+ */
+export declare const Danger: Story;
+/**
+ * Alerta do tipo "warning" para indicar um aviso.
+ */
+export declare const Warning: Story;
+/**
+ * Alerta do tipo "success" para indicar uma ação bem sucedida.
+ */
+export declare const Success: Story;
+/**
+ * Alerta personalizado com ícone e estilos próprios.
+ */
+export declare const CustomStyle: Story;
+/**
+ * Alerta com uma duração personalizada.
+ */
+export declare const Duration: Story;
+/**
+ * Alerta com ícone de sucesso e uma mensagem informativa.
+ */
+export declare const CustomIcon: Story;
+/**
+ * Alerta com o ciclo de vida completo.
+ */
+export declare const Unkeep: Story;
+/**
+ * Exemplo usando on close para colocar o StateAlert em loop.
+ */
+export declare const OnClose: Story;

package/dist/components/StateAlert/StateAlert.stories.js

@@ -0,0 +1,189 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import index from "./index.js";
+import { Icon } from "@ftdata/f-icons";
+const meta = {
+    title: "DESIGN COMPONENTS/StateAlert",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        type: {
+            description: "Define o tipo do alerta",
+            control: {
+                type: "inline-radio"
+            },
+            options: [
+                "success",
+                "danger",
+                "warning",
+                "custom"
+            ],
+            table: {
+                defaultValue: {
+                    summary: "success"
+                },
+                type: {
+                    summary: '"success" | "danger" | "warning" | "custom"'
+                }
+            }
+        },
+        customStyle: {
+            description: "Estilos personalizados para o container e progress bar do alerta.",
+            table: {
+                type: {
+                    summary: "ICustomStyle"
+                }
+            },
+            control: {
+                type: "object"
+            }
+        },
+        duration: {
+            description: "Dura\xe7\xe3o do alerta em milissegundos.",
+            table: {
+                type: {
+                    summary: "number"
+                },
+                defaultValue: {
+                    summary: "5000"
+                }
+            }
+        },
+        icon: {
+            description: "\xcdcone exibido no alerta.",
+            table: {
+                type: {
+                    summary: "JSX.Element"
+                }
+            }
+        },
+        message: {
+            description: "Mensagem de texto exibida no alerta.",
+            table: {
+                type: {
+                    summary: "string"
+                }
+            }
+        },
+        onClose: {
+            description: "Recebe uma fun\xe7\xe3o que define o que o componente ir\xe1 fazer quando ele fechar."
+        }
+    }
+};
+const StateAlert_stories = meta;
+const Default = {
+    args: {
+        type: "success",
+        keep: true,
+        message: "Opera\xe7\xe3o conclu\xedda com sucesso!"
+    }
+};
+const Danger = {
+    args: {
+        type: "danger",
+        keep: true,
+        icon: /*#__PURE__*/ jsx(Icon, {
+            name: "ui warning-circle",
+            color: "currentColor"
+        }),
+        message: "Alerta de erro!"
+    }
+};
+const Warning = {
+    args: {
+        type: "warning",
+        keep: true,
+        icon: /*#__PURE__*/ jsx(Icon, {
+            name: "ui warning-triangle",
+            color: "currentColor"
+        }),
+        message: "Alerta de aviso"
+    }
+};
+const Success = {
+    args: {
+        type: "success",
+        keep: true,
+        icon: /*#__PURE__*/ jsx(Icon, {
+            name: "ui checkmark-done-check",
+            color: "currentColor"
+        }),
+        message: "Alerta de sucesso!"
+    }
+};
+const CustomStyle = {
+    args: {
+        type: "custom",
+        customStyle: {
+            container: {
+                color: "#ff5656",
+                background: "#f5f5f5"
+            },
+            progressbar: {
+                progress: "#e44d4d",
+                background: "#ffa3a3"
+            }
+        },
+        icon: /*#__PURE__*/ jsx(Icon, {
+            name: "ui stars-light-sparkle-alt",
+            color: "currentColor"
+        }),
+        keep: true,
+        message: "Alerta personalizado!"
+    }
+};
+const Duration = {
+    args: {
+        type: "success",
+        duration: 2000,
+        keep: true,
+        message: "Este alerta ser\xe1 dura 2000ms.",
+        icon: /*#__PURE__*/ jsx(Icon, {
+            name: "ui clock-time-arrow",
+            color: "currentColor"
+        })
+    }
+};
+const CustomIcon = {
+    args: {
+        type: "success",
+        icon: /*#__PURE__*/ jsx(Icon, {
+            name: "eml calendar-schedule",
+            color: "currentColor"
+        }),
+        keep: true,
+        message: "A\xe7\xe3o realizada com sucesso!"
+    }
+};
+const Unkeep = {
+    args: {
+        type: "success",
+        icon: /*#__PURE__*/ jsx(Icon, {
+            name: "ui sticker-smile-1",
+            color: "currentColor"
+        }),
+        message: "Saindo da tela em breve"
+    }
+};
+const OnClose = {
+    render: ()=>{
+        const [isAlertVisible, setIsAlertVisible] = useState(true);
+        const handleAlertClose = ()=>{
+            setIsAlertVisible(false);
+            setTimeout(()=>setIsAlertVisible(true), 500);
+        };
+        return /*#__PURE__*/ jsx("div", {
+            children: isAlertVisible && /*#__PURE__*/ jsx(index, {
+                type: "success",
+                message: "Alert em loop com o onClose",
+                onClose: handleAlertClose
+            })
+        });
+    }
+};
+export { CustomIcon, CustomStyle, Danger, Default, Duration, OnClose, Success, Unkeep, Warning, StateAlert_stories as default };

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

@@ -0,0 +1,22 @@
+import React, { JSX } from "react";
+export type StateAlertTypes = "success" | "danger" | "warning" | "custom";
+export interface ICustomStyle {
+    container: {
+        color: string;
+        background: string;
+    };
+    progressbar: {
+        progress: string;
+        background: string;
+    };
+}
+export interface StateAlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    type: StateAlertTypes;
+    customStyle?: ICustomStyle;
+    duration?: number;
+    icon?: JSX.Element;
+    message?: string;
+    keep?: boolean;
+    onClose?: () => void;
+}
+export default function StateAlert({ type, customStyle, icon, message, duration, keep, onClose, ...rest }: StateAlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/StateAlert/index.js

@@ -0,0 +1,56 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@ftdata/f-icons";
+import { useEffect, useState } from "react";
+import { FastProgress, ProgressContainer, SlowProgress, StateAlertContainer } from "./styles.js";
+function StateAlert({ type, customStyle, icon, message, duration = 5000, keep = false, onClose, ...rest }) {
+    const [show, setShow] = useState(true);
+    const [isExiting, setIsExiting] = useState(false);
+    useEffect(()=>{
+        if (keep) return;
+        const exitTimeout = setTimeout(()=>setIsExiting(true), duration - 400);
+        const OpenTimeOut = setTimeout(()=>{
+            if (onClose) onClose();
+            setShow(false);
+        }, duration);
+        return ()=>{
+            clearTimeout(exitTimeout);
+            clearTimeout(OpenTimeOut);
+        };
+    }, []);
+    if (!show) return /*#__PURE__*/ jsx(Fragment, {});
+    return /*#__PURE__*/ jsxs(StateAlertContainer, {
+        type: type,
+        customStyle: customStyle,
+        isExiting: isExiting,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                children: [
+                    icon ? icon : /*#__PURE__*/ jsx(Icon, {
+                        color: "currentColor",
+                        name: "ui warning-triangle",
+                        size: "1.5rem"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: message
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(ProgressContainer, {
+                children: [
+                    /*#__PURE__*/ jsx(FastProgress, {
+                        type: type,
+                        customStyle: customStyle,
+                        duration: duration
+                    }),
+                    /*#__PURE__*/ jsx(SlowProgress, {
+                        type: type,
+                        customStyle: customStyle,
+                        duration: duration
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { StateAlert as default };

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

@@ -0,0 +1,7 @@
+import { StateAlertProps } from ".";
+export declare const StateAlertContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StateAlertProps & {
+    isExiting?: boolean;
+}>> & string;
+export declare const ProgressContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FastProgress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StateAlertProps>> & string;
+export declare const SlowProgress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StateAlertProps>> & string;

package/dist/components/StateAlert/styles.js

@@ -0,0 +1,124 @@
+import styled_components, { css, keyframes } from "styled-components";
+import { COLOR_DANGER_DARK, COLOR_DANGER_LIGHT, COLOR_DANGER_LIGHTER, COLOR_DANGER_MEDIUM, COLOR_SUCCESS_DARK, COLOR_SUCCESS_LIGHT, COLOR_SUCCESS_LIGHTER, COLOR_SUCCESS_MEDIUM, COLOR_WARNING_DARK, COLOR_WARNING_LIGHT, COLOR_WARNING_LIGHTER, COLOR_WARNING_MEDIUM } from "@ftdata/f-tokens";
+const success = {
+    container: {
+        color: COLOR_SUCCESS_MEDIUM,
+        background: COLOR_SUCCESS_LIGHTER
+    },
+    progressbar: {
+        progress: COLOR_SUCCESS_DARK,
+        background: COLOR_SUCCESS_LIGHT
+    }
+};
+const danger = {
+    container: {
+        color: COLOR_DANGER_MEDIUM,
+        background: COLOR_DANGER_LIGHTER
+    },
+    progressbar: {
+        progress: COLOR_DANGER_DARK,
+        background: COLOR_DANGER_LIGHT
+    }
+};
+const warning = {
+    container: {
+        color: COLOR_WARNING_MEDIUM,
+        background: COLOR_WARNING_LIGHTER
+    },
+    progressbar: {
+        progress: COLOR_WARNING_DARK,
+        background: COLOR_WARNING_LIGHT
+    }
+};
+const getStyle = (type, customStyle)=>{
+    if ("success" === type) return success;
+    if ("danger" === type) return danger;
+    if ("warning" === type) return warning;
+    if ("custom" === type && customStyle) return customStyle;
+    return success;
+};
+const styles_open = keyframes`
+  0% {
+    width: 0%;
+    opacity: 0;
+  }
+  100% {
+    width: 100%;
+    opacity: 1;
+  }
+`;
+const styles_close = keyframes`
+  0% {
+    width: 100%;
+  }
+  100% {
+
+    width: 0%;
+  }
+`;
+const fast = keyframes`
+  0% {
+    width: 100%;
+  }
+  100% {
+    width: 0%;
+  }
+`;
+const StateAlertContainer = styled_components.div`
+  background-color: ${({ customStyle, type })=>getStyle(type, customStyle).container.background};
+  color: ${({ customStyle, type })=>getStyle(type, customStyle).container.color};
+  display: flex;
+  flex-direction: column;
+  font-family: Inter;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  gap: 1.25rem;
+  height: 3.5rem;
+  justify-content: space-between;
+  line-height: 1.25rem;
+  padding: 0.75rem 0.75rem 0 0.75rem;
+  position: relative;
+  width: 100%;
+  animation: ${({ isExiting })=>css`
+    ${isExiting ? styles_close : styles_open} ${isExiting ? "0.5s" : "400ms"} forwards
+  `};
+
+  span {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  & > div:first-child {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+`;
+const ProgressContainer = styled_components.div`
+  height: 0.5rem;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  animation-timing-function: linear;
+`;
+const FastProgress = styled_components.div`
+  background-color: ${({ customStyle, type })=>getStyle(type, customStyle).progressbar.progress};
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  animation: ${fast}
+    ${({ duration })=>duration ? 1000 === duration ? `${duration - 200}ms` : `${duration - 1000}ms` : "5s"}
+    forwards;
+`;
+const SlowProgress = styled_components.div`
+  background-color: ${({ customStyle, type })=>getStyle(type, customStyle).progressbar.background};
+  height: 100%;
+  width: 100%;
+`;
+export { FastProgress, ProgressContainer, SlowProgress, StateAlertContainer };

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

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Switch from ".";
+/**
+ * Os usuários podem clicar na chave para ativar ou desativar.
+ * Várias caixas de seleção podem ser marcadas simultaneamente.
+ * Este componente também recebe propriedades nativas do HTML div.
+ */
+declare const meta: Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do Switch quando apenas as propriedades obrigatórias são fornecidas.
+ */
+export declare const Default: Story;
+/**
+ * Variação do Switch ativo.
+ */
+export declare const Active: Story;
+/**
+ * Variação do Switch inativo.
+ */
+export declare const Inactive: Story;
+/**
+ * Variações de tamanhos padrão do Switch.
+ */
+export declare const Sizes: Story;

package/dist/components/Switch/Switch.stories.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import index from "./index.js";
+const meta = {
+    title: "DESIGN COMPONENTS/Switch",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        checked: {
+            description: "Define se o valor do Switch \xe9 ativo ou inativo."
+        },
+        disabled: {
+            description: "Define se input est\xe1 desativado. "
+        },
+        size: {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define o tamanho do Switch.",
+            table: {
+                type: {
+                    summary: '"small" | "medium"'
+                }
+            }
+        },
+        onChange: {
+            control: false,
+            description: "Recebe uma fun\xe7\xe3o que \xe9 disparada quando houverem mudan\xe7as no valor do select."
+        }
+    }
+};
+const Switch_stories = meta;
+const Default = {
+    args: {
+        checked: false,
+        onChange: ()=>console.log("Change - Mudou o valor do switch"),
+        size: "medium"
+    }
+};
+const Active = {
+    args: {
+        onChange: ()=>console.log("Change - Mudou o valor do switch"),
+        checked: true,
+        size: "medium"
+    }
+};
+const Inactive = {
+    args: {
+        onChange: ()=>console.log("Change - Mudou o valor do switch"),
+        size: "medium",
+        checked: false
+    }
+};
+const Sizes = {
+    render: ()=>/*#__PURE__*/ jsxs("div", {
+            style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: "2.5rem",
+                width: "100%"
+            },
+            children: [
+                /*#__PURE__*/ jsx(index, {
+                    checked: true,
+                    size: "small",
+                    onChange: ()=>console.log("Change - Mudou o valor do switch")
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    checked: true,
+                    size: "medium",
+                    onChange: ()=>console.log("Change - Mudou o valor do switch")
+                })
+            ]
+        })
+};
+export { Active, Default, Inactive, Sizes, Switch_stories as default };

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

@@ -0,0 +1,8 @@
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    checked: boolean;
+    disabled?: boolean;
+    onChange: React.MouseEventHandler<HTMLDivElement>;
+    size: "medium" | "small";
+}
+declare const Switch: React.FC<Props>;
+export default Switch;

package/dist/components/Switch/index.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Circle, Icon, Wrapper } from "./styles.js";
+const Switch_Switch = ({ checked, disabled, onChange, size, ...rest })=>{
+    const sizeToPX = "medium" === size ? 16 : 8;
+    return /*#__PURE__*/ jsx(Wrapper, {
+        checked: checked,
+        disabled: disabled,
+        size: size,
+        onClick: (e)=>{
+            if (!disabled) onChange(e);
+        },
+        ...rest,
+        children: /*#__PURE__*/ jsx(Circle, {
+            checked: checked,
+            disabled: disabled,
+            size: size,
+            children: checked && /*#__PURE__*/ jsx(Icon, {
+                height: sizeToPX,
+                width: sizeToPX,
+                viewBox: "0 0 16 16"
+            })
+        })
+    });
+};
+const Switch = Switch_Switch;
+export { Switch as default };

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

@@ -0,0 +1,15 @@
+interface CircleProps {
+    checked: boolean;
+    disabled?: boolean;
+    size: "medium" | "small";
+}
+export declare const Circle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, CircleProps>> & string;
+interface WrapperProps {
+    checked: boolean;
+    disabled?: boolean;
+    onClick: React.MouseEventHandler<HTMLDivElement>;
+    size: "medium" | "small";
+}
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, WrapperProps>> & string;
+export declare const Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string & Omit<import("react").FC<import("react").SVGProps<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
+export {};

package/dist/components/Switch/styles.js

@@ -0,0 +1,33 @@
+import styled_components from "styled-components";
+import { BORDER_RADIUS_CIRCLE, BORDER_RADIUS_PILL, COLOR_ACCENT_MEDIUM, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_MEDIUM, SHADOW_LEVEL_02, SPACING_INLINE_01, SPACING_INLINE_03, SPACING_INLINE_04, SPACING_INLINE_06, SPACING_INLINE_08, SPACING_STACK_01, SPACING_STACK_03, SPACING_STACK_04, SPACING_STACK_05 } from "@ftdata/f-tokens";
+import SwitchCheckMarkIcon from "../../assets/SwitchCheckMarkIcon.js";
+const Circle = styled_components("div")`
+  align-items: center;
+  background-color: ${COLOR_NEUTRAL_DAY};
+  border-radius: ${BORDER_RADIUS_CIRCLE};
+  box-shadow: ${SHADOW_LEVEL_02} ${COLOR_NEUTRAL_DARKER};
+  display: flex;
+  height: ${({ size })=>"medium" === size ? SPACING_STACK_04 : SPACING_STACK_03};
+  justify-content: center;
+  left: ${({ checked, size })=>checked ? `calc(100% - ${"medium" === size ? SPACING_INLINE_04 : SPACING_INLINE_03} - ${SPACING_INLINE_01})` : SPACING_INLINE_01};
+  position: absolute;
+  top: ${SPACING_STACK_01};
+  transition: 0.2s ease all;
+  width: ${({ size })=>"medium" === size ? SPACING_INLINE_04 : SPACING_INLINE_03};
+`;
+const Wrapper = styled_components("div")`
+  background: ${({ checked, disabled })=>checked && !disabled && COLOR_ACCENT_MEDIUM || !checked && disabled && COLOR_NEUTRAL_LIGHT || COLOR_NEUTRAL_MEDIUM};
+  border-radius: ${BORDER_RADIUS_PILL};
+  cursor: pointer;
+  position: relative;
+  height: ${({ size })=>"medium" === size ? SPACING_STACK_05 : SPACING_STACK_04};
+  transition: 0.2s ease all;
+  min-width: ${({ size })=>"medium" === size ? SPACING_INLINE_08 : SPACING_INLINE_06};
+  width: ${({ size })=>"medium" === size ? SPACING_INLINE_08 : SPACING_INLINE_06};
+`;
+const Icon = styled_components(SwitchCheckMarkIcon)`
+  path {
+    stroke: ${COLOR_ACCENT_MEDIUM};
+  }
+`;
+export { Circle, Icon, Wrapper };

package/dist/components/Text/Paragraph/Paragraph.stories.d.ts

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Paragraph } from "../index";
+/**
+ * Títulos são usados para mostrar textos regulares em uma página.
+ * Este componente também funciona com os atributos nativos de um HTML paragraph element.
+ */
+declare const meta: Meta<typeof Paragraph>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do Paragraph quando apenas as propriedades obrigatórias são fornecidas.
+ */
+export declare const Default: Story;
+/**
+ * Variação de tamanho caption do Paragraph.
+ */
+export declare const Caption: Story;
+/**
+ * Variação de tamanho sm do Paragraph.
+ */
+export declare const Sm: Story;
+/**
+ * Variação de tamanho md do Paragraph.
+ */
+export declare const Md: Story;
+/**
+ * Todas as variações padrão de de tamanho do Paragraph.
+ */
+export declare const Sizes: Story;