docs: add card

adrian-ub · Sep 28, 2024 · 9dd3042 · 9dd3042
1 parent d2f145b
commit 9dd3042
Show file tree

Hide file tree

Showing 6 changed files with 201 additions and 12 deletions.
diff --git a/docs/src/config/docs.ts b/docs/src/config/docs.ts
@@ -113,6 +113,11 @@ export const docsConfig: TDocsConfig = {
           href: '/docs/components/button',
           items: [],
         },
+        {
+          title: 'Card',
+          href: '/docs/components/card',
+          items: [],
+        },
         {
           title: 'Input',
           href: '/docs/components/input',

diff --git a/docs/src/content/docs/components/card.mdx 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
@@ -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
@@ -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
@@ -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
@@ -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()',
   },