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: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/okp4/ui
• Owner: okp4
• License: bsd-3-clause
• Created: 2021-12-27T14:03:55.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-12T01:06:40.000Z (over 1 year ago)
• Last Synced: 2024-04-09T12:06:00.118Z (about 1 year ago)
• Topics: ddd, event-sourcing, hexagonal-architecture, react, sass, storybook, typescript, ui-design, web3
• Language: TypeScript
• Homepage: https://ui.okp4.space/
• Size: 26.2 MB
• Stars: 28
• Watchers: 2
• Forks: 2
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE-OF-CONDUCT.md

Awesome Lists containing this project

• awesome-ccamel - okp4/ui - 🎨 Implementation of OKP4 UI components in React, TypeScript, and SASS. (TypeScript)

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