@asor-studio/asor-cli 1.0.0

package/gen-template/generate-organism/organism.html.template

@@ -0,0 +1,41 @@
+<style>
+    /*
+     * IMPORTANT:
+     * This CSS block is only a minimal base generated by the template.
+     * In a real project, styles should be moved to a dedicated file
+     * based on the standard chosen by the team: CSS, SCSS, Sass, Less,
+     * or handled through global styles, utility classes, a design system, or inline styles.
+     */
+    .__KEBAB__-organism {
+        display: grid;
+        gap: 0.65rem;
+        width: min(100%, 40rem);
+        padding: 1.15rem;
+        border: 1px solid rgba(226, 232, 240, 0.95);
+        border-radius: 1rem;
+        background: #ffffff;
+        color: #0f172a;
+    }
+
+    .__KEBAB__-title,
+    .__KEBAB__-description {
+        margin: 0;
+    }
+
+    .__KEBAB__-title {
+        font-size: 1.15rem;
+        line-height: 1.2;
+    }
+
+    .__KEBAB__-description {
+        max-width: 46ch;
+        color: #475569;
+        font-size: 0.94rem;
+        line-height: 1.5;
+    }
+</style>
+
+<section class="__KEBAB__-organism">
+    <h2 class="__KEBAB__-title">{{ '__ROUTE_KEY__.TITLE' | translate }}</h2>
+    <p class="__KEBAB__-description">{{ '__ROUTE_KEY__.WELCOME' | translate }}</p>
+</section>

package/gen-template/generate-organism/organism.ts.template

@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { __BASE_CLASS_NAME__, TranslatePipe } from '@asor-studio/asor-core';
+
+/**
+ * Organism Component: __PASCAL__Organism
+ * 
+ * ATOMIC DESIGN ROLE:
+ * An Organism is a complex component composed of molecules and/or atoms, forming a distinct section of the interface (e.g., a header, a sidebar).
+ * It represents the final level of reusable UI blocks before the Page level.
+ * 
+ * I18N / TRANSLATIONS:
+ * Translations for this organism can be found (or added) in:
+ * `assets/i18n/<prefix>/organism-__KEBAB__/<lang>.json`
+ * 
+ * ROUTE CONFIGURATION & PAGE BELONGING:
+ * To see which page(s) this organism belongs to, check `src/app/app.routes.ts`.
+ * It is injected into a page's metadata via the `data.Organisms` array.
+ * Look for the following placeholder in the routes file:
+ * `// [ASOR-INJECT:ORGANISM-DEFS(<page-name>)]`
+ */
+@Component({
+    selector: 'app-__KEBAB__',
+    standalone: true,
+    imports: [CommonModule, TranslatePipe],
+    templateUrl: './__KEBAB__.organism.html',
+})
+export class __PASCAL__Organism __BASE_CLASS_EXTENDS__ {
+    /**
+     * Unique identifier for the component class.
+     * CRITICAL for asor-core: used by the framework to identify this component
+     * within route metadata and correctly resolve its configuration/i18n paths.
+     */
+    public static override readonly className: string = '__PASCAL__Organism';
+
+    constructor() {
+        super();
+    }
+
+    /**
+     * Lifecycle hook called when the component view is about to enter at a generic level.
+     * Used for system-wide initialization logic common to all asor components.
+     */
+    override baseCompViewEnter(): void { }
+
+    /**
+     * Lifecycle hook called when the component view is about to leave at a generic level.
+     * Used for system-wide cleanup logic common to all asor components.
+     * Calls super.baseCompViewLeave() to ensure proper cleanup of base class / storage resources.
+     */
+    override baseCompViewLeave(): void {
+        super.baseCompViewLeave();
+    }
+
+    /**
+     * Specialized lifecycle hook for Organism components called when the view is about to enter.
+     * Use this for organism-specific initialization logic (e.g. orchestration of children datasets).
+     */
+    override baseOrganismViewWillEnter(): void { }
+
+    /**
+     * Specialized lifecycle hook for Organism components called when the view is about to leave.
+     * Use this for organism-specific cleanup logic.
+     * Calls super.baseOrganismViewWillLeave() to ensure proper cleanup of base class / storage resources.
+     */
+    override baseOrganismViewWillLeave(): void {
+        super.baseOrganismViewWillLeave();
+    }
+}

package/gen-template/generate-page/page.component.html.template

@@ -0,0 +1,63 @@
+<style>
+    /*
+     * IMPORTANT:
+     * This CSS block is only a minimal base generated by the template.
+     * In a real project, styles should be moved to a dedicated file
+     * based on the standard chosen by the team: CSS, SCSS, Sass, Less,
+     * or handled through global styles, utility classes, a design system, or inline styles.
+     */
+    .__KEBAB__-page {
+        display: grid;
+        gap: 1rem;
+        min-height: 100%;
+        padding: 1.25rem;
+        justify-items: center;
+        background: #f8fafc;
+        color: #111827;
+    }
+
+    .__KEBAB__-surface {
+        display: grid;
+        gap: 0.65rem;
+        width: min(100%, 44rem);
+        padding: 1.25rem;
+        border: 1px solid rgba(226, 232, 240, 0.9);
+        border-radius: 1rem;
+        background: #ffffff;
+        color: inherit;
+    }
+
+    .__KEBAB__-eyebrow {
+        margin: 0;
+        font-size: 0.72rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        color: #8b5cf6;
+        text-transform: uppercase;
+    }
+
+    .__KEBAB__-title,
+    .__KEBAB__-description {
+        margin: 0;
+    }
+
+    .__KEBAB__-title {
+        font-size: 1.5rem;
+        line-height: 1.2;
+    }
+
+    .__KEBAB__-description {
+        max-width: 52ch;
+        color: #4b5563;
+        font-size: 0.94rem;
+        line-height: 1.5;
+    }
+</style>
+
+<main class="__KEBAB__-page">
+    <section class="__KEBAB__-surface">
+        <p class="__KEBAB__-eyebrow">Page</p>
+        <h1 class="__KEBAB__-title">{{ '__ROUTE_KEY__.TITLE' | translate }}</h1>
+        <p class="__KEBAB__-description">{{ '__ROUTE_KEY__.WELCOME' | translate }}</p>
+    </section>
+</main>

package/gen-template/generate-page/page.component.ts.template

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslatePipe } from '@asor-studio/asor-core';
+import { __BASE_CLASS_NAME__, ConsoleLogsUtility } from '@asor-studio/asor-core';
+
+/**
+ * Page Component: Page__PASCAL__Component
+ * 
+ * ATOMIC DESIGN ROLE:
+ * A Page is the highest level of the atomic design hierarchy. It orchestrates atoms, molecules, and organisms
+ * to form a complete functional view or screen of the application.
+ * 
+ * I18N / TRANSLATIONS:
+ * Translations for this page can be found (or added) in:
+ * `assets/i18n/<prefix>/page-__KEBAB__/<lang>.json`
+ * 
+ * ROUTE CONFIGURATION:
+ * This page is directly mapped to a route in `src/app/app.routes.ts`.
+ * Configuration for its components (Atoms, Molecules, Organisms) is managed via the `data` property of the route.
+ */
+@Component({
+    selector: 'app-__KEBAB__-page',
+    standalone: true,
+    imports: [CommonModule, TranslatePipe],
+    templateUrl: './__KEBAB__.component.html',
+})
+export class Page__PASCAL__Component __BASE_CLASS_EXTENDS__ {
+    /**
+     * Unique identifier for the component class.
+     * CRITICAL for asor-core: used by the framework to identify this component
+     * within route metadata and correctly resolve its configuration/i18n paths.
+     */
+    public static override readonly className: string = 'Page__PASCAL__Component';
+
+    constructor() {
+        super();
+    }
+
+    /**
+     * Lifecycle hook called when the component view is about to enter at a generic level.
+     * Used for system-wide initialization logic common to all asor components.
+     */
+    override baseCompViewEnter(): void {
+        super.baseCompViewEnter();
+        ConsoleLogsUtility.info(this, '__PASCAL__ page loaded!');
+    }
+
+    /**
+     * Lifecycle hook called when the component view is about to leave at a generic level.
+     * Used for system-wide cleanup logic common to all asor components.
+     * Calls super.baseCompViewLeave() to ensure proper cleanup of base class / storage resources.
+     */
+    override baseCompViewLeave(): void {
+        super.baseCompViewLeave();
+    }
+}

package/gen-template/setup-asor-core/src/app/app.config.ts.template

@@ -0,0 +1,46 @@
+import { ApplicationConfig, APP_INITIALIZER, provideZonelessChangeDetection } from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS } from '@angular/common/http';
+import {
+    StateService,
+    CacheInterceptor,
+    ErrorInterceptor,
+    MockHttpInterceptor,
+    MockOrchestratorService,
+} from '@asor-studio/asor-core';
+import { routes } from './app.routes';
+import { initializeAsorCoreApp } from './config/app-asor.config';
+import { APP_BASE_HREF } from '@angular/common';
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        {
+            provide: APP_INITIALIZER,
+            useFactory: initializeAsorCoreApp,
+            deps: [StateService, MockOrchestratorService],
+            multi: true,
+        },
+        provideZonelessChangeDetection(),
+        provideRouter(routes, withComponentInputBinding()),
+        provideHttpClient(withInterceptorsFromDi()),
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: MockHttpInterceptor,
+            multi: true,
+        },
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: CacheInterceptor,
+            multi: true,
+        },
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: ErrorInterceptor,
+            multi: true,
+        },
+        {
+            provide: APP_BASE_HREF,
+            useValue: '/', // Customize for your application
+        },
+    ],
+};

package/gen-template/setup-asor-core/src/app/app.routes.ts.template

@@ -0,0 +1,40 @@
+import { Routes } from '@angular/router';
+import { AuthGuard, IAsorRoute } from '@asor-studio/asor-core';
+import { AppConfig } from './config/app.config';
+import { PageHomeComponent } from './pages/page-home/home.component';
+import { AppStateConnectionSystem } from './config/app-state.config';
+import { SampleWidgetMolecule } from './molecules/molecule-sample-widget/sample-widget.molecule';
+// [ASOR-INJECT:ROUTE-IMPORTS]
+
+export const routes: Routes = [
+    {
+        path: '',
+        redirectTo: AppConfig.Route.HOME,
+        pathMatch: 'full',
+    },
+    {
+        path: AppConfig.Route.HOME,
+        component: PageHomeComponent,
+        data: {
+            I18nPath: [AppConfig.TranslationUrl.HOME],
+            ConnectDataSet: AppStateConnectionSystem,
+            Components: [
+                // [ASOR-INJECT:COMPONENT-DEFS(home)]
+            ],
+            Molecules: [
+                {
+                    Molecule: SampleWidgetMolecule,
+                    I18nPath: [AppConfig.TranslationUrl.SAMPLE_WIDGET],
+                },
+                // [ASOR-INJECT:MOLECULE-DEFS(home)]
+            ],
+            Atoms: [
+                // [ASOR-INJECT:ATOM-DEFS(home)]
+            ],
+            Organisms: [
+                // [ASOR-INJECT:ORGANISM-DEFS(home)]
+            ],
+        } as IAsorRoute,
+    },
+    // [ASOR-INJECT:ROUTE-DEFS]
+];

package/gen-template/setup-asor-core/src/app/config/app-asor.config.ts.template

@@ -0,0 +1,64 @@
+import { inject } from '@angular/core';
+import {
+    StateService,
+    CacheInterceptor,
+    ErrorInterceptor,
+    ConsoleLogsConfig,
+    AuthGuard,
+    NotifyErrorService,
+    HttpRequestHandler,
+    LogLevel,
+    MockOrchestratorService,
+    AsorStorage,
+} from '@asor-studio/asor-core';
+import { AppConfig } from './app.config';
+import { AppCacheConfig } from './app-cache.config';
+import { AppStateCreateSystemDataSet } from './app-state.config';
+import { PageHomeComponent } from '../pages/page-home/home.component';
+// [ASOR-INJECT:LOG-IMPORTS]
+
+export function initializeAsorCoreApp(
+    stateService: StateService,
+    mockOrchestratorService: MockOrchestratorService
+) {
+    return () => {
+        const levels: LogLevel[] = ['INFO', 'WARNING', 'ERROR'];
+
+        ConsoleLogsConfig.silent = false;
+        ConsoleLogsConfig.defaultLevels = [];
+
+        ConsoleLogsConfig.setClassLevels(StateService.className, levels);
+        ConsoleLogsConfig.setClassLevels(AuthGuard.className, levels);
+        ConsoleLogsConfig.setClassLevels(CacheInterceptor.className, levels);
+        ConsoleLogsConfig.setClassLevels(ErrorInterceptor.className, levels);
+        ConsoleLogsConfig.setClassLevels(NotifyErrorService.className, levels);
+        ConsoleLogsConfig.setClassLevels(HttpRequestHandler.className, levels);
+
+        // Init Configs
+        ConsoleLogsConfig.setClassLevels(AppConfig.className, levels);
+        ConsoleLogsConfig.setClassLevels(AppCacheConfig.className, levels);
+        AppConfig.init();
+        AppCacheConfig.init();
+
+        // Register Pages (To enable BaseStorageComponent logs)
+        ConsoleLogsConfig.setClassLevels(PageHomeComponent.className, levels);
+        // [ASOR-INJECT:LOG-REGISTRATIONS]
+
+        stateService.initialize({
+            globalStateName: '<placeholder-globalStateName>',
+            encryptionType: AsorStorage.StateConst.EncryptType.AES,
+            nameType: AsorStorage.StateConst.Generate.AUTO,
+            keyType: AsorStorage.StateConst.Generate.AUTO,
+            asyncEnabled: true,
+        });
+
+        // Register the Global State "AppSystemStatus" in memory
+        stateService.createDataSet(
+            AppStateCreateSystemDataSet.name,
+            AppStateCreateSystemDataSet.data,
+            AppStateCreateSystemDataSet.option!
+        );
+
+        return true;
+    };
+}

package/gen-template/setup-asor-core/src/app/config/app-cache.config.ts.template

@@ -0,0 +1,26 @@
+import { ConfigCache, AsorGlobalEnum, ConsoleLogsUtility } from '@asor-studio/asor-core';
+import { AppConfig } from './app.config';
+
+export class AppCacheConfig extends ConfigCache {
+    public static readonly className: string = 'AppCacheConfig';
+    public static override globalStateName = '<placeholder-globalStateName>';
+
+    protected static override _pathsExtensions = [
+        {
+            pathValue: AppConfig.Cache.APP_BASE_I18N,
+            persistenceType: AsorGlobalEnum.CacheType.VOLATILE,
+            encriptType: AsorGlobalEnum.CacheEncriptType.NONE,
+            reqPayloadCache: false,
+            resctrictRoute: AppConfig.Route.NONE,
+            clearOn: [],
+        },
+    ];
+
+    static init() {
+        ConsoleLogsUtility.info(AppCacheConfig, 'AppCacheConfig initialized');
+    }
+
+    static {
+        ConfigCache.SetConfiguration(AppCacheConfig);
+    }
+}

package/gen-template/setup-asor-core/src/app/config/app-state.config.ts.template

@@ -0,0 +1,26 @@
+import { AsorStorage, ICreateDataSet, IConnectDataSet } from '@asor-studio/asor-core';
+import { IAppSystemStatus } from './interfaces/app-state.interfaces';
+
+// Dataset Definition (Global data sitting next to the StateService)
+export const AppStateCreateSystemDataSet: ICreateDataSet = {
+    name: 'app-system-status',
+    data: {
+        isMenuOpen: false,
+        appVersion: '1.0.0',
+        currentUser: null,
+    } as IAppSystemStatus,
+    option: {
+        storeType: AsorStorage.StateConst.StoreType.VOLATILE,
+        encrypt: false,
+    },
+};
+
+// Connection Definition that components will use to subscribe to specific Proxy keys
+export const AppStateConnectionSystem: IConnectDataSet = {
+    name: 'AppSystemConnection',
+    selectors: {
+        isMenuOpen: 'app-system-status.isMenuOpen',
+        appVersion: 'app-system-status.appVersion',
+        currentUser: 'app-system-status.currentUser',
+    },
+};

package/gen-template/setup-asor-core/src/app/config/app.config.ts.template

@@ -0,0 +1,62 @@
+import { ConfigConst, ConsoleLogsUtility } from '@asor-studio/asor-core';
+
+export class AppConfig extends ConfigConst {
+    public static readonly className: string = 'AppConfig';
+
+    static override BaseApi = '/api/v1';
+    static override SiteBaseUrl = '/';
+    static override SiteAssetsUrl = '/assets';
+
+    protected static override _routeExtensions = {
+        HOME: 'home',
+        // [ASOR-INJECT:ROUTE-EXTENSIONS]
+    };
+
+    protected static override _translationUrlExtensions = {
+        DefaultLanguage: 'en',
+        HOME: '/page-home',
+        SAMPLE_WIDGET: '/molecule-sample-widget',
+        // [ASOR-INJECT:TRANSLATION-EXTENSIONS]
+    };
+
+    protected static override _authCheckExtensions = {
+        HOME: 'home',
+    };
+
+    protected static override _urlExtensions = {
+        HOME: '/home',
+    };
+
+    protected static override _cacheExtensions = {
+        APP_BASE_I18N: 'i18n/app',
+    };
+
+    protected static _assetsExtensions = {};
+
+    static override get Route() {
+        return { ...super.Route, ...this._routeExtensions };
+    }
+    static override get TranslationUrl() {
+        return { ...super.TranslationUrl, ...this._translationUrlExtensions };
+    }
+    static override get AuthCheck() {
+        return { ...super.AuthCheck, ...this._authCheckExtensions };
+    }
+    static override get Url() {
+        return { ...super.Url, ...this._urlExtensions };
+    }
+    static override get Cache() {
+        return { ...super.Cache, ...this._cacheExtensions };
+    }
+    static get Assets() {
+        return { ...this._assetsExtensions };
+    }
+
+    static init() {
+        ConsoleLogsUtility.info(AppConfig, 'AppConfig initialized');
+    }
+
+    static {
+        ConfigConst.SetConfiguration(AppConfig);
+    }
+}

package/gen-template/setup-asor-core/src/app/config/interfaces/app-state.interfaces.ts.template

@@ -0,0 +1,5 @@
+export interface IAppSystemStatus {
+    isMenuOpen: boolean;
+    appVersion: string;
+    currentUser: string | null;
+}

package/gen-template/setup-asor-core/src/app/molecules/molecule-sample-widget/sample-widget.molecule.html.template

@@ -0,0 +1,84 @@
+<style>
+    /*
+     * IMPORTANT:
+     * This CSS block is only a minimal base generated by the template.
+     * In a real project, styles should be moved to a dedicated file
+     * based on the standard chosen by the team: CSS, SCSS, Sass, Less,
+     * or handled through global styles, utility classes, a design system, or inline styles.
+     */
+    .sample-widget {
+        position: relative;
+        display: grid;
+        gap: 0.85rem;
+        padding: 0.95rem 1rem;
+        border: 1px solid rgba(226, 232, 240, 0.95);
+        border-radius: 1.25rem;
+        background:
+            radial-gradient(circle at top right, rgba(219, 39, 119, 0.08), transparent 40%),
+            linear-gradient(180deg, #ffffff, #fbfbff);
+        color: #0f172a;
+        box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.05);
+    }
+
+    .sample-widget--highlighted {
+        animation: sample-widget-pulse 780ms ease;
+    }
+
+    .sample-widget__title,
+    .sample-widget__text,
+    .sample-widget__status {
+        margin: 0;
+    }
+
+    .sample-widget__title {
+        font-size: 0.98rem;
+        letter-spacing: 0.04em;
+        color: #7c3aed;
+    }
+
+    .sample-widget__text,
+    .sample-widget__status {
+        color: #475569;
+        font-size: 0.9rem;
+    }
+
+    .sample-widget__status-value {
+        font-weight: 600;
+        color: #64748b;
+    }
+
+    .sample-widget__status-value.active {
+        color: #db2777;
+    }
+
+    @keyframes sample-widget-pulse {
+        0%,
+        100% {
+            box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.05);
+            border-color: rgba(226, 232, 240, 0.95);
+        }
+
+        35% {
+            box-shadow: 0 0 0 0.28rem rgba(168, 85, 247, 0.12), 0 1rem 2rem rgba(168, 85, 247, 0.18);
+            border-color: rgba(168, 85, 247, 0.45);
+        }
+
+        60% {
+            box-shadow: 0 0 0 0.28rem rgba(236, 72, 153, 0.1), 0 1rem 2rem rgba(236, 72, 153, 0.16);
+            border-color: rgba(236, 72, 153, 0.4);
+        }
+    }
+</style>
+
+<section
+    class="sample-widget"
+    [class.sample-widget--highlighted]="isHighlighted">
+    <h3 class="sample-widget__title">{{ widgetTitle }}</h3>
+    <p class="sample-widget__text">{{ 'SAMPLE_WIDGET.RESPONSIVE' | translate }}</p>
+    <p class="sample-widget__status">
+        {{ 'SAMPLE_WIDGET.MENU_STATUS' | translate }}:
+        <span class="sample-widget__status-value" [class.active]="isMenuOpen">
+            {{ (isMenuOpen ? 'SAMPLE_WIDGET.OPEN' : 'SAMPLE_WIDGET.CLOSED') | translate }}
+        </span>
+    </p>
+</section>

package/gen-template/setup-asor-core/src/app/molecules/molecule-sample-widget/sample-widget.molecule.ts.template

@@ -0,0 +1,56 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BaseStorageMolecule, TranslatePipe } from '@asor-studio/asor-core';
+import { IAppSystemStatus } from '../../config/interfaces/app-state.interfaces';
+
+@Component({
+    selector: 'app-sample-widget',
+    standalone: true,
+    imports: [CommonModule, TranslatePipe],
+    templateUrl: './sample-widget.molecule.html',
+})
+export class SampleWidgetMolecule extends BaseStorageMolecule<IAppSystemStatus> implements OnInit, OnChanges {
+    public static override readonly className: string = 'SampleWidgetMolecule';
+
+    @Input() widgetTitle: string = 'Sample Widget';
+    @Input() highlightToken: number = 0;
+    public isHighlighted: boolean = false;
+    private highlightTimeoutId: ReturnType<typeof setTimeout> | null = null;
+
+    constructor() {
+        super();
+    }
+
+    override ngOnInit(): void {
+        super.ngOnInit?.();
+        // Widget initialization logic
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['highlightToken'] && !changes['highlightToken'].firstChange) {
+            this.isHighlighted = false;
+
+            if (this.highlightTimeoutId) {
+                clearTimeout(this.highlightTimeoutId);
+            }
+
+            setTimeout(() => {
+                this.isHighlighted = true;
+
+                this.highlightTimeoutId = setTimeout(() => {
+                    this.isHighlighted = false;
+                    this.highlightTimeoutId = null;
+                }, 820);
+            }, 0);
+        }
+    }
+
+    override baseMoleculeViewWillEnter(): void {
+        super.baseMoleculeViewWillEnter?.();
+        // Widget post-view initialization, highly suggested for complex widgets
+    }
+
+    public get isMenuOpen(): boolean {
+        return this.props?.isMenuOpen || false;
+    }
+}