Rebuild TextField and CalendarField

frontend/src/components/TextField/TextField.jsx

@@ -1,24 +0,0 @@
-import { forwardRef } from 'react'
-
-import {
-  Wrapper,
-  StyledLabel,
-  StyledSubLabel,
-  StyledInput,
-} from './TextField.styles'
-
-const TextField = forwardRef(({
-  label,
-  subLabel,
-  id,
-  inline = false,
-  ...props
-}, ref) => (
-  <Wrapper $inline={inline}>
-    {label && <StyledLabel htmlFor={id} $inline={inline}>{label}</StyledLabel>}
-    {subLabel && <StyledSubLabel htmlFor={id}>{subLabel}</StyledSubLabel>}
-    <StyledInput id={id} ref={ref} {...props} />
-  </Wrapper>
-))
-
-export default TextField

frontend/src/components/TextField/TextField.module.scss

@@ -0,0 +1,19 @@
+.input {
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  background: var(--surface);
+  color: inherit;
+  padding: 10px 14px;
+  border: 1px solid var(--primary);
+  box-shadow: inset 0 0 0 0 var(--primary);
+  border-radius: 3px;
+  font-size: 18px;
+  outline: none;
+  transition: border-color .15s, box-shadow .15s;
+
+  &:focus {
+    border: 1px solid var(--secondary);
+    box-shadow: inset 0 -3px 0 0 var(--secondary);
+  }
+}

frontend/src/components/TextField/TextField.styles.js

@@ -1,47 +0,0 @@
-import { styled } from 'goober'
-import { forwardRef } from 'react'
-
-export const Wrapper = styled('div')`
-  margin: 30px 0;
-
-  ${props => props.$inline && `
-    margin: 0;
-  `}
-`
-
-export const StyledLabel = styled('label')`
-  display: block;
-  padding-bottom: 4px;
-  font-size: 18px;
-
-  ${props => props.$inline && `
-    font-size: 16px;
-  `}
-`
-
-export const StyledSubLabel = styled('label')`
-  display: block;
-  padding-bottom: 6px;
-  font-size: 13px;
-  opacity: .6;
-`
-
-export const StyledInput = styled('input', forwardRef)`
-  width: 100%;
-  box-sizing: border-box;
-  font: inherit;
-  background: var(--surface);
-  color: inherit;
-  padding: 10px 14px;
-  border: 1px solid var(--primary);
-  box-shadow: inset 0 0 0 0 var(--primary);
-  border-radius: 3px;
-  font-size: 18px;
-  outline: none;
-  transition: border-color .15s, box-shadow .15s;
-
-  &:focus {
-    border: 1px solid var(--secondary);
-    box-shadow: inset 0 -3px 0 0 var(--secondary);
-  }
-`

frontend/src/components/TextField/TextField.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react'
+
+import { Description, Label, Wrapper } from '/src/components/Field/Field'
+
+import styles from './TextField.module.scss'
+
+interface TextFieldProps extends React.ComponentProps<'input'> {
+  label?: React.ReactNode
+  description?: React.ReactNode
+  isInline?: boolean
+}
+
+const TextField = forwardRef<HTMLInputElement, TextFieldProps>(({
+  label,
+  description,
+  isInline,
+  ...props
+}, ref) => (
+  <Wrapper style={isInline ? { margin: 0 } : undefined}>
+    {label && <Label
+      htmlFor={props.name}
+      style={isInline ? { fontSize: '16px' } : undefined}
+    >{label}</Label>}
+
+    {description && <Description htmlFor={props.name}>{description}</Description>}
+
+    <input className={styles.input} id={props.name} ref={ref} {...props} />
+  </Wrapper>
+))
+
+export default TextField