From 2b112230a9d595ce6389b619040b7d8c3a47ca1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20UB?=
 <22903142+adrian-ub@users.noreply.github.com>
Date: Sat, 28 Sep 2024 10:01:31 -0500
Subject: [PATCH] docs: add card

---
 docs/src/content/docs/components/card.mdx     | 67 +++++++++++++++++++
 .../default/example/card-with-form.ts         | 59 ++++++++++++++++
 docs/src/registry/default/ui/card.ts          | 12 ++--
 .../new-york/example/card-with-form.ts        | 58 ++++++++++++++++
 docs/src/registry/new-york/ui/card.ts         | 12 ++--
 5 files changed, 196 insertions(+), 12 deletions(-)
 create mode 100644 docs/src/content/docs/components/card.mdx
 create mode 100644 docs/src/registry/default/example/card-with-form.ts
 create mode 100644 docs/src/registry/new-york/example/card-with-form.ts

diff --git a/docs/src/content/docs/components/card.mdx b/docs/src/content/docs/components/card.mdx
new file mode 100644
index 0000000..d166a9f
--- /dev/null
+++ b/docs/src/content/docs/components/card.mdx
@@ -0,0 +1,67 @@
+---
+title: Card
+description: Displays a card with header, content, and footer.
+---
+
+<ComponentPreview name="card-with-form" description="A card with a form" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ng@latest add card
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Step>
+
+<StepItem>Copy and paste the following code into your project.</StepItem>
+
+<ComponentSource name="card" />
+
+<StepItem>Update the import paths to match your project setup.</StepItem>
+
+</Step>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```ts
+import {
+  UbCardContentDirective,
+  UbCardDescriptionDirective,
+  UbCardDirective,
+  UbCardFooterDirective,
+  UbCardHeaderDirective,
+  UbCardTitleDirective,
+} from '@/components/ui/card'
+```
+
+```html
+ <div ubCard>
+    <div ubCardHeader>
+        <h3 ubCardTitle>Card Title</h3>
+        <p ubCardDescription>Card Description</p>
+    </div>
+    <div ubCardContent>
+       <p>Card Content</p>
+    </div>
+    <div ubCardFooter>
+        <p>Card Footer</p>
+    </div>
+</div>
+```
diff --git a/docs/src/registry/default/example/card-with-form.ts b/docs/src/registry/default/example/card-with-form.ts
new file mode 100644
index 0000000..5a3d35c
--- /dev/null
+++ b/docs/src/registry/default/example/card-with-form.ts
@@ -0,0 +1,59 @@
+import { UbButtonDirective } from '@/registry/new-york/ui/button'
+import {
+  UbCardContentDirective,
+  UbCardDescriptionDirective,
+  UbCardDirective,
+  UbCardFooterDirective,
+  UbCardHeaderDirective,
+  UbCardTitleDirective,
+} from '@/registry/new-york/ui/card'
+import { UbInputDirective } from '@/registry/new-york/ui/input'
+import { UbLabelDirective } from '@/registry/new-york/ui/label'
+
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  imports: [
+    UbCardDirective,
+    UbCardHeaderDirective,
+    UbCardTitleDirective,
+    UbCardDescriptionDirective,
+    UbCardContentDirective,
+    UbCardFooterDirective,
+
+    UbInputDirective,
+    UbLabelDirective,
+    UbButtonDirective,
+  ],
+  selector: 'card-with-form-default',
+  template: `
+    <div ubCard class="w-[350px]">
+
+        <div ubCardHeader>
+            <h3 ubCardTitle>Create project</h3>
+            <p ubCardDescription>Deploy your new project in one-click.</p>
+        </div>
+
+        <div ubCardContent>
+            <form>
+                <div class="grid w-full items-center gap-4">
+                    <div class="flex flex-col space-y-1.5">
+                        <label ubLabel htmlFor="name">Name</label>
+                        <input ubInput type="text" id="name" placeholder="Name of your project" />
+                    </div>
+                </div>
+            </form>
+        </div>
+
+        <div ubCardFooter class="flex justify-between">
+            <button ubButton variant="outline">Cancel</button>
+            <button ubButton>Deploy</button>
+        </div>
+
+    </div>
+ `,
+})
+export class CardWithFormDefault { }
+
+export default CardWithFormDefault
diff --git a/docs/src/registry/default/ui/card.ts b/docs/src/registry/default/ui/card.ts
index 994d0be..f28a500 100644
--- a/docs/src/registry/default/ui/card.ts
+++ b/docs/src/registry/default/ui/card.ts
@@ -4,7 +4,7 @@ import { computed, Directive, input } from '@angular/core'
 
 @Directive({
   standalone: true,
-  selector: '[ubCard]',
+  selector: 'div[ubCard]',
   host: {
     '[class]': 'computedClass()',
   },
@@ -18,7 +18,7 @@ export class UbCardDirective {
 
 @Directive({
   standalone: true,
-  selector: '[ubCardHeader]',
+  selector: 'div[ubCardHeader]',
   host: {
     '[class]': 'computedClass()',
   },
@@ -32,7 +32,7 @@ export class UbCardHeaderDirective {
 
 @Directive({
   standalone: true,
-  selector: '[ubCardTitle]',
+  selector: 'h3[ubCardTitle]',
   host: {
     '[class]': 'computedClass()',
   },
@@ -46,7 +46,7 @@ export class UbCardTitleDirective {
 
 @Directive({
   standalone: true,
-  selector: '[ubCardDescription]',
+  selector: 'p[ubCardDescription]',
   host: {
     '[class]': 'computedClass()',
   },
@@ -60,7 +60,7 @@ export class UbCardDescriptionDirective {
 
 @Directive({
   standalone: true,
-  selector: '[ubCardContent]',
+  selector: 'div[ubCardContent]',
   host: {
     '[class]': 'computedClass()',
   },
@@ -72,7 +72,7 @@ export class UbCardContentDirective {
 
 @Directive({
   standalone: true,
-  selector: '[ubCardFooter]',
+  selector: 'div[ubCardFooter]',
   host: {
     '[class]': 'computedClass()',
   },
diff --git a/docs/src/registry/new-york/example/card-with-form.ts b/docs/src/registry/new-york/example/card-with-form.ts
new file mode 100644
index 0000000..2032647
--- /dev/null
+++ b/docs/src/registry/new-york/example/card-with-form.ts
@@ -0,0 +1,58 @@
+import { UbButtonDirective } from '@/registry/new-york/ui/button'
+import {
+  UbCardContentDirective,
+  UbCardDescriptionDirective,
+  UbCardDirective,
+  UbCardFooterDirective,
+  UbCardHeaderDirective,
+  UbCardTitleDirective,
+} from '@/registry/new-york/ui/card'
+import { UbInputDirective } from '@/registry/new-york/ui/input'
+import { UbLabelDirective } from '@/registry/new-york/ui/label'
+
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  imports: [
+    UbCardDirective,
+    UbCardHeaderDirective,
+    UbCardTitleDirective,
+    UbCardDescriptionDirective,
+    UbCardContentDirective,
+    UbCardFooterDirective,
+
+    UbInputDirective,
+    UbLabelDirective,
+    UbButtonDirective,
+  ],
+  selector: 'card-with-form-new-york',
+  template: `
+    <div ubCard class="w-[350px]">
+        <div ubCardHeader>
+            <h3 ubCardTitle>Create project</h3>
+            <p ubCardDescription>Deploy your new project in one-click.</p>
+        </div>
+
+        <div ubCardContent>
+            <form>
+                <div class="grid w-full items-center gap-4">
+                    <div class="flex flex-col space-y-1.5">
+                        <label ubLabel htmlFor="name">Name</label>
+                        <input ubInput type="text" id="name" placeholder="Name of your project" />
+                    </div>
+                </div>
+            </form>
+        </div>
+
+        <div ubCardFooter class="flex justify-between">
+            <button ubButton variant="outline">Cancel</button>
+            <button ubButton>Deploy</button>
+        </div>
+
+    </div>
+ `,
+})
+export class CardWithFormNewYork { }
+
+export default CardWithFormNewYork
diff --git a/docs/src/registry/new-york/ui/card.ts b/docs/src/registry/new-york/ui/card.ts
index 9d25ba3..d6c9697 100644
--- a/docs/src/registry/new-york/ui/card.ts
+++ b/docs/src/registry/new-york/ui/card.ts
@@ -4,7 +4,7 @@ import { computed, Directive, input } from '@angular/core'
 
 @Directive({
   standalone: true,
-  selector: '[ubCard]',
+  selector: 'div[ubCard]',
   host: {
     '[class]': 'computedClass()',
   },
@@ -18,7 +18,7 @@ export class UbCardDirective {
 
 @Directive({
   standalone: true,
-  selector: '[ubCardHeader]',
+  selector: 'div[ubCardHeader]',
   host: {
     '[class]': 'computedClass()',
   },
@@ -32,7 +32,7 @@ export class UbCardHeaderDirective {
 
 @Directive({
   standalone: true,
-  selector: '[ubCardTitle]',
+  selector: 'h3[ubCardTitle]',
   host: {
     '[class]': 'computedClass()',
   },
@@ -46,7 +46,7 @@ export class UbCardTitleDirective {
 
 @Directive({
   standalone: true,
-  selector: '[ubCardDescription]',
+  selector: 'p[ubCardDescription]',
   host: {
     '[class]': 'computedClass()',
   },
@@ -60,7 +60,7 @@ export class UbCardDescriptionDirective {
 
 @Directive({
   standalone: true,
-  selector: '[ubCardContent]',
+  selector: 'div[ubCardContent]',
   host: {
     '[class]': 'computedClass()',
   },
@@ -72,7 +72,7 @@ export class UbCardContentDirective {
 
 @Directive({
   standalone: true,
-  selector: '[ubCardFooter]',
+  selector: 'div[ubCardFooter]',
   host: {
     '[class]': 'computedClass()',
   },