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

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

@@ -0,0 +1,114 @@
+import type {ComponentStory, ComponentMeta} from '@storybook/react';
+import {TextInput} from './textInput';
+import {IconNames} from 'jsapp/fonts/k-icons';
+import Icon from './icon';
+
+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',
+      type: 'string',
+    },
+    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: {summary: 'lg'},
+      options: ['sm', 'md', 'lg'],
+      control: {type: 'radio'},
+    },
+    leftSection: {
+      description: 'Appears inside the input, on the beginning.',
+      options: Object.keys(IconNames),
+      mapping: Object.keys(IconNames)
+        .map(
+          (key) =>
+            [key, <Icon name={key as IconNames} color='storm' />] as const
+        )
+        .reduce((o, [k, v]) => {
+          return {...o, [k]: v};
+        }, {}),
+      control: {type: 'select'},
+    },
+    rightSection: {
+      description:
+        'Appears inside the input, on the end. Is replaced by "alert" icon if there are any errors.',
+      options: Object.keys(IconNames),
+      mapping: Object.keys(IconNames)
+        .map(
+          (key) =>
+            [key, <Icon name={key as IconNames} color='storm' />] as const
+        )
+        .reduce((o, [k, v]) => {
+          return {...o, [k]: v};
+        }, {}),
+      control: {type: 'select'},
+    },
+    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',
+    },
+    withAsterisk: {
+      description: 'Displays an asterisk if the input is required',
+      control: 'boolean',
+    },
+  },
+} as ComponentMeta<typeof TextInput>;
+
+const Template: ComponentStory<typeof TextInput> = (args) => (
+  <TextInput {...args} />
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  label: 'Default Text Input',
+  placeholder: 'Enter text...',
+  size: 'md',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: 'Disabled Input',
+  placeholder: 'You cannot type here',
+  size: 'md',
+  disabled: true,
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  label: 'Email',
+  placeholder: 'Enter your email',
+  error: 'Invalid email address',
+  size: 'md',
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  label: 'Required Input',
+  placeholder: 'This field is required',
+  required: true,
+  withAsterisk: true,
+  leftSection: <Icon name='user' color='storm' />,
+  size: 'md',
+};

jsapp/js/components/common/textInput.tsx

@@ -0,0 +1,61 @@
+import React, {useEffect, useState} from 'react';
+import {
+  TextInput as MantineTextInput,
+  type TextInputProps,
+} from '@mantine/core';
+import Icon from './icon';
+
+interface CustomTextInputProps extends Omit<TextInputProps, 'onChange'> {
+  onChange?: (newValue: string) => void;
+  renderFocused?: boolean;
+}
+
+export const TextInput: React.FC<CustomTextInputProps> = (props) => {
+  const {error, disabled, rightSection, ...rest} = props;
+  const [value, setValue] = useState(props.value || '');
+  const inputReference: React.MutableRefObject<null | HTMLInputElement> =
+    React.createRef();
+
+  useEffect(() => {
+    if (props.renderFocused) {
+      inputReference.current?.focus();
+    }
+  }, []);
+
+  const onValueChange = (newValue: string) => {
+    if (props.readOnly || !props.onChange) {
+      return;
+    }
+    setValue(newValue);
+    props.onChange(newValue);
+  };
+
+  return (
+    <MantineTextInput
+      {...rest}
+      value={value}
+      onInput={(evt: React.ChangeEvent<HTMLInputElement>) => {
+        onValueChange(evt.currentTarget.value);
+      }}
+      onChange={() => false}
+      ref={inputReference}
+      error={error}
+      disabled={disabled}
+      rightSection={
+        error ? <Icon name='alert' color='mid-red' /> : rightSection
+      }
+      styles={(theme) => {
+        return {
+          input: {
+            borderColor: disabled
+              ? theme.colors.gray[2]
+              : error
+                ? theme.colors.red[7]
+                : theme.colors.gray[6],
+            color: disabled ? theme.colors.gray[2] : theme.colors.gray[1],
+          },
+        };
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,18 @@
+.label {
+  color: var(--mantine-color-gray-1);
+  font-size: 12px;
+  line-height: 20px;
+  margin-bottom: 3px;
+}
+
+.input:focus-visible {
+  box-shadow: 0 0 0 2px var(--mantine-color-blue-7);
+}
+
+.input::placeholder {
+  color: var(--mantine-color-gray-3);
+}
+
+.input:disabled {
+  background-color: var(--mantine-color-gray-7);
+}

jsapp/js/theme/kobo/TextInput.ts

@@ -0,0 +1,11 @@
+import {TextInput} from '@mantine/core';
+import classes from './TextInput.module.css';
+
+export const TextInputThemeKobo = TextInput.extend({
+  classNames: classes,
+  defaultProps: {
+    placeholder: 'Enter text',
+    size: 'sm',
+    radius: 'md',
+  },
+});

jsapp/js/theme/kobo/index.ts

@@ -1,6 +1,7 @@
 import {createTheme, rem} from '@mantine/core';
 import {ButtonThemeKobo} from './Button';
 import {TableThemeKobo} from './Table';
+import {TextInputThemeKobo} from './TextInput';
 import {TooltipThemeKobo} from './Tooltip';
 import {MenuThemeKobo} from './menu';
 
@@ -91,5 +92,6 @@ export const themeKobo = createTheme({
     Menu: MenuThemeKobo,
     Tooltip: TooltipThemeKobo,
     Table: TableThemeKobo,
+    TextInput: TextInputThemeKobo,
   },
 });