{"id":13457108,"url":"https://github.com/rescript-ui/rescript-chakra","last_synced_at":"2025-03-24T12:30:45.689Z","repository":{"id":46628438,"uuid":"373396052","full_name":"rescript-ui/rescript-chakra","owner":"rescript-ui","description":"⚡️⚛️ ReScript bindings for @chakra-ui/react","archived":false,"fork":false,"pushed_at":"2025-01-08T17:06:59.000Z","size":1416,"stargazers_count":66,"open_issues_count":0,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-14T08:08:58.679Z","etag":null,"topics":["chakra-ui","chakra-ui-react","hacktoberfest","react","rescript","rescript-bindings","rescript-react"],"latest_commit_sha":null,"homepage":"https://rescript-chakra.vercel.app","language":"ReScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rescript-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"r17x","patreon":"ri7nz","ko_fi":"ri7nz","custom":["https://paypal.me/ri7666","https://trakteer.id/ri7nz","https://saweria.co/r17x","https://www.buymeacoffee.com/ri7nz"]}},"created_at":"2021-06-03T05:52:45.000Z","updated_at":"2025-01-08T17:07:02.000Z","dependencies_parsed_at":"2024-08-20T07:04:09.209Z","dependency_job_id":"364c87f0-2fb3-461b-9fad-b3f8c383388e","html_url":"https://github.com/rescript-ui/rescript-chakra","commit_stats":null,"previous_names":["ri7nz/rescript-chakra"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescript-ui%2Frescript-chakra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescript-ui%2Frescript-chakra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescript-ui%2Frescript-chakra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescript-ui%2Frescript-chakra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rescript-ui","download_url":"https://codeload.github.com/rescript-ui/rescript-chakra/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245269700,"owners_count":20587830,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chakra-ui","chakra-ui-react","hacktoberfest","react","rescript","rescript-bindings","rescript-react"],"created_at":"2024-07-31T08:01:33.272Z","updated_at":"2025-03-24T12:30:44.998Z","avatar_url":"https://github.com/rescript-ui.png","language":"ReScript","funding_links":["https://github.com/sponsors/r17x","https://patreon.com/ri7nz","https://ko-fi.com/ri7nz","https://paypal.me/ri7666","https://trakteer.id/ri7nz","https://saweria.co/r17x","https://www.buymeacoffee.com/ri7nz"],"categories":["ReScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./rescript-chakra.png\" /\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e // \u003ca href=\"#example\"\u003eExample\u003c/a\u003e // \u003ca href=\"#contribution\"\u003eContribution\u003c/a\u003e // \u003ca href=\"#acknowledgement\"\u003eAcknowledgement\u003c/a\u003e\n\u003c/p\u003e\n\n## ToC\n\n\u003c!-- vim-markdown-toc GFM --\u003e\n\n- [Installation](#installation)\n- [Example](#example)\n- [Docs](#docs)\n  - [Style Props](#style-props)\n  - [Component](#component)\n    - [Layout](#layout)\n    - [Forms](#forms)\n    - [Data Display](#data-display)\n    - [Feedback](#feedback)\n    - [Typography](#typography)\n    - [Overlay](#overlay)\n    - [Disclosure](#disclosure)\n    - [Navigation](#navigation)\n    - [Media and Icons](#media-and-icons)\n    - [Others](#others)\n    - [Hooks](#hooks)\n- [Contribution](#contribution)\n  - [Make a Pull Request](#make-a-pull-request)\n  - [Make a new component binding](#make-a-new-component-binding)\n- [Acknowledgement](#acknowledgement)\n\n\u003c!-- vim-markdown-toc --\u003e\n\n## Installation\n\nRun the following in your favorit console:\n\n```console\nyarn add rescript-chakra\n```\n\n**OR**\n\n```console\nnpm install --save rescript-chakra\n```\n\n**Don't forget** install dependencies requirements of `@chakra-ui/react` (Skip when exist)\n\n```console\nyarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4\n```\n\n**OR**\n\n```console\nnpm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4\n```\n\nThen, add `rescript-chakra` in your `bsconfig.json`:\n\n```diff\n-- \"bs-dependencies\": [],\n++ \"bs-dependencies\": [rescript-chakra],\n```\n\n## Example\n\n- following `chakra-ui` example [**here**](https://chakra-ui.com/docs/features/style-props#margin-and-padding)\n\n```javascript\n// JavaScript 🟨 | TypeScript 🟦\nimport { Box } from \"@chakra-ui/react\"\n// m={2} refers to the value of `theme.space[2]`\n\u003cBox m={2}\u003eTomato\u003c/Box\u003e\n// You can also use custom values\n\u003cBox maxW=\"960px\" mx=\"auto\" /\u003e\n// sets margin `8px` on all viewports and `16px` from the first breakpoint and up\n\u003cBox m={[2, 3]} /\u003e\n\n// ReScript 🟥\nopen Chakra\n@react.component\nlet make = () =\u003e \u003c\u003e\n  // m={2} refers to the value of `theme.space[2]`\n  \u003cBox m={#2}\u003e {\"Tomato\"-\u003eReact.string} \u003c/Box\u003e\n  // You can also use custom values\n  \u003cBox maxW={#px(960)} mx=#auto /\u003e\n  // sets margin `8px` on all viewports and `16px` from the first breakpoint and up\n  \u003cBox m={#array([#2, #3])} /\u003e\n\u003c/\u003e\n```\n\nOr you can check this [**Example**](https://github.com/ri7nz/rescript-chakra/tree/main/examples).\n\n# Docs\n\nAll of Binding for Chakra-UI isn't completed, if you want to support this project, see the list below 🙌.\n\n## Style Props\n\nThis is following and closely same with Chakra-UI. [**See Style Props**](https://chakra-ui.com/docs/features/style-props#reference) and Implemented typed **Props** with typed **CSS-Properties** use [bs-css](https://github.com/giraud/bs-css/blob/cb242dbd08a00bd848faecb756a9ddce68d8707a/bs-css/src/Css_AtomicTypes.rei).\n\n- [x] [Margin and Padding](https://chakra-ui.com/docs/features/style-props#margin-and-padding)\n- [x] [Color and Background Color](https://chakra-ui.com/docs/features/style-props#color-and-background-color)\n- [x] [Gradient](https://chakra-ui.com/docs/features/style-props#gradient)\n- [x] [Layout width and height](https://chakra-ui.com/docs/features/style-props#layout-width-and-height)\n- [x] [Flexbox](https://chakra-ui.com/docs/features/style-props#flexbox)\n- [x] [Grid Layout](https://chakra-ui.com/docs/features/style-props#grid-layout)\n- [x] [Background](https://chakra-ui.com/docs/features/style-props#background)\n- [x] [Borders](https://chakra-ui.com/docs/features/style-props#borders)\n- [x] [Border Radius](https://chakra-ui.com/docs/features/style-props#border-radius)\n- [x] [Position](https://chakra-ui.com/docs/features/style-props#position)\n- [x] [Shadow](https://chakra-ui.com/docs/features/style-props#shadow)\n- [x] [Pseudo](https://chakra-ui.com/docs/features/style-props#pseudo)\n- [ ] [Other Style Props](https://chakra-ui.com/docs/features/style-props#other-props) 🚧 (_Partially Implemented_)\n\nAll of Style Props implementation is write in File:[Chakra\\_\\_MakeProps.res](https://github.com/ri7nz/rescript-chakra/blob/main/src/Interfaces/Chakra__MakeProps.res)\n\n## Component\n\n### Layout\n\n- [x] Aspect Ratio\n- [x] Box\n- [x] Center\n  - [x] Square\n  - [x] Circle\n- [x] Container\n- [x] Flex\n  - [x] Spacer\n- [x] Grid\n  - [ ] GridItem\n- [x] SimpleGrid\n- [x] Stack\n  - [x] VStack\n  - [x] HStack\n- [x] Wrap\n  - [x] WrapItem\n\n### Forms\n\n- [x] Button\n  - [x] Button Group\n- [ ] Checkbox\n- [ ] Editable\n- [ ] Form Control\n- [ ] Icon Button\n- [x] Input\n  - [x] InputGroup\n  - [x] InputLeftAddon\n  - [x] InputRightAddon\n  - [x] InputLeftElement\n  - [x] InputRightElement\n- [ ] Number Input\n- [ ] Pin Input\n- [ ] Radio\n- [x] Select\n- [ ] Slider\n- [ ] Switch\n- [ ] Textarea\n\n### Data Display\n\n- [x] Badge\n- [x] Close Button\n- [x] Code\n- [x] Divider\n- [x] Kbd\n- [ ] List\n  - [ ] ListItem\n  - [ ] ListIcon\n  - [ ] OrderedList\n  - [ ] UnorderedList\n- [x] Stat\n  - [x] StatGroup\n  - [ ] StatLabel\n  - [ ] StatHelpText\n  - [ ] StatNumber\n  - [ ] StatArrow\n- [ ] Table\n  - [ ] Thead\n  - [ ] Tbody\n  - [ ] Tfoot\n  - [ ] Tr\n  - [ ] Th\n  - [ ] Td\n  - [ ] TableCaption\n- [ ] Tag\n  - [ ] TagLabel\n  - [ ] TagLeftIcon\n  - [ ] TagRightIcon\n  - [ ] TagCloseButton\n\n### Feedback\n\n- [ ] Alert\n- [x] Circular Progress\n  - [x] Circular Progress Label\n- [x] Progress\n- [x] Skeleton\n  - [x] SkeletonText\n  - [x] SkeletonCircle\n- [x] Spinner\n- [x] Toast\n  - [x] useToast\n  - [x] createStandaloneToast\n\n### Typography\n\n- [x] Text\n- [x] Heading\n\n### Overlay\n\n- [ ] Alert Dialog\n- [ ] Drawer\n- [ ] Menu\n- [ ] Modal\n- [ ] Popover\n- [ ] Tooltip\n\n### Disclosure\n\n- [ ] Accordion\n- [ ] Tabs\n- [ ] Visually Hidden\n\n### Navigation\n\n- [x] Breadcrumb\n  - [x] BreadcrumbItem\n  - [x] BreadcrumbLink\n  - [x] BreadcrumbSeparator\n- [x] Link\n- [x] LinkBox\n  - [x] LinkOverlay\n\n### Media and Icons\n\n- [x] Avatar\n  - [x] AvatarGroup\n- [x] Icon\n- [x] Image\n\n### Others\n\n- [x] Portal\n- [x] Transitions\n  - [x] Fade\n  - [x] ScaleFade\n  - [x] Slide\n  - [x] SlideFade\n  - [x] Collapse\n\n### Hooks\n\n- [ ] useBoolean\n- [ ] useBreakpointValue\n- [ ] useClipboard\n- [ ] useControllable\n- [ ] useDisclosure\n- [ ] useMediaQuery\n- [ ] useMergeRefs\n- [ ] useOutsideClick\n- [ ] usePrefersReducedMotion\n- [ ] useTheme\n- [ ] useToken\n\n# Contribution\n\n## Make a Pull Request\n\n- Please, refer with [conventionalcommits.org](https://www.conventionalcommits.org) for write `commit` message.\n\n## Make a new component binding\n\nI'm use [hygen.io](https://hygen.io) for generate new component binding base on `Box.res`, see [\\_templates/Box/new/new.ejs.t](https://github.com/ri7nz/rescript-chakra/blob/main/_templates/Box/new/new.ejs.t)\nUSAGE:\n\n- basic\n\n```console\nhygen Box new --name Name\n```\n\n- create `\u003cFlex /\u003e`\n\n```console\nhygen Box new --name Flex\n```\n\n# Acknowledgement\n\n- [**chakra-ui/chakra-ui**](https://github.com/chakra-ui/chakra-ui) ⚡️ Simple, Modular \u0026 Accessible UI Components for your React Applications\n- [**giraud/bs-css**](https://github.com/giraud/bs-css) Statically typed DSL for writing css in reason.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frescript-ui%2Frescript-chakra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frescript-ui%2Frescript-chakra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frescript-ui%2Frescript-chakra/lists"}