@ftdata/ui 0.0.8 → 0.0.10

package/dist/components/CustomSelect/CustomSelectList/index.js

@@ -1,66 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FixedSizeList } from "react-window";
-import { LoadingContainer, OptionContainer, SelectDropdown } from "./style.js";
-import Loading from "../../Loading/Loading/index.js";
-import { TooltipWrapper } from "../../TooltipWrapper/index.js";
-const renderRow = ({ data, index, style, onClickOption, selectedOption, showTooltip, hideTooltip, handleCustomAction })=>{
-    const option = data[index];
-    const isSelected = selectedOption ? option.value === selectedOption.value : false;
-    const handleShowTooltip = (event)=>{
-        const target = event.currentTarget.querySelector("span");
-        if (target && target.scrollWidth > target.clientWidth) return void showTooltip(event, option.label);
-    };
-    const handleClick = (event)=>{
-        if (option.action) return void handleCustomAction(option.action);
-        if (onClickOption) onClickOption(event, option);
-    };
-    return /*#__PURE__*/ jsxs(OptionContainer, {
-        style: style,
-        isSelected: isSelected,
-        onMouseEnter: handleShowTooltip,
-        onMouseLeave: hideTooltip,
-        onClick: handleClick,
-        className: option.action ? "action" : "",
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                children: option.label
-            }),
-            option.chip || null
-        ]
-    });
-};
-const CustomSelectList = ({ options, onClickOption, selectedOption, isLoading, handleCustomAction })=>{
-    const OPTION_SIZE = 36;
-    const optionLength = options.length;
-    const height = OPTION_SIZE * (0 === optionLength ? 1 : optionLength >= 7 ? 7 : optionLength);
-    return /*#__PURE__*/ jsx(SelectDropdown, {
-        children: isLoading ? /*#__PURE__*/ jsx(LoadingContainer, {
-            children: /*#__PURE__*/ jsx(Loading, {
-                size: "lg",
-                variant: "light"
-            })
-        }) : /*#__PURE__*/ jsx(TooltipWrapper, {
-            spacing: 18,
-            children: ({ showTooltip, hideTooltip })=>/*#__PURE__*/ jsx(FixedSizeList, {
-                    itemCount: options.length,
-                    itemData: options,
-                    itemSize: 36,
-                    height: height,
-                    width: "100%",
-                    itemKey: (index)=>options[index].value || index,
-                    children: ({ index, style, data })=>renderRow({
-                            data,
-                            index,
-                            style,
-                            onClickOption,
-                            selectedOption,
-                            showTooltip,
-                            hideTooltip,
-                            handleCustomAction
-                        })
-                })
-        })
-    });
-};
-const CustomSelect_CustomSelectList = CustomSelectList;
-export { CustomSelect_CustomSelectList as default };

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

@@ -1,30 +0,0 @@
-import React, { InputHTMLAttributes, JSX } from "react";
-export interface ICustomSelectOption {
-    label: string;
-    value: string;
-    chip?: JSX.Element;
-    action?: () => void;
-}
-export interface IAction {
-    label: string;
-    action: () => void;
-}
-export interface CustomSelectProps extends InputHTMLAttributes<HTMLInputElement> {
-    t: (key: string) => string;
-    helpText?: string;
-    isError?: boolean;
-    isSuccess?: boolean;
-    label?: string;
-    isRequired?: boolean;
-    name?: string;
-    options: ICustomSelectOption[] | [];
-    placeholder?: string;
-    search?: (query: string) => void;
-    isLoading?: boolean;
-    icon?: JSX.Element;
-    variation?: "default" | "searchable";
-    selected: ICustomSelectOption | null;
-    setSelected: React.Dispatch<React.SetStateAction<ICustomSelectOption | null>>;
-}
-export default function CustomSelect({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation, selected, setSelected, ...rest }: CustomSelectProps): import("react/jsx-runtime").JSX.Element;
-export declare const normalizeOptions: (options: ICustomSelectOption[]) => ICustomSelectOption[];

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

@@ -1,61 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import MultiSelect from ".";
-/**
- * O componente MultiSelect é usado para selecionar múltiplas opções de uma lista.
- * Ele herda todos atributos de um HTML input.
- */
-declare const meta: Meta<typeof MultiSelect>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-/**
- * Variação padrão do MultiSelect quando apenas as propriedades obrigatórias são fornecidas.
- */
-export declare const Default: Story;
-/**
- * Variação do MultiSelect com label.
- */
-export declare const Label: Story;
-/**
- * Variação do MultiSelect com com a opção de selecionar todos.
- */
-export declare const SelectAll: Story;
-/**
- * Variação do MultiSelect com valor de seleção máxima.
- */
-export declare const MaxItems: Story;
-/**
- * Variação do MultiSelect com quantidade grande e opções.
- */
-export declare const ManyOptions: Story;
-/**
- * Variação do MultiSelect quando é opcional.
- */
-export declare const Optional: Story;
-/**
- * Variação do MultiSelect quando é obrigatório.
- */
-export declare const Required: Story;
-/**
- * Variação do MultiSelect com texto de ajuda para auxiliar o usuário.
- */
-export declare const HelpText: Story;
-/**
- * Variação do MultiSelect quando está carreagando seus dados.
- */
-export declare const Loading: Story;
-/**
- * Variação do MultiSelect com feedback de sucesso.
- */
-export declare const Success: Story;
-/**
- * Variação do MultiSelect com feedback de erro.
- */
-export declare const Error: Story;
-/**
- * Variação do MultiSelect usando um valor definido
- */
-export declare const Value: Story;
-/**
- * Variação do MultiSelect com o change Items controlando os selecionados.
- */
-export declare const onChangeItems: Story;

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -1,336 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import index from "./index.js";
-const meta = {
-    title: "DESIGN COMPONENTS/MultiSelect",
-    component: index,
-    tags: [
-        "autodocs"
-    ],
-    parameters: {
-        layout: "centered"
-    },
-    decorators: [
-        (Story)=>/*#__PURE__*/ jsx("div", {
-                style: {
-                    width: "402px",
-                    height: "402px",
-                    display: "flex"
-                },
-                children: /*#__PURE__*/ jsx(Story, {})
-            })
-    ],
-    argTypes: {
-        translation: {
-            description: "Recebe a fun\xe7\xe3o de tradu\xe7\xe3o do i18n"
-        },
-        placeholder: {
-            description: "Recebe o placeholder do input."
-        },
-        name: {
-            description: "Recebe a propriedade name para a label e para o input."
-        },
-        options: {
-            description: "Recebe as op\xe7\xf5es que ir\xe3o aparecer na listagem.",
-            table: {
-                type: {
-                    summary: "IMultiSelectOption[] ({ value: string, label: string }[])"
-                }
-            }
-        },
-        onChangeItems: {
-            description: "Recebe uma fun\xe7\xe3o para controlar o estado de op\xe7\xf5es selecionadas quando elas mudarem."
-        },
-        optional: {
-            description: "Recebe um texto descrevendo que \xe9 opcional."
-        },
-        required: {
-            description: "Define se esse campo \xe9 obrigat\xf3rio."
-        },
-        selectAll: {
-            description: "Define se a op\xe7\xe3o de selecionar todos est\xe1 dispon\xedvel ou n\xe3o."
-        },
-        isLoading: {
-            description: "Coloca a lista em estado de loading."
-        },
-        isError: {
-            description: "Define se o campo est\xe1 preeenchido incorretamente."
-        },
-        isSuccess: {
-            description: "Define se o campo est\xe1 preeenchido corretamente."
-        },
-        maxItems: {
-            description: "Define um limite de sele\xe7\xf5es."
-        }
-    }
-};
-const MultiSelect_stories = meta;
-const mockTranslate = (key)=>{
-    switch(key){
-        case "all_were_selected":
-            return "Todos foram Selecionados.";
-        case "remove_all":
-            return "Remover todos";
-        case "select_all":
-            return "Selecionar todos";
-        case "no_data_was_found":
-            return "Nenhum dado foi encontrado.";
-        case "the_selection_limit_has_been_reached":
-            return "O limite de sele\xe7\xf5es foi atingido.";
-        case "no_data_is_available":
-            return "Nenhum dado dispon\xedvel.";
-        default:
-            return key;
-    }
-};
-const mockOptions = [
-    {
-        value: "xs",
-        label: "Extra Pequeno"
-    },
-    {
-        value: "s",
-        label: "Pequeno"
-    },
-    {
-        value: "m",
-        label: "M\xe9dio"
-    },
-    {
-        value: "l",
-        label: "Grande"
-    },
-    {
-        value: "xl",
-        label: "Extra Grande"
-    },
-    {
-        value: "xxl",
-        label: "Extra Extra Grande"
-    },
-    {
-        value: "2xl",
-        label: "2X Grande"
-    },
-    {
-        value: "3xl",
-        label: "3X Grande"
-    },
-    {
-        value: "one-size",
-        label: "Tamanho \xdanico"
-    },
-    {
-        value: "custom",
-        label: "Tamanho Personalizado"
-    },
-    {
-        value: "not-applicable",
-        label: "N\xe3o Aplic\xe1vel"
-    }
-];
-const mockManyOptions = [
-    {
-        value: "xxs",
-        label: "Extra Extra Pequeno"
-    },
-    ...mockOptions,
-    {
-        value: "padrao",
-        label: "Padr\xe3o"
-    }
-];
-const Default = {
-    args: {
-        placeholder: "Selecione ...",
-        options: mockOptions,
-        translation: mockTranslate,
-        label: "Default"
-    }
-};
-const Label = {
-    args: {
-        placeholder: "Selecione ...",
-        options: mockOptions,
-        helpText: "",
-        label: "Label",
-        translation: mockTranslate
-    }
-};
-const SelectAll = {
-    args: {
-        placeholder: "Selecione ...",
-        options: mockOptions,
-        helpText: "",
-        label: "Label",
-        translation: mockTranslate,
-        selectAll: true
-    }
-};
-const MaxItems = {
-    args: {
-        placeholder: "Selecione ...",
-        options: mockOptions,
-        helpText: "",
-        label: "Label",
-        translation: mockTranslate,
-        maxItems: 5
-    }
-};
-const ManyOptions = {
-    args: {
-        placeholder: "Selecione ...",
-        options: mockManyOptions,
-        helpText: "",
-        label: "Label",
-        translation: mockTranslate
-    }
-};
-const Optional = {
-    args: {
-        placeholder: "Selecione ...",
-        options: mockOptions,
-        helpText: "",
-        label: "Opcional",
-        optional: "(opcional)",
-        translation: mockTranslate
-    }
-};
-const Required = {
-    args: {
-        placeholder: "Selecione ...",
-        options: mockOptions,
-        helpText: "",
-        label: "Obrigat\xf3rio",
-        translation: mockTranslate,
-        required: true
-    }
-};
-const HelpText = {
-    args: {
-        placeholder: "Selecione ...",
-        options: mockOptions,
-        helpText: "texto de ajuda",
-        label: "Texto de Ajuda",
-        translation: mockTranslate
-    }
-};
-const Loading = {
-    args: {
-        placeholder: "Selecione ...",
-        options: mockOptions,
-        helpText: "",
-        label: "Loading",
-        translation: mockTranslate,
-        isLoading: true
-    }
-};
-const Success = {
-    args: {
-        placeholder: "Selecione ...",
-        options: mockOptions,
-        helpText: "mensagem de sucesso",
-        label: "Sucesso",
-        translation: mockTranslate,
-        isSuccess: true
-    }
-};
-const Error = {
-    args: {
-        placeholder: "Selecione ...",
-        options: mockOptions,
-        helpText: "Mensagem de erro",
-        label: "Erro",
-        translation: mockTranslate,
-        optional: "",
-        isError: true
-    }
-};
-const Value = {
-    args: {
-        placeholder: "Selecione ...",
-        options: mockOptions,
-        helpText: "Alguns dados j\xe1 foram selecionados",
-        label: "Value",
-        translation: mockTranslate,
-        optional: "",
-        value: mockOptions.slice(0, 8)
-    }
-};
-const onChangeItems = {
-    render: ()=>{
-        const [selected, setSelected] = useState([]);
-        const handleChangeSeleceted = (options)=>{
-            setSelected(options);
-        };
-        return /*#__PURE__*/ jsxs("div", {
-            style: {
-                display: "flex",
-                flexDirection: "column",
-                width: "100%",
-                gap: "3rem"
-            },
-            children: [
-                /*#__PURE__*/ jsxs("div", {
-                    children: [
-                        /*#__PURE__*/ jsxs("h2", {
-                            style: {
-                                fontWeight: "500",
-                                marginBottom: "1rem",
-                                color: "#26333B"
-                            },
-                            children: [
-                                "Selecionados:",
-                                " "
-                            ]
-                        }),
-                        /*#__PURE__*/ jsx("div", {
-                            style: {
-                                display: "flex",
-                                gap: "0.5rem",
-                                flexWrap: "wrap"
-                            },
-                            children: selected.length ? /*#__PURE__*/ jsxs(Fragment, {
-                                children: [
-                                    " ",
-                                    selected.map((op)=>/*#__PURE__*/ jsx("span", {
-                                            style: {
-                                                padding: "0.25rem",
-                                                background: "#FF5656",
-                                                fontSize: "12px",
-                                                lineHeight: "12px",
-                                                borderRadius: "4px",
-                                                color: "#F5F5F5",
-                                                fontWeight: "600"
-                                            },
-                                            children: op.label
-                                        }, op.value))
-                                ]
-                            }) : /*#__PURE__*/ jsx("span", {
-                                style: {
-                                    padding: "0.25rem",
-                                    background: "#FF5656",
-                                    fontSize: "12px",
-                                    lineHeight: "12px",
-                                    borderRadius: "4px",
-                                    color: "#F5F5F5",
-                                    fontWeight: "600"
-                                },
-                                children: "Nenhum Selecionado"
-                            })
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx(index, {
-                    options: mockOptions,
-                    placeholder: "Selecione os tamanhos",
-                    onChangeItems: handleChangeSeleceted,
-                    translation: mockTranslate,
-                    label: "Tamanho",
-                    selectAll: true
-                })
-            ]
-        });
-    }
-};
-export { Default, Error, HelpText, Label, Loading, ManyOptions, MaxItems, Optional, Required, SelectAll, Success, Value, MultiSelect_stories as default, onChangeItems };