├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── rescript.json ├── src ├── HeadlessUI.res └── Props.res └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* 131 | 132 | # Vim 133 | .snowpack 134 | 135 | # ReScript build files 136 | **/*.res.js 137 | /lib 138 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this project will be documented in this file. 3 | 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 6 | 7 | ## [0.1.2] - 12-02-2024 8 | 9 | ### Changed 10 | * Update version to republish to NPM 11 | 12 | ## [0.1.1] - 12-01-2024 13 | 14 | ### Changed 15 | * Unpublished errors from NPM 16 | 17 | ## [0.1.0] - 12-01-2024 18 | 19 | ### Added 20 | * Initial commit for `rescript-headlessui` with all current v2.2 bindings 21 | 22 | [0.1.1]: https://github.com/cbowling/rescript-headlessui/compare/v0.1.0...v0.1.1 23 | [0.1.0]: https://github.com/cbowling/rescript-headlessui/compare/HEAD...v0.1.0 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) <2024> Chris Bowling 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rescript-headlessui 2 | 3 | [![npm](https://img.shields.io/npm/v/rescript-headlessui.svg)](https://www.npmjs.com/package/rescript-headlessui) 4 | 5 | This library provides [ReScript](https://rescript-lang.org/) bindings for [HeadlessUI](https://headlessui.com/) React components. 6 | 7 | ## Installation 8 | 9 | ```sh 10 | npm install rescript-headlessui 11 | ``` 12 | 13 | Add it to `bs-dependencies` in your `rescript.json`: 14 | 15 | ```json 16 | { 17 | "bs-dependencies": ["rescript-headlessui"] 18 | } 19 | ``` 20 | 21 | ## Usage 22 | 23 | ### Props 24 | 25 | To use `ReactDOM.domProps` in all components, it was necessary to remove collisions. This was achieved by maintaining a custom list of props that excludes most of the fields defined by HeadlessUI. 26 | 27 | The only exception is for components with event handlers or names resembling event handlers (e.g., `onChange`). Instead of removing these properties globally, they were overridden in the specific modules where they are used. For example, `` should be written as ``, with the function defined as `@as("onChange") onChangeHeadless?: ReactEvent.Form.t => unit`. 28 | 29 | If you need one of the properties listed below, please wrap the component in a native element. 30 | 31 | ``` 32 | {disabled, value, defaultValue, by, multiple, name, form, children, as_, type, checked, defaultChecked, order, role, autoFocus, open_} 33 | ``` 34 | 35 | ### Union type bindings 36 | 37 | Many of the HeadlessUI bindings allow union types, which can be challenging to represent in ReScript. When the allowed values were well-defined, they were converted into variants: 38 | 39 | ```rescript 40 | // 41 | role?: @string 42 | [ 43 | | #dialog 44 | | #alertdialog 45 | ], 46 | 47 | //