Revel

Design and develop clean, elegant, and performant Rebilly experiences.

About this repo

Revel is the design system used by designers and developers at Rebilly to build clean, elegant, and performant experiences for its merchants.

Commands

Install dependecies and start development

pnpm install && pnpm nx run revel-docs:dev

The documentation site in docs/ is its own nx project, revel-docs. It depends on revel, so a change to the library rebuilds the site. A change in docs/ affects only revel-docs, so it does not rebuild or retest the apps that use Revel.

| Command | Description | | ------------------------------ | ---------------------------------------------------------------- | | pnpm nx run revel-docs:dev | Run the dev server for the component documentation. | | pnpm nx run revel-docs:build | Build the library, then the documentation as a static HTML site. |

Commands

Run each with pnpm nx run revel:<command>.

| Command | Description | | ----------------- | -------------------------------------------------------------- | | build | Build the library (JS bundle + types). Does not build docs. | | build:watch | Build the library and rebuild on file changes. | | playground:dev | Run the playground dev server (see Playground). | | lint | Run ESLint and fail on any warning. | | lint --fix | Run ESLint and fix what it can. | | format | Check formatting with prettier. | | format:fix | Fix formatting with prettier. | | test:unit | Run the unit tests. | | test:unit:watch | Run the unit tests on changed files, in watch mode. |

Playground

Sometimes it is easier to test a complex configuration directly in a vue application, rather than through our vuepress documentation.

For this, we provide a playground server which can be run with:

pnpm nx run revel:playground:dev

Note: You must copy the playground component file /src/playground/Playground-copyme.vue to Playground.vue.