HURUmap UI

This library package React components that are used to visualize HURUmap data.

HURUmap is an interactive web platform that allows citizens and journalists to explore, visualise, and download census data. This gives them the power to give context to stories that was otherwise hard to spot. Accessible at https://hurumap.org

---

Hurumap-UI Storybook.

Style Guidelines

This project will be primarily using airbnb react and material-ui as our main style guides when implementing components.This is to create code consistency and readability.

Contributing

If you'd like to contribute to sensors.AFRICA, check out the CONTRIBUTING.md file on how to get started; or jump right into our GitHub issues.

✨ Contributors ✨

TODO

Publish A New Release

To publish a new release, we use the excellent yarn version cli command, configured to both publish to npm as well as deploy storybook to GitHub pages.

yarn version

Storybook

Storybook is an open-source tool that provides a sandbox to develop and visualize components in isolation. See the Storybook site for more information about the tool.

HURUmap uses Storybook to view and work with the UI components developed in the HURUmap packages.

View online at: https://codeforafrica.github.io/HURUmap-UI/

Run locally in your development environment running: yarn start from the top-level Gutenberg directory.

Publishing

Run yarn publish:packages otherwise always publish using lerna --contents argument like so yarn lerna publish --contents build.

Development

When adding a new package, be sure to add the alias to the babel.config.js and .eslintrc.js:

• babel.config.js

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
  plugins: ['inline-react-svg'],
  env: {
    development: {
      plugins: [
        [
          'module-resolver',
          {
            alias: {
              '@hurumap-ui/content': './packages/content/src',
              '@hurumap-ui/charts': './packages/charts/src',
              '@hurumap-ui/core': './packages/core/src'
            }
          }
        ]
      ]
    }
  }
};

• .eslintrc.js

module.exports = {
  ...,
  settings: {
    'import/resolver': {
      'babel-module': {
        alias: {
          '@hurumap-ui/content': './packages/content/src',
          '@hurumap-ui/charts': './packages/charts/src',
          '@hurumap-ui/core': './packages/core/src'
        }
      }
    }
  }
};

• .babelrc for storybook https://storybook.js.org/docs/configurations/custom-babel-config/

{
  "presets": ["@babel/preset-react", "@babel/preset-env"],
  "plugins": ["inline-react-svg",  [
      "module-resolver",
      {
        "alias": {
          "@hurumap-ui/content": "./packages/content/src",
          "@hurumap-ui/charts": "./packages/charts/src",
          "@hurumap-ui/core": "./packages/core/src"
        }
      }
    ]]
}

Testing

Jest is used for testing.

• Run tests for packages with command yarn lerna run test
• Run packge test cd packages/<package name> && yarn test

---

License

GNU GPLv3

Copyright (C) 2018 Code for Africa

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/.