Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

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.