@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/src/containers/timeline/timeline.tsx

@@ -0,0 +1,93 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "../../utils/cn.js";
+
+export type TimelineFeedTone = "neutral" | "accent" | "success" | "warning" | "danger";
+
+export interface TimelineFeedItem {
+  id: string;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Display time, e.g. "Hace 5 min" or "14:30". */
+  time?: string;
+  /** Machine-readable value for the `<time>` element. */
+  dateTime?: string;
+  /** Icon inside the marker; without it the marker is a dot. */
+  icon?: ReactNode;
+  tone?: TimelineFeedTone;
+  /** Person or system that did it. */
+  actor?: string;
+  /** Extra content under the text: attachments, chips, actions. */
+  children?: ReactNode;
+  /** Items with the same `group` sit under one heading (e.g. "Hoy"). */
+  group?: string;
+}
+
+export interface TimelineProps extends Omit<ComponentPropsWithoutRef<"ol">, "children"> {
+  items: TimelineFeedItem[];
+}
+
+const markerClasses: Record<TimelineFeedTone, string> = {
+  neutral: "bg-surface-2 text-ink-2",
+  accent: "bg-accent-soft text-accent-ink",
+  success: "bg-success-soft text-success",
+  warning: "bg-warning-soft text-warning",
+  danger: "bg-danger-soft text-danger",
+};
+
+/** Vertical activity feed: marker rail on the left, grouped by day, newest first by convention. */
+export function Timeline({ items, className, ...props }: TimelineProps) {
+  return (
+    <div className={cn("@container/timeline min-w-0", className)}>
+      <ol className="m-0 flex list-none flex-col p-0" {...props}>
+        {items.map((item, index) => {
+          const previous = items[index - 1];
+          const last = index === items.length - 1;
+          const tone = item.tone ?? "neutral";
+          return (
+            <li key={item.id} className="flex min-w-0 flex-col">
+              {item.group && item.group !== previous?.group ? (
+                <h4 className="pb-density-sm text-ink-3 text-overline uppercase">{item.group}</h4>
+              ) : null}
+              <div className="flex min-w-0 gap-density">
+                <div className="flex shrink-0 flex-col items-center">
+                  <span
+                    aria-hidden="true"
+                    className={cn(
+                      "flex size-7 shrink-0 items-center justify-center rounded-badge [&_svg]:size-3.5",
+                      markerClasses[tone],
+                    )}
+                  >
+                    {item.icon ?? <span className="size-2 rounded-full bg-current" />}
+                  </span>
+                  {last ? null : <span aria-hidden="true" className="w-px flex-1 bg-divider" />}
+                </div>
+                <div
+                  className={cn(
+                    "flex min-w-0 flex-1 flex-col gap-1",
+                    last ? "pb-0" : "pb-density-lg",
+                  )}
+                >
+                  <div className="flex min-w-0 flex-wrap items-baseline gap-x-density-sm">
+                    <span className="min-w-0 break-words text-row-title text-ink">
+                      {item.title}
+                    </span>
+                    {item.time ? (
+                      <time dateTime={item.dateTime} className="shrink-0 text-ink-3 text-meta">
+                        {item.time}
+                      </time>
+                    ) : null}
+                  </div>
+                  {item.actor ? <span className="text-ink-3 text-meta">{item.actor}</span> : null}
+                  {item.description ? (
+                    <p className="m-0 break-words text-body text-ink-2">{item.description}</p>
+                  ) : null}
+                  {item.children}
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}

package/src/containers/toolbar/index.ts

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

package/src/containers/toolbar/toolbar.tsx

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../../utils/cn.js";
+
+export type ToolbarProps = ComponentPropsWithoutRef<"div">;
+
+/** Row of filters/controls above a table or grid. */
+export function Toolbar({ className, ...props }: ToolbarProps) {
+  return <div className={cn("flex min-w-0 flex-wrap items-center gap-2", className)} {...props} />;
+}
+
+export type ToolbarRightProps = ComponentPropsWithoutRef<"div">;
+
+/** Group pushed to the right edge of the toolbar. */
+export function ToolbarRight({ className, ...props }: ToolbarRightProps) {
+  return (
+    <div
+      className={cn("ml-auto flex min-w-0 flex-wrap items-center gap-2", className)}
+      {...props}
+    />
+  );
+}

package/src/dashboards/data.ts

@@ -0,0 +1,40 @@
+/** Deterministic pseudo-random generator so every render shows the same sample data. */
+export function seeded(seed: number) {
+  let state = seed;
+  return () => {
+    state = (state * 1664525 + 1013904223) % 4294967296;
+    return state / 4294967296;
+  };
+}
+
+export const BARBEROS = [
+  "Diego Quispe",
+  "Ana Torres",
+  "Marco Rojas",
+  "Rosa Salazar",
+  "Julio Paredes",
+];
+
+export const SERVICIOS = [
+  { id: "corte", name: "Corte clásico", price: 35 },
+  { id: "fade", name: "Fade degradado", price: 40 },
+  { id: "combo", name: "Corte + barba", price: 55 },
+  { id: "barba", name: "Perfilado de barba", price: 25 },
+  { id: "navaja", name: "Afeitado con navaja", price: 30 },
+  { id: "tinte", name: "Tinte de barba", price: 45 },
+] as const;
+
+export const CLIENTES = [
+  "Álvaro Quispe",
+  "Bruno Mendoza",
+  "César Huamán",
+  "Eduardo Flores",
+  "Fernando Torres",
+  "Gonzalo Vargas",
+  "Héctor Chávez",
+  "Iván Castillo",
+  "Jorge Ramírez",
+  "Luis Paredes",
+  "Martín Gutiérrez",
+  "Óscar Delgado",
+];

package/src/dashboards/inicio-dashboard.tsx

@@ -0,0 +1,209 @@
+import { Button } from "../atoms/button/index.js";
+import { Chip } from "../atoms/chip/index.js";
+import { AreaChart } from "../charts/area-chart/index.js";
+import { BarChart } from "../charts/bar-chart/index.js";
+import { DonutChart } from "../charts/donut-chart/index.js";
+import { HeatmapChart } from "../charts/heatmap-chart/index.js";
+import { Cols } from "../containers/cols/index.js";
+import { DataGrid, type DataGridColumn } from "../containers/data-grid/index.js";
+import { Kpi } from "../containers/kpi/index.js";
+import {
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderEyebrow,
+  PageHeaderLede,
+  PageHeaderTitle,
+} from "../containers/page-header/index.js";
+import { BARBEROS, CLIENTES, SERVICIOS, seeded } from "./data.js";
+import { CardGrid, ChartCard, DashboardPage, KpiRow, TableCard } from "./layout.js";
+
+/** The owner's home dashboard, shared by the Inicio and Presets stories. */
+const random = seeded(11);
+
+const ingresos30 = Array.from({ length: 30 }, (_, index) => {
+  const fecha = new Date(2026, 8, 9 + index);
+  const finDeSemana = fecha.getDay() === 5 || fecha.getDay() === 6;
+  const base = finDeSemana ? 1450 : 980;
+  return { fecha, ingresos: Math.round(base + random() * 380) };
+});
+
+const ingresosPorServicio = [
+  { id: "corte", name: "Corte clásico", value: 9800 },
+  { id: "combo", name: "Corte + barba", value: 8450 },
+  { id: "fade", name: "Fade degradado", value: 6200 },
+  { id: "barba", name: "Perfilado de barba", value: 3100 },
+  { id: "navaja", name: "Afeitado con navaja", value: 2400 },
+  { id: "tinte", name: "Tinte de barba", value: 1650 },
+];
+
+const DIAS = ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"];
+const HORAS = Array.from({ length: 12 }, (_, index) => `${9 + index}h`);
+const ocupacion = DIAS.map((_, dia) =>
+  HORAS.map((__, hora) => {
+    const pico = dia >= 4 ? 1.15 : 0.85;
+    const tarde = hora >= 7 && hora <= 10 ? 1.2 : hora === 3 ? 0.55 : 1;
+    return Math.min(1, Math.round((45 + random() * 40) * pico * tarde) / 100);
+  }),
+);
+
+const ventasPorBarbero = [
+  { name: BARBEROS[0], total: 5820 },
+  { name: BARBEROS[1], total: 5310 },
+  { name: BARBEROS[2], total: 4680 },
+  { name: BARBEROS[3], total: 3990 },
+  { name: BARBEROS[4], total: 3230 },
+].sort((a, b) => b.total - a.total);
+
+interface Cita {
+  id: string;
+  hora: string;
+  cliente: string;
+  servicio: string;
+  barbero: string;
+  estado: "Confirmada" | "Pendiente" | "En sillón";
+  total: number;
+}
+
+const ESTADOS: Cita["estado"][] = ["Confirmada", "Pendiente", "En sillón"];
+const citas: Cita[] = Array.from({ length: 14 }, (_, index) => {
+  const servicio = SERVICIOS[index % SERVICIOS.length] ?? SERVICIOS[0];
+  const minutos = 10 * 60 + index * 35;
+  return {
+    id: `C-${2040 + index}`,
+    hora: `${String(Math.floor(minutos / 60)).padStart(2, "0")}:${String(minutos % 60).padStart(2, "0")}`,
+    cliente: CLIENTES[index % CLIENTES.length] ?? "",
+    servicio: servicio.name,
+    barbero: BARBEROS[index % BARBEROS.length] ?? "",
+    estado: ESTADOS[index % 3] ?? "Pendiente",
+    total: servicio.price,
+  };
+});
+
+const citaColumns: DataGridColumn<Cita>[] = [
+  { id: "hora", header: "Hora", accessor: "hora", width: 84 },
+  { id: "cliente", header: "Cliente", accessor: "cliente", width: 180 },
+  { id: "servicio", header: "Servicio", accessor: "servicio", width: 170, filter: "select" },
+  { id: "barbero", header: "Barbero", accessor: "barbero", width: 150, filter: "select" },
+  {
+    id: "estado",
+    header: "Estado",
+    accessor: "estado",
+    type: "status",
+    width: 130,
+    statusTones: { Confirmada: "success", Pendiente: "warning", "En sillón": "accent" },
+  },
+  {
+    id: "total",
+    header: "Total",
+    accessor: "total",
+    type: "currency",
+    aggregate: "sum",
+    width: 100,
+  },
+];
+
+export function InicioDashboard() {
+  return (
+    <DashboardPage>
+      <PageHeader>
+        <div>
+          <PageHeaderEyebrow>Barbería Don Lucho · Miraflores</PageHeaderEyebrow>
+          <PageHeaderTitle>
+            Buen día, <span className="text-accent-word">Lucho</span>
+          </PageHeaderTitle>
+          <PageHeaderLede>Así va tu barbería hoy, jueves 8 de octubre.</PageHeaderLede>
+        </div>
+        <PageHeaderActions>
+          <Button variant="secondary" size="sm">
+            Exportar
+          </Button>
+          <Button size="sm">Nueva cita</Button>
+        </PageHeaderActions>
+      </PageHeader>
+
+      <KpiRow>
+        <Kpi label="Ventas del día" value="S/ 1 280" description="+12% vs. ayer" />
+        <Kpi label="Citas" value="18" suffix="/ 24" description="4 pendientes" />
+        <Kpi label="Ticket promedio" value="S/ 47" description="Meta S/ 45" />
+        <Kpi label="Ocupación" value="78%" description="Pico a las 17h" />
+      </KpiRow>
+
+      <Cols>
+        <ChartCard
+          title="Ingresos de los últimos 30 días"
+          subtitle="Soles por día, con la meta diaria"
+          aside={<Chip tone="success">+8% mensual</Chip>}
+          height={320}
+        >
+          <AreaChart
+            height="fill"
+            title="Ingresos diarios de los últimos 30 días"
+            categories={ingresos30.map((item) => item.fecha)}
+            series={[
+              { id: "ingresos", name: "Ingresos", data: ingresos30.map((item) => item.ingresos) },
+            ]}
+            valueFormat="currency"
+            legend={false}
+            annotations={[
+              { type: "line", axis: "y", value: 1100, label: "Meta diaria", tone: "success" },
+            ]}
+            labels={{ empty: "Sin datos", category: "Día", value: "Ingresos" }}
+          />
+        </ChartCard>
+        <ChartCard title="Ingresos por servicio" subtitle="Octubre, acumulado" height={320}>
+          <DonutChart
+            height="fill"
+            title="Ingresos por servicio"
+            data={ingresosPorServicio}
+            valueFormat="currency"
+            centerLabel="Total del mes"
+            labels={{ total: "Total" }}
+          />
+        </ChartCard>
+      </Cols>
+
+      <CardGrid>
+        <ChartCard
+          title="Ocupación por hora y día"
+          subtitle="Porcentaje de sillones ocupados"
+          height={300}
+        >
+          <HeatmapChart
+            height="fill"
+            title="Ocupación por hora y día de la semana"
+            rows={DIAS}
+            columns={HORAS}
+            values={ocupacion}
+            domain={[0, 1]}
+            valueFormat="percent"
+            labels={{ category: "Día", value: "Ocupación", noData: "Sin datos" }}
+          />
+        </ChartCard>
+        <ChartCard title="Ventas por barbero" subtitle="Octubre, en soles" height={300}>
+          <BarChart
+            height="fill"
+            orientation="horizontal"
+            title="Ventas por barbero"
+            categories={ventasPorBarbero.map((item) => item.name ?? "")}
+            series={[{ id: "ventas", name: "Ventas", data: ventasPorBarbero.map((i) => i.total) }]}
+            valueFormat="currency"
+            dataLabels
+            legend={false}
+          />
+        </ChartCard>
+      </CardGrid>
+
+      <TableCard title="Próximas citas" subtitle="Hoy, desde las 10:00">
+        <DataGrid
+          aria-label="Próximas citas de hoy"
+          data={citas}
+          columns={citaColumns}
+          getRowId={(cita) => cita.id}
+          height={360}
+          defaultPinned={{ left: ["hora"] }}
+          exportFilename="proximas-citas"
+        />
+      </TableCard>
+    </DashboardPage>
+  );
+}

package/src/dashboards/layout.tsx

@@ -0,0 +1,95 @@
+import type { Decorator } from "@storybook/react-vite";
+import type { ReactNode } from "react";
+import { Card, CardBody, CardHeader } from "../containers/card/index.js";
+import { cn } from "../utils/cn.js";
+
+/** Vertical rhythm of a dashboard page. */
+export function DashboardPage({ children }: { children: ReactNode }) {
+  return <div className="flex min-w-0 flex-col gap-4">{children}</div>;
+}
+
+/** Joined KPI tiles: two per row when narrow, four from 720 px of page width. */
+export function KpiRow({ children }: { children: ReactNode }) {
+  return (
+    <div className="grid grid-cols-2 gap-px overflow-hidden rounded-card bg-line border-card shadow-card @min-[720px]/page:grid-cols-4">
+      {children}
+    </div>
+  );
+}
+
+const gridClasses = {
+  2: "grid-cols-1 @min-[720px]/page:grid-cols-2",
+  3: "grid-cols-1 @min-[720px]/page:grid-cols-2 @min-[1180px]/page:grid-cols-3",
+} as const;
+
+/** Equal cards that stack under 720 px of page width. */
+export function CardGrid({ columns = 2, children }: { columns?: 2 | 3; children: ReactNode }) {
+  return <div className={cn("grid items-start gap-4", gridClasses[columns])}>{children}</div>;
+}
+
+export interface ChartCardProps {
+  title: string;
+  subtitle?: string;
+  /** Slot at the end of the header (a chip, a button). */
+  aside?: ReactNode;
+  /** Fixed height of the body in px; the chart inside uses `height="fill"`. */
+  height?: number;
+  children: ReactNode;
+}
+
+function CardTitle({ title, subtitle }: { title: string; subtitle?: string }) {
+  return (
+    <div className="min-w-0 flex-1">
+      <h2 className="m-0 break-words font-semibold text-[14px] text-ink">{title}</h2>
+      {subtitle ? <p className="m-0 break-words text-[12px] text-ink-3">{subtitle}</p> : null}
+    </div>
+  );
+}
+
+/** Card with a fixed-height body so `height="fill"` charts take exactly the space left. */
+export function ChartCard({ title, subtitle, aside, height = 300, children }: ChartCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle title={title} subtitle={subtitle} />
+        {aside}
+      </CardHeader>
+      <CardBody>
+        <div className="min-w-0" style={{ height }}>
+          {children}
+        </div>
+      </CardBody>
+    </Card>
+  );
+}
+
+/** Card whose body is a table or grid that scrolls inside its own wrapper. */
+export function TableCard({ title, subtitle, aside, children }: Omit<ChartCardProps, "height">) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle title={title} subtitle={subtitle} />
+        {aside}
+      </CardHeader>
+      <div className="min-w-0">{children}</div>
+    </Card>
+  );
+}
+
+/** Container-width frames for the `Narrow` (320) and `Tablet` (768) variants. */
+export const narrowFrame: Decorator = (Story) => (
+  <div className="@container/page w-[320px] max-w-full">
+    <Story />
+  </div>
+);
+
+export const tabletFrame: Decorator = (Story) => (
+  <div className="@container/page w-[768px] max-w-full">
+    <Story />
+  </div>
+);
+
+export const NARROW_NOTE =
+  "Container of 320 px: Cols collapse to one column, KPIs go two per row and every chart adapts to its card.";
+export const TABLET_NOTE =
+  "Container of 768 px: cards pair up and Cols stay in one column (they split from 940 px of container).";

package/src/forms/accent-picker/accent-picker.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { type ComponentPropsWithoutRef, useState } from "react";
+import { cn } from "../../utils/cn.js";
+
+export interface AccentOption {
+  value: string;
+  label: string;
+  /** Any CSS color value, typically a variable such as `var(--accent)`. */
+  swatch: string;
+}
+
+export interface AccentPickerProps
+  extends Omit<
+    ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
+    "value" | "defaultValue" | "onValueChange"
+  > {
+  options: AccentOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+/**
+ * Exclusive swatch picker. Controlled or uncontrolled; the root exposes
+ * `data-accent` with the active option so consumers can read it. Applying the
+ * value to the document is the consumer's responsibility.
+ */
+export function AccentPicker({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  ...props
+}: AccentPickerProps) {
+  const [internal, setInternal] = useState(() => defaultValue ?? options[0]?.value);
+  const current = value ?? internal;
+
+  return (
+    <RadioGroupPrimitive.Root
+      data-accent={current}
+      value={current}
+      onValueChange={(next) => {
+        setInternal(next);
+        onValueChange?.(next);
+      }}
+      className={cn("flex flex-wrap gap-2", className)}
+      {...props}
+    >
+      {options.map((option) => (
+        <RadioGroupPrimitive.Item
+          key={option.value}
+          value={option.value}
+          className="flex items-center gap-2 rounded-control border-divider px-2.5 py-1.75 font-semibold text-chip-text text-ink data-[state=checked]:border-accent-ink data-[state=checked]:shadow-selected"
+        >
+          <span
+            aria-hidden="true"
+            className="size-3.5 shrink-0 rounded-xs"
+            style={{ background: option.swatch }}
+          />
+          {option.label}
+        </RadioGroupPrimitive.Item>
+      ))}
+    </RadioGroupPrimitive.Root>
+  );
+}

package/src/forms/accent-picker/index.ts

@@ -0,0 +1,5 @@
+export {
+  type AccentOption,
+  AccentPicker,
+  type AccentPickerProps,
+} from "./accent-picker.js";

package/src/forms/checkbox-button-group/checkbox-button-group.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { type ButtonOption, OptionShell, optionGridClass } from "../internal/button-option.js";
+
+export type CheckboxButtonOption = ButtonOption;
+
+export interface CheckboxButtonGroupProps {
+  options: CheckboxButtonOption[];
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  /** Form field name shared by the checkboxes. */
+  name?: string;
+  disabled?: boolean;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  className?: string;
+}
+
+/** Multi-select where each option is a button-like card; native checkboxes underneath. */
+export function CheckboxButtonGroup({
+  options,
+  value: valueProp,
+  defaultValue = [],
+  onValueChange,
+  name,
+  disabled,
+  className,
+  ...aria
+}: CheckboxButtonGroupProps) {
+  const [inner, setInner] = useState(defaultValue);
+  const value = valueProp ?? inner;
+
+  const toggle = (optionValue: string, checked: boolean) => {
+    const next = checked ? [...value, optionValue] : value.filter((v) => v !== optionValue);
+    if (valueProp === undefined) setInner(next);
+    onValueChange?.(next);
+  };
+
+  return (
+    <fieldset
+      className={cn("@container/options m-0 min-w-0 border-0 p-0", optionGridClass, className)}
+      {...aria}
+    >
+      {options.map((option) => (
+        <OptionShell
+          key={option.value}
+          option={option}
+          input={
+            <input
+              type="checkbox"
+              name={name}
+              value={option.value}
+              checked={value.includes(option.value)}
+              disabled={disabled || option.disabled}
+              onChange={(event) => toggle(option.value, event.target.checked)}
+              className="sr-only"
+            />
+          }
+        />
+      ))}
+    </fieldset>
+  );
+}

package/src/forms/checkbox-button-group/index.ts

@@ -0,0 +1,5 @@
+export {
+  CheckboxButtonGroup,
+  type CheckboxButtonGroupProps,
+  type CheckboxButtonOption,
+} from "./checkbox-button-group.js";