@overmap-ai/forms 0.0.1-master.3

package/src/forms/utils.ts

@@ -0,0 +1,69 @@
+import { FormikErrors } from "formik"
+import cloneDeep from "lodash.clonedeep"
+import get from "lodash.get"
+import set from "lodash.set"
+
+import { FormikUserFormRevision } from "./builder"
+import { BaseField, BaseFormElement, FieldSection, ISchema, isConditionMet } from "./fields"
+import { Form } from "./typings"
+
+export const hasKeys = (errors: object): boolean => {
+	return Object.keys(errors).length > 0
+}
+
+export const validateForm = (schema: ISchema, form: Form | FormikUserFormRevision) => {
+	// TODO: Comments
+	const errors: FormikErrors<Form | FormikUserFormRevision> = {}
+	for (const field of schema.fields) {
+		if (field instanceof FieldSection) {
+			// if condition is not met, do not validate section
+			if (field.condition) {
+				const { identifier } = field.condition
+
+				if (!isConditionMet(field.condition, get(form, identifier))) {
+					continue
+				}
+			}
+			Object.assign(errors, field.getErrors(form))
+		} else {
+			// REASON: WebStorm is wrong, TypeScript is right. `field` is a BaseFormElement, which may be a BaseField.
+			// noinspection SuspiciousTypeOfGuard
+			if (!(field instanceof BaseField)) {
+				throw new Error("Invalid field type")
+			}
+			const id = field.getId()
+			const error = field.getError(get(form, id), form)
+			if (error) set(errors, id, error)
+		}
+	}
+
+	// only return errors if there are any
+	if (hasKeys(errors)) return errors
+}
+
+const uncontrolledValues: unknown[] = [null, undefined]
+
+// If a value is not provided, adds empty values for all fields in the
+// schema so that the form is fully controlled
+export const initialFormValues = (fields: BaseFormElement[], values: Form): Form => {
+	return fields.reduce<Form>(
+		(acc, field) => {
+			// check for field section
+			if (field instanceof FieldSection) {
+				return { ...acc, ...initialFormValues(field.fields, values) }
+			}
+			// values must not be undefined or React will error as
+			// the input changes from uncontrolled to controlled
+			if (uncontrolledValues.includes(get(acc, field.getId()))) {
+				set(acc, field.getId(), "")
+			}
+			return acc
+		},
+		// TODO: Had to do this because of this error:
+		//  > Uncaught TypeError: can't define property "description":
+		//  > Object is not extensible"
+		//  This means that we can't mutate `acc` because it's frozen for some
+		//  unknown reason.
+		cloneDeep(values),
+	)
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+export * from "./ColorPicker"
+export * from "./FileBadge"
+export * from "./FileCard"
+export * from "./FileIcon"
+export * from "./FileViewer"
+export * from "./forms"
+export * from "./ImageCard"
+export * from "./ImageMarkup"
+export * from "./ImageViewer"
+export * from "./PDFViewer"
+export * from "./SpreadsheetViewer"

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tailwind.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from "tailwindcss"
+import animatePlugin from "tailwindcss-animate"
+
+export default {
+	content: ["./src/**/*.{js,ts,jsx,tsx}"],
+	darkMode: ["class", ".dark"],
+	plugins: [animatePlugin],
+} satisfies Config

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src", ".storybook"],
+}

package/vite.config.ts

@@ -0,0 +1,23 @@
+import { resolve } from "node:path"
+
+import tailwindcss from "@tailwindcss/vite"
+import react from "@vitejs/plugin-react"
+import { ConfigEnv, defineConfig } from "vite"
+import dts from "vite-plugin-dts"
+import { externalizeDeps } from "vite-plugin-externalize-deps"
+
+const VITE_LIB_NAME = "forms"
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }: ConfigEnv) => ({
+	plugins: [react(), tailwindcss(), dts({ exclude: ["**/*.stories.*", ".storybook/*"] }), externalizeDeps()],
+	build: {
+		lib: {
+			entry: resolve(__dirname, "src/index.ts"),
+			name: VITE_LIB_NAME,
+			fileName: VITE_LIB_NAME,
+		},
+		minify: mode !== "development",
+		sourcemap: mode === "development",
+	},
+}))