feat: library rewrite & Superforms v2 support (#131)

Co-authored-by: AdrianGonz97 <[email protected]>
svecosystem · Feb 20, 2024 · 790f8d4 · 790f8d4
1 parent 67253af
commit 790f8d4
Show file tree

Hide file tree

Showing 410 changed files with 17,931 additions and 8,868 deletions.
diff --git a/.changeset/curvy-stingrays-compare.md b/.changeset/curvy-stingrays-compare.md
@@ -0,0 +1,5 @@
+---
+"formsnap": minor
+---
+
+Rewrite entire library - see https://formsnap.dev
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -1,41 +1,41 @@
 name: Release
 
 on:
-  push:
-    branches:
-      - main
+    push:
+        branches:
+            - main
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 jobs:
-  release:
-    permissions:
-      contents: write # to create release (changesets/action)
-      pull-requests: write # to create pull request (changesets/action)
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v3
-        with:
-          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
-          fetch-depth: 0
-      - uses: pnpm/[email protected]
-        with:
-          version: 8.6.3
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "18.x"
-          cache: pnpm
+    release:
+        permissions:
+            contents: write # to create release (changesets/action)
+            pull-requests: write # to create pull request (changesets/action)
+        name: Release
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout Repo
+              uses: actions/checkout@v3
+              with:
+                  # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+                  fetch-depth: 0
+            - uses: pnpm/[email protected]
+              with:
+                  version: 8.6.3
+            - name: Setup Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: "18.x"
+                  cache: pnpm
 
-      - run: pnpm install --frozen-lockfile
+            - run: pnpm install --frozen-lockfile
 
-      - name: Create Release Pull Request or Publish to npm
-        id: changesets
-        uses: changesets/action@v1
-        with:
-          publish: pnpm release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+            - name: Create Release Pull Request or Publish to npm
+              id: changesets
+              uses: changesets/action@v1
+              with:
+                  publish: pnpm release
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -1,16 +1,78 @@
-.DS_Store
 node_modules
-/build
-/dist
-/.svelte-kit
-/package
-.cache
+.DS_Store
+.AppleDouble
+.LSOverride
+
+dist
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
 .env
-.env.*
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
-.contentlayer
-.contentlayer/*
-.vercel
-dist
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+sites/docs/.vercel
+packages/formsnap/doc
diff --git a/.npmrc b/.npmrc
diff --git a/.prettierrc b/.prettierrc
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Hunter Johnston <https://github.com/huntabyte>
+
+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
@@ -5,12 +5,12 @@ The goal of this library is to make working with the already incredible [sveltek
 ## Installation
 
 ```bash
-npm i formsnap sveltekit-superforms zod
+npm i formsnap sveltekit-superforms <your-schema-library>
 ```
 
 ## Usage
 
-You'll handle the initial Superforms setup just as you normally would, where you define a schema and return the form from your load function. The magic happens once you have access to that form inside of your page component.
+You'll handle the initial Superforms setup just as you normally would, where you define a schema and return the form from your load function.
 
 #### 1. Define a Zod schema
 
@@ -20,23 +20,24 @@ import { z } from "zod";
 export const settingsFormSchema = z.object({
 	email: z.string().email(),
 	bio: z.string().max(250).optional(),
-	language: z.enum(["en", "es", "fr"]),
 	marketingEmails: z.boolean().default(true),
-	theme: z.enum(["light", "dark"]).default("light")
+	language: z.enum(["en", "es", "fr"]).default(["en"]),
+	theme: z.enum(["light", "dark"]).default(["light"]),
 });
 ```
 
 #### 2. Return the form from your load function
 
 ```ts
 // +page.server.ts
-import { superValidate } from "sveltekit-superforms/server";
+import { superValidate } from "sveltekit-superforms";
+import { zod } from "sveltekit-superforms/adapters";
 import type { PageServerLoad } from "./$types";
 import { settingsFormSchema } from "./schemas";
 
 export const load: PageServerLoad = async () => {
 	return {
-		form: await superValidate(settingsFormSchema)
+		form: await superValidate(zod(settingsFormSchema)),
 	};
 };
 ```
@@ -45,54 +46,71 @@ export const load: PageServerLoad = async () => {
 
 ```svelte
 <script lang="ts">
-	import { Form } from "@huntabyte/form";
+	import { Field, Label, FieldErrors, Control, Description, Fieldset, Legend } from "formsnap";
 	import { settingsFormSchema } from "./schemas";
-	import type { PageData } from "./$types";
-	export let data: PageData;
+	import { superForm } from "sveltekit-superforms"
+	import { zodClient } from "sveltekit-superforms/adapters"
+
+	export let data;
+
+	const form = superForm(data.form, {
+		validators: zodClient(settingsFormSchema),
+	})
+
+	const { form: formData, enhance } = form;
 </script>
 
-<Form.Root
-	schema={settingsFormSchema}
-	form={data.form}
-	let:config
-	action="?/someAction"
->
-	<Form.Field {config} name="email">
-		<Form.Label>Email</Form.Label>
-		<Form.Input />
-		<Form.Validation />
-	</Form.Field>
-	<Form.Field {config} name="bio">
-		<Form.Label>Bio</Form.Label>
-		<Form.Textarea />
-		<Form.Validation />
-	</Form.Field>
-	<Form.Field {config} name="language">
-		<Form.Label>Language</Form.Label>
-		<Form.Select>
-			<option value="en">English</option>
-			<option value="es">Spanish</option>
-			<option value="fr">French</option>
-		</Form.Select>
-		<Form.Validation />
-	</Form.Field>
-	<Form.Field {config} name="marketingEmails">
-		<Form.Checkbox />
-		<Form.Label>Receive marketing emails from us</Form.Label>
-		<Form.Validation />
-	</Form.Field>
-	<Form.Field {config} name="theme">
-		<Form.RadioItem value="light" />
-		<Form.Label>Light</Form.Label>
-		<Form.Validation />
-	</Form.Field>
-	<Form.Field {config} name="theme">
-		<Form.RadioItem value="dark" />
-		<Form.Label>Dark</Form.Label>
-		<Form.Validation />
-	</Form.Field>
+<form method="POST" use:enhance>
+	<Field {form} name="email">
+		<Control let:attrs>
+			<Label>Email</Label>
+			<input type="email" {...attrs} bind:value={$formData.email} />
+		</Control>
+		<Description>We'll provide critical updates about your account via email.</Description>
+		<FieldErrors />
+	</Field>
+
+	<Field {form} name="bio">
+		<Control let:attrs>
+			<Label>Bio</Label>
+			<textarea bind:value={$formData.bio} {...attrs} />
+		</Control>
+		<FieldErrors />
+	</Field>
+
+	<Field {form} name="language">
+		<Control let:attrs>
+			<Label>Language</Label>
+			<select {...attrs} bind:value={$formData.language}>
+				<option value="en">English</option>
+				<option value="es">Spanish</option>
+				<option value="fr">French</option>
+			</select>
+		</Control>
+		<FieldErrors />
+	</Field>
+
+	<Field {form} name="marketingEmails">
+		<Control let:attrs>
+			<Label>Receive marketing emails from us</Label>
+			<input type="checkbox" {...attrs} bind:checked={$formData.marketingEmails} />
+		</Control>
+		<FieldErrors />
+	</Field>
+
+	<Fieldset {form} name="theme">
+		<Legend>Select your theme</Legend>
+		{#each ["light", "dark"] as theme}
+			<Control let:attrs>
+				<input {...attrs} type="radio" bind:group={$formData.theme} value={theme} />
+				<Label>{theme}</Label>
+			</Control>
+		{/each}
+		<FieldErrors />
+	</Fieldset>
+
 	<button type="submit">Submit</button>
-</Form.Root>
+</form>
 ```
 
 Check out [Formsnap.dev](https://formsnap.dev) for more documentation.
diff --git a/components.json b/components.json