@wandelbots/wandelbots-js-react-components 1.1.1 → 1.1.3
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 +65 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @wandelbots/wandelbots-js-react-components
|
|
2
|
+
|
|
3
|
+
[](https://npmjs.org/package/@wandelbots/wandelbots-js-react-components) [](https://bundlephobia.com/package/@wandelbots/wandelbots-js-react-components) [](https://github.com/wandelbotsgmbh/wandelbots-js-react-components/actions/workflows/release.yml)
|
|
2
4
|
|
|
3
5
|
A growing collection of ready-made React UI components based on MaterialUI and React Three Fiber for use with the Wandelbots platform.
|
|
4
6
|
|
|
@@ -28,15 +30,22 @@ import { WandelscriptEditor, ... } from '@wandelbots/wandelbots-js-react-compone
|
|
|
28
30
|
<ul>
|
|
29
31
|
<li><a href="#defaulttheme">getDefaultThemeOptionsForMui</a></li>
|
|
30
32
|
</ul>
|
|
33
|
+
<li><a href="#viewport">3D Viewport</a></li>
|
|
34
|
+
<ul>
|
|
35
|
+
<li><a href="#robots">Robots</a></li>
|
|
36
|
+
<li><a href="#lightning">Lightning</a></li>
|
|
37
|
+
</ul>
|
|
31
38
|
</ul>
|
|
32
39
|
</td>
|
|
33
40
|
</tr>
|
|
34
41
|
</table>
|
|
35
42
|
|
|
36
|
-
|
|
43
|
+
### Wandelscript
|
|
37
44
|
|
|
38
45
|
#### WandelscriptEditor
|
|
39
46
|
|
|
47
|
+
The WandelscriptEditor provides an interface for editing snippets of Wandelscript code with the appropriate syntax highlighting. It uses the [Monaco](https://microsoft.github.io/monaco-editor/) editor under the hood.
|
|
48
|
+
|
|
40
49
|
```tsx
|
|
41
50
|
type WandelscriptEditorProps = {
|
|
42
51
|
/** The current Wandelscript content of the code editor (controlled component) */
|
|
@@ -48,18 +57,16 @@ type WandelscriptEditorProps = {
|
|
|
48
57
|
}
|
|
49
58
|
```
|
|
50
59
|
|
|
51
|
-
|
|
60
|
+
### MaterialUI
|
|
52
61
|
|
|
53
|
-
|
|
62
|
+
#### defaulttheme
|
|
54
63
|
|
|
55
|
-
|
|
64
|
+
This function creates a [Material UI theme](https://mui.com/material-ui/customization/theming/) with the default colors, typography, and MUI component configuration.
|
|
56
65
|
|
|
57
66
|
```tsx
|
|
58
67
|
declare function createDefaultMuiTheme(mode: 'dark'|'light' = 'dark'): Theme
|
|
59
68
|
```
|
|
60
69
|
|
|
61
|
-
This function creates a [Material UI theme](https://mui.com/material-ui/customization/theming/) with the default colors, typography, and MUI component configuration.
|
|
62
|
-
|
|
63
70
|
Example use in a MUI application:
|
|
64
71
|
|
|
65
72
|
```tsx
|
|
@@ -75,9 +82,41 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
|
|
|
75
82
|
}
|
|
76
83
|
```
|
|
77
84
|
|
|
85
|
+
### Viewport
|
|
86
|
+
|
|
87
|
+
#### Robots
|
|
88
|
+
|
|
89
|
+
This `SupportedRobot` component adds the robot to the 3D viewport. Use it together with the `connectedMotionGroup` from `@wandelbots/wandelbots-js`.
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
<SupportedRobot connectedMotionGroup={activeRobot} />
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
The robot model are loaded from the [jsdelivr CDN](https://cdn.jsdelivr.net/gh/wandelbotsgmbh/wandelbots-js-react-components/public/models/).
|
|
96
|
+
|
|
97
|
+
In case you want to use the application offline, you can download the models and host them locally. You can override the URL resolver of the `SupportedRobot` component by passing a `getModel` function like:
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
<SupportedRobot
|
|
101
|
+
getModel={() =>
|
|
102
|
+
`public/${activeRobot.modelFromController}.glb`
|
|
103
|
+
}
|
|
104
|
+
connectedMotionGroup={activeRobot}
|
|
105
|
+
/>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
#### Lightning
|
|
109
|
+
|
|
110
|
+
The `PresetEnvironment` component adds a default lighting setup to the 3D viewport.
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
<PresetEnvironment>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
|
|
78
117
|
## Contributing
|
|
79
118
|
|
|
80
|
-
To set up
|
|
119
|
+
To set up wandelbots-js-react-components for development, first clone the repo and run:
|
|
81
120
|
|
|
82
121
|
```bash
|
|
83
122
|
npm install
|
|
@@ -87,4 +126,21 @@ Then you can run the storybook to develop the components:
|
|
|
87
126
|
|
|
88
127
|
```bash
|
|
89
128
|
npm run dev
|
|
90
|
-
```
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Local Testing
|
|
132
|
+
|
|
133
|
+
To test the package locally, you can run:
|
|
134
|
+
|
|
135
|
+
```bash
|
|
136
|
+
npm run build
|
|
137
|
+
npm pack
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
this will generate a `.tgz` file in the root of the project. You can then install this package in another project with:
|
|
141
|
+
|
|
142
|
+
```bash
|
|
143
|
+
npm install /path/to/wandelbots-wandelbots-js-react-components-0.0.1.tgz
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
`npm link` leads to issues with the react three fiber components (`peerDependencies` are not supported), so it is recommended to use `npm install` with the `.tgz` file.
|
package/package.json
CHANGED