feat(react): add Card component (#49)

Co-authored-by: Apika Luca <[email protected]>

Author: Franco-Pertusati

js/react/lib/components/card/card.component.tsx

@@ -0,0 +1,25 @@
+import { PropsWithChildren } from "react";
+import { withAs } from "@/utils/hoc";
+import { cn } from "@/utils/tw-merge";
+
+export type CardProps = PropsWithChildren & {
+  clickable?: boolean;
+  disabled?: boolean;
+  className?: string;
+};
+
+export const Card = withAs((Component, props: CardProps) => {
+  const { clickable = false, disabled = false, className, ...attr } = props;
+
+  return (
+    <Component
+      className={cn(
+        "rustlanges-card",
+        clickable && "rustlanges-card--clickable",
+        disabled && "disabled rustlanges-card--disabled",
+        className
+      )}
+      {...attr}
+    />
+  );
+}, "div");

js/react/lib/components/card/index.ts

@@ -0,0 +1 @@
+export * from "./card.component";

js/react/lib/index.ts

@@ -1,5 +1,6 @@
 export * from "./components/Example";
 export * from "./components/button";
+export * from "./components/card";
 export * from "./components/contact-form";
 export * from "./components/chip";
 export * from "./components/tag";

js/react/showcase/App.tsx

@@ -12,6 +12,7 @@ import {
   Radio,
   Badge,
   DropdownState,
+  Card,
   Calendar,
   CalendarRangeDate,
   DropdownTree,
@@ -390,6 +391,27 @@ export function App() {
           },
         }}
       />
+      <ShowComponent
+        title="Card"
+        propsDef={{
+          clickable: {
+            type: "boolean",
+            default: false,
+          },
+          disabled: {
+            type: "boolean",
+            default: false,
+          },
+          className: {
+            type: "string",
+            default: "min-w-50 min-h-50",
+          },
+          onClick: {
+            type: "callback",
+          },
+        }}
+        component={Card}
+      />
       <ShowComponent title="Scroll bar ">
         <div className="scrollbar mx-auto h-48 w-full overflow-auto">
           <div className="mx-auto flex h-96 w-20 items-center">Container</div>

styles/components.css

@@ -1,6 +1,7 @@
 @import "./components/avatar.css";
 @import "./components/badge.css";
 @import "./components/button.css";
+@import "./components/card.css";
 @import "./components/chip.css";
 @import "./components/collaborators.css";
 @import "./components/dropdown.css";

styles/components/card.css

@@ -0,0 +1,23 @@
+@layer components {
+  .rustlanges-card {
+    @apply bg-light border-1 shadow-brutal rounded-lg border-black p-4;
+    @apply dark:bg-neutral-900;
+  }
+
+  .rustlanges-card--clickable {
+    @apply cursor-pointer;
+
+    @variant hover {
+      @apply shadow-rb-violet-700 border-violet-700;
+      @apply dark:border-primary-600 dark:shadow-rb-primary-600;
+    }
+
+    @apply active:shadow-none;
+  }
+
+  .rustlanges-card--disabled {
+    @apply pointer-events-none shadow-none;
+    @apply border-neutral-200;
+    @apply dark:border-neutral-600;
+  }
+}