React Portland UI
A component & pattern library based on the Portland UI Kit.
Docs
If you're reading this you're here too soon!
Star the repo and come back later. Maybe it will be finished 😁
Instillation
npm install --save react-portland-ui
There's two ways to include the styles; via the compiled styles.css
or using the source stylus modules avaiable at stylus/index.styl
.
Using compiled styles
Best for simpler use cases without much customization.
From the root of your application:
Using stylus modules
For more advanced cases with custom styling needs. First, install stylus-relative-loader and configure it to use the resolve url
option.
From your stylus root:
@import '~react-portland-ui/dist/stylus/index'
Development
Clone the repo then
npm install
npm run dev
To use the dev version in other project use npm link. For local development use the sandbox.
Sandbox
A sandbox environment is included under sandbox
.
npm run sandbox:dev
and navigate to localhost:5000
.
Testing
npm test
Packages can be tested via their test.js
file.
Tools you'll need to be familiar with: karma, mocha, chai, sinon, enzyme, sinon-chai, chai-enzyme.
After starting the tests don't close the spawned chrome browser, just minimize it.
Example
packages/Button/test.js
;;;;; ;
Documentation
npm run docs:dev
and navigate to localhost:4000
.
Packages can be documented via their documentation.md
file and comments inline with their propTypes
.
Example
packages/Button/index.js
;;; static propTypes = className: PropTypesstring children: PropTypesnode /** * HTML type attribute */ type: PropTypesstring onClick: PropTypesfunc /** * If true button is ghost style */ ghost: PropTypesbool /** * If true button expands to fill container */ fluid: PropTypesbool /** * If true component will be big size */ big: PropTypesbool ; { const classes = ; if thiscontextreactFormalContext return <FormalButton className=classes type=thispropstype> thispropschildren </FormalButton> ; return <button className=classes type=thispropstype onClick=thispropsonClick > thispropschildren </button> ; }
packages/Button/documentation.md
---module: buttonsdescription: A button. Push it and it does stuff.--- #### Basic button<Example> <Button>Button</Button></Example> #### Ghost button<Example> <Button ghost>Button</Button></Example> #### Big button<Example> <Button big>Button</Button></Example>
The name
attribute can be resolved from the markdown front matter or inferred from the component class name.