Neophobe Plebeian Mumpsimus

    rescript-chakra

    1.2.0-next.11 • 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.

    Install

    npm i rescript-chakra

    DownloadsWeekly Downloads

    3

    Version

    1.2.0-next.11

    License

    MIT

    Unpacked Size

    1.46 MB

    Total Files

    65

    Last publish

    Collaborators

    • ri7nz