flysoft-react-ui 0.1.16 → 0.2.0

package/dist/components/utils/Badge.d.ts

@@ -5,6 +5,9 @@ export interface BadgeProps {
     size?: "sm" | "md" | "lg";
     rounded?: boolean;
     className?: string;
+    icon?: string;
+    iconPosition?: "left" | "right";
+    iconLabel?: string;
 }
 export declare const Badge: React.FC<BadgeProps>;
 //# sourceMappingURL=Badge.d.ts.map

package/dist/components/utils/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAgDtC,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyEtC,CAAC"}

package/dist/components/utils/Badge.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-export const Badge = ({ children, variant = "primary", size = "md", rounded = false, className = "", }) => {
+export const Badge = ({ children, variant = "primary", size = "md", rounded = false, className = "", icon, iconPosition = "left", iconLabel, }) => {
     const baseClasses = "inline-flex items-center font-medium font-[var(--font-default)]";
     const variantClasses = {
         primary: `
@@ -34,6 +34,13 @@ export const Badge = ({ children, variant = "primary", size = "md", rounded = fa
         lg: "px-3 py-1 text-base",
     };
     const roundedClasses = rounded ? "rounded-full" : "rounded-md";
-    const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${roundedClasses} ${className}`;
-    return _jsx("span", { className: classes, children: children });
+    const gapClasses = icon ? "gap-2" : "";
+    const iconSizeClasses = size === "sm" ? "text-xs" : size === "md" ? "text-sm" : "text-base";
+    const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${roundedClasses} ${gapClasses} ${className}`;
+    const renderIcon = () => {
+        if (!icon)
+            return null;
+        return (_jsx("i", { className: `fa ${icon} ${iconSizeClasses}`, "aria-hidden": !iconLabel, "aria-label": iconLabel }));
+    };
+    return (_jsxs("span", { className: classes, children: [icon && iconPosition === "left" && renderIcon(), _jsx("span", { children: children }), icon && iconPosition === "right" && renderIcon()] }));
 };

package/dist/docs/ApiClientDocs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const ApiClientDocs: React.FC;
+export default ApiClientDocs;
+//# sourceMappingURL=ApiClientDocs.d.ts.map

package/dist/docs/ApiClientDocs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiClientDocs.d.ts","sourceRoot":"","sources":["../../src/docs/ApiClientDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAarD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAiO1B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/docs/ApiClientDocs.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useState } from "react";
+import { Badge, Button, Card, Input, useApi, useApiMutation, } from "../index";
+const API_BASE = "https://jsonplaceholder.typicode.com";
+const ApiClientDocs = () => {
+    const [postId, setPostId] = useState("1");
+    const [formState, setFormState] = useState({
+        title: "",
+        body: "",
+    });
+    const { data: postData, loading: loadingPost, error: postError, refetch: refetchPost, } = useApi({
+        url: `${API_BASE}/posts/${postId || 1}`,
+        method: "get",
+        enabled: false,
+        queryKey: "docs.posts.detail",
+        onError: (error) => {
+            console.warn("Example query error", error);
+        },
+    });
+    const { data: createdPost, loading: creatingPost, error: createError, mutateAsync: createPost, reset: resetMutation, } = useApiMutation({
+        url: `${API_BASE}/posts`,
+        method: "post",
+        invalidateKeys: ["docs.posts.detail"],
+        onSuccess: () => {
+            // Invalidate re-executes the query registered under the same key.
+            setFormState({ title: "", body: "" });
+        },
+    });
+    const handleFetchPost = useCallback(() => {
+        void refetchPost();
+    }, [refetchPost]);
+    const handleSubmit = useCallback(async (event) => {
+        event.preventDefault();
+        try {
+            await createPost({
+                data: {
+                    title: formState.title,
+                    body: formState.body,
+                    userId: 1,
+                },
+            });
+        }
+        catch (error) {
+            console.info("Example mutation error", error);
+        }
+    }, [createPost, formState.body, formState.title]);
+    const renderErrorBadge = (error) => {
+        if (!error)
+            return null;
+        return (_jsx(Badge, { variant: "danger", icon: "fa-exclamation-triangle", children: error.message }));
+    };
+    return (_jsxs("div", { className: "max-w-5xl mx-auto space-y-8", children: [_jsx(Card, { title: "ApiClient - Resumen", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["La capa de networking usa ", _jsx("code", { children: "axios" }), " con interceptores listos para inyectar tokens y normalizar errores en", _jsx("code", { children: "AppApiError" }), ". Importa los estilos con", _jsx("code", { children: "import \"flysoft-react-ui/styles\";" }), " y consume", _jsx("code", { children: "apiClient" }), ",", _jsx("code", { children: "useApi" }), " y ", _jsx("code", { children: "useApiMutation" }), " directamente desde la librer\u00EDa."] }), _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", children: [_jsxs("li", { children: ["M\u00E9todos disponibles: ", _jsx("code", { children: "get" }), ", ", _jsx("code", { children: "post" }), ",", _jsx("code", { children: "put" }), ", ", _jsx("code", { children: "delete" }), " y ", _jsx("code", { children: "patch" }), " con opciones tipadas."] }), _jsxs("li", { children: ["Los errores se entregan como ", _jsx("code", { children: "AppApiError" }), " para que los componentes usen badges, alerts u otros patrones ya disponibles sin tocar los hooks."] }), _jsxs("li", { children: ["Usa ", _jsx("code", { children: "setApiClientTokenProvider" }), " para inyectar tokens (placeholder listo para integrarse con tu ThemeProvider o contextos existentes)."] })] })] }) }), _jsx(Card, { title: "Consulta simple con useApi", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("form", { className: "grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-4 items-end", onSubmit: (event) => {
+                                event.preventDefault();
+                                handleFetchPost();
+                            }, children: [_jsx(Input, { label: "ID del post", icon: "fa-hashtag", value: postId, onChange: (event) => setPostId(event.target.value) }), _jsx(Button, { type: "submit", variant: "primary", icon: "fa-search", loading: loadingPost, children: "Consultar" })] }), _jsxs("div", { className: "space-y-3", children: [loadingPost && (_jsx(Badge, { variant: "info", icon: "fa-spinner", className: "animate-pulse", children: "Cargando post..." })), renderErrorBadge(postError), postData && !loadingPost && (_jsx(Card, { title: `Post ${postData.id}`, children: _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-lg font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: postData.title }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: postData.body })] }) }))] })] }) }), _jsx(Card, { title: "Mutaci\u00F3n con useApiMutation", children: _jsxs("form", { className: "space-y-6", onSubmit: handleSubmit, children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [_jsx(Input, { label: "T\u00EDtulo", icon: "fa-heading", value: formState.title, onChange: (event) => setFormState((prev) => ({
+                                        ...prev,
+                                        title: event.target.value,
+                                    })) }), _jsx(Input, { label: "Contenido", icon: "fa-align-left", value: formState.body, onChange: (event) => setFormState((prev) => ({
+                                        ...prev,
+                                        body: event.target.value,
+                                    })) })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Button, { type: "submit", variant: "primary", icon: "fa-paper-plane", loading: creatingPost, children: "Enviar datos" }), _jsx(Button, { type: "button", variant: "outline", icon: "fa-undo", onClick: () => {
+                                        setFormState({ title: "", body: "" });
+                                        resetMutation();
+                                    }, children: "Reiniciar" })] }), _jsxs("div", { className: "space-y-3", children: [creatingPost && (_jsx(Badge, { variant: "info", icon: "fa-spinner", className: "animate-pulse", children: "Enviando..." })), renderErrorBadge(createError), createdPost && !creatingPost && (_jsxs(Badge, { variant: "success", icon: "fa-check-circle", children: ["Post #", createdPost.id, " creado (ejemplo)."] })), _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa ", _jsx("code", { children: "invalidateKeys" }), " para refrescar queries que hayan sido registradas con ", _jsx("code", { children: "queryKey" }), " en ", _jsx("code", { children: "useApi" }), ". Esto permite mantener badges y alerts sincronizados con el estado de la UI sin alterar los hooks."] })] })] }) })] }));
+};
+export default ApiClientDocs;

package/dist/docs/BadgeDocs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const BadgeDocs: React.FC;
+export default BadgeDocs;
+//# sourceMappingURL=BadgeDocs.d.ts.map

package/dist/docs/BadgeDocs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeDocs.d.ts","sourceRoot":"","sources":["../../src/docs/BadgeDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAiFtB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/docs/BadgeDocs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Badge, Card } from "../index";
+const BadgeDocs = () => {
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Badge - Variantes y Estados", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Variantes" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", children: [_jsx(Badge, { variant: "primary", children: "Primario" }), _jsx(Badge, { variant: "secondary", children: "Secundario" }), _jsx(Badge, { variant: "success", icon: "fa-check-circle", children: "\u00C9xito" }), _jsx(Badge, { variant: "warning", icon: "fa-exclamation-triangle", children: "Advertencia" }), _jsx(Badge, { variant: "danger", icon: "fa-times-circle", children: "Error" }), _jsx(Badge, { variant: "info", icon: "fa-info-circle", children: "Informaci\u00F3n" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Badge, { size: "sm", icon: "fa-circle", iconLabel: "Indicador peque\u00F1o", children: "Peque\u00F1o" }), _jsx(Badge, { size: "md", icon: "fa-circle", children: "Mediano" }), _jsx(Badge, { size: "lg", icon: "fa-circle", children: "Grande" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDconos y dise\u00F1o" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { icon: "fa-bell", rounded: true, children: "Notificaci\u00F3n" }), _jsx(Badge, { icon: "fa-arrow-right", iconPosition: "right", children: "Acci\u00F3n" }), _jsx(Badge, { icon: "fa-shield-alt", iconLabel: "Estado protegido", children: "Accesible" })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa ", _jsx("code", { children: "icon" }), " con clases FontAwesome 5 (ej.", " ", _jsx("code", { children: "fa-check" }), ") y combina ", _jsx("code", { children: "rounded" }), " para badges tipo pills."] })] })] }) }) }));
+};
+export default BadgeDocs;

package/dist/docs/DocsMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAmBpB,CAAC"}
+{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAyBpB,CAAC"}

package/dist/docs/DocsMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Link } from "react-router-dom";
 export const DocsMenu = () => {
-    return (_jsx(_Fragment, { children: _jsxs("ul", { children: [_jsx("li", { children: _jsx(Link, { to: "/docs/button", children: "Button" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/card", children: "Card" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/input", children: "Input" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/theme", children: "ThemeSwitcher" }) })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("ul", { children: [_jsx("li", { children: _jsx(Link, { to: "/docs/button", children: "Button" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/badge", children: "Badge" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/card", children: "Card" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/input", children: "Input" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/theme", children: "ThemeSwitcher" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/api-client", children: "ApiClient" }) })] }) }));
 };

package/dist/docs/DocsRouter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAU9B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAY9B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/DocsRouter.js

@@ -5,7 +5,9 @@ import ButtonDocs from "./ButtonDocs";
 import CardDocs from "./CardDocs";
 import InputDocs from "./InputDocs";
 import ThemeSwitcherDocs from "./ThemeSwitcherDocs";
+import ApiClientDocs from "./ApiClientDocs";
+import BadgeDocs from "./BadgeDocs";
 export const DocsRouter = () => {
-    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) })] }));
+    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "api-client", element: _jsx(ApiClientDocs, {}) })] }));
 };
 export default DocsRouter;