create-momentum-app 0.5.4 → 0.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -32,3 +32,4 @@ npx create-momentum-app my-app --flavor angular --database postgres
|
|
|
32
32
|
- Drizzle ORM with PostgreSQL or SQLite
|
|
33
33
|
- Docker Compose setup for PostgreSQL (when using postgres)
|
|
34
34
|
- Tailwind CSS with the Momentum admin theme
|
|
35
|
+
- Project-local Claude Code skills under `.claude/skills`, including `headless-ui` for custom app UI built on `@momentumcms/headless`
|
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@ import 'dotenv/config';
|
|
|
2
2
|
import {
|
|
3
3
|
initializeMomentumAPI,
|
|
4
4
|
registerWebhookHooks,
|
|
5
|
+
syncDatabaseSchema,
|
|
5
6
|
} from '@momentumcms/server-core';
|
|
6
7
|
import { initializeMomentumLogger, createLogger } from '@momentumcms/logger';
|
|
7
8
|
import { PluginRunner } from '@momentumcms/plugins-core';
|
|
@@ -44,19 +45,7 @@ async function initialize(): Promise<void> {
|
|
|
44
45
|
|
|
45
46
|
registerWebhookHooks(momentumConfig.collections);
|
|
46
47
|
|
|
47
|
-
|
|
48
|
-
log.info('Initializing database schema...');
|
|
49
|
-
await momentumConfig.db.adapter.initialize(momentumConfig.collections);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
if (
|
|
53
|
-
momentumConfig.db.adapter.initializeGlobals &&
|
|
54
|
-
momentumConfig.globals &&
|
|
55
|
-
momentumConfig.globals.length > 0
|
|
56
|
-
) {
|
|
57
|
-
log.info(`Initializing globals table for ${momentumConfig.globals.length} global(s)...`);
|
|
58
|
-
await momentumConfig.db.adapter.initializeGlobals(momentumConfig.globals);
|
|
59
|
-
}
|
|
48
|
+
await syncDatabaseSchema(momentumConfig, log);
|
|
60
49
|
|
|
61
50
|
log.info('Initializing API...');
|
|
62
51
|
const api = initializeMomentumAPI(momentumConfig);
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: headless-ui
|
|
3
|
+
description: Use @momentumcms/headless inside generated Momentum apps. Use when building custom public UI, composing accessible primitives, configuring global styles for hdl-* elements, or adding app-level tests around headless interactions.
|
|
4
|
+
argument-hint: <feature-or-primitive>
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Use Headless UI In Generated Apps
|
|
8
|
+
|
|
9
|
+
Use this skill when a generated app needs custom UI built on `@momentumcms/headless`.
|
|
10
|
+
|
|
11
|
+
## Prefer Headless For
|
|
12
|
+
|
|
13
|
+
- Public-facing UI that should not look like the admin
|
|
14
|
+
- App-specific design systems that still need solid keyboard and ARIA behavior
|
|
15
|
+
- Custom menus, dialogs, comboboxes, chips, tabs, and form fields
|
|
16
|
+
|
|
17
|
+
Use `@momentumcms/admin` when you want the built-in admin screens instead of custom surfaces.
|
|
18
|
+
|
|
19
|
+
## Workflow
|
|
20
|
+
|
|
21
|
+
1. Import the needed primitive classes into the Angular component that renders them.
|
|
22
|
+
2. Style them from `src/styles.css` or your global Tailwind layer, not from the library.
|
|
23
|
+
3. Target `data-slot`, `data-state`, `data-disabled`, and overlay classes such as `.hdl-dialog-panel`.
|
|
24
|
+
4. Add visible state readouts for important interactions so browser tests can prove the UI intention.
|
|
25
|
+
5. Update app routes or showcase pages if you are adding a reusable demo surface.
|
|
26
|
+
|
|
27
|
+
## Styling Rules
|
|
28
|
+
|
|
29
|
+
- Start with design tokens in `@layer base`.
|
|
30
|
+
- Add shared recipes in `@layer components`.
|
|
31
|
+
- Use host `class=""` only for local one-off overrides.
|
|
32
|
+
- For projected child visuals, style the child markup you render inside the primitive.
|
|
33
|
+
- Keep `[hidden]` behavior intact for slots that collapse or unmount visually.
|
|
34
|
+
|
|
35
|
+
## Example Shape
|
|
36
|
+
|
|
37
|
+
```typescript
|
|
38
|
+
import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
|
|
39
|
+
import { HdlCombobox, HdlComboboxInput, HdlComboboxPopup, HdlOption } from '@momentumcms/headless';
|
|
40
|
+
|
|
41
|
+
@Component({
|
|
42
|
+
selector: 'app-filter-combobox',
|
|
43
|
+
imports: [HdlCombobox, HdlComboboxInput, HdlComboboxPopup, HdlOption],
|
|
44
|
+
template: `
|
|
45
|
+
<hdl-combobox [value]="selected()" (valueChange)="selected.set($event)">
|
|
46
|
+
<input hdlComboboxInput [value]="query()" (input)="query.set(search.value)" #search />
|
|
47
|
+
<hdl-combobox-popup>
|
|
48
|
+
@for (item of filteredItems(); track item) {
|
|
49
|
+
<hdl-option [value]="item">{{ item }}</hdl-option>
|
|
50
|
+
}
|
|
51
|
+
</hdl-combobox-popup>
|
|
52
|
+
</hdl-combobox>
|
|
53
|
+
|
|
54
|
+
<p>Selected: {{ selected() || 'none' }}</p>
|
|
55
|
+
`,
|
|
56
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
57
|
+
})
|
|
58
|
+
export class FilterComboboxComponent {
|
|
59
|
+
readonly items = ['Articles', 'Pages', 'Authors', 'Media'];
|
|
60
|
+
readonly query = signal('');
|
|
61
|
+
readonly selected = signal('');
|
|
62
|
+
readonly filteredItems = computed(() => {
|
|
63
|
+
const query = this.query().trim().toLowerCase();
|
|
64
|
+
return query ? this.items.filter((item) => item.toLowerCase().includes(query)) : this.items;
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Test Expectations
|
|
70
|
+
|
|
71
|
+
- Unit tests should cover app-specific state mapping and conditional rendering.
|
|
72
|
+
- Browser tests should assert the intended behavior, not just the presence of `hdl-*` tags.
|
|
73
|
+
- Good assertions: combobox filtering works, menu clicks update the readout, chips remove correctly, dialog actions dismiss as expected.
|
|
74
|
+
|
|
75
|
+
## If You Need More Than Consumption
|
|
76
|
+
|
|
77
|
+
If the app task actually requires changing the library itself, switch to the repo skill for maintaining `libs/headless` instead of patching around the library from the app.
|