@overmap-ai/forms 0.0.1-master.3

package/eslint.config.js

@@ -0,0 +1,56 @@
+import pluginJs from "@eslint/js"
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended"
+import pluginReact from "eslint-plugin-react"
+import simpleImportSort from "eslint-plugin-simple-import-sort"
+import pluginStorybook from "eslint-plugin-storybook"
+import globals from "globals"
+import tseslint from "typescript-eslint"
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+	{ files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+	{ languageOptions: { globals: globals.browser } },
+	pluginJs.configs.recommended,
+	...tseslint.configs.recommended,
+	{
+		rules: {
+			"no-unused-vars": "off",
+			"@typescript-eslint/no-unused-vars": [
+				"error",
+				{
+					varsIgnorePattern: "^_",
+					argsIgnorePattern: "^_",
+					caughtErrorsIgnorePattern: "^_",
+				},
+			],
+		},
+	},
+	{
+		plugins: {
+			"simple-import-sort": simpleImportSort,
+		},
+		rules: {
+			"simple-import-sort/imports": "error",
+			"simple-import-sort/exports": "error",
+		},
+	},
+	{
+		...pluginReact.configs.flat.recommended,
+		settings: {
+			react: { version: "detect" },
+		},
+		rules: {
+			"react/react-in-jsx-scope": "off",
+		},
+	},
+	...pluginStorybook.configs["flat/recommended"],
+	eslintPluginPrettierRecommended,
+	{
+		linterOptions: {
+			reportUnusedDisableDirectives: "error",
+		},
+	},
+	{
+		ignores: ["!.storybook", "dist"],
+	},
+]

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@overmap-ai/forms",
+  "private": false,
+  "version": "0.0.1-master.3",
+  "license": "UNLICENSED",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "prepare": "husky",
+    "lint:fix": "yarn lint --fix",
+    "lint": "tsc --noEmit && eslint . --max-warnings 0",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "@overmap-ai/blocks": "1.0.31-tailwind-components.22",
+    "@overmap-ai/core": "1.0.60-forms-removal.3",
+    "react": ">=18.2.0 <20.0.0",
+    "react-dom": ">=18.2.0 <20.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.4",
+    "@eslint/js": "^9.19.0",
+    "@overmap-ai/blocks": "1.0.31-tailwind-components.25",
+    "@overmap-ai/core": "1.0.60-forms-removal.3",
+    "@radix-ui/colors": "^3.0.0",
+    "@storybook/addon-a11y": "^8.5.3",
+    "@storybook/addon-essentials": "^8.5.3",
+    "@storybook/addon-interactions": "^8.5.3",
+    "@storybook/addon-onboarding": "^8.5.3",
+    "@storybook/addon-themes": "^8.5.3",
+    "@storybook/addon-viewport": "^8.5.3",
+    "@storybook/blocks": "^8.5.3",
+    "@storybook/react": "^8.5.3",
+    "@storybook/react-vite": "^8.5.3",
+    "@storybook/test": "^8.5.3",
+    "@storybook/types": "^8.5.3",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/file-saver": "^2.0.7",
+    "@types/lodash.clonedeep": "^4.5.9",
+    "@types/lodash.get": "^4.4.9",
+    "@types/lodash.set": "^4.3.9",
+    "@types/node": "^22.13.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/react-icons": "^3.0.0",
+    "@types/xlsx": "^0.0.36",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-storybook": "^0.11.2",
+    "file-saver": "^2.0.5",
+    "globals": "^15.14.0",
+    "husky": "^9.1.7",
+    "prettier": "^3.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.5.3",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.5.0",
+    "vite-plugin-externalize-deps": "^0.9.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  },
+  "dependencies": {
+    "@hello-pangea/dnd": "^17.0.0",
+    "formik": "^2.4.6",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.get": "^4.4.2",
+    "lodash.set": "^4.3.2",
+    "qr-scanner": "^1.4.2",
+    "react-icons": "^5.4.0",
+    "react-pdf": "^9.2.1",
+    "react-sketch-canvas": "^6.2.0",
+    "react-spreadsheet": "^0.9.5",
+    "xlsx": "^0.18.5"
+  },
+  "resolutions": {
+    "@types/react": "^19.0.0"
+  }
+}

package/src/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,47 @@
+import { IconButton, Popover, RiIcon } from "@overmap-ai/blocks"
+import { CSSColor } from "@overmap-ai/core"
+import { memo, ReactElement, useCallback } from "react"
+
+interface ColorPickerProps {
+	selectedColor: CSSColor | null
+	allColors: CSSColor[]
+	onFinish: (color: CSSColor) => void
+	trigger: ReactElement
+}
+
+export const ColorPicker = memo((props: ColorPickerProps) => {
+	const { selectedColor, allColors, onFinish, trigger } = props
+
+	const handleSelectedColorChange = useCallback(
+		(color: CSSColor) => () => {
+			onFinish(color)
+		},
+		[onFinish],
+	)
+
+	return (
+		<Popover.Root>
+			<Popover.Trigger>{trigger}</Popover.Trigger>
+			<Popover.Content size="sm">
+				<div className="grid w-max grid-cols-7 gap-x-1 gap-y-1">
+					{allColors.map((color) => (
+						<IconButton
+							key={color}
+							onClick={handleSelectedColorChange(color)}
+							style={{
+								backgroundColor: color,
+							}}
+							type="button"
+							variant="solid"
+							aria-label={color}
+						>
+							{selectedColor === color && <RiIcon icon="RiCheckLine" />}
+						</IconButton>
+					))}
+				</div>
+			</Popover.Content>
+		</Popover.Root>
+	)
+})
+
+ColorPicker.displayName = "ColorPicker"

package/src/ColorPicker/index.ts

@@ -0,0 +1 @@
+export * from "./ColorPicker"

package/src/FileBadge/FileBadge.tsx

@@ -0,0 +1,27 @@
+import { Badge, BadgeProps } from "@overmap-ai/blocks"
+import { truncate } from "@overmap-ai/core"
+import { memo, useMemo } from "react"
+
+import { FileIcon } from "../FileIcon"
+
+export interface FileBadgeProps extends Omit<BadgeProps, "children"> {
+	file: File
+	truncateLength?: number
+	hideName?: boolean
+}
+export const FileBadge = memo((props: FileBadgeProps) => {
+	const { file, truncateLength, hideName = false, ...rest } = props
+
+	const fileName = useMemo(
+		() => (truncateLength !== undefined ? truncate(file.name, truncateLength) : file.name),
+		[file.name, truncateLength],
+	)
+
+	return (
+		<Badge {...rest}>
+			<FileIcon fileType={file.type} />
+			{!hideName && fileName}
+		</Badge>
+	)
+})
+FileBadge.displayName = "FileBadge"

package/src/FileBadge/index.ts

@@ -0,0 +1 @@
+export * from "./FileBadge"

package/src/FileCard/FileCard.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta } from "@storybook/react"
+import { ChangeEvent, useCallback, useRef, useState } from "react"
+
+import { FileCard } from "./FileCard"
+
+const meta = {
+	title: "Components/FileCard",
+	component: FileCard,
+	tags: ["autodocs"],
+	parameters: {
+		disablePanel: true,
+	},
+} satisfies Meta<typeof FileCard>
+
+export default meta
+
+export const Basic = () => {
+	const inputRef = useRef<HTMLInputElement>(null)
+	const [files, setFiles] = useState<File[]>([])
+
+	const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+		if (e.target.files) {
+			const files = Array.from(e.target.files)
+			if (files.length > 0) {
+				setFiles(files)
+			}
+		}
+	}, [])
+
+	return (
+		<>
+			<input ref={inputRef} multiple type="file" onChange={handleChange} />
+			<div className="flex flex-col gap-1">
+				{files.map((file, index) => (
+					<FileCard key={index} file={file} />
+				))}
+			</div>
+		</>
+	)
+}
+
+export const Loading = () => {
+	return <FileCard file={null} />
+}
+
+export const Errored = () => {
+	const inputRef = useRef<HTMLInputElement>(null)
+	const [files, setFiles] = useState<File[]>([])
+
+	const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+		if (e.target.files) {
+			const files = Array.from(e.target.files)
+			if (files.length > 0) {
+				setFiles(files)
+			}
+		}
+	}, [])
+
+	return (
+		<>
+			<input ref={inputRef} multiple type="file" onChange={handleChange} />
+			<div className="flex flex-col gap-1">
+				{files.map((file, index) => (
+					<FileCard key={index} file={file} error={file.name} />
+				))}
+			</div>
+		</>
+	)
+}

package/src/FileCard/FileCard.tsx

@@ -0,0 +1,53 @@
+import { RiIcon, Spinner } from "@overmap-ai/blocks"
+import { truncate } from "@overmap-ai/core"
+import { cx } from "class-variance-authority"
+import { ComponentProps, forwardRef, memo, PropsWithoutRef, ReactNode, useMemo } from "react"
+
+import { FileIcon } from "../FileIcon"
+
+export interface FileCardProps extends Omit<PropsWithoutRef<ComponentProps<"div">>, "children"> {
+	file: File | null
+	truncateLength?: number
+	error?: string
+	rightSlot?: ReactNode
+}
+
+export const FileCard = memo(
+	forwardRef<HTMLDivElement, FileCardProps>((props, ref) => {
+		const { file, className, error, truncateLength, rightSlot, ...rest } = props
+
+		const fileName = useMemo(() => {
+			if (!file) return
+			return truncateLength !== undefined ? truncate(file.name, truncateLength) : file.name
+		}, [file, truncateLength])
+
+		return (
+			<div
+				className={cx(
+					className,
+					"flex h-5 w-full items-center gap-2 rounded-md border border-(--base-a6) bg-(--base-2) text-sm py-1 px-2 h-max",
+					{
+						"text-(--gray-11)": error,
+					},
+				)}
+				ref={ref}
+				{...rest}
+			>
+				{error ? <RiIcon icon="RiFileWarningLine" /> : <FileIcon fileType={file?.type ?? ""} />}
+				{!error ? (
+					file ? (
+						fileName
+					) : (
+						<div className="flex w-full justify-center">
+							<Spinner />
+						</div>
+					)
+				) : (
+					error
+				)}
+				{rightSlot}
+			</div>
+		)
+	}),
+)
+FileCard.displayName = "FileCard"

package/src/FileCard/index.ts

@@ -0,0 +1 @@
+export * from "./FileCard"

package/src/FileIcon/FileIcon.tsx

@@ -0,0 +1,31 @@
+import { RiIcon } from "@overmap-ai/blocks"
+import { memo, useMemo } from "react"
+
+import { SUPPORTED_IMAGE_FILE_TYPES } from "../ImageViewer"
+import { SUPPORTED_PDF_FILE_TYPES } from "../PDFViewer"
+import { SUPPORTED_SPREADSHEET_FILE_EXTENSIONS } from "../SpreadsheetViewer"
+
+// TODO: create a mapping for each supported file extensions to a appropriate icon.
+//  May need to outsource some icons for this.
+
+export interface FileIconProps {
+	fileType: string
+}
+export const FileIcon = memo((props: FileIconProps) => {
+	const { fileType } = props
+	const icon = useMemo(() => {
+		if (SUPPORTED_SPREADSHEET_FILE_EXTENSIONS.includes(fileType)) {
+			return <RiIcon icon="RiFileExcelLine" />
+		}
+		if (SUPPORTED_PDF_FILE_TYPES.includes(fileType)) {
+			return <RiIcon icon="RiFilePdfLine" />
+		}
+		if (SUPPORTED_IMAGE_FILE_TYPES.includes(fileType)) {
+			return <RiIcon icon="RiFileImageLine" />
+		}
+		return <RiIcon icon="RiFileLine" />
+	}, [fileType])
+
+	return <div className="h-max w-max">{icon}</div>
+})
+FileIcon.displayName = "FileIcon"

package/src/FileIcon/index.ts

@@ -0,0 +1 @@
+export * from "./FileIcon"

package/src/FileViewer/FileViewerProvider.stories.tsx

@@ -0,0 +1,50 @@
+import { Button } from "@overmap-ai/blocks"
+import type { Meta } from "@storybook/react"
+import { ChangeEvent, useCallback, useRef, useState } from "react"
+
+import { useFileViewer } from "./context"
+import { FileViewerProvider } from "./FileViewerProvider"
+
+const meta = {
+	title: "Contexts/FileViewer",
+	component: FileViewerProvider,
+	tags: ["autodocs"],
+	parameters: {
+		disablePanel: true,
+	},
+} satisfies Meta<typeof FileViewerProvider>
+
+export default meta
+
+export const Basic = () => {
+	const inputRef = useRef<HTMLInputElement>(null)
+	const [file, setFile] = useState<File | null>(null)
+	const openFileViewer = useFileViewer()
+
+	const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+		if (e.target.files) {
+			const files = Array.from(e.target.files)
+			if (files.length > 0) {
+				setFile(files[0] || null)
+			}
+		}
+	}, [])
+
+	return (
+		<>
+			<input ref={inputRef} type="file" onChange={handleChange} />
+			{file && (
+				<Button
+					onClick={() => {
+						openFileViewer((close) => ({
+							file: file,
+							onDelete: close,
+						}))
+					}}
+				>
+					Open
+				</Button>
+			)}
+		</>
+	)
+}

package/src/FileViewer/FileViewerProvider.tsx

@@ -0,0 +1,72 @@
+import { memo, PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react"
+
+import { ImageViewer, SUPPORTED_IMAGE_FILE_TYPES } from "../ImageViewer"
+import { PDFViewer, SUPPORTED_PDF_FILE_TYPES } from "../PDFViewer"
+import { SpreadsheetViewer, SUPPORTED_SPREADSHEET_FILE_EXTENSIONS } from "../SpreadsheetViewer"
+import { FileViewerContext } from "./context"
+import { FileViewerConfig } from "./typings"
+
+type FileViewerType = "image" | "spreadsheet" | "pdf"
+export const FileViewerProvider = memo((props: PropsWithChildren) => {
+	const { children } = props
+	const [config, setConfig] = useState<FileViewerConfig | null>(null)
+	const [fileType, setFileType] = useState<FileViewerType | null>(null)
+
+	const closeFileViewer = useCallback(() => {
+		setConfig(null)
+		setFileType(null)
+	}, [])
+
+	const openFileViewer = useCallback(
+		(func: (closeFileViewer: () => void) => FileViewerConfig) => {
+			setConfig(func(closeFileViewer))
+		},
+		[closeFileViewer],
+	)
+
+	const handleClose = useCallback(() => {
+		if (!config) return
+		if (config.onClose) config.onClose()
+		closeFileViewer()
+	}, [closeFileViewer, config])
+
+	useEffect(() => {
+		if (!config) return
+		const { file } = config
+
+		if (SUPPORTED_SPREADSHEET_FILE_EXTENSIONS.includes(file.type)) {
+			setFileType("spreadsheet")
+			return
+		}
+		if (SUPPORTED_PDF_FILE_TYPES.includes(file.type)) {
+			setFileType("pdf")
+			return
+		}
+		if (SUPPORTED_IMAGE_FILE_TYPES.includes(file.type)) {
+			setFileType("image")
+			return
+		}
+	}, [config])
+
+	const value = useMemo(() => openFileViewer, [openFileViewer])
+
+	return (
+		<FileViewerContext.Provider value={value}>
+			{children}
+			{config && (
+				<>
+					{fileType === "spreadsheet" && (
+						<SpreadsheetViewer file={config.file} onDelete={config.onDelete} onClose={handleClose} />
+					)}
+					{fileType === "pdf" && (
+						<PDFViewer file={config.file} onDelete={config.onDelete} onClose={handleClose} />
+					)}
+					{fileType === "image" && (
+						<ImageViewer file={config.file} onDelete={config.onDelete} onClose={handleClose} />
+					)}
+				</>
+			)}
+		</FileViewerContext.Provider>
+	)
+})
+FileViewerProvider.displayName = "FileViewerProvider"

package/src/FileViewer/context.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react"
+
+import { FileViewerConfig } from "./typings"
+
+export type FileViewerContextType = (func: (close: () => void) => FileViewerConfig) => void
+
+export const FileViewerContext = createContext<FileViewerContextType>(() => {
+	throw new Error("No FileViewerProvider found")
+})
+
+export const useFileViewer = () => useContext(FileViewerContext)

package/src/FileViewer/index.ts

@@ -0,0 +1,3 @@
+export * from "./context"
+export * from "./FileViewerProvider"
+export * from "./typings"

package/src/FileViewer/typings.ts

@@ -0,0 +1,5 @@
+export interface FileViewerConfig {
+	file: File
+	onDelete?: (file: File) => void
+	onClose?: () => void
+}

package/src/ImageCard/ImageCard.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta } from "@storybook/react"
+import { ChangeEvent, useCallback, useRef, useState } from "react"
+
+import { ImageCard } from "./ImageCard"
+
+const meta = {
+	title: "Components/ImageCard",
+	component: ImageCard,
+	tags: ["autodocs"],
+	parameters: {
+		disablePanel: true,
+	},
+} satisfies Meta<typeof ImageCard>
+
+export default meta
+
+export const Basic = () => {
+	const inputRef = useRef<HTMLInputElement>(null)
+	const [files, setFiles] = useState<File[]>([])
+
+	const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+		if (e.target.files) {
+			const files = Array.from(e.target.files)
+			if (files.length > 0) {
+				setFiles(files)
+			}
+		}
+	}, [])
+
+	return (
+		<>
+			<input ref={inputRef} multiple type="file" onChange={handleChange} />
+			<div className="flex flex-col gap-1">
+				{files.map((file, index) => (
+					<ImageCard key={index} file={file} />
+				))}
+			</div>
+		</>
+	)
+}
+
+export const Loading = () => {
+	return <ImageCard file={null} />
+}
+
+export const Errored = () => {
+	const inputRef = useRef<HTMLInputElement>(null)
+	const [files, setFiles] = useState<File[]>([])
+
+	const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+		if (e.target.files) {
+			const files = Array.from(e.target.files)
+			if (files.length > 0) {
+				setFiles(files)
+			}
+		}
+	}, [])
+
+	return (
+		<>
+			<input ref={inputRef} multiple type="file" onChange={handleChange} />
+			<div className="flex flex-col gap-1">
+				{files.map((file, index) => (
+					<ImageCard key={index} file={file} error={file.name} />
+				))}
+			</div>
+		</>
+	)
+}
+
+export const Responsive = () => {
+	const inputRef = useRef<HTMLInputElement>(null)
+	const [files, setFiles] = useState<File[]>([])
+
+	const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+		if (e.target.files) {
+			const files = Array.from(e.target.files)
+			if (files.length > 0) {
+				setFiles(files)
+			}
+		}
+	}, [])
+
+	return (
+		<>
+			<input ref={inputRef} multiple type="file" onChange={handleChange} />
+			<div className="flex flex-col gap-1">
+				{files.map((file, index) => (
+					<ImageCard key={index} file={file} />
+				))}
+			</div>
+		</>
+	)
+}