rescript-chakra

Installation // Example // Contribution // Acknowledgement

ToC

• Installation
• Example
• Docs
  • Style Props
  • Component
    • Layout
    • Forms
    • Data Display
    • Feedback
    • Typography
    • Overlay
    • Disclosure
    • Navigation
    • Media and Icons
    • Others
    • Hooks
• Contribution
  • Make a Pull Request
  • Make a new component binding
• Acknowledgement

Installation

Run the following in your favorit console:

yarn add rescript-chakra

OR

npm install --save rescript-chakra

Don't forget install dependencies requirements of @chakra-ui/react (Skip when exist)

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

OR

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

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

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

Example

• following chakra-ui example here

// JavaScript 🟨 | TypeScript 🟦
import { Box } from "@chakra-ui/react"
// m={2} refers to the value of `theme.space[2]`
<Box m={2}>Tomato</Box>
// You can also use custom values
<Box maxW="960px" mx="auto" />
// sets margin `8px` on all viewports and `16px` from the first breakpoint and up
<Box m={[2, 3]} />

// ReScript 🟥
open Chakra
@react.component
let make = () => <>
  // m={2} refers to the value of `theme.space[2]`
  <Box m={#2}> {"Tomato"->React.string} </Box>
  // You can also use custom values
  <Box maxW={#px(960)} mx=#auto />
  // sets margin `8px` on all viewports and `16px` from the first breakpoint and up
  <Box m={#array([#2, #3])} />
</>

Or you can check this Example.

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 and Implemented typed Props with typed CSS-Properties use bs-css.

• [x] Margin and Padding
• [x] Color and Background Color
• [x] Gradient
• [x] Layout width and height
• [x] Flexbox
• [x] Grid Layout
• [x] Background
• [x] Borders
• [x] Border Radius
• [x] Position
• [x] Shadow
• [x] Pseudo
• [ ] Other Style Props 🚧 (Partially Implemented)

All of Style Props implementation is write in File: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 for write commit message.

Make a new component binding

I'm use hygen.io for generate new component binding base on Box.res, see _templates/Box/new/new.ejs.t USAGE:

• basic

hygen Box new --name Name

• create <Flex />

hygen Box new --name Flex

Acknowledgement

• chakra-ui/chakra-ui ⚡️ Simple, Modular & Accessible UI Components for your React Applications
• giraud/bs-css Statically typed DSL for writing css in reason.