Adslot UI

!Build Status
!Coverage Status
!Linting Status
!Optimisation Status

See the docs at ui.adslot.com

Core component library. By Adslot

A library of core components used to develop our Adslot and Symphony products.

Technology:

- React
- ES201x (using Babel\)
- Webpack
- ESLint
- Autoprefixer

Development

To get started, take a look at our Contributing guidelines

$3

- Clone the repo: git clone git@github.com:Adslot/adslot-ui.git
- Install NPM dependencies: npm run deps

$3

- Install Docker
- Install Visual Studio Code
- Install Visual Studio Code Remote - Containers extension in your VS Code.
- Start VS Code and run Remote-Containers: Clone Repository in Container Volume... from the Command Palette.
- Authenticate with your GitHub account.
- Enter adslot/adslot-ui in the input box that appears and press Enter.
- VS Code window (instance) will reload, clone the source code of this project, and start building the dev container. A progress notifications provides status updates.
- After the build completes, VS Code will automatically connect to the container. You can now work with the repository source code in this independent environment as you would if you had cloned the code locally.

Notes:

- Due to bind mount performance issues on Windows and macOS, the steps above uses the Clone Repository in Container Volume method. Other options can be found here.

$3

- Every branch has its own build of the documentation app ready at: https://--adslot-ui.netlify.app

Commands

``sh


Start for development

npm start

Start the dev-server without automatic refresh

npm run start:cold

Just build the dist version and copy static files

npm run dist

Lint all files in src (also automatically run after tests)

npm run lint

Run tests and posttest linting

npm run test [-- --no-coverage]

Run tests and rebuild on file changes.

npm run test:watch [-- ] [--coverage]

Optimize SVG before you commit


npm run svgo
`

Build Profiling

To generate a profile: npm run profile

Upload the new stats.json file to Webpack Analyse Tool.

Optimizing Performance of Stateless Components

Add the following to /docs/Layout/index.jsx:

`js
import Perf from 'react-addons-perf';

window.Perf = Perf;
`

- In the browser, run Perf.start() to start recording.
- Interact the component in the way that feels slow.
- Run Perf.stop() to stop recording.
- Run Perf.printWasted()` to see the nodes that are re–rendering but do not change the DOM.
- Re-test to make sure you're improving performance.

Design tokens

See adslot-ui/system