From 3f490f03cabd648a78b70eda1a3c6a18ea9a80b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= <bglownia@gmail.com>
Date: Wed, 2 Mar 2022 10:32:22 +0100
Subject: [PATCH] Add icon to input

---
 libs/tailwindcss-config/src/theme.js          |  3 +
 .../src/components/button/Button.spec.tsx     |  2 +-
 .../src/components/button/Button.tsx          |  2 -
 .../ui-toolkit/src/components/button/index.ts |  1 +
 .../src/components/icon/icon.spec.tsx         |  2 +-
 libs/ui-toolkit/src/components/icon/icon.tsx  | 12 ++--
 libs/ui-toolkit/src/components/icon/index.ts  |  1 +
 libs/ui-toolkit/src/components/input/index.ts |  1 +
 .../src/components/input/input.spec.tsx       |  2 +-
 .../src/components/input/input.stories.tsx    |  9 ++-
 .../ui-toolkit/src/components/input/input.tsx | 55 +++++++++++++++----
 .../src/components/inputError/index.ts        |  1 +
 .../components/inputError/inputError.spec.tsx |  2 +-
 .../src/components/inputError/inputError.tsx  |  4 +-
 .../ui-toolkit/src/components/select/index.ts |  1 +
 .../src/components/select/select.spec.tsx     |  2 +-
 .../src/components/select/select.tsx          |  2 -
 .../src/components/textArea/index.ts          |  1 +
 .../src/components/textArea/textArea.spec.tsx |  2 +-
 .../src/components/textArea/textArea.tsx      |  2 -
 libs/ui-toolkit/src/index.ts                  | 10 +++-
 21 files changed, 81 insertions(+), 36 deletions(-)
 create mode 100644 libs/ui-toolkit/src/components/button/index.ts
 create mode 100644 libs/ui-toolkit/src/components/icon/index.ts
 create mode 100644 libs/ui-toolkit/src/components/input/index.ts
 create mode 100644 libs/ui-toolkit/src/components/inputError/index.ts
 create mode 100644 libs/ui-toolkit/src/components/select/index.ts
 create mode 100644 libs/ui-toolkit/src/components/textArea/index.ts

diff --git a/libs/tailwindcss-config/src/theme.js b/libs/tailwindcss-config/src/theme.js
index 5c95c29d2..dd55ea4b2 100644
--- a/libs/tailwindcss-config/src/theme.js
+++ b/libs/tailwindcss-config/src/theme.js
@@ -82,8 +82,11 @@ module.exports = {
     4: '0.25rem',
     8: '0.5rem',
     12: '0.75rem',
+    16: '1rem',
     20: '1.25rem',
+    24: '1.5rem',
     28: '1.75rem',
+    32: '2rem',
     44: '2.75rem',
   },
   /*
diff --git a/libs/ui-toolkit/src/components/button/Button.spec.tsx b/libs/ui-toolkit/src/components/button/Button.spec.tsx
index 34802619c..f5030e955 100644
--- a/libs/ui-toolkit/src/components/button/Button.spec.tsx
+++ b/libs/ui-toolkit/src/components/button/Button.spec.tsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import Button from './button';
+import { Button } from './button';
 
 describe('Button', () => {
   it('should render successfully', () => {
diff --git a/libs/ui-toolkit/src/components/button/Button.tsx b/libs/ui-toolkit/src/components/button/Button.tsx
index 9e0380f15..8fc7b626d 100644
--- a/libs/ui-toolkit/src/components/button/Button.tsx
+++ b/libs/ui-toolkit/src/components/button/Button.tsx
@@ -85,5 +85,3 @@ export function Button({
     </ButtonTag>
   );
 }
-
-export default Button;
diff --git a/libs/ui-toolkit/src/components/button/index.ts b/libs/ui-toolkit/src/components/button/index.ts
new file mode 100644
index 000000000..eaf5eea7f
--- /dev/null
+++ b/libs/ui-toolkit/src/components/button/index.ts
@@ -0,0 +1 @@
+export * from './button';
diff --git a/libs/ui-toolkit/src/components/icon/icon.spec.tsx b/libs/ui-toolkit/src/components/icon/icon.spec.tsx
index be593d3d2..28bfc5ffe 100644
--- a/libs/ui-toolkit/src/components/icon/icon.spec.tsx
+++ b/libs/ui-toolkit/src/components/icon/icon.spec.tsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import Icon from './icon';
+import { Icon } from './icon';
 
 describe('Icon', () => {
   it('should render successfully', () => {
diff --git a/libs/ui-toolkit/src/components/icon/icon.tsx b/libs/ui-toolkit/src/components/icon/icon.tsx
index 292102896..596976eed 100644
--- a/libs/ui-toolkit/src/components/icon/icon.tsx
+++ b/libs/ui-toolkit/src/components/icon/icon.tsx
@@ -1,6 +1,8 @@
 import { IconSvgPaths20, IconSvgPaths16, IconName } from '@blueprintjs/icons';
 import classNames from 'classnames';
 
+export type { IconName } from '@blueprintjs/icons';
+
 interface IconProps {
   hasError?: boolean;
   disabled?: boolean;
@@ -9,11 +11,13 @@ interface IconProps {
   size?: 16 | 20 | 24 | 32 | 48 | 64;
 }
 
-export const Icon = ({ size = 20, name, className }: IconProps) => {
+export const Icon = ({ size = 16, name, className }: IconProps) => {
   const effectiveClassName = classNames(
     {
       'w-20': size === 20,
       'h-20': size === 20,
+      'w-16': size === 16,
+      'h-16': size === 16,
     },
     className
   );
@@ -21,12 +25,10 @@ export const Icon = ({ size = 20, name, className }: IconProps) => {
   return (
     <svg className={effectiveClassName} viewBox={viewbox}>
       <g>
-        {(size <= 16 ? IconSvgPaths16 : IconSvgPaths20)[name].map((d) => (
-          <path fill-rule="evenodd" clip-rule="evenodd" d={d} />
+        {(size <= 16 ? IconSvgPaths16 : IconSvgPaths20)[name].map((d, key) => (
+          <path fillRule="evenodd" clipRule="evenodd" d={d} key={key} />
         ))}
       </g>
     </svg>
   );
 };
-
-export default Icon;
diff --git a/libs/ui-toolkit/src/components/icon/index.ts b/libs/ui-toolkit/src/components/icon/index.ts
new file mode 100644
index 000000000..af77d84ef
--- /dev/null
+++ b/libs/ui-toolkit/src/components/icon/index.ts
@@ -0,0 +1 @@
+export * from './icon';
diff --git a/libs/ui-toolkit/src/components/input/index.ts b/libs/ui-toolkit/src/components/input/index.ts
new file mode 100644
index 000000000..e3365cb90
--- /dev/null
+++ b/libs/ui-toolkit/src/components/input/index.ts
@@ -0,0 +1 @@
+export * from './input';
diff --git a/libs/ui-toolkit/src/components/input/input.spec.tsx b/libs/ui-toolkit/src/components/input/input.spec.tsx
index e5e2ff05a..9a37552b5 100644
--- a/libs/ui-toolkit/src/components/input/input.spec.tsx
+++ b/libs/ui-toolkit/src/components/input/input.spec.tsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import Input from './input';
+import { Input } from './input';
 
 describe('Input', () => {
   it('should render successfully', () => {
diff --git a/libs/ui-toolkit/src/components/input/input.stories.tsx b/libs/ui-toolkit/src/components/input/input.stories.tsx
index cef41c3b6..21f8a2199 100644
--- a/libs/ui-toolkit/src/components/input/input.stories.tsx
+++ b/libs/ui-toolkit/src/components/input/input.stories.tsx
@@ -1,6 +1,5 @@
 import { Story, Meta } from '@storybook/react';
 import { Input } from './input';
-
 export default {
   component: Input,
   title: 'Input',
@@ -20,3 +19,11 @@ export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
 };
+
+export const IconPrepend: Story = () => (
+  <Input value="I type words" prependIconName="search" />
+);
+
+export const IconAppend: Story = () => (
+  <Input value="I type words and even more words" appendIconName="search" />
+);
diff --git a/libs/ui-toolkit/src/components/input/input.tsx b/libs/ui-toolkit/src/components/input/input.tsx
index 4bdc586f5..fa9209ab5 100644
--- a/libs/ui-toolkit/src/components/input/input.tsx
+++ b/libs/ui-toolkit/src/components/input/input.tsx
@@ -1,10 +1,13 @@
 import { InputHTMLAttributes, forwardRef } from 'react';
 import classNames from 'classnames';
+import { Icon, IconName } from '../icon';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   hasError?: boolean;
   disabled?: boolean;
   className?: string;
+  prependIconName?: IconName;
+  appendIconName?: IconName;
 }
 export const inputClassNames = ({
   hasError,
@@ -21,8 +24,6 @@ export const inputClassNames = ({
       'items-center',
       'box-border',
       'h-28',
-      'pl-8',
-      'pr-8',
       'border',
       'border-light-gray-50',
       'bg-neutral-753',
@@ -32,6 +33,8 @@ export const inputClassNames = ({
       'focus-visible:outline-0',
     ],
     {
+      'pl-8': !className?.match(/(^| )p(l|x)-\d+( |$)/),
+      'pr-8': !className?.match(/(^| )p(r|x)-\d+( |$)/),
       'border-vega-pink': hasError,
       'text-disabled': disabled,
       'bg-transparent': disabled,
@@ -54,13 +57,41 @@ export const inputStyle = ({
       }
     : style;
 
-export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => (
-  <input
-    {...props}
-    ref={ref}
-    className={classNames(inputClassNames(props), 'h-28')}
-    style={inputStyle(props)}
-  />
-));
-
-export default Input;
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ prependIconName, appendIconName, className, ...props }, ref) => {
+    className = `${className} h-28`;
+    if (prependIconName) {
+      className += ' pl-28';
+    }
+    if (appendIconName) {
+      className += ' pr-28';
+    }
+    const input = (
+      <input
+        {...props}
+        ref={ref}
+        className={classNames(inputClassNames({ className, ...props }))}
+        style={inputStyle(props)}
+      />
+    );
+    const iconName = prependIconName || appendIconName;
+    if (iconName !== undefined) {
+      const iconClassName = classNames(
+        ['fill-light-gray-50', 'absolute', 'z-10'],
+        {
+          'left-8': prependIconName,
+          'right-8': appendIconName,
+        }
+      );
+      const icon = <Icon name={iconName} className={iconClassName} size={16} />;
+      return (
+        <div className="inline-flex items-center relative">
+          {prependIconName && icon}
+          {input}
+          {appendIconName && icon}
+        </div>
+      );
+    }
+    return input;
+  }
+);
diff --git a/libs/ui-toolkit/src/components/inputError/index.ts b/libs/ui-toolkit/src/components/inputError/index.ts
new file mode 100644
index 000000000..1846784f2
--- /dev/null
+++ b/libs/ui-toolkit/src/components/inputError/index.ts
@@ -0,0 +1 @@
+export * from './inputError';
diff --git a/libs/ui-toolkit/src/components/inputError/inputError.spec.tsx b/libs/ui-toolkit/src/components/inputError/inputError.spec.tsx
index 628e06cdf..337e8721a 100644
--- a/libs/ui-toolkit/src/components/inputError/inputError.spec.tsx
+++ b/libs/ui-toolkit/src/components/inputError/inputError.spec.tsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import InputError from './inputError';
+import { InputError } from './inputError';
 
 describe('InputError', () => {
   it('should render successfully', () => {
diff --git a/libs/ui-toolkit/src/components/inputError/inputError.tsx b/libs/ui-toolkit/src/components/inputError/inputError.tsx
index 2cfa7b8e8..14145fa38 100644
--- a/libs/ui-toolkit/src/components/inputError/inputError.tsx
+++ b/libs/ui-toolkit/src/components/inputError/inputError.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import Icon from '../icon/icon';
+import { Icon } from '../icon';
 
 interface InputErrorProps {
   children?: React.ReactNode;
@@ -39,5 +39,3 @@ export const InputError = ({
     </div>
   );
 };
-
-export default InputError;
diff --git a/libs/ui-toolkit/src/components/select/index.ts b/libs/ui-toolkit/src/components/select/index.ts
new file mode 100644
index 000000000..c7396734d
--- /dev/null
+++ b/libs/ui-toolkit/src/components/select/index.ts
@@ -0,0 +1 @@
+export * from './select';
diff --git a/libs/ui-toolkit/src/components/select/select.spec.tsx b/libs/ui-toolkit/src/components/select/select.spec.tsx
index 116892a6d..6f8f3453f 100644
--- a/libs/ui-toolkit/src/components/select/select.spec.tsx
+++ b/libs/ui-toolkit/src/components/select/select.spec.tsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import Select from './select';
+import { Select } from './select';
 
 describe('Select', () => {
   it('should render successfully', () => {
diff --git a/libs/ui-toolkit/src/components/select/select.tsx b/libs/ui-toolkit/src/components/select/select.tsx
index 014e5d942..10c68c683 100644
--- a/libs/ui-toolkit/src/components/select/select.tsx
+++ b/libs/ui-toolkit/src/components/select/select.tsx
@@ -32,5 +32,3 @@ export function Select({
     </select>
   );
 }
-
-export default Select;
diff --git a/libs/ui-toolkit/src/components/textArea/index.ts b/libs/ui-toolkit/src/components/textArea/index.ts
new file mode 100644
index 000000000..273b8cf79
--- /dev/null
+++ b/libs/ui-toolkit/src/components/textArea/index.ts
@@ -0,0 +1 @@
+export * from './textArea';
diff --git a/libs/ui-toolkit/src/components/textArea/textArea.spec.tsx b/libs/ui-toolkit/src/components/textArea/textArea.spec.tsx
index 37bbe8353..dd5be3958 100644
--- a/libs/ui-toolkit/src/components/textArea/textArea.spec.tsx
+++ b/libs/ui-toolkit/src/components/textArea/textArea.spec.tsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import TextArea from './textArea';
+import { TextArea } from './textArea';
 
 describe('TextArea', () => {
   it('should render successfully', () => {
diff --git a/libs/ui-toolkit/src/components/textArea/textArea.tsx b/libs/ui-toolkit/src/components/textArea/textArea.tsx
index 7b7b1f8b7..3f87d687c 100644
--- a/libs/ui-toolkit/src/components/textArea/textArea.tsx
+++ b/libs/ui-toolkit/src/components/textArea/textArea.tsx
@@ -28,5 +28,3 @@ export function TextArea({
     </textarea>
   );
 }
-
-export default TextArea;
diff --git a/libs/ui-toolkit/src/index.ts b/libs/ui-toolkit/src/index.ts
index 6eedd84de..1745a3977 100644
--- a/libs/ui-toolkit/src/index.ts
+++ b/libs/ui-toolkit/src/index.ts
@@ -1,7 +1,11 @@
 import * as EthereumUtils from './utils/web3';
 
+export { Button } from './components/button';
 export { Callout } from './components/callout';
-export { Button } from './components/button/button';
-export { Input } from './components/input/input';
-export { EtherscanLink } from './components/etherscan-link';
 export { EthereumUtils };
+export { EtherscanLink } from './components/etherscan-link';
+export { Icon } from './components/icon';
+export { Input } from './components/input';
+export { InputError } from './components/inputError';
+export { Select } from './components/select';
+export { TextArea } from './components/textArea';