RustLangES · SergioRibera · Jul 9, 2025 · Jun 28, 2025 · Jun 29, 2025 · Jun 29, 2025
diff --git a/.github/workflows/npm-checks.yml b/.github/workflows/npm-checks.yml
@@ -34,8 +34,11 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build showcase
+        run: pnpm build:showcase-lib
+
       - name: Run lint on all packages
-        run: pnpm -r lint
+        run: pnpm lint
 
       - name: Run format check on all packages
-        run: pnpm -r fmt:check
+        run: pnpm fmt:check
diff --git a/.prettierignore b/.prettierignore
@@ -1,4 +1,5 @@
 .github/
+dist/
 
 *.md
 pnpm-lock.yaml
diff --git a/js/react/index.html b/js/react/index.html
@@ -5,6 +5,13 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RustLangES React Components</title>
+    <style>
+      @media (prefers-color-scheme: dark) {
+        html:where(:not(.rustlanges-theme-light)) {
+          background-color: var(--color-dark, #2e2e2e);
+        }
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/js/react/lib/components/avatar/avatar.showcase.tsx b/js/react/lib/components/avatar/avatar.showcase.tsx
@@ -0,0 +1,18 @@
+import { registerCase } from "@rustlanges/showcase";
+import { Avatar } from "./avatar.component";
+
+registerCase("Avatar", {
+  props: {
+    alt: "string",
+    size: {
+      kind: "number",
+      default: 32,
+    },
+    avatarUrl: {
+      kind: "string",
+      default:
+        "https://images.unsplash.com/photo-1575936123452-b67c3203c357?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D",
+    },
+  },
+  component: Avatar,
+});
diff --git a/js/react/lib/components/badge/badge.showcase.tsx b/js/react/lib/components/badge/badge.showcase.tsx
@@ -0,0 +1,23 @@
+import { registerCase } from "@rustlanges/showcase";
+import { Badge } from "./badge.component";
+
+registerCase("Badge", {
+  props: {
+    variant: {
+      kind: "string",
+      default: "completed",
+      options: ["completed", "pending", "reading", "unread"],
+    },
+    type: {
+      kind: "string",
+      default: "numeric",
+      options: ["default", "numeric", "text"],
+    },
+    count: {
+      kind: "number",
+      default: 1,
+      optional: false,
+    },
+  },
+  component: Badge,
+});
diff --git a/js/react/lib/components/button/button.showcase.tsx b/js/react/lib/components/button/button.showcase.tsx
@@ -0,0 +1,20 @@
+import { registerCase } from "@rustlanges/showcase";
+import { Button } from "./button.component";
+
+registerCase("Button", {
+  props: {
+    variant: {
+      kind: "string",
+      options: ["primary", "secondary", "text", "icon"],
+      default: "primary",
+    },
+    label: {
+      kind: "string",
+      default: "Botón",
+    },
+    disabled: "boolean",
+    icon: "icon",
+    onClick: "callback",
+  },
+  component: Button,
+});
diff --git a/js/react/lib/components/calendar/calendar.showcase.tsx b/js/react/lib/components/calendar/calendar.showcase.tsx
@@ -0,0 +1,18 @@
+import { useState } from "react";
+import { registerCase } from "@rustlanges/showcase";
+import { Calendar } from "./calendar.component";
+import { CalendarRangeDate } from "./calendar.types";
+
+registerCase("Calendar", () => {
+  const [single, setSingle] = useState<Date | null>(new Date());
+  const [multiple, setMultiple] = useState<Record<string, Date> | null>(null);
+  const [range, setRange] = useState<CalendarRangeDate | null>(null);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Calendar type="single" onChange={setSingle} value={single} />
+      <Calendar type="multiple" onChange={setMultiple} value={multiple} />
+      <Calendar type="range" onChange={setRange} value={range} />
+    </div>
+  );
+});
diff --git a/js/react/lib/components/card/card.showcase.tsx b/js/react/lib/components/card/card.showcase.tsx
@@ -0,0 +1,15 @@
+import { registerCase } from "@rustlanges/showcase";
+import { Card } from "./card.component";
+
+registerCase("Card", {
+  props: {
+    clickable: "boolean",
+    disabled: "boolean",
+    className: {
+      kind: "string",
+      default: "min-w-50 min-h-50",
+    },
+    onClick: "callback",
+  },
+  component: Card,
+});
diff --git a/js/react/lib/components/chip/chip.showcase.tsx b/js/react/lib/components/chip/chip.showcase.tsx
@@ -0,0 +1,17 @@
+import { registerCase } from "@rustlanges/showcase";
+import { Chip } from "./chip.component";
+
+registerCase("Chip", {
+  props: {
+    variant: {
+      kind: "string",
+      default: "featured",
+      options: ["featured", "numeric", "description", "location", "small"],
+    },
+    label: {
+      kind: "string",
+      default: "Destacado",
+    },
+  },
+  component: Chip,
+});
diff --git a/js/react/lib/components/collaborators/collaborators.showcase.tsx b/js/react/lib/components/collaborators/collaborators.showcase.tsx
@@ -0,0 +1,46 @@
+import { registerCase } from "@rustlanges/showcase";
+import { Collaborators } from "./collaborators.component";
+
+const collaborator = {
+  avatarUrl:
+    "https://images.unsplash.com/photo-1575936123452-b67c3203c357?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D",
+  nickname: "Colaborador",
+};
+
+registerCase("Collaborators", () => {
+  return (
+    <div className="grid w-full justify-center gap-4">
+      <div className="w-60">
+        <Collaborators
+          collaborators={[
+            collaborator,
+            collaborator,
+            collaborator,
+            collaborator,
+          ]}
+          sourceUrl="https://github.com/RustLangES/design-system-components"
+        />
+      </div>
+      <div className="w-60">
+        <Collaborators
+          collaborators={[collaborator]}
+          sourceUrl="https://github.com/RustLangES/design-system-components"
+        />
+      </div>
+      <div className="w-60">
+        <Collaborators
+          collaborators={[
+            collaborator,
+            collaborator,
+            collaborator,
+            collaborator,
+            collaborator,
+            collaborator,
+            collaborator,
+          ]}
+          sourceUrl="https://github.com/RustLangES/design-system-components"
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/js/react/lib/components/contact-form/contact-form.showcase.tsx b/js/react/lib/components/contact-form/contact-form.showcase.tsx
@@ -0,0 +1,6 @@
+import { registerCase } from "@rustlanges/showcase";
+import { ContactForm } from "./contact-form.component";
+
+registerCase("Contact Form", () => {
+  return <ContactForm />;
+});