Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
maniator CMOS-5144 Code split the plasma build to be tree-shakeable (#251)
CMOS-5144 Code split the plasma build to be tree-shakeable
Latest commit b74105a Jul 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook Fixed config to properly include stories. Sep 25, 2018
docs Revert #248 (#255) Jul 17, 2019
flow configure flow to resolve modules, scss/css Apr 6, 2018
scripts Update scripts to remove version cleanser Jul 16, 2019
src fix external import Jul 17, 2019
stories clean up Jul 17, 2019
.babelrc Update files Jul 16, 2019
.eslintignore Update files Jul 16, 2019
.eslintrc Allow Loader to accept classNames or dotColor (#243) Jun 26, 2019
.flow-coverage.config.json
.flowconfig Added comment. Mar 18, 2019
.gitignore update the lib build Jul 16, 2019
.npmignore Update files Jul 16, 2019
.nvmrc Update node-sass for Node 12 compatibility (#245) Jul 12, 2019
.prettierignore Added .prettierignore. Feb 24, 2019
.prettierrc Add prettier Aug 3, 2018
.travis.yml Add Prettier (#209) Jan 28, 2019
CNAME restructure docs directory Dec 15, 2017
README.md Revert #248 (#255) Jul 17, 2019
StoryState.js Change withCounter implementation Mar 9, 2018
css.config.js Update files Jul 16, 2019
package.json 0.1.1 Jul 17, 2019
postcss.config.js add methods to sidenavbartop Jun 29, 2017
styleguide.config.js add styleguide to gh pages Sep 27, 2017
webpack.config.dev.js Update build and create a dist build for webpack Jul 15, 2019
webpack.config.dist.js Update build and create a dist build for webpack Jul 15, 2019
webpack.config.prod.js fix external pointing to the wrong place Jul 17, 2019
yarn.lock pin extract-text-webpack-plugin Jul 17, 2019

README.md

PLASMA by WeWork

Plasma is a design system for creating sensible, modern interfaces.

Component docs at http://plasma.guide

Storybook at http://plasma.guide/dev/storybook


IMPORTANT!

Select and Datepicker components do not work right now. Use react-select and datepicker directly in Spacestation.

Developing with Storybook

Running Storybook

  1. Run the Plasma Webpack dev server: yarn start
  2. Run the Storybook server: yarn storybook
  3. Go to http://localhost:6006/ 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!

Using the styleguide

Running

  1. Run yarn run styleguide.
  2. Load up http://0.0.0.0:6060

Building static version

  1. Run yarn run styleguide:build
  2. Files output to /styleguide

Building flow-typed definitions

  1. Run yarn flow:buildTypeDefs

This will output flow-typed compatible definitions of Flow types for Plasma. For Spacestation, you likely want to yarn flow:buildTypeDefs | pbcopy (if on Mac) and paste the contents to the plasma_vx.x.x.js under flow-typed/

Documenting components

  1. Run ./docs/publish.sh from the root dir. This will update the docs, commit to gh-pages, and push to github (updating http://plasma.guide)

Info here: https://react-styleguidist.js.org/docs/documenting.html

Creating a Pull Request / Publishing

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. If you've made implementation changes, run yarn test:update to update jest snapshots.
  4. PR will be reviewed
  5. When PR is accepted, it will be merged into master.
  6. (Optional) If you also need to publish a new Plasma 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. Run yarn run pack to bundle the .js and .css file into /dist folder.
  3. Run npm version patch. This will bump the version in package.json and create a new tag and push the tag to Github.
  4. Make sure you're logged in to NPM via npm login. login is in 1password, when prompted for email please use: dev-team@wework.com
  5. Run npm publish from the root directory to publish to NPM registry.
  6. Check https://www.npmjs.com/~wework-dev to make sure package is updated.

Developing with Spacestation

Link Plasma (you only need to do this once)

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

Developing with Spacestation

  1. Create a new Plasma dev branch: cd /plasma git checkout -b mybranch
  2. Run the Plasma dev server with watch: yarn watch
  3. Save any changes in Plasma, webpack should bundle changes in /dist
  4. Run Spacestion: cd /spacestation yarn start
  5. Changes you make in Plasma should automatically be picked up by Spacestation
  6. Follow "Creating a Pull Request / Publishing"

Using a published Plasma version from NPM

  1. Run yarn add @wework-dev/plasma in your project.

  2. Include the Plasma object (or individual components) in your Javascript. Plasma object example:

    import Plasma from '@wework-dev/plasma';
    <Plasma.Button label="Click it" />;

    Individual components example:

    import { Button } from '@wework-dev/plasma';
    <Button label="Click it" />;

Testing

For testing, Plasma uses Jest (https://facebook.github.io/jest/) with Enzyme (http://airbnb.io/enzyme/).

Tests are located in src/tests.

Flow coverage can be checked via yarn flow:coverage.

Running tests

  1. Run yarn test for a single run or yarn test:watch to watch for changes.
You can’t perform that action at this time.