@conatel-sa/react-ui 0.2.2 → 0.2.4

package/README.md

@@ -1,23 +1,23 @@
 # @conatel-sa/react-ui
 
-Biblioteca de componentes React para productos **Conatel** y **Vivion**. Mas de 20 componentes UI listos para usar, con soporte de theming por marca mediante CSS custom properties.
+Biblioteca de componentes React para productos **Conatel** y **Vivion**. Más de 20 componentes UI listos para usar, con soporte de theming por marca mediante CSS custom properties. Export opcional de iconos (`./icons`).
 
-## Instalacion
+## Instalación
 
 ```bash
 npm install @conatel-sa/react-ui
 ```
 
-## Uso rapido
+## Uso rápido
 
-Importa el CSS de tokens **una sola vez** en el entry point de tu aplicacion:
+Importá el CSS de tokens **una sola vez** en el entry point de tu aplicación:
 
 ```tsx
 // main.tsx
 import '@conatel-sa/react-ui/dist/index.css';
 ```
 
-Luego usa los componentes envueltos en un `ThemeProvider`:
+Luego usá los componentes envueltos en un `ThemeProvider`:
 
 ```tsx
 import { ThemeProvider, Button, Card, Badge } from '@conatel-sa/react-ui';
@@ -36,12 +36,12 @@ function App() {
 
 ## Theming
 
-La libreria soporta dos temas de marca que se aplican a todos los componentes:
+La librería soporta dos temas de marca que se aplican a todos los componentes:
 
 | Tema | Color primario | Uso |
 |---|---|---|
 | `conatel` | `#CC032E` | Productos Conatel |
-| `vivion` | `#009CDE` | Productos Vivion |
+| `vivion` | `#0098D4` | Productos Vivion |
 
 ```tsx
 <ThemeProvider theme="vivion">
@@ -51,7 +51,7 @@ La libreria soporta dos temas de marca que se aplican a todos los componentes:
 
 ## Componentes disponibles
 
-### Tipografia
+### Tipografía
 `Heading` - `Text`
 
 ### Formularios
@@ -63,29 +63,48 @@ La libreria soporta dos temas de marca que se aplican a todos los componentes:
 ### Contenedores
 `Card` - `CardHeader` - `CardBody` - `CardFooter` - `Modal`
 
-### Navegacion
+### Navegación
 `Navbar` - `NavItem` - `Tabs` - `TabList` - `Tab` - `TabPanel`
 
 ### Datos
 `Table` - `TableHead` - `TableBody` - `TableRow` - `TableCell` - `TableHeaderCell`
 
-### Miscelanea
-`Avatar` - `Divider` - `EmptyState` - `Button`
+### Miscelánea
+`Avatar` - `Divider` - `EmptyState` - `Button` - `Sidebar` - `SidebarItem` - `Toast` - `ScoreSelector`
 
-## TypeScript
+### Iconos (subpath `@conatel-sa/react-ui/icons`)
+
+Material Symbols y envoltorio opcional para `lucide-react`:
+
+```tsx
+import { Icon, IconProvider } from '@conatel-sa/react-ui/icons';
+import '@conatel-sa/react-ui/dist/material-symbols.css';
+
+function WithIcons() {
+  return (
+    <ThemeProvider theme="conatel">
+      <IconProvider injectStylesheet defaultSize="md">
+        <Icon name="search" size="md" />
+      </IconProvider>
+    </ThemeProvider>
+  );
+}
+```
+
+`lucide-react` es opcional (solo si usás `LucideIcon`).
 
-La libreria incluye tipos completos. No se requiere instalacion adicional de `@types`.
+## Subpaquetes opcionales
 
-## Desarrollo
+| Subpath | Contenido resumido |
+|---------|---------------------|
+| `@conatel-sa/react-ui/forms` | `PasswordInput`, `MultiSelectDropdown` |
+| `@conatel-sa/react-ui/cards` | `ServiceCard`, `FeatureCard`, `ChangelogPanel`, `ArtifactReportCard` |
+| `@conatel-sa/react-ui/dialogs` | `ChangelogDialog` (requiere `react-dom`) |
+| `@conatel-sa/react-ui/metrics` | `StatInline`, `MiniMeter` |
+| `@conatel-sa/react-ui/status` | `StatusSummaryPopover` |
 
-Todos los comandos corren dentro de contenedores Docker.
+En las demos HTML, `library-gallery-new.html` carga `dist/forms.umd.js`, `cards.umd.js`, `dialogs.umd.js`, `metrics.umd.js`, `status.umd.js` (además de `icons.umd.js`) y fusiona los globales en `window.ReactLibrary`. Ver `docs/SUBPACKAGES.md` en el workspace react-ui.
 
-| Tarea | Comando |
-|---|---|
-| Build de la libreria | `docker compose run --rm app npm run build` |
-| Storybook | `docker compose up storybook` |
-| Dev server | `docker compose up` |
-| Lint | `docker compose run --rm app npm run lint` |
-| Tests | `docker compose run --rm app npm test` |
+## TypeScript
 
-El Storybook incluye un switcher interactivo para previsualizar todos los componentes en tema Conatel y Vivion.
+La librería incluye tipos. No se requiere `@types` adicional para este paquete.

package/dist/cards.d.ts

@@ -0,0 +1,37 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export type ServiceCardStatus = 'active' | 'degraded' | 'error' | 'info';
+export type ServiceCardProps = {
+  icon?: string;
+  title: string;
+  description?: string;
+  status?: ServiceCardStatus;
+  count?: number;
+  onClick?: () => void;
+};
+export declare function ServiceCard(props: ServiceCardProps): JSX.Element;
+
+export type FeatureCardProps = {
+  title: string;
+  description?: string;
+  icon?: string;
+  corner?: ReactNode;
+  href?: string;
+  onClick?: () => void;
+  children?: ReactNode;
+  style?: CSSProperties;
+  className?: string;
+};
+export declare function FeatureCard(props: FeatureCardProps): JSX.Element;
+
+export type ChangelogItem = {
+  title: string;
+  content: ReactNode;
+};
+export type ChangelogPanelProps = { version?: string; items: ChangelogItem[] };
+export declare function ChangelogPanel(props: ChangelogPanelProps): JSX.Element;
+
+export type ArtifactStatVariant = 'primary' | 'success' | 'warning' | 'error' | 'info';
+export type ArtifactStat = { label: string; value: number; variant?: ArtifactStatVariant; footer?: ReactNode };
+export type ArtifactReportCardProps = { title?: string; stats: ArtifactStat[] };
+export declare function ArtifactReportCard(props: ArtifactReportCardProps): JSX.Element;

package/dist/cards.mjs

@@ -0,0 +1,299 @@
+// src/components/cards/ServiceCard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function statusStyles(status) {
+  switch (status) {
+    case "active":
+      return {
+        bg: "var(--color-success-light, rgba(16, 185, 129, 0.1))",
+        fg: "var(--color-success, #10b981)",
+        label: "OK"
+      };
+    case "degraded":
+      return {
+        bg: "var(--color-warning-light, rgba(245, 158, 11, 0.12))",
+        fg: "var(--color-warning, #f59e0b)",
+        label: "WARN"
+      };
+    case "error":
+      return {
+        bg: "var(--color-error-light, rgba(204, 3, 46, 0.12))",
+        fg: "var(--color-error, #CC032E)",
+        label: "ERROR"
+      };
+    case "info":
+      return {
+        bg: "var(--color-info-light, rgba(37, 99, 235, 0.12))",
+        fg: "var(--color-info, #2563eb)",
+        label: "INFO"
+      };
+    default:
+      return {
+        bg: "var(--color-neutral-100, #f5f5f5)",
+        fg: "var(--color-text-muted, #6b6b6b)",
+        label: "INFO"
+      };
+  }
+}
+function ServiceCard({
+  icon,
+  title,
+  description,
+  status,
+  count,
+  onClick
+}) {
+  const st = statusStyles(status);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onClick,
+      onKeyDown: (e) => {
+        if (!onClick) return;
+        if (e.key === "Enter" || e.key === " ") onClick();
+      },
+      style: {
+        border: "1.5px solid var(--color-border, #e0e0e0)",
+        borderRadius: "var(--radius-lg, 8px)",
+        background: "var(--color-surface, #ffffff)",
+        boxShadow: "var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1))",
+        padding: "var(--space-4, 16px)",
+        cursor: onClick ? "pointer" : "default"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "var(--space-3, 12px)" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "var(--space-3, 12px)", flex: 1, minWidth: 0 }, children: [
+            icon ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "material-symbols-outlined",
+                style: { fontSize: "1.5rem", color: "var(--color-primary, #CC032E)", marginTop: "2px" },
+                "aria-hidden": "true",
+                children: icon
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--space-1, .25rem)", minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontFamily: "var(--font-sans, system-ui)",
+                    fontSize: "var(--text-base, 15px)",
+                    fontWeight: "var(--weight-semibold, 600)",
+                    color: "var(--color-text, #1a1a1a)",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  },
+                  children: title
+                }
+              ),
+              description ? /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--font-sans, system-ui)", fontSize: "var(--text-sm, 13px)", color: "var(--color-text-muted, #757578)", lineHeight: 1.3 }, children: description }) : null
+            ] })
+          ] }),
+          count != null ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                minWidth: "3rem",
+                textAlign: "right",
+                fontFamily: "var(--font-sans, system-ui)",
+                fontSize: "var(--text-sm, 13px)",
+                color: "var(--color-text-muted, #757578)",
+                fontWeight: "var(--weight-medium, 500)"
+              },
+              children: count
+            }
+          ) : null
+        ] }),
+        status ? /* @__PURE__ */ jsx("div", { style: { marginTop: "var(--space-3, 12px)" }, children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "var(--space-2, 8px)",
+              padding: "var(--space-1, .25rem) var(--space-2, 8px)",
+              borderRadius: "var(--radius-full, 9999px)",
+              background: st.bg,
+              color: st.fg,
+              fontFamily: "var(--font-sans, system-ui)",
+              fontSize: "var(--text-sm, 13px)",
+              fontWeight: "var(--weight-medium, 500)",
+              whiteSpace: "nowrap"
+            },
+            children: st.label
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+
+// src/components/cards/FeatureCard.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var baseCardStyle = {
+  position: "relative",
+  display: "block",
+  border: "1.5px solid var(--color-border, #e0e0e0)",
+  borderRadius: "var(--radius-lg, 12px)",
+  background: "var(--color-surface, #ffffff)",
+  boxShadow: "var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08))",
+  padding: "var(--space-4, 16px)",
+  textDecoration: "none",
+  color: "inherit",
+  fontFamily: "var(--font-sans, system-ui)",
+  textAlign: "left",
+  cursor: "default",
+  boxSizing: "border-box"
+};
+function FeatureCard({
+  title,
+  description,
+  icon,
+  corner,
+  href,
+  onClick,
+  children,
+  style,
+  className
+}) {
+  const interactive = Boolean(href || onClick);
+  const mergedStyle = {
+    ...baseCardStyle,
+    cursor: interactive ? "pointer" : "default",
+    ...style
+  };
+  const inner = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    corner ? /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "0.75rem",
+          right: "0.75rem",
+          display: "flex",
+          alignItems: "center",
+          gap: "0.25rem",
+          fontSize: "0.75rem",
+          color: "var(--color-text-muted, #757578)"
+        },
+        children: corner
+      }
+    ) : null,
+    icon ? /* @__PURE__ */ jsx2("div", { style: { marginBottom: "var(--space-3, 12px)" }, children: /* @__PURE__ */ jsx2("span", { className: "material-symbols-outlined", style: { fontSize: "2rem", color: "var(--color-primary, #2563eb)" }, "aria-hidden": true, children: icon }) }) : null,
+    /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: "var(--text-base, 15px)", color: "var(--color-text, #1a1a1a)", marginBottom: "var(--space-2, 8px)" }, children: title }),
+    description ? /* @__PURE__ */ jsx2("div", { style: { fontSize: "var(--text-sm, 13px)", color: "var(--color-text-muted, #757578)", lineHeight: 1.45 }, children: description }) : null,
+    children
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx2("a", { href, className, style: mergedStyle, children: inner });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx2("button", { type: "button", className, style: mergedStyle, onClick, children: inner });
+  }
+  return /* @__PURE__ */ jsx2("div", { className, style: mergedStyle, children: inner });
+}
+
+// src/components/cards/ChangelogPanel.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ChangelogPanel({ version, items }) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        border: "1.5px solid var(--color-border, #e0e0e0)",
+        borderRadius: "var(--radius-lg, 8px)",
+        background: "var(--color-surface, #ffffff)",
+        boxShadow: "var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1))",
+        padding: "var(--space-4, 16px)"
+      },
+      children: [
+        /* @__PURE__ */ jsx3("div", { style: { fontFamily: "var(--font-sans, system-ui)", fontWeight: "var(--weight-semibold, 600)", color: "var(--color-text, #1a1a1a)", fontSize: "var(--text-base, 15px)" }, children: version ? `Changelog ${version}` : "Changelog" }),
+        /* @__PURE__ */ jsx3("div", { style: { marginTop: "var(--space-3, 12px)", display: "flex", flexDirection: "column", gap: "var(--space-3, 12px)" }, children: items.map((it, idx) => /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx3("div", { style: { fontFamily: "var(--font-sans, system-ui)", fontWeight: "var(--weight-semibold, 600)", color: "var(--color-text, #1a1a1a)", fontSize: "var(--text-sm, 13px)" }, children: it.title }),
+          /* @__PURE__ */ jsx3("div", { style: { fontFamily: "var(--font-sans, system-ui)", color: "var(--color-text-muted, #757578)", fontSize: "var(--text-sm, 13px)", lineHeight: 1.4, marginTop: "var(--space-1, .25rem)" }, children: it.content })
+        ] }, idx)) })
+      ]
+    }
+  );
+}
+
+// src/components/cards/ArtifactReportCard.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function variantToColors(variant) {
+  switch (variant) {
+    case "success":
+      return { fg: "var(--color-success, #10b981)", bg: "var(--color-success, #10b981)" };
+    case "warning":
+      return { fg: "var(--color-warning, #f59e0b)", bg: "var(--color-warning, #f59e0b)" };
+    case "error":
+      return { fg: "var(--color-error, #CC032E)", bg: "var(--color-error, #CC032E)" };
+    case "info":
+      return { fg: "var(--color-info, #2563eb)", bg: "var(--color-info, #2563eb)" };
+    case "primary":
+    default:
+      return { fg: "var(--color-primary, var(--color-brand, #CC032E))", bg: "var(--color-primary, var(--color-brand, #CC032E))" };
+  }
+}
+function ArtifactReportCard({ title, stats }) {
+  const max = Math.max(1, ...stats.map((s) => typeof s.value === "number" ? s.value : 0));
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        border: "1.5px solid var(--color-border, #e0e0e0)",
+        borderRadius: "var(--radius-lg, 8px)",
+        background: "var(--color-surface, #ffffff)",
+        boxShadow: "var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1))",
+        padding: "var(--space-4, 16px)"
+      },
+      children: [
+        title ? /* @__PURE__ */ jsx4("div", { style: { fontFamily: "var(--font-sans, system-ui)", fontWeight: "var(--weight-semibold, 600)", color: "var(--color-text, #1a1a1a)", fontSize: "var(--text-base, 15px)" }, children: title }) : null,
+        /* @__PURE__ */ jsx4("div", { style: { marginTop: "var(--space-3, 12px)", display: "flex", flexDirection: "column", gap: "var(--space-3, 12px)" }, children: stats.map((s, idx) => {
+          const colors = variantToColors(s.variant);
+          const ratio = Math.max(0, Math.min(1, s.value / max));
+          return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "var(--space-2, 8px)" }, children: [
+            /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "space-between", gap: "var(--space-2, 8px)" }, children: [
+              /* @__PURE__ */ jsx4("div", { style: { fontFamily: "var(--font-sans, system-ui)", color: "var(--color-text-muted, #757578)", fontSize: "var(--text-sm, 13px)", fontWeight: "var(--weight-medium, 500)" }, children: s.label }),
+              /* @__PURE__ */ jsx4("div", { style: { fontFamily: "var(--font-sans, system-ui)", color: colors.fg, fontSize: "var(--text-sm, 13px)", fontWeight: "var(--weight-semibold, 600)" }, children: s.value })
+            ] }),
+            /* @__PURE__ */ jsx4(
+              "div",
+              {
+                style: {
+                  width: "100%",
+                  height: "10px",
+                  borderRadius: "var(--radius-full, 9999px)",
+                  background: "var(--color-neutral-200, rgba(0,0,0,.08))",
+                  overflow: "hidden"
+                },
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    style: {
+                      width: `${Math.round(ratio * 100)}%`,
+                      height: "100%",
+                      background: colors.bg,
+                      borderRadius: "inherit",
+                      transition: "width var(--duration-base, .15s) var(--ease-out, ease) "
+                    }
+                  }
+                )
+              }
+            ),
+            s.footer ? /* @__PURE__ */ jsx4("div", { style: { fontFamily: "var(--font-sans, system-ui)", color: "var(--color-text-muted, #757578)", fontSize: "var(--text-sm, 13px)", lineHeight: 1.35 }, children: s.footer }) : null
+          ] }, idx);
+        }) })
+      ]
+    }
+  );
+}
+export {
+  ArtifactReportCard,
+  ChangelogPanel,
+  FeatureCard,
+  ServiceCard
+};