feat: Text field click to edit (IN-833) (#420)

# Pull Request type



Please check the type of change your PR introduces:

- [ ] Bugfix
- [x] Feature
- [ ] Code style update (formatting, renaming)
- [ ] Refactoring (no functional changes, no API changes)
- [ ] Build-related changes
- [ ] Documentation content changes
- [ ] Other (please describe):

## What is the current behavior?



Issue Number: [IN-833](https://inreach.atlassian.net/browse/IN-831)

## What is the new behavior?



- Created basic form context for edit org pages
- Created SingleLineTextField and MultiLineTextField components

## Does this introduce a breaking change?

- [ ] Yes
- [x] No



## Other information




[IN-833]: https://inreach.atlassian.net/browse/IN-833?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

PR-URL: #420
Co-authored-by: Joaquin Berrios <98376262+Joaquinb2000@users.noreply.github.com>
Co-authored-by: InReach [Automated User] <108850934+InReach-svc@users.noreply.github.com>
Co-authored-by: Joe Karow <58997957+JoeKarow@users.noreply.github.com>

packages/ui/components/data-portal/EmailTableDrawer.tsx

@@ -195,6 +195,7 @@ export const _EmailTableDrawer = forwardRef<HTMLButtonElement, EmailTableDrawerP
 								.getInputProps(`data.${info.row.index}.email`, { withFocus: false })
 								.onChange(e.target.value),
 						variant: variants.Input.small,
+						type: 'email',
 					}}
 				/>
 			),

packages/ui/components/data-portal/InlineTextInput.stories.tsx

@@ -0,0 +1,45 @@
+import { Box } from '@mantine/core'
+import { type Meta } from '@storybook/react'
+
+import { InlineTextarea, InlineTextInput } from './InlineTextInput'
+
+export default {
+	title: 'Data Portal/Fields/Inline Text Field',
+	component: InlineTextInput,
+	parameters: {
+		layout: 'fullscreen',
+		layoutWrapper: 'centeredHalf',
+	},
+	argTypes: {
+		fontSize: {
+			options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'utility1', 'utility2', 'utility3', 'utility4'],
+			control: { type: 'select' },
+		},
+		'data-isDirty': { control: { type: 'boolean' } },
+	},
+	args: {
+		value: 'Test value',
+	},
+} satisfies Meta<typeof InlineTextInput>
+
+export const TextInput = {
+	args: {
+		fontSize: 'h1',
+	},
+	render: (args) => (
+		<Box w={'50%'}>
+			<InlineTextInput {...args} />
+		</Box>
+	),
+} satisfies Meta<typeof InlineTextInput>
+
+export const Textarea = {
+	args: {
+		fontSize: 'utility1',
+	},
+	render: (args) => (
+		<Box w={'50%'}>
+			<InlineTextarea {...args} />
+		</Box>
+	),
+} satisfies Meta<typeof InlineTextarea>

packages/ui/components/data-portal/InlineTextInput.tsx

@@ -0,0 +1,78 @@
+import {
+	createStyles,
+	rem,
+	Textarea,
+	type TextareaProps,
+	TextInput,
+	type TextInputProps,
+} from '@mantine/core'
+
+const useStyles = createStyles((theme) => ({
+	...theme.other.utilityFonts,
+	...theme.other.headings,
+}))
+const useBaseStyles = createStyles((theme) => ({
+	input: {
+		borderWidth: 0,
+		padding: `${rem(6)} ${rem(8)} !important`,
+		height: 'unset',
+		minHeight: 'unset',
+		'&:focus, &:focus-within': {
+			borderColor: theme.other.colors.secondary.black,
+			borderWidth: rem(1),
+		},
+		'&[data-isDirty=true]': {
+			backgroundColor: theme.other.colors.primary.lightGray,
+		},
+	},
+}))
+
+const useFontSize = ({ fontSize, classNames }: SingleLineTextProps | MultiLineTextProps) => {
+	const { classes } = useStyles()
+	const { classes: baseClasses, cx } = useBaseStyles()
+	return {
+		...classNames,
+		input: fontSize ? cx(classes[fontSize], baseClasses.input) : baseClasses.input,
+	}
+}
+
+/**
+ * Components works like TextInput. To use one of the variant fonts pass a string like 'h1', 'h2', 'utility1',
+ * etc to the fontSize prop.
+ *
+ * @param props - TextInputProps
+ * @param props.fontSize - HeadingSizes | utilitySizes
+ * @returns JSX.Element
+ */
+export const InlineTextInput = ({ fontSize, ...props }: SingleLineTextProps) => {
+	const variant = useFontSize({ fontSize, ...props })
+
+	return <TextInput {...props} classNames={variant} />
+}
+
+/**
+ * Component works like Textarea. To use one of the variant fonts pass a string like 'h1', 'h2', 'utility1',
+ * etc to the fontSize prop.
+ *
+ * @param props - TextareaProps
+ * @param props.fontSize - HeadingSizes | utilitySizes
+ * @returns JSX.Element
+ */
+export const InlineTextarea = ({ fontSize, ...props }: MultiLineTextProps) => {
+	const variant = useFontSize({ fontSize, ...props })
+
+	return <Textarea {...props} classNames={variant} />
+}
+
+type FontSizes = keyof ReturnType<typeof useStyles>['classes']
+
+interface SingleLineTextProps extends TextInputProps {
+	fontSize?: FontSizes
+	/** Flag if background color should change to indicate that the field was edited */
+	'data-isDirty'?: boolean
+}
+
+interface MultiLineTextProps extends TextareaProps {
+	fontSize?: FontSizes
+	'data-isDirty'?: boolean
+}

packages/ui/components/data-portal/MultiSelectPopover.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { MultiSelectPopover } from './MultiSelectPopover'
 
 export default {
-	title: 'Data Portal/Multi Select Popover',
+	title: 'Data Portal/Fields/Multi Select Popover',
 	component: MultiSelectPopover,
 	args: {
 		data: [

packages/ui/components/data-portal/PhoneNumberEntry.stories.tsx

@@ -19,7 +19,7 @@ const FormContextDecorator = (Story: StoryFn) => {
 	)
 }
 export default {
-	title: 'Data Portal/Phone Number Entry',
+	title: 'Data Portal/Fields/Phone Number Entry',
 	component: PhoneNumberEntry,
 	parameters: {
 		msw: [fieldOptHandlers.countries],

packages/ui/theme/common.tsx

@@ -110,6 +110,14 @@ const themeCustomObj = {
 			color: colors.secondary.black,
 		},
 	},
+	headings: {
+		h1: { fontSize: rem(40), lineHeight: 1.25, fontWeight: 500 },
+		h2: { fontSize: rem(24), lineHeight: 1.25, fontWeight: 500 },
+		h3: { fontSize: rem(16), lineHeight: 1.25, fontWeight: 600 },
+		h4: { fontSize: rem(16), lineHeight: 1.25, fontWeight: 600 },
+		h5: { fontSize: rem(16), lineHeight: 1.25, fontWeight: 600 },
+		h6: { fontSize: rem(16), lineHeight: 1.25, fontWeight: 600 },
+	},
 	border: {
 		default: '1px solid #d9d9d9',
 	},
@@ -139,14 +147,15 @@ export const commonTheme = {
 	},
 	headings: {
 		fontWeight: 500,
-		sizes: {
-			h1: { fontSize: rem(40), lineHeight: 1.25, fontWeight: 500 },
-			h2: { fontSize: rem(24), lineHeight: 1.25, fontWeight: 500 },
-			h3: { fontSize: rem(16), lineHeight: 1.25, fontWeight: 600 },
-			h4: { fontSize: rem(16), lineHeight: 1.25, fontWeight: 600 },
-			h5: { fontSize: rem(16), lineHeight: 1.25, fontWeight: 600 },
-			h6: { fontSize: rem(16), lineHeight: 1.25, fontWeight: 600 },
-		},
+		sizes: themeCustomObj.headings,
+		// {
+		// 	h1: { fontSize: rem(40), lineHeight: 1.25, fontWeight: 500 },
+		// 	h2: { fontSize: rem(24), lineHeight: 1.25, fontWeight: 500 },
+		// 	h3: { fontSize: rem(16), lineHeight: 1.25, fontWeight: 600 },
+		// 	h4: { fontSize: rem(16), lineHeight: 1.25, fontWeight: 600 },
+		// 	h5: { fontSize: rem(16), lineHeight: 1.25, fontWeight: 600 },
+		// 	h6: { fontSize: rem(16), lineHeight: 1.25, fontWeight: 600 },
+		// },
 	},
 
 	shadows: {