You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 DownExpand 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:/
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 DownExpand 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.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.