@ojiepermana/angular 21.2.2 → 21.3.0

package/README.md

@@ -16,8 +16,13 @@ Install the published package into a consumer Angular workspace with Angular
 CLI so the required peer dependencies are added to the app's `package.json`
 and installed in the same flow:
 
+In the consumer snippets below, `@your-scope/angular` means the package name
+your workspace actually installs. Replace it consistently with the published
+target you use, for example `@ojiepermana/angular`, `@edsis/angular`, or
+another branded alias such as `@etos/angular`.
+
 ```bash
-ng add @ojiepermana/angular
+ng add @your-scope/angular
 ```
 
 The library requires Tailwind CSS `^4.3.0`. If the consumer workspace does
@@ -27,7 +32,7 @@ from the published `peerDependencies`.
 When updating the library later, use Angular CLI as well:
 
 ```bash
-ng update @ojiepermana/angular
+ng update @your-scope/angular
 ```
 
 The package ships `ng-add` and `ng-update` metadata so Angular and RxJS
@@ -38,18 +43,86 @@ add` directly, peer dependency installation falls back to the package
 manager's own behavior. In that flow, install Tailwind manually as well:
 
 ```bash
-bun add @ojiepermana/angular tailwindcss@^4.3.0
+bun add @your-scope/angular tailwindcss@^4.3.0
 ```
 
 Consumer app styles should import the library theme, Tailwind, and the
 Tailwind bridge in this order:
 
 ```css
-@import '@ojiepermana/angular/theme/styles';
+@import '@your-scope/angular/theme/styles';
 @import 'tailwindcss';
-@import '@ojiepermana/angular/theme/tailwind/theme.css';
+@import '@your-scope/angular/theme/tailwind/theme.css';
+```
+
+## Breaking change migration
+
+Granular secondary entrypoints are now the required component surface. If your
+app previously imported from the removed `@your-scope/angular/component`
+barrel, migrate in this order:
+
+1. Confirm the package root you install in the consumer app. Keep that same
+   root in every `ng add`, `ng update`, stylesheet import, and TypeScript
+   import.
+2. Replace broad barrel imports such as `@your-scope/angular/component` with
+   the smallest matching subpath, for example
+   `@your-scope/angular/component/button` or
+   `@your-scope/angular/component/dropdown-menu`.
+3. Update any internal helper imports to their new granular subpaths as well,
+   including utilities such as `@your-scope/angular/component/utils`.
+4. Update schematic commands in the same way. The package name before the
+   colon must match the installed target.
+
+Example migration:
+
+```ts
+import { ButtonComponent } from '@your-scope/angular/component/button';
+import { DropdownMenuComponent } from '@your-scope/angular/component/dropdown-menu';
+import { UiNavIconComponent } from '@your-scope/angular/navigation/icon';
+```
+
+## Granular imports for production builds
+
+Prefer the smallest subpath that matches the primitives you actually use,
+especially in Native Federation or other shared-chunk builds. Every component
+now ships only through its matching granular subpath, for example
+`@your-scope/angular/component/date-picker`,
+`@your-scope/angular/component/dropdown-menu`, and
+`@your-scope/angular/component/tooltip`.
+
+```ts
+import { AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@your-scope/angular/component/avatar';
+import { ButtonComponent } from '@your-scope/angular/component/button';
+import { PopoverContentDirective, PopoverTriggerDirective } from '@your-scope/angular/component/popover';
+import { cn } from '@your-scope/angular/component/utils';
+import { UiNavIconComponent } from '@your-scope/angular/navigation/icon';
+```
+
+`@your-scope/angular/navigation` remains available as a parent entrypoint, but
+`@your-scope/angular/component` has been removed. Component consumers must use
+the granular `@your-scope/angular/component/<slug>` imports.
+
+The same subpaths are preserved for branded packages. For example, a consumer
+built from the EDSIS release uses:
+
+```ts
+import { ButtonComponent } from '@edsis/angular/component/button';
+import { cn } from '@edsis/angular/component/utils';
+import { UiNavIconComponent } from '@edsis/angular/navigation/icon';
+```
+
+To verify the generated package still publishes smaller entrypoints after a
+build, run:
+
+```bash
+bun run build
+bun run report:entrypoints -- --check
 ```
 
+The size report validates that every granular component entrypoint resolves to
+its own module and that the removed `./component` parent barrel does not return
+in the published exports.
+
 ## Navigation primitives
 
 `@ojiepermana/angular/navigation` exports the shared sidebar and topbar building blocks used by the demo shells. The vertical navigation selector is now `sidebar` and the projected sidebar slots use `sidebar-header` and `sidebar-footer`.
@@ -70,9 +143,9 @@ SDK config file under `config/sdk.config.json` and generate an Angular SDK direc
 schematics:
 
 ```bash
-ng generate @ojiepermana/angular:sdk-init
+ng generate @your-scope/angular:sdk-init
 # edit config/sdk.config.json
-ng generate @ojiepermana/angular:sdk
+ng generate @your-scope/angular:sdk
 ```
 
 The main consumer flow is: create `config/sdk.config.json`, adjust the OpenAPI
@@ -83,8 +156,8 @@ If you want short script aliases in the consumer app's `package.json`, add:
 ```json
 {
   "scripts": {
-    "gen:sdk:init": "ng generate @ojiepermana/angular:sdk-init",
-    "gen:sdk": "ng generate @ojiepermana/angular:sdk"
+    "gen:sdk:init": "ng generate @your-scope/angular:sdk-init",
+    "gen:sdk": "ng generate @your-scope/angular:sdk"
   }
 }
 ```
@@ -95,8 +168,8 @@ ships the compiled schematic runtime.
 Common follow-up options:
 
 ```bash
-ng generate @ojiepermana/angular:sdk-init --path=config/my-sdk.config.json
-ng generate @ojiepermana/angular:sdk --config=config/my-sdk.config.json --dry-run
+ng generate @your-scope/angular:sdk-init --path=config/my-sdk.config.json
+ng generate @your-scope/angular:sdk --config=config/my-sdk.config.json --dry-run
 ```
 
 ## Code scaffolding
@@ -123,6 +196,12 @@ bun run build
 
 This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
 
+To inspect the generated entrypoint sizes after a build, run:
+
+```bash
+bun run report:entrypoints
+```
+
 ### Publishing the Library
 
 Publish the scoped package to the public npm registry from the workspace root.
@@ -139,30 +218,47 @@ Then run:
 bun run publish
 ```
 
-This command rebuilds the library and publishes the generated `dist/angular` package with public access.
+By default, this command publishes every configured release target from `config/release.config.json`.
+
+Release targets are configured in `config/release.config.json`. Each entry can override the published
+package name plus `repository`, `homepage`, and `bugs` metadata so npm shows the correct package identity.
 
-### Standalone Brand Packages
+To publish the `edsis` target from that config, run:
 
-Brand packages now publish independently from `projects/brand/*` instead of being repackaged from the core
-library. The Etos package lives in `projects/brand/etos` and publishes as `@ojiepermana/etos`.
+```bash
+bun run publish --edsis
+```
 
-Consumer installation for Etos is:
+To publish every configured release target in sequence, run:
 
 ```bash
-ng add @ojiepermana/angular
-bun add @ojiepermana/etos
+bun run publish -all
 ```
 
-If you use `npm`, `pnpm`, or `yarn`, install the brand package with your package manager after `ng add`
-finishes.
+`bun run publish` and `bun run publish -all` are equivalent.
+
+That flow rebuilds `dist/angular` for each configured target, rewrites published package references, applies
+the target-specific npm metadata, smoke-tests the tarball, then publishes it to npm.
 
-To build or publish the Etos package from this workspace, use:
+### EDSIS Verification Flow
+
+To validate the EDSIS package locally without publishing, use:
 
 ```bash
-bun run build:etos
-bun run publish:etos
+bun run build -- --package @edsis/angular --repository-url git+https://github.com/edsis/angular.git --homepage https://github.com/edsis/angular#readme --bugs-url https://github.com/edsis/angular/issues
+bun run smoke:pack -- --package @edsis/angular
 ```
 
+Consumer installation for the published EDSIS package is:
+
+```bash
+ng add @edsis/angular
+bun add @edsis/angular
+```
+
+If you use `npm`, `pnpm`, or `yarn`, install the package with your package manager after `ng add`
+finishes.
+
 ## Running unit tests
 
 To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command: