refactor(mantine): migrate QA tags response form to mantine DEV-1168 (#6390)

### 💭 Notes
TLDR: Needed to create custom theme for mantine's `TagInput` as it has
some hacky styling that is different than our defaults.

Mantine's `TagInput` (and I suspect every other tag input library in
some way) has a "input" that's actually a div, which wraps around an
actual `<input>` element inside. This way it can display the tags in the
same wrapper, before where the user would actually type the tags in.
This means the default styles for mantine `<input>`'s can't apply here.
The div wrapper "input" needs `focus-within` rather than
`focus-visible`, as well as other default styles that we want to apply
to its wrapper div instead. It's probably easier to understand by
reading the code changes

### 👀 Preview steps
1. ℹ️ have an account and a project with NLP submissions
2. open NLP view
3. add a tags analysis question
5. 🟢 [on PR] notice that there is no functional differences between main

Author: duvld

jsapp/js/components/processing/analysis/responseForms/tagsResponseForm.component.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useState } from 'react'
 
+import { TagsInput } from '@mantine/core'
 // We don't use `KoboTagsInput` here, because we don't want the tags splitting
 // feature it has built in. It's easier for us to use `TagsInput` directly.
-import TagsInput from 'react-tagsinput'
 import AnalysisQuestionsContext from '#/components/processing/analysis/analysisQuestions.context'
 import {
   findQuestion,
@@ -60,24 +60,7 @@ export default function TagsResponseForm(props: TagsResponseFormProps) {
       <CommonHeader uuid={props.uuid} />
 
       <section className={commonStyles.content}>
-        <TagsInput
-          value={response}
-          onChange={onTagsChange}
-          // Adds a listener to changes on the internal text field before
-          // text is added as a tag
-          inputProps={{
-            onChange: () => {
-              analysisQuestions?.dispatch({ type: 'hasUnsavedWork' })
-            },
-          }}
-          onlyUnique
-          addOnBlur
-          // We set this intentionally, because we don't want the pasted text
-          // to be split, automatically transformed into tags, or already typed
-          // in text to be lost after pasting.
-          addOnPaste={false}
-          disabled={!props.canEdit}
-        />
+        <TagsInput value={response} onChange={onTagsChange} acceptValueOnBlur disabled={!props.canEdit} />
       </section>
     </>
   )

jsapp/js/theme/kobo/TagsInput.module.css

@@ -0,0 +1,19 @@
+.pill {
+  background-color: var(--mantine-color-gray-6);
+  border-radius: var(--mantine-radius-sm);
+  font-size: var(--mantine-font-size-md);
+  color: var(--mantine-color-gray-1);
+}
+
+.input:focus-within {
+  box-shadow: 0 0 0 2px var(--mantine-color-blue-7);
+}
+
+.input {
+  border-color: var(--mantine-color-gray-6);
+
+  &::placeholder {
+    color: var(--mantine-color-gray-3);
+    opacity: 1;
+  }
+}

jsapp/js/theme/kobo/TagsInput.ts

@@ -0,0 +1,7 @@
+import { TagsInput } from '@mantine/core'
+import classes from './TagsInput.module.css'
+
+export const TagsInputThemeKobo = TagsInput.extend({
+  classNames: classes,
+  defaultProps: { size: 'md' },
+})

jsapp/js/theme/kobo/index.ts

@@ -9,6 +9,7 @@ import { MenuThemeKobo } from './Menu'
 import { ModalThemeKobo } from './Modal'
 import { SelectThemeKobo } from './Select'
 import { TableThemeKobo } from './Table'
+import { TagsInputThemeKobo } from './TagsInput'
 import { TooltipThemeKobo } from './Tooltip'
 
 export const themeKobo = createTheme({
@@ -117,5 +118,6 @@ export const themeKobo = createTheme({
     Tooltip: TooltipThemeKobo,
     Table: TableThemeKobo,
     Divider: DividerThemeKobo,
+    TagsInput: TagsInputThemeKobo,
   },
 })