collection-stats
CollectionHUD.Item
Usage
Scripts
link-plugin
: Links the Compass plugin and Compass for development along with React to ensure the
plugin and Compass are using the same React instance.
COMPASS_HOME=/path/to/my/compass npm run link-plugin
unlink-plugin
: Restores Compass and the plugin to their original unlinked state.
COMPASS_HOME=/path/to/my/compass npm run unlink-plugin
License
Apache 2
===
Features
Storybook
Develop and prototype your component with react-storybook in a standalone browser view, with linked stories and hot reloading.
To run storybook mode, type npm run storybook
, then open
http://localhost:9001 in a browser. You can now edit the source code
and hit save, and changes will immediately show in the browser, while maintaining the state
of the component(s).
Electron
Validate and test your component in an Electron window, styles included. The source automatically
compiles and the window content reloads when any file under ./src
changes.
To start Electron and render your component, type npm start
.
If you edit the source code and hit save, the source will rebuild and the window reload automatically. State is not maintained throughout reloads (to maintain application state, use storybook instead).
Enzyme
The test environment is configured to test components with Enzyme
(including full mount
mode through jsdom) and enzyme-chai.
See the test folder for examples. Run npm test
to execute the test suite.
Developing
Almost all of your development will happen in the ./src
directory. Add new components
to ./src/components
, actions to ./src/actions/index.js
and if you need additional
stores, add them to ./src/stores
.
Directory Structure
For completeness, below is a list of directories present in this module:
-
.storybook
react-storybook and webpack configuration. You usually don't need to touch this. -
electron
code to start electron, open a browser window and load the source. You don't usually need to touch this, unless you want to render something other than the main component in Electron. -
lib
compiled version of your components (plain javascript instead ofjsx
) and styles (css
instead ofless
). Never change anything here as this entire folder gets automatically created and overwritten. -
src
components, actions and stores source code, as well as style files. This is the place to implement your own components.npm run compile
will use./src
as input and create./lib
. -
stories
stories for react-storybook. You can add as many story files as you like, they are automatically added to storybook. -
test
implement your tests here, and name the files*.test.js
.
License
Apache 2.0