Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tenzir/ui-component-library
🎨 ReasonML-first UI Component Library
https://github.com/tenzir/ui-component-library
reasonml ui-components
Last synced: about 2 months ago
JSON representation
🎨 ReasonML-first UI Component Library
- Host: GitHub
- URL: https://github.com/tenzir/ui-component-library
- Owner: tenzir
- License: bsd-3-clause
- Archived: true
- Created: 2020-03-06T12:16:40.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T03:49:43.000Z (over 1 year ago)
- Last Synced: 2024-05-21T11:47:01.428Z (4 months ago)
- Topics: reasonml, ui-components
- Language: Reason
- Homepage: https://tenzir.github.io/ui-component-library
- Size: 18.9 MB
- Stars: 38
- Watchers: 12
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: COPYING
Awesome Lists containing this project
- awesome-list - ui-component-library - first UI Component Library | tenzir | 35 | (Reason)
README
Tenzir UI Component Library
A ReasonML-first UI component library
[![Storybook][storybook-badge]][storybook-url]
[![CI][ci-badge]][ci-url]
[![NPM Version][npm-badge]][npm-url]
[![Development Status][alpha-badge]][latest-release-url]
[![License][license-badge]][license-url]
[_Introduction_](#introduction) —
[_Getting Started_](#getting-started) —
[_Contributing Guidelines_][contributing-url] —
[_License_](#license)
## Introduction
Most UI-Libraries for use with ReasonML have bindings to existing UI-Libraries.
Wanting to be fully type-safe without outdated component bindings, leveraging
things like pattern-matching along the way, we decided to build our own
UI-Library, ReasonML-first. We will continually build on this and add
components as we need them. This means components may be missing, or lack
support of all the web API's needed in your specific use-case. We encourage
contribution ([Contributing Guidelines][contributing-url]) in these cases.
### Components
The following components are currently built.
- Button
- Card (optionally with a tabbed header)
- Checkbox
- Icons - A script generates bindings for [React
Icons](https://github.com/react-icons/react-icons). We currently generate
bindings to a subset that includes just the [Feather
Icons](https://feathericons.com/) (MIT licensed).
- Input
- Textarea
- Loader
- Alert
- Dropdown
- Dropdown with Action Button
- Segment
- Notifications
- Slider
- Tabs
Preview here: [Tenzir-Ui-Component-Library][storybook-url]
## Getting Started
### Installation
**Add dependency:**
```sh
yarn add tenzir-ui-component-library
```
**Add the library to the `bs-dependencies` in your `bsconfig.json`:**
```sh
{
...
"bs-dependencies": ["tenzir-ui-component-library"]
}
```
### Contributing / Development
We develop the components application agnostically with the help of
[_Storybook_](https://storybook.js.org/). The ReasonML code is compiled first
and is then imported as plain Javascript in the Storybook stories.
**Install dependencies:**
```sh
yarn
```
**Start ReasonML compiler with file-watcher:**
```sh
yarn start
```
**Start Storybook server (should be ran simultaniously):**
```sh
yarn server
```
## License
Tenzir UI-Component Library comes with a [3-clause BSD license][license-url].
[storybook-badge]: https://raw.githubusercontent.com/storybookjs/brand/master/badge/badge-storybook.svg
[storybook-url]: https://tenzir.github.io/ui-component-library/
[ci-url]: https://github.com/tenzir/ui-component-library/actions?query=branch%3Amaster+workflow%3A%22UI%20Components%22
[ci-badge]: https://github.com/tenzir/ui-component-library/workflows/UI%20Components/badge.svg?branch=master
[npm-badge]: https://img.shields.io/npm/v/tenzir-ui-component-library
[npm-url]: https://www.npmjs.com/package/tenzir-ui-component-library
[contributing-url]: https://github.com/tenzir/.github/blob/master/contributing.md
[latest-release-badge]: https://img.shields.io/github/commits-since/tenzir/ui-components/latest.svg?color=green
[latest-release-url]: https://github.com/tenzir/ui-components/releases
[license-badge]: https://img.shields.io/badge/license-BSD-blue.svg
[license-url]: https://github.com/tenzir/ui-components/blob/master/COPYING
[alpha-badge]: https://img.shields.io/badge/stage-alpha-blueviolet