WhereBy.Design

A nascent, work-in-progress design system for WhereBy.Us built with Vue.

How to work with the design system

Developing locally is half the fun (!), and to start -- after cloning the repo -- all you need to do is run the following from inside the project directory:

npm install
npm start

This spins-up a local server where localhost:8080 is the "front page" of the system, which isn't suuuper useful, and -- more importantly -- localhost:6060 is the system's documentation (where we work most of the time).

Adding a New Design Component

You would make a SomeComponentName.vue in the appropriate directory in /src/, such as src/Elements, src/Patterns, or src/Templates.

There is an ExampleComponent.vue that you can look at for any design-system specific things, such as the <docs></docs> tag for the documentation part of the design system. Other than that, it's a straight Vue component.

Building The System

Our design system can compile a UMD module that can be used in other node projects. In fact, in production, we publish this module to NPM so our other projects can install it like any other dependency. After changes have been committed, you generate this module with

npm run build:system

Publishing the system

To publish the system for production to NPM -- we need to figure out how to share or setup and individual WhereByUs NPM account, but until then you have to be @schoeyfield :/ -- you first need to compile the system as above, increment the version appropriate in package.json, and run

npm publish

You cannot overwrite an existing release, so bump that version.

Using the Design System in another local project

If you're making changes to a component and then testing out how it looks on a local branch of another project, you can have that project use the design system locally rather than from NPM. Compile the system (see above) then install it using

npm install --save file:/yourPathTo/whereby.design

Using the Design System in production

npm install --save wbu-design-system

Bumping Releases

npm run release

It uses release-it to do the following:

• Increment the package.json version
• Create a release tag in Github
• Commit all of that

It can also be configured to generate a conventional changelog and do all sorts of stuff. You would run it at the end of the sprint from the develop branch.