https://github.com/wework/plasma
https://github.com/wework/plasma
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/wework/plasma
- Owner: wework
- Created: 2016-06-27T18:08:04.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T06:05:25.000Z (over 3 years ago)
- Last Synced: 2025-06-09T13:37:00.818Z (11 months ago)
- Language: JavaScript
- Size: 68.8 MB
- Stars: 48
- Watchers: 48
- Forks: 11
- Open Issues: 75
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-github-projects - plasma - No description provided ⭐48 `JavaScript` (📦 Legacy & Inactive Projects)
README
**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/](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:
```javascript
import Plasma from '@wework-dev/plasma';
;
```
Individual components example:
```javascript
import { Button } from '@wework-dev/plasma';
;
```
## 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.