# Test IO Design System

[![Build, Test and Deploy](https://github.com/test-IO/design-system/actions/workflows/workflow.yaml/badge.svg?branch=master)](https://github.com/test-IO/design-system/actions/workflows/workflow.yaml)
[![version](https://badge.fury.io/js/testio-designsystem.svg)](https://badge.fury.io/js/testio-designsystem)

**Website:** <https://designsystem.test.io/>


## Development

### Requirements

1. Node.js
2. NPM (comes with Node.js)

### Install dependencies

```sh
npm install
```

### Working locally

Starts watch tasks to compile when changes detected

```sh
npm start
```
Check the running app at: http://localhost:8080

### Creating a production build

Minify HTML, compress JS, inline and minify CSS.

```sh
npm run build
```

---

### Working with the design system and publishing to NPM/YARN

* Make sure to update the version number in package.json file for every pull request
* CircleCi will take care of publishing to npm and also adding a tag when the commits are merged to master
* CircleCI will publish it only if the package version has been increased

---

### Search (Algolia DocSearch)

The header search uses [Algolia DocSearch](https://docsearch.algolia.com/) with the index `testio_designsystem` filled by crawling the live site with [cirro-guides-scraper](https://github.com/test-IO/cirro-guides-scraper#usage), so new or renamed sections show up in search only after a re-index.

**Automatic re-index:** the `algolia_reindex` job in `.github/workflows/workflow.yaml` re-runs the scraper after every deploy from `master`. The live site is VPN-only, so the job builds the deployed commit, serves `dist/` on localhost and crawls that, using the repo secrets `ALGOLIA_WRITE_API_KEY` (Algolia write key) and `SCRAPER_REPO_CLONE_KEY` (deploy key for the private scraper repo). No manual step needed in the common case.

**Manual re-index:** clone [cirro-guides-scraper](https://github.com/test-IO/cirro-guides-scraper#usage) and do the setup variables mentioned there in `.env`, then run:

```sh
./docsearch run configs/testio_designsystem.json
```

⚠️ The live site is only reachable on the VPN, so turn the VPN on before running it locally.