Contributing to the playground

The playground application is still under development.

The playground is a web application to experiment and test the framework tools and components in real-time in local environment and also to preview the framework functionalities in production environment.

It is similar to Storybook but with custom user experience.

Each tool or component can have sandboxes which represent isolated examples or use cases. The sandboxes are written in markdown JavaScript JSX snippets so they are executed in runtime instead of compilation time.

The playground is basically a webpack web application written in JavaScript listing the tools and components sandboxes and letting the user choose which one to render.

Setting up

The repository has to be set up first. See workflow instructions.

Then the playground can be installed:

bash

# at root folder
cd playground
npm install

Running

bash

# at root folder
cd playground
npm run develop

It is automatically reloaded when any of the sandboxes files are updated.

Sandboxes

Each sandbox file has to follow the following file path:

packages/[PACKAGE]/src/[COMPONENT]/[COMPONENT].[SANDBOX].sandbox.md

For example. Package name core, component name Button, and sandbox name basic will be located at:

packages/core/src/Button/Button.basic.sandbox.md

All package tools/components have to have a basic sandbox.

The sandbox file is a markdown file with a JavaScript JSX snippet containing the example or use case code. Sandboxes have available all the Arwes packages and some external libraries. This information is detailed in the application information.

All sandboxes files are imported as text files and listed in a "playground config" file. According to the selected sandbox in the application, the respective source code is rendered in runtime.

Update Workflow

Once a package component is updated, the playground application will require the source code to be compiled in CommonJS.

bash

# at root folder
npm run compile-commonjs