# Pirati UI kit

This repository holds UI styleguide for Czech Pirate Party websites. It's
intention is to made a core framework to be used across all sites and build all
UI using it. This will ensure better consistency a easier updates.

It is built upon:

- [Patternlab](https://patternlab.io/) is a tool for developing design systems
- [Tailwind CSS](https://tailwindcss.com/) is a brilliant utility-first CSS framework built on top of PostCSS

## Getting Started

These instructions are for getting the project running off a local development environment:

- Install any system requirements on your dev environment
- Use NPM to install project dependencies and build the project

### System Requirements

- [Node.js](https://nodejs.org) (v14.5.x or later)

### Install and Run

It's JavaScript all the way down so once you have the the system requirements
you can run the following commands:

```
npm i
npm run develop
```

The `npm` command will install project dependencies and the `npm run develop`
command builds the project, sets up a local server for the Patternlab UI and
watches relevant template files to rebuild on any changes.

### Build

The build command compiles the styleguide CSS and the Patternlab output but it
doesn't create a server for the styleguide website. To build, run:

```
npm run build
```

### Releasing

First build for production as described previously:

```
npm run build
```

Now, make new version using [semver principle](https://semver.org/):

```
npm version [VERSION_NUMBER]
```

This will create a new git tag which will be recongnized by the build server and it will generate following:

- update `latest` pointer
- update minor version pointer like `1.x.x` in case this was a patch update or minor update
- update patch version pointer like `1.3.x` in case this was the patch update
- add `1.3.3` version if the tag name was `1.3.3`

### Running locally with Docker

Create a docker image:

```
docker build -t pirati-ui .
```

You can then run the docker container like this:

```
docker run -p 8001:80 pirati-ui:latest
```

Your docker container will be available at [http://localhost:8001](http://localhost:8001).

### Updating icons

This styleguide features iconset too. Icons themselves are managed using
[Icomoon](https://icomoon.io) web app. If you don't have your Icomoon account
yet, start by creating one. Then, use `source/icons/selection.json` to load
current project settings. Add/modify icons and finally download your new icon
font. Delete contents of the `source/icons` and put all the content from your
downloaded font. When finished, run `npm run update-iconset` that will update
both the style and pattern file automatically.

## Developing other websites with pirati-ui

In order to integrate `pirati-ui` with other websites, you will need to include
at least the CSS source that defines look and feel. Simply place the following
code in your `<head>`:

```html
<link rel="stylesheet" href="[ROOT_URL]/css/styles.css">
```

If you want to use the JS enahancements as well, you will also need to:

1. Include Vue.js:

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
```

2. Include `pirati-ui` JS bundle:

```html
<script src="[ROOT_URL]/js/main.bundle.js"></script>
```

Make sure that Vue.js is included *before* the JS bundle. The best place for
both of the JS sources is at the end of your HTML document.

The `[ROOT_URL]` should point to the root address of your `pirati-ui` installation. This can either be
one of official bundles hosted at `https://styleguide.pir-test.eu`:

- https://styleguide.pir-test.eu/latest/
- https://styleguide.pir-test.eu/1.x.x/
- ... and so on

Alternatively, you can run the `pirati-ui` locally. In this case, just run
`npm run develop` and use whatever opens in the browser as your `ROOT_URL`.
Usually, this will be `http://localhost:3000/`.