@ftdata/ui 0.0.8 → 0.0.10

package/dist/index.js

@@ -10,7 +10,7 @@ import EmptyState from "./components/EmptyState/index.js";
 import Tooltips from "./components/Tooltips/index.js";
 import Collapse from "./components/Collapse/index.js";
 import UserMenu from "./components/UserMenu/index.js";
-import CustomSelect from "./components/CustomSelect/index.js";
+import Select from "./components/Select/index.js";
 import StateAlert from "./components/StateAlert/index.js";
 import MultiSelect from "./components/MultiSelect/index.js";
 import DoubleList from "./components/DoubleList/index.js";
@@ -18,4 +18,4 @@ import Menu from "./components/Menu/index.js";
 import { Input } from "./components/Input/index.js";
 export * from "./components/Grid/index.js";
 export * from "./components/Text/index.js";
-export { Avatar, Breadcrumb, Button, Checkbox, Collapse, CustomSelect, DoubleList, EmptyState, Input, Loading, Menu, MultiSelect, Radio, StateAlert, Switch, TextArea, Tooltips, UserMenu, useLoading };
+export { Avatar, Breadcrumb, Button, Checkbox, Collapse, DoubleList, EmptyState, Input, Loading, Menu, MultiSelect, Radio, Select, StateAlert, Switch, TextArea, Tooltips, UserMenu, useLoading };

package/dist/style/base.css

@@ -92,7 +92,7 @@ button, select {
 }
 
 button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) {
-  -webkit-appearance: button;
+  appearance: button;
   background-color: #0000;
   background-image: none;
 }
@@ -118,7 +118,7 @@ progress {
 }
 
 [type="search"] {
-  -webkit-appearance: textfield;
+  appearance: textfield;
   outline-offset: -2px;
 }
 
@@ -186,7 +186,6 @@ button, [role="button"] {
 }
 
 img, svg, video, canvas, audio, iframe, embed, object {
-  vertical-align: middle;
   display: block;
 }
 
@@ -219,7 +218,15 @@ body {
 
 @font-face {
   font-family: Inter;
+  src: url(../static/font/Inter.ttf) format("truetype");
+  font-weight: 100 900;
   font-style: normal;
-  src: url(../static/font/Inter-Regular.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: Inter;
+  src: url(../static/font/Inter-Italic.ttf) format("truetype");
+  font-weight: 100 900;
+  font-style: italic;
 }
 

package/dist/types/feedback.d.ts

@@ -1,3 +1,4 @@
 export type ColorFeedbackType = "success" | "warning" | "danger" | "info" | "neutral";
 export type StateFeedbackType = "loading" | "disabled" | "pending" | "success" | "error";
 export type FeedbackType = ColorFeedbackType | StateFeedbackType;
+export type FieldFeedbackType = "danger" | "success" | "warning";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ftdata/ui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "exports": {
     ".": {
@@ -30,7 +30,7 @@
   "dependencies": {
     "react-input-mask-next": "3.0.0-alpha.12",
     "react-select": "^5.10.2",
-    "react-window": "^1.8.11",
+    "react-window": "^2.0.2",
     "@ftdata/f-icons": "0.0.2",
     "@ftdata/f-tokens": "0.0.1"
   },

package/dist/assets/fonts/Inter-Regular.js

@@ -1,2 +0,0 @@
-import Inter_Regular_namespaceObject from "../../static/font/Inter-Regular.ttf";
-export { Inter_Regular_namespaceObject as default };

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

@@ -1,73 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import CustomSelect from ".";
-/**
- * CustomSelect permite que os usuários selecionem uma opção em uma lista suspensa customizada.
- * O componente suporta exibição de mensagens de erro, sucesso e ajuda, além de possibilitar a customização do ícone e placeholder.
- */
-declare const meta: Meta<typeof CustomSelect>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-/**
- * Variação padrão do CustomSelect com as propriedades obrigatórias.
- */
-export declare const Default: Story;
-/**
- * Variação interativa do CustomSelect.
- */
-export declare const InteractiveDemo: Story;
-/**
- * Variação padrão do CustomSelect com as opções de textos variados em tamanho.
- */
-export declare const DefaultWithBigTexts: Story;
-/**
- * Variação do CustomSelect pesquisável habilitando o onchange e a variation como "searchable".
- */
-export declare const Searchable: Story;
-/**
- * CustomSelect com texto de ajuda.
- */
-export declare const HelpText: Story;
-/**
- * CustomSelect com chips.
- */
-export declare const Chips: Story;
-/**
- * CustomSelect com Rótulo.
- */
-export declare const Label: Story;
-/**
- * CustomSelect em estado de erro, exibindo uma mensagem de validação.
- */
-export declare const Error: Story;
-/**
- * CustomSelect em estado de sucesso, exibindo uma mensagem de confirmação.
- */
-export declare const Success: Story;
-/**
- * CustomSelect desativado, onde não é possível selecionar opções.
- */
-export declare const Disabled: Story;
-/**
- * Variação do CustomSelect obrigatório.
- */
-export declare const Required: Story;
-/**
- * CustomSelect em estado de loading.
- */
-export declare const Loading: Story;
-/**
- * variação do CustomSelect quando nenhuma opção  é encontrada.
- */
-export declare const Empty: Story;
-/**
- *  Variação do input com readonly
- */
-export declare const Readonly: Story;
-/**
- *  Variação do input com readonly
- */
-export declare const CustomAction: Story;
-/**
- *  Variação do input com readonly
- */
-export declare const DemoCustomAction: Story;

package/dist/components/CustomSelect/CustomSelect.stories.js

@@ -1,477 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import index from "./index.js";
-import { Icon } from "@ftdata/f-icons";
-import { ChipExemple } from "./styles.js";
-import map_sample from "../../assets/img/map-sample.js";
-const meta = {
-    title: "DESIGN COMPONENTS/CustomSelect",
-    component: index,
-    tags: [
-        "autodocs"
-    ],
-    parameters: {
-        layout: "centered"
-    },
-    decorators: [
-        (Story)=>/*#__PURE__*/ jsx("div", {
-                style: {
-                    width: "600px",
-                    height: "350px",
-                    display: "flex",
-                    justifyContent: "center"
-                },
-                children: /*#__PURE__*/ jsx(Story, {})
-            })
-    ],
-    argTypes: {
-        t: {
-            description: "Fun\xe7\xe3o de tradu\xe7\xe3o do i18n."
-        },
-        helpText: {
-            description: "Texto de ajuda exibido abaixo do CustomSelect."
-        },
-        isError: {
-            description: "Define se o conte\xfado do CustomSelect possui um erro de valida\xe7\xe3o."
-        },
-        isSuccess: {
-            description: "Define se o conte\xfado do CustomSelect est\xe1 em estado de sucesso."
-        },
-        label: {
-            description: "R\xf3tulo exibido acima do CustomSelect."
-        },
-        isRequired: {
-            description: "Define se o CustomSelect \xe9 obrigat\xf3rio."
-        },
-        name: {
-            description: "Nome do campo input para formul\xe1rios."
-        },
-        options: {
-            description: "Define as op\xe7\xf5es dispon\xedveis no CustomSelect.",
-            table: {
-                type: {
-                    summary: "Array<{ label: string, value: string, chip?: JSX.Element }>"
-                }
-            }
-        },
-        placeholder: {
-            description: "Texto de placeholder exibido no campo input."
-        },
-        icon: {
-            description: "\xcdcone exibido ao lado do campo de sele\xe7\xe3o.",
-            options: [
-                "none",
-                "icon"
-            ],
-            mapping: {
-                none: null,
-                icon: /*#__PURE__*/ jsx(Icon, {
-                    name: "bld hotel-building",
-                    color: "#8E969B"
-                })
-            }
-        },
-        isLoading: {
-            description: "Define se o CustomSelect est\xe1 em estado de carregamento."
-        },
-        onChange: {
-            description: "Fun\xe7\xe3o chamada quando o valor do campo muda."
-        },
-        readOnly: {
-            description: "Define se o input pode fazer pesquisa ou apenas selecionar op\xe7\xf5es"
-        },
-        variation: {
-            description: "Define a varia\xe7\xe3o do select se \xe9 pesquisavel ou \xe9 padr\xe3o. por\xe9m para a pesquisa \xe9 necess\xe1rio um onChange",
-            table: {
-                type: {
-                    summary: '"searchable" | "default"'
-                }
-            }
-        }
-    }
-};
-const CustomSelect_stories = meta;
-const options = [
-    {
-        value: "1",
-        label: "Op\xe7\xe3o 1"
-    },
-    {
-        value: "2",
-        label: "Op\xe7\xe3o 2"
-    },
-    {
-        value: "3",
-        label: "Op\xe7\xe3o 3"
-    },
-    {
-        value: "4",
-        label: "Op\xe7\xe3o 4"
-    }
-];
-const biggerOptions = [
-    {
-        value: "1",
-        label: "Op\xe7\xe3o 1: Sele\xe7\xe3o padr\xe3o"
-    },
-    {
-        value: "2",
-        label: "Op\xe7\xe3o 2: Detalhes adicionais sobre esta op\xe7\xe3o"
-    },
-    {
-        value: "3",
-        label: "Op\xe7\xe3o 3: Texto m\xe9dio"
-    },
-    {
-        value: "4",
-        label: "Op\xe7\xe3o 4: Informa\xe7\xf5es extensas e abrangentes para testes"
-    },
-    {
-        value: "5",
-        label: "Op\xe7\xe3o 5: Simples"
-    },
-    {
-        value: "6",
-        label: "Op\xe7\xe3o 6: Uma descri\xe7\xe3o bem longa que pode testar a largura do componente"
-    },
-    {
-        value: "7",
-        label: "Op\xe7\xe3o 7: Informa\xe7\xe3o \xfatil"
-    },
-    {
-        value: "8",
-        label: "Op\xe7\xe3o 8: Exemplo"
-    },
-    {
-        value: "9",
-        label: "Op\xe7\xe3o 9: Outro exemplo que \xe9 um pouco mais longo do que o normal"
-    },
-    {
-        value: "10",
-        label: "Op\xe7\xe3o 10: Mais informa\xe7\xf5es sobre o que fazer"
-    }
-];
-const withChips = [
-    {
-        value: "1",
-        label: "Op\xe7\xe3o 1: Sele\xe7\xe3o padr\xe3o",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "2",
-        label: "Op\xe7\xe3o 2: Detalhes adicionais sobre esta op\xe7\xe3o",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "3",
-        label: "Op\xe7\xe3o 3: Texto m\xe9dio",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "4",
-        label: "Op\xe7\xe3o 4: Informa\xe7\xf5es extensas e abrangentes para testes",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "5",
-        label: "Op\xe7\xe3o 5: Simples",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "6",
-        label: "Op\xe7\xe3o 6: Uma descri\xe7\xe3o bem longa que pode testar a largura do componente",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "7",
-        label: "Op\xe7\xe3o 7: Informa\xe7\xe3o \xfatil",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "8",
-        label: "Op\xe7\xe3o 8: Exemplo",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    },
-    {
-        value: "9",
-        label: "Op\xe7\xe3o 9: Outro exemplo que \xe9 um pouco mais longo do que o normal",
-        chip: /*#__PURE__*/ jsx(ChipExemple, {
-            children: "demo"
-        })
-    }
-];
-const enterprises = [
-    {
-        value: "1",
-        label: "TechNova Ltda"
-    },
-    {
-        value: "2",
-        label: "GreenFuture Inc."
-    },
-    {
-        value: "3",
-        label: "Skyline Solutions"
-    },
-    {
-        value: "4",
-        label: "Oceanic Ventures"
-    },
-    {
-        value: "5",
-        label: "BrightWorks Co."
-    },
-    {
-        value: "6",
-        label: "UrbanCore Group"
-    }
-];
-const mockTranslate = (key)=>"not_found_any_data" === key ? "Nenhum dado encontrado" : key;
-const Default = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        t: mockTranslate
-    }
-};
-const InteractiveDemo = {
-    render: ()=>{
-        const [selected, setSelected] = useState(null);
-        return /*#__PURE__*/ jsx("div", {
-            style: {
-                display: "flex",
-                gap: "2rem"
-            },
-            children: /*#__PURE__*/ jsx("div", {
-                style: {
-                    width: "284px"
-                },
-                children: /*#__PURE__*/ jsx(index, {
-                    selected: selected,
-                    setSelected: setSelected,
-                    placeholder: "Selecione ...",
-                    options: enterprises,
-                    t: mockTranslate,
-                    label: `op\xe7\xe3o selecionada: ${selected?.label}`,
-                    variation: "searchable"
-                })
-            })
-        });
-    }
-};
-const DefaultWithBigTexts = {
-    args: {
-        placeholder: "Selecione ...",
-        options: biggerOptions,
-        t: mockTranslate
-    }
-};
-const Searchable = {
-    render: ()=>{
-        const [selected, setSelected] = useState(null);
-        const [searchValue, setSearchValue] = useState("");
-        const handleSearch = (query)=>{
-            setSearchValue(query);
-        };
-        return /*#__PURE__*/ jsxs("div", {
-            style: {
-                display: "flex",
-                gap: "2rem"
-            },
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    style: {
-                        width: "284px"
-                    },
-                    children: /*#__PURE__*/ jsx(index, {
-                        selected: selected,
-                        setSelected: setSelected,
-                        placeholder: "Selecione ...",
-                        options: enterprises,
-                        t: mockTranslate,
-                        search: handleSearch,
-                        label: `op\xe7\xe3o selecionada: ${selected?.label}`,
-                        variation: "searchable"
-                    })
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    style: {
-                        width: "284px"
-                    },
-                    children: /*#__PURE__*/ jsxs("span", {
-                        style: {
-                            fontFamily: "Inter",
-                            fontSize: "0.875rem",
-                            fontWeight: "500"
-                        },
-                        children: [
-                            "resultado pesquisa customizada: ",
-                            searchValue
-                        ]
-                    })
-                })
-            ]
-        });
-    }
-};
-const HelpText = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        t: mockTranslate,
-        helpText: "texto de ajuda"
-    }
-};
-const Chips = {
-    args: {
-        placeholder: "Selecione ...",
-        options: withChips,
-        t: mockTranslate
-    }
-};
-const Label = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        t: mockTranslate,
-        label: "Label do CustomSelect"
-    }
-};
-const Error = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        isError: true,
-        t: mockTranslate,
-        helpText: "Erro ao selecionar a op\xe7\xe3o."
-    }
-};
-const Success = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        isSuccess: true,
-        t: mockTranslate,
-        helpText: "Mensagem de Sucesso."
-    }
-};
-const Disabled = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        disabled: true,
-        t: mockTranslate
-    }
-};
-const Required = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        isRequired: true,
-        label: "Campo Obrigat\xf3rio",
-        t: mockTranslate
-    }
-};
-const Loading = {
-    args: {
-        placeholder: "Selecione ...",
-        options: options,
-        t: mockTranslate,
-        isLoading: true
-    }
-};
-const Empty = {
-    args: {
-        placeholder: "Selecione ...",
-        options: [],
-        t: mockTranslate
-    }
-};
-const Readonly = {
-    args: {
-        placeholder: "Selecione ...",
-        options: biggerOptions,
-        t: mockTranslate,
-        readOnly: true
-    }
-};
-const CustomAction = {
-    args: {
-        placeholder: "Selecione ...",
-        options: [
-            {
-                value: "__custom_action",
-                label: "Clique Aqui",
-                action: ()=>console.log("clicou")
-            },
-            ...options
-        ],
-        t: mockTranslate
-    }
-};
-const DemoCustomAction = {
-    render: ()=>{
-        const [showImage, setShowImage] = useState(false);
-        const [selected, setSelected] = useState(null);
-        const customAction = ()=>setShowImage((prev)=>!prev);
-        return /*#__PURE__*/ jsxs("div", {
-            style: {
-                display: "flex",
-                gap: "2rem"
-            },
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    style: {
-                        width: "284px"
-                    },
-                    children: /*#__PURE__*/ jsx(index, {
-                        selected: selected,
-                        setSelected: setSelected,
-                        placeholder: "Selecione ...",
-                        options: [
-                            {
-                                value: "__custom_action",
-                                label: "Toggle Mapa",
-                                action: ()=>customAction()
-                            },
-                            ...options
-                        ],
-                        t: mockTranslate,
-                        label: `Demonstra\xe7\xe3o de a\xe7\xe3o customizada`
-                    })
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    style: {
-                        width: "284px"
-                    },
-                    children: showImage && /*#__PURE__*/ jsx("img", {
-                        src: map_sample,
-                        style: {
-                            width: "100%",
-                            height: "100%",
-                            objectFit: "cover",
-                            borderRadius: "0.5rem"
-                        }
-                    })
-                })
-            ]
-        });
-    }
-};
-export { Chips, CustomAction, Default, DefaultWithBigTexts, DemoCustomAction, Disabled, Empty, Error, HelpText, InteractiveDemo, Label, Loading, Readonly, Required, Searchable, Success, CustomSelect_stories as default };

package/dist/components/CustomSelect/CustomSelectList/index.d.ts

@@ -1,10 +0,0 @@
-import { ICustomSelectOption } from "..";
-interface CustomSelectListProps {
-    onClickOption?: (event: React.MouseEvent<HTMLDivElement>, option: ICustomSelectOption) => void;
-    options: ICustomSelectOption[];
-    selectedOption?: ICustomSelectOption | null;
-    isLoading?: boolean;
-    handleCustomAction: (action: () => void) => void;
-}
-declare const CustomSelectList: React.FC<CustomSelectListProps>;
-export default CustomSelectList;