remove TextField component

src/shared/__tests__/TextField.test.tsx

@@ -1,8 +0,0 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import TextField from '@/shared/components/TextField'
-describe('TextField component', () => {
-  it('Should render Text Field correctly', () => {
-    expect(mount(<TextField label="Test TextField" />)).toBeDefined()
-  })
-})

src/shared/components/TextField/TextField.style.ts

@@ -1,86 +0,0 @@
-import { makeStyles, StyleFn } from '../../utils'
-import { colors, spacing, typography } from './../../theme'
-
-export type TextFieldStyleProps = {
-  disabled?: boolean
-  focus?: boolean
-  error?: boolean
-  isActive?: boolean
-}
-
-const FIELD_WIDTH = '250px'
-const wrapper: StyleFn = () => ({
-  display: 'block',
-  maxWidth: FIELD_WIDTH,
-  fontFamily: typography.fonts.base,
-})
-
-const container: StyleFn = (_, { disabled }) => ({
-  position: 'relative',
-  width: '100%',
-  height: '48px',
-  display: 'inline-flex',
-  cursor: disabled ? 'not-allowed' : 'default',
-})
-
-const border: StyleFn = () => ({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  borderWidth: '1px',
-  borderStyle: 'solid',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'left',
-})
-const borderColor: StyleFn = (styles, { disabled, error, isActive, focus }) => {
-  const borderColor = disabled
-    ? colors.gray[200]
-    : error
-    ? colors.error
-    : focus
-    ? colors.blue[500]
-    : isActive
-    ? colors.gray[200]
-    : colors.gray[400]
-
-  return {
-    ...styles,
-    borderColor,
-  }
-}
-const label: StyleFn = (_, { error }) => ({
-  color: error ? colors.error : colors.gray[400],
-  padding: `0 ${spacing.s}`,
-  backgroundColor: colors.black,
-  fontSize: typography.sizes.body2,
-  transition: `all 0.1s linear`,
-})
-const input: StyleFn = () => ({
-  display: 'none',
-  width: '100%',
-  margin: `0 ${spacing.s}`,
-  background: 'none',
-  border: 'none',
-  outline: 'none',
-  color: colors.white,
-  fontSize: typography.sizes.body2,
-  padding: `5px 0`,
-})
-const helper: StyleFn = (_, { error }) => ({
-  color: error ? colors.error : colors.gray[400],
-})
-
-export const useCSS = ({ disabled = false, focus = false, error = false, isActive = false }: TextFieldStyleProps) => {
-  const props = { disabled, focus, error, isActive }
-  return {
-    wrapper: makeStyles([wrapper])(props),
-    container: makeStyles([container])(props),
-    border: makeStyles([border, borderColor])(props),
-    label: makeStyles([label])(props),
-    input: makeStyles([input])(props),
-    helper: makeStyles([helper])(props),
-  }
-}

src/shared/components/TextField/TextField.tsx

@@ -1,76 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { TextFieldStyleProps, useCSS } from './TextField.style'
-import { spacing } from './../../theme'
-
-type TextFieldProps = {
-  label: string
-  helper?: string
-  value?: string
-  onChange?: (e: React.ChangeEvent) => void
-} & TextFieldStyleProps
-
-export default function TextField({ label, helper = '', value = '', disabled = false, ...styleProps }: TextFieldProps) {
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [isActive, setIsActive] = useState(!!value)
-  const [inputTextValue, setInputTextValue] = useState(value)
-  const styles = useCSS({ isActive, disabled, ...styleProps })
-
-  useEffect(() => {
-    if (inputRef.current != null) {
-      if (isActive) {
-        inputRef.current.focus()
-      } else {
-        inputRef.current.blur()
-      }
-    }
-  }, [isActive, inputRef])
-
-  function onTextFieldClick() {
-    if (!disabled) setIsActive(true)
-  }
-
-  function onInputTextBlur() {
-    setIsActive(false)
-  }
-
-  // FIXME: add correct typing to event, see here: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
-  function onInputTextChange(event: any): void {
-    if (!disabled) setInputTextValue(event.currentTarget.value)
-  }
-
-  return (
-    <div css={styles.wrapper}>
-      <div css={styles.container} onClick={onTextFieldClick}>
-        <div css={styles.border}>
-          <div
-            css={styles.label}
-            style={
-              !inputTextValue && !isActive
-                ? {}
-                : {
-                    position: 'absolute',
-                    top: '-8px',
-                    left: '5px',
-                    fontSize: '0.7rem',
-                    padding: `0 ${spacing.xs}`,
-                  }
-            }
-          >
-            {label}
-          </div>
-          <input
-            css={styles.input}
-            style={{ display: !!inputTextValue || isActive ? 'block' : 'none' }}
-            ref={inputRef}
-            type="text"
-            value={inputTextValue}
-            onChange={onInputTextChange}
-            onBlur={onInputTextBlur}
-            disabled={disabled}
-          />
-        </div>
-      </div>
-      {!!helper && <p css={styles.helper}>{helper}</p>}
-    </div>
-  )
-}

src/shared/components/TextField/index.ts

@@ -1,2 +0,0 @@
-import TextField from './TextField'
-export default TextField

src/shared/components/index.ts

@@ -10,7 +10,6 @@ export { default as Checkbox } from './Checkbox'
 export { default as Tabs } from './Tabs'
 export { default as Tab } from './Tabs/Tab'
 export { default as Tag } from './Tag'
-export { default as TextField } from './TextField'
 export { default as Typography } from './Typography'
 export { VideoPreview, VideoPreviewBase, MAX_VIDEO_PREVIEW_WIDTH } from './VideoPreview'
 export { default as VideoPlayer } from './VideoPlayer'

src/shared/stories/06-TextField.stories.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import { TextField } from '../components'
-
-export default {
-  title: 'TextField',
-  component: TextField,
-}
-
-export const Primary = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <TextField label="Label" />
-  </div>
-)
-
-export const Focus = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <TextField label="Label" focus={true} />
-  </div>
-)
-
-export const Error = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <TextField label="Label" error={true} />
-  </div>
-)
-
-export const Disabled = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <TextField label="Label" disabled={true} />
-  </div>
-)
-
-export const DisabledWithValue = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <TextField label="Label" value="Disabled" disabled={true} />
-  </div>
-)
-
-export const PrimaryWithHelperText = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <TextField label="Label" helper="Helper text" />
-  </div>
-)
-
-export const FocusWithHelperText = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <TextField label="Label" focus={true} helper="Helper text" />
-  </div>
-)
-
-export const ErrorWithHelperText = () => (
-  <div style={{ backgroundColor: 'black', padding: '50px 20px' }}>
-    <TextField label="Label" error={true} helper="Helper text" />
-  </div>
-)