Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/okp4/ui

🎨 Implementation of OKP4 UI components in React, TypeScript, and SASS.
https://github.com/okp4/ui

ddd event-sourcing hexagonal-architecture react sass storybook typescript ui-design web3

Last synced: 4 days ago
JSON representation

🎨 Implementation of OKP4 UI components in React, TypeScript, and SASS.

Awesome Lists containing this project

README 

        
# 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