Skip to content

Latest commit

 

History

History
297 lines (237 loc) · 6.91 KB

README.md

File metadata and controls

297 lines (237 loc) · 6.91 KB
Raw



Installation // Example // Contribution // Acknowledgement

ToC

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.

All of Style Props implementation is write in File:Chakra__MakeProps.res

Component

Layout

  • Aspect Ratio
  • Box
  • Center
    • Square
    • Circle
  • Container
  • Flex
    • Spacer
  • Grid
    • GridItem
  • SimpleGrid
  • Stack
    • VStack
    • HStack
  • Wrap
    • WrapItem

Forms

  • Button
    • Button Group
  • Checkbox
  • Editable
  • Form Control
  • Icon Button
  • Input
    • InputGroup
    • InputLeftAddon
    • InputRightAddon
    • InputLeftElement
    • InputRightElement
  • Number Input
  • Pin Input
  • Radio
  • Select
  • Slider
  • Switch
  • Textarea

Data Display

  • Badge
  • Close Button
  • Code
  • Divider
  • Kbd
  • List
    • ListItem
    • ListIcon
    • OrderedList
    • UnorderedList
  • Stat
    • StatGroup
    • StatLabel
    • StatHelpText
    • StatNumber
    • StatArrow
  • Table
    • Thead
    • Tbody
    • Tfoot
    • Tr
    • Th
    • Td
    • TableCaption
  • Tag
    • TagLabel
    • TagLeftIcon
    • TagRightIcon
    • TagCloseButton

Feedback

  • Alert
  • Circular Progress
    • Circular Progress Label
  • Progress
  • Skeleton
    • SkeletonText
    • SkeletonCircle
  • Spinner
  • Toast
    • useToast
    • createStandaloneToast

Typography

  • Text
  • Heading

Overlay

  • Alert Dialog
  • Drawer
  • Menu
  • Modal
  • Popover
  • Tooltip

Disclosure

  • Accordion
  • Tabs
  • Visually Hidden

Navigation

  • Breadcrumb
    • BreadcrumbItem
    • BreadcrumbLink
    • BreadcrumbSeparator
  • Link
  • LinkBox
    • LinkOverlay

Media and Icons

  • Avatar
    • AvatarGroup
  • Icon
  • Image

Others

  • Portal
  • Transitions
    • Fade
    • ScaleFade
    • Slide
    • SlideFade
    • Collapse

Hooks

  • useBoolean
  • useBreakpointValue
  • useClipboard
  • useControllable
  • useDisclosure
  • useMediaQuery
  • useMergeRefs
  • useOutsideClick
  • usePrefersReducedMotion
  • useTheme
  • useToken

Contribution

Make a Pull Request

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.