Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rescript-ui/rescript-chakra
⚡️⚛️ ReScript bindings for @chakra-ui/react
https://github.com/rescript-ui/rescript-chakra
chakra-ui chakra-ui-react hacktoberfest react rescript rescript-bindings rescript-react
Last synced: about 1 month ago
JSON representation
⚡️⚛️ ReScript bindings for @chakra-ui/react
- Host: GitHub
- URL: https://github.com/rescript-ui/rescript-chakra
- Owner: rescript-ui
- Created: 2021-06-03T05:52:45.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-04T21:17:56.000Z (3 months ago)
- Last Synced: 2024-10-22T19:16:44.562Z (about 2 months ago)
- Topics: chakra-ui, chakra-ui-react, hacktoberfest, react, rescript, rescript-bindings, rescript-react
- Language: ReScript
- Homepage: https://rescript-chakra.vercel.app
- Size: 1.34 MB
- Stars: 66
- Watchers: 6
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome - rescript-ui/rescript-chakra - ⚡️⚛️ ReScript bindings for @chakra-ui/react (ReScript)
README
Installation // Example // Contribution // Acknowledgement## ToC
- [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
Run the following in your favorit console:
```console
yarn add rescript-chakra
```**OR**
```console
npm install --save rescript-chakra
```**Don't forget** install dependencies requirements of `@chakra-ui/react` (Skip when exist)
```console
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
```**OR**
```console
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)
```javascript
// JavaScript 🟨 | TypeScript 🟦
import { Box } from "@chakra-ui/react"
// m={2} refers to the value of `theme.space[2]`
Tomato
// You can also use custom values// sets margin `8px` on all viewports and `16px` from the first breakpoint and up
// ReScript 🟥
open Chakra
@react.component
let make = () => <>
// m={2} refers to the value of `theme.space[2]`
{"Tomato"->React.string}
// You can also use custom values
// sets margin `8px` on all viewports and `16px` from the first breakpoint and up
>
```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)
- [x] [Color and Background Color](https://chakra-ui.com/docs/features/style-props#color-and-background-color)
- [x] [Gradient](https://chakra-ui.com/docs/features/style-props#gradient)
- [x] [Layout width and height](https://chakra-ui.com/docs/features/style-props#layout-width-and-height)
- [x] [Flexbox](https://chakra-ui.com/docs/features/style-props#flexbox)
- [x] [Grid Layout](https://chakra-ui.com/docs/features/style-props#grid-layout)
- [x] [Background](https://chakra-ui.com/docs/features/style-props#background)
- [x] [Borders](https://chakra-ui.com/docs/features/style-props#borders)
- [x] [Border Radius](https://chakra-ui.com/docs/features/style-props#border-radius)
- [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_)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
- [x] Square
- [x] Circle
- [x] Container
- [x] Flex
- [x] Spacer
- [x] Grid
- [ ] GridItem
- [x] SimpleGrid
- [x] Stack
- [x] VStack
- [x] HStack
- [x] Wrap
- [x] WrapItem### Forms
- [x] Button
- [x] Button Group
- [ ] Checkbox
- [ ] Editable
- [ ] Form Control
- [ ] Icon Button
- [x] Input
- [x] InputGroup
- [x] InputLeftAddon
- [x] InputRightAddon
- [x] InputLeftElement
- [x] InputRightElement
- [ ] Number Input
- [ ] Pin Input
- [ ] Radio
- [x] Select
- [ ] Slider
- [ ] Switch
- [ ] Textarea### Data Display
- [x] Badge
- [x] Close Button
- [x] Code
- [x] Divider
- [x] Kbd
- [ ] List
- [ ] ListItem
- [ ] ListIcon
- [ ] OrderedList
- [ ] UnorderedList
- [x] Stat
- [x] StatGroup
- [ ] StatLabel
- [ ] StatHelpText
- [ ] StatNumber
- [ ] StatArrow
- [ ] Table
- [ ] Thead
- [ ] Tbody
- [ ] Tfoot
- [ ] Tr
- [ ] Th
- [ ] Td
- [ ] TableCaption
- [ ] Tag
- [ ] TagLabel
- [ ] TagLeftIcon
- [ ] TagRightIcon
- [ ] TagCloseButton### Feedback
- [ ] Alert
- [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
- [ ] Modal
- [ ] Popover
- [ ] Tooltip### Disclosure
- [ ] Accordion
- [ ] Tabs
- [ ] Visually Hidden### Navigation
- [x] Breadcrumb
- [x] BreadcrumbItem
- [x] BreadcrumbLink
- [x] BreadcrumbSeparator
- [x] Link
- [x] LinkBox
- [x] LinkOverlay### Media and Icons
- [x] Avatar
- [x] AvatarGroup
- [x] Icon
- [x] Image### Others
- [x] Portal
- [x] Transitions
- [x] Fade
- [x] ScaleFade
- [x] Slide
- [x] SlideFade
- [x] Collapse### Hooks
- [ ] useBoolean
- [ ] useBreakpointValue
- [ ] useClipboard
- [ ] useControllable
- [ ] useDisclosure
- [ ] useMediaQuery
- [ ] useMergeRefs
- [ ] useOutsideClick
- [ ] usePrefersReducedMotion
- [ ] useTheme
- [ ] useToken# Contribution
## Make a Pull Request
- 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
```console
hygen Box new --name Name
```- create ``
```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.