Skip to content

Commit 502fc7f

Browse files
sandulatsandulat
committed
feat(react): implemented singular entity rendering in builder and interpreter stores by removing context
1 parent 38613b1 commit 502fc7f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+7155
-5722
lines changed

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
save-workspace-protocol=false
22
prefer-workspace-packages=true
3+
link-workspace-packages=true

‎docs/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
"browserslist": "defaults, not ie <= 11",
1414
"dependencies": {
1515
"@algolia/autocomplete-core": "^1.9.2",
16-
"@coltorapps/builder": "^0.1.3",
17-
"@coltorapps/builder-react": "^0.1.3",
16+
"@coltorapps/builder": "^0.2.0",
17+
"@coltorapps/builder-react": "^0.2.0",
1818
"@dnd-kit/core": "^6.1.0",
1919
"@dnd-kit/modifiers": "^7.0.0",
2020
"@dnd-kit/sortable": "^8.0.0",

‎docs/src/app/docs/api/react/builder-entities/page.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ nextjs:
66
description: API Reference of BuilderEntities.
77
---
88

9-
This React component is used to render the entities tree of a schema within the context of a [builder store](/docs/api/react/use-builder-store).
9+
This React component is used to render the entities tree of a [builder store](/docs/api/react/use-builder-store).
1010

1111
## Reference
1212

‎docs/src/app/docs/api/react/builder-entity-attributes/page.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ nextjs:
66
description: API Reference of BuilderEntityAttributes.
77
---
88

9-
This React component is used to render the attributes of a specific entity instance within the context of a [builder store](/docs/api/react/use-builder-store).
9+
This React component is used to render the attributes of a specific entity instance of a [builder store](/docs/api/react/use-builder-store).
1010

1111
## Reference
1212

‎docs/src/app/docs/api/react/builder-entity/page.md

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
title: BuilderEntity
3+
nextjs:
4+
metadata:
5+
title: BuilderEntity
6+
description: API Reference of BuilderEntity.
7+
---
8+
9+
This React component renders a single entity from a [builder store](/docs/api/react/use-builder-store), including its children.
10+
11+
## Reference
12+
13+
### `<BuilderEntity builderStore components children? />`
14+
15+
Use the `BuilderEntity` component to render a single entity, including its children.
16+
17+
```tsx
18+
import { BuilderEntity, useBuilderStore } from "@coltorapps/builder-react";
19+
20+
import { formBuilder } from "./form-builder";
21+
import { TextFieldEntity } from "./text-field-entity";
22+
23+
export function App() {
24+
const builderStore = useBuilderStore(formBuilder);
25+
26+
return (
27+
<BuilderEntity
28+
entityId="a68836dc-1478-435f-bdee-ca7aff098993"
29+
builderStore={builderStore}
30+
components={{ textField: TextFieldEntity }}
31+
/>
32+
);
33+
}
34+
```
35+
36+
### Props
37+
38+
The `BuilderEntity` component accepts four props:
39+
40+
| Prop | Type | Description {% class="api-description" %} |
41+
| -------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
42+
| `entityId` | {% badge content="string" /%} | The ID of the entity to render, including its children. |
43+
| `builderStore` | {% badge content="object" /%} | The [builder store](/docs/api/react/use-builder-store). |
44+
| `components` | {% badge content="object" /%} | An object mapping of [entities components](/docs/api/react/create-entity-component) for each defined entity type in the builder. |
45+
| `children` | {% badge content="function" /%} {% badge content="optional" /%} | A function intended to wrap each rendered arbitrary entity with additional rendering. It receives both the rendered entity and the entity instance object. |
46+
47+
### Returns
48+
49+
The `BuilderEntity` component essentially renders a single entity, including its children.
50+
51+
### Render prop
52+
53+
The `children` prop of the `BuilderEntity` component must be a function, which is used to wrap each rendered arbitrary entity with additional rendering. This can be useful, for instance, to render a delete button alongside each entity.
54+
55+
```tsx
56+
import { BuilderEntity, useBuilderStore } from "@coltorapps/builder-react";
57+
58+
import { formBuilder } from "./form-builder";
59+
import { TextFieldEntity } from "./text-field-entity";
60+
61+
export function App() {
62+
const builderStore = useBuilderStore(formBuilder);
63+
64+
return (
65+
<BuilderEntity
66+
entityId="a68836dc-1478-435f-bdee-ca7aff098993"
67+
builderStore={builderStore}
68+
components={{ textField: TextFieldEntity }}
69+
>
70+
{(props) => (
71+
<div>
72+
{/* This is the rendered entity. */}
73+
{props.children}
74+
<button
75+
onClick={() => {
76+
builderStore.deleteEntity(props.entity.id);
77+
}}
78+
>
79+
Delete
80+
</button>
81+
</div>
82+
)}
83+
</BuilderEntity>
84+
);
85+
}
86+
```

‎docs/src/app/docs/api/react/create-entity-component/page.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ nextjs:
66
description: API Reference of createEntityComponent.
77
---
88

9-
This function defines an entity component for later use within the [`<BuilderEntities />`](/docs/api/react/builder-entities) and [`<Interpreter />`](/docs/api/react/interpreter) components.
9+
This function defines an entity component for later use within the [`<BuilderEntities />`](/docs/api/react/builder-entities) and [`<InterpreterEntities />`](/docs/api/react/interpreter-entities) components.
1010

1111
The function itself serves primarily as a type safety helper and doesn't perform any underlying logic.
1212

@@ -54,4 +54,4 @@ export const TextFieldEntity = createEntityComponent(
5454

5555
### Returns
5656

57-
The `createEntityComponent` function essentially creates a React component to be used within the [`<BuilderEntities />`](/docs/api/react/builder-entities) and [`<Interpreter />`](/docs/api/react/interpreter) components.
57+
The `createEntityComponent` function essentially creates a React component to be used within the [`<BuilderEntities />`](/docs/api/react/builder-entities) and [`<InterpreterEntities />`](/docs/api/react/interpreter-entities) components.

‎docs/src/app/docs/api/react/interpreter/page.md ‎docs/src/app/docs/api/react/interpreter-entities/page.md

+20-14
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
---
2-
title: Interpreter
2+
title: InterpreterEntities
33
nextjs:
44
metadata:
5-
title: Interpreter
6-
description: API Reference of Interpreter.
5+
title: InterpreterEntities
6+
description: API Reference of InterpreterEntities.
77
---
88

9-
This React component is used to render the entities tree within the context of an [interpreter store](/docs/api/react/use-interpreter-store).
9+
This React component is used to render the entities tree of an [interpreter store](/docs/api/react/use-interpreter-store).
1010

1111
## Reference
1212

13-
### `<Interpreter interpreterStore components children? />`
13+
### `<InterpreterEntities interpreterStore components children? />`
1414

15-
Use the `Interpreter` component to render the entities tree.
15+
Use the `InterpreterEntities` component to render the entities tree.
1616

1717
```tsx
18-
import { Interpreter, useInterpreterStore } from "@coltorapps/builder-react";
18+
import {
19+
InterpreterEntities,
20+
useInterpreterStore,
21+
} from "@coltorapps/builder-react";
1922

2023
import { formBuilder } from "./form-builder";
2124
import { TextFieldEntity } from "./text-field-entity";
@@ -36,7 +39,7 @@ export function App() {
3639
const interpreterStore = useInterpreterStore(formBuilder);
3740

3841
return (
39-
<Interpreter
42+
<InterpreterEntities
4043
interpreterStore={interpreterStore}
4144
components={{ textField: TextFieldEntity }}
4245
/>
@@ -48,7 +51,7 @@ In the example above, we've hardcoded the schema, but typically, you would retri
4851

4952
### Props
5053

51-
The `Interpreter` component accepts three props:
54+
The `InterpreterEntities` component accepts three props:
5255

5356
| Prop | Type | Description {% class="api-description" %} |
5457
| ------------------ | --------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -58,14 +61,17 @@ The `Interpreter` component accepts three props:
5861

5962
### Returns
6063

61-
The `Interpreter` component essentially renders an entities tree.
64+
The `InterpreterEntities` component essentially renders an entities tree.
6265

6366
### Render prop
6467

65-
The `children` prop of the `Interpreter` component must be a function, which is used to wrap each rendered arbitrary entity with additional rendering.
68+
The `children` prop of the `InterpreterEntities` component must be a function, which is used to wrap each rendered arbitrary entity with additional rendering.
6669

6770
```tsx
68-
import { Interpreter, useInterpreterStore } from "@coltorapps/builder-react";
71+
import {
72+
InterpreterEntities,
73+
useInterpreterStore,
74+
} from "@coltorapps/builder-react";
6975

7076
import { formBuilder } from "./form-builder";
7177
import { TextFieldEntity } from "./text-field-entity";
@@ -86,7 +92,7 @@ export function App() {
8692
const interpreterStore = useInterpreterStore(formBuilder);
8793

8894
return (
89-
<Interpreter
95+
<InterpreterEntities
9096
interpreterStore={interpreterStore}
9197
components={{ textField: TextFieldEntity }}
9298
>
@@ -96,7 +102,7 @@ export function App() {
96102
{props.children}
97103
</div>
98104
)}
99-
</Interpreter>
105+
</InterpreterEntities>
100106
);
101107
}
102108
```

‎docs/src/app/docs/api/react/interpreter-entity/page.md

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
---
2+
title: InterpreterEntity
3+
nextjs:
4+
metadata:
5+
title: InterpreterEntity
6+
description: API Reference of InterpreterEntity.
7+
---
8+
9+
This React component renders a single entity from an [interpreter store](/docs/api/react/use-interpreter-store), including its children.
10+
11+
## Reference
12+
13+
### `<InterpreterEntity interpreterStore components children? />`
14+
15+
Use the `InterpreterEntity` component to render a single entity, including its children.
16+
17+
```tsx
18+
import {
19+
InterpreterEntity,
20+
useInterpreterStore,
21+
} from "@coltorapps/builder-react";
22+
23+
import { formBuilder } from "./form-builder";
24+
import { TextFieldEntity } from "./text-field-entity";
25+
26+
const formSchema = {
27+
entities: {
28+
"51324b32-adc3-4d17-a90e-66b5453935bd": {
29+
type: "textField",
30+
attributes: {
31+
label: "First name",
32+
},
33+
},
34+
"a2971678-1e09-48dc-80e9-70f4fe75d4db": {
35+
type: "textField",
36+
attributes: {
37+
label: "Last name",
38+
},
39+
},
40+
},
41+
root: [
42+
"51324b32-adc3-4d17-a90e-66b5453935bd",
43+
"a2971678-1e09-48dc-80e9-70f4fe75d4db",
44+
],
45+
};
46+
47+
export function App() {
48+
const interpreterStore = useInterpreterStore(formBuilder);
49+
50+
return (
51+
<InterpreterEntity
52+
entityId="a2971678-1e09-48dc-80e9-70f4fe75d4db"
53+
interpreterStore={interpreterStore}
54+
components={{ textField: TextFieldEntity }}
55+
/>
56+
);
57+
}
58+
```
59+
60+
In the example above, we've hardcoded the schema, but typically, you would retrieve it from a database, for instance.
61+
62+
### Props
63+
64+
The `InterpreterEntity` component accepts four props:
65+
66+
| Prop | Type | Description {% class="api-description" %} |
67+
| ------------------ | --------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
68+
| `entityId` | {% badge content="string" /%} | The ID of the entity to render, including its children. |
69+
| `interpreterStore` | {% badge content="object" /%} | The [interpreter store](/docs/api/react/use-interpreter-store). |
70+
| `components` | {% badge content="object" /%} | An object mapping of [entities components](/docs/api/react/create-entity-component) for each defined entity type in the builder. |
71+
| `children` | {% badge content="function" /%} {% badge content="optional" /%} | A function intended to wrap each rendered arbitrary entity with additional rendering. It receives both the rendered entity and the entity instance object. |
72+
73+
### Returns
74+
75+
The `InterpreterEntity` component essentially renders a single entity, including its children.
76+
77+
### Render prop
78+
79+
The `children` prop of the `InterpreterEntity` component must be a function, which is used to wrap each rendered arbitrary entity with additional rendering.
80+
81+
```tsx
82+
import {
83+
InterpreterEntity,
84+
useInterpreterStore,
85+
} from "@coltorapps/builder-react";
86+
87+
import { formBuilder } from "./form-builder";
88+
import { TextFieldEntity } from "./text-field-entity";
89+
90+
const formSchema = {
91+
entities: {
92+
"51324b32-adc3-4d17-a90e-66b5453935bd": {
93+
type: "textField",
94+
attributes: {
95+
label: "First name",
96+
},
97+
},
98+
"a2971678-1e09-48dc-80e9-70f4fe75d4db": {
99+
type: "textField",
100+
attributes: {
101+
label: "Last name",
102+
},
103+
},
104+
},
105+
root: [
106+
"51324b32-adc3-4d17-a90e-66b5453935bd",
107+
"a2971678-1e09-48dc-80e9-70f4fe75d4db",
108+
],
109+
};
110+
111+
export function App() {
112+
const interpreterStore = useInterpreterStore(formBuilder);
113+
114+
return (
115+
<InterpreterEntity
116+
entityId="a2971678-1e09-48dc-80e9-70f4fe75d4db"
117+
interpreterStore={interpreterStore}
118+
components={{ textField: TextFieldEntity }}
119+
>
120+
{(props) => (
121+
<div>
122+
{/* This is the rendered entity. */}
123+
{props.children}
124+
</div>
125+
)}
126+
</InterpreterEntity>
127+
);
128+
}
129+
```
130+
131+
In the example above, we've hardcoded the schema, but typically, you would retrieve it from a database, for instance.

0 commit comments

Comments
 (0)