@buchorg/ui-core 1.0.0

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@buchorg/ui-core",
+  "version": "1.0.0",
+  "description": "Componentes React compartidos: Tag, StatCard, FlagBar, etc.",
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@buchorg/plugin-sdk": "*"
+  },
+  "peerDependencies": { "react": ">=18" }
+}

package/src/index.tsx

@@ -0,0 +1,257 @@
+// ============================================================
+// @buchorg/ui-core  —  Componentes React compartidos
+// Agnósticos al país; consumen CSS variables del tema activo.
+// ============================================================
+
+import React, { type ReactNode, type HTMLAttributes } from 'react';
+
+// -----------------------------------------------------------
+// Tipos comunes
+// -----------------------------------------------------------
+export type TagVariant = 'primary' | 'success' | 'warning' | 'danger' | 'neutral';
+
+// -----------------------------------------------------------
+// Tag / Badge
+// -----------------------------------------------------------
+const tagStyles: Record<TagVariant, React.CSSProperties> = {
+  primary: { background: 'var(--country-primary)', color: '#fff' },
+  success: { background: '#d1fae5', color: '#065f46' },
+  warning: { background: '#fef3c7', color: '#92400e' },
+  danger:  { background: '#fee2e2', color: '#991b1b' },
+  neutral: { background: '#f1f5f9', color: '#475569' },
+};
+
+interface TagProps { text: string; variant?: TagVariant; className?: string; }
+
+export function Tag({ text, variant = 'neutral', className }: TagProps) {
+  return (
+    <span
+      className={className}
+      style={{
+        display: 'inline-flex', alignItems: 'center',
+        fontSize: 11, fontWeight: 600, letterSpacing: '.04em',
+        padding: '3px 9px', borderRadius: 20, textTransform: 'uppercase',
+        ...tagStyles[variant],
+      }}
+    >
+      {text}
+    </span>
+  );
+}
+
+// -----------------------------------------------------------
+// StatCard — tarjeta de métrica
+// -----------------------------------------------------------
+interface StatCardProps {
+  icon:      string;
+  title:     string;
+  value:     string;
+  subtitle?: string;
+  accent?:   boolean;
+}
+
+export function StatCard({ icon, title, value, subtitle, accent }: StatCardProps) {
+  return (
+    <div
+      style={{
+        background:    'var(--country-surface)',
+        border:        `1px solid var(--country-border)`,
+        borderLeft:    accent ? '4px solid var(--country-primary)' : undefined,
+        borderRadius:  12,
+        padding:       '20px 24px',
+        transition:    'transform .2s, box-shadow .2s',
+        cursor:        'default',
+        fontFamily:    'var(--country-font, inherit)',
+      }}
+      onMouseEnter={e => {
+        (e.currentTarget as HTMLElement).style.transform = 'translateY(-2px)';
+        (e.currentTarget as HTMLElement).style.boxShadow =
+          '0 8px 24px color-mix(in srgb, var(--country-primary) 14%, transparent)';
+      }}
+      onMouseLeave={e => {
+        (e.currentTarget as HTMLElement).style.transform = '';
+        (e.currentTarget as HTMLElement).style.boxShadow = '';
+      }}
+    >
+      <div style={{ fontSize: 28, marginBottom: 12 }}>{icon}</div>
+      <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--country-text-secondary)', marginBottom: 4 }}>
+        {title}
+      </div>
+      <div style={{ fontSize: 26, fontWeight: 700, color: 'var(--country-text)', lineHeight: 1.1 }}>
+        {value}
+      </div>
+      {subtitle && (
+        <div style={{ fontSize: 12, color: 'var(--country-text-secondary)', marginTop: 4 }}>
+          {subtitle}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// -----------------------------------------------------------
+// SectionTitle — título de sección con línea decorativa
+// -----------------------------------------------------------
+interface SectionTitleProps {
+  children: ReactNode;
+  accentLeft?: boolean;
+  style?: React.CSSProperties;
+}
+
+export function SectionTitle({ children, accentLeft, style }: SectionTitleProps) {
+  return (
+    <div
+      style={{
+        fontSize: 11, fontWeight: 700, letterSpacing: '.1em',
+        textTransform: 'uppercase', color: 'var(--country-primary)',
+        marginBottom: 14, display: 'flex', alignItems: 'center', gap: 8,
+        ...(accentLeft ? {
+          paddingLeft: 10,
+          borderLeft: '3px solid var(--country-accent)',
+        } : {}),
+        ...style,
+      }}
+    >
+      {children}
+      {!accentLeft && (
+        <span style={{ flex: 1, height: 1, background: 'color-mix(in srgb, var(--country-primary) 20%, transparent)' }} />
+      )}
+    </div>
+  );
+}
+
+// -----------------------------------------------------------
+// FlagBar — franja de bandera configurable
+// -----------------------------------------------------------
+interface FlagBarProps {
+  colors: [string, string, string];
+  weights: [number, number, number];
+  height?: number;
+}
+
+export function FlagBar({ colors, weights, height = 6 }: FlagBarProps) {
+  const [w1, w2] = weights;
+  return (
+    <div style={{
+      height,
+      background: `linear-gradient(to right,
+        ${colors[0]} ${w1}%,
+        ${colors[1]} ${w1}% ${w1 + w2}%,
+        ${colors[2]} ${w1 + w2}%
+      )`,
+    }} />
+  );
+}
+
+// -----------------------------------------------------------
+// TaxInfoBox — caja de información tributaria
+// -----------------------------------------------------------
+interface TaxInfoBoxProps {
+  icon:        string;
+  label:       string;
+  value:       string;
+  borderColor: string;
+  bgColor:     string;
+}
+
+export function TaxInfoBox({ icon, label, value, borderColor, bgColor }: TaxInfoBoxProps) {
+  return (
+    <div style={{
+      marginTop: 28, background: bgColor,
+      border: `1px solid color-mix(in srgb, ${borderColor} 30%, transparent)`,
+      borderLeft: `4px solid ${borderColor}`,
+      borderRadius: 10, padding: '16px 20px',
+      display: 'flex', alignItems: 'center', gap: 16,
+    }}>
+      <span style={{ fontSize: 28 }}>{icon}</span>
+      <div>
+        <div style={{ fontSize: 13, color: 'var(--country-text-secondary)' }}>{label}</div>
+        <div style={{ fontSize: 18, fontWeight: 700, color: borderColor }}>{value}</div>
+      </div>
+    </div>
+  );
+}
+
+// -----------------------------------------------------------
+// OrdersTable — tabla genérica de pedidos
+// -----------------------------------------------------------
+export interface OrderRow {
+  id:         string;
+  customer:   string;
+  amount:     string;         // ya formateado
+  status:     TagVariant;
+  statusText: string;
+  docType:    string;
+}
+
+interface OrdersTableProps {
+  rows:       OrderRow[];
+  headerBg:   string;         // color de fondo de cabecera
+  idColor:    string;
+  docBg:      string;
+  docColor:   string;
+  docBorder:  string;
+}
+
+export function OrdersTable({ rows, headerBg, idColor, docBg, docColor, docBorder }: OrdersTableProps) {
+  return (
+    <div style={{ overflowX: 'auto', background: 'var(--country-surface)', borderRadius: 12, border: '1px solid var(--country-border)' }}>
+      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+        <thead>
+          <tr>
+            {['N° Pedido', 'Cliente', 'Comprobante', 'Monto', 'Estado'].map((h, i) => (
+              <th key={h} style={{
+                background: headerBg, color: '#fff',
+                fontSize: 11, fontWeight: 700, letterSpacing: '.06em',
+                textTransform: 'uppercase', padding: '11px 14px', textAlign: 'left',
+                borderRadius: i === 0 ? '8px 0 0 0' : i === 4 ? '0 8px 0 0' : undefined,
+              }}>{h}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, idx) => (
+            <tr key={row.id} style={{ background: idx % 2 === 1 ? 'color-mix(in srgb, var(--country-primary) 2%, transparent)' : undefined }}>
+              <td style={{ padding: '12px 14px', borderBottom: '1px solid var(--country-border)' }}>
+                <span style={{ fontFamily: 'monospace', fontSize: 12, fontWeight: 700, color: idColor }}>{row.id}</span>
+              </td>
+              <td style={{ padding: '12px 14px', fontSize: 13, borderBottom: '1px solid var(--country-border)', color: 'var(--country-text)' }}>{row.customer}</td>
+              <td style={{ padding: '12px 14px', borderBottom: '1px solid var(--country-border)' }}>
+                <span style={{
+                  fontSize: 10, fontWeight: 600, padding: '2px 7px', borderRadius: 4,
+                  background: docBg, color: docColor,
+                  border: `1px solid ${docBorder}`,
+                  textTransform: 'uppercase', letterSpacing: '.04em',
+                }}>{row.docType}</span>
+              </td>
+              <td style={{ padding: '12px 14px', fontSize: 13, fontWeight: 600, borderBottom: '1px solid var(--country-border)', color: 'var(--country-text)' }}>{row.amount}</td>
+              <td style={{ padding: '12px 14px', borderBottom: '1px solid var(--country-border)' }}>
+                <Tag text={row.statusText} variant={row.status} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// -----------------------------------------------------------
+// Skeleton
+// -----------------------------------------------------------
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> { lines?: number; }
+
+export function Skeleton({ lines = 3, style, ...rest }: SkeletonProps) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '12px 0', ...style }} {...rest}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <div key={i} style={{
+          height: 14, borderRadius: 4,
+          width: `${70 + Math.random() * 28}%`,
+          background: 'var(--country-surface)',
+          animation: 'skeleton-shimmer 1.4s infinite',
+        }} />
+      ))}
+    </div>
+  );
+}