next-recomponents 1.0.0

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "next-recomponents",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts --clean",
+    "prepublishOnly": "npm run build",
+    "publish:public": "npm publish --access public"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3"
+  }
+}

package/src/alert/index.tsx

@@ -0,0 +1,24 @@
+import { catColor } from "../button/colors";
+
+interface Props {
+  color?:
+    | "white"
+    | "primary"
+    | "secondary"
+    | "info"
+    | "danger"
+    | "warning"
+    | "success";
+  children: React.ReactNode;
+}
+export default function Alert({
+  color = "primary",
+  children,
+  ...props
+}: Props) {
+  return (
+    <div className={[catColor[color], "p-2 rounded shadow border"].join(" ")}>
+      {children}
+    </div>
+  );
+}

package/src/button/colors.tsx

@@ -0,0 +1,9 @@
+export const catColor = {
+  white: "bg-white text-black",
+  primary: "bg-blue-500 text-white",
+  secondary: "bg-blue-800 text-white",
+  info: "bg-blue-200 text-black",
+  danger: "bg-red-500 text-white",
+  warning: "bg-yellow-500 text-white",
+  success: "bg-green-500 text-white",
+};

package/src/button/index.tsx

@@ -0,0 +1,42 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
+import { catColor } from "./colors";
+
+interface Props
+  extends DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
+  icon?: React.ReactNode;
+  size?: "full" | "small";
+  color?:
+    | "white"
+    | "primary"
+    | "secondary"
+    | "info"
+    | "danger"
+    | "warning"
+    | "success";
+}
+export default function Button({
+  className,
+  size = "small",
+  color = "primary",
+  children,
+  icon,
+  ...props
+}: Props) {
+  return (
+    <button
+      {...props}
+      className={[
+        className,
+        "p-2 border shadow rounded flex gap-1 justify-center items-center",
+        size == "full" ? "w-full" : "",
+        catColor[color],
+      ].join(" ")}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+}

package/src/container/icons.tsx

@@ -0,0 +1,65 @@
+export default function MenuIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 512 512"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M32 96v64h448V96H32zm0 128v64h448v-64H32zm0 128v64h448v-64H32z"></path>
+    </svg>
+  );
+}
+export function HomeIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 576 512"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path>
+    </svg>
+  );
+}
+export function ArrowUpIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      version="1.2"
+      baseProfile="tiny"
+      viewBox="0 0 24 24"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M18.2 13.3l-6.2-6.3-6.2 6.3c-.2.2-.3.5-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7z"></path>
+    </svg>
+  );
+}
+
+export function ArrowDownIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      version="1.2"
+      baseProfile="tiny"
+      viewBox="0 0 24 24"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M5.8 9.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.7s.1.5.3.7z"></path>
+    </svg>
+  );
+}

package/src/container/index.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import MenuIcon, { ArrowDownIcon, ArrowUpIcon, HomeIcon } from "./icons";
+import Link from "next/link";
+type LocationItem = {
+  location: string;
+  name: React.ReactNode;
+  icon?: React.ReactNode;
+};
+export default function Container({
+  children,
+  appName,
+  menuList,
+  navItems,
+  leftPanel,
+  footPanel,
+  expandedFooter = false,
+  expandedMenu = false,
+}: {
+  appName?: React.ReactNode;
+  children: React.ReactNode;
+  menuList?: Array<LocationItem>;
+  navItems?: Array<LocationItem>;
+  leftPanel?: React.ReactNode;
+  footPanel?: React.ReactNode;
+  expandedMenu?: boolean;
+  expandedFooter?: boolean;
+}) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(expandedMenu);
+  const [isFooterOpen, setIsFooterOpen] = useState(expandedFooter);
+
+  return (
+    <div className="flex flex-col h-screen">
+      {/* Header */}
+      <header className="z-40">
+        <div className="bg-blue-600 text-white p-4 flex justify-between items-center shadow-md">
+          <button
+            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+            className="bg-blue-600 text-white px-2 py-1 rounded-r"
+          >
+            <MenuIcon />
+          </button>
+          <h1 className="text-xl font-bold">{appName}</h1>
+        </div>
+        <div
+          className={` gap-2 bg-gray-800 text-white ${
+            isSidebarOpen ? "px-[270px]" : "px-[60px]"
+          } hidden sm:flex`}
+        >
+          {[{ location: "/", name: "Home", icon: <HomeIcon /> }, navItems]
+            .flat()
+            .map((li, k) => {
+              return (
+                li && (
+                  <>
+                    {"/ "}
+                    <Link href={li.location} key={k} className="flex gap-1 p-1">
+                      {li.icon}
+                      {li.name}
+                    </Link>
+                  </>
+                )
+              );
+            })}
+        </div>
+      </header>
+
+      <div className="flex flex-1 overflow-hidden relative">
+        {/* Sidebar como drawer en mobile */}
+        <motion.aside
+          animate={{
+            width:
+              typeof window !== "undefined" && window.innerWidth < 768
+                ? isSidebarOpen
+                  ? "100%"
+                  : 0
+                : isSidebarOpen
+                ? 250
+                : 60,
+          }}
+          className="bg-gray-800 text-white overflow-y-auto fixed md:static top-0 left-0 h-full z-50 md:z-auto transition-all duration-300 ease-in-out"
+        >
+          <div className="p-4 ">
+            {menuList && (
+              <ul className="space-y-3">
+                <li
+                  key={"menu"}
+                  className={"p-2  md:hidden "}
+                  onClick={(e) => {
+                    setIsSidebarOpen(false);
+                  }}
+                >
+                  <MenuIcon />
+                </li>
+                {menuList.map((itemMenu, k) => {
+                  const letra = `${itemMenu?.name}`.split("")[0];
+                  return (
+                    <li key={k}>
+                      <Link
+                        href={itemMenu.location}
+                        onClick={() => setIsSidebarOpen(false)}
+                      >
+                        {isSidebarOpen && (
+                          <div className="flex gap-2 items-center hover:bg-gray-700 p-2 rounded">
+                            {itemMenu.icon}
+                            <div>{itemMenu.name}</div>
+                          </div>
+                        )}
+                        {!isSidebarOpen && (
+                          <div className="hover:bg-gray-200 hover:text-black rounded p-1">
+                            {itemMenu?.icon || (
+                              <span className="px-1 border shadow rounded">
+                                {letra}
+                              </span>
+                            )}
+                          </div>
+                        )}
+                      </Link>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+        </motion.aside>
+
+        {/* Overlay para cerrar en móviles */}
+        {isSidebarOpen &&
+          typeof window !== "undefined" &&
+          window.innerWidth < 768 && (
+            <div
+              className="fixed inset-0 bg-black bg-opacity-40 z-40"
+              onClick={() => setIsSidebarOpen(false)}
+            />
+          )}
+
+        {/* Main */}
+        <main className="flex-1 overflow-auto p-4 bg-gray-100 z-10 md:ml-0 ">
+          <div className="flex md:flex-row flex-col h-full gap-4 ">
+            {leftPanel && (
+              <aside className="w-full md:w-64 flex-shrink-0 text-xs text-gray-600 bg-gray-200 p-5 border rounded">
+                {leftPanel}
+              </aside>
+            )}
+            <section className="flex-1">{children}</section>
+          </div>
+        </main>
+      </div>
+
+      {/* Footer */}
+      {footPanel && (
+        <motion.footer
+          className="bg-blue-100 overflow-hidden"
+          initial={isFooterOpen}
+          animate={{ height: isFooterOpen ? 120 : 40 }}
+          transition={{ duration: 0.3 }}
+        >
+          <div className="flex justify-center items-center p-2">
+            <button
+              onClick={() => setIsFooterOpen(!isFooterOpen)}
+              className="text-blue-700"
+            >
+              {isFooterOpen ? <ArrowDownIcon /> : <ArrowUpIcon />}
+            </button>
+          </div>
+          {isFooterOpen && (
+            <div className="px-4 pb-4 text-sm text-gray-600">{footPanel}</div>
+          )}
+        </motion.footer>
+      )}
+    </div>
+  );
+}

package/src/form/index.tsx

@@ -0,0 +1,95 @@
+import React, {
+  Dispatch,
+  Reducer,
+  SetStateAction,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
+interface OnSubmitProps extends React.FormEvent<HTMLFormElement> {
+  values: Record<string, any>;
+}
+interface Props {
+  onSubmit: (e: OnSubmitProps) => void;
+  children: React.ReactNode;
+  state?: [any, Dispatch<SetStateAction<any>>];
+  invalidMessage?: string;
+}
+
+export function useFormValues<T>(initial: Partial<T>) {
+  function reducer(st: Partial<T>, action: Partial<T>) {
+    const newSt = { ...st, ...action };
+    return newSt;
+  }
+  const state = useReducer<Reducer<Partial<T>, Partial<T>>>(
+    reducer,
+    initial as Partial<T>
+  );
+  return state;
+}
+export default function Form({
+  onSubmit,
+  state,
+  invalidMessage = "Existen valores inválidos en el formulario",
+  children,
+}: Props) {
+  const ref = useRef<HTMLFormElement>(null);
+  const [hvalues, setHValues] = state || useState({});
+  useEffect(() => {
+    if (ref?.current) {
+      const newValues = { ...hvalues };
+      const formData = new FormData(ref.current);
+      for (let [k, v] of formData.entries()) {
+        if (!newValues[k]) {
+          newValues[k] = "";
+        }
+      }
+      if (Object.keys(hvalues).length != Object.keys(newValues).length) {
+        setHValues(newValues);
+      }
+    }
+  }, [state, ref]);
+
+  function hasErrors() {
+    const hasInvalids = ref?.current?.querySelectorAll(".invalid");
+    if (hasInvalids && hasInvalids?.length > 0) {
+      return true;
+    }
+    return false;
+  }
+
+  return (
+    <form
+      ref={ref}
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (hasErrors()) {
+          alert(invalidMessage);
+          return;
+        }
+        onSubmit && onSubmit({ ...e, values: hvalues });
+      }}
+    >
+      {React.Children.map(children, (child: any) => {
+        if (React.isValidElement(child)) {
+          const props: any = child?.props ? { ...child.props } : {};
+          try {
+            return React.cloneElement(child as any, {
+              value: hvalues[props.name] || "",
+              onChange: (e: any) => {
+                setHValues({ ...hvalues, [props.name]: e.target.value });
+                props?.onChange && props.onChange(e);
+              },
+            });
+          } catch (error) {
+            return child;
+          }
+        }
+
+        return child; // no modificar si no es input válido
+      })}
+    </form>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,10 @@
+export { default as Alert } from "./alert";
+export { default as Button } from "./button";
+export { default as Container } from "./container";
+export { default as Form } from "./form";
+export { default as Input } from "./input";
+export { default as regularExpresions } from "./regular-expresions";
+export { default as Table } from "./table";
+export { default as TextArea } from "./text-area";
+export { default as useResources } from "./use-resources";
+export { default as Select } from "./select";

package/src/input/index.tsx

@@ -0,0 +1,43 @@
+import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+
+interface InputProps
+  extends DetailedHTMLProps<
+    InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  label: React.ReactNode;
+  regex?: RegExp;
+  invalidMessage?: React.ReactNode;
+}
+export default function Input({
+  label,
+  className,
+  regex,
+  invalidMessage = "Valor no válido",
+  ...props
+}: InputProps) {
+  const value = `${props?.value || ""}`;
+  const isValid = !regex ? true : regex.test(value);
+
+  return (
+    <div className="w-full">
+      <label className="flex flex-col gap-1">
+        <div className="font-bold ">{label}</div>
+        <div>
+          <input
+            {...props}
+            className={[
+              "p-2 w-full rounded border shadow",
+              value != "" && !isValid && "bg-red-200 text-black",
+              value != "" && isValid && "bg-green-200 text-black",
+              className,
+            ].join(" ")}
+          />
+        </div>
+      </label>
+      {!isValid && value != "" && (
+        <div className="text-red-800 invalid">{invalidMessage}</div>
+      )}
+    </div>
+  );
+}

package/src/regular-expresions/index.ts

@@ -0,0 +1,11 @@
+const regularExpresions: {
+  email: RegExp;
+  phone: RegExp;
+  number: RegExp;
+} = {
+  email: /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/,
+  phone: /^\d{10}$/,
+  number: /^\d+$/,
+};
+
+export default regularExpresions;

package/src/select/close.tsx

@@ -0,0 +1,15 @@
+export default function CloseIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 512 512"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64-64 64L169.37 320l64-64-64-64L192 169.37l64 64 64-64L342.63 192l-64 64z"></path>
+    </svg>
+  );
+}

package/src/select/icon.tsx

@@ -0,0 +1,15 @@
+export default function SelectIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 320 512"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
+    </svg>
+  );
+}