@ojiepermana/angular 0.1.1 → 21.0.0

package/README.md

@@ -1,283 +1,75 @@
 # @ojiepermana/angular
 
-Theme, layout, and navigation primitives for Angular applications.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.
 
-This package is organized around secondary entry points. The root TypeScript package is intentionally empty, so application code should not import APIs from `@ojiepermana/angular` directly.
+## Package manager
 
-## Current Package Shape
+Install dependencies from the workspace root with Bun:
 
-Use these entry points in application code:
-
-- `@ojiepermana/angular/theme/service`
-- `@ojiepermana/angular/theme/component`
-- `@ojiepermana/angular/theme/directive`
-- `@ojiepermana/angular/layout`
-- `@ojiepermana/angular/navigation`
-- `@ojiepermana/angular/navigation/vertical`
-- `@ojiepermana/angular/navigation/horizontal`
-- `@ojiepermana/angular/shell`
-- `@ojiepermana/angular/styles/index.css`
-- `@ojiepermana/angular/styles/resets.css` for optional application-level resets
-
-Do not import consumer code from:
-
-- `@ojiepermana/angular`
-- `@ojiepermana/angular/internal`
-
-## What The Library Provides
-
-- Theme runtime state through `ThemeService` and `provideNgTheme()` for scheme, color, and style.
-- Theme host mirroring through `ThemeHostDirective`.
-- Theme controls through `StyleSwitcherComponent`, `ColorPickerComponent`, and `SchemeSwitcherComponent`.
-- Layout runtime state through `LayoutService` and `provideNgLayout()` for shell mode and container width.
-- Combined runtime registration through `provideNgShell()`.
-- Layout host mirroring through `LayoutHostDirective`.
-- Reusable shell components through `LayoutVerticalComponent` and `LayoutHorizontalComponent`.
-- Layout controls through `LayoutModeSwitcherComponent` and `LayoutContainerSwitcherComponent`.
-- Navigation runtime state through `NavigationService` and shared navigation utilities.
-- Reusable navigation components through `HorizontalNavigation` and the vertical navigation variants.
-- A combined stylesheet bundle through `@ojiepermana/angular/styles/index.css`.
-
-## Requirements
-
-The published package currently declares peer dependencies for:
-
-- `@angular/common` `^21.2.0`
-- `@angular/core` `^21.2.0`
-- `@angular/cdk` `^21.0.0`
-- `@angular/material` `^21.0.0`
-- `@lucide/angular` `>=1.0.0`
-- `tailwindcss` `>=4.0.0`
-
-If you use the layout shells or the navigation components, your application should also already be using Angular Router because those APIs render router primitives such as `RouterOutlet` and `RouterLink`.
-
-## Runtime Contract
-
-### Theme Runtime
-
-`ThemeService` writes these values to `document.documentElement`:
-
-- `.dark` when the resolved scheme is dark.
-- `style.color-scheme` with the resolved browser color scheme.
-- `data-theme-scheme`
-- `data-theme-color`
-- `data-theme-style`
-
-Theme persistence keys:
-
-- `theme-scheme`
-- `theme-color`
-- `theme-style`
-
-### Layout Runtime
-
-`LayoutService` writes these values to `document.documentElement`:
-
-- `data-layout-mode`
-- `data-layout-container`
-
-Layout persistence keys:
-
-- `layout-mode`
-- `layout-container`
-
-Legacy `ng-theme:v2:*` keys are migrated automatically by the owning runtime service when they are read.
-
-Deprecated config fields `storageKey` and `storageVersion` have been removed from the public config interfaces. The persistence keys are now fixed by the library runtime.
-
-Theme color labels can be localized through `provideNgTheme({ colorLabels: { ... } })`, and layout shells now prefer the internal `shell-content` marker over the deprecated HTML `content` element name.
-
-## Styling Model
-
-- `@ojiepermana/angular/styles/index.css` is the canonical aggregate bundle for applications. It imports theme first, then the layout-wide `data-layout-*` rules.
-- Application-level resets are intentionally not bundled. Import `@ojiepermana/angular/styles/resets.css` only if you want the library's optional reset helpers.
-- Theme styles remain in the aggregate bundle, while horizontal and vertical shell CSS are colocated with their standalone layout components.
-- Semantic tokens are the visual source of truth.
-- Angular Material is the behavior layer and consumes the shared theme variables.
-
-## Quick Start
-
-### 1. Register Providers
+```bash
+bun install
+```
 
-```ts
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { provideNgShell } from '@ojiepermana/angular/shell';
+## Code scaffolding
 
-import { routes } from './app.routes';
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
 
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideBrowserGlobalErrorListeners(),
-    provideRouter(routes),
-    provideNgShell({
-      theme: {
-        defaultScheme: 'system',
-        defaultColor: 'brand',
-        defaultStyle: 'flat',
-      },
-      layout: {
-        defaultMode: 'vertical',
-        defaultContainer: 'boxed',
-      },
-    }),
-  ],
-};
+```bash
+bun run ng generate component component-name
 ```
 
-### 2. Register Styles
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
 
-```css
-@import '@ojiepermana/angular/styles/index.css';
-@import 'tailwindcss';
+```bash
+bun run ng --help
 ```
 
-Use this aggregate import for consumer applications.
+## Building
 
-If your application also wants the library's optional reset helpers, add this before the aggregate bundle:
+To build the library, run:
 
-```css
-@import '@ojiepermana/angular/styles/resets.css';
-@import '@ojiepermana/angular/styles/index.css';
-@import 'tailwindcss';
+```bash
+bun run build
 ```
 
-### 3. Compose A Shell
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
 
-```ts
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LayoutContainerSwitcherComponent, LayoutVerticalComponent } from '@ojiepermana/angular/layout';
-import {
-  StyleSwitcherComponent,
-  ColorPickerComponent,
-  SchemeSwitcherComponent,
-} from '@ojiepermana/angular/theme/component';
+### Publishing the Library
 
-@Component({
-  selector: 'app-shell',
-  imports: [
-    StyleSwitcherComponent,
-    ColorPickerComponent,
-    LayoutContainerSwitcherComponent,
-    LayoutVerticalComponent,
-    SchemeSwitcherComponent,
-  ],
-  template: `
-    <vertical>
-      <nav navigation class="flex h-full w-full flex-col gap-6 px-4 py-5">
-        <div class="flex items-center gap-1">
-          <style-switcher />
-          <layout-container-switcher />
-          <scheme-switcher />
-        </div>
-
-        <color-picker />
-      </nav>
-    </vertical>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AppShellComponent {}
-```
+Publish the scoped package to the public npm registry from the workspace root.
 
-### 4. Mirror Runtime State To A Subtree
+First, log in to npm:
 
-```html
-<section ngtThemeHost ngtLayoutHost>
-  <ng-content />
-</section>
+```bash
+npm login
 ```
 
-## Entry Point Summary
+Then run:
 
-### `@ojiepermana/angular/theme/service`
-
-- `ThemeService`
-- `provideNgTheme`
-- `NG_THEME_CONFIG`
-- `ThemeScheme`
-- `ThemeColor`
-- `ThemeColorOption`
-- `ThemeStyle`
-- `NgThemeConfig`
-
-### `@ojiepermana/angular/theme/component`
-
-- `StyleSwitcherComponent`
-- `ColorPickerComponent`
-- `SchemeSwitcherComponent`
-
-### `@ojiepermana/angular/theme/directive`
-
-- `ThemeHostDirective`
-
-### `@ojiepermana/angular/layout`
-
-- `LayoutService`
-- `provideNgLayout`
-- `NG_LAYOUT_CONFIG`
-- `LayoutMode`
-- `LayoutContainer`
-- `NgLayoutConfig`
-- `LayoutHostDirective`
-- `LayoutVerticalComponent`
-- `LayoutHorizontalComponent`
-- `LayoutModeSwitcherComponent`
-- `LayoutContainerSwitcherComponent`
+```bash
+npm run publish
+```
 
-### `@ojiepermana/angular/navigation`
+This command rebuilds the library and publishes the generated `dist/angular` package with public access.
 
-- `provideNgNavigation`
-- `NG_NAVIGATION_CONFIG`
-- `NgNavigationConfig`
-- `NavigationPreferencesService`
-- `NavigationService`
-- `NavigationItem`
-- `NavigationBranchItem`
-- `NavigationLeafItem`
-- `NavigationBasicItem`
-- `NavigationAsideItem`
-- `NavigationCollapsableItem`
-- `NavigationGroupItem`
-- `NavigationDividerItem`
-- `NavigationSpacerItem`
-- `HorizontalNavigationVariant`
-- `VerticalNavigationAppearance`
-- `VerticalNavigationMode`
-- `VerticalNavigationPosition`
-- `getNavigationItemAction`
-- `getNavigationChildren`
-- `getNavigationItemVisibilityHandler`
-- `hasNavigationChildren`
-- `isNavigationItemHidden`
-- `isNavigationRoutableItem`
-- `shouldRenderNavigationItem`
+## Running unit tests
 
-### `@ojiepermana/angular/navigation/vertical`
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
 
-- `VerticalNavigationCollapsibleComponent`
-- `VerticalNavigationDefaultComponent`
-- `VerticalNavigationAsideItemComponent`
-- `VerticalNavigationBasicItemComponent`
-- `VerticalNavigationCollapsableItemComponent`
-- `VerticalNavigationDividerItemComponent`
-- `VerticalNavigationGroupItemComponent`
-- `VerticalNavigationSpacerItemComponent`
+```bash
+bun run test
+```
 
-### `@ojiepermana/angular/navigation/horizontal`
+## Running end-to-end tests
 
-- `HorizontalNavigation`
-- `HorizontalNavigationBranchItem`
+For end-to-end (e2e) testing, run:
 
-### `@ojiepermana/angular/shell`
+```bash
+bun run ng e2e
+```
 
-- `provideNgShell`
-- `NgShellConfig`
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
 
-## Notes For Contributors
+## Additional Resources
 
-- Keep public imports domain-based through the documented secondary entry points.
-- Document `@ojiepermana/angular/styles/index.css` as the consumer stylesheet entry point.
-- Treat `@ojiepermana/angular/internal` as implementation-only. It exists so library entry points can share code without turning that code into a supported consumer contract.
-- Do not add exports to `@ojiepermana/angular` unless the package contract changes intentionally.
-- Keep the root README, theme README, layout README, navigation README, and entrypoint smoke tests aligned whenever the public surface changes.
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.