okp4/ui

# OKP4 UI

> Implementation of [OKP4] UI components in CSS, [Typescript](https://www.typescriptlang.org), and HTML.

[![Version](https://img.shields.io/github/v/release/okp4/ui)](https://github.com/okp4/ui/releases)
[![NPM](https://img.shields.io/npm/v/@okp4/ui)](https://www.npmjs.com/package/@okp4/ui)
[![Install Size](https://packagephobia.com/badge?p=@okp4/ui)](https://packagephobia.com/result?p=%40okp4%2Fui)
[![Lint](https://github.com/okp4/ui/actions/workflows/lint.yml/badge.svg)](https://github.com/okp4/ui/actions/workflows/lint.yml)
[![Build](https://github.com/okp4/ui/actions/workflows/build.yml/badge.svg)](https://github.com/okp4/ui/actions/workflows/build.yml)
[![Maintainability](https://api.codeclimate.com/v1/badges/696cb4f6326aebdc7abe/maintainability)](https://codeclimate.com/github/okp4/ui/maintainability)
[![Test Coverage](https://codecov.io/gh/okp4/ui/branch/main/graph/badge.svg?token=WHLU66SCC2)](https://codecov.io/gh/okp4/ui)
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fokp4%2Fui.svg?type=shield)](https://app.fossa.com/reports/e5217c6b-d64c-49c0-a3ce-a74484a9854c)

[![TypeScript](https://badgen.net/badge/icon/typescript?icon=typescript&label)](https://typescriptlang.org)
[![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB)](https://reactjs.org/)
[![Sass](https://img.shields.io/badge/-Sass-CC6699?logo=sass&logoColor=ffffff)](https://sass-lang.com/)
[![Storybook](https://img.shields.io/badge/Storybook-BC6884?logo=storybook&logoColor=white)](https://ui.okp4.space)
[![Yarn](https://img.shields.io/badge/-Yarn-2C8EBB?logo=Yarn&logoColor=ffffff)](https://yarnpkg.com/)
[![Prettier](https://img.shields.io/badge/-Prettier-F7B93E?logo=prettier&logoColor=white)](https://github.com/prettier/prettier)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
[![License](https://img.shields.io/badge/License-BSD_3--Clause-blue.svg)](https://opensource.org/licenses/BSD-3-Clause)

## Our vision

The [OKP4] Design System is a collection of clear guidelines, components, and resources that was created to aid in the design and development of our digital products - primarily our web apps or websites - for our customers.

The OKP4 Design System serves as a reference or source of truth for the teams working on [OKP4] digital products, enabling to design and develop with speed, consistency, and quality.

## Get started

The OKP4 Design System contains a collection of [React](https://reactjs.org) components that can be used to build accessible and performant React applications consistent with [OKP4] brand guidelines.

### Build

🚚 Install the dependencies:

```sh
yarn
```

🚀 Start Storybook and 👨‍💻 start editing.

```sh
yarn storybook
```

### Use

To get started using `@okp4/ui` first add or install the module to your existing React project using either `yarn` or `npm`.

```sh
yarn add @okp4/ui
```

or

```sh
npm install --save @okp4/ui
```

## Contributing

So you want to contribute? Great. We appreciate any help you're willing to give. Don't hesitate to open issues and/or submit pull requests.

Remember that this is the Design System we use at [OKP4](https://github.com/okp4). This is why we may have to refuse change requests simply because they do not comply with our internal requirements, and not because they are not relevant.

[OKP4]: https://okp4.network