rescript-chakra

1.2.0 • Public • Published



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

  • [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

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.

Package Sidebar

Install

npm i rescript-chakra

Weekly Downloads

0

Version

1.2.0

License

MIT

Unpacked Size

1.42 MB

Total Files

64

Last publish

Collaborators

  • ri7nz