@ftdata/ui 0.0.2 → 0.0.4

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

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Input } from ".";
+/**
+ * Os inputs são usados em formulários, onde os usuários podem inserir informações e enviá-las.
+ * Este componente também funciona com os atributos nativos de um HTML  input element.
+ */
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do Input quando apenas as propriedades obrigatórias são fornecidas.
+ */
+export declare const Default: Story;
+/**
+ * Utilizado quando o input deve ser desabilitado para impedir a edição pelo usuário.
+ */
+export declare const Disabled: Story;
+/**
+ * Indica um erro de validação para o usuário.
+ */
+export declare const Error: Story;
+/**
+ * Mensagem para auxiliar o usuário em determinadas situações.
+ */
+export declare const HelpText: Story;
+/**
+ * Indica sucesso de validação para o usuário.
+ */
+export declare const Success: Story;
+/**
+ * Variação do input com icone.
+ * ###### Observação: O ícone apresentado neste exemplo é utilizado apenas para fins ilustrativos e não representa necessariamente a funcionalidade ou o design final do componente.
+ */
+export declare const WithIcon: Story;
+/**
+ * Rótulo exibido acima do input.
+ */
+export declare const TextField: Story;
+/**
+ * Variação do input obrigatório.
+ */
+export declare const Required: Story;

package/dist/components/Input/Input.stories.js

@@ -0,0 +1,135 @@
+import { jsx } from "react/jsx-runtime";
+import { Input } from "./index.js";
+import SearchIcon from "../../assets/SearchIcon.js";
+const meta = {
+    title: "DESIGN COMPONENTS/Input",
+    component: Input,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        disabled: {
+            description: "Define se o input est\xe1 desabilitado.",
+            table: {
+                defaultValue: {
+                    summary: "false"
+                }
+            }
+        },
+        error: {
+            description: "Define se o input possui erros de valida\xe7\xe3o.",
+            table: {
+                defaultValue: {
+                    summary: "false"
+                }
+            }
+        },
+        helpText: {
+            description: "Define o texto de ajuda abaixo do input. A cor muda se for uma mensagem de erro ou de sucesso"
+        },
+        success: {
+            description: "Define se os dados de entrada foram validados com sucesso.",
+            table: {
+                defaultValue: {
+                    summary: "false"
+                }
+            }
+        },
+        width: {
+            table: {
+                disable: true
+            }
+        },
+        icon: {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define o \xedcone que ser\xe1 renderizado dentro do input.",
+            mapping: {
+                "sem icone": null,
+                "com icone": SearchIcon
+            },
+            options: [
+                "sem icone",
+                "com icone"
+            ]
+        },
+        textField: {
+            description: "Define o texto acima do input."
+        },
+        margin: {
+            table: {
+                disable: true
+            }
+        },
+        required: {
+            description: "Define se o input \xe9 obrigat\xf3rio.",
+            table: {
+                defaultValue: {
+                    summary: "false"
+                }
+            }
+        },
+        placeholder: {
+            table: {
+                disable: true
+            }
+        }
+    }
+};
+const Input_stories = meta;
+const Default = {
+    args: {
+        placeholder: "Default"
+    }
+};
+const Disabled = {
+    args: {
+        placeholder: "Disabled",
+        disabled: true
+    }
+};
+const Error = {
+    args: {
+        placeholder: "Error",
+        error: true,
+        helpText: "Mensagem de Erro"
+    }
+};
+const HelpText = {
+    args: {
+        placeholder: "helpText",
+        helpText: "Help Text"
+    }
+};
+const Success = {
+    args: {
+        placeholder: "Success",
+        success: true,
+        helpText: "Mensagem de Sucesso"
+    }
+};
+const WithIcon = {
+    args: {
+        placeholder: "Icon",
+        icon: /*#__PURE__*/ jsx(SearchIcon, {})
+    }
+};
+const TextField = {
+    args: {
+        placeholder: "TextField",
+        textField: "Text Field"
+    }
+};
+const Required = {
+    args: {
+        placeholder: "Required",
+        required: true,
+        textField: "Required",
+        margin: ""
+    }
+};
+export { Default, Disabled, Error, HelpText, Required, Success, TextField, WithIcon, Input_stories as default };

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

@@ -0,0 +1,14 @@
+import React, { InputHTMLAttributes, JSX } from "react";
+import { IconsNames } from "@ftdata/f-icons";
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    disabled?: boolean;
+    error?: boolean;
+    helpText?: string;
+    success?: boolean;
+    width?: string | number;
+    icon: IconsNames | JSX.Element;
+    textField?: string;
+    margin?: string;
+    required?: boolean;
+}
+export declare const Input: React.FC<InputProps>;

package/dist/components/Input/index.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Container, ContainerTextField, DivIcon, HelpText, InputContainer, InputControl, TextField } from "./styles.js";
+import DoneCircleIcon from "../../assets/DoneCircleIcon.js";
+import CancelSquareIcon from "../../assets/CancelSquareIcon.js";
+import { Icon } from "@ftdata/f-icons";
+const Input = ({ disabled, error, helpText, name, success, width, icon, textField, margin, required, ...rest })=>/*#__PURE__*/ jsxs(Container, {
+        margin: margin,
+        children: [
+            textField && /*#__PURE__*/ jsxs(ContainerTextField, {
+                children: [
+                    /*#__PURE__*/ jsx(TextField, {
+                        children: textField
+                    }),
+                    required && /*#__PURE__*/ jsx("div", {
+                        className: "required",
+                        children: "*"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(InputContainer, {
+                width: width,
+                error: error,
+                success: success,
+                disabled: disabled,
+                children: [
+                    icon && /*#__PURE__*/ jsxs(DivIcon, {
+                        children: [
+                            "string" == typeof icon && /*#__PURE__*/ jsx(Icon, {
+                                name: icon
+                            }),
+                            "object" == typeof icon && icon
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(InputControl, {
+                        ...rest,
+                        disabled: disabled,
+                        id: name
+                    })
+                ]
+            }),
+            helpText && /*#__PURE__*/ jsxs(HelpText, {
+                disabled: disabled,
+                error: error,
+                success: success,
+                children: [
+                    !disabled && error && /*#__PURE__*/ jsx(CancelSquareIcon, {}) || success && /*#__PURE__*/ jsx(DoneCircleIcon, {}),
+                    helpText
+                ]
+            })
+        ]
+    });
+export { Input };

package/dist/components/Input/styles.d.ts

@@ -0,0 +1,17 @@
+import { Component } from "react";
+import type { InputProps } from "./index";
+export declare const ContainerTextField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TextField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Partial<InputProps>>> & string;
+export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Partial<InputProps>>> & string;
+export declare const DivIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare class ReactInputMask extends Component<InputProps> {
+}
+export declare const InputControl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+interface HelpTextProps extends React.AllHTMLAttributes<HTMLSpanElement> {
+    disabled?: boolean;
+    error?: boolean;
+    success?: boolean;
+}
+export declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, HelpTextProps>> & string;
+export {};

package/dist/components/Input/styles.js

@@ -0,0 +1,96 @@
+import styled_components from "styled-components";
+import { BORDER_RADIUS_SM, COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_DARK, COLOR_SUCCESS_MEDIUM, FONT_FAMILY_01, FONT_SIZE_MD, FONT_SIZE_SM, FONT_SIZE_XS, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM, LINE_HEIGHT_MEDIUM, SPACING_INLINE_01, SPACING_INLINE_02, SPACING_INSET_SM, SPACING_SQUISH_NANO, SPACING_STACK_02 } from "@ftdata/f-tokens";
+import { Component } from "react";
+const ContainerTextField = styled_components.div`
+  display: flex;
+  margin-bottom: ${SPACING_STACK_02};
+  gap: 4px;
+
+  .required {
+    color: ${COLOR_DANGER_MEDIUM};
+  }
+`;
+const TextField = styled_components.span`
+  font-weight: ${FONT_WEIGHT_BOLD};
+  font-size: ${FONT_SIZE_SM};
+  color: ${COLOR_NEUTRAL_DUSK};
+  font-family: "Inter";
+`;
+const Container = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  margin: ${({ margin })=>margin};
+
+  .required {
+    color: ${COLOR_DANGER_MEDIUM};
+  }
+`;
+const InputContainer = styled_components.div`
+  display: flex;
+  align-items: center;
+  width: ${({ width })=>width ? width : "230px"};
+  background-color: ${({ disabled })=>disabled ? COLOR_NEUTRAL_LIGHTER : COLOR_NEUTRAL_DAY};
+  border-radius: ${BORDER_RADIUS_SM};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ disabled, error, success })=>disabled && COLOR_NEUTRAL_LIGHT || error && COLOR_DANGER_MEDIUM || success && COLOR_SUCCESS_MEDIUM || COLOR_NEUTRAL_MEDIUM};
+  padding: ${SPACING_SQUISH_NANO};
+  height: 40px;
+
+  &:focus-within {
+    border: 1.5px solid ${COLOR_ACCENT_MEDIUM};
+    transition: all 0.2s linear ease-in;
+  }
+
+  &,
+  input {
+    cursor: ${({ disabled })=>disabled ? "not-allowed" : "initial"};
+  }
+
+  svg {
+    color: ${({ disabled })=>disabled ? COLOR_NEUTRAL_LIGHT : COLOR_NEUTRAL_DARK};
+  }
+`;
+const DivIcon = styled_components.div`
+  width: ${SPACING_INSET_SM};
+  height: ${SPACING_INSET_SM};
+  margin-right: ${SPACING_INLINE_02};
+`;
+class ReactInputMask extends Component {
+}
+const InputControl = styled_components.input`
+  border: none;
+  box-sizing: border-box;
+  color: ${COLOR_NEUTRAL_DUSK};
+  font-family: ${FONT_FAMILY_01};
+  font-weight: ${FONT_WEIGHT_MEDIUM};
+  font-size: ${FONT_SIZE_MD};
+  line-height: ${LINE_HEIGHT_MEDIUM};
+  width: 100%;
+  background: transparent;
+  outline: none;
+
+  ::placeholder {
+    color: ${({ disabled })=>disabled ? COLOR_NEUTRAL_LIGHT : COLOR_NEUTRAL_MEDIUM};
+  }
+`;
+const HelpText = styled_components("span")`
+  align-items: center;
+  box-sizing: border-box;
+  color: ${({ disabled, error, success })=>disabled && COLOR_NEUTRAL_MEDIUM || error && COLOR_DANGER_MEDIUM || success && COLOR_SUCCESS_DARK || COLOR_NEUTRAL_DARK};
+  display: flex;
+  font-family: ${FONT_FAMILY_01};
+  font-weight: ${FONT_WEIGHT_MEDIUM};
+  line-height: ${LINE_HEIGHT_MEDIUM};
+  font-size: ${FONT_SIZE_XS};
+  margin-top: 8px;
+
+  svg {
+    margin-right: ${SPACING_INLINE_01};
+    path {
+      stroke: ${({ error, success })=>error && COLOR_DANGER_MEDIUM || success && COLOR_SUCCESS_MEDIUM || COLOR_NEUTRAL_DARK};
+    }
+  }
+`;
+export { Container, ContainerTextField, DivIcon, HelpText, InputContainer, InputControl, ReactInputMask, TextField };

package/dist/types/feedback.d.ts

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

package/package.json

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