feat(react): new component card (#40)

Close #15

README.md

@@ -51,7 +51,7 @@ _Layout_
 
 _Display_
 
-- [ ] Card
+- [x] Card
 - [x] Avatar
 - [ ] Accordion
 - [x] Alert

examples/with-vitejs/src/App.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react'
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@design-system/react'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@design-system/react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
+import imgPrueba from '/bghome.png'
 import { DialogCloseButton } from './test-dialog'
 
 function App() {
@@ -32,6 +33,22 @@ function App() {
       <Badge>
         Examples
       </Badge>
+
+      <Card className="w-96">
+        <CardHeader>
+          <img src={imgPrueba} alt="" className="shadow-md rounded" />
+        </CardHeader>
+        <CardContent className="flex justify-between  w-full mt-2">
+          <CardTitle>Apple Iphone</CardTitle>
+          <span className="text-dark-400">$120.00</span>
+        </CardContent>
+        <CardDescription className="text-pretty text-dark-400  m">
+          iPhone 12 combines elegant design with cutting-edge technology, giving you the best mobile experience. With its A14 Bionic chip, the fastest in a smartphone, intense games and professional applications run effortlessly.
+
+        </CardDescription>
+        <Button className="w-full">Add To Cart</Button>
+      </Card>
+
       <div>
         <a href="https://vitejs.dev" target="_blank">
           <img src={viteLogo} className="logo" alt="Vite logo" />

packages/react/src/components/alert.tsx

@@ -8,7 +8,7 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        dark: 'bg-dark-500 text-white',
+        dark: 'bg-dark-900 text-white',
         error: 'bg-error-500 dark:bg-error-500',
         success: 'bg-success-500 dark:bg-success-500',
         warn: 'bg-warn-500 dark:bg-warn-500',

packages/react/src/components/badge.tsx

@@ -11,7 +11,7 @@ const badgeVariants = cva(
         success: 'bg-success-500 hover:bg-success-400/90',
         primary: 'bg-primary-500 hover:bg-primary-500/90 text-black',
         secondary: 'bg-secondary-500 hover:bg-secondary/90',
-        dark: 'bg-dark-500 hover:bg-dark-500/90',
+        dark: 'bg-dark-900 hover:bg-dark-900/90',
         warn: 'bg-warn-500 hover:bg-warn-500/90',
         error: 'bg-error-500 hover:bg-error-500/90',
       },

packages/react/src/components/button.tsx

@@ -5,14 +5,14 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '../lib/cn'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-white',
+  'inline-flex items-center justify-center whitespace-nowrap rounded text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-white font-medium',
   {
     variants: {
       variant: {
         success: 'bg-success-500 hover:bg-success-400/90',
         primary: 'bg-primary-500 shadow hover:bg-primary-500/90 text-black',
         secondary: 'bg-secondary-500 shadow hover:bg-secondary/90',
-        dark: 'bg-dark-500 shadow hover:bg-dark-500/90',
+        dark: 'bg-dark-900 shadow hover:bg-dark-900/90',
         warn: 'bg-warn-500 shadow hover:bg-warn-500/90',
         error: 'bg-error-500 shadow hover:bg-error-500/90',
       },

packages/react/src/components/card.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+
+import { cn } from '../lib/cn'
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-xl shadow border bg-white text-black p-6',
+      className,
+    )}
+    {...props}
+  />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5', className)}
+    {...props}
+  />
+))
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn('font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+))
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm my-5', className)}
+    {...props}
+  />
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+))
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center ', className)}
+    {...props}
+  />
+))
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

packages/react/src/components/label.tsx

@@ -12,7 +12,7 @@ const labelVariants = cva(
         success: 'text-success-500 hover:text-success-400/90',
         primary: 'text-primary-500 hover:text-primary-500/90',
         secondary: 'text-secondary-500 hover:text-secondary-500/90',
-        dark: 'text-dark-500 hover:text-dark-500/90',
+        dark: 'text-dark-900 hover:text-dark-900/90',
         warn: 'text-warn-500 hover:text-warn-500/90',
         error: 'text-error-500 hover:text-error-500/90',
       },

packages/react/src/components/table.tsx

@@ -9,7 +9,7 @@ const Table = React.forwardRef<
   <div className="relative w-full overflow-auto">
     <table
       ref={ref}
-      className={cn('w-full caption-bottom text-sm bg-dark-900/70 text-white', className)}
+      className={cn('w-full caption-bottom text-sm bg-dark-900/80 text-white', className)}
       {...props}
     />
   </div>
@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      'border-t  font-medium [&>tr]:last:border-b-0',
       className,
     )}
     {...props}
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted border-white',
+      'border-b transition-colors border-white',
       className,
     )}
     {...props}
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      'h-10 px-2 text-left align-middle font-medium text-white [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className,
     )}
     {...props}

packages/react/src/index.ts

@@ -15,3 +15,4 @@ export * from './components/input'
 export * from './components/label'
 export * from './components/dialog'
 export * from './components/select'
+export * from './components/card'