From 9dd30422cb0d28474fb64660412c79e453a44e9b 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/config/docs.ts | 5 ++ 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 ++-- 6 files changed, 201 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/config/docs.ts b/docs/src/config/docs.ts index 582d90f..06dd240 100644 --- 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 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. +--- + + + +## Installation + + + + + CLI + Manual + + + + +```bash +npx shadcn-ng@latest add card +``` + + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + +## Usage + +```ts +import { + UbCardContentDirective, + UbCardDescriptionDirective, + UbCardDirective, + UbCardFooterDirective, + UbCardHeaderDirective, + UbCardTitleDirective, +} from '@/components/ui/card' +``` + +```html +
+
+

Card Title

+

Card Description

+
+
+

Card Content

+
+
+

Card Footer

+
+
+``` 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: ` +
+ +
+

Create project

+

Deploy your new project in one-click.

+
+ +
+
+
+
+ + +
+
+
+
+ +
+ + +
+ +
+ `, +}) +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: ` +
+
+

Create project

+

Deploy your new project in one-click.

+
+ +
+
+
+
+ + +
+
+
+
+ +
+ + +
+ +
+ `, +}) +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()', },