@ftdata/ui 0.0.1

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

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

package/dist/components/MultiSelect/MultiSelectList/index.d.ts

@@ -0,0 +1,10 @@
+import { IMultiSelectOption } from "..";
+interface MultiSelectProps {
+    onClickOption?: (event: React.MouseEvent<HTMLDivElement>, option: IMultiSelectOption) => void;
+    options: IMultiSelectOption[];
+    isLoading?: boolean;
+    addAll?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    translation: (key: string) => string;
+}
+export default function MultiSelect({ options, onClickOption, isLoading, addAll, translation, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MultiSelect/MultiSelectList/index.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import { FixedSizeList } from "react-window";
+import { LoadingContainer, OptionContainer, SelectDropdown } from "./style.js";
+import Loading from "../../Loading/Loading/index.js";
+const renderRow = ({ data, index, style, onClickOption, addAll })=>{
+    const option = data[index];
+    const hasSelectAll = "__select_all" === option.value;
+    const handleClick = (event)=>{
+        if (hasSelectAll) {
+            if (addAll) addAll(event);
+            return;
+        }
+        onClickOption?.(event, option);
+    };
+    return /*#__PURE__*/ jsx(OptionContainer, {
+        style: style,
+        onClick: handleClick,
+        className: hasSelectAll ? "__select_all" : "",
+        children: /*#__PURE__*/ jsx("span", {
+            children: option.label
+        })
+    });
+};
+function MultiSelect({ options, onClickOption, isLoading, addAll, translation }) {
+    const selectAll = {
+        value: "__select_all",
+        label: translation("select_all")
+    };
+    const newOptions = addAll ? [
+        selectAll,
+        ...options
+    ] : options;
+    const OPTION_SIZE = 36;
+    const optionLength = newOptions.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(FixedSizeList, {
+            itemCount: newOptions.length,
+            itemData: newOptions,
+            itemSize: 36,
+            height: height,
+            width: "100%",
+            itemKey: (index)=>newOptions[index].value || index,
+            children: ({ index, style, data })=>renderRow({
+                    data,
+                    index,
+                    style,
+                    onClickOption,
+                    addAll
+                })
+        })
+    });
+}
+export { MultiSelect as default };

package/dist/components/MultiSelect/MultiSelectList/style.d.ts

@@ -0,0 +1,3 @@
+export declare const SelectDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const OptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/MultiSelect/MultiSelectList/style.js

@@ -0,0 +1,82 @@
+import styled_components from "styled-components";
+import { COLOR_ACCENT_MEDIUM, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHTER, FONT_FAMILY_01, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
+const SelectDropdown = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_DAY};
+  border-radius: 0.25rem;
+  box-shadow: 0px 2px 4px rgba(107, 117, 124, 0.32);
+  color: ${COLOR_NEUTRAL_DUSK};
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  width: 100%;
+  height: auto;
+  z-index: 3;
+
+  & > div {
+    border-radius: 0.25rem;
+  }
+
+  *::-webkit-scrollbar-track {
+    background-color: #f4f4f4;
+    border-radius: 0 0.25rem 0.25rem 0;
+  }
+
+  *::-webkit-scrollbar {
+    width: 10px;
+    background: #f4f4f4;
+    border-radius: 0 0.25rem 0.25rem 0;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #d5d8da;
+  }
+
+  .__select_all {
+    span {
+      color: ${COLOR_ACCENT_MEDIUM};
+      font-weight: ${FONT_WEIGHT_BOLD};
+    }
+
+    &:hover {
+      span {
+        color: ${COLOR_ACCENT_MEDIUM};
+      }
+    }
+  }
+`;
+const OptionContainer = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_DAY};
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  width: 100%;
+
+  &:hover {
+    background-color: ${COLOR_NEUTRAL_LIGHTER};
+
+    span {
+      color: ${COLOR_NEUTRAL_DUSK};
+    }
+  }
+
+  span {
+    max-width: 80%;
+    color: ${COLOR_NEUTRAL_DARKER};
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-family: ${FONT_FAMILY_01};
+    font-weight: ${FONT_WEIGHT_MEDIUM};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+const LoadingContainer = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_DAY};
+  height: 10rem;
+  width: 100%;
+`;
+export { LoadingContainer, OptionContainer, SelectDropdown };

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

@@ -0,0 +1 @@
+export default function calcTextSize(text: string, textStyle: string, unit: "px" | "rem"): number;

package/dist/components/MultiSelect/calcTextSize.js

@@ -0,0 +1,10 @@
+function calcTextSize(text, textStyle, unit) {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return 0;
+    ctx.font = textStyle;
+    const size = ctx.measureText(text).width;
+    if ("rem" === unit) return size / 16;
+    return size;
+}
+export { calcTextSize as default };

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

@@ -0,0 +1,24 @@
+import { InputHTMLAttributes } from "react";
+export interface IMultiSelectOption {
+    value: string;
+    label: string;
+}
+interface MultiSelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
+    helpText?: string;
+    label?: string;
+    name?: string;
+    onChangeItems?: (options: IMultiSelectOption[]) => void;
+    options: IMultiSelectOption[];
+    optional?: string;
+    required?: boolean;
+    selectAll?: boolean;
+    placeholder: string;
+    isLoading?: boolean;
+    isError?: boolean;
+    isSuccess?: boolean;
+    maxItems?: number;
+    translation: (key: string) => string;
+    value?: IMultiSelectOption[];
+}
+export default function MultiSelect({ helpText, label, isLoading, name, onChangeItems, optional, options, required, maxItems, placeholder, selectAll, isError, value, isSuccess, translation, ...rest }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};