diff --git a/.github/workflows/build_js.yml b/.github/workflows/build_js.yml new file mode 100644 index 0000000..7f07382 --- /dev/null +++ b/.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 diff --git a/.github/workflows/dynamic-security.yml b/.github/workflows/dynamic-security.yml new file mode 100644 index 0000000..26a424d --- /dev/null +++ b/.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 }} diff --git a/.gitignore b/.gitignore index 3b7f80d..96ab72e 100644 --- a/.gitignore +++ b/.gitignore @@ -63,4 +63,6 @@ dist/ package-lock.json coverage/ -todo.txt \ No newline at end of file +todo.txt + +temp/ \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..26ac540 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "semi": false, + "singleQuote": true, + "printWidth": 80, + "useTabs": false, + "tabWidth": 2 +} diff --git a/CODEOWNERS b/CODEOWNERS new file mode 100644 index 0000000..0917974 --- /dev/null +++ b/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 diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..848a59a --- /dev/null +++ b/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 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..bcf5227 --- /dev/null +++ b/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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..cfcfb10 --- /dev/null +++ b/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 + +
+ +