chore: added components to shadcn

apps/showcase-dashboards/src/app/dashboard-04.component.html

@@ -43,9 +43,10 @@
  <form class="ml-auto flex-1 sm:flex-initial">
  <div class="relative">
  <input
- type="search"
+ shInput
+ [type]="'search'"
  placeholder="Search products..."
- class="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
+ [class]="'pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]'"
  />
  </div>
  </form>
@@ -80,11 +81,11 @@ <h1 class="text-3xl font-semibold">Settings</h1>
  </div>
  <div CardContent>
  <form>
- <input placeholder="Store Name" />
+ <input shInput placeholder="Store Name" />
  </form>
  </div>
  <div CardFooter class="border-t px-6 py-4">
- <Button>Save</Button>
+ <button shButton>Save</button>
  </div>
  </div>
 
@@ -99,6 +100,7 @@ <h1 class="text-3xl font-semibold">Settings</h1>
  <div CardContent>
  <form class="flex flex-col gap-4">
  <input
+ shInput
  placeholder="Project Name"
  />
  <div class="flex items-center space-x-2">
@@ -111,7 +113,7 @@ <h1 class="text-3xl font-semibold">Settings</h1>
  </form>
  </div>
  <div CardFooter class="border-t px-6 py-4">
- <Button>Save</Button>
+ <button shButton >Save</button>
  </div>
  </div>
  </div>

apps/showcase-dashboards/src/app/dashboard-04.component.ts

@@ -1,5 +1,8 @@
 import { Component } from '@angular/core';
 
+import { ShButtonDirective } from '@radix-ng/shadcn/button';
+import { ShInputDirective } from '@radix-ng/shadcn/input';
+
 import {
  CardContentDirective,
  CardDescriptionDirective,
@@ -18,7 +21,10 @@ import {
  CardTitleDirective,
  CardDescriptionDirective,
  CardContentDirective,
- CardFooterDirective
+ CardFooterDirective,
+
+ ShInputDirective,
+ ShButtonDirective
  ],
  templateUrl: './dashboard-04.component.html'
 })

packages/shadcn/button/index.ts

@@ -0,0 +1 @@
+export * from './src/button.component';

packages/shadcn/button/ng-package.json

@@ -0,0 +1,8 @@
+{
+ "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+ "dest": "../../dist/shadcn",
+ "lib": {
+ "entryFile": "index.ts"
+ },
+ "allowedNonPeerDependencies": []
+}

packages/shadcn/button/src/button.component.ts

@@ -0,0 +1,62 @@
+// This code is an adaptation of code from https://ui.shadcn.com/docs.
+
+import { computed, Directive, input } from '@angular/core';
+
+import { twMerge } from '@radix-ng/shadcn/core';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+
+const variants = cva(
+ 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+ destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+ outline:
+ 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+ secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ ghost: 'hover:bg-accent hover:text-accent-foreground',
+ link: 'text-primary underline-offset-4 hover:underline'
+ },
+ size: {
+ default: 'h-10 px-4 py-2',
+ sm: 'h-9 rounded-md px-3',
+ lg: 'h-11 rounded-md px-8',
+ icon: 'h-10 w-10'
+ }
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default'
+ }
+ }
+);
+
+export type ButtonVariants = VariantProps<typeof variants>;
+
+@Directive({
+ selector: '[shButton]',
+ standalone: true,
+ host: {
+ '[class]': 'computedClass()'
+ }
+})
+export class ShButtonDirective {
+ readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+ readonly variant = input<ButtonVariants['variant']>('default');
+
+ readonly size = input<ButtonVariants['size']>('default');
+
+ protected computedClass = computed(() =>
+ twMerge(variants({ variant: this.variant() }), this.userClass())
+ );
+
+ // set variant(value: ButtonVariants['variant']) {
+ // this._variant.set(value);
+ // }
+ // get variant() {
+ // return this._variant();
+ // }
+}

packages/shadcn/input/index.ts

@@ -0,0 +1 @@
+export * from './src/input.component';

packages/shadcn/input/ng-package.json

@@ -0,0 +1,8 @@
+{
+ "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+ "dest": "../../dist/shadcn",
+ "lib": {
+ "entryFile": "index.ts"
+ },
+ "allowedNonPeerDependencies": []
+}

packages/shadcn/input/src/input.component.ts

@@ -0,0 +1,26 @@
+// This code is an adaptation of code from https://ui.shadcn.com/docs.
+
+import { computed, Directive, input } from '@angular/core';
+
+import { twMerge } from '@radix-ng/shadcn/core';
+import { cva } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+
+const variants = cva(
+ 'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50'
+);
+
+@Directive({
+ selector: '[shInput]',
+ standalone: true,
+ host: {
+ '[class]': 'computedClass()',
+ '[type]': 'type()'
+ }
+})
+export class ShInputDirective {
+ readonly type = input<string>('text');
+ readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+ protected computedClass = computed(() => twMerge(variants(), this.userClass()));
+}

packages/shadcn/label/index.ts

@@ -0,0 +1 @@
+export * from './src/label.component';

packages/shadcn/label/ng-package.json

@@ -1,5 +1,5 @@
 {
- "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+ "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/shadcn",
  "lib": {
  "entryFile": "index.ts"

packages/shadcn/label/src/label.component.ts

@@ -1,3 +1,5 @@
+// This code is an adaptation of code from https://ui.shadcn.com/docs.
+
 import { computed, Directive, input } from '@angular/core';
 
 import { RdxLabelRootDirective } from '@radix-ng/primitives/label';
@@ -22,7 +24,7 @@ const variants = cva(
  '[class]': 'computedClass()'
  }
 })
-export class LabelDirective {
+export class ShLabelDirective {
  readonly userClass = input<ClassValue>('', { alias: 'class' });
  protected computedClass = computed(() => twMerge(variants(), this.userClass()));
 }

tsconfig.base.json

@@ -22,7 +22,10 @@
  "@radix-ng/primitives/roving-focus": ["packages/primitives/roving-focus/index.ts"],
  "@radix-ng/primitives/separator": ["packages/primitives/separator/index.ts"],
  "@taxonomy/*": ["apps/showcase-taxonomy/src/app/*"],
- "@radix-ng/shadcn/core": ["packages/shadcn/core/index.ts"]
+ "@radix-ng/shadcn/core": ["packages/shadcn/core/index.ts"],
+ "@radix-ng/shadcn/input": ["packages/shadcn/input/index.ts"],
+ "@radix-ng/shadcn/label": ["packages/shadcn/label/index.ts"],
+ "@radix-ng/shadcn/button": ["packages/shadcn/button/index.ts"]
  }
  },
  "exclude": ["node_modules", "tmp"]