Installation // Example // Contribution // Acknowledgement
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],
- 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.
All of Binding for Chakra-UI isn't completed, if you want to support this project, see the list below 🙌.
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
- [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
- [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
- [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
- [ ] Alert
- [x] Circular Progress
- [x] Circular Progress Label
- [x] Progress
- [x] Skeleton
- [x] SkeletonText
- [x] SkeletonCircle
- [x] Spinner
- [x] Toast
- [x] useToast
- [x] createStandaloneToast
- [x] Text
- [x] Heading
- [ ] Alert Dialog
- [ ] Drawer
- [ ] Menu
- [ ] Modal
- [ ] Popover
- [ ] Tooltip
- [ ] Accordion
- [ ] Tabs
- [ ] Visually Hidden
- [x] Breadcrumb
- [x] BreadcrumbItem
- [x] BreadcrumbLink
- [x] BreadcrumbSeparator
- [x] Link
- [x] LinkBox
- [x] LinkOverlay
- [x] Avatar
- [x] AvatarGroup
- [x] Icon
- [x] Image
- [x] Portal
- [x] Transitions
- [x] Fade
- [x] ScaleFade
- [x] Slide
- [x] SlideFade
- [x] Collapse
- [ ] useBoolean
- [ ] useBreakpointValue
- [ ] useClipboard
- [ ] useControllable
- [ ] useDisclosure
- [ ] useMediaQuery
- [ ] useMergeRefs
- [ ] useOutsideClick
- [ ] usePrefersReducedMotion
- [ ] useTheme
- [ ] useToken
- Please, refer with conventionalcommits.org for write
commit
message.
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
- chakra-ui/chakra-ui ⚡️ Simple, Modular & Accessible UI Components for your React Applications
- giraud/bs-css Statically typed DSL for writing css in reason.