@mp-consulting/homebridge-ui-kit 1.0.0 → 1.0.1
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 +99 -6
- package/dist/kit.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,17 +11,106 @@ Provides shared CSS tokens, Bootstrap 5 overrides, and vanilla JS UI components
|
|
|
11
11
|
| `dist/kit.css` | CSS tokens, Bootstrap overrides, and shared component styles |
|
|
12
12
|
| `dist/kit.js` | Vanilla JS helpers exposed as `window.MpKit` |
|
|
13
13
|
|
|
14
|
-
##
|
|
14
|
+
## Integration
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
### 1. Install as a dev dependency
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install --save-dev @mp-consulting/homebridge-ui-kit
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### 2. Add the copy script to `package.json`
|
|
23
|
+
|
|
24
|
+
```json
|
|
25
|
+
{
|
|
26
|
+
"scripts": {
|
|
27
|
+
"copy:ui-kit": "cp node_modules/@mp-consulting/homebridge-ui-kit/dist/kit.css homebridge-ui/public/ && cp node_modules/@mp-consulting/homebridge-ui-kit/dist/kit.js homebridge-ui/public/",
|
|
28
|
+
"build": "npm run copy:ui-kit && ..."
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
> **Note:** Copying to the `homebridge-ui/public/` root is the simplest approach and is recommended.
|
|
34
|
+
> `homebridge-config-ui-x` does support subdirectories (it resolves `dirname` dynamically per request), but keeping assets at the root avoids extra path nesting in HTML references.
|
|
35
|
+
|
|
36
|
+
### 3. Reference in `index.html`
|
|
37
|
+
|
|
38
|
+
The plugin's `homebridge-ui/public/index.html` must be a full HTML document. Load Bootstrap 5.3 from CDN, then `kit.css` and your styles in `<head>`, and Bootstrap JS + `kit.js` + your app script at the end of `<body>`:
|
|
17
39
|
|
|
18
40
|
```html
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<
|
|
41
|
+
<!DOCTYPE html>
|
|
42
|
+
<html lang="en">
|
|
43
|
+
<head>
|
|
44
|
+
<meta charset="UTF-8">
|
|
45
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
46
|
+
<script>
|
|
47
|
+
(function() {
|
|
48
|
+
try {
|
|
49
|
+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
50
|
+
document.documentElement.dataset.bsTheme = 'dark';
|
|
51
|
+
}
|
|
52
|
+
} catch(e) {}
|
|
53
|
+
})();
|
|
54
|
+
</script>
|
|
55
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
|
56
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
57
|
+
<link rel="stylesheet" href="kit.css">
|
|
58
|
+
<link rel="stylesheet" href="styles.css">
|
|
59
|
+
</head>
|
|
60
|
+
<body>
|
|
61
|
+
<!-- your UI here -->
|
|
62
|
+
|
|
63
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
64
|
+
<script src="kit.js"></script>
|
|
65
|
+
<script src="app.js"></script>
|
|
66
|
+
</body>
|
|
67
|
+
</html>
|
|
22
68
|
```
|
|
23
69
|
|
|
24
|
-
|
|
70
|
+
The early inline script applies `data-bs-theme="dark"` from the system preference before any CSS loads, preventing a flash of wrong theme. In your app script, also apply the Homebridge user's saved theme setting:
|
|
71
|
+
|
|
72
|
+
```js
|
|
73
|
+
try {
|
|
74
|
+
const settings = await homebridge.getUserSettings?.();
|
|
75
|
+
if (settings?.theme === 'dark') {
|
|
76
|
+
document.documentElement.dataset.bsTheme = 'dark';
|
|
77
|
+
} else if (settings?.theme === 'light') {
|
|
78
|
+
document.documentElement.dataset.bsTheme = 'light';
|
|
79
|
+
}
|
|
80
|
+
} catch (e) {}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### 4. Update `.gitignore`
|
|
84
|
+
|
|
85
|
+
```gitignore
|
|
86
|
+
# Generated UI kit assets (copied from node_modules by copy:ui-kit script)
|
|
87
|
+
homebridge-ui/public/kit.css
|
|
88
|
+
homebridge-ui/public/kit.js
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### 5. Update `eslint.config.js`
|
|
92
|
+
|
|
93
|
+
Add `kit.js` to the ignore list (it is a minified third-party bundle) and expose `MpKit` as a browser global:
|
|
94
|
+
|
|
95
|
+
```js
|
|
96
|
+
export default tseslint.config(
|
|
97
|
+
{
|
|
98
|
+
ignores: ['dist/**', 'node_modules/**', 'homebridge-ui/public/kit.js'],
|
|
99
|
+
},
|
|
100
|
+
// ...
|
|
101
|
+
{
|
|
102
|
+
files: ['homebridge-ui/public/**/*.js'],
|
|
103
|
+
languageOptions: {
|
|
104
|
+
globals: {
|
|
105
|
+
// ... other globals
|
|
106
|
+
MpKit: 'readonly',
|
|
107
|
+
},
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
);
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## MpKit API
|
|
25
114
|
|
|
26
115
|
```js
|
|
27
116
|
// Status badges
|
|
@@ -40,6 +129,10 @@ MpKit.Loading.render('Loading...')
|
|
|
40
129
|
MpKit.View.show('viewId')
|
|
41
130
|
```
|
|
42
131
|
|
|
132
|
+
## Dark Mode
|
|
133
|
+
|
|
134
|
+
Dark mode is handled entirely by Bootstrap's `data-bs-theme="dark"` attribute on `<html>`. Do **not** use `@media (prefers-color-scheme: dark)` blocks, `.dark-mode` CSS classes, or custom CSS variable overrides — Bootstrap handles all of this automatically. Use Bootstrap CSS variables (`var(--bs-body-bg)`, `var(--bs-primary)`, etc.) in your custom CSS instead of hardcoded hex values.
|
|
135
|
+
|
|
43
136
|
## Development
|
|
44
137
|
|
|
45
138
|
```bash
|
package/dist/kit.css
CHANGED