@net-advantage/jo-ui-input 0.1.0 → 1.1.4

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 (2) hide show
  1. package/README.md +83 -83
  2. package/package.json +45 -45
package/README.md CHANGED
@@ -1,83 +1,83 @@
1
- # @net-advantage/jo-ui-input
2
-
3
- Publishable input primitives package.
4
-
5
- The input follows a strict MVVM split. The model owns kind behavior, parsing, and formatting. The view-model owns editing state. The view renders the view-model. Semantic wrappers only set `kind` and numeric defaults.
6
-
7
- ## MVVM
8
-
9
- ```mermaid
10
- flowchart LR
11
- Props["InputProps"] --> ViewModel["useInputViewModel"]
12
- Model["input.model.ts<br/>kind, parse, format"] --> ViewModel
13
- ViewModel --> View["Input.tsx"]
14
- Metadata["jo-ui-field-metadata"] --> View
15
- View -->|"focus, change, blur"| ViewModel
16
- ViewModel -->|"onValueChange"| Host["Host application"]
17
- ViewModel -->|"onParsedValueChange"| Host
18
- Wrappers["EmailInput and numeric wrappers"] --> View
19
- ```
20
-
21
- | Layer | File | Responsibility |
22
- | --- | --- | --- |
23
- | Contract | [input.types.ts](src/input.types.ts) | Kind, parsed value, props, and view-model |
24
- | Model | [input.model.ts](src/input.model.ts) | Resolve kind behavior, parse text, and format on blur |
25
- | View-model | [input.view-model.ts](src/input.view-model.ts) | Own the draft while editing and map messages |
26
- | View | [Input.tsx](src/Input.tsx) | Render the field from the view-model |
27
- | Shared metadata | `@net-advantage/jo-ui-field-metadata` | Lay out the label, helper text, required marker, and nested input |
28
- | Wrappers | [semantic-inputs.tsx](src/semantic-inputs.tsx) | Set `kind` for email, integer, decimal, percentage, and currency |
29
-
30
- ## Models
31
-
32
- ```mermaid
33
- flowchart TD
34
- Kind["InputKind"] --> Behavior["KindBehavior"]
35
- Kind --> Parsed["ParsedInputValue"]
36
- Behavior --> Presentation["NumericPresentation"]
37
- Props["InputProps"] --> ViewModel["InputViewModel"]
38
- Parsed --> ViewModel
39
- Presentation --> ViewModel
40
- ```
41
-
42
- - `InputKind` is `text`, `email`, `password`, `search`, `tel`, `url`, `integer`, `decimal`, `percentage`, or `currency`.
43
- - `ParsedInputValue` is a string, a number, or `null`.
44
- - A controlled value is shown until the field is focused. While editing, the view-model keeps a draft. Blur formats that draft and leaves edit mode.
45
- - `parse` and `format` override the kind parser and formatter. Omit them and the model uses the kind defaults.
46
- - `labelPlacement` accepts `top` or `left`; `descriptionPlacement` accepts `below-label` or `below-control`.
47
- - Validation errors remain alerts below the input while ordinary helper text is rendered by `FieldMetadata`.
48
-
49
- ## Semantic input strategy
50
-
51
- Use one base control (`InputField`) and configure behavior with `kind`:
52
-
53
- - `text`, `email`, `password`, `search`, `tel`, `url`
54
- - `integer`, `decimal`, `percentage`, `currency`
55
-
56
- Helpful props for semantic kinds:
57
-
58
- - `onParsedValueChange`: emits parsed values (`number`, `string`, or `null`)
59
- - `parse`: custom parser override
60
- - `format`: custom formatter override
61
- - `locale`, `currency`, `minimumFractionDigits`, `maximumFractionDigits`
62
-
63
- Convenience wrappers are also exported:
64
-
65
- - `EmailInput`
66
- - `IntegerInput`
67
- - `DecimalInput`
68
- - `PercentageInput`
69
- - `CurrencyInput`
70
-
71
- ## Structure
72
-
73
- - src: runtime component, model, view-model, and types.
74
- - stories: Storybook stories for documentation and visual testing.
75
-
76
- ## Publish footprint
77
-
78
- This package publishes only:
79
-
80
- - dist
81
- - README.md
82
-
83
- Stories and tests are excluded from the published artifact by design.
1
+ # @net-advantage/jo-ui-input
2
+
3
+ Publishable input primitives package.
4
+
5
+ The input follows a strict MVVM split. The model owns kind behavior, parsing, and formatting. The view-model owns editing state. The view renders the view-model. Semantic wrappers only set `kind` and numeric defaults.
6
+
7
+ ## MVVM
8
+
9
+ ```mermaid
10
+ flowchart LR
11
+ Props["InputProps"] --> ViewModel["useInputViewModel"]
12
+ Model["input.model.ts<br/>kind, parse, format"] --> ViewModel
13
+ ViewModel --> View["Input.tsx"]
14
+ Metadata["jo-ui-field-metadata"] --> View
15
+ View -->|"focus, change, blur"| ViewModel
16
+ ViewModel -->|"onValueChange"| Host["Host application"]
17
+ ViewModel -->|"onParsedValueChange"| Host
18
+ Wrappers["EmailInput and numeric wrappers"] --> View
19
+ ```
20
+
21
+ | Layer | File | Responsibility |
22
+ | --- | --- | --- |
23
+ | Contract | [input.types.ts](src/input.types.ts) | Kind, parsed value, props, and view-model |
24
+ | Model | [input.model.ts](src/input.model.ts) | Resolve kind behavior, parse text, and format on blur |
25
+ | View-model | [input.view-model.ts](src/input.view-model.ts) | Own the draft while editing and map messages |
26
+ | View | [Input.tsx](src/Input.tsx) | Render the field from the view-model |
27
+ | Shared metadata | `@net-advantage/jo-ui-field-metadata` | Lay out the label, helper text, required marker, and nested input |
28
+ | Wrappers | [semantic-inputs.tsx](src/semantic-inputs.tsx) | Set `kind` for email, integer, decimal, percentage, and currency |
29
+
30
+ ## Models
31
+
32
+ ```mermaid
33
+ flowchart TD
34
+ Kind["InputKind"] --> Behavior["KindBehavior"]
35
+ Kind --> Parsed["ParsedInputValue"]
36
+ Behavior --> Presentation["NumericPresentation"]
37
+ Props["InputProps"] --> ViewModel["InputViewModel"]
38
+ Parsed --> ViewModel
39
+ Presentation --> ViewModel
40
+ ```
41
+
42
+ - `InputKind` is `text`, `email`, `password`, `search`, `tel`, `url`, `integer`, `decimal`, `percentage`, or `currency`.
43
+ - `ParsedInputValue` is a string, a number, or `null`.
44
+ - A controlled value is shown until the field is focused. While editing, the view-model keeps a draft. Blur formats that draft and leaves edit mode.
45
+ - `parse` and `format` override the kind parser and formatter. Omit them and the model uses the kind defaults.
46
+ - `labelPlacement` accepts `top` or `left`; `descriptionPlacement` accepts `below-label` or `below-control`.
47
+ - Validation errors remain alerts below the input while ordinary helper text is rendered by `FieldMetadata`.
48
+
49
+ ## Semantic input strategy
50
+
51
+ Use one base control (`InputField`) and configure behavior with `kind`:
52
+
53
+ - `text`, `email`, `password`, `search`, `tel`, `url`
54
+ - `integer`, `decimal`, `percentage`, `currency`
55
+
56
+ Helpful props for semantic kinds:
57
+
58
+ - `onParsedValueChange`: emits parsed values (`number`, `string`, or `null`)
59
+ - `parse`: custom parser override
60
+ - `format`: custom formatter override
61
+ - `locale`, `currency`, `minimumFractionDigits`, `maximumFractionDigits`
62
+
63
+ Convenience wrappers are also exported:
64
+
65
+ - `EmailInput`
66
+ - `IntegerInput`
67
+ - `DecimalInput`
68
+ - `PercentageInput`
69
+ - `CurrencyInput`
70
+
71
+ ## Structure
72
+
73
+ - src: runtime component, model, view-model, and types.
74
+ - stories: Storybook stories for documentation and visual testing.
75
+
76
+ ## Publish footprint
77
+
78
+ This package publishes only:
79
+
80
+ - dist
81
+ - README.md
82
+
83
+ Stories and tests are excluded from the published artifact by design.
package/package.json CHANGED
@@ -1,45 +1,45 @@
1
- {
2
- "name": "@net-advantage/jo-ui-input",
3
- "version": "0.1.0",
4
- "private": false,
5
- "type": "module",
6
- "main": "./dist/index.cjs",
7
- "module": "./dist/index.js",
8
- "types": "./dist/index.d.ts",
9
- "exports": {
10
- ".": {
11
- "types": "./dist/index.d.ts",
12
- "import": "./dist/index.js",
13
- "require": "./dist/index.cjs"
14
- }
15
- },
16
- "files": [
17
- "dist",
18
- "README.md"
19
- ],
20
- "sideEffects": [
21
- "**/*.css"
22
- ],
23
- "dependencies": {
24
- "@net-advantage/jo-ui-field-metadata": "workspace:*"
25
- },
26
- "peerDependencies": {
27
- "react": "^19.0.0",
28
- "react-dom": "^19.0.0"
29
- },
30
- "scripts": {
31
- "build": "pnpm run build:styles && pnpm run build:js && pnpm run build:types",
32
- "build:styles": "pnpm exec tailwindcss -c ../../tailwind.controls.config.cjs -i ./src/input.tailwind.css -o ./src/input.css --minify",
33
- "build:types": "tsc -p tsconfig.build.json",
34
- "build:js": "vite build",
35
- "test": "vitest run"
36
- },
37
- "devDependencies": {
38
- "@types/react": "^19.2.18",
39
- "@types/react-dom": "^19.2.7",
40
- "typescript": "~6.0.2",
41
- "vite": "^8.3.0",
42
- "vitest": "latest",
43
- "@vitejs/plugin-react": "^6.1.1"
44
- }
45
- }
1
+ {
2
+ "name": "@net-advantage/jo-ui-input",
3
+ "version": "1.1.4",
4
+ "private": false,
5
+ "type": "module",
6
+ "main": "./dist/index.cjs",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "import": "./dist/index.js",
13
+ "require": "./dist/index.cjs"
14
+ }
15
+ },
16
+ "files": [
17
+ "dist",
18
+ "README.md"
19
+ ],
20
+ "sideEffects": [
21
+ "**/*.css"
22
+ ],
23
+ "dependencies": {
24
+ "@net-advantage/jo-ui-field-metadata": "1.1.4"
25
+ },
26
+ "peerDependencies": {
27
+ "react": "^19.0.0",
28
+ "react-dom": "^19.0.0"
29
+ },
30
+ "devDependencies": {
31
+ "@types/react": "^19.2.18",
32
+ "@types/react-dom": "^19.2.7",
33
+ "typescript": "~6.0.2",
34
+ "vite": "^8.3.0",
35
+ "vitest": "latest",
36
+ "@vitejs/plugin-react": "^6.1.1"
37
+ },
38
+ "scripts": {
39
+ "build": "pnpm run build:styles && pnpm run build:js && pnpm run build:types",
40
+ "build:styles": "pnpm exec tailwindcss -c ../../tailwind.controls.config.cjs -i ./src/input.tailwind.css -o ./src/input.css --minify",
41
+ "build:types": "tsc -p tsconfig.build.json",
42
+ "build:js": "vite build",
43
+ "test": "vitest run"
44
+ }
45
+ }