@isi-ui7/corporate-themes 0.1.1 → 0.1.2
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 +146 -0
- package/dist/index.js +10 -10
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
# @isi-ui7/corporate-themes
|
|
2
|
+
|
|
3
|
+
Sistem tema korporat berbasis Carbon Design System — branding per institusi bank dengan token warna, logo, dan variant Carbon (white/g10/g90/g100).
|
|
4
|
+
|
|
5
|
+
## Fitur
|
|
6
|
+
|
|
7
|
+
- `ThemeProvider`: inject tema korporat ke seluruh aplikasi
|
|
8
|
+
- `CorporateTheme`: apply CSS class tema ke subtree tertentu
|
|
9
|
+
- `GlobalCorporateTheme`: inject CSS variables global ke `<html>`
|
|
10
|
+
- `ThemeSwitcher`: komponen UI untuk ganti variant (white/g10/g90/g100)
|
|
11
|
+
- `useTheme()`: akses tema aktif dan variant dari komponen manapun
|
|
12
|
+
- `useThemeTokens()`: akses token warna aktif (brandColors, buttonPrimary, dll.)
|
|
13
|
+
- `useBrandColors()`, `useThemeVariant()`, `useCorporateFeatures()`: hooks spesifik
|
|
14
|
+
- Multiple tema tersedia: `bca-syariah`, `bni-syariah`, dst. (via `corporateThemes`)
|
|
15
|
+
|
|
16
|
+
## Instalasi
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
pnpm add @isi-ui7/corporate-themes react react-dom
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Penggunaan
|
|
23
|
+
|
|
24
|
+
### Setup di app root
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
// app/layout.tsx
|
|
28
|
+
import { ThemeProvider } from "@isi-ui7/corporate-themes";
|
|
29
|
+
|
|
30
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
31
|
+
return (
|
|
32
|
+
<html>
|
|
33
|
+
<body>
|
|
34
|
+
<ThemeProvider corporateId="bca-syariah" variant="g90">
|
|
35
|
+
{children}
|
|
36
|
+
</ThemeProvider>
|
|
37
|
+
</body>
|
|
38
|
+
</html>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Akses tema dari komponen
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
"use client";
|
|
47
|
+
import { useTheme, useThemeTokens } from "@isi-ui7/corporate-themes";
|
|
48
|
+
|
|
49
|
+
export function BrandedHeader() {
|
|
50
|
+
const { theme, variant } = useTheme();
|
|
51
|
+
const tokens = useThemeTokens();
|
|
52
|
+
|
|
53
|
+
return (
|
|
54
|
+
<header style={{ background: tokens.headerBackground }}>
|
|
55
|
+
<img src={tokens.logoUrl.light} alt={theme.displayName} />
|
|
56
|
+
<span>{theme.displayName} — {variant}</span>
|
|
57
|
+
</header>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Ganti variant di runtime
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
"use client";
|
|
66
|
+
import { useTheme, ThemeSwitcher } from "@isi-ui7/corporate-themes";
|
|
67
|
+
|
|
68
|
+
export function Toolbar() {
|
|
69
|
+
const { variant, setVariant } = useTheme();
|
|
70
|
+
return <ThemeSwitcher current={variant} onChange={setVariant} />;
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Apply tema ke subtree saja
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
import { CorporateTheme } from "@isi-ui7/corporate-themes";
|
|
78
|
+
|
|
79
|
+
<CorporateTheme corporateId="bni-syariah" variant="white">
|
|
80
|
+
<SidebarContent />
|
|
81
|
+
</CorporateTheme>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## Props
|
|
85
|
+
|
|
86
|
+
### `ThemeProvider`
|
|
87
|
+
|
|
88
|
+
| Nama | Tipe | Wajib | Deskripsi |
|
|
89
|
+
| --- | --- | --- | --- |
|
|
90
|
+
| `corporateId` | `string` | tidak | ID tema korporat (contoh: `"bca-syariah"`). Default: tema pertama |
|
|
91
|
+
| `variant` | `CarbonThemeVariant` | tidak | Variant Carbon awal. Default: tema `defaultVariant` |
|
|
92
|
+
| `children` | `ReactNode` | ya | Konten aplikasi |
|
|
93
|
+
|
|
94
|
+
### `CorporateTheme`
|
|
95
|
+
|
|
96
|
+
| Nama | Tipe | Wajib | Deskripsi |
|
|
97
|
+
| --- | --- | --- | --- |
|
|
98
|
+
| `corporateId` | `string` | tidak | ID tema korporat untuk subtree ini |
|
|
99
|
+
| `variant` | `CarbonThemeVariant` | tidak | Variant untuk subtree ini |
|
|
100
|
+
| `children` | `ReactNode` | ya | Subtree yang di-themed |
|
|
101
|
+
|
|
102
|
+
### `CarbonThemeVariant`
|
|
103
|
+
|
|
104
|
+
`"white" | "g10" | "g90" | "g100"`
|
|
105
|
+
|
|
106
|
+
## `useTheme()` — returns `ThemeContextValue`
|
|
107
|
+
|
|
108
|
+
| Property | Tipe | Deskripsi |
|
|
109
|
+
| --- | --- | --- |
|
|
110
|
+
| `theme` | `CorporateTheme` | Data tema aktif (id, name, displayName, tokens, supportedVariants) |
|
|
111
|
+
| `variant` | `CarbonThemeVariant` | Variant Carbon aktif |
|
|
112
|
+
| `corporateId` | `string` | ID tema aktif |
|
|
113
|
+
| `setVariant` | `(v) => void` | Ganti variant di runtime |
|
|
114
|
+
|
|
115
|
+
## `useThemeTokens()` — returns `ThemeTokens`
|
|
116
|
+
|
|
117
|
+
| Token | Tipe | Deskripsi |
|
|
118
|
+
| --- | --- | --- |
|
|
119
|
+
| `brandColors` | `BrandColors` | Palet warna merek (primary, secondary, accent, dll.) |
|
|
120
|
+
| `logoUrl` | `{ light, dark }` | URL logo untuk mode terang/gelap |
|
|
121
|
+
| `headerBackground` | `string` | Warna background header |
|
|
122
|
+
| `buttonPrimary` | `string` | Warna tombol primary |
|
|
123
|
+
| `linkPrimary` | `string` | Warna link primary |
|
|
124
|
+
| `focus` | `string` | Warna focus ring |
|
|
125
|
+
| ... | | Lihat `ThemeTokens` di `types.ts` |
|
|
126
|
+
|
|
127
|
+
## A11y
|
|
128
|
+
|
|
129
|
+
- CSS variables diinjeksi ke level `<html>` atau subtree — kompatibel dengan Carbon focus management
|
|
130
|
+
- Contrast ratio mengikuti standar WCAG 2.1 AA (tanggungjawab konfigurasi token per tema)
|
|
131
|
+
|
|
132
|
+
## Scripts
|
|
133
|
+
|
|
134
|
+
```bash
|
|
135
|
+
pnpm build # Build ke dist/
|
|
136
|
+
pnpm lint # ESLint
|
|
137
|
+
pnpm test # Vitest
|
|
138
|
+
pnpm typecheck # TypeScript check
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## Catatan
|
|
142
|
+
|
|
143
|
+
- Peer deps: React/ReactDOM `^18 || ^19`
|
|
144
|
+
- Tidak ada dependensi Carbon langsung — token diimplementasi sebagai CSS custom properties
|
|
145
|
+
- `ThemeProvider` menggunakan React Context — wrap di level layout tertinggi
|
|
146
|
+
- `corporateThemes` (dari `import { corporateThemes }`) adalah daftar semua tema yang tersedia
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as i, jsxs as k } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo as
|
|
2
|
+
import { useMemo as h, useState as b, useEffect as g, createContext as A, useContext as f } from "react";
|
|
3
3
|
const E = {
|
|
4
4
|
brandColors: {
|
|
5
5
|
primary: "#0F62FE",
|
|
@@ -170,7 +170,7 @@ const E = {
|
|
|
170
170
|
{
|
|
171
171
|
id: "carbon-default",
|
|
172
172
|
name: "carbon-default",
|
|
173
|
-
displayName: "
|
|
173
|
+
displayName: "ISI",
|
|
174
174
|
tokens: E,
|
|
175
175
|
supportedVariants: ["white", "g10", "g90", "g100"],
|
|
176
176
|
defaultVariant: "g10"
|
|
@@ -207,13 +207,13 @@ const E = {
|
|
|
207
207
|
supportedVariants: ["white", "g10", "g90", "g100"],
|
|
208
208
|
defaultVariant: "g10"
|
|
209
209
|
}
|
|
210
|
-
], F =
|
|
210
|
+
], F = A(null);
|
|
211
211
|
function p(e) {
|
|
212
212
|
const a = u.find((t) => t.id === "carbon-default") ?? u.find((t) => t.id === "ihsan") ?? u[0];
|
|
213
213
|
return e ? u.find((t) => t.id === e) ?? a : a;
|
|
214
214
|
}
|
|
215
215
|
function S({ corporateId: e, variant: a, children: t }) {
|
|
216
|
-
const r =
|
|
216
|
+
const r = h(() => p(e), [e]), [c, m] = b(
|
|
217
217
|
a ?? r.defaultVariant
|
|
218
218
|
);
|
|
219
219
|
g(() => {
|
|
@@ -240,7 +240,7 @@ function S({ corporateId: e, variant: a, children: t }) {
|
|
|
240
240
|
return /* @__PURE__ */ i(F.Provider, { value: d, children: t });
|
|
241
241
|
}
|
|
242
242
|
function v() {
|
|
243
|
-
const e =
|
|
243
|
+
const e = f(F);
|
|
244
244
|
if (!e)
|
|
245
245
|
throw new Error("useTheme must be used inside ThemeProvider");
|
|
246
246
|
return e;
|
|
@@ -256,10 +256,10 @@ function j({
|
|
|
256
256
|
children: c,
|
|
257
257
|
...m
|
|
258
258
|
}) {
|
|
259
|
-
const d = v(), l = e ?? "div", o =
|
|
259
|
+
const d = v(), l = e ?? "div", o = h(
|
|
260
260
|
() => t ? p(t) : d.theme,
|
|
261
261
|
[t, d.theme]
|
|
262
|
-
), [y, n] =
|
|
262
|
+
), [y, n] = b(
|
|
263
263
|
r ?? d.variant ?? o.defaultVariant
|
|
264
264
|
);
|
|
265
265
|
g(() => {
|
|
@@ -291,12 +291,12 @@ function U() {
|
|
|
291
291
|
)
|
|
292
292
|
] });
|
|
293
293
|
}
|
|
294
|
-
function
|
|
294
|
+
function I() {
|
|
295
295
|
const { theme: e } = v();
|
|
296
296
|
return e.tokens;
|
|
297
297
|
}
|
|
298
298
|
function L() {
|
|
299
|
-
return
|
|
299
|
+
return I().brandColors;
|
|
300
300
|
}
|
|
301
301
|
function $() {
|
|
302
302
|
const { variant: e, setVariant: a } = v();
|
|
@@ -319,6 +319,6 @@ export {
|
|
|
319
319
|
L as useBrandColors,
|
|
320
320
|
M as useCorporateFeatures,
|
|
321
321
|
v as useTheme,
|
|
322
|
-
|
|
322
|
+
I as useThemeTokens,
|
|
323
323
|
$ as useThemeVariant
|
|
324
324
|
};
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@isi-ui7/corporate-themes",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Corporate themes (BCA Syariah, BJB Syariah, Pos Indonesia, Ihsan Solusi Informatika) with Carbon variants.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
|
-
"url": "https://github.com/ihsansolusi/ui7
|
|
8
|
+
"url": "https://github.com/ihsansolusi/ui7.git",
|
|
9
9
|
"directory": "themes/corporate-themes"
|
|
10
10
|
},
|
|
11
11
|
"publishConfig": {
|