@demokit-ai/react 0.1.0 → 0.2.0
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 +132 -0
- package/package.json +4 -1
package/README.md
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
# @demokit-ai/react
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
React bindings for DemoKit - provider, hooks, and components for demo mode state management.
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @demokit-ai/react @demokit-ai/core
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Features
|
|
15
|
+
|
|
16
|
+
- `DemoProvider` - React context provider for demo mode state
|
|
17
|
+
- `DemoBanner` - Customizable banner component for demo mode indication
|
|
18
|
+
- `useDemo` - Hook for accessing and controlling demo mode
|
|
19
|
+
- `useDemoState` - Hook for managing demo-specific state
|
|
20
|
+
- `withDemo` - HOC for conditionally rendering based on demo mode
|
|
21
|
+
- Full TypeScript support
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
### Provider Setup
|
|
26
|
+
|
|
27
|
+
Wrap your app with the `DemoProvider`:
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { DemoProvider } from '@demokit-ai/react'
|
|
31
|
+
|
|
32
|
+
function App() {
|
|
33
|
+
return (
|
|
34
|
+
<DemoProvider
|
|
35
|
+
enabled={true}
|
|
36
|
+
fixtures={{
|
|
37
|
+
users: [{ id: '1', name: 'Demo User' }],
|
|
38
|
+
}}
|
|
39
|
+
>
|
|
40
|
+
<YourApp />
|
|
41
|
+
</DemoProvider>
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Using the Demo Hook
|
|
47
|
+
|
|
48
|
+
Access demo mode state and controls:
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import { useDemo } from '@demokit-ai/react'
|
|
52
|
+
|
|
53
|
+
function MyComponent() {
|
|
54
|
+
const { enabled, toggle, fixtures, setFixture } = useDemo()
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<div>
|
|
58
|
+
<button onClick={toggle}>
|
|
59
|
+
Demo Mode: {enabled ? 'ON' : 'OFF'}
|
|
60
|
+
</button>
|
|
61
|
+
{enabled && <pre>{JSON.stringify(fixtures, null, 2)}</pre>}
|
|
62
|
+
</div>
|
|
63
|
+
)
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Demo Banner
|
|
68
|
+
|
|
69
|
+
Show a banner when demo mode is active:
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
import { DemoBanner } from '@demokit-ai/react'
|
|
73
|
+
|
|
74
|
+
function App() {
|
|
75
|
+
return (
|
|
76
|
+
<>
|
|
77
|
+
<DemoBanner
|
|
78
|
+
message="You're viewing demo data"
|
|
79
|
+
position="top"
|
|
80
|
+
dismissible
|
|
81
|
+
/>
|
|
82
|
+
<YourApp />
|
|
83
|
+
</>
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Conditional Rendering
|
|
89
|
+
|
|
90
|
+
Use the HOC for conditional demo content:
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
import { withDemo } from '@demokit-ai/react'
|
|
94
|
+
|
|
95
|
+
const DemoOnlyFeature = withDemo(({ fixtures }) => (
|
|
96
|
+
<div>This only shows in demo mode</div>
|
|
97
|
+
))
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## API Reference
|
|
101
|
+
|
|
102
|
+
### `DemoProvider`
|
|
103
|
+
|
|
104
|
+
Props:
|
|
105
|
+
- `enabled` - Whether demo mode is enabled
|
|
106
|
+
- `fixtures` - Demo fixtures object
|
|
107
|
+
- `onToggle` - Callback when demo mode is toggled
|
|
108
|
+
- `storage` - Storage adapter for persistence
|
|
109
|
+
|
|
110
|
+
### `useDemo()`
|
|
111
|
+
|
|
112
|
+
Returns:
|
|
113
|
+
- `enabled` - Current demo mode state
|
|
114
|
+
- `toggle()` - Toggle demo mode
|
|
115
|
+
- `enable()` - Enable demo mode
|
|
116
|
+
- `disable()` - Disable demo mode
|
|
117
|
+
- `fixtures` - Current fixtures
|
|
118
|
+
- `setFixture(key, value)` - Set a fixture
|
|
119
|
+
- `clearFixtures()` - Clear all fixtures
|
|
120
|
+
|
|
121
|
+
### `DemoBanner`
|
|
122
|
+
|
|
123
|
+
Props:
|
|
124
|
+
- `message` - Banner message
|
|
125
|
+
- `position` - 'top' | 'bottom'
|
|
126
|
+
- `dismissible` - Whether the banner can be dismissed
|
|
127
|
+
- `className` - Custom CSS class
|
|
128
|
+
- `style` - Inline styles
|
|
129
|
+
|
|
130
|
+
## License
|
|
131
|
+
|
|
132
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@demokit-ai/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "React bindings for DemoKit - provider, hooks, and components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -31,8 +31,11 @@
|
|
|
31
31
|
"@demokit-ai/core": "*"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
+
"@testing-library/react": "^16.3.0",
|
|
35
|
+
"@testing-library/dom": "^10.4.0",
|
|
34
36
|
"@types/react": "^19.0.0",
|
|
35
37
|
"@types/react-dom": "^19.0.0",
|
|
38
|
+
"jsdom": "^25.0.0",
|
|
36
39
|
"react": "^19.0.0",
|
|
37
40
|
"react-dom": "^19.0.0",
|
|
38
41
|
"tsup": "^8.3.5",
|