@gustavo-valsechi/client 1.3.23 → 1.3.25

package/dist/components/types/form/index.d.ts

@@ -0,0 +1,3 @@
+import { IForm } from "@interfaces";
+export * from "./types";
+export declare function Form(props: IForm): import("react/jsx-runtime").JSX.Element;

package/dist/components/types/form/index.mjs

@@ -0,0 +1,711 @@
+"use client";
+"use client";
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// components/types/form/index.tsx
+import React4, { useEffect, useRef as useRef2 } from "react";
+
+// components/types/form/styles.tsx
+import styled from "styled-components";
+var Container = styled.form`
+    width: 100%;
+
+    .form-buttons {
+        width: 100%;
+        padding-top: 1rem;
+
+        button {
+            width: 100%;
+            margin-top: 1rem;
+        }
+    }
+`;
+
+// components/types/form/index.tsx
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import _6 from "lodash";
+
+// components/types/form/types/index.tsx
+var types_exports = {};
+__export(types_exports, {
+  Button: () => Button,
+  InputDateTime: () => InputDateTime,
+  InputFile: () => InputFile,
+  InputLabel: () => InputLabel,
+  InputSelect: () => InputSelect,
+  InputText: () => InputText,
+  InputTextarea: () => InputTextarea
+});
+
+// components/types/form/types/file/index.tsx
+import { useRef } from "react";
+
+// components/types/form/types/file/styles.tsx
+import styled2 from "styled-components";
+var Container2 = styled2.div`
+    width: 100%;
+    padding-top: .3rem;
+
+    .iz-image-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
+        border-radius: 5px;
+        overflow: hidden;
+        padding: .5rem 1rem;
+        width: 100%;
+        font-size: .8rem;
+        background: ${(props) => props.disabled ? "${({ theme }) => theme.t2}" : "${({ theme }) => theme.primary}"};
+        opacity: ${(props) => props.disabled ? ".7" : "1"};
+        color: ${({ theme }) => theme.t6};
+        cursor: pointer;
+    }
+
+    .iz-input-error {
+        color: ${({ theme }) => theme.negative};
+        font-size: .7rem;
+    }
+`;
+
+// components/types/form/types/label/styles.tsx
+import styled3 from "styled-components";
+var Container3 = styled3.label`
+    font-size: .8rem;
+    font-weight: 500;
+    color: ${({ theme }) => theme.t6};
+`;
+
+// components/types/form/types/label/index.tsx
+import { jsx } from "react/jsx-runtime";
+function InputLabel(props) {
+  return /* @__PURE__ */ jsx(Container3, { className: props.className, children: props.children });
+}
+
+// components/types/form/types/file/index.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function InputFile(props) {
+  var _a;
+  const inputRef = useRef({});
+  const register = (props.register || ((name) => ({})))(props.name || "");
+  const readImage = (data) => {
+    if (props.onPreview) props.onPreview(URL.createObjectURL(data));
+    if (props.onChange) props.onChange(data);
+  };
+  return /* @__PURE__ */ jsxs(Container2, { className: props.className, error: props.error, disabled: props.disabled, children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        hidden: true,
+        type: "file",
+        id: "file",
+        accept: "image/*",
+        ref: inputRef,
+        disabled: props.disabled,
+        name: props.name,
+        onFocus: () => {
+          if (props.onFocus) props.onFocus(props.name);
+        },
+        ...register,
+        onChange: (e) => {
+          var _a2;
+          register.onChange(e);
+          readImage((_a2 = e.target.files) == null ? void 0 : _a2[0]);
+        }
+      }
+    ),
+    !!props.label && /* @__PURE__ */ jsxs(InputLabel, { children: [
+      props.label,
+      props.required ? "*" : ""
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "iz-image-content", onClick: () => inputRef.current.click(), children: ((_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.value) || "selecione uma imagem" }),
+    !!props.error && /* @__PURE__ */ jsx2("div", { className: "iz-input-error", children: props.error })
+  ] });
+}
+
+// components/types/form/types/input/index.tsx
+import { useState } from "react";
+
+// components/types/form/types/input/styles.tsx
+import styled4 from "styled-components";
+var Container4 = styled4.div`
+    width: 100%;
+    padding-top: .3rem;
+
+    .iz-input-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
+        border-radius: 5px;
+        overflow: hidden;
+        padding-right: ${({ password }) => password ? ".6rem" : "0rem"};
+        background-color: ${({ theme }) => theme.primary};
+
+        input {
+            border: 0;
+            padding: .5rem 1rem;
+            width: 100%;
+            font-size: .8rem;
+            background-color: ${({ theme }) => theme.primary};
+            color: ${({ theme }) => theme.t6};
+
+            &:disabled {
+                background-color: ${({ theme }) => theme.t2};
+                color: ${({ theme }) => theme.t6};
+                opacity: .7;
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+
+        i {
+            color: ${({ theme }) => theme.t3};
+            cursor: pointer;
+        }
+    }
+
+    .iz-input-error {
+        color: ${({ theme }) => theme.negative};
+        font-size: .7rem;
+    }
+`;
+
+// components/types/form/types/input/index.tsx
+import _ from "lodash";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function InputText(props) {
+  const [showPassword, setShowPassword] = useState(false);
+  const register = (props.register || ((name) => ({})))(props.name || "");
+  const onChange = (event) => {
+    const value = event.target.value || "";
+    event.target.value = props.mask ? props.mask(value) : value;
+    if (register.onChange) register.onChange(event);
+    if (props.onChange) props.onChange(value);
+  };
+  return /* @__PURE__ */ jsxs2(Container4, { className: props.className, error: props.error, password: props.type === "password", children: [
+    !!props.label && /* @__PURE__ */ jsxs2(InputLabel, { children: [
+      props.label,
+      props.required ? "*" : ""
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "iz-input-content", children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          ..._.omit(props, ["className", "register", "mask"]),
+          type: props.type === "password" ? showPassword ? "text" : "password" : props.type,
+          maxLength: props.maxLength || 255,
+          onFocus: () => {
+            if (props.onFocus) props.onFocus(props.name);
+          },
+          ...register,
+          onChange
+        }
+      ),
+      props.type === "password" && /* @__PURE__ */ jsx3(
+        "i",
+        {
+          "aria-hidden": true,
+          className: showPassword ? "fa-solid fa-eye-slash" : "fa-solid fa-eye",
+          onClick: () => setShowPassword(!showPassword)
+        }
+      )
+    ] }),
+    !!props.error && /* @__PURE__ */ jsx3("div", { className: "iz-input-error", children: props.error })
+  ] });
+}
+
+// components/types/form/types/select/index.tsx
+import { useState as useState2 } from "react";
+
+// components/types/form/types/select/styles.tsx
+import styled5 from "styled-components";
+var Container5 = styled5.div`
+    width: 100%;
+    padding-top: .3rem;
+
+    .iz-input-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
+        border-radius: 5px;
+        overflow: hidden;
+        position: relative;
+        cursor: pointer;
+
+        select {
+            border: 0;
+            padding: .5rem 2.3rem .5rem 1rem;
+            width: 100%;
+            font-size: .8rem;
+            appearance: none;
+            cursor: pointer;
+            background-color: ${({ theme }) => theme.primary};
+            color: ${({ theme }) => theme.t6};
+
+            &:disabled {
+                background-color: ${({ theme }) => theme.t2};
+                color: ${({ theme }) => theme.t6};
+                opacity: .7;
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+
+        i {
+            position: absolute;
+            top: 50%;
+            right: .8rem;
+            transform: translateY(-50%);
+            font-size: .8rem;
+            color: ${({ theme }) => theme.t6};
+        }
+    }
+
+    .iz-input-error {
+        color: ${({ theme }) => theme.negative};
+        font-size: .7rem;
+    }
+`;
+
+// components/types/form/types/select/index.tsx
+import _2 from "lodash";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function InputSelect(props) {
+  const [focus, setFocus] = useState2(false);
+  const register = (props.register || ((name) => ({})))(props.name || "");
+  const onChange = (event) => {
+    const value = event.target.value || "";
+    if (register.onChange) register.onChange(event);
+    if (props.onChange) props.onChange(value);
+  };
+  return /* @__PURE__ */ jsxs3(Container5, { className: props.className, error: props.error, children: [
+    !!props.label && /* @__PURE__ */ jsxs3(InputLabel, { children: [
+      props.label,
+      props.required ? "*" : ""
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "iz-input-content", children: [
+      /* @__PURE__ */ jsx4(
+        "select",
+        {
+          ..._2.omit(props, ["className", "onChange", "onFocus", "options", "onMouseDown", "onBlur", "maxLength", "required", "register"]),
+          onMouseDown: () => setFocus(!focus),
+          onFocus: () => {
+            if (props.onFocus) props.onFocus(props.name);
+          },
+          ...register,
+          onBlur: (event) => {
+            if (register.onBlur) register.onBlur(event);
+            setFocus(false);
+          },
+          onChange,
+          children: _2.map(
+            props.options,
+            (data, index) => /* @__PURE__ */ jsx4(
+              "option",
+              {
+                value: Object.keys(data),
+                children: Object.values(data)
+              },
+              index
+            )
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx4("i", { "aria-hidden": true, className: focus ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down" })
+    ] }),
+    !!props.error && /* @__PURE__ */ jsx4("div", { className: "iz-input-error", children: props.error })
+  ] });
+}
+
+// components/types/form/types/button/styles.tsx
+import styled6 from "styled-components";
+var Container6 = styled6.button`
+    border-radius: 5px;
+    font-size: .8rem;
+    font-weight: 500;
+    transition: ease .3s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${(props) => props.transparent ? props.theme.t6 : props.outline ? props.color || props.theme.secondary : "#fff !important"};
+    background: ${(props) => props.transparent ? "transparent" : props.outline ? props.theme.t05 : props.color || props.theme.secondary};
+    border: 1px solid ${(props) => props.transparent ? "transparent" : props.outline ? props.theme.t05 : props.color || props.theme.secondary};
+    pointer-events: ${(props) => props.loading === "true" ? "none" : "auto"};
+    cursor: ${(props) => props.loading === "true" ? "default" : "pointer"};
+    opacity: ${(props) => props.loading === "true" ? 0.6 : 1};
+    padding: .4rem 2.5rem;
+    transition: ease .3s;
+
+    span {
+        text-align: center;
+        cursor: ${(props) => props.loading === "true" ? "default" : "pointer"};
+    }
+
+    &:disabled {
+        pointer-events: none;
+        
+        &::before {
+            opacity: .6;
+        }
+    }
+
+    &:hover {
+        opacity: .9;
+        color: ${(props) => props.transparent ? props.theme.t6 : props.outline ? props.color || props.theme.secondary : "#fff"};
+        
+        &::before {
+            background: ${(props) => props.transparent ? "transparent" : props.color || props.theme.secondary};
+        }
+    }
+`;
+
+// components/types/form/types/button/loading/styles.tsx
+import styled7 from "styled-components";
+var Container7 = styled7.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 2rem;
+    margin-right: .5rem;
+
+    div {
+        width: .5rem;
+        height: .5rem;
+        border-radius: 1rem;
+        background: rgb(255, 255, 255, 1);
+
+        &:nth-child(1) {
+            animation: blinkOne infinite ease 2s;
+        }
+
+        &:nth-child(2) {
+            animation: blinkTwo infinite ease 2s;
+        }
+
+        &:nth-child(3) {
+            animation: blinkThree infinite ease 2s;
+        }
+    }
+
+    @keyframes blinkOne {
+        0% {
+            opacity: 0.8;
+        }
+        20% {
+            opacity: 0.2;
+        }
+        40% {
+            opacity: 0.2;
+        }
+        60% {
+            opacity: 0.2;
+        }
+        80% {
+            opacity: 0.2;
+        }
+        100% {
+            opacity: 0.8;
+        }
+    }
+
+    @keyframes blinkTwo {
+        0% {
+            opacity: 0.2;
+        }
+        20% {
+            opacity: 0.8;
+        }
+        40% {
+            opacity: 0.2;
+        }
+        60% {
+            opacity: 0.2;
+        }
+        80% {
+            opacity: 0.8;
+        }
+        100% {
+            opacity: 0.2;
+        }
+    }
+
+    @keyframes blinkThree {
+        0% {
+            opacity: 0.2;
+        }
+        25% {
+            opacity: 0.2;
+        }
+        50% {
+            opacity: 0.8;
+        }
+        75% {
+            opacity: 0.2;
+        }
+        100% {
+            opacity: 0.2;
+        }
+    }
+`;
+
+// components/types/form/types/button/loading/index.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function Loading() {
+  return /* @__PURE__ */ jsxs4(Container7, { children: [
+    /* @__PURE__ */ jsx5("div", {}),
+    /* @__PURE__ */ jsx5("div", {}),
+    /* @__PURE__ */ jsx5("div", {})
+  ] });
+}
+
+// components/types/form/types/button/index.tsx
+import _3 from "lodash";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function Button(props) {
+  return /* @__PURE__ */ jsxs5(
+    Container6,
+    {
+      loading: String(!!props.loading),
+      disabled: props.disabled,
+      type: props.type || "button",
+      ..._3.omit(props, ["loading", "type"]),
+      children: [
+        !!props.loading && /* @__PURE__ */ jsx6(Loading, {}),
+        /* @__PURE__ */ jsx6("span", { children: props.label })
+      ]
+    }
+  );
+}
+
+// components/types/form/types/datetime/styles.tsx
+import styled8 from "styled-components";
+var Container8 = styled8.div`
+    width: 100%;
+    padding-top: .3rem;
+
+    .iz-input-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
+        border-radius: 5px;
+        overflow: hidden;
+
+        input {
+            border: 0;
+            padding: .5rem 1rem;
+            width: 100%;
+            font-size: .8rem;
+            background-color: ${({ theme }) => theme.primary};
+            color: ${({ theme }) => theme.t6};
+            color-scheme: ${(props) => props.theme || "light"};
+
+            &:disabled {
+                background-color: ${({ theme }) => theme.t2};
+                color: ${({ theme }) => theme.t6};
+                opacity: .7;
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+    }
+
+    .iz-input-error {
+        color: ${({ theme }) => theme.negative};
+        font-size: .7rem;
+    }
+`;
+
+// components/types/form/types/datetime/index.tsx
+import _4 from "lodash";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function InputDateTime(props) {
+  const register = (props.register || ((name) => ({})))(props.name || "");
+  const onChange = (event) => {
+    const value = event.target.value || "";
+    event.target.value = props.mask ? props.mask(value) : value;
+    if (register.onChange) register.onChange(event);
+    if (props.onChange) props.onChange(event);
+  };
+  return /* @__PURE__ */ jsxs6(Container8, { className: props.className, error: props.error, children: [
+    !!props.label && /* @__PURE__ */ jsxs6(InputLabel, { children: [
+      props.label,
+      props.required ? "*" : ""
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "iz-input-content", children: /* @__PURE__ */ jsx7(
+      "input",
+      {
+        ..._4.omit(props, ["className", "onChange", "mask", "type", "required", "register"]),
+        type: "datetime-local",
+        onFocus: () => {
+          if (props.onFocus) props.onFocus(props.name);
+        },
+        maxLength: props.maxLength || 255,
+        ...register,
+        onChange
+      }
+    ) }),
+    !!props.error && /* @__PURE__ */ jsx7("div", { className: "iz-input-error", children: props.error })
+  ] });
+}
+
+// components/types/form/types/textarea/styles.tsx
+import styled9 from "styled-components";
+var Container9 = styled9.div`
+    width: 100%;
+    padding-top: .3rem;
+
+    .iz-input-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
+        border-radius: 5px;
+        overflow: hidden;
+
+        textarea {
+            border: 0;
+            padding: .5rem 1rem;
+            width: 100%;
+            font-size: .8rem;
+            background-color: ${({ theme }) => theme.primary};
+            color: ${({ theme }) => theme.t6};
+
+            &:disabled {
+                background-color: ${({ theme }) => theme.t2};
+                color: ${({ theme }) => theme.t6};
+                opacity: .7;
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+    }
+
+    .iz-input-error {
+        color: ${({ theme }) => theme.negative};
+        font-size: .7rem;
+    }
+`;
+
+// components/types/form/types/textarea/index.tsx
+import _5 from "lodash";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function InputTextarea(props) {
+  const register = (props.register || ((name) => ({})))(props.name || "");
+  const onChange = (event) => {
+    const value = event.target.value || "";
+    event.target.value = props.mask ? props.mask(value) : value;
+    if (register.onChange) register.onChange(event);
+    if (props.onChange) props.onChange(value);
+  };
+  return /* @__PURE__ */ jsxs7(Container9, { className: props.className, error: props.error, children: [
+    !!props.label && /* @__PURE__ */ jsxs7(InputLabel, { children: [
+      props.label,
+      props.required ? "*" : ""
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "iz-input-content", children: /* @__PURE__ */ jsx8(
+      "textarea",
+      {
+        ..._5.omit(props, ["onFocus", "maxLength", "className", "onChange", "mask", "rows", "required", "register"]),
+        maxLength: props.maxLength,
+        rows: props.rows || 5,
+        onFocus: () => {
+          if (props.onFocus) props.onFocus(props.name);
+        },
+        ...register,
+        onChange
+      }
+    ) }),
+    !!props.error && /* @__PURE__ */ jsx8("div", { className: "iz-input-error", children: props.error })
+  ] });
+}
+
+// components/types/form/index.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function Form(props) {
+  const formRef = props.formRef || useRef2({});
+  const setSchema = () => {
+    const schema2 = {};
+    _6.forEach(props.inputs, (data) => {
+      if (!data.validation) return;
+      schema2[data.name] = data.validation;
+    });
+    if (props.validation) return props.validation(z.object(schema2));
+    return z.object(schema2);
+  };
+  const schema = setSchema();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors }
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: props.defaultValues,
+    mode: "all"
+  });
+  useEffect(() => {
+    if (!props.clearWhen) return;
+    reset(void 0, { keepErrors: false });
+  }, [props.clearWhen]);
+  useEffect(() => {
+    var _a;
+    if (!props.defaultValues || !((_a = Object.keys(props.defaultValues || {})) == null ? void 0 : _a.length)) return;
+    _6.forEach(props.defaultValues, (value, key) => {
+      const input = _6.find(props.inputs, (data) => data.name === key);
+      props.defaultValues[key] = input.mask ? input.mask(value) : value;
+    });
+    reset(props.defaultValues, { keepErrors: false });
+  }, [props.defaultValues]);
+  const component = (data) => {
+    var _a;
+    const component2 = types_exports[_6.camelCase(data.type)];
+    const TypeComponent = component2 || InputText;
+    return /* @__PURE__ */ jsx9(
+      TypeComponent,
+      {
+        ..._6.omit(data, ["validation"]),
+        id: data.name,
+        type: component2 ? void 0 : data.type,
+        error: (_a = errors[data.name]) == null ? void 0 : _a.message,
+        register
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs8(Container, { ref: formRef, onSubmit: handleSubmit(props.onSubmit), children: [
+    _6.map(
+      props.inputs,
+      (data, index) => /* @__PURE__ */ jsx9(React4.Fragment, { children: component(data) }, index)
+    ),
+    _6.isArray(props.buttons) && /* @__PURE__ */ jsx9("div", { className: "form-buttons", children: _6.map(
+      props.buttons,
+      (data, index) => /* @__PURE__ */ jsx9(Button, { ...data }, index)
+    ) })
+  ] });
+}
+export {
+  Button,
+  Form,
+  InputDateTime,
+  InputFile,
+  InputLabel,
+  InputSelect,
+  InputText,
+  InputTextarea
+};