@ftdata/ui 0.0.16 → 0.0.17

package/dist/index.d.ts

@@ -17,12 +17,12 @@ export type { ISelectOption } from "./components/Select";
 export type { SelectProps } from "./components/Select";
 export { default as StateAlert } from "./components/StateAlert";
 export { default as MultiSelect } from "./components/MultiSelect";
-export { useMultiSelect } from "./components/MultiSelect/hooks/useMultiSelect";
-export type { MultiSelectProps } from "./components/MultiSelect";
-export type { IMultiSelectActions } from "./components/MultiSelect/interfaces/actions";
-export type { IMultiSelectOption, IMultiSelectState, } from "./components/MultiSelect/interfaces/state";
-export type { IMultiSelectConfig, IMultiSelectConfigActions, IMultiSelectConfigFields, } from "./components/MultiSelect/interfaces/config";
+export type { MultiSelectProps, IMultiSelectOption, } from "./components/MultiSelect";
 export { default as DoubleList } from "./components/DoubleList";
 export { default as Menu } from "./components/Menu";
 export type { MenuItem, MenuItemData, SubMenu, SubMenuData, } from "./components/Menu/types/MenuItem";
 export { Input } from "./components/Input";
+export { default as IconButton } from "./components/IconButton";
+export { default as Modal } from "./components/Modal";
+export { ModalOverlay } from "./components/Modal/styles";
+export type { ModalAction, ModalActions, ModalProps, ModalSizeCustom, ModalSizes, } from "./components/Modal";

package/dist/index.js

@@ -13,10 +13,12 @@ import UserMenu from "./components/UserMenu/index.js";
 import Select from "./components/Select/index.js";
 import StateAlert from "./components/StateAlert/index.js";
 import MultiSelect from "./components/MultiSelect/index.js";
-import { useMultiSelect } from "./components/MultiSelect/hooks/useMultiSelect.js";
 import DoubleList from "./components/DoubleList/index.js";
 import Menu from "./components/Menu/index.js";
 import { Input } from "./components/Input/index.js";
+import IconButton from "./components/IconButton/index.js";
+import Modal from "./components/Modal/index.js";
+import { ModalOverlay } from "./components/Modal/styles.js";
 export * from "./components/Grid/index.js";
 export * from "./components/Text/index.js";
-export { Avatar, Breadcrumb, Button, Checkbox, Collapse, DoubleList, EmptyState, Input, Loading, Menu, MultiSelect, Radio, Select, StateAlert, Switch, TextArea, Tooltips, UserMenu, useLoading, useMultiSelect };
+export { Avatar, Breadcrumb, Button, Checkbox, Collapse, DoubleList, EmptyState, IconButton, Input, Loading, Menu, Modal, ModalOverlay, MultiSelect, Radio, Select, StateAlert, Switch, TextArea, Tooltips, UserMenu, useLoading };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ftdata/ui",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "type": "module",
   "exports": {
     ".": {
@@ -31,8 +31,8 @@
     "react-input-mask-next": "3.0.0-alpha.12",
     "react-select": "^5.10.2",
     "react-window": "^2.0.2",
-    "@ftdata/f-icons": "0.0.4",
-    "@ftdata/f-tokens": "0.0.1"
+    "@ftdata/f-tokens": "0.0.1",
+    "@ftdata/f-icons": "0.0.6"
   },
   "publishConfig": {
     "access": "public"

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;

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

@@ -1,106 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Title } from "../index.js";
-const meta = {
-    title: "DESIGN COMPONENTS/Text/Title",
-    component: Title,
-    tags: [
-        "autodocs"
-    ],
-    parameters: {
-        layout: "centered"
-    },
-    argTypes: {
-        size: {
-            description: "Define o tipo e tamanho do Title de acordo com sua varia\xe7\xe3o.",
-            table: {
-                type: {
-                    summary: '"subheading" | "sm" | "md" | "section" | "standard" | "huge"'
-                }
-            }
-        },
-        children: {
-            control: {
-                type: "text"
-            },
-            description: "Define o texto que ser\xe1 renderizado."
-        }
-    }
-};
-const Title_stories = meta;
-const Default = {
-    args: {
-        children: "Default",
-        size: "huge"
-    }
-};
-const Subheading = {
-    args: {
-        children: "Subheading",
-        size: "subheading"
-    }
-};
-const Sm = {
-    args: {
-        children: "Sm",
-        size: "sm"
-    }
-};
-const Md = {
-    args: {
-        children: "Md",
-        size: "md"
-    }
-};
-const Section = {
-    args: {
-        children: "Section",
-        size: "section"
-    }
-};
-const Standart = {
-    args: {
-        children: "Standart",
-        size: "standard"
-    }
-};
-const Huge = {
-    args: {
-        children: "Huge",
-        size: "huge"
-    }
-};
-const Sizes = {
-    render: ()=>/*#__PURE__*/ jsxs("div", {
-            style: {
-                display: "flex",
-                flexDirection: "column"
-            },
-            children: [
-                /*#__PURE__*/ jsx(Title, {
-                    size: "huge",
-                    children: "Huge - Lorem Ipsum"
-                }),
-                /*#__PURE__*/ jsx(Title, {
-                    size: "standard",
-                    children: "Standart - Lorem Ipsum"
-                }),
-                /*#__PURE__*/ jsx(Title, {
-                    size: "section",
-                    children: "Section - Lorem Ipsum"
-                }),
-                /*#__PURE__*/ jsx(Title, {
-                    size: "subheading",
-                    children: "Subheading - Lorem Ipsum"
-                }),
-                /*#__PURE__*/ jsx(Title, {
-                    size: "md",
-                    children: "Md - Lorem Ipsum"
-                }),
-                /*#__PURE__*/ jsx(Title, {
-                    size: "sm",
-                    children: "sm - Lorem Ipsum"
-                })
-            ]
-        })
-};
-export { Default, Huge, Md, Section, Sizes, Sm, Standart, Subheading, Title_stories as default };