Refactor: extract reusable modal field component

packages/web/src/pages/upload-page/components/TrackModalArray.tsx

@@ -1,4 +1,4 @@
-import { ReleaseDateModalField } from './ReleaseDateModalField'
+import { ReleaseDateModalField } from '../fields/ReleaseDateModalField'
 
 export const TrackModalArray = () => {
   return (

packages/web/src/pages/upload-page/fields/DatePickerField.module.css

@@ -19,8 +19,21 @@
   color: var(--neutral-light-4);
 }
 
+.input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+}
+
+.displayValue {
+  font-weight: var(--font-medium);
+  font-size: var(--font-l);
+  line-height: 18px;
+}
+
 .datePickerField :global(.SingleDatePicker_picker) {
-  top: -150px !important;
+  top: -110px !important;
   left: 128px !important;
 }
 

packages/web/src/pages/upload-page/fields/DatePickerField.tsx

@@ -1,12 +1,16 @@
 import 'react-dates/initialize'
 import 'react-dates/lib/css/_datepicker.css'
 
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 
+import { Popup } from '@audius/stems'
 import cn from 'classnames'
 import { useField } from 'formik'
 import moment from 'moment'
-import { SingleDatePicker, isInclusivelyBeforeDay } from 'react-dates'
+import {
+  isInclusivelyBeforeDay,
+  DayPickerSingleDateController
+} from 'react-dates'
 
 import { ReactComponent as IconCalendar } from 'assets/img/iconCalendar.svg'
 
@@ -20,31 +24,57 @@ type DatePickerFieldProps = {
 
 export const DatePickerField = (props: DatePickerFieldProps) => {
   const { name, label, style } = props
-  const [field, , helpers] = useField(name)
+  const [field, , helpers] = useField<string | undefined>(name)
   const [isFocused, setIsFocused] = useState(false)
+  const anchorRef = useRef<HTMLDivElement | null>(null)
 
   return (
-    <div className={styles.datePickerField} onClick={() => setIsFocused(true)}>
-      <IconCalendar className={styles.iconCalendar} />
-      <div>
-        <div className={styles.label}>{label}</div>
+    <>
+      <div
+        ref={anchorRef}
+        aria-haspopup
+        role='button'
+        tabIndex={0}
+        className={styles.datePickerField}
+        onClick={() => setIsFocused(true)}
+      >
+        <IconCalendar className={styles.iconCalendar} />
+        <div>
+          <div className={styles.label}>{label}</div>
+          <input
+            className={styles.input}
+            name={name}
+            value={moment(field.value).format('L')}
+            aria-readonly
+            readOnly
+          />
+          <div className={styles.displayValue}>
+            {moment(field.value).calendar().split(' at')[0]}
+          </div>
+        </div>
+      </div>
+      <Popup
+        anchorRef={anchorRef}
+        isVisible={isFocused}
+        onClose={() => setIsFocused(false)}
+      >
         <div className={cn(styles.datePicker, style)}>
-          <SingleDatePicker
-            id={field.name}
-            placeholder={moment().format('MM/DD/YYYY')}
+          <DayPickerSingleDateController
+            // @ts-ignore todo: upgrade moment
+            date={moment(field.value)}
+            onDateChange={(value) => helpers.setValue(value?.format('L'))}
             // @ts-ignore mismatched moment versions; shouldn't be relevant here
             isOutsideRange={(day) => !isInclusivelyBeforeDay(day, moment())}
-            date={field.value}
-            onDateChange={helpers.setValue}
-            focused={isFocused}
+            isFocused={isFocused}
             onFocusChange={({ focused }) => setIsFocused(focused)}
-            numberOfMonths={1}
+            // @ts-ignore mismatched moment versions; shouldn't be relevant here
+            initialVisibleMonth={() => moment()} // PropTypes.func or null,
             hideKeyboardShortcutsPanel
             small
             noBorder
           />
         </div>
-      </div>
-    </div>
+      </Popup>
+    </>
   )
 }

packages/web/src/pages/upload-page/fields/ModalField.module.css

@@ -0,0 +1,37 @@
+/* Form display component */
+.previewTile {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: var(--unit-4) var(--unit-6);
+  gap: var(--unit-4);
+
+  border: 1px solid var(--neutral-light-8);
+  border-radius: 8px;
+}
+
+/* Modal styles */
+.modalHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  justify-content: space-around;
+}
+
+.modalTitle {
+  font-weight: var(--font-heavy);
+  font-size: var(--font-xl);
+  line-height: 25px;
+
+  text-align: center;
+  text-transform: uppercase;
+
+  color: var(--neutral-light-2);
+}
+
+.caret {
+  color: var(--neutral-light-4);
+  height: 14px;
+  width: 14px;
+}

packages/web/src/pages/upload-page/fields/ModalField.tsx

@@ -0,0 +1,65 @@
+import React, { PropsWithChildren, ReactElement, useState } from 'react'
+
+import {
+  Button,
+  ButtonType,
+  IconCaretRight,
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle
+} from '@audius/stems'
+
+import styles from './ModalField.module.css'
+
+const messages = {
+  done: 'Done'
+}
+
+type ModalFieldProps = PropsWithChildren & {
+  title: string
+  icon: ReactElement
+  preview: ReactElement
+}
+
+export const ModalField = (props: ModalFieldProps) => {
+  const { children, title, icon, preview } = props
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const open = () => setIsModalOpen(true)
+  const close = () => setIsModalOpen(false)
+
+  const modal = (
+    <div className={styles.modal}>
+      <Modal onClose={close} isOpen={isModalOpen}>
+        <ModalHeader>
+          <div className={styles.modalHeader}>
+            <ModalTitle
+              className={styles.modalTitle}
+              title={title}
+              icon={icon}
+            />
+          </div>
+        </ModalHeader>
+        <ModalContent>{children}</ModalContent>
+        <ModalFooter>
+          <Button
+            type={ButtonType.PRIMARY}
+            text={messages.done}
+            onClick={close}
+          />
+        </ModalFooter>
+      </Modal>
+    </div>
+  )
+
+  return (
+    <>
+      <div className={styles.previewTile} onClick={open}>
+        {preview}
+        <IconCaretRight className={styles.caret} />
+      </div>
+      {modal}
+    </>
+  )
+}