@igamingcareer/igaming-components 1.0.122 → 1.0.124
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 +55 -0
- package/dist/index.js +1516 -1516
- package/dist/index.mjs +16373 -14687
- package/package.json +1 -1
package/Readme.md
CHANGED
|
@@ -24,6 +24,61 @@ A reusable React component library for iGamingCareer that can be consumed from R
|
|
|
24
24
|
npm run build:lib
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
+
|
|
28
|
+
## Component preview hub in `index.html`
|
|
29
|
+
|
|
30
|
+
To avoid commenting/uncommenting mount nodes, `index.html` now includes a preview selector (`#component-selector`) that shows one preview component at a time.
|
|
31
|
+
|
|
32
|
+
### How it works
|
|
33
|
+
|
|
34
|
+
- The selector writes the selected component into the URL query param: `?component=<mount-id>`.
|
|
35
|
+
- `index.html` keeps all preview mount nodes in the DOM and toggles visibility so only the selected one is visible.
|
|
36
|
+
- `src/main.tsx` reads the same query param and only mounts the selected preview component with `shouldRenderPreviewComponent(...)`.
|
|
37
|
+
|
|
38
|
+
### Add a new preview component
|
|
39
|
+
|
|
40
|
+
When you create a new preview (example: `dashboard-component`), you only need to add the mount node.
|
|
41
|
+
`main.tsx` now auto-registers previews from `data-preview-item`.
|
|
42
|
+
|
|
43
|
+
1. **Add the mount node in `index.html`**
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<div id="dashboard-component" data-preview-item="true" data-preview-label="Dashboard component"></div>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
2. **(Optional) Provide a custom label**
|
|
50
|
+
|
|
51
|
+
- If `data-preview-label` is present, that text is used in the selector and generated nav link.
|
|
52
|
+
- If omitted, the label is generated from the id (`dashboard-component` → `Dashboard Component`).
|
|
53
|
+
|
|
54
|
+
3. **Done**
|
|
55
|
+
|
|
56
|
+
- The selector options are generated automatically.
|
|
57
|
+
- Preview links are auto-generated into `.navbar-component[data-preview-links="true"]` with:
|
|
58
|
+
- `class="navbar-link"`
|
|
59
|
+
- `data-text="<label>"`
|
|
60
|
+
- `data-url="/<component-id>"`
|
|
61
|
+
|
|
62
|
+
No manual option editing is required anymore.
|
|
63
|
+
|
|
64
|
+
### Useful URLs
|
|
65
|
+
|
|
66
|
+
- `http://localhost:5173/?component=dashboard-component`
|
|
67
|
+
- `http://localhost:5173/?component=onboarding-demo`
|
|
68
|
+
|
|
69
|
+
This lets you deep-link directly to a specific preview while keeping all mount nodes available in one page.
|
|
70
|
+
|
|
71
|
+
### In-page preview logs (no DevTools required)
|
|
72
|
+
|
|
73
|
+
- If the viewport shrinks below desktop, the logger is hidden automatically.
|
|
74
|
+
The preview page includes a **Show logs** button (bottom-right).
|
|
75
|
+
|
|
76
|
+
- Click **Show logs** to open an in-page console panel.
|
|
77
|
+
- The panel mirrors `console.log`, `console.info`, `console.warn`, and `console.error` events.
|
|
78
|
+
- Click **Hide logs** to collapse it, or **Clear** to reset entries.
|
|
79
|
+
|
|
80
|
+
This is useful for QA/demo sessions where you want to monitor runtime events without opening browser DevTools.
|
|
81
|
+
|
|
27
82
|
## Storybook
|
|
28
83
|
|
|
29
84
|
Storybook is configured with the Vite builder to explore components in isolation.
|