Skip to content

Commit 790f8d4

Browse files
huntabyteAdrianGonz97
huntabyte
and
AdrianGonz97
authored
feat: library rewrite & Superforms v2 support (#131)
Co-authored-by: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com>
1 parent 67253af commit 790f8d4

File tree

410 files changed

+17931
-8868
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

410 files changed

+17931
-8868
lines changed

‎.changeset/curvy-stingrays-compare.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"formsnap": minor
3+
---
4+
5+
Rewrite entire library - see https://formsnap.dev

‎.github/workflows/release.yml‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
11
name: Release
22

33
on:
4-
push:
5-
branches:
6-
- main
4+
push:
5+
branches:
6+
- main
77

88
concurrency: ${{ github.workflow }}-${{ github.ref }}
99

1010
jobs:
11-
release:
12-
permissions:
13-
contents: write # to create release (changesets/action)
14-
pull-requests: write # to create pull request (changesets/action)
15-
name: Release
16-
runs-on: ubuntu-latest
17-
steps:
18-
- name: Checkout Repo
19-
uses: actions/checkout@v3
20-
with:
21-
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
22-
fetch-depth: 0
23-
- uses: pnpm/action-setup@v2.2.4
24-
with:
25-
version: 8.6.3
26-
- name: Setup Node.js
27-
uses: actions/setup-node@v3
28-
with:
29-
node-version: "18.x"
30-
cache: pnpm
11+
release:
12+
permissions:
13+
contents: write # to create release (changesets/action)
14+
pull-requests: write # to create pull request (changesets/action)
15+
name: Release
16+
runs-on: ubuntu-latest
17+
steps:
18+
- name: Checkout Repo
19+
uses: actions/checkout@v3
20+
with:
21+
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
22+
fetch-depth: 0
23+
- uses: pnpm/action-setup@v2.2.4
24+
with:
25+
version: 8.6.3
26+
- name: Setup Node.js
27+
uses: actions/setup-node@v3
28+
with:
29+
node-version: "18.x"
30+
cache: pnpm
3131

32-
- run: pnpm install --frozen-lockfile
32+
- run: pnpm install --frozen-lockfile
3333

34-
- name: Create Release Pull Request or Publish to npm
35-
id: changesets
36-
uses: changesets/action@v1
37-
with:
38-
publish: pnpm release
39-
env:
40-
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
41-
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
34+
- name: Create Release Pull Request or Publish to npm
35+
id: changesets
36+
uses: changesets/action@v1
37+
with:
38+
publish: pnpm release
39+
env:
40+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
41+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.gitignore‎

Lines changed: 76 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,78 @@
1-
.DS_Store
21
node_modules
3-
/build
4-
/dist
5-
/.svelte-kit
6-
/package
7-
.cache
2+
.DS_Store
3+
.AppleDouble
4+
.LSOverride
5+
6+
dist
7+
8+
# Logs
9+
logs
10+
*.log
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
lerna-debug.log*
15+
.pnpm-debug.log*
16+
17+
# Diagnostic reports (https://nodejs.org/api/report.html)
18+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
19+
20+
# Runtime data
21+
pids
22+
*.pid
23+
*.seed
24+
*.pid.lock
25+
26+
# Directory for instrumented libs generated by jscoverage/JSCover
27+
lib-cov
28+
29+
# Coverage directory used by tools like istanbul
30+
coverage
31+
*.lcov
32+
33+
# nyc test coverage
34+
.nyc_output
35+
36+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
37+
.grunt
38+
39+
# Bower dependency directory (https://bower.io/)
40+
bower_components
41+
42+
# node-waf configuration
43+
.lock-wscript
44+
45+
# Compiled binary addons (https://nodejs.org/api/addons.html)
46+
build/Release
47+
48+
# Dependency directories
49+
node_modules/
50+
jspm_packages/
51+
52+
# Snowpack dependency directory (https://snowpack.dev/)
53+
web_modules/
54+
55+
# TypeScript cache
56+
*.tsbuildinfo
57+
58+
# Optional npm cache directory
59+
.npm
60+
61+
# Optional eslint cache
62+
.eslintcache
63+
64+
# Output of 'npm pack'
65+
*.tgz
66+
67+
# Yarn Integrity file
68+
.yarn-integrity
69+
70+
# dotenv environment variable files
871
.env
9-
.env.*
10-
!.env.example
11-
vite.config.js.timestamp-*
12-
vite.config.ts.timestamp-*
13-
.contentlayer
14-
.contentlayer/*
15-
.vercel
16-
dist
72+
.env.development.local
73+
.env.test.local
74+
.env.production.local
75+
.env.local
76+
77+
sites/docs/.vercel
78+
packages/formsnap/doc

‎.npmrc‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎.prettierrc‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Hunter Johnston <https://github.com/huntabyte>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 68 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ The goal of this library is to make working with the already incredible [sveltek
55
## Installation
66

77
```bash
8-
npm i formsnap sveltekit-superforms zod
8+
npm i formsnap sveltekit-superforms <your-schema-library>
99
```
1010

1111
## Usage
1212

13-
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.
13+
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.
1414

1515
#### 1. Define a Zod schema
1616

@@ -20,23 +20,24 @@ import { z } from "zod";
2020
export const settingsFormSchema = z.object({
2121
email: z.string().email(),
2222
bio: z.string().max(250).optional(),
23-
language: z.enum(["en", "es", "fr"]),
2423
marketingEmails: z.boolean().default(true),
25-
theme: z.enum(["light", "dark"]).default("light")
24+
language: z.enum(["en", "es", "fr"]).default(["en"]),
25+
theme: z.enum(["light", "dark"]).default(["light"]),
2626
});
2727
```
2828

2929
#### 2. Return the form from your load function
3030

3131
```ts
3232
// +page.server.ts
33-
import { superValidate } from "sveltekit-superforms/server";
33+
import { superValidate } from "sveltekit-superforms";
34+
import { zod } from "sveltekit-superforms/adapters";
3435
import type { PageServerLoad } from "./$types";
3536
import { settingsFormSchema } from "./schemas";
3637

3738
export const load: PageServerLoad = async () => {
3839
return {
39-
form: await superValidate(settingsFormSchema)
40+
form: await superValidate(zod(settingsFormSchema)),
4041
};
4142
};
4243
```
@@ -45,54 +46,71 @@ export const load: PageServerLoad = async () => {
4546

4647
```svelte
4748
<script lang="ts">
48-
import { Form } from "@huntabyte/form";
49+
import { Field, Label, FieldErrors, Control, Description, Fieldset, Legend } from "formsnap";
4950
import { settingsFormSchema } from "./schemas";
50-
import type { PageData } from "./$types";
51-
export let data: PageData;
51+
import { superForm } from "sveltekit-superforms"
52+
import { zodClient } from "sveltekit-superforms/adapters"
53+
54+
export let data;
55+
56+
const form = superForm(data.form, {
57+
validators: zodClient(settingsFormSchema),
58+
})
59+
60+
const { form: formData, enhance } = form;
5261
</script>
5362
54-
<Form.Root
55-
schema={settingsFormSchema}
56-
form={data.form}
57-
let:config
58-
action="?/someAction"
59-
>
60-
<Form.Field {config} name="email">
61-
<Form.Label>Email</Form.Label>
62-
<Form.Input />
63-
<Form.Validation />
64-
</Form.Field>
65-
<Form.Field {config} name="bio">
66-
<Form.Label>Bio</Form.Label>
67-
<Form.Textarea />
68-
<Form.Validation />
69-
</Form.Field>
70-
<Form.Field {config} name="language">
71-
<Form.Label>Language</Form.Label>
72-
<Form.Select>
73-
<option value="en">English</option>
74-
<option value="es">Spanish</option>
75-
<option value="fr">French</option>
76-
</Form.Select>
77-
<Form.Validation />
78-
</Form.Field>
79-
<Form.Field {config} name="marketingEmails">
80-
<Form.Checkbox />
81-
<Form.Label>Receive marketing emails from us</Form.Label>
82-
<Form.Validation />
83-
</Form.Field>
84-
<Form.Field {config} name="theme">
85-
<Form.RadioItem value="light" />
86-
<Form.Label>Light</Form.Label>
87-
<Form.Validation />
88-
</Form.Field>
89-
<Form.Field {config} name="theme">
90-
<Form.RadioItem value="dark" />
91-
<Form.Label>Dark</Form.Label>
92-
<Form.Validation />
93-
</Form.Field>
63+
<form method="POST" use:enhance>
64+
<Field {form} name="email">
65+
<Control let:attrs>
66+
<Label>Email</Label>
67+
<input type="email" {...attrs} bind:value={$formData.email} />
68+
</Control>
69+
<Description>We'll provide critical updates about your account via email.</Description>
70+
<FieldErrors />
71+
</Field>
72+
73+
<Field {form} name="bio">
74+
<Control let:attrs>
75+
<Label>Bio</Label>
76+
<textarea bind:value={$formData.bio} {...attrs} />
77+
</Control>
78+
<FieldErrors />
79+
</Field>
80+
81+
<Field {form} name="language">
82+
<Control let:attrs>
83+
<Label>Language</Label>
84+
<select {...attrs} bind:value={$formData.language}>
85+
<option value="en">English</option>
86+
<option value="es">Spanish</option>
87+
<option value="fr">French</option>
88+
</select>
89+
</Control>
90+
<FieldErrors />
91+
</Field>
92+
93+
<Field {form} name="marketingEmails">
94+
<Control let:attrs>
95+
<Label>Receive marketing emails from us</Label>
96+
<input type="checkbox" {...attrs} bind:checked={$formData.marketingEmails} />
97+
</Control>
98+
<FieldErrors />
99+
</Field>
100+
101+
<Fieldset {form} name="theme">
102+
<Legend>Select your theme</Legend>
103+
{#each ["light", "dark"] as theme}
104+
<Control let:attrs>
105+
<input {...attrs} type="radio" bind:group={$formData.theme} value={theme} />
106+
<Label>{theme}</Label>
107+
</Control>
108+
{/each}
109+
<FieldErrors />
110+
</Fieldset>
111+
94112
<button type="submit">Submit</button>
95-
</Form.Root>
113+
</form>
96114
```
97115

98116
Check out [Formsnap.dev](https://formsnap.dev) for more documentation.

‎components.json‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)