chore: replace text field with chakra, add focus border color for ric…

…h text
opengovsg · Jan 9, 2025 · 4e96d7a · 4e96d7a
1 parent 9f9c11f
commit 4e96d7a
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 76 deletions.
diff --git a/packages/frontend/src/components/InputCreator/index.tsx b/packages/frontend/src/components/InputCreator/index.tsx
@@ -138,18 +138,14 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
 
     return (
       <TextField
-        defaultValue={value}
         required={required}
         placeholder={placeholder}
         readOnly={readOnly || disabled}
         name={computedName}
-        size="small"
         label={label}
-        fullWidth
         multiline={type === 'multiline'}
         description={description}
         clickToCopy={clickToCopy}
-        autoComplete={schema.autoComplete}
       />
     )
   }

diff --git a/packages/frontend/src/components/RichTextEditor/RichTextEditor.scss b/packages/frontend/src/components/RichTextEditor/RichTextEditor.scss
@@ -203,6 +203,11 @@
   height: 100%;
   justify-content: center;
 
+  &:focus-within {
+    border-color: var(--chakra-colors-primary-500);
+    box-shadow: 0 0 0 1px var(--chakra-colors-primary-500);
+  }
+
   .tiptap p.is-editor-empty:first-child::before {
     color: #adb5bd;
     content: attr(data-placeholder);

diff --git a/packages/frontend/src/components/TextField/index.tsx b/packages/frontend/src/components/TextField/index.tsx
@@ -1,16 +1,15 @@
 import * as React from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
+import { BiCopy } from 'react-icons/bi'
 import Markdown from 'react-markdown'
-import { FormControl } from '@chakra-ui/react'
-import ContentCopyIcon from '@mui/icons-material/ContentCopy'
-import IconButton from '@mui/material/IconButton'
-import InputAdornment from '@mui/material/InputAdornment'
-import MuiTextField, {
-  TextFieldProps as MuiTextFieldProps,
-} from '@mui/material/TextField'
-import { FormLabel } from '@opengovsg/design-system-react'
-
-import copyInputValue from '@/helpers/copyInputValue'
+import { FormControl, InputGroup, InputRightElement } from '@chakra-ui/react'
+import {
+  FormLabel,
+  IconButton,
+  Input,
+  Textarea,
+} from '@opengovsg/design-system-react'
+import copy from 'clipboard-copy'
 
 type TextFieldProps = {
   shouldUnregister?: boolean
@@ -19,50 +18,46 @@ type TextFieldProps = {
   clickToCopy?: boolean
   readOnly?: boolean
   description?: string
-} & MuiTextFieldProps
-
-const createCopyAdornment = (
-  ref: React.RefObject<HTMLInputElement | null>,
-): React.ReactElement => {
-  return (
-    <InputAdornment position="end">
-      <IconButton
-        onClick={() => copyInputValue(ref.current as HTMLInputElement)}
-        edge="end"
-      >
-        <ContentCopyIcon color="primary" />
-      </IconButton>
-    </InputAdornment>
-  )
+  required?: boolean
+  multiline?: boolean
+  onChange?: (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void
+  onBlur?: (
+    event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void
+  placeholder?: string
+  defaultValue?: string
 }
 
 export default function TextField(props: TextFieldProps): React.ReactElement {
   const { control } = useFormContext()
-  const inputRef = React.useRef<HTMLInputElement | null>(null)
   const {
     required,
     name,
     label,
     description,
     defaultValue,
+    placeholder,
     shouldUnregister,
     clickToCopy,
+    multiline,
     readOnly,
     onBlur,
     onChange,
-    ...textFieldProps
   } = props
 
+  const SelectedComponent = multiline ? Textarea : Input
+
   return (
     <Controller
-      rules={{ required }}
+      rules={{ required: required }}
       name={name}
       defaultValue={defaultValue || ''}
       control={control}
       shouldUnregister={shouldUnregister}
       render={({
         field: {
-          ref,
           onChange: controllerOnChange,
           onBlur: controllerOnBlur,
           ...field
@@ -81,35 +76,37 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
               {label}
             </FormLabel>
           )}
-          <MuiTextField
-            {...textFieldProps}
-            {...field}
-            onChange={(...args) => {
-              controllerOnChange(...args)
-              onChange?.(...args)
-            }}
-            onBlur={(...args) => {
-              controllerOnBlur()
-              onBlur?.(...args)
-            }}
-            inputRef={(element) => {
-              inputRef.current = element
-              ref(element)
-            }}
-            InputProps={{
-              readOnly,
-              endAdornment: clickToCopy ? createCopyAdornment(inputRef) : null,
-            }}
-          />
+          <InputGroup>
+            <SelectedComponent
+              {...field}
+              placeholder={placeholder}
+              onChange={(...args) => {
+                controllerOnChange(...args)
+                onChange?.(...args)
+              }}
+              onBlur={(...args) => {
+                controllerOnBlur()
+                onBlur?.(...args)
+              }}
+              isReadOnly={readOnly}
+            />
+            {clickToCopy && (
+              <InputRightElement>
+                <IconButton
+                  icon={<BiCopy />}
+                  colorScheme="primary"
+                  variant="clear"
+                  aria-label={'Copy'}
+                  minHeight="42px"
+                  mr="2px"
+                  borderRadius="base"
+                  onClick={() => copy(field.value)}
+                />
+              </InputRightElement>
+            )}
+          </InputGroup>
         </FormControl>
       )}
     />
   )
 }
-
-TextField.defaultProps = {
-  readOnly: false,
-  disabled: false,
-  clickToCopy: false,
-  shouldUnregister: false,
-}
diff --git a/packages/frontend/src/components/WebhookUrlInfo/index.tsx b/packages/frontend/src/components/WebhookUrlInfo/index.tsx
@@ -2,6 +2,7 @@ import { ITriggerInstructions } from '@plumber/types'
 
 import * as React from 'react'
 import ReactMarkdown from 'react-markdown'
+import { Box } from '@chakra-ui/react'
 import type { AlertProps } from '@mui/material/Alert'
 
 import TextField from '../TextField'
@@ -14,7 +15,7 @@ type WebhookUrlInfoProps = {
 } & AlertProps
 
 function WebhookUrlInfo(props: WebhookUrlInfoProps): React.ReactElement {
-  const { webhookUrl, webhookTriggerInstructions, ...alertProps } = props
+  const { webhookTriggerInstructions, ...alertProps } = props
 
   const { beforeUrlMsg, afterUrlMsg, hideWebhookUrl } =
     webhookTriggerInstructions
@@ -27,16 +28,9 @@ function WebhookUrlInfo(props: WebhookUrlInfoProps): React.ReactElement {
     <Alert icon={false} color="info" {...alertProps}>
       {beforeUrlMsg && <ReactMarkdown>{beforeUrlMsg}</ReactMarkdown>}
       {!hideWebhookUrl && (
-        <TextField
-          sx={{
-            my: '1rem',
-          }}
-          readOnly
-          clickToCopy={true}
-          name="webhookUrl"
-          fullWidth
-          defaultValue={webhookUrl}
-        />
+        <Box my={4}>
+          <TextField readOnly clickToCopy={true} name="webhookUrl" />
+        </Box>
       )}
       {afterUrlMsg && <ReactMarkdown>{afterUrlMsg}</ReactMarkdown>}
     </Alert>

diff --git a/packages/frontend/src/helpers/copyInputValue.ts b/packages/frontend/src/helpers/copyInputValue.ts