@ftdata/ui 0.0.15 → 0.0.17

package/dist/components/Collapse/Colapse.stories.js

@@ -1,108 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import index from "./index.js";
-import { COLOR_CUSTOM_COLUMNBG } from "@ftdata/f-tokens";
-import { Paragraph } from "../Text/index.js";
-const Element = /*#__PURE__*/ jsx("div", {
-    style: {
-        backgroundColor: "#FF5656",
-        fontFamily: "sans-serif",
-        border: "none",
-        borderRadius: "10px",
-        height: "10rem",
-        color: "#f5f5f5",
-        fontWeight: "800",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        marginTop: "1rem"
-    },
-    children: "Elemento"
-});
-const defaultExample = /*#__PURE__*/ jsx(Paragraph, {
-    size: "sm",
-    children: "Este \xe9 o conte\xfado exibido dentro do Collapse."
-});
-const firstExample = /*#__PURE__*/ jsxs("div", {
-    children: [
-        Element,
-        Element
-    ]
-});
-const meta = {
-    title: "DESIGN COMPONENTS/Collapse",
-    component: index,
-    tags: [
-        "autodocs"
-    ],
-    parameters: {
-        layout: "centered"
-    },
-    decorators: [
-        (Story)=>/*#__PURE__*/ jsx("div", {
-                style: {
-                    width: "300px"
-                },
-                children: /*#__PURE__*/ jsx(Story, {})
-            })
-    ],
-    argTypes: {
-        title: {
-            description: "Define o t\xedtulo do Collpase.",
-            table: {
-                type: {
-                    summary: "string | JSX.Element"
-                }
-            }
-        },
-        showCollapse: {
-            description: "Define se o Collapse est\xe1 aberto ou fechado."
-        },
-        margin: {
-            description: "Define a margem do Collapse."
-        },
-        iconColor: {
-            description: "Define a cor do icone do Collapse."
-        },
-        iconCavet: {
-            description: "Define a posi\xe7\xe3o do \xedcone do Collapse."
-        },
-        children: {
-            control: {
-                type: "select"
-            },
-            description: "Recebe o que ser\xe1 exibido dentro do Collapse.",
-            mapping: {
-                "Default Example": defaultExample,
-                "First Example": firstExample
-            },
-            options: [
-                "Deafault Example",
-                "First Example"
-            ]
-        },
-        handleChange: {
-            description: "Recebe uma fun\xe7\xe3o respons\xe1vel em lidar com as altera\xe7\xf5es da visibilidade do Collapse."
-        },
-        fontSyze: {
-            description: "Define o tamanho da fonte do Collapse."
-        },
-        maxHeight: {
-            description: "Define o tamanho m\xe1ximo do children do Collapse."
-        },
-        espacamentoTitleIcon: {
-            description: "Define o espa\xe7amento entre o titulo e o \xedcone"
-        }
-    }
-};
-const Colapse_stories = meta;
-const Default = {
-    args: {
-        title: "Collapse",
-        showCollapse: false,
-        margin: "0",
-        iconColor: COLOR_CUSTOM_COLUMNBG,
-        iconCavet: "left",
-        children: defaultExample
-    }
-};
-export { Default, Colapse_stories as default };

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

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Menu from "./index";
-declare const meta: Meta<typeof Menu>;
-export default meta;
-type Story = StoryObj<typeof Menu>;
-export declare const Default: Story;

package/dist/components/Menu/Menu.stories.js

@@ -1,116 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import index from "./index.js";
-import { Icon } from "@ftdata/f-icons";
-const meta = {
-    title: "Components/Menu",
-    component: index,
-    argTypes: {
-        background: {
-            control: "color"
-        },
-        fontcolor: {
-            control: "color"
-        },
-        subMenusBackground: {
-            control: "color"
-        },
-        active: {
-            control: "text"
-        }
-    }
-};
-const Menu_stories = meta;
-const mockLogo = /*#__PURE__*/ jsx(Icon, {
-    name: "ui airplay-signal",
-    width: "2rem"
-});
-const mockItems = [
-    {
-        id: 1,
-        description: "Dashboard principal",
-        endpoint: "/dashboard",
-        itens: [
-            {
-                id: 11,
-                description: "Relat\xf3rios",
-                endpoint: "/dashboard/reports",
-                itens: [
-                    {
-                        id: 12,
-                        description: "Estat\xedsticas",
-                        endpoint: "/dashboard/statistics",
-                        itens: [],
-                        menu_icon: "ui statistics",
-                        translate_key: "changelog",
-                        ordenation: 2
-                    },
-                    {
-                        id: 12,
-                        description: "Estat\xedsticas",
-                        endpoint: "/dashboard/statistics",
-                        itens: [],
-                        menu_icon: "ui statistics",
-                        translate_key: "changelog",
-                        ordenation: 2
-                    },
-                    {
-                        id: 12,
-                        description: "Estat\xedsticas",
-                        endpoint: "/dashboard/statistics",
-                        itens: [],
-                        menu_icon: "ui statistics",
-                        translate_key: "changelog",
-                        ordenation: 2
-                    }
-                ],
-                menu_icon: "ui report",
-                translate_key: "reports",
-                ordenation: 1
-            },
-            {
-                id: 12,
-                description: "Estat\xedsticas",
-                endpoint: "/dashboard/statistics",
-                itens: [],
-                menu_icon: "ui statistics",
-                translate_key: "changelog",
-                ordenation: 2
-            }
-        ],
-        menu_icon: "ui dashboard",
-        translate_key: "dashboard",
-        ordenation: 1
-    },
-    {
-        id: 2,
-        description: "Configura\xe7\xf5es do sistema",
-        endpoint: "/settings",
-        itens: [],
-        menu_icon: "ui settings",
-        translate_key: "settings",
-        ordenation: 2
-    }
-];
-const mockTranslate = (key)=>{
-    const dict = {
-        menu: "Menu",
-        dashboard: "Dashboard",
-        settings: "Configura\xe7\xf5es",
-        back: "Voltar",
-        reports: "Relat\xf3rios",
-        statistics: "Estat\xedsticas"
-    };
-    return dict[key] || key;
-};
-const Default = {
-    args: {
-        background: "#222",
-        fontcolor: "#fff",
-        subMenusBackground: "#333",
-        logo: mockLogo,
-        items: mockItems,
-        translate: mockTranslate,
-        active: "dashboard"
-    }
-};
-export { Default, Menu_stories as default };

package/dist/components/MultiSelect/helpers/arraysEqual.d.ts

@@ -1,2 +0,0 @@
-import { IMultiSelectOption } from "../interfaces/state";
-export declare function arraysEqual(a: IMultiSelectOption[], b: IMultiSelectOption[]): boolean;

package/dist/components/MultiSelect/helpers/arraysEqual.js

@@ -1,5 +0,0 @@
-function arraysEqual(a, b) {
-    if (a.length !== b.length) return false;
-    return a.every((item, idx)=>item.value === b[idx].value);
-}
-export { arraysEqual };

package/dist/components/MultiSelect/helpers/computeSelected.d.ts

@@ -1,2 +0,0 @@
-import { IMultiSelectOption } from "../interfaces/state";
-export declare const computeSelected: (options: IMultiSelectOption[], unselected: IMultiSelectOption[]) => IMultiSelectOption[];

package/dist/components/MultiSelect/helpers/computeSelected.js

@@ -1,2 +0,0 @@
-const computeSelected = (options, unselected)=>options.filter((opt)=>!unselected.some((u)=>u.value === opt.value));
-export { computeSelected };

package/dist/components/MultiSelect/helpers/getChangedFieds.d.ts

@@ -1,2 +0,0 @@
-import { IMultiSelectState } from "../interfaces/state";
-export declare function getChangedFields(base: Partial<IMultiSelectState>, compare: Partial<IMultiSelectState>): (keyof IMultiSelectState)[];

package/dist/components/MultiSelect/helpers/getChangedFieds.js

@@ -1,17 +0,0 @@
-import { arraysEqual } from "./arraysEqual.js";
-const FIELDS = [
-    "selected",
-    "options",
-    "filtered",
-    "unselected"
-];
-function getChangedFields(base, compare) {
-    const changed = [];
-    FIELDS.forEach((key)=>{
-        const last = base[key] || [];
-        const next = compare[key] || [];
-        if (arraysEqual(last, next)) changed.push(key);
-    });
-    return changed;
-}
-export { getChangedFields };

package/dist/components/MultiSelect/hooks/useMultiSelect.d.ts

@@ -1,10 +0,0 @@
-import { IMultiSelectState } from "../interfaces/state";
-import { IMultiSelectConfig } from "../interfaces/config";
-interface UseIMultiSelectConfig {
-    config?: IMultiSelectConfig;
-}
-export declare function useMultiSelect({ config }: UseIMultiSelectConfig): {
-    state: IMultiSelectState;
-    updateState: (newPartial: Partial<IMultiSelectState>) => void;
-};
-export {};

package/dist/components/MultiSelect/hooks/useMultiSelect.js

@@ -1,44 +0,0 @@
-import { useEffect, useReducer } from "react";
-import { computeUnselected } from "../helpers/computeUnselected.js";
-import { stateReducer } from "../reducers/stateReducer.js";
-import { arraysEqual } from "../helpers/arraysEqual.js";
-function useMultiSelect({ config }) {
-    const initial = {
-        selected: config?.fields?.externalSelected ?? [],
-        options: config?.fields?.externalOptions ?? [],
-        filtered: config?.fields?.externalFiltered ?? [],
-        unselected: computeUnselected(config?.fields?.externalOptions ?? [], config?.fields?.externalSelected ?? [])
-    };
-    const [state, dispatch] = useReducer(stateReducer, initial);
-    useEffect(()=>{
-        if (!config) return;
-        const { fields, actions } = config;
-        const payload = {};
-        if (fields?.externalSelected && !arraysEqual(fields.externalSelected, state.selected)) payload.selected = fields.externalSelected;
-        if (fields?.externalOptions && !arraysEqual(fields.externalOptions, state.options)) payload.options = fields.externalOptions;
-        if (fields?.externalFiltered && !arraysEqual(fields.externalFiltered, state.filtered)) payload.filtered = fields.externalFiltered;
-        if (fields?.externalUnselected && !arraysEqual(fields.externalUnselected, state.unselected)) payload.unselected = fields.externalUnselected;
-        if (Object.keys(payload).length) dispatch({
-            type: "SET_STATE",
-            payload
-        });
-        if (actions?.onSelectedChange) actions.onSelectedChange(state.selected);
-        if (actions?.onOptionsChange) actions.onOptionsChange(state.options);
-        if (actions?.onFilteredChange) actions.onFilteredChange(state.filtered);
-        if (actions?.onUnselectedChange) actions.onUnselectedChange(state.unselected);
-    }, [
-        state,
-        config
-    ]);
-    const updateState = (newPartial)=>{
-        dispatch({
-            type: "SET_STATE",
-            payload: newPartial
-        });
-    };
-    return {
-        state,
-        updateState
-    };
-}
-export { useMultiSelect };

package/dist/components/MultiSelect/interfaces/actions.d.ts

@@ -1,4 +0,0 @@
-export interface IMultiSelectActions {
-    clear: () => void;
-    search?: (query: string) => void;
-}

package/dist/components/MultiSelect/interfaces/config.d.ts

@@ -1,17 +0,0 @@
-import { IMultiSelectState, IMultiSelectOption } from "./state";
-export interface IMultiSelectConfigFields {
-    externalSelected?: IMultiSelectOption[];
-    externalOptions?: IMultiSelectOption[];
-    externalFiltered?: IMultiSelectOption[];
-    externalUnselected?: IMultiSelectOption[];
-}
-export interface IMultiSelectConfigActions {
-    onSelectedChange?: (selected: IMultiSelectState["selected"]) => void;
-    onOptionsChange?: (options: IMultiSelectState["options"]) => void;
-    onFilteredChange?: (filtered: IMultiSelectState["filtered"]) => void;
-    onUnselectedChange?: (unselected: IMultiSelectState["unselected"]) => void;
-}
-export interface IMultiSelectConfig {
-    fields?: IMultiSelectConfigFields;
-    actions?: IMultiSelectConfigActions;
-}

package/dist/components/MultiSelect/interfaces/state.d.ts

@@ -1,10 +0,0 @@
-export interface IMultiSelectOption {
-    value: string;
-    label: string;
-}
-export interface IMultiSelectState {
-    selected: IMultiSelectOption[];
-    options: IMultiSelectOption[];
-    filtered: IMultiSelectOption[];
-    unselected: IMultiSelectOption[];
-}

package/dist/components/MultiSelect/reducers/stateReducer.d.ts

@@ -1,21 +0,0 @@
-import { IMultiSelectOption, IMultiSelectState } from "../interfaces/state";
-type MultiSelectAction = {
-    type: "SET_STATE";
-    payload: Partial<IMultiSelectState>;
-} | {
-    type: "SET_OPTIONS";
-    payload: IMultiSelectOption[];
-} | {
-    type: "SET_SELECTED";
-    payload: IMultiSelectOption[];
-} | {
-    type: "SET_UNSELECTED";
-    payload: IMultiSelectOption[];
-} | {
-    type: "SET_FILTERED";
-    payload: IMultiSelectOption[];
-} | {
-    type: "CLEAR";
-};
-export declare function stateReducer(state: IMultiSelectState, action: MultiSelectAction): IMultiSelectState;
-export {};

package/dist/components/MultiSelect/reducers/stateReducer.js

@@ -1,44 +0,0 @@
-import { computeUnselected } from "../helpers/computeUnselected.js";
-import { computeSelected } from "../helpers/computeSelected.js";
-function stateReducer(state, action) {
-    switch(action.type){
-        case "SET_STATE":
-            return {
-                ...state,
-                ...action.payload,
-                unselected: computeUnselected(action.payload.options ?? state.options, action.payload.selected ?? state.selected)
-            };
-        case "SET_OPTIONS":
-            return {
-                ...state,
-                options: action.payload,
-                unselected: computeUnselected(action.payload, state.selected)
-            };
-        case "SET_SELECTED":
-            return {
-                ...state,
-                selected: action.payload,
-                unselected: computeUnselected(state.options, action.payload)
-            };
-        case "SET_UNSELECTED":
-            return {
-                ...state,
-                selected: computeSelected(state.options, action.payload),
-                unselected: action.payload
-            };
-        case "SET_FILTERED":
-            return {
-                ...state,
-                filtered: action.payload
-            };
-        case "CLEAR":
-            return {
-                ...state,
-                selected: [],
-                unselected: state.options
-            };
-        default:
-            return state;
-    }
-}
-export { stateReducer };

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

@@ -1,29 +0,0 @@
-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;

package/dist/components/Text/Paragraph/Paragraph.stories.js

@@ -1,124 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Paragraph, Title } from "../index.js";
-const meta = {
-    title: "DESIGN COMPONENTS/Text/Paragraph",
-    component: Paragraph,
-    tags: [
-        "autodocs"
-    ],
-    parameters: {
-        layout: "centered"
-    },
-    argTypes: {
-        children: {
-            description: "Define o texto que ser\xe1 renderizado.",
-            control: {
-                type: "text"
-            }
-        },
-        size: {
-            description: "Define o tamanho do Paragraph.",
-            table: {
-                type: {
-                    summary: '"caption" | "sm" | "md"'
-                }
-            }
-        }
-    }
-};
-const Paragraph_stories = meta;
-const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-                    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
-                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
-                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
-                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
-const Default = {
-    args: {
-        size: "caption",
-        children: loremIpsum
-    }
-};
-const Caption = {
-    args: {
-        children: loremIpsum,
-        size: "caption"
-    }
-};
-const Sm = {
-    args: {
-        children: loremIpsum,
-        size: "sm"
-    }
-};
-const Md = {
-    args: {
-        children: loremIpsum,
-        size: "md"
-    }
-};
-const Sizes = {
-    render: ()=>/*#__PURE__*/ jsxs("div", {
-            style: {
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                flexDirection: "column",
-                gap: "2.5rem",
-                width: "100%"
-            },
-            children: [
-                /*#__PURE__*/ jsxs("div", {
-                    style: {
-                        display: "grid",
-                        gridTemplateColumns: "10% 90%",
-                        alignItems: "center"
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Title, {
-                            size: "md",
-                            children: "Caption"
-                        }),
-                        /*#__PURE__*/ jsx(Paragraph, {
-                            size: "caption",
-                            children: loremIpsum
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    style: {
-                        display: "grid",
-                        gridTemplateColumns: "10% 90%",
-                        alignItems: "center"
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Title, {
-                            size: "md",
-                            children: "md"
-                        }),
-                        /*#__PURE__*/ jsx(Paragraph, {
-                            size: "md",
-                            children: loremIpsum
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    style: {
-                        display: "grid",
-                        gridTemplateColumns: "10% 90%",
-                        alignItems: "center"
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Title, {
-                            size: "md",
-                            children: "sm"
-                        }),
-                        /*#__PURE__*/ jsx(Paragraph, {
-                            size: "sm",
-                            children: loremIpsum
-                        })
-                    ]
-                })
-            ]
-        })
-};
-export { Caption, Default, Md, Sizes, Sm, Paragraph_stories as default };

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

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