Toba Example
yarn add @toba/example --devThis module will add dependencies and helpers to enable example React applications, typically for use within a library module that doesn't otherwise support user interaction.
The use case overlaps (but is not fully equivalent to) that of Storybook without need of an additional toolset and techniques — just build a regular, but tiny, React app.
Getting Started
To add React examples to an existing library module, create the following structure at your project root:
├── examples
│ ├── mobile
│ │ └── app.tsx
│ └── web
│ └── app.tsx
The app.tsx files must each export a React.Component class named ExampleApp. The mobile app will be loaded by Expo within a device simulator and the web app will be loaded by Webpack DevServer.
If using VSCode, you can add tasks to launch the examples as follows:
[
{
"label": "Example: Bundle",
"command": "${workspaceFolder}/node_modules/.bin/webpack",
"options": {
"cwd": "${workspaceFolder}/node_modules/@toba/example/"
},
"presentation": {
"echo": false,
"clear": true,
"showReuseMessage": false
},
"type": "shell",
"problemMatcher": []
},
{
"label": "Example: Web",
"command": "${workspaceFolder}/node_modules/.bin/webpack-dev-server",
"options": {
"cwd": "${workspaceFolder}/node_modules/@toba/example/build"
},
"type": "shell",
"problemMatcher": []
},
{
"label": "Example: iOS",
"command": "${workspaceFolder}/node_modules/.bin/expo",
"args": ["start", "--ios"],
"options": {
"cwd": "${workspaceFolder}/node_modules/@toba/example/"
},
"problemMatcher": []
},
{
"label": "Example: Android",
"command": "${workspaceFolder}/node_modules/.bin/expo",
"args": ["start", "--android"],
"options": {
"cwd": "${workspaceFolder}/node_modules/@toba/example/"
},
"problemMatcher": []
}
]A CLI may be added later to simplify these commands but it's useful for these early releases to understand the command paths.
License
Copyright © 2019 Jason Abbott
This software is licensed under the MIT license. See the LICENSE file accompanying this software for terms of use.