@ngbase/adk 0.1.0 → 0.1.1

package/schematics/components/files/theme/theme.component.ts.template

@@ -0,0 +1,165 @@
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { Button } from '<%= basepath %>/button';
+import { ColorInput } from '<%= basepath %>/color-picker';
+import { Input } from '<%= basepath %>/form-field';
+
+interface ThemeData {
+  name: string;
+  radius: string;
+  space: string;
+  background: string;
+  foreground: string;
+  primary: string;
+  muted: string;
+  border: string;
+  text: string;
+  input: string;
+}
+
+@Component({
+  selector: '<%= name %>-theme',
+  imports: [Input, ReactiveFormsModule, Button, ColorInput],
+  template: `
+    <div class="mb-4 flex gap-4">
+      @for (theme of themes; track theme) {
+        <button <%= name %>Button="outline" (click)="changeTheme(theme)">
+          {{ theme.name }}
+        </button>
+      }
+    </div>
+    <form [formGroup]="form">
+      <table>
+        <tr>
+          <td>Radius:</td>
+          <td><input class="w-48" <%= name %>Input formControlName="radius" /></td>
+        </tr>
+        <tr>
+          <td>Space:</td>
+          <td><input class="w-48" <%= name %>Input formControlName="space" /></td>
+        </tr>
+        <tr>
+          <td>Background:</td>
+          <td><<%= name %>-color-input class="w-48" formControlName="background" /></td>
+        </tr>
+        <tr>
+          <td>Foreground:</td>
+          <td><<%= name %>-color-input class="w-48" formControlName="foreground" /></td>
+        </tr>
+        <tr>
+          <td>Primary:</td>
+          <td><<%= name %>-color-input class="w-48" formControlName="primary" /></td>
+        </tr>
+        <tr>
+          <td>Muted:</td>
+          <td><<%= name %>-color-input class="w-48" formControlName="muted" /></td>
+        </tr>
+        <tr>
+          <td>Border:</td>
+          <td><<%= name %>-color-input class="w-48" formControlName="border" /></td>
+        </tr>
+        <tr>
+          <td>Text:</td>
+          <td><<%= name %>-color-input class="w-48" formControlName="text" /></td>
+        </tr>
+      </table>
+    </form>
+  `,
+})
+export class ThemeComponent {
+  fb = inject(FormBuilder);
+
+  form = this.fb.nonNullable.group({
+    radius: ['0.5rem'],
+    space: ['1rem'],
+    background: ['#ffffff'],
+    foreground: ['#000000'],
+    primary: ['#000000'],
+    muted: ['#71717a'],
+    border: ['#000000'],
+    text: ['#000000'],
+    input: ['#000000'],
+  });
+
+  themes: ThemeData[] = [
+    {
+      name: 'Light',
+      radius: '0.5rem',
+      space: '0.25rem',
+      background: '#f4f4f5',
+      foreground: '#ffffff',
+      primary: '#000000',
+      muted: '#71717a',
+      border: '#e4e4e7',
+      text: '#000000',
+      input: '#f3f4f6',
+    },
+    {
+      name: 'Dark',
+      radius: '0.5rem',
+      space: '1rem',
+      background: '#000000',
+      foreground: '#191b23',
+      primary: '#000000',
+      muted: '#a1a1aa',
+      border: '#27272a',
+      text: '#ffffff',
+      input: '#27272a',
+    },
+  ];
+
+  constructor() {
+    this.form.patchValue(this.themes[0]);
+    this.form.valueChanges.subscribe(value => {
+      const style = document.documentElement.style;
+      style.setProperty('--radius', value.radius!);
+      style.setProperty('--spacing-base', value.space!);
+      style.setProperty('---color-background', this.colorRGB(value.background!));
+      style.setProperty('---color-foreground', this.colorRGB(value.foreground!));
+      style.setProperty('--color-primary', this.colorRGB(value.primary!));
+      style.setProperty('---color-muted', this.colorRGB(value.muted!));
+      style.setProperty('---color-border', this.colorRGB(value.border!));
+      style.setProperty('---color-text', this.colorRGB(value.text!));
+      style.setProperty('---color-input', this.colorRGB(value.input!));
+    });
+
+    console.log(this.colorRGB('#ffffff'));
+  }
+
+  colorRGB(color: string): string {
+    if (this.isHex(color)) {
+      color = this.hexToRgb(color);
+    }
+    const rgb = this.rgbToVariable(color);
+    return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
+  }
+
+  changeTheme(theme: ThemeData) {
+    this.form.patchValue(theme);
+  }
+
+  isHex(hex: string) {
+    return /^#[0-9A-F]{6}$/i.test(hex);
+  }
+
+  hexToRgb(hex: string): string {
+    const rgb = hex
+      .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => r + r + g + g + b + b)
+      .substring(1)
+      .match(/.{2}/g)
+      ?.map(x => parseInt(x, 16));
+    return rgb ? `rgb(${rgb.join(', ')})` : '';
+  }
+
+  rgbToHex(r: number, g: number, b: number) {
+    return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
+  }
+
+  rgbToVariable(rgb: string): { r: number; g: number; b: number } {
+    const [r, g, b] = rgb
+      .substring(4, rgb.length - 1)
+      .split(', ')
+      .map(x => parseInt(x));
+    return { r, g, b };
+  }
+}

package/schematics/components/files/theme/theme.service.ts.template

@@ -0,0 +1,44 @@
+import { inject, Injectable, signal } from '@angular/core';
+import { isClient } from '@ngbase/adk/utils';
+import { dialogPortal } from '<%= basepath %>/dialog';
+import { ThemeComponent } from './theme.component';
+
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
+  dialog = dialogPortal();
+  mode = signal<'light' | 'dark' | ''>('light');
+
+  constructor() {
+    if (isClient()) {
+      const theme = localStorage.getItem('theme');
+      this._update((theme as 'light' | 'dark') || 'light');
+
+      // registerShortcut('ctrl+h', () => this.open());
+    }
+  }
+
+  toggle() {
+    this._update(this.mode() === 'dark' ? 'light' : 'dark');
+  }
+
+  private _update(mode: 'light' | 'dark' = 'light') {
+    const body = document.body;
+    if (mode === 'dark') {
+      body.classList.add('dark');
+    } else {
+      body.classList.remove('dark');
+    }
+    localStorage.setItem('theme', mode);
+    this.mode.set(mode);
+  }
+
+  open() {
+    this.dialog.open(ThemeComponent, {
+      title: 'Theme',
+      backdrop: false,
+      width: '20rem',
+    });
+  }
+}
+
+export const injectTheme = () => inject(ThemeService);

package/schematics/components/files/toggle/index.ts.template

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of toggle
+ */
+
+export * from './toggle';

package/schematics/components/files/toggle/toggle.ts.template

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbToggle } from '@ngbase/adk/toggle';
+
+@Component({
+  selector: 'button[<%= name %>Toggle]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: NgbToggle, inputs: ['value'], outputs: ['valueChange'] }],
+  template: `<ng-content />`,
+  host: {
+    class: 'block w-9 h-9 rounded relative aria-[pressed=true]:bg-background',
+  },
+})
+export class Toggle {}

package/schematics/components/files/toggle-group/index.ts.template

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of toggle-group
+ */
+
+export * from './toggle-group';

package/schematics/components/files/toggle-group/toggle-group.ts.template

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { NgbToggleGroup, NgbToggleItem } from '@ngbase/adk/toggle-group';
+
+@Component({
+  selector: '<%= name %>-toggle-group',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [
+    { directive: NgbToggleGroup, inputs: ['value', 'multiple'], outputs: ['valueChange'] },
+  ],
+  template: ` <ng-content select="[<%= name %>ToggleItem]" /> `,
+  host: {
+    class: 'flex gap-1',
+  },
+})
+export class ToggleGroup<T> {}
+
+@Directive({
+  selector: 'button[<%= name %>ToggleItem]',
+  hostDirectives: [{ directive: NgbToggleItem, inputs: ['disabled', 'value'] }],
+  host: {
+    class:
+      'inline-block rounded h-9 px-3 hover:bg-opacity-80 active:bg-opacity-70 aria-[selected=true]:bg-background',
+  },
+})
+export class ToggleItem<T> {}

package/schematics/components/files/tooltip/index.ts.template

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of tooltip
+ */
+
+export { provideTooltipOptions, Tooltip } from './tooltip';

package/schematics/components/files/tooltip/tooltip.ts.template

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import {
+  NgbTooltipTemplate,
+  provideNgbTooltipOptions,
+  TooltipOptions,
+  NgbTooltip,
+} from '@ngbase/adk/tooltip';
+import { injectTheme } from '<%= basepath %>/theme';
+
+@Directive({
+  selector: '[<%= name %>Tooltip]',
+  hostDirectives: [
+    {
+      directive: NgbTooltip,
+      inputs: [
+        'ngbTooltip: <%= name %>Tooltip',
+        'ngbTooltipPosition: <%= name %>TooltipPosition',
+        'delay',
+      ],
+    },
+  ],
+})
+export class Tooltip {}
+
+@Component({
+  selector: '<%= name %>-tooltip',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `{{ content() }}`,
+  host: {
+    class:
+      'fixed inline-block rounded-lg bg-foreground px-3 py-1 border shadow-md z-p whitespace-pre-line max-w-[15rem] text-text',
+    '[class]': `theme.mode() === 'dark' ? 'light' : 'dark'`,
+  },
+})
+export class TooltipComponent extends NgbTooltipTemplate {
+  readonly theme = injectTheme();
+}
+
+export const provideTooltipOptions = (options: TooltipOptions) =>
+  provideNgbTooltipOptions({ ...options, component: TooltipComponent });

package/schematics/components/files/tour/index.ts.template

@@ -0,0 +1,3 @@
+export * from './tour-step';
+export * from './tour';
+export * from './tour.service';

package/schematics/components/files/tour/tour-step.ts.template

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { NgbTourStep } from '@ngbase/adk/tour';
+
+@Directive({
+  selector: '[<%= name %>TourStep]',
+  hostDirectives: [{ directive: NgbTourStep, inputs: ['ngbTourStep: <%= name %>TourStep'] }],
+})
+export class TourStep {}

package/schematics/components/files/tour/tour.service.ts.template

@@ -0,0 +1,7 @@
+import { inject, InjectionToken } from '@angular/core';
+import { NgbTourService } from '@ngbase/adk/tour';
+
+export const TourService = new InjectionToken<NgbTourService>('TourService', {
+  providedIn: 'root',
+  factory: () => inject(NgbTourService),
+});

package/schematics/components/files/tour/tour.ts.template

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { NgbTour } from '@ngbase/adk/tour';
+
+@Directive({
+  selector: '[<%= name %>Tour]',
+  hostDirectives: [NgbTour],
+})
+export class Tour {}

package/schematics/components/files/tree/index.ts.template

@@ -0,0 +1 @@
+export * from './tree';

package/schematics/components/files/tree/tree.ts.template

@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component, Directive, signal } from '@angular/core';
+import {
+  NgbTree,
+  NgbTreeNode,
+  NgbTreeNodeContent,
+  NgbTreeNodeDef,
+  NgbTreeNodeToggle,
+  provideTree,
+  provideTreeNode,
+} from '@ngbase/adk/tree';
+
+@Component({
+  selector: '<%= name %>-tree',
+  exportAs: '<%= name %>Tree',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-container #container />`,
+  providers: [provideTree(Tree)],
+  host: {
+    class: 'block',
+  },
+})
+export class Tree<T> extends NgbTree<T> {}
+
+@Component({
+  selector: '<%= name %>-tree-node',
+  exportAs: '<%= name %>TreeNode',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="flex items-start">
+      <ng-content />
+    </div>
+    <ng-content select="[<%= name %>TreeNodeContent]" />
+    <ng-container #container />
+  `,
+  providers: [provideTreeNode(TreeNode)],
+  host: {
+    class: 'block w-full cursor-pointer',
+  },
+})
+export class TreeNode<T> extends NgbTreeNode<T> {
+  override size = signal(16);
+}
+
+@Directive({
+  selector: '[<%= name %>TreeNodeToggle]',
+  hostDirectives: [NgbTreeNodeToggle],
+  host: {
+    class: `aria-[hidden="true"]:invisible`,
+  },
+})
+export class TreeNodeToggle {}
+
+@Directive({
+  selector: '[<%= name %>TreeNodeDef]',
+  hostDirectives: [NgbTreeNodeDef],
+})
+export class TreeNodeDef<T> {}
+
+@Directive({
+  selector: '[<%= name %>TreeNodeContent]',
+  hostDirectives: [NgbTreeNodeContent],
+  host: {
+    class: 'ml-8',
+  },
+})
+export class TreeNodeContent {}

package/schematics/components/index.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from '@angular-devkit/schematics';
+import { MyGeneratorSchema } from './schema';
+export declare function myGenerator(options: MyGeneratorSchema): Rule;

package/schematics/components/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.myGenerator = myGenerator;
+const schematics_1 = require("@angular-devkit/schematics");
+const core_1 = require("@angular-devkit/core");
+function myGenerator(options) {
+    return () => {
+        const sourceTemplates = (0, schematics_1.url)(`./files/${options.component}`);
+        const targetPath = options.path || '';
+        const sourceParametrizedTemplates = (0, schematics_1.apply)(sourceTemplates, [
+            (0, schematics_1.applyTemplates)(Object.assign(Object.assign({}, core_1.strings), options)),
+            (0, schematics_1.move)((0, core_1.normalize)(`/${targetPath}/${options.component}`)),
+        ]);
+        return (0, schematics_1.chain)([(0, schematics_1.mergeWith)(sourceParametrizedTemplates)]);
+    };
+}
+//# sourceMappingURL=index.js.map

package/schematics/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../projects/adk/schematics/components/index.ts"],"names":[],"mappings":";;AAYA,kCAgBC;AA5BD,2DAQoC;AACpC,+CAA0D;AAG1D,SAAgB,WAAW,CAAC,OAA0B;IACpD,OAAO,GAAG,EAAE;QACV,MAAM,eAAe,GAAG,IAAA,gBAAG,EAAC,WAAW,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC;QAE5D,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,IAAI,EAAE,CAAC;QAEtC,MAAM,2BAA2B,GAAG,IAAA,kBAAK,EAAC,eAAe,EAAE;YACzD,IAAA,2BAAc,kCACT,cAAO,GACP,OAAO,EACV;YACF,IAAA,iBAAI,EAAC,IAAA,gBAAS,EAAC,IAAI,UAAU,IAAI,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC;SACvD,CAAC,CAAC;QAEH,OAAO,IAAA,kBAAK,EAAC,CAAC,IAAA,sBAAS,EAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;AACJ,CAAC"}

package/schematics/components/index.ts

@@ -0,0 +1,29 @@
+import {
+  Rule,
+  apply,
+  mergeWith,
+  move,
+  applyTemplates,
+  url,
+  chain,
+} from '@angular-devkit/schematics';
+import { strings, normalize } from '@angular-devkit/core';
+import { MyGeneratorSchema } from './schema';
+
+export function myGenerator(options: MyGeneratorSchema): Rule {
+  return () => {
+    const sourceTemplates = url(`./files/${options.component}`);
+
+    const targetPath = options.path || '';
+
+    const sourceParametrizedTemplates = apply(sourceTemplates, [
+      applyTemplates({
+        ...strings,
+        ...options,
+      }),
+      move(normalize(`/${targetPath}/${options.component}`)),
+    ]);
+
+    return chain([mergeWith(sourceParametrizedTemplates)]);
+  };
+}

package/schematics/components/schema.d.ts

@@ -0,0 +1,6 @@
+export interface MyGeneratorSchema {
+    name: string;
+    path?: string;
+    project?: string;
+    component: string;
+}

package/schematics/components/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/schematics/components/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../projects/adk/schematics/components/schema.ts"],"names":[],"mappings":""}

package/schematics/components/schema.json

@@ -0,0 +1,137 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "SchematicsAccordion",
+  "title": "Accordion Schema",
+  "type": "object",
+  "properties": {
+    "name": {
+      "description": "The name of the component prefix.",
+      "x-prompt": "What is the name of the component prefix?",
+      "type": "string"
+    },
+    "path": {
+      "description": "Where should be created the file",
+      "type": "string",
+      "format": "path",
+      "x-prompt": "Where should be created the file?",
+      "default": "src/app"
+    },
+    "basepath": {
+      "description": "The base path of the UI library.",
+      "type": "string",
+      "format": "path",
+      "x-prompt": "What is the base path of the UI library?",
+      "default": "@"
+    },
+    "component": {
+      "description": "The file extension or preprocessor to use for style files.",
+      "type": "string",
+      "default": "accordion",
+      "enum": [
+        "accordion",
+        "alert",
+        "autocomplete",
+        "avatar",
+        "badge",
+        "breadcrumb",
+        "button",
+        "card",
+        "carousel",
+        "checkbox",
+        "chip",
+        "color-picker",
+        "command",
+        "datepicker",
+        "dialog",
+        "drawer",
+        "form-field",
+        "hover-card",
+        "icon",
+        "inline-edit",
+        "keys",
+        "list",
+        "mask",
+        "menu",
+        "pagination",
+        "popover",
+        "progress",
+        "radio",
+        "resizable",
+        "select",
+        "separator",
+        "sheet",
+        "sidenav",
+        "skeleton",
+        "slider",
+        "sonner",
+        "spinner",
+        "stepper",
+        "switch",
+        "table",
+        "toggle",
+        "toggle-group",
+        "tooltip",
+        "tour",
+        "tree"
+      ],
+      "x-prompt": {
+        "message": "Which component would you like to create?",
+        "type": "list",
+        "items": [
+          { "value": "accordion", "label": "Accordion" },
+          { "value": "alert", "label": "Alert" },
+          { "value": "autocomplete", "label": "Autocomplete" },
+          { "value": "avatar", "label": "Avatar" },
+          { "value": "badge", "label": "Badge" },
+          { "value": "breadcrumb", "label": "Breadcrumb" },
+          { "value": "button", "label": "Button" },
+          { "value": "card", "label": "Card" },
+          { "value": "carousel", "label": "Carousel" },
+          { "value": "checkbox", "label": "Checkbox" },
+          { "value": "chip", "label": "Chip" },
+          { "value": "color-picker", "label": "Color Picker" },
+          { "value": "command", "label": "Command" },
+          { "value": "datepicker", "label": "Datepicker" },
+          { "value": "dialog", "label": "Dialog" },
+          { "value": "drawer", "label": "Drawer" },
+          { "value": "form-field", "label": "Form Field" },
+          { "value": "hover-card", "label": "Hover Card" },
+          { "value": "icon", "label": "Icon" },
+          { "value": "inline-edit", "label": "Inline Edit" },
+          { "value": "keys", "label": "Keys" },
+          { "value": "list", "label": "List" },
+          { "value": "mask", "label": "Mask" },
+          { "value": "menu", "label": "Menu" },
+          { "value": "pagination", "label": "Pagination" },
+          { "value": "popover", "label": "Popover" },
+          { "value": "progress", "label": "Progress" },
+          { "value": "radio", "label": "Radio" },
+          { "value": "resizable", "label": "Resizable" },
+          { "value": "select", "label": "Select" },
+          { "value": "separator", "label": "Separator" },
+          { "value": "sheet", "label": "Sheet" },
+          { "value": "sidenav", "label": "Sidenav" },
+          { "value": "skeleton", "label": "Skeleton" },
+          { "value": "slider", "label": "Slider" },
+          { "value": "sonner", "label": "Sonner" },
+          { "value": "spinner", "label": "Spinner" },
+          { "value": "stepper", "label": "Stepper" },
+          { "value": "switch", "label": "Switch" },
+          { "value": "table", "label": "Table" },
+          { "value": "toggle", "label": "Toggle" },
+          { "value": "toggle-group", "label": "Toggle Group" },
+          { "value": "tooltip", "label": "Tooltip" },
+          { "value": "tour", "label": "Tour" },
+          { "value": "tree", "label": "Tree" }
+        ]
+      },
+      "project": {
+        "type": "string",
+        "description": "The name of the project.",
+        "$default": {
+          "$source": "projectName"
+        }
+      }
+    }
+  }
+}

package/schematics/components/schema.ts

@@ -0,0 +1,6 @@
+export interface MyGeneratorSchema {
+  name: string;
+  path?: string;
+  project?: string;
+  component: string;
+}