@processhub-lib/react 1.0.0

package/src/ui/Button/colors.tsx

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

@@ -0,0 +1,46 @@
+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}
+      testedsad
+      {title && <span className="first-letter:uppercase">{title}</span>}
+      {positionIcon === "right" && icon}
+    </button>
+  );
+}

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

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

@@ -0,0 +1,74 @@
+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/Input/types/input.ts

@@ -0,0 +1,11 @@
+export type inputElementsType<T> = {
+  mask?: string;
+  field: keyof T;
+  title: string;
+  iconPosition?: "left" | "right";
+  icon?: React.JSX.Element;
+} & React.InputHTMLAttributes<HTMLInputElement | HTMLSelectElement>;
+
+export type InputProps<T> = {
+  error?: string;
+} & inputElementsType<T>;

package/src/ui/Select/index.tsx

@@ -0,0 +1,149 @@
+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={() => {
+                  handleSelect({} 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

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

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

package/src/utils/classnames.tsx

@@ -0,0 +1,89 @@
+const hasOwn = {}.hasOwnProperty;
+
+/**
+ * Constrói uma string de classes CSS dinamicamente.
+ *
+ * Aceita qualquer número de argumentos do tipo string, boolean, null, undefined ou objeto:
+ * - Strings são adicionadas diretamente.
+ * - Objetos: chaves com valor truthy são incluídas como classes.
+ * - Arrays são processados recursivamente.
+ *
+ * @example
+ * classnames("btn", { active: isActive, disabled: false }, ["px-2", null])
+ * // Resultado: "btn active px-2"
+ *
+ * @param {...(string | object | undefined | null | boolean)[]} args - Lista de classes e condições.
+ * @returns {string} String final de classes separadas por espaço.
+ */
+export function classnames(
+  ...args: (string | object | undefined | null | boolean)[]
+): string {
+  let classes = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg) {
+      classes = appendClass(classes, parseValue(arg));
+    }
+  }
+
+  return classes;
+}
+
+/**
+ * Converte um argumento em string de classes.
+ *
+ * - Strings são retornadas como estão.
+ * - Objetos: inclui chaves com valor truthy.
+ * - Arrays: processados recursivamente.
+ *
+ * @param arg - Argumento a ser processado.
+ * @returns String de classes ou vazia.
+ */
+function parseValue(arg: string | object | undefined | null | boolean): string {
+  if (typeof arg === "string") {
+    return arg;
+  }
+
+  if (typeof arg !== "object" || arg === null) {
+    return "";
+  }
+
+  // Processa array de classes
+  if (Array.isArray(arg)) {
+    return classnames(...arg);
+  }
+
+  // Suporte a objetos com `toString()` customizados (não nativos)
+  if (
+    arg.toString !== Object.prototype.toString &&
+    !arg.toString.toString().includes("[native code]")
+  ) {
+    return arg.toString();
+  }
+
+  // Processa objetos: adiciona chave se valor for truthy
+  let classes = "";
+
+  for (const key in arg) {
+    if (hasOwn.call(arg, key) && (arg as Record<string, unknown>)[key]) {
+      classes = appendClass(classes, key);
+    }
+  }
+
+  return classes;
+}
+
+/**
+ * Concatena duas strings de classe com espaço.
+ *
+ * @param value - String atual.
+ * @param newClass - Nova classe a ser adicionada.
+ * @returns String combinada.
+ */
+function appendClass(value: string, newClass: string): string {
+  if (!newClass) {
+    return value;
+  }
+
+  return value ? `${value} ${newClass}` : newClass;
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./classnames";

package/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  prefix: "ph-",
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "../processhub-lib/src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "declaration": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from "vite";
+import path from "path";
+import tailwindcss from "@tailwindcss/vite";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: {
+        index: path.resolve(__dirname, "src/index.ts"),
+        ui: path.resolve(__dirname, "src/ui/index.ts"),
+        utils: path.resolve(__dirname, "src/utils/index.ts"),
+      },
+      name: "ProcessHubLib",
+      formats: ["es", "cjs"],
+      fileName: (format, entryName) => `${entryName}.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: { react: "React" },
+      },
+    },
+  },
+  plugins: [
+    tailwindcss(),
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+});