domma-js 0.3.1-alpha → 0.7.0-alpha

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.
Files changed (39) hide show
  1. package/README.md +33 -30
  2. package/assets/types/config.d.ts +127 -0
  3. package/assets/types/dates.d.ts +209 -0
  4. package/assets/types/dom.d.ts +448 -0
  5. package/assets/types/elements.d.ts +606 -0
  6. package/assets/types/http.d.ts +97 -0
  7. package/assets/types/icons.d.ts +147 -0
  8. package/assets/types/index.d.ts +197 -0
  9. package/assets/types/models.d.ts +188 -0
  10. package/assets/types/storage.d.ts +93 -0
  11. package/assets/types/tables.d.ts +327 -0
  12. package/assets/types/theme.d.ts +136 -0
  13. package/assets/types/utils.d.ts +675 -0
  14. package/bin/domma-cli.js +144 -0
  15. package/package.json +12 -5
  16. package/public/dist/bundles/domma-complete.css +2316 -170
  17. package/public/dist/bundles/domma-data-focused.css +2686 -321
  18. package/public/dist/bundles/domma-essentials.css +2686 -321
  19. package/public/dist/bundles/domma-full.css +2686 -321
  20. package/public/dist/bundles/domma-grayve.css +13839 -0
  21. package/public/dist/bundles/domma-minimal.css +1591 -9
  22. package/public/dist/domma-syntax.min.js +8 -0
  23. package/public/dist/domma.css +1586 -4
  24. package/public/dist/domma.esm.js +4 -4
  25. package/public/dist/domma.min.js +4 -4
  26. package/public/dist/elements.css +368 -17
  27. package/public/dist/grid.css +3 -3
  28. package/public/dist/syntax.css +3 -3
  29. package/public/dist/themes/domma-themes.css +216 -3
  30. package/public/dist/themes/grayve.css +213 -0
  31. package/templates/kickstart/about/index.html +241 -0
  32. package/templates/kickstart/assets/logo/placeholder.svg +6 -0
  33. package/templates/kickstart/blog/index.html +227 -0
  34. package/templates/kickstart/contact/index.html +218 -0
  35. package/templates/kickstart/css/custom.css +121 -0
  36. package/templates/kickstart/docs/index.html +310 -0
  37. package/templates/kickstart/domma.config.json +47 -0
  38. package/templates/kickstart/index.html +170 -0
  39. package/templates/kickstart/js/app.js +161 -0
package/README.md CHANGED
@@ -18,15 +18,33 @@ modern UI components in one cohesive package.
18
18
 
19
19
  ## Installation
20
20
 
21
- ### Via npm (Recommended)
21
+ ### Quick Start with CLI (Recommended)
22
22
 
23
- To install Domma-js in your project:
23
+ Get a complete project structure with 5 sample pages in seconds:
24
24
 
25
25
  ```bash
26
- npm install domma-js@alpha
26
+ npm init -y
27
+ npm install domma-js
28
+ npx domma init
27
29
  ```
28
30
 
29
- Then, import it into your JavaScript:
31
+ This creates:
32
+
33
+ - ✅ Complete project structure with 5 sample pages
34
+ - ✅ JSON configuration (`domma.config.json`)
35
+ - ✅ Navbar and footer (configured via JSON)
36
+ - ✅ Theme system with 16+ themes
37
+ - ✅ All features ready to use
38
+
39
+ ### Via npm (Manual Setup)
40
+
41
+ Install Domma in your project:
42
+
43
+ ```bash
44
+ npm install domma-js
45
+ ```
46
+
47
+ Then import it:
30
48
 
31
49
  ```javascript
32
50
  import Domma, { $, _, M, D } from 'domma-js';
@@ -39,37 +57,22 @@ const Domma = require('domma-js');
39
57
  const { $, _, M, D } = Domma;
40
58
  ```
41
59
 
42
- ### Via jsDelivr CDN
43
-
44
- For quick integration, you can directly include Domma-js from jsDelivr in your HTML. Always specify the version to
45
- ensure stability.
46
-
47
- ```html
48
- <!-- CSS (include these in your <head>) -->
49
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/domma.css">
50
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/grid.css">
51
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/elements.css">
52
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/themes/domma-themes.css">
53
-
54
- <!-- JavaScript (include before your closing </body> tag) -->
55
- <script src="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/domma.min.js"></script>
56
- ```
57
-
58
- ### Local Files (UMD and ES Module)
60
+ ### Via CDN
59
61
 
60
- You can also download the distribution files and host them yourself.
61
-
62
- **Browser (UMD):**
62
+ For quick prototyping without npm:
63
63
 
64
64
  ```html
65
- <script src="dist/domma.min.js"></script>
65
+ <!-- CSS -->
66
+ <link rel="stylesheet" href="https://unpkg.com/domma-js/public/dist/domma.css">
67
+ <link rel="stylesheet" href="https://unpkg.com/domma-js/public/dist/grid.css">
68
+ <link rel="stylesheet" href="https://unpkg.com/domma-js/public/dist/elements.css">
69
+ <link rel="stylesheet" href="https://unpkg.com/domma-js/public/dist/themes/domma-themes.css">
70
+
71
+ <!-- JavaScript -->
72
+ <script src="https://unpkg.com/domma-js/public/dist/domma.min.js"></script>
66
73
  ```
67
74
 
68
- **ES Module:**
69
-
70
- ```javascript
71
- import Domma, { $, _, M, D } from './dist/domma.esm.js';
72
- ```
75
+ **[Try the CDN Quickstart](./public/quickstart/index.html)** - Single-file example ready to download
73
76
 
74
77
  ## Short Aliases
75
78
 
package/assets/types/config.d.ts ADDED
@@ -0,0 +1,127 @@
1
+ /**
2
+ * Domma Config Module - TypeScript Declarations
3
+ * Declarative configuration engine for component initialisation
4
+ */
5
+
6
+ import {DommaCollection} from './dom';
7
+
8
+ export type ComponentType = 'card' | 'modal' | 'tabs' | 'accordion' | 'tooltip' | 'carousel' | 'dropdown';
9
+
10
+ export interface InitialProperties {
11
+ css?: Record<string, string | number>;
12
+ text?: string;
13
+ html?: string;
14
+ addClass?: string;
15
+ removeClass?: string;
16
+ toggleClass?: string;
17
+ attr?: Record<string, string>;
18
+ }
19
+
20
+ export interface EventAction {
21
+ target?: string;
22
+ css?: Record<string, string | number>;
23
+ text?: string;
24
+ html?: string;
25
+ addClass?: string;
26
+ removeClass?: string;
27
+ toggleClass?: string;
28
+ log?: string;
29
+ }
30
+
31
+ export type EventHandler = (event: Event, $el: DommaCollection) => void;
32
+ export type EventActions = EventHandler | EventAction | (EventHandler | EventAction)[];
33
+
34
+ export interface SelectorConfig {
35
+ /** Component type to initialise */
36
+ component?: ComponentType;
37
+
38
+ /** Component options */
39
+ options?: Record<string, any>;
40
+
41
+ /** Initial state properties to apply */
42
+ initial?: InitialProperties;
43
+
44
+ /** Event handlers */
45
+ events?: Record<string, EventActions>;
46
+ }
47
+
48
+ export interface SetupConfig {
49
+ [selector: string]: SelectorConfig;
50
+ }
51
+
52
+ export interface ConfigEngine {
53
+ /**
54
+ * Process initial configuration
55
+ * @param config - Configuration object keyed by selector
56
+ */
57
+ process(config: SetupConfig): void;
58
+
59
+ /**
60
+ * Update configuration for a selector
61
+ * @param selector - CSS selector
62
+ * @param changes - Changes to merge into existing config
63
+ * @returns The merged configuration
64
+ */
65
+ update(selector: string, changes: Partial<SelectorConfig>): SelectorConfig;
66
+
67
+ /**
68
+ * Retrieve configuration for a selector or all selectors
69
+ * @param selector - Optional selector to get config for
70
+ * @returns Configuration object or null if not found
71
+ */
72
+ config(): Record<string, SelectorConfig>;
73
+
74
+ config(selector: string): SelectorConfig | null;
75
+
76
+ /**
77
+ * Reset/destroy configuration for a selector or all selectors
78
+ * @param selector - Optional selector to reset
79
+ */
80
+ reset(selector?: string): void;
81
+
82
+ /**
83
+ * Initialise a component
84
+ * @param selector - CSS selector
85
+ * @param componentType - Component type name
86
+ * @param options - Component options
87
+ * @returns Component instance
88
+ */
89
+ initComponent(selector: string, componentType: ComponentType, options?: Record<string, any>): any;
90
+
91
+ /**
92
+ * Apply properties to DOM elements
93
+ * @param domElements - Domma collection
94
+ * @param properties - Properties to apply
95
+ */
96
+ applyProperties(domElements: DommaCollection, properties: InitialProperties): void;
97
+
98
+ /**
99
+ * Bind events to elements
100
+ * @param selector - CSS selector
101
+ * @param events - Event handlers object
102
+ * @param track - Whether to track handlers for later removal
103
+ */
104
+ bindEvents(selector: string, events: Record<string, EventActions>, track?: boolean): void;
105
+
106
+ /**
107
+ * Unbind all tracked events for a selector
108
+ * @param selector - CSS selector
109
+ */
110
+ unbindEvents(selector: string): void;
111
+
112
+ /**
113
+ * Update events for a selector (replaces existing handlers for same events)
114
+ * @param selector - CSS selector
115
+ * @param newEvents - New event handlers
116
+ */
117
+ updateEvents(selector: string, newEvents: Record<string, EventActions>): void;
118
+
119
+ /**
120
+ * Execute actions for an event
121
+ * @param event - DOM event
122
+ * @param actions - Actions to execute
123
+ */
124
+ executeActions(event: Event, actions: EventActions): void;
125
+ }
126
+
127
+ export declare const configEngine: ConfigEngine;
package/assets/types/dates.d.ts ADDED
@@ -0,0 +1,209 @@
1
+ /**
2
+ * Domma Dates Module - TypeScript Declarations
3
+ * Moment.js-style chainable date manipulation
4
+ */
5
+
6
+ export type DateInput = Date | string | number | DommaDate | null | undefined;
7
+ export type DateUnit =
8
+ 'year'
9
+ | 'years'
10
+ | 'month'
11
+ | 'months'
12
+ | 'week'
13
+ | 'weeks'
14
+ | 'day'
15
+ | 'days'
16
+ | 'date'
17
+ | 'hour'
18
+ | 'hours'
19
+ | 'minute'
20
+ | 'minutes'
21
+ | 'second'
22
+ | 'seconds'
23
+ | 'millisecond'
24
+ | 'milliseconds';
25
+ export type DiffUnit = 'milliseconds' | 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'years';
26
+ export type Inclusivity = '()' | '[]' | '[)' | '(]';
27
+
28
+ /**
29
+ * Chainable date wrapper class
30
+ */
31
+ export declare class DommaDate {
32
+ constructor(value?: DateInput);
33
+
34
+ // ============================================
35
+ // Manipulation Methods (chainable)
36
+ // ============================================
37
+
38
+ /** Add time to the date */
39
+ add(amount: number, unit: DateUnit): DommaDate;
40
+
41
+ /** Subtract time from the date */
42
+ subtract(amount: number, unit: DateUnit): DommaDate;
43
+
44
+ /** Set to start of unit of time */
45
+ startOf(unit: DateUnit): DommaDate;
46
+
47
+ /** Set to end of unit of time */
48
+ endOf(unit: DateUnit): DommaDate;
49
+
50
+ /** Set a unit of time */
51
+ set(unit: DateUnit, value: number): DommaDate;
52
+
53
+ // ============================================
54
+ // Getter Methods
55
+ // ============================================
56
+
57
+ /** Get unit value or underlying Date */
58
+ get(): Date;
59
+ get(unit: DateUnit): number;
60
+
61
+ /** Get the year */
62
+ year(): number;
63
+
64
+ /** Get the month (0-11) */
65
+ month(): number;
66
+
67
+ /** Get the date of month (1-31) */
68
+ date(): number;
69
+
70
+ /** Get the day of week (0-6, Sunday=0) */
71
+ day(): number;
72
+
73
+ /** Get the hour (0-23) */
74
+ hour(): number;
75
+
76
+ /** Get the minute (0-59) */
77
+ minute(): number;
78
+
79
+ /** Get the second (0-59) */
80
+ second(): number;
81
+
82
+ /** Get the millisecond (0-999) */
83
+ millisecond(): number;
84
+
85
+ /** Get the day of year (1-366) */
86
+ dayOfYear(): number;
87
+
88
+ /** Get the week of year */
89
+ week(): number;
90
+
91
+ /** Get the quarter (1-4) */
92
+ quarter(): number;
93
+
94
+ /** Get Unix timestamp (seconds) */
95
+ unix(): number;
96
+
97
+ /** Get milliseconds since epoch */
98
+ valueOf(): number;
99
+
100
+ // ============================================
101
+ // Formatting
102
+ // ============================================
103
+
104
+ /** Format the date using tokens */
105
+ format(formatStr?: string): string;
106
+
107
+ /** Get ISO 8601 string */
108
+ toISOString(): string;
109
+
110
+ /** Get native Date object */
111
+ toDate(): Date;
112
+
113
+ /** Get string representation */
114
+ toString(): string;
115
+
116
+ /** Get relative time from now */
117
+ fromNow(relativeTo?: DateInput): string;
118
+
119
+ /** Get relative time to another date */
120
+ to(date: DateInput): string;
121
+
122
+ // ============================================
123
+ // Comparison Methods
124
+ // ============================================
125
+
126
+ /** Check if date is before another */
127
+ isBefore(other: DateInput, unit?: DateUnit): boolean;
128
+
129
+ /** Check if date is after another */
130
+ isAfter(other: DateInput, unit?: DateUnit): boolean;
131
+
132
+ /** Check if date is same as another */
133
+ isSame(other: DateInput, unit?: DateUnit): boolean;
134
+
135
+ /** Check if date is between two dates */
136
+ isBetween(start: DateInput, end: DateInput, unit?: DateUnit, inclusivity?: Inclusivity): boolean;
137
+
138
+ /** Get difference between dates */
139
+ diff(other: DateInput, unit?: DiffUnit, precise?: boolean): number;
140
+
141
+ // ============================================
142
+ // Query Methods
143
+ // ============================================
144
+
145
+ /** Check if date is valid */
146
+ isValid(): boolean;
147
+
148
+ /** Check if year is a leap year */
149
+ isLeapYear(): boolean;
150
+
151
+ /** Get number of days in month */
152
+ daysInMonth(): number;
153
+
154
+ // ============================================
155
+ // Clone
156
+ // ============================================
157
+
158
+ /** Create a copy of this date */
159
+ clone(): DommaDate;
160
+ }
161
+
162
+ export interface FormatTokens {
163
+ YYYY: string;
164
+ YY: string;
165
+ MM: string;
166
+ M: string;
167
+ DD: string;
168
+ D: string;
169
+ HH: string;
170
+ H: string;
171
+ hh: string;
172
+ h: string;
173
+ mm: string;
174
+ m: string;
175
+ ss: string;
176
+ s: string;
177
+ SSS: string;
178
+ A: string;
179
+ a: string;
180
+ ddd: string;
181
+ dddd: string;
182
+ MMM: string;
183
+ MMMM: string;
184
+ }
185
+
186
+ export interface Dates {
187
+ /** Create a DommaDate from a value */
188
+ (value?: DateInput): DommaDate;
189
+
190
+ /** Get current timestamp in milliseconds */
191
+ now(): number;
192
+
193
+ /** Parse a date string with optional format */
194
+ parse(dateString: string, format?: string): DommaDate;
195
+
196
+ /** Check if a value is a valid date */
197
+ isValid(value: DateInput): boolean;
198
+
199
+ /** Get the minimum date from a list */
200
+ min(...dates: DateInput[]): DommaDate;
201
+
202
+ /** Get the maximum date from a list */
203
+ max(...dates: DateInput[]): DommaDate;
204
+
205
+ /** Format tokens reference */
206
+ tokens: FormatTokens;
207
+ }
208
+
209
+ export declare const dates: Dates;