Contributing components

Contributing components to the library

If you plan on contributing a component to the library, you should ensure that it follows the atomic design pattern laid out here for re-usability across different projects. Components that are tightly coupled to the layout of a specific project or have limited use cases are not good candidates for the component library, and will likely be rejected in a pull request. The majority of the components in the library can be classified into the lower atom and molecule categories, and any larger container components must have a high degree of re-usability to be added to the library.

The below instructions describe how to develop a new component using the Storybook js UI environment, but you can also implement and test your components with another React interface using the instructions described here.

---

Adding the component

1. Make a fork of the component library and clone the repo locally to make changes:

git clone https://github.com/USERNAME/react-component-lib.git

2. Add your new React component file into the src/components/ directory. The current convention is to add a subdirectory with the same name as the component that include the .js file and any static files such as .css styles or images that are used in the component.

3. Export your component from its file with the ES6 export statement:

export default LeafletMap;

UI development with Storybook

4. Import your new component in the src/stories/index.js file--this is where all of the stories that will be displayed in the Storybook are defined:

import LeafletMap from '../src/components/LeafletMap/LeafletMap';

5. Write a story (or several) for your component, passing in any needed props:

storiesOf('Maps/Leaflet Map', module)
  .add('default', ()=>(
    <LeafletMap
      center={[40, -70]}
      zoomLevel={3}
    />
  ))
  .add('standard markers', ()=>(
    <LeafletMap
      markerData={leafletMarkers}
      markerType={'StandardMarkers'}
      center={[0,-20]}
      zoomLevel={2}
    />
  )
);

6. Install npm dependencies and run the storybook application to view and test your interactive component at localhost:9001. At this point you can continue to edit your component until it is complete and the changes will be reflected in the storybook:

npm install
npm run storybook

Exporting your component for use in other projects

7. Add an export statement for your component in src/components/index.js. This will associate your component definition with a named export from the package (note that you can define a different name for the exported component with the as statement, but this strays away from the current design pattern).

export {default as LeafletMap} from './LeafletMap/LeafletMap.js';

8. Push your changes to GitHub and open a pull request if you want your component to be added to the master repo. Once the changes have been merged, you can install the latest version of the npm package with your component included by following these instructions. While you are waiting for the merge, you can also build the npm package from your fork by replacing asascience with your username in your project's package.json:

"react-component-lib": "git+https://github.com/asascience/react-component-lib.git",