feat: stimulus-zod-form

Author: ajaishankar

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+docs/lib

.eslintrc.js

@@ -0,0 +1,22 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "prettier"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+  ],
+  rules: {
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+  },
+  env: {
+    browser: true,
+    node: true,
+  },
+};

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+coverage

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  plugins: [
+    "prettier-plugin-organize-imports"
+  ],
+  printWidth: 120,
+  pluginSearchDirs: false,
+  organizeImportsSkipDestructiveCodeActions: true,
+  trailingComma: "es5",
+};

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+  },
+  "html.format.maxPreserveNewLines": 0,
+  "html.format.wrapAttributes": "preserve-aligned",
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -0,0 +1,60 @@
+# Stimulus Zod Form
+
+### Stimulus Zod Validated Form
+
+For the ten people on earth who want to use [Zod](https://zod.dev/) with [Stimulus](https://stimulus.hotwired.dev/) for client side validation.
+
+This package was inspired by [Remix Validated Form](https://www.remix-validated-form.io/) but a whole lot simpler thanks to Stimulus!
+
+### Usage
+
+Define your schema and register the controllers
+
+```ts
+import { Application } from "@hotwired/stimulus"
+import { FormController, FieldController } from "stimulus-zod-form";
+import { z } from "zod";
+
+const PersonSchema = z.object({
+  name: z.string().min(3),
+  email: z.string().email("invalid_email"),
+  addresses: z.array(z.object({ city: z.string() }))
+})
+
+const PersonFormController = FormController(PersonSchema);
+
+window.Stimulus = Application.start();
+Stimulus.register("form", PersonFormController);
+Stimulus.register("field", FieldController);
+```
+
+Let the controllers spring to life!
+
+```html
+<form data-controller="form"
+  data-form-field-outlet=".form-field"
+  data-action="form#submit"
+  data-form-error-map-value='{ "invalid_email": "correo inválido", ... }'>
+
+  <div data-form-target="error"></div>
+
+  <div data-controller="field" class="form-field">
+   <input name="addresses[0].city"
+     data-field-target="input"
+     data-action="blur->field#setTouched blur->form#validate" />
+   <div data-field-target="error"></div>
+  </div>
+</form>
+```
+
+### Summary
+
+In the sample code above note the following
+
+* Form field outlets `data-form-field-outlet`
+* Form validate on submit `data-action="form#submit"`
+* Field validate on blur `data-action="blur->field#setTouched blur->form#validate"`
+* Field input target `data-field-target="input"`
+* Field error target `data-field-target="error"`
+* Form error target ` data-form-target="error"`
+* Error localization `data-form-error-map-value`

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+};

license.md

@@ -0,0 +1,22 @@
+
+MIT License
+
+Copyright (c) 2023 Ajai Shankar
+
+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.