Skip to content

Latest commit

 

History

History
113 lines (72 loc) · 3.3 KB

DEVELOP.md

File metadata and controls

113 lines (72 loc) · 3.3 KB

Develop

Create new component

Follow the guidelines.

Create new theme

Follow the guidelines.

Documentation

We are using react-styleguidist. Documentation and examples are available here.

Build the doc:

yarn doc

Run the doc on locahost:6060:

yarn start

Tests

We are using jest and enzyme.

Run the tests in watch mode:

yarn test --watch

Coverage

Run coverage:

yarn coverage

Then open the file coverage/lcov-report/index.html in your browser.

Publish on npmjs.com

Run publish:

publish:public

You need to enter the new version number in the command line. Then the new version must be published on npmjs.com.

Publish a development version on npmjs.com

This version WILL NOT be displayed to other in npmjs.com.

Run publish:

publish:beta

You need to enter the new version number in the command line. Append -beta.0 to the current version or increase the beta number. Then the new version must be published on npmjs.com with the tag beta.

How to use SVG

Before adding an SVG file in this folder please clean it using svgo or svgomg.

After optimization, verify you can use it Openlayers using this code sandbox.

By default the svg loader will load the svg file as a react component if you want to load svg file as a base64 data URI use the extension .url.svg :

// Import as a React component:
import NorthArrow from 'northArrow.svg';
// Use: <NorthArrow />

// Import as a base64 data URI (or with an url the file is too big):
import northArrow from 'northArrow.url.svg';
// northArrow = "data:image/svg+xml;base64,PHN2ZyB4...."

You could also use others loaders (ex: svg-inline-loader , svg-url-loader ...) . To use these loaders just adapt the extension of the svg file and add the loader config in styleguide.config.js, then you will be able to use it like this :

// Import as an inline svg:
import northArrow from 'northArrow.svginline.svg';
// northArrow = "<svg xmlns='http://www.w3.org/2000/svg' height='192' ...> ... </svg>"

// Import as an encoded inline svg data URI (or with an url the file is too big):
import northArrow from 'northArrow.svgurl.svg';
// northArrow = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='192' ...%3E ... %3C/svg%3E"

How to use SVG with a dynamic size

In case you want your SVG fits perfectly his parent div you need to remove width and height attributes of <svg> and replace it by a viewBox property, like this:

Replace

`<svg width="192" height="192">`

by

`<svg viewBox="0 0 192 192">`