@net-advantage/jo-ui-logo 0.1.0 → 1.1.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.
Files changed (3) hide show
  1. package/README.md +73 -73
  2. package/dist/index.js +1 -0
  3. package/package.json +42 -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/dist/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ import "./jo-ui-logo.css";
1
2
  import { useEffect as e, useMemo as t } from "react";
2
3
  //#region \0rolldown/runtime.js
3
4
  var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), r = "https://fonts.googleapis.com/css2?family=Inter:wght@800&family=Caveat:wght@600&display=swap", i = {
package/package.json CHANGED
@@ -1,42 +1,43 @@
1
- {
2
- "name": "@net-advantage/jo-ui-logo",
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
- "peerDependencies": {
24
- "react": "^19.0.0",
25
- "react-dom": "^19.0.0"
26
- },
27
- "scripts": {
28
- "build": "pnpm run build:styles && pnpm run build:js && pnpm run build:types",
29
- "build:styles": "pnpm exec tailwindcss -c ../../tailwind.controls.config.cjs -i ./src/logo.tailwind.css -o ./src/logo.css --minify",
30
- "build:types": "tsc -p tsconfig.build.json",
31
- "build:js": "vite build",
32
- "test": "vitest run"
33
- },
34
- "devDependencies": {
35
- "@types/react": "^19.2.18",
36
- "@types/react-dom": "^19.2.7",
37
- "@vitejs/plugin-react": "^6.1.1",
38
- "typescript": "~6.0.2",
39
- "vite": "^8.3.0",
40
- "vitest": "latest"
41
- }
1
+ {
2
+ "name": "@net-advantage/jo-ui-logo",
3
+ "version": "1.1.5",
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
+ "./style.css": "./dist/jo-ui-logo.css"
16
+ },
17
+ "files": [
18
+ "dist",
19
+ "README.md"
20
+ ],
21
+ "sideEffects": [
22
+ "**/*.css"
23
+ ],
24
+ "peerDependencies": {
25
+ "react": "^19.0.0",
26
+ "react-dom": "^19.0.0"
27
+ },
28
+ "devDependencies": {
29
+ "@types/react": "^19.2.18",
30
+ "@types/react-dom": "^19.2.7",
31
+ "@vitejs/plugin-react": "^6.1.1",
32
+ "typescript": "~6.0.2",
33
+ "vite": "^8.3.0",
34
+ "vitest": "latest"
35
+ },
36
+ "scripts": {
37
+ "build": "pnpm run build:styles && pnpm run build:js && pnpm run build:types",
38
+ "build:styles": "pnpm exec tailwindcss -c ../../tailwind.controls.config.cjs -i ./src/logo.tailwind.css -o ./src/logo.css --minify",
39
+ "build:types": "tsc -p tsconfig.build.json",
40
+ "build:js": "vite build",
41
+ "test": "vitest run"
42
+ }
42
43
  }