@overmap-ai/forms 1.0.17-master.1 → 1.0.17-master.3

package/eslint.config.js

@@ -1,56 +0,0 @@
-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/src/ColorPicker/ColorPicker.tsx

@@ -1,47 +0,0 @@
-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

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

package/src/FileBadge/FileBadge.tsx

@@ -1,27 +0,0 @@
-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

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

package/src/FileCard/FileCard.stories.tsx

@@ -1,69 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

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

package/src/FileIcon/FileIcon.tsx

@@ -1,31 +0,0 @@
-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

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

package/src/FileViewer/FileViewerProvider.stories.tsx

@@ -1,50 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

package/src/FileViewer/typings.ts

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

package/src/ImageCard/ImageCard.stories.tsx

@@ -1,94 +0,0 @@
-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>
-		</>
-	)
-}

package/src/ImageCard/ImageCard.tsx

@@ -1,82 +0,0 @@
-import { RiIcon, Spinner, useSize } from "@overmap-ai/blocks"
-import { truncate } from "@overmap-ai/core"
-import { cx } from "class-variance-authority"
-import {
-	ComponentProps,
-	forwardRef,
-	memo,
-	PropsWithoutRef,
-	ReactNode,
-	RefObject,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-} from "react"
-
-import { FileIcon } from "../FileIcon"
-
-export interface ImageCardProps extends Omit<PropsWithoutRef<ComponentProps<"div">>, "children"> {
-	file: File | null
-	alt?: string
-	error?: string
-	truncateLength?: number
-	rightSlot?: ReactNode
-}
-export const ImageCard = memo(
-	forwardRef<HTMLDivElement, ImageCardProps>((props, forwardedRef) => {
-		const { file, alt, error, rightSlot, className, truncateLength, ...rest } = props
-		const fileCardRef = useRef<HTMLDivElement>(null)
-		const imageInsetRef = useRef<HTMLDivElement>(null)
-		const fileCardSize = useSize(fileCardRef as RefObject<HTMLDivElement>)
-
-		useLayoutEffect(() => {
-			if (!imageInsetRef.current || !fileCardSize) return
-			imageInsetRef.current.style.height = `${fileCardSize.height * 4}px`
-		}, [fileCardSize])
-
-		const fileName = useMemo(() => {
-			if (!file) return
-			return truncateLength !== undefined ? truncate(file.name, truncateLength) : file.name
-		}, [file, truncateLength])
-
-		return (
-			<div
-				className={cx(
-					className,
-					"relative flex h-max w-full flex-col gap-0 overflow-hidden rounded-md border items-center border-(--base-a6)",
-				)}
-				ref={forwardedRef}
-				{...rest}
-			>
-				{!file && !error && (
-					<div className="absolute flex h-full w-full flex-col items-center justify-center">
-						<Spinner />
-					</div>
-				)}
-
-				<div
-					ref={imageInsetRef}
-					className="-m-4 flex max-w-full items-center justify-center overflow-hidden bg-clip-padding"
-				>
-					{file && !error && (
-						<img
-							className="max-w-full object-cover"
-							src={URL.createObjectURL(file)}
-							alt={alt ?? file.name}
-						/>
-					)}
-				</div>
-				<div
-					className={cx("flex h-max w-full items-center gap-1 bg-(--base-2) px-2 py-1", {
-						"bg-transparent": !file,
-					})}
-					ref={fileCardRef}
-				>
-					{error ? <RiIcon icon="RiFileWarningLine" /> : file && <FileIcon fileType={file.type} />}
-					{error ?? fileName}
-					{rightSlot}
-				</div>
-			</div>
-		)
-	}),
-)

package/src/ImageCard/index.ts

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

package/src/ImageMarkup/ImageMarkup.stories.tsx

@@ -1,65 +0,0 @@
-import { Button } from "@overmap-ai/blocks"
-import type { Meta } from "@storybook/react"
-import { ChangeEvent, useCallback, useRef, useState } from "react"
-
-import { ImageMarkup } from "./ImageMarkup"
-
-const meta = {
-	title: "Components/ImageMarkup",
-	component: ImageMarkup,
-	tags: ["autodocs"],
-	parameters: {
-		disablePanel: true,
-	},
-} satisfies Meta<typeof ImageMarkup>
-
-export default meta
-
-export const Basic = () => {
-	const inputRef = useRef<HTMLInputElement>(null)
-	const [file, setFile] = useState<File | null>(null)
-	const [open, setOpen] = useState(false)
-	const [dirty, setDirty] = useState(false)
-
-	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} />
-			<Button
-				onClick={() => {
-					setOpen(!open)
-				}}
-			>
-				Open
-			</Button>
-			{file && open && (
-				<ImageMarkup
-					dirty={dirty}
-					onDirty={(dirty) => {
-						setDirty(dirty)
-					}}
-					file={file}
-					onClose={() => {
-						setOpen(false)
-					}}
-					onDelete={() => {
-						setFile(null)
-						alert("deleted")
-					}}
-					onSave={(file: File) => {
-						setFile(file)
-						alert("saved")
-					}}
-				/>
-			)}
-		</>
-	)
-}