Skip to content

Commit

Permalink
feat(Feedback): add component binding for feedback (#16)
Browse files Browse the repository at this point in the history
* feat(Feedback): add component feedback

* Progress
* Skeleton
* SkeletonCircle
* SkeletonText
* Spinner

* fix!(Button,ButtonGroup): fix isDisabled props, make it bool

* fix!(SpacesProps): make closely with chakra-ui props value for spaces

* feat(Feedback): add Toast binding

* feat(Feedback): add binding for CircularProgress and CircularProgressLabel

* chore(devDeps): add configuration for running test

- [ ] Alert
- [x] Circular Progress
  - [x] Circular Progress Label
- [x] Progress
- [x] Skeleton
  - [x] SkeletonText
  - [x] SkeletonCircle
- [x] Spinner
- [x] Toast
  - [x] useToast
  - [x] createStandaloneToast
  • Loading branch information
r17x authored Oct 3, 2021
1 parent 799e1b6 commit e68c2cb
Show file tree
Hide file tree
Showing 19 changed files with 7,418 additions and 202 deletions.
97 changes: 63 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,38 @@
# rescript-chakra

> ReScript binding for React Chakra-UI.
## ToC

<!-- vim-markdown-toc GFM -->

* [Installation](#installation)
* [Example](#example)
* [Docs](#docs)
* [Style Props](#style-props)
* [Component](#component)
* [Layout](#layout)
* [Forms](#forms)
* [Data Display](#data-display)
* [Feedback](#feedback)
* [Typography](#typography)
* [Overlay](#overlay)
* [Disclosure](#disclosure)
* [Navigation](#navigation)
* [Media and Icons](#media-and-icons)
* [Others](#others)
* [Hooks](#hooks)
* [Contribution](#contribution)
* [Make a Pull Request](#make-a-pull-request)
* [Make a new component binding](#make-a-new-component-binding)
* [Acknowledgement](#acknowledgement)
- [Installation](#installation)
- [Example](#example)
- [Docs](#docs)
- [Style Props](#style-props)
- [Component](#component)
- [Layout](#layout)
- [Forms](#forms)
- [Data Display](#data-display)
- [Feedback](#feedback)
- [Typography](#typography)
- [Overlay](#overlay)
- [Disclosure](#disclosure)
- [Navigation](#navigation)
- [Media and Icons](#media-and-icons)
- [Others](#others)
- [Hooks](#hooks)
- [Contribution](#contribution)
- [Make a Pull Request](#make-a-pull-request)
- [Make a new component binding](#make-a-new-component-binding)
- [Acknowledgement](#acknowledgement)

<!-- vim-markdown-toc -->

## Installation

Run the following in your favorit console:

```console
yarn add rescript-chakra
```
Expand All @@ -52,16 +55,16 @@ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
```


Then, add `rescript-chakra` in your `bsconfig.json`:

```diff
-- "bs-dependencies": [],
++ "bs-dependencies": [rescript-chakra],
```

## Example

* following `chakra-ui` example [**here**](https://chakra-ui.com/docs/features/style-props#margin-and-padding)
- following `chakra-ui` example [**here**](https://chakra-ui.com/docs/features/style-props#margin-and-padding)

```javascript
// JavaScript 🟨 | TypeScript 🟦
Expand Down Expand Up @@ -89,9 +92,11 @@ let make = () => <>
Or you can check this [**Example**](https://github.com/ri7nz/rescript-chakra/tree/main/examples).

# Docs

All of Binding for Chakra-UI isn't completed, if you want to support this project, see the list below 🙌.

## Style Props

This is following and closely same with Chakra-UI. [**See Style Props**](https://chakra-ui.com/docs/features/style-props#reference) and Implemented typed **Props** with typed **CSS-Properties** use [bs-css](https://github.com/giraud/bs-css/blob/cb242dbd08a00bd848faecb756a9ddce68d8707a/bs-css/src/Css_AtomicTypes.rei).

- [x] [Margin and Padding](https://chakra-ui.com/docs/features/style-props#margin-and-padding)
Expand All @@ -106,13 +111,14 @@ This is following and closely same with Chakra-UI. [**See Style Props**](https:/
- [x] [Position](https://chakra-ui.com/docs/features/style-props#position)
- [x] [Shadow](https://chakra-ui.com/docs/features/style-props#shadow)
- [x] [Pseudo](https://chakra-ui.com/docs/features/style-props#pseudo)
- [ ] [Other Style Props](https://chakra-ui.com/docs/features/style-props#other-props) 🚧 (_Partially Implemented_)
- [ ] [Other Style Props](https://chakra-ui.com/docs/features/style-props#other-props) 🚧 (_Partially Implemented_)

All of Style Props implementation is write in File:[Chakra__MakeProps.res](https://github.com/ri7nz/rescript-chakra/blob/main/src/Interfaces/Chakra__MakeProps.res)
All of Style Props implementation is write in File:[Chakra\_\_MakeProps.res](https://github.com/ri7nz/rescript-chakra/blob/main/src/Interfaces/Chakra__MakeProps.res)

## Component

### Layout

- [x] Aspect Ratio
- [x] Box
- [x] Center
Expand All @@ -131,6 +137,7 @@ All of Style Props implementation is write in File:[Chakra__MakeProps.res](https
- [x] WrapItem

### Forms

- [x] Button
- [x] Button Group
- [ ] Checkbox
Expand All @@ -147,6 +154,7 @@ All of Style Props implementation is write in File:[Chakra__MakeProps.res](https
- [ ] Textarea

### Data Display

- [x] Badge
- [x] Close Button
- [x] Code
Expand Down Expand Up @@ -178,18 +186,26 @@ All of Style Props implementation is write in File:[Chakra__MakeProps.res](https
- [ ] TagCloseButton

### Feedback

- [ ] Alert
- [ ] Circular Progress
- [ ] Progress
- [ ] Skeleton
- [ ] Spinner
- [ ] Toast
- [x] Circular Progress
- [x] Circular Progress Label
- [x] Progress
- [x] Skeleton
- [x] SkeletonText
- [x] SkeletonCircle
- [x] Spinner
- [x] Toast
- [x] useToast
- [x] createStandaloneToast

### Typography

- [x] Text
- [x] Heading

### Overlay

- [ ] Alert Dialog
- [ ] Drawer
- [ ] Menu
Expand All @@ -198,11 +214,13 @@ All of Style Props implementation is write in File:[Chakra__MakeProps.res](https
- [ ] Tooltip

### Disclosure

- [ ] Accordion
- [ ] Tabs
- [ ] Visually Hidden

### Navigation

- [x] Breadcrumb
- [x] BreadcrumbItem
- [x] BreadcrumbLink
Expand All @@ -212,12 +230,14 @@ All of Style Props implementation is write in File:[Chakra__MakeProps.res](https
- [x] LinkOverlay

### Media and Icons

- [x] Avatar
- [x] AvatarGroup
- [x] Icon
- [x] Image

### Others

- [x] Portal
- [x] Transitions
- [x] Fade
Expand All @@ -227,6 +247,7 @@ All of Style Props implementation is write in File:[Chakra__MakeProps.res](https
- [x] Collapse

### Hooks

- [ ] useBoolean
- [ ] useBreakpointValue
- [ ] useClipboard
Expand All @@ -240,21 +261,29 @@ All of Style Props implementation is write in File:[Chakra__MakeProps.res](https
- [ ] useToken

# Contribution

## Make a Pull Request
* Please, refer with [conventionalcommits.org](https://www.conventionalcommits.org) for write `commit` message.

- Please, refer with [conventionalcommits.org](https://www.conventionalcommits.org) for write `commit` message.

## Make a new component binding

I'm use [hygen.io](https://hygen.io) for generate new component binding base on `Box.res`, see [\_templates/Box/new/new.ejs.t](https://github.com/ri7nz/rescript-chakra/blob/main/_templates/Box/new/new.ejs.t)
USAGE:
* basic

- basic

```console
hygen Box new --name Name
```
* create `<Flex />`

- create `<Flex />`

```console
hygen Box new --name Flex
```

# Acknowledgement
* [**chakra-ui/chakra-ui**](https://github.com/chakra-ui/chakra-ui) ⚡️ Simple, Modular & Accessible UI Components for your React Applications
* [**giraud/bs-css**](https://github.com/giraud/bs-css) Statically typed DSL for writing css in reason.

- [**chakra-ui/chakra-ui**](https://github.com/chakra-ui/chakra-ui) ⚡️ Simple, Modular & Accessible UI Components for your React Applications
- [**giraud/bs-css**](https://github.com/giraud/bs-css) Statically typed DSL for writing css in reason.
Loading

0 comments on commit e68c2cb

Please sign in to comment.