@net-advantage/jo-ui-logo 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.
- package/README.md +73 -73
- package/package.json +41 -41
package/README.md
CHANGED
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
# @net-advantage/jo-ui-logo
|
|
2
|
-
|
|
3
|
-
JourneyOf wordmark. `journey` uses Inter. The accent `of..` uses Caveat. A dotted curve sits under the word.
|
|
4
|
-
|
|
5
|
-
The logo follows a strict MVVM split. The model owns defaults and the font address. The view-model projects presentation values and requests the font faces. The view only renders the view-model.
|
|
6
|
-
|
|
7
|
-
## MVVM
|
|
8
|
-
|
|
9
|
-
```mermaid
|
|
10
|
-
flowchart LR
|
|
11
|
-
Props["LogoProps"] --> ViewModel["useLogoViewModel"]
|
|
12
|
-
Model["logo.model.ts<br/>defaults and font address"] --> ViewModel
|
|
13
|
-
ViewModel --> View["Logo.tsx"]
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
| Layer | File | Responsibility |
|
|
17
|
-
| --- | --- | --- |
|
|
18
|
-
| Contract | [logo.types.ts](src/logo.types.ts) | Props and view-model |
|
|
19
|
-
| Model | [logo.model.ts](src/logo.model.ts) | Default colors, curve size, class name, and font address |
|
|
20
|
-
| View-model | [logo.view-model.ts](src/logo.view-model.ts) | Project colors, curve size, width, and font families; request font faces |
|
|
21
|
-
| View | [Logo.tsx](src/Logo.tsx) | Render the wordmark and dotted curve |
|
|
22
|
-
|
|
23
|
-
## Models
|
|
24
|
-
|
|
25
|
-
```mermaid
|
|
26
|
-
flowchart TD
|
|
27
|
-
Defaults["LOGO_DEFAULTS"] --> ViewModel["LogoViewModel"]
|
|
28
|
-
Props["LogoProps"] --> ViewModel
|
|
29
|
-
Font["LOGO_FONT_HREF"] --> Link["font stylesheet link"]
|
|
30
|
-
ViewModel --> Word["journey"]
|
|
31
|
-
ViewModel --> Accent["of.."]
|
|
32
|
-
ViewModel --> Curve["dotted curve"]
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
- `primaryColor` colors `journey` and the curve's end dot. It defaults to `#14224a`.
|
|
36
|
-
- `accentColor` colors `of..` and the curve. It defaults to `#6495ed`.
|
|
37
|
-
- `curveWidth` defaults to `80`. `curveHeight` defaults to `10`.
|
|
38
|
-
- The font request lives in the view-model. The model only names the address.
|
|
39
|
-
|
|
40
|
-
## Structure
|
|
41
|
-
|
|
42
|
-
- src: runtime component, model, view-model, and types.
|
|
43
|
-
|
|
44
|
-
## Fonts
|
|
45
|
-
|
|
46
|
-
The module requests Inter and Caveat from Google Fonts as soon as it loads. It adds one `preconnect` to `fonts.gstatic.com` and one stylesheet link marked `data-jo-ui-logo-fonts`. A second import does not add another link.
|
|
47
|
-
|
|
48
|
-
Do not request these faces with a CSS `@import` inside `logo.css`. A component stylesheet is often injected after other rules, and the browser then ignores the import. That is why the accent face could look wrong until another screen loaded the font first.
|
|
49
|
-
|
|
50
|
-
The first paint may still use the fallback face until the font files arrive. `display=swap` replaces it with Caveat when the face is ready.
|
|
51
|
-
|
|
52
|
-
## Props
|
|
53
|
-
|
|
54
|
-
| Prop | Default | Use |
|
|
55
|
-
| --- | --- | --- |
|
|
56
|
-
| `primaryColor` | `#14224a` | Color of `journey` and the curve's end dot. |
|
|
57
|
-
| `accentColor` | `#6495ed` | Color of `of..` and the curve. |
|
|
58
|
-
| `width` | none | Width of the wordmark root. |
|
|
59
|
-
| `curveWidth` | `80` | Width of the dotted curve. |
|
|
60
|
-
| `curveHeight` | `10` | Height of the dotted curve. |
|
|
61
|
-
| `className` | none | Extra class on the root. |
|
|
62
|
-
| `rootProps` | none | Other attributes for the root. `className` stays on the component prop. |
|
|
63
|
-
|
|
64
|
-
```tsx
|
|
65
|
-
<Logo primaryColor="#dce7ff" accentColor="#8fb3ff" />
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
## Publish footprint
|
|
69
|
-
|
|
70
|
-
This package publishes only:
|
|
71
|
-
|
|
72
|
-
- dist
|
|
73
|
-
- README.md
|
|
1
|
+
# @net-advantage/jo-ui-logo
|
|
2
|
+
|
|
3
|
+
JourneyOf wordmark. `journey` uses Inter. The accent `of..` uses Caveat. A dotted curve sits under the word.
|
|
4
|
+
|
|
5
|
+
The logo follows a strict MVVM split. The model owns defaults and the font address. The view-model projects presentation values and requests the font faces. The view only renders the view-model.
|
|
6
|
+
|
|
7
|
+
## MVVM
|
|
8
|
+
|
|
9
|
+
```mermaid
|
|
10
|
+
flowchart LR
|
|
11
|
+
Props["LogoProps"] --> ViewModel["useLogoViewModel"]
|
|
12
|
+
Model["logo.model.ts<br/>defaults and font address"] --> ViewModel
|
|
13
|
+
ViewModel --> View["Logo.tsx"]
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
| Layer | File | Responsibility |
|
|
17
|
+
| --- | --- | --- |
|
|
18
|
+
| Contract | [logo.types.ts](src/logo.types.ts) | Props and view-model |
|
|
19
|
+
| Model | [logo.model.ts](src/logo.model.ts) | Default colors, curve size, class name, and font address |
|
|
20
|
+
| View-model | [logo.view-model.ts](src/logo.view-model.ts) | Project colors, curve size, width, and font families; request font faces |
|
|
21
|
+
| View | [Logo.tsx](src/Logo.tsx) | Render the wordmark and dotted curve |
|
|
22
|
+
|
|
23
|
+
## Models
|
|
24
|
+
|
|
25
|
+
```mermaid
|
|
26
|
+
flowchart TD
|
|
27
|
+
Defaults["LOGO_DEFAULTS"] --> ViewModel["LogoViewModel"]
|
|
28
|
+
Props["LogoProps"] --> ViewModel
|
|
29
|
+
Font["LOGO_FONT_HREF"] --> Link["font stylesheet link"]
|
|
30
|
+
ViewModel --> Word["journey"]
|
|
31
|
+
ViewModel --> Accent["of.."]
|
|
32
|
+
ViewModel --> Curve["dotted curve"]
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
- `primaryColor` colors `journey` and the curve's end dot. It defaults to `#14224a`.
|
|
36
|
+
- `accentColor` colors `of..` and the curve. It defaults to `#6495ed`.
|
|
37
|
+
- `curveWidth` defaults to `80`. `curveHeight` defaults to `10`.
|
|
38
|
+
- The font request lives in the view-model. The model only names the address.
|
|
39
|
+
|
|
40
|
+
## Structure
|
|
41
|
+
|
|
42
|
+
- src: runtime component, model, view-model, and types.
|
|
43
|
+
|
|
44
|
+
## Fonts
|
|
45
|
+
|
|
46
|
+
The module requests Inter and Caveat from Google Fonts as soon as it loads. It adds one `preconnect` to `fonts.gstatic.com` and one stylesheet link marked `data-jo-ui-logo-fonts`. A second import does not add another link.
|
|
47
|
+
|
|
48
|
+
Do not request these faces with a CSS `@import` inside `logo.css`. A component stylesheet is often injected after other rules, and the browser then ignores the import. That is why the accent face could look wrong until another screen loaded the font first.
|
|
49
|
+
|
|
50
|
+
The first paint may still use the fallback face until the font files arrive. `display=swap` replaces it with Caveat when the face is ready.
|
|
51
|
+
|
|
52
|
+
## Props
|
|
53
|
+
|
|
54
|
+
| Prop | Default | Use |
|
|
55
|
+
| --- | --- | --- |
|
|
56
|
+
| `primaryColor` | `#14224a` | Color of `journey` and the curve's end dot. |
|
|
57
|
+
| `accentColor` | `#6495ed` | Color of `of..` and the curve. |
|
|
58
|
+
| `width` | none | Width of the wordmark root. |
|
|
59
|
+
| `curveWidth` | `80` | Width of the dotted curve. |
|
|
60
|
+
| `curveHeight` | `10` | Height of the dotted curve. |
|
|
61
|
+
| `className` | none | Extra class on the root. |
|
|
62
|
+
| `rootProps` | none | Other attributes for the root. `className` stays on the component prop. |
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
<Logo primaryColor="#dce7ff" accentColor="#8fb3ff" />
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Publish footprint
|
|
69
|
+
|
|
70
|
+
This package publishes only:
|
|
71
|
+
|
|
72
|
+
- dist
|
|
73
|
+
- README.md
|
package/package.json
CHANGED
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@net-advantage/jo-ui-logo",
|
|
3
|
-
"version": "
|
|
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
|
-
"peerDependencies": {
|
|
24
|
-
"react": "^19.0.0",
|
|
25
|
-
"react-dom": "^19.0.0"
|
|
26
|
-
},
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@net-advantage/jo-ui-logo",
|
|
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
|
+
"peerDependencies": {
|
|
24
|
+
"react": "^19.0.0",
|
|
25
|
+
"react-dom": "^19.0.0"
|
|
26
|
+
},
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"@types/react": "^19.2.18",
|
|
29
|
+
"@types/react-dom": "^19.2.7",
|
|
30
|
+
"@vitejs/plugin-react": "^6.1.1",
|
|
31
|
+
"typescript": "~6.0.2",
|
|
32
|
+
"vite": "^8.3.0",
|
|
33
|
+
"vitest": "latest"
|
|
34
|
+
},
|
|
35
|
+
"scripts": {
|
|
36
|
+
"build": "pnpm run build:styles && pnpm run build:js && pnpm run build:types",
|
|
37
|
+
"build:styles": "pnpm exec tailwindcss -c ../../tailwind.controls.config.cjs -i ./src/logo.tailwind.css -o ./src/logo.css --minify",
|
|
38
|
+
"build:types": "tsc -p tsconfig.build.json",
|
|
39
|
+
"build:js": "vite build",
|
|
40
|
+
"test": "vitest run"
|
|
41
|
+
}
|
|
42
42
|
}
|