@igamingcareer/igaming-components 1.0.53 → 1.0.54
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 +96 -13
- package/dist/index.js +1572 -1572
- package/dist/index.mjs +13258 -13078
- package/package.json +10 -2
package/Readme.md
CHANGED
|
@@ -1,23 +1,106 @@
|
|
|
1
|
-
#
|
|
1
|
+
# iGaming Components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A reusable React component library for iGamingCareer that can be consumed from React apps or embedded in plain HTML via data attributes. The project is built with Vite and ships Tailwind-powered styles.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Local development
|
|
6
|
+
|
|
7
|
+
1. Install dependencies (Node 16+ is recommended):
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
2. Start the Vite dev server:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm run dev
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
3. Build the distributable assets:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm run build
|
|
23
|
+
# or generate the library bundle and type declarations
|
|
24
|
+
npm run build:lib
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Storybook
|
|
28
|
+
|
|
29
|
+
Storybook is configured with the Vite builder to explore components in isolation.
|
|
30
|
+
|
|
31
|
+
- Start Storybook locally:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm run storybook
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
- Generate the static Storybook site:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npm run build-storybook
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Using the library in React
|
|
44
|
+
|
|
45
|
+
Install the package from npm (or link the local build), then import the components and shared styles:
|
|
6
46
|
|
|
7
47
|
```bash
|
|
8
|
-
|
|
9
|
-
|
|
48
|
+
npm install @igamingcareer/igaming-components
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import {
|
|
53
|
+
Button,
|
|
54
|
+
JobListings,
|
|
55
|
+
ConsentBanner,
|
|
56
|
+
HomePage,
|
|
57
|
+
} from "@igamingcareer/igaming-components";
|
|
58
|
+
import "@igamingcareer/igaming-components/styles/globals.css";
|
|
59
|
+
|
|
60
|
+
export function Example() {
|
|
61
|
+
return (
|
|
62
|
+
<div>
|
|
63
|
+
<Button dataName="Apply now" />
|
|
64
|
+
<JobListings />
|
|
65
|
+
<ConsentBanner />
|
|
66
|
+
<HomePage />
|
|
67
|
+
</div>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Embedding components in plain HTML
|
|
73
|
+
|
|
74
|
+
The library can hydrate elements that carry specific classes or data attributes. Build the project, host the `dist/` output (or publish it to a CDN), and reference the emitted CSS/JS assets from your page.
|
|
75
|
+
|
|
76
|
+
1. Run `npm run build` and copy the `dist/` assets to your static host.
|
|
77
|
+
2. Add the generated stylesheet and script tags from `dist/index.html` (the file names include hashes). Example:
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<link rel="stylesheet" href="/assets/index-XXXX.css" />
|
|
81
|
+
<script type="module" src="/assets/index-XXXX.js"></script>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
3. Mark up the page with the hooks expected by the components (see `src/main.tsx` for the full list). For example:
|
|
85
|
+
|
|
86
|
+
```html
|
|
87
|
+
<div id="app"></div>
|
|
10
88
|
|
|
11
|
-
|
|
89
|
+
<div class="button-component" data-name="Join now"></div>
|
|
12
90
|
|
|
13
|
-
|
|
91
|
+
<div class="modal-component" id="offer-modal">
|
|
92
|
+
<div class="title">Limited offer</div>
|
|
93
|
+
<div class="description">Save 20% when you enroll today.</div>
|
|
94
|
+
<div class="footer">Terms and conditions apply.</div>
|
|
95
|
+
</div>
|
|
96
|
+
```
|
|
14
97
|
|
|
15
|
-
|
|
16
|
-
<script src="/home/static/frontend/assets/main-D298mwJ-.js"></script>
|
|
17
|
-
```
|
|
98
|
+
When the bundle runs it will automatically hydrate these elements:
|
|
18
99
|
|
|
19
|
-
|
|
100
|
+
- `#app` renders the root `<App />` component.
|
|
101
|
+
- `.button-component` renders the `<Button />` component using the `data-name` attribute as the label.
|
|
102
|
+
- `.modal-component` renders a `<CustomModal />` instance, reading nested `.title`, `.description`, and `.footer` content.
|
|
20
103
|
|
|
21
|
-
|
|
104
|
+
4. Use additional class hooks such as `.group-prices-component`, `.hero-component`, `.courses-component`, `.chatbot-component`, `.faq-component`, `.videos-component`, `.testimonials-component`, and `.sliding-summary-component` to hydrate the corresponding widgets. Pass data through `data-*` attributes as illustrated in `src/main.tsx`.
|
|
22
105
|
|
|
23
|
-
|
|
106
|
+
This approach allows teams that are not using React to embed the library’s UI on any HTML page while still benefiting from the React components under the hood.
|