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

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

@@ -0,0 +1,126 @@
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
+
+import { InputGroup } from '.';
+
+export default {
+  component: InputGroup,
+  title: 'Components/Form/InputGroup',
+} as Meta;
+
+export { BasicExample, Addons, Sizing };
+
+function BasicExample() {
+  const [value1, setValue1] = useState('');
+  const [valueNumber, setValueNumber] = useState(0);
+
+  return (
+    <div className="space-y-8">
+      <InputGroup>
+        <InputGroup.Addon>@</InputGroup.Addon>
+        <InputGroup.Input
+          value={value1}
+          onChange={(e) => setValue1(e.target.value)}
+          placeholder="Username"
+          aria-describedby="basic-addon1"
+        />
+      </InputGroup>
+
+      <InputGroup>
+        <InputGroup.Input
+          value={value1}
+          onChange={(e) => setValue1(e.target.value)}
+          placeholder="Recipient's username"
+          aria-describedby="basic-addon2"
+        />
+        <InputGroup.Addon>@example.com</InputGroup.Addon>
+      </InputGroup>
+
+      <InputGroup>
+        <InputGroup.Addon>$</InputGroup.Addon>
+        <InputGroup.Input
+          type="number"
+          value={valueNumber}
+          onChange={(e) => setValueNumber(parseInt(e.target.value, 10))}
+          aria-label="Amount (to the nearest dollar)"
+        />
+        <InputGroup.Addon>.00</InputGroup.Addon>
+      </InputGroup>
+
+      <label htmlFor="basic-url">Your vanity URL</label>
+      <InputGroup>
+        <InputGroup.Addon>https://example.com/users/</InputGroup.Addon>
+        <InputGroup.Input
+          value={value1}
+          onChange={(e) => setValue1(e.target.value)}
+          id="basic-url"
+          aria-describedby="basic-addon3"
+        />
+      </InputGroup>
+    </div>
+  );
+}
+
+function Addons() {
+  const [value1, setValue1] = useState('');
+  const [value2, setValue2] = useState('');
+  return (
+    <div className="row">
+      <div className="col-lg-6">
+        <InputGroup>
+          <InputGroup.ButtonWrapper>
+            <button className="btn btn-default" type="button">
+              Go!
+            </button>
+          </InputGroup.ButtonWrapper>
+          <InputGroup.Input
+            value={value1}
+            onChange={(e) => setValue1(e.target.value)}
+          />
+        </InputGroup>
+      </div>
+      <div className="col-lg-6">
+        <InputGroup>
+          <InputGroup.Input
+            value={value2}
+            onChange={(e) => setValue2(e.target.value)}
+          />
+          <InputGroup.Addon>
+            <input type="checkbox" />
+          </InputGroup.Addon>
+        </InputGroup>
+      </div>
+    </div>
+  );
+}
+
+function Sizing() {
+  const [value, setValue] = useState('');
+  return (
+    <div className="space-y-8">
+      <InputGroup size="small">
+        <InputGroup.Addon>Small</InputGroup.Addon>
+        <InputGroup.Input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </InputGroup>
+
+      <InputGroup>
+        <InputGroup.Addon>Default</InputGroup.Addon>
+        <InputGroup.Input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </InputGroup>
+
+      <InputGroup size="large">
+        <InputGroup.Addon>Large</InputGroup.Addon>
+        <InputGroup.Input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </InputGroup>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+import clsx from 'clsx';
+import { createContext, PropsWithChildren, useContext } from 'react';
+
+const Context = createContext<null | boolean>(null);
+
+type Size = 'small' | 'large';
+
+export function useInputGroupContext() {
+  const context = useContext(Context);
+
+  if (context == null) {
+    throw new Error('Should be inside a InputGroup component');
+  }
+}
+
+interface Props {
+  size?: Size;
+}
+
+export function InputGroup({ children, size }: PropsWithChildren<Props>) {
+  return (
+    <Context.Provider value>
+      <div className={clsx('input-group', sizeClass(size))}>{children}</div>
+    </Context.Provider>
+  );
+}
+
+function sizeClass(size?: Size) {
+  switch (size) {
+    case 'large':
+      return 'input-group-lg';
+    case 'small':
+      return 'input-group-sm';
+    default:
+      return '';
+  }
+}

app/react/components/form-components/InputGroup/InputGroupAddon.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+
+import { useInputGroupContext } from './InputGroup';
+
+export function InputGroupAddon({ children }: PropsWithChildren<unknown>) {
+  useInputGroupContext();
+
+  return <span className="input-group-addon">{children}</span>;
+}

app/react/components/form-components/InputGroup/InputGroupButtonWrapper.tsx

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+
+import { useInputGroupContext } from './InputGroup';
+
+export function InputGroupButtonWrapper({
+  children,
+}: PropsWithChildren<unknown>) {
+  useInputGroupContext();
+
+  return <span className="input-group-btn">{children}</span>;
+}

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

@@ -0,0 +1,20 @@
+import { Input } from '../Input';
+
+import { InputGroup as MainComponent } from './InputGroup';
+import { InputGroupAddon } from './InputGroupAddon';
+import { InputGroupButtonWrapper } from './InputGroupButtonWrapper';
+
+interface InputGroupSubComponents {
+  Addon: typeof InputGroupAddon;
+  ButtonWrapper: typeof InputGroupButtonWrapper;
+  Input: typeof Input;
+}
+
+const InputGroup: typeof MainComponent & InputGroupSubComponents =
+  MainComponent as typeof MainComponent & InputGroupSubComponents;
+
+InputGroup.Addon = InputGroupAddon;
+InputGroup.ButtonWrapper = InputGroupButtonWrapper;
+InputGroup.Input = Input;
+
+export { InputGroup };