refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/form-components/FormControl/FormControl.stories.tsx

@@ -0,0 +1,61 @@
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
+
+import { Input, Select } from '../Input';
+
+import { FormControl } from './FormControl';
+
+export default {
+  title: 'Components/Form/Control',
+} as Meta;
+
+interface TextFieldProps {
+  label: string;
+  tooltip?: string;
+}
+
+export { TextField, SelectField };
+
+function TextField({ label, tooltip = '' }: TextFieldProps) {
+  const [value, setValue] = useState('');
+  const inputId = 'input';
+  return (
+    <FormControl inputId={inputId} label={label} tooltip={tooltip}>
+      <Input
+        id={inputId}
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </FormControl>
+  );
+}
+
+TextField.args = {
+  label: 'label',
+  tooltip: '',
+};
+
+function SelectField({ label, tooltip = '' }: TextFieldProps) {
+  const options = [
+    { value: 1, label: 'one' },
+    { value: 2, label: 'two' },
+  ];
+  const [value, setValue] = useState(0);
+  const inputId = 'input';
+  return (
+    <FormControl inputId={inputId} label={label} tooltip={tooltip}>
+      <Select
+        className="form-control"
+        value={value}
+        onChange={(e) => setValue(parseInt(e.target.value, 10))}
+        options={options}
+      />
+    </FormControl>
+  );
+}
+
+SelectField.args = {
+  label: 'select',
+  tooltip: '',
+};

app/react/components/form-components/FormControl/FormControl.test.tsx

@@ -0,0 +1,30 @@
+import { render } from '@testing-library/react';
+
+import { FormControl, Props } from './FormControl';
+
+function renderDefault({
+  inputId = 'id',
+  label,
+  tooltip = '',
+
+  errors,
+}: Partial<Props>) {
+  return render(
+    <FormControl
+      inputId={inputId}
+      label={label}
+      tooltip={tooltip}
+      errors={errors}
+    >
+      <input />
+    </FormControl>
+  );
+}
+
+test('should display a Input component', async () => {
+  const label = 'test label';
+  const { findByText } = renderDefault({ label });
+
+  const inputElem = await findByText(label);
+  expect(inputElem).toBeTruthy();
+});

app/react/components/form-components/FormControl/FormControl.tsx

@@ -0,0 +1,78 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import clsx from 'clsx';
+
+import { Tooltip } from '@@/Tip/Tooltip';
+
+import { FormError } from '../FormError';
+
+import styles from './FormControl.module.css';
+
+type Size = 'small' | 'medium' | 'large';
+
+export interface Props {
+  inputId?: string;
+  label: string | ReactNode;
+  size?: Size;
+  tooltip?: string;
+  children: ReactNode;
+  errors?: string | ReactNode;
+  required?: boolean;
+}
+
+export function FormControl({
+  inputId,
+  label,
+  size = 'small',
+  tooltip = '',
+  children,
+  errors,
+  required,
+}: PropsWithChildren<Props>) {
+  return (
+    <>
+      <div className={clsx('form-group', styles.container)}>
+        <label
+          htmlFor={inputId}
+          className={clsx(sizeClassLabel(size), 'control-label', 'text-left')}
+        >
+          {label}
+
+          {required && <span className="text-danger">*</span>}
+
+          {tooltip && <Tooltip message={tooltip} />}
+        </label>
+
+        <div className={sizeClassChildren(size)}>{children}</div>
+      </div>
+      {errors && (
+        <div className="form-group">
+          <div className="col-md-12">
+            <FormError>{errors}</FormError>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+function sizeClassLabel(size?: Size) {
+  switch (size) {
+    case 'large':
+      return 'col-sm-5 col-lg-4';
+    case 'medium':
+      return 'col-sm-4 col-lg-3';
+    default:
+      return 'col-sm-3 col-lg-2';
+  }
+}
+
+function sizeClassChildren(size?: Size) {
+  switch (size) {
+    case 'large':
+      return 'col-sm-7 col-lg-8';
+    case 'medium':
+      return 'col-sm-8 col-lg-9';
+    default:
+      return 'col-sm-9 col-lg-10';
+  }
+}

app/react/components/form-components/FormControl/index.ts

@@ -0,0 +1 @@
+export { FormControl } from './FormControl';