@solcre-org/core-ui 2.19.2 → 2.20.0

package/llm/screen-blueprints.md

@@ -0,0 +1,129 @@
+# Screen blueprints (copy‑paste)
+
+These are full, minimal templates to build screens using the library.
+
+## CRUD list + modal form
+
+### Template (HTML)
+```html
+<core-layout
+  [navItems]="navItems"
+  [navConfig]="navConfig"
+  [logoImagesConfig]="logoImagesConfig"
+  (onLogout)="handleLogout()"
+>
+  <core-header
+    (filterRequested)="openFilterModal()"
+    (createRequested)="openCreateModal()"
+  ></core-header>
+
+  <section class="page-content">
+    <core-generic-table
+      [columns]="columns"
+      [actions]="actions"
+      [dataInput]="rows"
+      [modalFields]="modalFields"
+      [showFilter]="true"
+      [enablePagination]="true"
+      (actionTriggered)="onTableAction($event)"
+      (dataCreated)="onCreated($event)"
+      (dataUpdated)="onUpdated($event)"
+    ></core-generic-table>
+  </section>
+
+  <core-generic-modal
+    [isOpen]="modalOpen"
+    [mode]="modalMode"
+    [title]="modalTitle"
+    [data]="formData"
+    (save)="save($event)"
+    (close)="closeModal()"
+  ></core-generic-modal>
+</core-layout>
+```
+
+### Component (TS)
+```ts
+import { ModalMode, FieldType } from 'projects/core-ui-library/src/lib/enums';
+import { ModalFieldConfig } from 'projects/core-ui-library/src/lib/interfaces';
+import { TableAction } from 'projects/core-ui-library/src/lib/components/generic-table/components/dropdown/enums/TableAction.enum';
+import { ColumnConfig } from 'projects/core-ui-library/src/lib/components/generic-table/interfaces/ColumnConfig.interface';
+import { TableActionConfig } from 'projects/core-ui-library/src/lib/components/generic-table/interfaces/TableActionConfig.interface';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+rows: User[] = [];
+modalOpen = false;
+modalMode: ModalMode = ModalMode.CREATE;
+modalTitle = 'Create user';
+formData: Partial<User> = {};
+
+columns: ColumnConfig<User>[] = [
+  { key: 'name', label: 'Name' },
+  { key: 'email', label: 'Email' },
+];
+
+actions: TableActionConfig<User>[] = [
+  { action: TableAction.VIEW, label: 'View' },
+  { action: TableAction.EDIT, label: 'Edit' },
+  { action: TableAction.DELETE, label: 'Delete' },
+];
+
+modalFields: ModalFieldConfig<User>[] = [
+  { key: 'name', label: 'Name', type: FieldType.TEXT, readonly: false },
+  { key: 'email', label: 'Email', type: FieldType.TEXT, readonly: false },
+];
+
+openCreateModal() {
+  this.modalMode = ModalMode.CREATE;
+  this.modalTitle = 'Create user';
+  this.formData = {};
+  this.modalOpen = true;
+}
+
+openFilterModal() {
+  // hook to filter UI if needed
+}
+
+onTableAction(event: { action: TableAction; row?: User }) {
+  if (event.action === TableAction.EDIT && event.row) {
+    this.modalMode = ModalMode.EDIT;
+    this.modalTitle = 'Edit user';
+    this.formData = { ...event.row };
+    this.modalOpen = true;
+  }
+}
+
+save(data: User) {
+  // persist data
+  this.modalOpen = false;
+}
+
+closeModal() {
+  this.modalOpen = false;
+}
+```
+
+## CRUD list + server‑side data
+
+Use `endpoint` and `modelFactory` on `core-generic-table` to fetch data remotely.
+
+```html
+<core-generic-table
+  [columns]="columns"
+  [actions]="actions"
+  [endpoint]="'/api/users'"
+  [modelFactory]="userFactory"
+  [enablePagination]="true"
+  (dataFetched)="rows = $event"
+></core-generic-table>
+```
+
+```ts
+userFactory = (data: any) => data as User;
+```
+

package/llm/screen-recipes.md

@@ -0,0 +1,53 @@
+# Screen-building recipes (LLM-friendly)
+
+Use these as default composition patterns when asked to create screens.
+
+Related docs
+- `form-recipes.md`
+- `screen-blueprints.md`
+
+## General recipe
+1) Pick a shell: `layout` for app pages or `layout-auth` for auth flows.
+2) Add navigation: `header` + `main-nav` (desktop) or `mobile-header` (mobile).
+3) Choose a primary content component (table, form, dashboard, etc.).
+4) Use `generic-modal` / `confirmation-dialog` for secondary actions.
+5) Wire services as needed (alerts, loaders, permissions, translations).
+
+## CRUD list page
+- Shell: `layout`
+- Primary: `generic-table`
+- Helpers: `generic-pagination`, `active-filters`, `confirmation-dialog`
+- Services: `model-api.service`, `table-* services`, `permission-wrapper.service`
+- Notes: table uses `ColumnConfig`, `TableActionConfig`, `FilterConfig`, etc.
+
+## CRUD form page
+- Shell: `layout`
+- Primary: field components under `fields/types/*`
+- Helpers: `field-errors`, `generic-button`
+- Validation: `validators` + custom rules
+- Notes: form field configs live in `interfaces/field-configs`.
+
+## Detail page
+- Shell: `layout`
+- Primary: `card`, `data-list`, `generic-tabs`
+- Media: `image-preview`, `file-preview`, `carousel` as needed
+
+## Timeline or activity page
+- Shell: `layout`
+- Primary: `generic-timeline`
+- Helpers: `generic-tabs`, `generic-pagination`
+
+## Scheduler / calendar page
+- Shell: `layout`
+- Primary: `generic-calendar` or `generic-scheduler`
+- Enums: calendar enums in `lib/enums/calendar`
+
+## Documentation / knowledge page
+- Shell: `layout`
+- Primary: `generic-documentation`
+- Notes: uses `DocumentConfig` and related enums.
+
+## Chat page
+- Shell: `layout`
+- Primary: `generic-chat`
+- Helpers: `file-preview`, `image-preview`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solcre-org/core-ui",
-  "version": "2.19.2",
+  "version": "2.20.0",
   "private": false,
   "publishConfig": {
     "access": "public"