feat: update Form components to latest version of formsnap (#776)

huntabyte · Feb 20, 2024 · 3e858d2 · 3e858d2
1 parent 0e43b51
commit 3e858d2
Show file tree

Hide file tree

Showing 234 changed files with 2,403 additions and 2,248 deletions.
diff --git a/apps/www/.prettierrc b/apps/www/.prettierrc
@@ -1,19 +1,15 @@
 {
 	"useTabs": true,
+	"tabWidth": 4,
 	"singleQuote": false,
 	"trailingComma": "es5",
 	"printWidth": 100,
-	"endOfLine": "lf",
-	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": false,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [
 		{
 			"files": "*.svelte",
 			"options": {
-				"parser": "svelte",
-				"svelteIndentScriptAndStyle": true,
-				"svelteStrictMode": false,
-				"svelteSortOrder": "scripts-markup-styles-options"
+				"parser": "svelte"
 			}
 		},
 		{
@@ -24,6 +20,5 @@
 				"printWidth": 79
 			}
 		}
-	],
-	"bracketSameLine": false
+	]
 }
diff --git a/apps/www/__registry__/index.js b/apps/www/__registry__/index.js
@@ -223,7 +223,7 @@ export const Index = {
 		"checkbox-form-single": {
 			name: "checkbox-form-single",
 			type: "components:example",
-			registryDependencies: ["form"],
+			registryDependencies: ["form","checkbox"],
 			component: () => import("../src/lib/registry/default/example/checkbox-form-single.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/default/example/checkbox-form-single.svelte"],
 		},
@@ -258,7 +258,7 @@ export const Index = {
 		"combobox-form": {
 			name: "combobox-form",
 			type: "components:example",
-			registryDependencies: ["form","button","popover","command","utils"],
+			registryDependencies: ["form","popover","command","utils","button"],
 			component: () => import("../src/lib/registry/default/example/combobox-form.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/default/example/combobox-form.svelte"],
 		},
@@ -384,7 +384,7 @@ export const Index = {
 		"form-demo": {
 			name: "form-demo",
 			type: "components:example",
-			registryDependencies: ["form"],
+			registryDependencies: ["form","input"],
 			component: () => import("../src/lib/registry/default/example/form-demo.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/default/example/form-demo.svelte"],
 		},
@@ -482,7 +482,7 @@ export const Index = {
 		"radio-group-form": {
 			name: "radio-group-form",
 			type: "components:example",
-			registryDependencies: ["form","label"],
+			registryDependencies: ["form","radio-group"],
 			component: () => import("../src/lib/registry/default/example/radio-group-form.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/default/example/radio-group-form.svelte"],
 		},
@@ -503,7 +503,7 @@ export const Index = {
 		"select-form": {
 			name: "select-form",
 			type: "components:example",
-			registryDependencies: ["form"],
+			registryDependencies: ["form","select"],
 			component: () => import("../src/lib/registry/default/example/select-form.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/default/example/select-form.svelte"],
 		},
@@ -559,7 +559,7 @@ export const Index = {
 		"switch-form": {
 			name: "switch-form",
 			type: "components:example",
-			registryDependencies: ["form"],
+			registryDependencies: ["form","switch"],
 			component: () => import("../src/lib/registry/default/example/switch-form.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/default/example/switch-form.svelte"],
 		},
@@ -594,7 +594,7 @@ export const Index = {
 		"textarea-form": {
 			name: "textarea-form",
 			type: "components:example",
-			registryDependencies: ["form"],
+			registryDependencies: ["form","textarea"],
 			component: () => import("../src/lib/registry/default/example/textarea-form.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/default/example/textarea-form.svelte"],
 		},
@@ -1029,7 +1029,7 @@ export const Index = {
 		"checkbox-form-single": {
 			name: "checkbox-form-single",
 			type: "components:example",
-			registryDependencies: ["form"],
+			registryDependencies: ["form","checkbox"],
 			component: () => import("../src/lib/registry/new-york/example/checkbox-form-single.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/new-york/example/checkbox-form-single.svelte"],
 		},
@@ -1064,7 +1064,7 @@ export const Index = {
 		"combobox-form": {
 			name: "combobox-form",
 			type: "components:example",
-			registryDependencies: ["form","button","popover","command","utils"],
+			registryDependencies: ["form","popover","command","utils","button"],
 			component: () => import("../src/lib/registry/new-york/example/combobox-form.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/new-york/example/combobox-form.svelte"],
 		},
@@ -1190,7 +1190,7 @@ export const Index = {
 		"form-demo": {
 			name: "form-demo",
 			type: "components:example",
-			registryDependencies: ["form"],
+			registryDependencies: ["form","input"],
 			component: () => import("../src/lib/registry/new-york/example/form-demo.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/new-york/example/form-demo.svelte"],
 		},
@@ -1288,7 +1288,7 @@ export const Index = {
 		"radio-group-form": {
 			name: "radio-group-form",
 			type: "components:example",
-			registryDependencies: ["form","label"],
+			registryDependencies: ["form","radio-group"],
 			component: () => import("../src/lib/registry/new-york/example/radio-group-form.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/new-york/example/radio-group-form.svelte"],
 		},
@@ -1309,7 +1309,7 @@ export const Index = {
 		"select-form": {
 			name: "select-form",
 			type: "components:example",
-			registryDependencies: ["form"],
+			registryDependencies: ["form","select"],
 			component: () => import("../src/lib/registry/new-york/example/select-form.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/new-york/example/select-form.svelte"],
 		},
@@ -1365,7 +1365,7 @@ export const Index = {
 		"switch-form": {
 			name: "switch-form",
 			type: "components:example",
-			registryDependencies: ["form"],
+			registryDependencies: ["form","switch"],
 			component: () => import("../src/lib/registry/new-york/example/switch-form.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/new-york/example/switch-form.svelte"],
 		},
@@ -1400,7 +1400,7 @@ export const Index = {
 		"textarea-form": {
 			name: "textarea-form",
 			type: "components:example",
-			registryDependencies: ["form"],
+			registryDependencies: ["form","textarea"],
 			component: () => import("../src/lib/registry/new-york/example/textarea-form.svelte").then((m) => m.default),
 			files: ["../src/lib/registry/new-york/example/textarea-form.svelte"],
 		},

diff --git a/apps/www/mdsx.config.js b/apps/www/mdsx.config.js
@@ -2,7 +2,7 @@
 import { readFileSync } from "fs";
 import { join, resolve } from "path";
 import { fileURLToPath } from "url";
-import prettier from "prettier";
+import prettier from "@prettier/sync";
 import rehypePrettyCode from "rehype-pretty-code";
 import rehypeSlug from "rehype-slug";
 import { codeImport } from "remark-code-import";
@@ -86,11 +86,13 @@ export const mdsxConfig = defineConfig({
  * itself and checking for it in the code block, but that's not something we need
  * at the moment.
  *
+ * @returns {MdastTransformer}
  */
 function remarkRemovePrettierIgnore() {
 	return async (tree) => {
 		visit(tree, "code", (node) => {
 			node.value = node.value
+				// @ts-expect-error - not dealing with this rn
 				.replaceAll("<!-- prettier-ignore -->\n", "")
 				.replaceAll("// prettier-ignore\n", "");
 		});
@@ -148,7 +150,7 @@ const styles = [
 ];
 
 export function rehypeComponentExample() {
-	return async (tree) => {
+	return (tree) => {
 		const nameRegex = /name="([^"]+)"/;
 		visit(tree, (node, index, parent) => {
 			if (node?.type === "raw" && node?.value?.startsWith("<ComponentPreview")) {

diff --git a/apps/www/other/code-block-prettier.js b/apps/www/other/code-block-prettier.js
@@ -8,7 +8,6 @@ export const codeBlockPrettierConfig = {
 	trailingComma: "none",
 	printWidth: 80,
 	endOfLine: "lf",
-	pluginSearchDirs: ["node_modules/prettier-plugin-svelte"],
 	parser: "svelte",
 	plugins: ["prettier-plugin-svelte"],
 	overrides: [

diff --git a/apps/www/package.json b/apps/www/package.json
@@ -29,10 +29,10 @@
 	"devDependencies": {
 		"@faker-js/faker": "^8.0.2",
 		"@playwright/test": "^1.36.2",
+		"@prettier/sync": "0.3.0",
 		"@sveltejs/adapter-vercel": "^3.0.3",
 		"@sveltejs/kit": "^1.27.1",
 		"@types/d3-scale": "^4.0.6",
-		"@types/escape-html": "^1.0.3",
 		"@types/hast": "^3.0.4",
 		"@types/lodash.template": "^4.5.2",
 		"@types/mdast": "^4.0.3",
@@ -43,25 +43,27 @@
 		"autoprefixer": "^10.4.16",
 		"clsx": "^2.1.0",
 		"embla-carousel-svelte": "8.0.0-rc19",
-		"escape-html": "^1.0.3",
 		"eslint": "^8.52.0",
 		"eslint-config-prettier": "^8.9.0",
-		"eslint-plugin-svelte": "^2.34.0",
+		"eslint-plugin-svelte": "^2.35.1",
+		"formsnap": "^0.5.0",
 		"hast-util-to-html": "^8.0.4",
 		"lodash.template": "^4.5.0",
 		"mdsx": "^0.0.3",
 		"postcss": "^8.4.31",
 		"postcss-load-config": "^4.0.1",
-		"prettier": "^2.8.8",
-		"prettier-plugin-svelte": "^2.10.1",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-tailwindcss": "^0.5.9",
 		"rehype-pretty-code": "^0.13.0",
 		"rehype-slug": "^6.0.0",
 		"remark-code-import": "^1.2.0",
 		"remark-gfm": "^4.0.0",
 		"rimraf": "^4.4.1",
 		"shiki": "^1.1.5",
-		"svelte": "^4.2.2",
-		"svelte-check": "^3.5.2",
+		"svelte": "^4.2.11",
+		"svelte-check": "^3.6.4",
+		"sveltekit-superforms": "^2.3.0",
 		"tailwind-variants": "^0.1.20",
 		"tailwindcss": "^3.4.1",
 		"tslib": "^2.6.2",
@@ -84,7 +86,6 @@
 		"d3-scale": "^4.0.2",
 		"embla-carousel-autoplay": "8.0.0-rc19",
 		"esm-env": "^1.0.0",
-		"formsnap": "^0.4.2",
 		"lucide-svelte": "^0.292.0",
 		"mode-watcher": "^0.1.2",
 		"nanoid": "^5.0.3",
@@ -93,7 +94,6 @@
 		"svelte-legos": "^0.2.2",
 		"svelte-local-storage-store": "^0.5.0",
 		"svelte-sonner": "^0.3.9",
-		"sveltekit-superforms": "^1.8.0",
 		"tailwind-merge": "^1.14.0",
 		"vaul-svelte": "^0.0.6"
 	}