@toba/example NPM

Toba Example

yarn add @toba/example --dev

This 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.