Adslot UI

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

Native

• Clone the repo: git clone [email protected]:Adslot/adslot-ui.git
• Install NPM dependencies: npm run deps

Visual Studio Code Remote - Containers

• 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.

Development build

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

Commands

# 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 [-- <path>] [--coverage]

# Optimize SVG before you commit
npm run svgo

# Generating types

# Generate types for all components
npm run generate-types

# Generate types for a single component
npm run generate-types -- --only=Button

# Generate types for a single component (this will run for all jsx files in the folder matching Button)
npm run generate-types -- --only=Button

# Generate types for a specific file
npm run generate-types -- --only=Button/index.jsx

# globs are accepted:
npm run generate-types -- --only="RichTe*"

# Copy generated types to es/*
npm run generate-types -- --copy

#Generate types with debugging output
npm run generate-types -- --debug

#Check validity of generated types
npm run type-check

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:

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