Code Monkey home page Code Monkey logo

rescript-chakra's Introduction



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.

rescript-chakra's People

Contributors

r17x avatar semantic-release-bot avatar tjbo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

rescript-chakra's Issues

JSDoc comments causing build to fail

I installed this library with yarn add rescript-chakra . I followed all of the instructions in the README, including adding rescript-chakra to my "bs-dependencies" array in my bsconfig.json file.

When I ran my build with yarn rescript build -with-deps -w I encountered a syntax error stating that JSDoc comments are no longer supported by the ReScript compiler. Here is the full compiler error:

➜  mountain-climbers-dashboard git:(add-rescript-chakra-bindings) ✗ yarn rescript build -with-deps -w
Dependency on @rescript/react
Dependency on rescript-chakra
rescript: [1/160] src/Components/Chakra__Box.ast
FAILED: src/Components/Chakra__Box.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Box.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Box}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Box}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Box.res:449:3-451:6

  447 │ 
  448 │ let makeProps = (
  449 │   /**
  450 │     Component Props {Box}
  451 │    **/
  452 │   /**
  453 │     Margin and Padding

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Box}
   *".

rescript: [2/160] src/Components/Chakra__Kbd.ast
FAILED: src/Components/Chakra__Kbd.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Kbd.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Kbd}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Kbd}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Kbd.res:450:3-452:6

  448 │ 
  449 │ let makeProps = (
  450 │   /**
  451 │     Component Props {Kbd}
  452 │    **/
  453 │   /**
  454 │     Margin and Padding

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Kbd}
   *".

rescript: [3/160] src/Components/Chakra__Code.ast
FAILED: src/Components/Chakra__Code.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Code.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Code}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Code}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Code.res:451:3-453:6

  449 │ 
  450 │ let makeProps = (
  451 │   /**
  452 │     Component Props {Code}
  453 │    **/
  454 │   ~variant=?,
  455 │   /**

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Code}
   *".

rescript: [4/160] src/Components/Chakra__Grid.ast
FAILED: src/Components/Chakra__Grid.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Grid.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Grid}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Grid}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Grid.res:450:3-452:6

  448 │ 
  449 │ let makeProps = (
  450 │   /**
  451 │     Component Props {Grid}
  452 │    **/
  453 │   ~gap=?,
  454 │   ~rowGap=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Grid}
   *".

rescript: [5/160] src/Components/Chakra__Icon.ast
FAILED: src/Components/Chakra__Icon.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Icon.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Icon}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Icon}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Icon.res:410:3-412:6

  408 │ 
  409 │ let makeProps = (
  410 │   /**
  411 │     Component Props {Icon}
  412 │    **/
  413 │   ~viewBox=?,
  414 │   /**

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Icon}
   *".

rescript: [6/160] src/Components/Chakra__Link.ast
FAILED: src/Components/Chakra__Link.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Link.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Generic HTML Element <a/>
   8 │    **/
   9 │   ~download: string=?,
  10 │   ~href: string=?,

  I'm not sure what to parse here when looking at "DocComment 
    Generic HTML Element <a/>
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Link.res:422:3-424:6

  420 │ 
  421 │ let makeProps = (
  422 │   /**
  423 │     Component Props {Link}
  424 │    **/
  425 │   /**
  426 │     Margin and Padding

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Link}
   *".

rescript: [7/160] src/Components/Chakra__Stat.ast
FAILED: src/Components/Chakra__Stat.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Stat.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Stat}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Stat}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Stat.res:451:3-453:6

  449 │ 
  450 │ let makeProps = (
  451 │   /**
  452 │     Component Props {Stat}
  453 │    **/
  454 │   ~size=?,
  455 │   /**

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Stat}
   *".

rescript: [8/160] src/Components/Chakra__Text.ast
FAILED: src/Components/Chakra__Text.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Text.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Text}
   8 │    **/
   9 │   ~_as: AliasText.t=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Text}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Text.res:414:3-416:6

  412 │ 
  413 │ let makeProps = (
  414 │   /**
  415 │     Component Props {Text}
  416 │    **/
  417 │   ~align=?,
  418 │   ~casing=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Text}
   *".

rescript: [9/160] src/Components/Chakra__Wrap.ast
FAILED: src/Components/Chakra__Wrap.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Wrap.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Wrap}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Wrap}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Wrap.res:452:3-454:6

  450 │ 
  451 │ let makeProps = (
  452 │   /**
  453 │     Component Props {Wrap}
  454 │    **/
  455 │   ~align=?,
  456 │   ~basis=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Wrap}
   *".

rescript: [10/160] src/Components/Chakra__Badge.ast
FAILED: src/Components/Chakra__Badge.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Badge.res:6:3-9:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Badge}
   8 │     @see <https://chakra-ui.com/docs/data-display/badge#props>
   9 │    **/
  10 │   @as("as") ~_as: string=?,
  11 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Badge}
    @see <https://chakra-ui.com/docs/data-display/badge#props>
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Badge.res:452:3-454:6

  450 │ 
  451 │ let makeProps = (
  452 │   /**
  453 │     Component Props {Badge}
  454 │    **/
  455 │   ~variant=?,
  456 │   /**

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Badge}
   *".

rescript: [11/160] src/Components/Chakra__Image.ast
FAILED: src/Components/Chakra__Image.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Image.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Image}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Image}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Image.res:418:3-420:6

  416 │ 
  417 │ let makeProps = (
  418 │   /**
  419 │     Component Props {Image}
  420 │    **/
  421 │   ~sizes=?,
  422 │   ~htmlHeight=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Image}
   *".

rescript: [12/160] src/Components/Chakra__Input.ast
FAILED: src/Components/Chakra__Input.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Input.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Input}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~errorBorderColor: Identity.t=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Input}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Input.res:416:3-418:6

  414 │ 
  415 │ let makeProps = (
  416 │   /**
  417 │     Component Props {Input}
  418 │    **/
  419 │   ~errorBorderColor=?,
  420 │   ~focusBorderColor=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Input}
   *".

rescript: [13/160] src/Components/Chakra__Stack.ast
FAILED: src/Components/Chakra__Stack.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Stack.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Stack}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Stack}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Stack.res:454:3-456:6

  452 │ 
  453 │ let makeProps = (
  454 │   /**
  455 │     Component Props {Stack}
  456 │    **/
  457 │   ~align=?,
  458 │   ~basis=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Stack}
   *".

rescript: [14/160] src/Components/Chakra__Button.ast
FAILED: src/Components/Chakra__Button.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Button.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Button}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Button}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Button.res:461:3-463:6

  459 │ 
  460 │ let makeProps = (
  461 │   /**
  462 │     Component Props {Button}
  463 │    **/
  464 │   ~iconSpacing=?,
  465 │   ~isActive=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Button}
   *".

rescript: [15/160] src/Components/Chakra__Avatar.ast
FAILED: src/Components/Chakra__Avatar.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Avatar.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Avatar}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~getInitials: string => string=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Avatar}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Avatar.res:417:3-419:6

  415 │ 
  416 │ let makeProps = (
  417 │   /**
  418 │     Component Props {Avatar}
  419 │    **/
  420 │   /**
  421 │     Margin and Padding

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Avatar}
   *".

rescript: [16/160] src/Interfaces/Chakra__MakeProps.ast
FAILED: src/Interfaces/Chakra__MakeProps.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Interfaces/Chakra__MakeProps.res:1057:5-1060:6

  1055 ┆ @obj
  1056 ┆ external pseudo: (
  1057 ┆   /**
  1058 ┆   Margin and Padding
  1059 ┆   @see <https://chakra-ui.com/docs/features/style-props#margin-and-pa
       ┆ dding>
  1060 ┆  **/
  1061 ┆   ~margin: Identity.t=?,
  1062 ┆   ~marginTop: Identity.t=?,

  I'm not sure what to parse here when looking at "DocComment 
    Margin and Padding
    @see <https://chakra-ui.com/docs/features/style-props#margin-and-padding>
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Interfaces/Chakra__MakeProps.res:1268:5-1270:5

  1266 ┆ 
  1267 ┆ let make = (
  1268 ┆   /**
  1269 ┆  Margin and Padding
  1270 ┆ **/
  1271 ┆   ~margin=?,
  1272 ┆   ~marginTop=?,

  I'm not sure what to parse here when looking at "DocComment 
   Margin and Padding
  *".

rescript: [17/160] src/Components/Chakra__Flex.ast
FAILED: src/Components/Chakra__Flex.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Flex.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Flex}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Flex}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Flex.res:449:3-451:6

  447 │ 
  448 │ let makeProps = (
  449 │   /**
  450 │     Component Props {Flex}
  451 │    **/
  452 │   ~align=?,
  453 │   ~basis=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Flex}
   *".

rescript: [18/160] src/Components/Chakra__Center.ast
FAILED: src/Components/Chakra__Center.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Center.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Center}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Center}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Center.res:450:3-452:6

  448 │ 
  449 │ let makeProps = (
  450 │   /**
  451 │     Component Props {Center}
  452 │    **/
  453 │   /**
  454 │     Margin and Padding

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Center}
   *".

rescript: [19/160] src/Components/Chakra__Select.ast
FAILED: src/Components/Chakra__Select.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Select.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Select}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~errorBorderColor: Identity.t=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Select}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Select.res:420:3-422:6

  418 │ 
  419 │ let makeProps = (
  420 │   /**
  421 │     Component Props {Select}
  422 │    **/
  423 │   ~errorBorderColor=?,
  424 │   ~focusBorderColor=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Select}
   *".

rescript: [20/160] src/Components/Chakra__Circle.ast
FAILED: src/Components/Chakra__Circle.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Circle.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Circle}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Circle}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Circle.res:450:3-452:6

  448 │ 
  449 │ let makeProps = (
  450 │   /**
  451 │     Component Props {Circle}
  452 │    **/
  453 │   /**
  454 │     Margin and Padding

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Circle}
   *".

rescript: [21/160] src/Components/Chakra__HStack.ast
FAILED: src/Components/Chakra__HStack.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__HStack.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {HStack}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {HStack}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__HStack.res:411:3-413:6

  409 │ 
  410 │ let makeProps = (
  411 │   /**
  412 │     Component Props {HStack}
  413 │    **/
  414 │   ~align=?,
  415 │   ~basis=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {HStack}
   *".

rescript: [22/160] src/Components/Chakra__Square.ast
FAILED: src/Components/Chakra__Square.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Square.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Square}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Square}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Square.res:450:3-452:6

  448 │ 
  449 │ let makeProps = (
  450 │   /**
  451 │     Component Props {Square}
  452 │    **/
  453 │   /**
  454 │     Margin and Padding

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Square}
   *".

rescript: [23/160] src/Components/Chakra__Spacer.ast
FAILED: src/Components/Chakra__Spacer.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Spacer.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Flex}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Flex}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Spacer.res:449:3-451:6

  447 │ 
  448 │ let makeProps = (
  449 │   /**
  450 │     Component Props {Spacer}
  451 │    **/
  452 │   ~align=?,
  453 │   ~basis=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Spacer}
   *".

rescript: [24/160] src/Components/Chakra__VStack.ast
FAILED: src/Components/Chakra__VStack.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__VStack.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {VStack}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {VStack}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__VStack.res:411:3-413:6

  409 │ 
  410 │ let makeProps = (
  411 │   /**
  412 │     Component Props {VStack}
  413 │    **/
  414 │   ~align=?,
  415 │   ~basis=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {VStack}
   *".

rescript: [25/160] src/Components/Chakra__Heading.ast
FAILED: src/Components/Chakra__Heading.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Heading.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Heading}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Heading}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Heading.res:410:3-412:6

  408 │ 
  409 │ let makeProps = (
  410 │   /**
  411 │     Component Props {Heading}
  412 │    **/
  413 │   /**
  414 │     Margin and Padding

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Heading}
   *".

rescript: [26/160] src/Components/Chakra__Divider.ast
FAILED: src/Components/Chakra__Divider.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Divider.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {Divider}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Divider}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__Divider.res:451:3-453:6

  449 │ 
  450 │ let makeProps = (
  451 │   /**
  452 │     Component Props {Divider}
  453 │    **/
  454 │   ~variant=?,
  455 │   /**

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {Divider}
   *".

rescript: [27/160] src/Components/Chakra__LinkBox.ast
FAILED: src/Components/Chakra__LinkBox.ast

  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__LinkBox.res:6:3-8:6

   4 │ external make: (
   5 │   ~children: React.element=?,
   6 │   /**
   7 │     Component Props {LinkBox}
   8 │    **/
   9 │   ~_as: string=?,
  10 │   ~isTruncated: bool=?,

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {LinkBox}
   *".


  Syntax error!
  /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript-chakra/src/Components/Chakra__LinkBox.res:407:3-409:6

  405 │ 
  406 │ let makeProps = (
  407 │   /**
  408 │     Component Props {LinkBox}
  409 │    **/
  410 │   /**
  411 │     Margin and Padding

  I'm not sure what to parse here when looking at "DocComment 
    Component Props {LinkBox}
   *".

FAILED: subcommands failed.
Failure: /Users/moses/Code/projects/mountain-climbers/mountain-climbers-dashboard/node_modules/rescript/darwin/ninja.exe 

Thank you for your effort in producing these bindings and also for reviewing this issue. Please let me know if there is any other information I can provide to get to the bottom of this issue.

responsive values does not take effect

What's happening
When using responsive values with #array directive, only the last value takes effect, for all layouts

To Reproduce

open Chakra

@react.component
let make =  () =>
  <Stack direction={#array([#column, #row, #row, #row])}>
     ....
  </Stack>

The Stack will have a direction of row although if it's in a mobile layout

example repo: https://github.com/cciuenf/maroon/tree/feature/navbar

The NavBar component isn't responsive :/

Props for Responsive Value

After long discussion (Meet in Coffee Shop) with @gifaeriyanto, decided to changes props for Chakra Responsive Value. Changes will make it break, so this changes will happened in v2.x.x. This is Example :

<Box 
--  width={#array([#em(1.1), #em(3.), #em(5.)])}
/>
<Box 
++  width={#Responsive([#em(1.1), #em(3.), #em(5.)])}
/>
// OR Shorthand
<Box 
++  width={#R([#em(1.1), #em(3.), #em(5.)])}
/>

Thank you

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


The release branches are invalid in the branches configuration.

A minimum of 1 and a maximum of 3 release branches are required in the branches configuration.

This may occur if your repository does not have a release branch, such as master.

Your configuration for the problematic branches is [].


Good luck with your project ✨

Your semantic-release bot 📦🚀

Documentation Website

Currently, just use bsdoc for generate documentation based on source of code that write in this project.

I need a feedback for better documentation this project. If you interested, comment below 🙌

Thank you

The automated release is failing 🚨

🚨 The automated release from the 1.0.x branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the 1.0.x branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


The release 1.0.1 on branch 1.0.x cannot be published as it is out of range.

Based on the releases published on other branches, only versions within the range >=1.0.0 <1.0.0 can be published from branch 1.0.x.

The following commits are responsible for the invalid release:

  • chore: release branches update (cfb5387)
  • ci: change cache key (551f797)
  • chore: set semantic release plugin resolution (0862a5f)
  • ci: update branches (0393545)
  • test: add test for colors (97f51e0)
  • chore: setup test (8a9d78f)
  • ci: use cache yarn (#8) (10a8e1f)

Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch 1.0.x with git revert or git reset.

A valid branch could be main.

See the workflow configuration documentation for more details.


Good luck with your project ✨

Your semantic-release bot 📦🚀

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.