feat(organizations): add theming/story for Mantine TextInput TASK-1378 (

#5424)

### 📣 Summary
Add theming and storybook for custom TextInput component. 

---------

Co-authored-by: Ruth Shryock <[email protected]>
Co-authored-by: Paulo Amorim <[email protected]>
Co-authored-by: James Kiger <[email protected]>

jsapp/js/components/common/textBox.stories.tsx

@@ -16,7 +16,7 @@ const textBoxTypes: TextBoxType[] = [
 const textBoxSizes: TextBoxSize[] = ['s', 'm', 'l'];
 
 export default {
-  title: 'common/TextBox',
+  title: 'commonDeprecated/TextBox',
   component: TextBox,
   description:
     'This is a component that displays an input. It uses most of the browser built-in functionalities.',

jsapp/js/components/common/textBox.tsx

@@ -72,6 +72,7 @@ interface TextBoxProps {
 /**
  * A generic text box component. It relies on parent to handle all the data
  * updates.
+ * * @deprecated Use mantine inputs
  */
 export default function TextBox(props: TextBoxProps) {
   const inputReference: React.MutableRefObject<null | HTMLInputElement> =

jsapp/js/components/common/textInput.stories.tsx

@@ -0,0 +1,110 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import { TextInput, TextInputProps } from '@mantine/core';
+import Icon from './icon';
+
+const inputSizes: Array<TextInputProps['size']> = [
+  'sm',
+  'md',
+  'lg',
+];
+
+export default {
+  title: 'common/TextInput',
+  component: TextInput,
+  argTypes: {
+    label: {
+      description: 'Appears above the input',
+      control: 'text',
+    },
+    placeholder: {
+      description: 'Placeholder text for the input',
+      control: 'text',
+    },
+    value: {
+      description: 'Current value of the input',
+      control: 'text',
+    },
+    onChange: {
+      description: 'Input value change callback',
+    },
+    size: {
+      description:
+        'Changes the size of the component (similar sizing as Button)',
+      defaultValue: 'md',
+      options: inputSizes,
+      control: {type: 'radio'},
+    },
+    disabled: {
+      description: 'Disables the input',
+      control: 'boolean',
+    },
+    required: {
+      description: 'Marks the input as required',
+      control: 'boolean',
+    },
+    error: {
+      description: 'Error message or state for the input',
+      control: 'text',
+    },
+  },
+} as Meta<typeof TextInput>;
+
+type Story = StoryObj<typeof TextInput>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Default Text Input',
+    placeholder: 'Enter text...',
+    size: 'md',
+  },
+};
+
+export const AutoFocused: Story = {
+  args: {
+    label: 'Default Text Input',
+    placeholder: 'Enter text...',
+    size: 'md',
+    autoFocus: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled Input',
+    placeholder: 'You cannot type here',
+    size: 'md',
+    disabled: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Email',
+    placeholder: 'Enter your email',
+    value: "not an email",
+    error: 'Invalid email address',
+    size: 'md',
+  },
+};
+
+export const WithIconLeft: Story = {
+  args: {
+    label: 'Required Input',
+    placeholder: 'This field is required',
+    required: true,
+    withAsterisk: true,
+    leftSection: <Icon name='user' size='s' />,
+    size: 'md',
+  },
+};
+
+export const WithIconRight: Story = {
+  args: {
+    label: 'Required Input',
+    placeholder: 'This field is required',
+    required: true,
+    withAsterisk: true,
+    rightSection: <Icon name='user' size='s' />,
+    size: 'md',
+  },
+};

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

@@ -0,0 +1,35 @@
+.input:focus-visible:not([data-error]) {
+  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;
+  }
+}
+
+.input[data-disabled] {
+  background-color: var(--mantine-color-gray-7);
+  border-color: var(--mantine-color-gray-3);
+
+  &::placeholder {
+    color: var(--mantine-color-gray-2);
+  }
+}
+
+.input[data-error] {
+  border-color: var(--mantine-color-red-7);
+}
+
+.section {
+  color: var(--mantine-color-gray-2);
+}
+
+.label {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-gray-1);
+  margin-bottom: 5px;
+}

jsapp/js/theme/kobo/InputBase.ts

@@ -0,0 +1,17 @@
+import classes from './InputBase.module.css';
+import {InputBase} from '@mantine/core';
+
+export const InputBaseThemeKobo = InputBase.extend({
+  defaultProps: {
+    size: 'md',
+    wrapperProps: {
+      classNames: {
+        label: classes.label,
+      },
+    },
+    classNames: {
+      input: classes.input,
+      section: classes.section,
+    },
+  },
+});

jsapp/js/theme/kobo/index.ts

@@ -2,6 +2,7 @@ import {createTheme, rem} from '@mantine/core';
 import {ActionIconThemeKobo} from './ActionIcon';
 import {ButtonThemeKobo} from './Button';
 import {TableThemeKobo} from './Table';
+import {InputBaseThemeKobo} from './InputBase';
 import {TooltipThemeKobo} from './Tooltip';
 import {MenuThemeKobo} from './Menu';
 import {AlertThemeKobo} from './Alert';
@@ -79,7 +80,7 @@ export const themeKobo = createTheme({
   fontFamily: '"Roboto", sans-serif',
   fontFamilyMonospace: 'Roboto Mono, monospace',
   fontSizes: {
-    xs: rem(11), // TODO: For now implied from button sizes.
+    xs: rem(12),
     sm: rem(13), // TODO: For now implied from button sizes.
     md: rem(14), // TODO: For now implied from button sizes.
     lg: rem(16),
@@ -106,11 +107,12 @@ export const themeKobo = createTheme({
     ActionIcon: ActionIconThemeKobo,
     Alert: AlertThemeKobo,
     Button: ButtonThemeKobo,
+    InputBase: InputBaseThemeKobo,
+    Loader: LoaderThemeKobo,
     Menu: MenuThemeKobo,
+    Modal: ModalThemeKobo,
+    Select: SelectThemeKobo,
     Tooltip: TooltipThemeKobo,
     Table: TableThemeKobo,
-    Select: SelectThemeKobo,
-    Loader: LoaderThemeKobo,
-    Modal: ModalThemeKobo,
   },
 });