chore: added shadcn examples and base for component package

apps/showcase-dashboards/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+ "extends": ["../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts"],
+ "extends": [
+ "plugin:@nx/angular",
+ "plugin:@angular-eslint/template/process-inline-templates"
+ ],
+ "rules": {
+ "@angular-eslint/directive-selector": [
+ "error",
+ {
+ "type": "attribute",
+ "prefix": "app",
+ "style": "camelCase"
+ }
+ ],
+ "@angular-eslint/component-selector": [
+ "error",
+ {
+ "type": "element",
+ "prefix": "app",
+ "style": "kebab-case"
+ }
+ ]
+ }
+ },
+ {
+ "files": ["*.html"],
+ "extends": ["plugin:@nx/angular-template"],
+ "rules": {}
+ }
+ ]
+}

apps/showcase-dashboards/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+ displayName: 'showcase-dashboards',
+ preset: '../../jest.preset.cjs',
+ setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+ coverageDirectory: '../../coverage/apps/showcase-dashboards',
+ transform: {
+ '^.+\\.(ts|mjs|js|html)$': [
+ 'jest-preset-angular',
+ {
+ tsconfig: '<rootDir>/tsconfig.spec.json',
+ stringifyContentPathRegex: '\\.(html|svg)$'
+ }
+ ]
+ },
+ transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+ snapshotSerializers: [
+ 'jest-preset-angular/build/serializers/no-ng-attributes',
+ 'jest-preset-angular/build/serializers/ng-snapshot',
+ 'jest-preset-angular/build/serializers/html-comment'
+ ]
+};

apps/showcase-dashboards/project.json

@@ -0,0 +1,79 @@
+{
+ "name": "showcase-dashboards",
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "application",
+ "prefix": "app",
+ "sourceRoot": "apps/showcase-dashboards/src",
+ "tags": [],
+ "targets": {
+ "build": {
+ "executor": "@angular-devkit/build-angular:application",
+ "outputs": ["{options.outputPath}"],
+ "options": {
+ "outputPath": "dist/apps/showcase-dashboards",
+ "index": "apps/showcase-dashboards/src/index.html",
+ "browser": "apps/showcase-dashboards/src/main.ts",
+ "polyfills": ["zone.js"],
+ "tsConfig": "apps/showcase-dashboards/tsconfig.app.json",
+ "inlineStyleLanguage": "scss",
+ "assets": [
+ "apps/showcase-dashboards/src/favicon.ico",
+ "apps/showcase-dashboards/src/assets"
+ ],
+ "styles": ["apps/showcase-dashboards/src/styles.scss"],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kb",
+ "maximumError": "1mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "2kb",
+ "maximumError": "4kb"
+ }
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "executor": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "buildTarget": "showcase-dashboards:build:production"
+ },
+ "development": {
+ "buildTarget": "showcase-dashboards:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "executor": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "buildTarget": "showcase-dashboards:build"
+ }
+ },
+ "lint": {
+ "executor": "@nx/eslint:lint"
+ },
+ "test": {
+ "executor": "@nx/jest:jest",
+ "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+ "options": {
+ "jestConfig": "apps/showcase-dashboards/jest.config.ts"
+ }
+ }
+ }
+}

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

@@ -0,0 +1,12 @@
+<div class="container relative">
+ <section class="mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20">
+ <h1 class="text-center text-balance text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]">Building Blocks for the Web</h1>
+ <span class="max-w-[750px] text-center text-lg font-light text-foreground">Beautifully designed. Copy and paste into your apps. Open Source.</span>
+
+ <section id="blocks" class="grid scroll-mt-24 gap-24 lg:gap-48">
+
+
+ <app-dashboard-04></app-dashboard-04>
+ </section>
+ </section>
+</div>

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+import { DashboardComponent } from './dashboard-04.component';
+
+@Component({
+ standalone: true,
+ imports: [DashboardComponent],
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrl: './app.component.scss'
+})
+export class AppComponent {
+ title = 'showcase-dashboards';
+}

apps/showcase-dashboards/src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { appRoutes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+ providers: [provideRouter(appRoutes)]
+};

apps/showcase-dashboards/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Route } from '@angular/router';
+
+export const appRoutes: Route[] = [];

apps/showcase-dashboards/src/app/components/ui/card.component.ts

@@ -0,0 +1,63 @@
+import { computed, Directive, input } from '@angular/core';
+
+import { twMerge } from '@radix-ng/shadcn/core';
+import { cva } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+
+@Directive({
+ selector: '[Card]',
+ standalone: true,
+ host: {
+ '[class]': "'bg-card text-card-foreground rounded-xl border shadow'"
+ }
+})
+export class CardDirective {}
+
+@Directive({
+ selector: '[CardHeader]',
+ standalone: true,
+ host: {
+ '[class]': "'flex flex-col space-y-1.5 p-6'"
+ }
+})
+export class CardHeaderDirective {}
+
+@Directive({
+ selector: '[CardTitle]',
+ standalone: true,
+ host: {
+ '[class]': "'font-semibold leading-none tracking-tight'"
+ }
+})
+export class CardTitleDirective {}
+
+@Directive({
+ selector: '[CardDescription]',
+ standalone: true,
+ host: {
+ '[class]': "'text-sm text-muted-foreground'"
+ }
+})
+export class CardDescriptionDirective {}
+
+@Directive({
+ selector: '[CardContent]',
+ standalone: true,
+ host: {
+ '[class]': "'p-6 pt-0'"
+ }
+})
+export class CardContentDirective {}
+
+const cardFooterVariants = cva('flex items-center p-6 pt-0');
+@Directive({
+ selector: '[CardFooter]',
+ standalone: true,
+ host: {
+ '[class]': 'computedClass()'
+ }
+})
+export class CardFooterDirective {
+ readonly userClass = input<ClassValue>('', { alias: 'class' });
+ protected computedClass = computed(() => twMerge(cardFooterVariants(), this.userClass()));
+}

apps/showcase-dashboards/src/app/components/utils/twMerge.ts

@@ -0,0 +1,10 @@
+/**
+ * Part of this code is taken from @spartan-ng package ❤️
+ */
+
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge as TailwindMerge } from 'tailwind-merge';
+
+export function twMerge(...inputs: ClassValue[]) {
+ return TailwindMerge(clsx(inputs));
+}

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

@@ -0,0 +1,120 @@
+<div class="flex w-full flex-col relative rounded-lg border bg-background border-border">
+ <header class="sticky top-0 flex h-16 items-center gap-4 border-b px-4 md:px-6">
+ <nav class="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
+ <a
+ href="#"
+ class="flex items-center gap-2 text-lg font-semibold md:text-base"
+ >
+ <span class="sr-only">Acme Inc</span>
+ </a>
+ <a
+ href="#"
+ class="text-muted-foreground transition-colors hover:text-foreground"
+ >
+ Dashboard
+ </a>
+ <a
+ href="#"
+ class="text-muted-foreground transition-colors hover:text-foreground"
+ >
+ Orders
+ </a>
+ <a
+ href="#"
+ class="text-muted-foreground transition-colors hover:text-foreground"
+ >
+ Products
+ </a>
+ <a
+ href="#"
+ class="text-muted-foreground transition-colors hover:text-foreground"
+ >
+ Customers
+ </a>
+ <a
+ href="#"
+ class="text-foreground transition-colors hover:text-foreground"
+ >
+ Settings
+ </a>
+ </nav>
+
+ <div class="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
+ <form class="ml-auto flex-1 sm:flex-initial">
+ <div class="relative">
+ <input
+ type="search"
+ placeholder="Search products..."
+ class="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
+ />
+ </div>
+ </form>
+ </div>
+ </header>
+
+ <main class="flex flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
+ <div class="mx-auto grid w-full max-w-6xl gap-2">
+ <h1 class="text-3xl font-semibold">Settings</h1>
+ </div>
+
+ <div class="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
+ <nav
+ class="grid gap-4 text-sm text-muted-foreground"
+ >
+ <a href="#" class="font-semibold text-primary">
+ General
+ </a>
+ <a href="#">Security</a>
+ <a href="#">Integrations</a>
+ <a href="#">Support</a>
+ <a href="#">Organizations</a>
+ <a href="#">Advanced</a>
+ </nav>
+ <div class="grid gap-6">
+ <div Card x-chunk="dashboard-04-chunk-1">
+ <div CardHeader>
+ <div CardTitle>Store Name</div>
+ <div CardDescription>
+ Used to identify your store in the marketplace.
+ </div>
+ </div>
+ <div CardContent>
+ <form>
+ <input placeholder="Store Name" />
+ </form>
+ </div>
+ <div CardFooter class="border-t px-6 py-4">
+ <Button>Save</Button>
+ </div>
+ </div>
+
+ <div Card x-chunk="dashboard-04-chunk-2">
+ <div CardHeader>
+ <div CardTitle>Plugins Directory</div>
+ <div CardDescription>
+ The directory within your project, in which your plugins are
+ located.
+ </div>
+ </div>
+ <div CardContent>
+ <form class="flex flex-col gap-4">
+ <input
+ placeholder="Project Name"
+ />
+ <div class="flex items-center space-x-2">
+ <label
+ class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+ >
+ Allow administrators to change the directory.
+ </label>
+ </div>
+ </form>
+ </div>
+ <div CardFooter class="border-t px-6 py-4">
+ <Button>Save</Button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+</div>