@vinterior/design-system v0.0.3

Vinterior Design System

Developing with Storybook

Running Storybook

1. Run the design-system Webpack dev server: yarn start
2. Run the Storybook server: yarn storybook
3. Go to http://localhost:9009/ to view the Storybook

Developing with Storybook

1. Follow steps above "Running Storybook"
2. Create a new dev branch: git checkout -b mybranch
3. Add / update as necessary
4. Add stories to the stories/ directory as you add / update components!

Creating a Pull Request / Publishing / deploy

Creating a Pull Request

1. When you're ready, push your branch to Github and create a pull request.
2. If you've made visual changes, include screenshots.
3. PR will be reviewed
4. When PR is accepted, it will be merged into master.
5. (Optional) If you also need to publish a new design-system version, read that section.

Publishing to NPM

1. Create a separate PR or bump the npm version in the feature branch, do not publish from master.
2. Make sure you're logged in to NPM via npm login. When prompted for email please use: dev-team@vinterior.co
3. Run yarn publish to bump the version, bundle the .js and .css file into /dist folder and publish to npm
4. Check https://www.npmjs.com/~vinterior to make sure package is updated.

Deploying Live Version

1. On the same branch that was just published, run yarn deploy-storybook, this should build the static site and deploy to Github Pages
2. Visit [vinterior.github.io/design-system](https://vinterior.github.io/design-system) to check that your changes are now live

Developing with Vinterior App

Link design-system (you only need to do this once)

1. In your terminal, cd to local design-system repo.
2. Run yarn link.
3. cd to local Vinterior App repo.
4. Run yarn link @vinterior/design-system. This creates a symlink in Vinterior App's node_modules/@vinterior/design-system folder that points to local design-system repo.
5. (Optional) If you need to, you can unlink at any time with yarn unlink @vinterior/design-system

Developing with Vinterior App

1. Create a new design-system dev branch: cd /design-system git checkout -b mybranch
2. Run the design-system dev server with watch: yarn watch
3. Save any changes in design-system, webpack should bundle changes in /dist
4. Run Vinterior: cd /vinterior-app server
5. Changes you make in design-system should automatically be picked up by Vinterior App after running yarn build
6. Follow "Creating a Pull Request / Publishing"

Using a published design-system version from NPM

1. Run yarn add @vinterior/design-system in your project.

2. Include the design-system object (or individual components) in your Javascript. design-system object example:

   import design-system from '@vinterior/design-system';
   <design-system.Button text="Click it" />;

   Individual components example:

   import { Button } from '@vinterior/design-system';
   <Button text="Click it" />;