@ftdata/ui 0.0.1

package/dist/components/Menu/styles.js

@@ -0,0 +1,202 @@
+import styled_components, { keyframes } from "styled-components";
+import { generateColorScale } from "./helpers/generateColorScale.js";
+import { getLuminance } from "./helpers/getLuminance.js";
+const shrinkToRight = keyframes`
+  from {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+  to {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+`;
+const growFromRight = keyframes`
+  from {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+  to {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+`;
+const fadeOutAndHide = keyframes`
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  99% {
+    opacity: 0;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+    display: none;
+  }
+`;
+const fadeInAndShow = keyframes`
+  0% {
+    opacity: 0;
+    visibility: hidden;
+    display: none;
+  }
+  1% {
+    opacity: 0;
+    visibility: visible;
+    display: flex;
+  }
+  100% {
+    opacity: 1;
+    visibility: visible;
+    display: flex;
+  }
+`;
+const MenuAside = styled_components.aside`
+  background-color: ${({ background })=>background || "#000"};
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  height: 100vh;
+  padding: 1rem 0.5rem;
+  position: relative;
+  transition: width 0.3s ease-in-out;
+  width: ${({ expand })=>expand ? "18.75rem" : "3.5rem"};
+
+  * {
+    font-family: "Inter", sans-serif;
+    font-weight: 500;
+  }
+`;
+const MenuHeader = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+`;
+const ContainerLogo = styled_components.div`
+  padding: 0 0.5rem;
+  animation: ${({ expand })=>expand ? fadeInAndShow : fadeOutAndHide} 0.25s
+    forwards;
+
+  svg,
+  img {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    max-height: 6.25rem;
+    max-width: 100%;
+  }
+`;
+const ItemsContainer = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const ItemMenu = styled_components.div`
+  align-items: center;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  gap: 0.75rem;
+  opacity: ${({ active })=>active ? "1" : "0.68"};
+  transition: all 0.18s ease-in-out;
+  width: 100%;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  div {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    padding: 0.5rem;
+    color: ${({ fontColor })=>fontColor || "#FFFFFF"};
+  }
+
+  span {
+    color: ${({ fontColor })=>fontColor || "#FFFFFF"};
+    opacity: ${({ expand })=>expand ? 1 : 0};
+    transform: translateX(${({ expand })=>expand ? "0" : "-8px"});
+    transition:
+      opacity 0.4s ease,
+      transform 0.4s ease;
+    white-space: ${({ expand })=>expand ? "wrap" : "nowrap"};
+    overflow: hidden;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+`;
+const SubItemsContainer = styled_components.div`
+  animation: ${({ isClosing })=>isClosing ? shrinkToRight : growFromRight}
+    0.4s ease forwards;
+  background-color: ${({ background })=>generateColorScale(background || "#000000")[500]};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  height: 100%;
+  padding: 1rem 0 0 1rem;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform-origin: right;
+  width: 15.25rem;
+  z-index: 1;
+`;
+const SubItemsHeader = styled_components.div`
+  padding: 0.5rem 0 1.5rem 0;
+
+  button {
+    align-items: center;
+    background: transparent;
+    border: none;
+    color: ${({ fontColor })=>fontColor || "#FFFFFF"};
+    cursor: pointer;
+    display: flex;
+    font-size: 1rem;
+    font-weight: 500;
+    gap: 0.5rem;
+    line-height: 1rem;
+    margin: 0;
+    padding: 0;
+    transition: opacity 0.2s ease;
+  }
+`;
+const SubItemsWrapper = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: calc(100vh - 5rem);
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${({ background })=>generateColorScale(background || "#00000")["dark" === getLuminance(background || "#00000") ? 400 : 600]};
+    border-radius: 4px;
+  }
+`;
+const SubMenuItem = styled_components.span`
+  border-radius: 6px;
+  color: ${({ fontColor })=>fontColor || "#FFFFFF"};
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  opacity: ${({ active })=>active ? "1" : "0.68"};
+  padding: 0.5rem 0.75rem;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+export { ContainerLogo, ItemMenu, ItemsContainer, MenuAside, MenuHeader, SubItemsContainer, SubItemsHeader, SubItemsWrapper, SubMenuItem };

package/dist/components/Menu/types/IconKeysType.d.ts

@@ -0,0 +1,2 @@
+import { ICONS } from "../constants/icons";
+export type IconsKeysType = keyof typeof ICONS;

package/dist/components/Menu/types/MenuItem.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from "react";
+import { IconsKeysType } from "./IconKeysType";
+export type SubMenuData = {
+    callback: () => void;
+    label: string;
+};
+export type SubMenu = {
+    callback: () => void;
+    Icon?: JSX.Element;
+    label: string;
+};
+export type MenuItemData = {
+    id: number;
+    description: string;
+    endpoint: string;
+    itens: MenuItemData[];
+    menu_icon: string;
+    translate_key: IconsKeysType;
+    ordenation: number;
+};
+export type MenuItem = {
+    callback: () => void;
+    submenus: SubMenu[];
+    icon: JSX.Element;
+    label: string;
+};

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

@@ -0,0 +1,6 @@
+interface BadgeProps {
+    text: string;
+    remove: () => void;
+}
+export default function Badge({ text, remove }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { BadgeContainer } from "./styles.js";
+import { Icon } from "@ftdata/f-icons";
+function Badge({ text, remove }) {
+    const [isVisible, setIsVisible] = useState(true);
+    const handleRemove = ()=>{
+        setIsVisible(false);
+        setTimeout(()=>{
+            remove();
+        }, 150);
+    };
+    return /*#__PURE__*/ jsxs(BadgeContainer, {
+        className: isVisible ? "" : "remove",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                children: text
+            }),
+            /*#__PURE__*/ jsx("button", {
+                onClick: handleRemove,
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "ui delete-disabled",
+                    size: "1rem",
+                    color: "currentColor",
+                    weight: "2"
+                })
+            })
+        ]
+    });
+}
+export { Badge as default };

package/dist/components/MultiSelect/Badge/styles.d.ts

@@ -0,0 +1 @@
+export declare const BadgeContainer: 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/Badge/styles.js

@@ -0,0 +1,57 @@
+import styled_components, { keyframes } from "styled-components";
+import { COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHTER } from "@ftdata/f-tokens";
+const popIn = keyframes`
+    0% {
+        opacity: 0.8;
+        transform: scale(0.97);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+`;
+const popOut = keyframes`
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(0.98);
+    }
+`;
+const BadgeContainer = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_LIGHTER};
+  border-radius: 0.25rem;
+  display: flex;
+  padding: 0.25rem 0.5rem;
+  gap: 0.25rem;
+  opacity: 0;
+  transform: scale(0.8);
+  animation: ${popIn} 0.15s forwards;
+
+  &.remove {
+    animation: ${popOut} 0.15s forwards;
+  }
+
+  span {
+    color: ${COLOR_NEUTRAL_DUSK};
+    font-size: 0.875rem;
+    line-height: 1rem;
+    max-width: 7.75rem;
+    white-space: nowrap;
+    overflow: hidden;
+    font-weight: 500;
+    text-overflow: ellipsis;
+  }
+
+  button {
+    cursor: pointer;
+    color: ${COLOR_NEUTRAL_DARKER};
+
+    &:hover {
+      color: ${COLOR_NEUTRAL_DUSK};
+    }
+  }
+`;
+export { BadgeContainer };

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

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