Skip to content

Commit 3d2d1ad

Browse files
ctatectate
authored
update docs (#82)
1 parent 801708a commit 3d2d1ad

File tree

15 files changed

+375
-26
lines changed

15 files changed

+375
-26
lines changed

‎.changeset/react-native-events-state.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@json-render/core": minor
3+
"@json-render/react": minor
4+
"@json-render/react-native": minor
5+
"@json-render/remotion": minor
6+
"@json-render/codegen": minor
7+
---
8+
9+
Add @json-render/react-native package, event system (emit replaces onAction), repeat/list rendering, user prompt builder, spec validation, and rename DataProvider to StateProvider.

‎README.md‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ Let end users generate dashboards, widgets, apps, and videos from prompts — sa
66

77
```bash
88
npm install @json-render/core @json-render/react
9+
# or for mobile
10+
npm install @json-render/core @json-render/react-native
911
# or for video
1012
npm install @json-render/core @json-render/remotion
1113
```
@@ -75,8 +77,8 @@ const { registry } = defineRegistry(catalog, {
7577
<span>{format(props.value, props.format)}</span>
7678
</div>
7779
),
78-
Button: ({ props, onAction }) => (
79-
<button onClick={() => onAction?.({ name: props.action })}>
80+
Button: ({ props, emit }) => (
81+
<button onClick={() => emit?.("press")}>
8082
{props.label}
8183
</button>
8284
),
@@ -129,6 +131,27 @@ const { registry } = defineRegistry(catalog, { components });
129131
<Renderer spec={spec} registry={registry} />
130132
```
131133

134+
### React Native (Mobile)
135+
136+
```tsx
137+
import { defineCatalog } from "@json-render/core";
138+
import { schema } from "@json-render/react-native/schema";
139+
import {
140+
standardComponentDefinitions,
141+
standardActionDefinitions,
142+
} from "@json-render/react-native/catalog";
143+
import { defineRegistry, Renderer } from "@json-render/react-native";
144+
145+
// 25+ standard components included
146+
const catalog = defineCatalog(schema, {
147+
components: { ...standardComponentDefinitions },
148+
actions: standardActionDefinitions,
149+
});
150+
151+
const { registry } = defineRegistry(catalog, { components: {} });
152+
<Renderer spec={spec} registry={registry} />
153+
```
154+
132155
### Remotion (Video)
133156

134157
```tsx
@@ -229,7 +252,7 @@ Components can trigger actions, including the built-in `setState` action:
229252
}
230253
```
231254

232-
The `setState` action updates the data model directly, which re-evaluates visibility conditions and dynamic prop expressions.
255+
The `setState` action updates the state model directly, which re-evaluates visibility conditions and dynamic prop expressions.
233256

234257
---
235258

@@ -242,9 +265,10 @@ pnpm install
242265
pnpm dev
243266
```
244267

245-
- http://localhost:3000 — Docs & Playground
246-
- http://localhost:3001 — Example Dashboard
247-
- http://localhost:3002 — Remotion Video Example
268+
- http://localhost:3000 -- Docs & Playground
269+
- http://localhost:3001 -- Example Dashboard
270+
- http://localhost:3002 -- Remotion Video Example
271+
- React Native example: run `npx expo start` in `examples/react-native`
248272

249273
## How It Works
250274

‎apps/web/app/(main)/docs/api/react-native/page.mdx‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
export const metadata = { title: "@json-render/react-native API" }
2+
3+
# @json-render/react-native
4+
5+
React Native renderer with standard components, providers, and hooks.
6+
7+
## Standard Components
8+
9+
### Layout
10+
11+
| Component | Props | Description |
12+
|-----------|-------|-------------|
13+
| `Container` | `padding`, `background`, `borderRadius`, `borderColor`, `flex` | Basic wrapper with styling |
14+
| `Row` | `gap`, `align`, `justify`, `flex`, `wrap` | Horizontal flex layout |
15+
| `Column` | `gap`, `align`, `justify`, `flex` | Vertical flex layout |
16+
| `ScrollContainer` | `direction` | Scrollable area (vertical or horizontal) |
17+
| `SafeArea` | `edges` | Safe area insets for notch/home indicator |
18+
| `Pressable` | `action`, `actionParams` | Touchable wrapper that triggers actions |
19+
| `Spacer` | `size`, `flex` | Fixed or flexible spacing |
20+
| `Divider` | `color`, `thickness` | Thin line separator |
21+
22+
### Content
23+
24+
| Component | Props | Description |
25+
|-----------|-------|-------------|
26+
| `Heading` | `text`, `level`, `align`, `color` | Heading text (levels 1-6) |
27+
| `Paragraph` | `text`, `align`, `color` | Body text |
28+
| `Label` | `text`, `color`, `bold` | Small label text |
29+
| `Image` | `uri`, `width`, `height`, `resizeMode`, `borderRadius` | Image display |
30+
| `Avatar` | `uri`, `size`, `fallback` | Circular avatar |
31+
| `Badge` | `label`, `color`, `textColor` | Status badge |
32+
| `Chip` | `label`, `selected`, `color` | Tag/chip |
33+
34+
### Input
35+
36+
| Component | Props | Description |
37+
|-----------|-------|-------------|
38+
| `Button` | `label`, `variant`, `size`, `disabled`, `action`, `actionParams` | Pressable button |
39+
| `TextInput` | `placeholder`, `statePath`, `secure`, `keyboardType`, `multiline` | Text input field |
40+
| `Switch` | `statePath`, `label` | Toggle switch |
41+
| `Checkbox` | `statePath`, `label` | Checkbox with label |
42+
| `Slider` | `statePath`, `min`, `max`, `step` | Range slider |
43+
| `SearchBar` | `placeholder`, `statePath` | Search input |
44+
45+
### Feedback
46+
47+
| Component | Props | Description |
48+
|-----------|-------|-------------|
49+
| `Spinner` | `size`, `color` | Loading indicator |
50+
| `ProgressBar` | `progress`, `color`, `trackColor` | Progress indicator |
51+
52+
### Composite
53+
54+
| Component | Props | Description |
55+
|-----------|-------|-------------|
56+
| `Card` | `title`, `subtitle`, `padding` | Card container |
57+
| `ListItem` | `title`, `subtitle`, `leading`, `trailing`, `action`, `actionParams` | List row |
58+
| `Modal` | `visible`, `title` | Bottom sheet modal |
59+
60+
## Providers
61+
62+
### StateProvider
63+
64+
```tsx
65+
<StateProvider initialState={object}>
66+
{children}
67+
</StateProvider>
68+
```
69+
70+
### ActionProvider
71+
72+
```tsx
73+
<ActionProvider handlers={Record<string, ActionHandler>}>
74+
{children}
75+
</ActionProvider>
76+
```
77+
78+
### VisibilityProvider
79+
80+
```tsx
81+
<VisibilityProvider>
82+
{children}
83+
</VisibilityProvider>
84+
```
85+
86+
### ValidationProvider
87+
88+
```tsx
89+
<ValidationProvider>
90+
{children}
91+
</ValidationProvider>
92+
```
93+
94+
## defineRegistry
95+
96+
Create a type-safe component registry. Standard components are built-in -- only register custom components.
97+
98+
```tsx
99+
import { defineRegistry, type Components } from '@json-render/react-native';
100+
101+
const { registry } = defineRegistry(catalog, {
102+
components: {
103+
Icon: ({ props }) => <Ionicons name={props.name} size={props.size ?? 24} />,
104+
} as Components<typeof catalog>,
105+
});
106+
```
107+
108+
## Hooks
109+
110+
### useUIStream
111+
112+
```typescript
113+
const {
114+
spec, // Spec | null - current UI state
115+
isStreaming, // boolean - true while streaming
116+
error, // Error | null
117+
send, // (prompt: string) => Promise<void>
118+
clear, // () => void - reset spec and error
119+
} = useUIStream({
120+
api: string,
121+
onComplete?: (spec: Spec) => void,
122+
onError?: (error: Error) => void,
123+
});
124+
```
125+
126+
### useStateStore
127+
128+
```typescript
129+
const { state, get, set, update } = useStateStore();
130+
```
131+
132+
### useStateValue
133+
134+
```typescript
135+
const value = useStateValue(path: string);
136+
```
137+
138+
### useStateBinding
139+
140+
```typescript
141+
const [value, setValue] = useStateBinding(path: string);
142+
```
143+
144+
### useActions
145+
146+
```typescript
147+
const { execute } = useActions();
148+
```
149+
150+
### useIsVisible
151+
152+
```typescript
153+
const isVisible = useIsVisible(condition?: VisibilityCondition);
154+
```
155+
156+
## Catalog Exports
157+
158+
```typescript
159+
import { standardComponentDefinitions, standardActionDefinitions } from "@json-render/react-native/catalog";
160+
import { schema } from "@json-render/react-native/schema";
161+
```
162+
163+
| Export | Purpose |
164+
|--------|---------|
165+
| `standardComponentDefinitions` | Catalog definitions for all 25+ standard components |
166+
| `standardActionDefinitions` | Catalog definitions for standard actions (setState, navigate) |
167+
| `schema` | React Native element tree schema |

‎apps/web/app/(main)/docs/api/react/page.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,16 +49,16 @@ type ValidatorFn = (value: unknown, args?: object) => boolean | Promise<boolean>
4949

5050
## defineRegistry
5151

52-
Create a type-safe component registry from a catalog. Components receive `props`, `children`, `onAction`, and `loading` with catalog-inferred types.
52+
Create a type-safe component registry from a catalog. Components receive `props`, `children`, `emit`, and `loading` with catalog-inferred types.
5353

5454
```tsx
5555
import { defineRegistry } from '@json-render/react';
5656

5757
const { registry } = defineRegistry(catalog, {
5858
components: {
5959
Card: ({ props, children }) => <div>{props.title}{children}</div>,
60-
Button: ({ props, onAction }) => (
61-
<button onClick={() => onAction?.({ name: props.action })}>
60+
Button: ({ props, emit }) => (
61+
<button onClick={() => emit?.("press")}>
6262
{props.label}
6363
</button>
6464
),
@@ -90,7 +90,7 @@ type Registry = Record<string, React.ComponentType<ComponentRenderProps>>;
9090
interface ComponentContext<P> {
9191
props: P; // Typed props from catalog
9292
children?: React.ReactNode; // Rendered children (for slot components)
93-
onAction?: (action: { name: string; params?: object }) => void;
93+
emit?: (event: string) => void; // Emit a named event
9494
loading?: boolean;
9595
}
9696
```

0 commit comments

Comments
 (0)