Adding TextFieldBase component

ui/components/component-library/component-library-components.scss

@@ -5,3 +5,4 @@
 @import 'button-base/button-base';
 @import 'icon/icon';
 @import 'text/text';
+@import 'text-field-base/text-field-base';

ui/components/component-library/text-field-base/README.mdx

@@ -0,0 +1,298 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { TextFieldBase } from './text-field-base';
+
+### This is a base component. It should not be used in your feature code directly but as a "base" for other UI components
+
+# TextFieldBase
+
+The `TextFieldBase` is the base component for all text fields. It should not be used directly. It functions as both a uncontrolled and controlled input.
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `TextFieldBase` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
+
+<ArgsTable of={TextFieldBase} />
+
+### Size
+
+Use the `size` prop to set the height of the `TextFieldBase`.
+
+Possible sizes include:
+
+- `sm` 32px
+- `md` 40px
+- `lg` 48px
+
+Defaults to `md`
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--size" />
+</Canvas>
+
+```jsx
+import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { SIZES } from '../../../helpers/constants/design-system';
+
+<TextFieldBase size={SIZES.SM} />
+<TextFieldBase size={SIZES.MD} />
+<TextFieldBase size={SIZES.LG} />
+```
+
+### Type
+
+Use the `type` prop to change the type of input.
+
+Possible types include:
+
+- `text`
+- `number`
+- `password`
+
+Defaults to `text`.
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--type" />
+</Canvas>
+
+```jsx
+import { TextFieldBase } from '../../ui/component-library/text-field-base';
+
+<TextFieldBase type="text" /> // (Default)
+<TextFieldBase type="number" />
+<TextFieldBase type="password" />
+```
+
+### Truncate
+
+Use the `truncate` prop to truncate the text of the the `TextFieldBase`
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--truncate" />
+</Canvas>
+
+```jsx
+import { TextFieldBase } from '../../ui/component-library/text-field-base';
+
+<TextFieldBase truncate />;
+```
+
+### Left Accessory Right Accessory
+
+Use the `leftAccessory` and `rightAccessory` props to add components such as icons or buttons to either side of the `TextFieldBase`.
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--left-accessory-right-accessory" />
+</Canvas>
+
+```jsx
+import { COLORS, SIZES } from '../../../helpers/constants/design-system';
+import { Icon, ICON_NAMES } from '../../ui/component-library/icons';
+
+import { TextFieldBase } from '../../ui/component-library/text-field-base';
+
+<TextFieldBase
+  placeholder="Search"
+  leftAccessory={
+    <Icon
+      color={COLORS.ICON_ALTERNATIVE}
+      name={ICON_NAMES.SEARCH_FILLED}
+    />
+  }
+/>
+
+<TextFieldBase
+  placeholder="MetaMask"
+  rightAccessory={
+    // TODO: replace with ButtonIcon
+    <button>
+      <Icon name={ICON_NAMES.CLOSE_OUTLINE} size={SIZES.SM} />
+    </button>
+  }
+/>
+
+<TextFieldBase
+  truncate
+  leftAccessory={<AvatarToken tokenName="ast" size={SIZES.SM} />}
+  rightAccessory={
+    // TODO: replace with ButtonIcon
+    <button>
+      <Icon name={ICON_NAMES.CLOSE_OUTLINE} size={SIZES.SM} />
+    </button>
+  }
+/>
+
+<TextFieldBase
+  placeholder="Enter amount"
+  type="number"
+  leftAccessory={
+    <AvatarToken
+      tokenName="ast"
+      tokenImageUrl="./AST.png"
+      size={SIZES.SM}
+    />
+  }
+  rightAccessory={
+    // TODO: replace with ButtonLink
+    <button>Max</button>
+  }
+/>
+```
+
+### Input Ref
+
+Use the `inputRef` prop to access the ref of the `<input />` html element of `TextFieldBase`. This is useful for focusing the input from a button or other component.
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--input-ref" />
+</Canvas>
+
+```jsx
+import { TextFieldBase } from '../../ui/component-library/text-field-base';
+
+const inputRef = useRef(null);
+const [value, setValue] = useState('');
+const handleOnClick = () => {
+  inputRef.current.focus();
+};
+const handleOnChange = (e) => {
+  setValue(e.target.value);
+};
+
+<TextFieldBase
+  inputRef={inputRef}
+  value={value}
+  onChange={handleOnChange}
+/>
+// TODO: replace with Button component
+<Box
+  as="button"
+  backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+  color={COLORS.TEXT_DEFAULT}
+  borderColor={COLORS.BORDER_DEFAULT}
+  borderRadius={SIZES.XL}
+  marginLeft={1}
+  paddingLeft={2}
+  paddingRight={2}
+  onClick={handleOnClick}
+>
+  Edit
+</Box>
+```
+
+### Auto Complete
+
+Use the `autoComplete` prop to set the autocomplete html attribute. It allows the browser to predict the value based on earlier typed values.
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--auto-complete" />
+</Canvas>
+
+```jsx
+import { TextFieldBase } from '../../ui/component-library/text-field-base';
+
+<TextFieldBase type="password" autoComplete />;
+```
+
+### Auto Focus
+
+Use the `autoFocus` prop to focus the `TextFieldBase` during the first mount
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--auto-focus" />
+</Canvas>
+
+```jsx
+import { TextFieldBase } from '../../ui/component-library/text-field-base';
+
+<TextFieldBase autoFocus />;
+```
+
+### Default Value
+
+Use the `defaultValue` prop to set the default value of the `TextFieldBase`
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--default-value" />
+</Canvas>
+
+```jsx
+import { TextFieldBase } from '../../ui/component-library/text-field-base';
+
+<TextFieldBase defaultValue="default value" />;
+```
+
+### Disabled
+
+Use the `disabled` prop to set the disabled state of the `TextFieldBase`
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--disabled" />
+</Canvas>
+
+```jsx
+import { TextFieldBase } from '../../ui/component-library/text-field-base';
+
+<TextFieldBase disabled />;
+```
+
+### Error
+
+Use the `error` prop to set the error state of the `TextFieldBase`
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--error-story" />
+</Canvas>
+
+```jsx
+import { TextFieldBase } from '../../ui/component-library/text-field-base';
+
+<TextFieldBase error />;
+```
+
+### Max Length
+
+Use the `maxLength` prop to set the maximum allowed input characters for the `TextFieldBase`
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--max-length" />
+</Canvas>
+
+```jsx
+import { TextFieldBase } from '../../ui/component-library/text-field-base';
+
+<TextFieldBase maxLength={10} />;
+```
+
+### Read Only
+
+Use the `readOnly` prop to set the `TextFieldBase` to read only
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--read-only" />
+</Canvas>
+
+```jsx
+import { TextFieldBase } from '../../ui/component-library/text-field-base';
+
+<TextFieldBase readOnly />;
+```
+
+### Required
+
+Use the `required` prop to set the `TextFieldBase` to required. Currently there is no visual difference to the `TextFieldBase` when required.
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--required" />
+</Canvas>
+
+```jsx
+import { TextFieldBase } from '../../ui/component-library/text-field-base';
+
+// Currently no visual difference
+<TextFieldBase required />;
+```

ui/components/component-library/text-field-base/index.js

@@ -0,0 +1,5 @@
+export { TextFieldBase } from './text-field-base';
+export {
+  TEXT_FIELD_BASE_SIZES,
+  TEXT_FIELD_BASE_TYPES,
+} from './text-field-base.constants';

ui/components/component-library/text-field-base/text-field-base.constants.js

@@ -0,0 +1,12 @@
+import { SIZES } from '../../../helpers/constants/design-system';
+
+export const TEXT_FIELD_BASE_SIZES = {
+  SM: SIZES.SM,
+  MD: SIZES.MD,
+  LG: SIZES.LG,
+};
+export const TEXT_FIELD_BASE_TYPES = {
+  TEXT: 'text',
+  NUMBER: 'number',
+  PASSWORD: 'password',
+};