https://github.com/codeforafrica/hurumap-ui
HURUmap UI React chart and visualisation components powering geo-data platforms across Africa. Accessible at https://codeforafrica.github.io/HURUmap-UI/
https://github.com/codeforafrica/hurumap-ui
charts code-for-africa data-visualization graphs hurumap hurumap-ui material-design react reactjs storybook
Last synced: about 1 year ago
JSON representation
HURUmap UI React chart and visualisation components powering geo-data platforms across Africa. Accessible at https://codeforafrica.github.io/HURUmap-UI/
- Host: GitHub
- URL: https://github.com/codeforafrica/hurumap-ui
- Owner: CodeForAfrica
- License: other
- Created: 2019-06-27T08:21:57.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2023-03-14T15:34:51.000Z (over 3 years ago)
- Last Synced: 2025-04-09T11:01:49.090Z (about 1 year ago)
- Topics: charts, code-for-africa, data-visualization, graphs, hurumap, hurumap-ui, material-design, react, reactjs, storybook
- Language: JavaScript
- Homepage: https://codeforafrica.github.io/HURUmap-UI/
- Size: 12.3 MB
- Stars: 5
- Watchers: 12
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# HURUmap UI
 [](https://www.gnu.org/licenses/gpl-3.0)
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
----
Hurumap-UI [Storybook](https://codeforafrica.github.io/hurumap-ui/).
## Style Guidelines
This project will be primarily using [airbnb react](https://github.com/airbnb/javascript/tree/master/react) and [material-ui](https://material-ui.com/) 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](./CONTRIBUTING.md) file on how to get started; or jump right into our [GitHub issues](issues).
### ✨ Contributors ✨
[TODO](https://www.npmjs.com/package/all-contributors-cli)
## Publish A New Release
To publish a new release, we use the excellent [yarn version](https://yarnpkg.com/lang/en/docs/cli/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](https://storybook.js.org/) 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/ && 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 .