wri-api-components

Components to use with WRI's API

WRI API Components

WRI API Components is a collection of React components shared with all WRI applications and they are based on WRI's API. The goal of this project is to centralize all common components and keep the consistency through the different apps.

Requirements 🛠️

node 8.11.2

Getting Started 👨‍💻


Once you have the project locally, run yarn installto install project's dependencies.

Then install peer dependencies running:

yarn add react react-dom vega vega-lib

And that's all! No need of more setup.

To start working run yarn start. This will run styleguidistresponsible of generating our styleguide. Now you are ready to code!

Adding a new component 👾

To add a new component, go to src/components, you will see a bunch of first-level folders, those are the sections, then choose where you want to create your component (or create a new section, see below).

The component folder needs the following structure:

- index.js (entrypoint, ususally where the component is defined)
- readme.md (file used to define how styleguidist will render the component).
- styles.scss (optional, if there are styles to apply)

Feel free to create as many file as you need to make your component work once you have the mandatory ones.

❗❗ As we are using CSS Modules don't forget to replace classNamewith styleNamein your component in order to allow CSS Modules compile the styles properly.

Adding a new section 📜

To add a new section, go to styleguide.config.jsfile, look for sectionsand add yours:

{
    name: 'Awesome section',
    components: () => ([ path.resolve(__dirname, 'src/components/awesome-section/*', 'index.js') ])
  }

Deploy 🚀


The deploy is set up with gh-pages. To deploy, styleguidist will generate a compiled and production-ready version and gh-pages will deploy it to the gh-pagesbranch automatically.

Those steps can be run just typing yarn deploy.

For more details, check package.json, scriptssection.

Troubleshooting ⚠️

Vegalibrary uses canvasdependency, this one at the same time depends on cairo. So if you are suffering installing canvasor related go to https://github.com/Automattic/node-canvas#compilingand follow the steps.

Recommendations 🐰


It's strongly recommended to use nvmfor mananing different Node versions easily.

Repository

https@github.com:resource-watch/wri-api-components


上一篇:aqueduct-flood
下一篇:react-css-modules

相关推荐

  • 高阶组件 + New Context API = ?

    1. 前言 继上次小试牛刀(https://github.com/SmallStoneSK/Blog/issues/6)尝到高价组件的甜头之后,现已深陷其中无法自拔。。。

    2 年前
  • 重构 - 设计API的扩展机制

    1.前言 上篇文章,主要介绍了重构的一些概念和一些简单的实例。这一次,详细的说下项目中的一个重构场景给API设计扩展机制。目的就是为了方便以后能灵活应对需求的改变。

    2 年前
  • 重新开坑,在 react 中使用 composition API

    emmm大家好,那个,虽然最近新型肺炎,搞的人心惶惶,没啥动力写码 其实我也没啥可写的了,但是闲着也是闲着,然后记起来 smox 弃坑了还有一堆星星,想着怎么重新开坑 背景 smox 弃坑,不是我任性...

    4 个月前
  • 配置节点表示为静态bower_components?

    Amol M KulkarniConnor Leech(https://stackoverflow.com/users/1933917/amolmkulkarni)提出了一个问题:configure ...

    2 年前
  • 足球特殊指数api接口示例

    分享下足球特殊指数数据,单双、总进球数、半全场赔率api接口示例,详情查看在线文档(https://www.shenlu88.com/doc.html) 接口返回的是Json数据,可以使用fastjs...

    6 个月前
  • 足球冠军指数 api接口示例

    分享下足球冠军指数API数据,接口示例如下,可查看在线文档(https://www.shenlu88.com/doc.... 接口返回的是Json数据,可以使用fastjson来解析 API...

    3 个月前
  • 超火js库: Lodash API例子 (持续更新~~~)

    lodash.js是一款超火的js库,在npm上平均周下载量达到了惊人的,github start大量框架都用到了lodash,包括拥有start的vue 本文对比英文文档,加上一些小栗子和个...

    1 年前
  • 谷歌地图API:带有多个标记的自动中心地图

    MultiformeIngegno(https://stackoverflow.com/users/1342772/multiformeingegno)提出了一个问题:Google Maps API ...

    2 年前
  • 谷歌地图API的多标记等

    StackTraceYo(https://stackoverflow.com/users/1050225/stacktraceyo)提出了一个问题:Google Maps API Multiple M...

    2 年前
  • 谷歌地图API捕获列表无法读取属性'offsetwidth '零

    hims056jaeyong(https://stackoverflow.com/users/1369235/hims056)提出了一个问题:Google MAP API Uncaught TypeE...

    2 年前

官方社区

扫码加入 JavaScript 社区