Add wrappers

.github/workflows/build_js.yml

@@ -0,0 +1,25 @@
+name: Test
+on:
+  push:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  build:
+    name: Test Wrapper
+    strategy:
+      fail-fast: false
+
+    runs-on: 'ubuntu-latest'
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Setup project
+        run: npm install
+      - name: Lint
+        run: npm run lint
+      - name: Test
+        run: npm run test

.github/workflows/dynamic-security.yml

@@ -0,0 +1,19 @@
+name: update-security
+
+on:
+  push:
+    paths:
+      - SECURITY.md
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  update-security:
+    permissions:
+      contents: write
+      pull-requests: write
+      pages: write
+    uses: thoughtbot/templates/.github/workflows/dynamic-security.yaml@main
+    secrets:
+      token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -63,4 +63,6 @@ dist/
 package-lock.json
 
 coverage/
-todo.txt
+todo.txt
+
+temp/

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "useTabs": false,
+  "tabWidth": 2
+}

CODEOWNERS

@@ -0,0 +1,15 @@
+# Lines starting with '#' are comments.
+# Each line is a file pattern followed by one or more owners.
+
+# More details are here: https://help.github.com/articles/about-codeowners/
+
+# The '*' pattern is global owners.
+
+# Order is important. The last matching pattern has the most precedence.
+# The folders are ordered as follows:
+
+# In each subsection folders are ordered first by depth, then alphabetically.
+# This should make it easy to add new rules without breaking existing ones.
+
+# Global rule:
+* @jho406

CODE_OF_CONDUCT.md

@@ -0,0 +1,6 @@
+# Code of conduct
+
+By participating in this project, you agree to abide by the
+[thoughtbot code of conduct][1].
+
+[1]: https://thoughtbot.com/open-source-code-of-conduct

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Johny Ho
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.

README.md

@@ -0,0 +1,133 @@
+# candy_wrapper
+
+'candy_wrapper's are lightweight wrapper components around popular UI libraries made to work with [form_props]. Easily
+use the power of Rails forms with any supported React UI library.
+
+## Component status
+
+Each component are meant to be copied from this repo to your own project and customized to your liking. There are no
+CLI tools to help. just copy and paste from github.
+
+| `form_props` helper           | Component              | Vanilla React      | React Aria           | NextUI               |
+| :---------------------------- | :--------------------- | :----------------- | :------------------- | :------------------- |
+| `f.text_field`                | Checkbox               | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.collection_check_boxes`    | CollectionCheckboxes   | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.collection_radio_buttons`  | CollectionRadioButtons | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.color_field`               | ColorField             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.date_field`                | DateField              | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.email_field`               | EmailField             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+|                               | FieldError             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.month_field`               | MonthField             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.number_field`              | NumberField            | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.password_field`            | PasswordField          | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.range_field`               | RangeField             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.search_field`              | SearchField            | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.select`                    | Select                 | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.tel_field`                 | TelField               | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.text_field`                | TextField              | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.time_field`                | TimeField              | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.url_field`                 | UrlField               | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.text_area`                 | TextArea               | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.grouped_collection_select` | Select                 | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.weekday_select`            | Select                 | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.time_zone_select`          | Select                 | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+
+## Installation
+
+```
+npm install -D candy_wrapper
+```
+
+Go to the wrapper directory in this repo and copy the wrappers for the UI library of your choice into your project.
+
+# Usage
+
+Once you've copied the components to your project. Use [form_props] to build your form:
+
+```ruby
+json.newPostForm do
+  form_props(@post) do |f|
+    f.text_field :title
+    f.submit
+  end
+end
+```
+
+This would create a payload that looks something this:
+
+```js
+{
+  someForm: {
+    props: {
+      id: "create-post",
+      action: "/posts/123",
+      acceptCharset: "UTF-8",
+      method: "post"
+    },
+    extras: {
+      method: {
+        name: "_method",
+        type: "hidden",
+        defaultValue: "patch",
+        autoComplete: "off"
+      },
+      utf8: {
+        name: "utf8",
+        type: "hidden",
+        defaultValue: "\u0026#x2713;",
+        autoComplete: "off"
+      }
+      csrf: {
+        name: "utf8",
+        type: "authenticity_token",
+        defaultValue: "SomeTOken!23$",
+        autoComplete: "off"
+      }
+    },
+    inputs: {
+      title: {name: "post[title]", id: "post_title", type: "text", defaultValue: "hello"},
+      submit: {type: "submit", value: "Update a Post"}
+    }
+  }
+}
+```
+
+Take the payload and pass it to the wrapper:
+
+```js
+import {Form, TextField} from './copied_components'
+
+const {form, extras, inputs} = newPostForm
+
+<Form {...form} extras={extras}>
+  <TextField {...inputs.title} label="Post title">
+  <button {...inputs.submit}>
+</Form>
+```
+
+## Server errors
+
+Each wrapper comes with inline support for server errors which renders a FieldError
+underneath the input.
+
+```js
+import {Form, TextField} from './copied_components'
+
+const validationErrors = {
+  full_title: "Invalid length"
+}
+
+const {form, extras, inputs} = newPostForm
+
+<Form {...form} extras={extras}>
+  <TextField {...inputs.title} label="Post title" errorKey="full_title">
+  <button {...inputs.submit}>
+</Form>
+```
+
+## Contributors
+
+Thank you, [contributors]!
+
+[contributors]: https://github.com/thoughtbot/candy_wrapper/graphs/contributors
+[form_props]: https://github.com/thoughtbot/form_props

SECURITY.md

@@ -0,0 +1,20 @@
+<!-- START /templates/security.md -->
+# Security Policy
+
+## Supported Versions
+
+Only the the latest version of this project is supported at a given time. If
+you find a security issue with an older version, please try updating to the
+latest version first.
+
+If for some reason you can't update to the latest version, please let us know
+your reasons so that we can have a better understanding of your situation.
+
+## Reporting a Vulnerability
+
+For security inquiries or vulnerability reports, visit
+<https://thoughtbot.com/security>.
+
+If you have any suggestions to improve this policy, visit <https://thoughtbot.com/security>.
+
+<!-- END /templates/security.md -->

package.json

@@ -1,13 +1,14 @@
 {
-  "name": "@thoughtbot/candywrappa",
+  "name": "@thoughtbot/candy_wrapper",
   "version": "0.0.1",
-  "description": "bare forms",
+  "description": "Use rails forms with popular react UI libraries",
   "scripts": {
     "build": "tsup",
+    "build:wrappers": "tsc --project ./wrappers/tsconfig.json && rm -r wrappers/js/* && mv -v temp/wrappers/ts/* wrappers/js",
     "dev": "tsup --watch",
     "clean": "rm -rf dist",
     "lint": "run-p lint:eslint lint:types lint:prettier",
-    "lint:eslint": "eslint --max-warnings=0 --ext js,jsx,ts,tsx ./candywrappa",
+    "lint:eslint": "eslint --max-warnings=0 --ext js,jsx,ts,tsx ./candy_wrapper",
     "lint:prettier": "prettier --check '**/*' --ignore-unknown",
     "lint:types": "tsc",
     "fix:prettier": "prettier --write '**/*' --ignore-unknown",
@@ -20,25 +21,20 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/thoughtbot/form_props.git"
+    "url": "git+https://github.com/thoughtbot/candy_wrapper.git"
   },
   "author": "Johny Ho",
-  "main": "dist/cjs/form_props.cjs",
-  "module": "dist/form_props.mjs",
-  "types": "dist/form_props.d.mts",
+  "main": "dist/cjs/candy_wrapper.cjs",
+  "module": "dist/candy_wrapper.mjs",
+  "types": "dist/candy_wrapper.d.mts",
   "exports": {
-    "./package.json": "./package.json",
-    "./components": {
-      "types": "./dist/form_props.d.mts",
-      "import": "./dist/form_props.mjs",
-      "default": "./dist/cjs/form_props.cjs"
-    }
+    "./package.json": "./package.json"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/thoughtbot/form_props/issues"
+    "url": "https://github.com/thoughtbot/candy_wrapper/issues"
   },
-  "homepage": "https://github.com/thoughtbot/form_props#readme",
+  "homepage": "https://github.com/thoughtbot/candy_wrapper#readme",
   "devDependencies": {
     "@nextui-org/react": "^2.4.8",
     "@react-aria/test-utils": "^1.0.0-alpha.2",
@@ -63,16 +59,10 @@
     "typedoc-plugin-markdown": "^4.2.3",
     "typedoc-plugin-missing-exports": "^3.0.0",
     "typescript": "^5.5.3",
-    "vitest": "^2.0.2"
+    "vitest": "^2.0.2",
+    "@types/react": "^18.3.12"
   },
   "peerDependencies": {
-    "react": "^18.3.1"
-  },
-  "dependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "react-aria-components": "^1.4.1",
-    "react-stately": "^3.33.0",
-    "yarn": "^1.22.22"
+    "react": "^18 || ^19"
   }
 }