@processhub-lib/react 1.0.3 → 1.0.5

package/src/scripts/generate-endpoints.ts

@@ -1,184 +0,0 @@
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const INPUT_FILE = path.resolve(__dirname, "../../endpoints.json");
-const OUTPUT_FILE = path.resolve(__dirname, "../../endpoints.ts");
-
-const KEY_MAPPING: Record<string, string> = {
-  lista: "list",
-  busca: "search",
-  incluir: "create",
-  alterar: "update",
-  deletar: "delete",
-  posicao: "position",
-  etapa: "etapas",
-  form: "form",
-  usuario: "user",
-  auth: "auth",
-  cidade: "city",
-  pais: "country",
-  provincia: "province",
-  tipo: "type",
-  status: "status",
-  pergunta: "questions",
-  lead: "lead",
-  apoio: "support",
-  organizacao: "organization",
-  atualizar: "update",
-  resposta: "response",
-  reservar: "reserve",
-  cancelar: "cancel",
-  vendedor: "seller",
-  inativar: "inactivate",
-  ativar: "activate",
-};
-
-function mapKey(key: string): string {
-  return KEY_MAPPING[key] || key;
-}
-
-function cleanPath(urlPath: string[]): string[] {
-  // Remove empty strings and common prefixes
-  return urlPath.filter(
-    (segment) =>
-      segment &&
-      segment !== "api" &&
-      // segment !== "v1" && // Keep version
-      !segment.startsWith("{{")
-  );
-}
-
-function setNestedValue(obj: any, path: string[], value: string) {
-  let current = obj;
-  for (let i = 0; i < path.length; i++) {
-    const segment = path[i];
-    const key = mapKey(segment);
-
-    if (i === path.length - 1) {
-      // We are at the leaf, trying to set a value
-      if (current[key] && typeof current[key] === "object") {
-        // Collision: key is already an object (container)
-        // Assign to .list
-        current[key].list = value;
-      } else {
-        // If it's a string, we overwrite (or it's the first time)
-        current[key] = value;
-      }
-    } else {
-      // We are traversing down
-      if (!current[key]) {
-        current[key] = {};
-      } else if (typeof current[key] === "string") {
-        // Collision: key is a string (leaf), but we need to go deeper
-        // Convert string to object with .list
-        current[key] = { list: current[key] };
-      }
-      current = current[key];
-    }
-  }
-}
-
-function generateEndpoints() {
-  try {
-    const content = fs.readFileSync(INPUT_FILE, "utf-8");
-    const collection = JSON.parse(content);
-    const endpoints: any = {};
-
-    function traverse(items: any[]) {
-      items.forEach((item) => {
-        if (item.item) {
-          traverse(item.item);
-        } else if (item.request && item.request.url) {
-          const url = item.request.url;
-          let pathSegments: string[] = [];
-
-          if (Array.isArray(url.path)) {
-            pathSegments = url.path;
-          } else if (typeof url === "string") {
-            // Handle raw string if necessary, but Postman v2.1 usually has object
-            // If it's a string we might need to parse it
-            const urlObj = new URL(
-              url.replace("{{develop}}", "http://placeholder")
-            );
-            pathSegments = urlObj.pathname.split("/").filter(Boolean);
-          } else if (url.raw) {
-            // Fallback to raw if path array is missing/empty but raw exists
-            // Remove query params
-            const rawPath = url.raw.split("?")[0];
-            pathSegments = rawPath.split("/").filter(Boolean);
-          }
-
-          const cleanedPath = cleanPath(pathSegments);
-
-          if (cleanedPath.length > 0) {
-            // Reconstruct the full path for the value
-            // We want the path starting with /api/v1...
-            // The user example shows: '/api/v1/funil/lista'
-            // So we should find where 'api' starts in the original segments
-
-            let fullPath = "";
-            if (Array.isArray(url.path)) {
-              fullPath = "/" + url.path.join("/");
-            } else if (url.raw) {
-              const urlStr = url.raw.split("?")[0];
-              // Try to extract from api/v1
-              const match = urlStr.match(/(api\/v1\/.*)/);
-              if (match) {
-                fullPath = "/" + match[1];
-              } else {
-                fullPath = urlStr;
-              }
-            }
-
-            // Ensure it starts with /api/v1 if possible, or just use what we have
-            // The user example has /api/v1 prefix.
-
-            setNestedValue(endpoints, cleanedPath, fullPath);
-          }
-        }
-      });
-    }
-
-    if (collection.item) {
-      traverse(collection.item);
-    }
-
-    // Fix quotes to single quotes to match style if needed, but JSON.stringify uses double.
-    // The user example used single quotes for values and keys (where possible).
-    // Let's try to make it prettier.
-
-    // We can use a regex to replace double quotes with single quotes for values,
-    // and remove quotes from keys if they are valid identifiers.
-
-    // Actually, JSON.stringify is fine, but let's try to match the user's requested format strictly.
-    // The user example:
-    // export const ENDPOINTS = {
-    //   funil: {
-    //     list: '/api/v1/funil/lista',
-    // ...
-
-    // Let's use a custom stringifier or just simple replacement.
-
-    const finalOutput = `// ⚠️ Arquivo gerado automaticamente — NÃO EDITE
-
-export const ENDPOINTS = ${JSON.stringify(endpoints, null, 2)
-        .replace(/"([^"]+)":/g, "$1:")
-        .replace(/: "([^"]+)"/g, ": '$1'")} as const;
-
-type DeepValueOf<T> = T extends object ? DeepValueOf<T[keyof T]> : T;
-export type Route = DeepValueOf<typeof ENDPOINTS>;
-`;
-
-    fs.writeFileSync(OUTPUT_FILE, finalOutput);
-    console.log(`Successfully generated endpoints to ${OUTPUT_FILE}`);
-  } catch (error) {
-    console.error("Error generating endpoints:", error);
-    process.exit(1);
-  }
-}
-
-generateEndpoints();

package/src/style.css

@@ -1 +0,0 @@
-@import "tailwindcss";

package/src/ui/Button/colors.tsx

@@ -1,163 +0,0 @@
-export const COLORS = {
-  green: {
-    solid: {
-      bg: "bg-green-500",
-      hover: "hover:bg-green-600 hover:text-white",
-      text: "text-white",
-      border: "border-green-500",
-    },
-    outline: {
-      bg: "bg-transparent",
-      hover: "hover:bg-green-600 hover:text-white",
-      text: "text-green-600",
-      border: "border-green-500",
-    },
-    ghost: {
-      bg: "bg-transparent",
-      hover: "hover:bg-green-600 hover:text-white",
-      text: "text-green-600",
-      border: "border-transparent",
-    },
-  },
-  blue: {
-    solid: {
-      bg: "bg-blue-500",
-      hover: "hover:bg-blue-600 hover:text-white",
-      text: "text-white",
-      border: "border-blue-500",
-    },
-    outline: {
-      bg: "bg-transparent",
-      hover: "hover:bg-blue-500 hover:text-white",
-      text: "text-blue-600",
-      border: "border-blue-500",
-    },
-    ghost: {
-      bg: "bg-transparent",
-      hover: "hover:bg-blue-500 hover:text-white",
-      text: "text-blue-600",
-      border: "border-transparent",
-    },
-  },
-  red: {
-    solid: {
-      bg: "bg-red-500",
-      hover: "hover:bg-red-600 hover:text-white",
-      text: "text-white",
-      border: "border-red-500",
-    },
-    outline: {
-      bg: "bg-transparent",
-      hover: "hover:bg-red-500 hover:text-white",
-      text: "text-red-600",
-      border: "border-red-500",
-    },
-    ghost: {
-      bg: "bg-transparent",
-      hover: "hover:bg-red-500 hover:text-white",
-      text: "text-red-600",
-      border: "border-transparent",
-    },
-  },
-  yellow: {
-    solid: {
-      bg: "bg-yellow-500",
-      hover: "hover:bg-yellow-600 hover:text-black",
-      text: "text-black",
-      border: "border-yellow-500",
-    },
-    outline: {
-      bg: "bg-transparent",
-      hover: "hover:bg-yellow-500 hover:text-white",
-      text: "text-yellow-600",
-      border: "border-yellow-500",
-    },
-    ghost: {
-      bg: "bg-transparent",
-      hover: "hover:bg-yellow-500 hover:text-white",
-      text: "text-yellow-600",
-      border: "border-transparent",
-    },
-  },
-
-  primary: {
-    solid: {
-      bg: "bg-primary",
-      hover: "hover:bg-primary-hover hover:text-foreground",
-      text: "text-foreground",
-      border: "border-primary",
-    },
-    outline: {
-      bg: "bg-transparent",
-      hover: "hover:bg-primary hover:text-foreground",
-      text: "text-primary",
-      border: "border-primary",
-    },
-    ghost: {
-      bg: "bg-transparent",
-      hover: "hover:bg-primary hover:text-foreground",
-      text: "text-primary",
-      border: "border-transparent",
-    },
-  },
-  secondary: {
-    solid: {
-      bg: "bg-secondary",
-      hover: "hover:bg-secondary/80 hover:text-secondary-foreground",
-      text: "text-secondary-foreground",
-      border: "border-secondary",
-    },
-    outline: {
-      bg: "bg-transparent",
-      hover: "hover:bg-secondary hover:text-secondary-foreground",
-      text: "text-secondary",
-      border: "border-secondary",
-    },
-    ghost: {
-      bg: "bg-transparent",
-      hover: "hover:bg-secondary hover:text-secondary-foreground",
-      text: "text-secondary",
-      border: "border-transparent",
-    },
-  },
-  destructive: {
-    solid: {
-      bg: "bg-destructive",
-      hover: "hover:bg-destructive/90 hover:text-destructive-foreground",
-      text: "text-destructive-foreground",
-      border: "border-destructive",
-    },
-    outline: {
-      bg: "bg-transparent",
-      hover: "hover:bg-destructive hover:text-destructive-foreground",
-      text: "text-destructive",
-      border: "border-destructive",
-    },
-    ghost: {
-      bg: "bg-transparent",
-      hover: "hover:bg-destructive hover:text-destructive-foreground",
-      text: "text-destructive",
-      border: "border-transparent",
-    },
-  },
-  card: {
-    solid: {
-      bg: "bg-card",
-      hover: "hover:bg-accent hover:text-card-foreground",
-      text: "text-card-foreground",
-      border: "border-border",
-    },
-    outline: {
-      bg: "bg-transparent",
-      hover: "hover:bg-accent hover:text-card-foreground",
-      text: "text-card-foreground",
-      border: "border-border",
-    },
-    ghost: {
-      bg: "bg-transparent",
-      hover: "hover:bg-accent hover:text-card-foreground",
-      text: "text-card-foreground",
-      border: "border-transparent",
-    },
-  },
-};

package/src/ui/Button/index.tsx

@@ -1,45 +0,0 @@
-export * from "./types/button";
-import { ButtonProps } from "./types/button";
-import { useTheme } from "../../context/ThemeContext";
-import { classnames } from "../../utils";
-
-export function Button({
-  title,
-  icon,
-  positionIcon,
-  color = "green",
-  variant = "solid",
-  disable = false,
-  className,
-  type = "button",
-  onClick = () => {},
-}: ButtonProps) {
-  const theme = useTheme();
-  const colorSet = theme[color]?.[variant] || theme.green.solid;
-
-  const classes = classnames(
-    // "cursor-pointer flex items-center justify-center gap-2 text-md font-bold rounded-lg p-2.5 w-auto border transition-colors duration-150",
-    "cursor-pointer flex items-center justify-center gap-2 px-4 py-2 rounded-lg transition-colors shadow-sm font-medium text-sm border",
-    colorSet.bg,
-    colorSet.hover,
-    colorSet.text,
-    colorSet.border,
-    {
-      "opacity-50 cursor-not-allowed": disable,
-    },
-    className
-  );
-
-  return (
-    <button
-      type={type}
-      onClick={(e) => !disable && onClick?.(e)}
-      disabled={disable}
-      className={classes}
-    >
-      {positionIcon === "left" && icon}
-      {title && <span className="first-letter:uppercase">{title}</span>}
-      {positionIcon === "right" && icon}
-    </button>
-  );
-}

package/src/ui/Button/types/button.ts

@@ -1,17 +0,0 @@
-import { COLORS } from "../colors";
-
-export interface ButtonProps {
-  onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  title: string;
-  icon?: JSX.Element;
-  positionIcon?: "left" | "right";
-  disable?: boolean;
-  className?: string;
-  type?: "button" | "submit" | "reset";
-  color: Color;
-  variant?: "solid" | "outline" | "ghost";
-}
-
-export interface CustomColors {}
-
-export type Color = keyof typeof COLORS | keyof CustomColors | (string & {});

package/src/ui/Input/index.tsx

@@ -1,74 +0,0 @@
-import { classnames } from "../../utils";
-import { InputProps } from "./types/input";
-
-export function Input<T>({
-  field,
-  title,
-  id,
-  type,
-  placeholder,
-  className,
-  value,
-  iconPosition,
-  icon,
-  error,
-  ...rest
-}: InputProps<T>) {
-  return (
-    <div className="flex flex-col gap-2">
-      {title && (
-        <label
-          htmlFor={id}
-          className={classnames("block text-md font-medium text-foreground", {
-            "text-red-700": error,
-          })}
-        >
-          {rest.required && <span className="text-red-500">* </span>}
-          {title}:
-        </label>
-      )}
-      <div
-        className={classnames(
-          "flex items-center justify-between border border-border text-foreground text-sm rounded-lg w-full",
-          {
-            "text-red-500 placeholder-red-500 border-red-500 focus:ring-red-500 focus:border-red-500":
-              error,
-            "p-2.5": icon,
-            "bg-input cursor-pointer": !rest.disabled,
-            "bg-gray-400/40 cursor-not-allowed": rest.disabled,
-          }
-        )}
-      >
-        {iconPosition === "left" && icon}
-        <input
-          type={type}
-          id={id}
-          name={String(field)}
-          value={value}
-          placeholder={placeholder}
-          className={classnames(
-            "bg-transparent border-none text-foreground text-sm focus:outline-none w-full",
-            {
-              "ml-3": iconPosition === "left",
-              "p-2.5": !icon,
-              "cursor-pointer": !rest.disabled,
-              "cursor-not-allowed": rest.disabled,
-              className: className,
-            }
-          )}
-          // className={`bg-transparent border-none text-foreground text-sm focus:outline-none w-full p-2.5 cursor-not-allowed ${
-          //   iconPosition === "left" && "ml-3"
-          // } ${className}`}
-          onChange={rest.onChange}
-          {...rest}
-        />
-        {iconPosition === "right" && icon}
-      </div>
-      {error && (
-        <div className="mt-2">
-          <p className="text-sm text-red-600 dark:text-red-500">{error}</p>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/ui/Select/index.tsx

@@ -1,150 +0,0 @@
-import { SelectProps } from "./types/select";
-import { useEffect, useRef, useState } from "react";
-import { classnames } from "../../utils";
-import { Input } from "../Input";
-import { Button } from "../Button";
-import { v4 } from "uuid";
-import { BroomIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
-
-function getNested(obj: any, path: string) {
-  return path.split(".").reduce((o, key) => (o ? o[key] : undefined), obj);
-}
-
-export function Select<T>({
-  field,
-  title,
-  id,
-  placeholder,
-  value,
-  options,
-  icon,
-  iconPosition = "right",
-  error,
-  required,
-  onChange,
-  selected,
-  isClearable,
-  searchable = false,
-}: SelectProps<T>) {
-  const [search, setSearch] = useState<string>("");
-  const [open, setOpen] = useState<boolean>(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [label, setLabel] = useState<string>("");
-
-  // Fecha o dropdown ao clicar fora
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(event.target as Node)
-      ) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  const handleSelect = (val: T) => {
-    onChange?.(val);
-    setOpen(false);
-  };
-
-  useEffect(() => {
-    setLabel(value);
-  }, [value]);
-
-  return (
-    <div className="flex flex-col gap-2 w-full relative" ref={containerRef}>
-      {title && (
-        <label
-          htmlFor={id}
-          className={classnames("block text-md font-medium text-foreground", {
-            "text-red-700": error,
-          })}
-        >
-          {required && <span className="text-red-500">*</span>}{" "}
-          {title ? `${title}:` : ""}
-        </label>
-      )}
-
-      <div
-        className={classnames(
-          "cursor-pointer flex items-center justify-between bg-input border border-border text-foreground text-sm rounded-lg w-full p-2.5 pr-8",
-          { "border-red-500": error }
-        )}
-        onClick={() => setOpen(!open)}
-      >
-        {iconPosition === "left" && icon}
-        <span className={`flex-1 ${iconPosition === "left" && "ml-3"}`}>
-          {label ? label : placeholder || "Selecione..."}
-        </span>
-        {iconPosition === "right" && icon}
-      </div>
-
-      {open && (
-        <ul className="absolute top-full left-0  w-[600px] max-h-72 overflow-y-auto border border-border rounded-lg bg-card z-10 shadow-lg mt-1">
-          <li
-            key={v4()}
-            className="p-3 cursor-pointer text-foreground"
-            onClick={() => isClearable && handleSelect({} as T)}
-          >
-            {placeholder || "Selecione..."}
-          </li>
-          {searchable && (
-            <li className="px-2 cursor-pointer text-foreground flex gap-2 items-center justify-start">
-              <div className="flex-1">
-                <Input
-                  field=""
-                  title=""
-                  placeholder="Buscar"
-                  icon={<MagnifyingGlassIcon />}
-                  iconPosition="left"
-                  onChange={(e) => setSearch(e.target.value)}
-                  value={search}
-                />
-              </div>
-              <Button
-                color="blue"
-                title=""
-                icon={<BroomIcon />}
-                positionIcon="left"
-                onClick={(e) => {
-                  e?.stopPropagation();
-                  onChange?.({} as T);
-                  setSearch("");
-                }}
-                className="m-0"
-              />
-            </li>
-          )}
-          {options
-            .filter((opt) => {
-              const fieldValue = getNested(opt, field);
-              return String(fieldValue)
-                .toLowerCase()
-                .includes(search.toLowerCase());
-            })
-            .map((opt) => (
-              <li
-                key={v4()}
-                className={classnames(
-                  "p-2 hover:bg-primary cursor-pointer text-foreground",
-                  {
-                    "bg-primary":
-                      getNested(opt, field) === value ||
-                      selected?.[field] === opt[field],
-                  }
-                )}
-                onClick={() => handleSelect(opt)}
-              >
-                {getNested(opt, field)}
-              </li>
-            ))}
-        </ul>
-      )}
-
-      {error && <p className="text-sm text-red-600 mt-1">{error}</p>}
-    </div>
-  );
-}

package/src/ui/Select/types/select.ts

@@ -1,16 +0,0 @@
-export type SelectProps<T> = {
-  title: string;
-  id: string;
-  placeholder?: string;
-  field: keyof T & string;
-  value: string;
-  options: T[];
-  icon?: React.ReactNode;
-  iconPosition?: "left" | "right";
-  error?: string;
-  required?: boolean;
-  onChange?: (value: T) => void;
-  selected?: T;
-  isClearable?: boolean;
-  searchable?: boolean;
-};

package/src/ui/index.ts

@@ -1,3 +0,0 @@
-export * from "./Button";
-export * from "./Input";
-export * from "./Select";