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

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

@@ -0,0 +1,32 @@
+import { Meta, Story } from '@storybook/react';
+import { useState } from 'react';
+
+import { Input } from './Input';
+
+export default {
+  title: 'Components/Form/Input',
+  args: {
+    disabled: false,
+  },
+} as Meta;
+
+interface Args {
+  disabled?: boolean;
+}
+
+export function TextField({ disabled }: Args) {
+  const [value, setValue] = useState('');
+  return (
+    <Input
+      type="text"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      disabled={disabled}
+    />
+  );
+}
+
+export const DisabledTextField: Story<Args> = TextField.bind({});
+DisabledTextField.args = {
+  disabled: true,
+};

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

@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+import { InputHTMLAttributes } from 'react';
+
+export function Input({
+  className,
+  ...props
+}: InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      className={clsx('form-control', className)}
+    />
+  );
+}

app/react/components/form-components/Input/Select.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, Story } from '@storybook/react';
+import { useState } from 'react';
+
+import { Select } from './Select';
+
+export default {
+  title: 'Components/Form/Select',
+  args: {
+    disabled: false,
+  },
+} as Meta;
+
+interface Args {
+  disabled?: boolean;
+}
+
+export function Example({ disabled }: Args) {
+  const [value, setValue] = useState(0);
+  const options = [
+    { value: 1, label: 'one' },
+    { value: 2, label: 'two' },
+  ];
+  return (
+    <Select
+      value={value}
+      onChange={(e) => setValue(parseInt(e.target.value, 10))}
+      disabled={disabled}
+      options={options}
+    />
+  );
+}
+
+export const DisabledSelect: Story<Args> = Example.bind({});
+DisabledSelect.args = {
+  disabled: true,
+};

app/react/components/form-components/Input/Select.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import { SelectHTMLAttributes } from 'react';
+
+export interface Option<T extends string | number> {
+  value: T;
+  label: string;
+}
+
+interface Props<T extends string | number> {
+  options: Option<T>[];
+}
+
+export function Select<T extends number | string>({
+  options,
+  className,
+  ...props
+}: Props<T> & SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      className={clsx('form-control', className)}
+    >
+      {options.map((item) => (
+        <option value={item.value} key={item.value}>
+          {item.label}
+        </option>
+      ))}
+    </select>
+  );
+}

app/react/components/form-components/Input/Textarea.tsx

@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+import { TextareaHTMLAttributes } from 'react';
+
+export function TextArea({
+  className,
+  ...props
+}: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return (
+    <textarea
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      className={clsx('form-control', className)}
+    />
+  );
+}

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

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export { Select } from './Select';