upgrade to latest epic stack with vite, dep bump (#232)

* upgrade to latest epic stack with vite, dep bump * fix linting & tsc * fix content-security-policy * fix typecheck
codeforboston · Aug 19, 2024 · 8dc87ab · 8dc87ab
1 parent 2741f8f
commit 8dc87ab
Show file tree

Hide file tree

Showing 110 changed files with 12,737 additions and 10,162 deletions.
diff --git a/heat-stack/.eslintignore b/heat-stack/.eslintignore
diff --git a/heat-stack/app/components/error-boundary.tsx b/heat-stack/app/components/error-boundary.tsx
@@ -19,7 +19,7 @@ export function GeneralErrorBoundary({
 		</p>
 	),
 	statusHandlers,
-	unexpectedErrorHandler = error => <p>{getErrorMessage(error)}</p>,
+	unexpectedErrorHandler = (error) => <p>{getErrorMessage(error)}</p>,
 }: {
 	defaultStatusHandler?: StatusHandler
 	statusHandlers?: Record<number, StatusHandler>

diff --git a/heat-stack/app/components/forms.tsx b/heat-stack/app/components/forms.tsx
@@ -1,6 +1,13 @@
 import { useInputControl } from '@conform-to/react'
+import { REGEXP_ONLY_DIGITS_AND_CHARS, type OTPInputProps } from 'input-otp'
 import React, { useId } from 'react'
 import { Checkbox, type CheckboxProps } from './ui/checkbox.tsx'
+import {
+	InputOTP,
+	InputOTPGroup,
+	InputOTPSeparator,
+	InputOTPSlot,
+} from './ui/input-otp.tsx'
 import { Input } from './ui/input.tsx'
 import { Label } from './ui/label.tsx'
 import { Textarea } from './ui/textarea.tsx'
@@ -18,7 +25,7 @@ export function ErrorList({
 	if (!errorsToRender?.length) return null
 	return (
 		<ul id={id} className="flex flex-col gap-1">
-			{errorsToRender.map(e => (
+			{errorsToRender.map((e) => (
 				<li key={e} className="text-[10px] text-foreground-destructive">
 					{e}
 				</li>
@@ -57,6 +64,50 @@ export function Field({
 	)
 }
 
+export function OTPField({
+	labelProps,
+	inputProps,
+	errors,
+	className,
+}: {
+	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
+	inputProps: Partial<OTPInputProps & { render: never }>
+	errors?: ListOfErrors
+	className?: string
+}) {
+	const fallbackId = useId()
+	const id = inputProps.id ?? fallbackId
+	const errorId = errors?.length ? `${id}-error` : undefined
+	return (
+		<div className={className}>
+			<Label htmlFor={id} {...labelProps} />
+			<InputOTP
+				pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+				maxLength={6}
+				id={id}
+				aria-invalid={errorId ? true : undefined}
+				aria-describedby={errorId}
+				{...inputProps}
+			>
+				<InputOTPGroup>
+					<InputOTPSlot index={0} />
+					<InputOTPSlot index={1} />
+					<InputOTPSlot index={2} />
+				</InputOTPGroup>
+				<InputOTPSeparator />
+				<InputOTPGroup>
+					<InputOTPSlot index={3} />
+					<InputOTPSlot index={4} />
+					<InputOTPSlot index={5} />
+				</InputOTPGroup>
+			</InputOTP>
+			<div className="min-h-[32px] px-4 pb-3 pt-1">
+				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
+			</div>
+		</div>
+	)
+}
+
 export function TextareaField({
 	labelProps,
 	textareaProps,
@@ -123,15 +174,15 @@ export function CheckboxField({
 					aria-invalid={errorId ? true : undefined}
 					aria-describedby={errorId}
 					checked={input.value === checkedValue}
-					onCheckedChange={state => {
+					onCheckedChange={(state) => {
 						input.change(state.valueOf() ? checkedValue : '')
 						buttonProps.onCheckedChange?.(state)
 					}}
-					onFocus={event => {
+					onFocus={(event) => {
 						input.focus()
 						buttonProps.onFocus?.(event)
 					}}
-					onBlur={event => {
+					onBlur={(event) => {
 						input.blur()
 						buttonProps.onBlur?.(event)
 					}}

diff --git a/heat-stack/app/components/progress-bar.tsx b/heat-stack/app/components/progress-bar.tsx
@@ -22,7 +22,7 @@ function EpicProgress() {
 			.getAnimations()
 			.map(({ finished }) => finished)
 
-		Promise.allSettled(animationPromises).then(() => {
+		void Promise.allSettled(animationPromises).then(() => {
 			if (!delayedPending) setAnimationComplete(true)
 		})
 	}, [delayedPending])

diff --git a/heat-stack/app/components/search-bar.tsx b/heat-stack/app/components/search-bar.tsx
@@ -32,7 +32,7 @@ export function SearchBar({
 			method="GET"
 			action="/users"
 			className="flex flex-wrap items-center justify-center gap-2"
-			onChange={e => autoSubmit && handleFormChange(e.currentTarget)}
+			onChange={(e) => autoSubmit && handleFormChange(e.currentTarget)}
 		>
 			<div className="flex-1">
 				<Label htmlFor={id} className="sr-only">

diff --git a/heat-stack/app/components/ui/README.md b/heat-stack/app/components/ui/README.md
@@ -4,4 +4,4 @@ Some components in this directory are downloaded via the
 [shadcn/ui](https://ui.shadcn.com) [CLI](https://ui.shadcn.com/docs/cli). Feel
 free to customize them to your needs. It's important to know that shadcn/ui is
 not a library of components you install, but instead it's a registry of prebuilt
-components which you can download and customize.
+components which you can download and customize.
diff --git a/heat-stack/app/components/ui/checkbox.tsx b/heat-stack/app/components/ui/checkbox.tsx
@@ -1,6 +1,5 @@
-import * as React from 'react'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { Check } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '#app/utils/misc.tsx'
 
@@ -26,15 +25,14 @@ const Checkbox = React.forwardRef<
 		<CheckboxPrimitive.Indicator
 			className={cn('flex items-center justify-center text-current')}
 		>
-			<Check className="h-4 w-4" />
-			{/* <svg viewBox="0 0 8 8">
+			<svg viewBox="0 0 8 8">
 				<path
 					d="M1,4 L3,6 L7,2"
 					stroke="currentcolor"
 					strokeWidth="1"
 					fill="none"
 				/>
-			</svg> */}
+			</svg>
 		</CheckboxPrimitive.Indicator>
 	</CheckboxPrimitive.Root>
 ))

diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/CurrentHeatingSystem.tsx b/heat-stack/app/components/ui/heat/CaseSummaryComponents/CurrentHeatingSystem.tsx
@@ -1,10 +1,10 @@
 import { useForm, getInputProps } from '@conform-to/react'
 import { Form } from '@remix-run/react'
-import { ErrorList } from './ErrorList.tsx'
 import { Button } from '#/app/components/ui/button.tsx'
 
 import { Input } from '#/app/components/ui/input.tsx'
 import { Label } from '#/app/components/ui/label.tsx'
+import { ErrorList } from './ErrorList.tsx'
 
 type CurrentHeatingSystemProps = { fields: any }
 

diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/EnergyUseHistory.tsx b/heat-stack/app/components/ui/heat/CaseSummaryComponents/EnergyUseHistory.tsx
@@ -1,119 +1,21 @@
-import { Suspense, lazy } from 'react'
-import { FieldMetadata, useForm } from '@conform-to/react'
-import { Form, useLocation } from '@remix-run/react'
-import { ErrorList } from "./ErrorList.tsx"
-import { Input } from '#/app/components/ui/input.tsx'
-import { Label } from '#/app/components/ui/label.tsx'
-import { Button } from '#/app/components/ui/button.tsx'
+import { Upload } from 'lucide-react'
+import { Suspense, /* lazy */ } from 'react'
 
+import { Button } from '#/app/components/ui/button.tsx'
 import { AnalysisHeader } from './AnalysisHeader.tsx'
 import { EnergyUseHistoryChart } from './EnergyUseHistoryChart.tsx'
-import { Upload } from 'lucide-react'
-
-
-import * as pyodideModule from 'pyodide'
-import GeocodeUtil from "#app/utils/GeocodeUtil";
-import WeatherUtil from "#app/utils/WeatherUtil";
-
-
-// type EnergyUseProps = {fields: any};
-
-
-const getPyodide = async () => {
-	// console.log(__dirname);
-	// public folder needed in path because it is in NodeJS instead of the browser:
-	// return await pyodideModule.loadPyodide({
-	// 	indexURL: `${}/pyodide-env/`,
-	// })
-}
-
-getPyodide();
-
-// const runPythonScript = async () => {
-// 	const pyodide: any = await getPyodide()
-// 	// console.log(engine);
-// 	// await pyodide.loadPackage('numpy')
-
-// 	/* NOTES for pyodide-core:
-// 		  need to be a special version from the release page, no pure whl: https://github.com/pydantic/pydantic-core/pull/128
-// 		  get it from https://github.com/pydantic/pydantic-core/releases e.g. https://github.com/pydantic/pydantic-core/releases/download/v2.14.5/pydantic_core-2.14.5-cp311-cp311-emscripten_3_1_32_wasm32.whl
-// 	*/
-// 	await pyodide.loadPackage(
-// 		'public/pyodide-env/pydantic_core-2.14.5-cp311-cp311-emscripten_3_1_32_wasm32.whl',
-// 	)
-
-// 	/* NOTES for pydantic, typing-extensions, annotated_types: 
-// 		pyodide should match pyodide-core somewhat. 
-// 		typing-extensions needs specific version per https://github.com/pyodide/pyodide/issues/4234#issuecomment-1771735148
-// 		try getting it from 
-// 		   - https://pypi.org/project/pydantic/#files
-// 		   - https://pypi.org/project/typing-extensions/
-// 		   - https://pypi.org/project/annotated-types/#files
-// 	*/
-// 	await pyodide.loadPackage(
-// 		'public/pyodide-env/pydantic-2.5.2-py3-none-any.whl',
-// 	)
-// 	await pyodide.loadPackage(
-// 		'public/pyodide-env/typing_extensions-4.8.0-py3-none-any.whl',
-// 	)
-// 	await pyodide.loadPackage(
-// 		'public/pyodide-env/annotated_types-0.5.0-py3-none-any.whl',
-// 	)
 
-// 	/* NOTES FOR DEBUGGING new requirements.txt
-// 		  and getting specific versions of pure whl */
-// 	// the below works but uses the internet/pypi content delivery network rather than localhost.
-// 	// await pyodide.loadPackage('micropip')
-// 	// const micropip = await pyodide.pyimport('micropip')
-// 	// await micropip.install([
-// 	// 	'typing-extensions==4.8.0',
-// 	// 	'pydantic_core==2.14.5',
-// 	// 	'pydantic==2.5.2',
-// 	// ])
-// 	// await micropip.install(['annotated-types'])
-
-// 	await pyodide.loadPackage(
-// 		'../rules-engine/dist/rules_engine-0.0.1-py3-none-any.whl',
-// 	)
-
-// 	return pyodide
-// }
-
-// const pyodide: any = await runPythonScript()
-
-// const executePy = await pyodide.runPythonAsync(`
-// 	from rules_engine import parser
-// 	from rules_engine.pydantic_models import (
-// 	    FuelType,
-// 	    SummaryInput,
-// 	    TemperatureInput
-// 	)
-// 	from rules_engine import engine
-
-// 	def execute(summaryInputJs, temperatureInputJs, csvDataJs):
-
-// 	    summaryInputFromJs = summaryInputJs.as_object_map().values()._mapping
-// 	    temperatureInputFromJs =temperatureInputJs.as_object_map().values()._mapping
-
-// 	    naturalGasInputRecords = parser.parse_gas_bill(csvDataJs, parser.NaturalGasCompany.NATIONAL_GRID)
-
-
-// 	    summaryInput = SummaryInput(**summaryInputFromJs)
-// 	    temperatureInput = TemperatureInput(**temperatureInputFromJs)
-
-// 	    outputs = engine.get_outputs_natural_gas(summaryInput, temperatureInput, naturalGasInputRecords)
-
-// 	    return outputs.model_dump(mode="json")
-// 	execute
-// `)
+// import { FieldMetadata, useForm } from '@conform-to/react'
+// import { Form, useLocation } from '@remix-run/react'
+// import { ErrorList } from "./ErrorList.tsx"
+// import { Input } from '#/app/components/ui/input.tsx'
+// import { Label } from '#/app/components/ui/label.tsx'
 
 
 // export function EnergyUseHistory(props: EnergyUseProps) {
 export function EnergyUseHistory() {
 	const titleClass = 'text-5xl font-extrabold tracking-wide mt-10'
-	const subtitleClass = 'text-2xl font-semibold text-zinc-950 mt-9'
-	// const location = useLocation();
-	// console.log(location);
+	// const subtitleClass = 'text-2xl font-semibold text-zinc-950 mt-9'
 
 	return (
 
@@ -124,82 +26,7 @@ export function EnergyUseHistory() {
 					<input
 						id="energy_use_upload"
 						aria-label="Upload your energy billing company's bill."
-						// onChange={async event => {
-						// 	const file = event.target.files?.[0]
-						// 	if (file) {
-						// 		// const reader = new FileReader()
-						// 		// reader.onloadend = async (event) => {
-						// 		// 	console.log('reader.result', reader.result)
-						// 		// }
-						// 		// reader.readAsText(file)	
-
-						// 		// const GU = new GeocodeUtil();
-						// 		// const address = "1 Broadway, Cambridge, MA 02142";
-						// 		// let { x, y } = await GU.getLL(address);
-
-						// 		// const WU = new WeatherUtil();
-						// 		// const TIWD = await WU.getThatWeathaData(x, y, "2024-03-20", "2024-04-20");
-						// 		// const datesFromTIWD = TIWD.dates.map(datestring => new Date(datestring).toISOString().split('T')[0])
-						// 		// const convertedDatesTIWD = {dates: datesFromTIWD, temperatures: TIWD.temperatures}
-
-						// 		// console.log( `convertedDatesTIWD:`, convertedDatesTIWD );
-
-						// 		// const exampleNationalGridCSV = `Name,FIRST LAST,,,,,
-						// 		// Address,"100 STREET AVE, BOSTON MA 02130",,,,,
-						// 		// Account Number,1111111111,,,,,
-						// 		// Service,Service 1,,,,,
-						// 		// ,,,,,,
-						// 		// TYPE,START DATE,END DATE,USAGE,UNITS,COST,NOTES
-						// 		// Natural gas billing,10/2/2020,11/4/2020,29,therms,$42.08 ,
-						// 		// Natural gas billing,11/5/2020,12/3/2020,36,therms,$65.60 ,
-						// 		// Natural gas billing,12/4/2020,1/7/2021,97,therms,$159.49 ,
-						// 		// Natural gas billing,1/8/2021,2/5/2021,105,therms,$169.09 ,
-						// 		// Natural gas billing,2/6/2021,3/5/2021,98,therms,$158.19 ,
-						// 		// Natural gas billing,3/6/2021,4/6/2021,66,therms,$111.79 ,
-						// 		// Natural gas billing,4/7/2021,5/5/2021,22,therms,$43.16 ,
-						// 		// Natural gas billing,5/6/2021,6/7/2021,19,therms,$32.42 ,
-						// 		// Natural gas billing,6/8/2021,7/6/2021,7,therms,$18.68 ,
-						// 		// Natural gas billing,7/7/2021,8/4/2021,10,therms,$21.73 ,
-						// 		// Natural gas billing,8/5/2021,9/8/2021,11,therms,$25.35 ,
-						// 		// Natural gas billing,9/9/2021,10/5/2021,8,therms,$19.58 ,
-						// 		// Natural gas billing,10/6/2021,11/3/2021,13,therms,$27.10 ,
-						// 		// Natural gas billing,11/4/2021,12/6/2021,41,therms,$87.45 ,
-						// 		// Natural gas billing,12/7/2021,1/5/2022,86,therms,$171.92 ,
-						// 		// Natural gas billing,1/6/2022,2/3/2022,132,therms,$248.63 ,
-						// 		// Natural gas billing,2/4/2022,3/7/2022,116,therms,$226.66 ,
-						// 		// Natural gas billing,3/8/2022,4/4/2022,49,therms,$109.44 ,
-						// 		// Natural gas billing,4/5/2022,5/5/2022,39,therms,$87.54 ,
-						// 		// Natural gas billing,5/6/2022,6/6/2022,20,therms,$44.30 ,
-						// 		// Natural gas billing,6/7/2022,7/5/2022,9,therms,$27.71 ,
-						// 		// Natural gas billing,7/6/2022,8/3/2022,7,therms,$23.86 ,
-						// 		// Natural gas billing,8/4/2022,9/3/2022,8,therms,$24.04 ,
-						// 		// Natural gas billing,9/4/2022,10/3/2022,8,therms,$26.41 ,
-						// 		// Natural gas billing,10/4/2022,11/3/2022,19,therms,$48.92 ,`
-
-						// 		// // NaturalGasCompany = National Grid is 2 for now
-						// 		// const exampleNationalGridNaturalGasCompany = "2"
-
-						// 		// // csv is 1st arg. 2nd arg should have a selection of whether Eversource (1) or National Grid (2).
-						// 		// // rules engine-returned objects can be modified and passed back to rules engine
-
-						// 		// const summaryInput = {
-						// 		// 	living_area: 2155,
-						// 		// 	fuel_type: "GAS",
-						// 		// 	heating_system_efficiency: 0.97,
-						// 		// 	thermostat_set_point: 68.0,
-						// 		// 	setback_temperature: null,
-						// 		// 	setback_hours_per_day: null,
-						// 		// 	// TODO: https://github.com/codeforboston/home-energy-analysis-tool/issues/123
-						// 		// 	design_temperature: 9.5,
-						// 		// }
-
-						// 		// const result = executePy(summaryInput, convertedDatesTIWD, exampleNationalGridCSV);
-						// 		// console.log( result );
-						// 	} else {
-						// 		// setPreviewImage(null)
-						// 	}
-						// 	console.log('Boom!')
-						// }}
+						//onChange
 						accept=".xml,.csv,application/xml,text/xml,text/csv,application/csv,application/x-csv,text/comma-separated-values,text/x-comma-separated-values"
 						name="energy_use_upload"
 						type="file"

diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/HomeInformation.tsx b/heat-stack/app/components/ui/heat/CaseSummaryComponents/HomeInformation.tsx
@@ -1,9 +1,9 @@
+import { FieldMetadata, useForm, getInputProps } from '@conform-to/react'
 import { Form } from '@remix-run/react'
-import { ErrorList } from "./ErrorList.tsx"
 import { Button } from '#/app/components/ui/button.tsx'
 import { Input } from '#/app/components/ui/input.tsx'
 import { Label } from '#/app/components/ui/label.tsx'
-import { FieldMetadata, useForm, getInputProps } from '@conform-to/react'
+import { ErrorList } from "./ErrorList.tsx"
 
 // /** THE BELOW PROBABLY NEED TO MOVE TO A ROUTE RATHER THAN A COMPONENT, including action function, */
 // // import { redirect } from '@remix-run/react'