[C-2907] Add contextual-menu, refactor release-date-field (#3836)

apps/audius-client/packages/mobile/src/components/core/ContextualSubmenu.tsx → apps/audius-client/packages/mobile/src/components/core/ContextualMenu.tsx

@@ -14,10 +14,10 @@ import { useThemeColors } from 'app/utils/theme'
 import { InputErrorMessage } from './InputErrorMessage'
 import { Pill } from './Pill'
 
-export type ContextualSubmenuProps = {
+export type ContextualMenuProps = {
   label: string
   value: any
-  submenuScreenName: string
+  menuScreenName: string
   styles?: StylesProp<{
     root: ViewStyle
     divider: ViewStyle
@@ -57,11 +57,11 @@ const useStyles = makeStyles(({ spacing }) => ({
   }
 }))
 
-export const ContextualSubmenu = (props: ContextualSubmenuProps) => {
+export const ContextualMenu = (props: ContextualMenuProps) => {
   const {
     label,
     value,
-    submenuScreenName,
+    menuScreenName,
     styles: stylesProp,
     errorMessage,
     error,
@@ -74,8 +74,8 @@ export const ContextualSubmenu = (props: ContextualSubmenuProps) => {
   const navigation = useNavigation()
 
   const handlePress = useCallback(() => {
-    navigation.push(submenuScreenName)
-  }, [navigation, submenuScreenName])
+    navigation.push(menuScreenName)
+  }, [navigation, menuScreenName])
 
   const defaultRenderValue = (value: string | string[]) => {
     const values = typeof value === 'string' ? [value] : value

apps/audius-client/packages/mobile/src/components/core/index.ts

@@ -26,7 +26,7 @@ export * from './FlatList'
 export * from './Divider'
 export * from './AudioText'
 export * from './Tag'
-export * from './ContextualSubmenu'
+export * from './ContextualMenu'
 export * from './RadioButton'
 export * from './LinearProgress'
 export * from './ErrorText'

apps/audius-client/packages/mobile/src/screens/edit-track-screen/fields/AdvancedOptionsField.tsx

@@ -1,19 +1,19 @@
-import type { ContextualSubmenuProps } from 'app/components/core'
-import { ContextualSubmenu } from 'app/components/core'
+import type { ContextualMenuProps } from 'app/components/core'
+import { ContextualMenu } from 'app/components/core'
 
 const messages = {
   advanced: 'Advanced Options'
 }
 
-type AdvancedOptionsFieldProps = Partial<ContextualSubmenuProps>
+type AdvancedOptionsFieldProps = Partial<ContextualMenuProps>
 
 export const AdvancedOptionsField = (props: AdvancedOptionsFieldProps) => {
   return (
-    <ContextualSubmenu
+    <ContextualMenu
       renderValue={() => null}
       label={messages.advanced}
       value={null}
-      submenuScreenName='AdvancedOptions'
+      menuScreenName='AdvancedOptions'
       {...props}
     />
   )

apps/audius-client/packages/mobile/src/screens/edit-track-screen/fields/ContextualSubmenuField.tsx → apps/audius-client/packages/mobile/src/screens/edit-track-screen/fields/ContextualMenuField.tsx

@@ -1,22 +1,22 @@
 import { useField } from 'formik'
 
-import type { ContextualSubmenuProps } from 'app/components/core'
-import { ContextualSubmenu } from 'app/components/core'
+import type { ContextualMenuProps } from 'app/components/core'
+import { ContextualMenu } from 'app/components/core'
 
 import type { FieldProps } from './types'
 
-type ContextualSubmenuFieldProps = FieldProps &
-  Omit<ContextualSubmenuProps, 'value' | 'onChange'>
+type ContextualMenuFieldProps = FieldProps &
+  Omit<ContextualMenuProps, 'value' | 'onChange'>
 
-export const ContextualSubmenuField = (props: ContextualSubmenuFieldProps) => {
+export const ContextualMenuField = (props: ContextualMenuFieldProps) => {
   const { name, label: labelProp, ...other } = props
   const { required } = other
   const [{ value }, { error, touched }] = useField(name)
 
   const label = required ? `${labelProp} *` : labelProp
 
   return (
-    <ContextualSubmenu
+    <ContextualMenu
       value={value}
       label={label}
       error={Boolean(error) && touched}

apps/audius-client/packages/mobile/src/screens/edit-track-screen/fields/IsrcIswcField.tsx

@@ -1,14 +1,14 @@
 import { removeNullable } from '@audius/common'
 import { useField } from 'formik'
 
-import type { ContextualSubmenuProps } from 'app/components/core'
-import { ContextualSubmenu } from 'app/components/core'
+import type { ContextualMenuProps } from 'app/components/core'
+import { ContextualMenu } from 'app/components/core'
 
 const messages = {
   label: 'ISRC/ISWC'
 }
 
-type IsrcFieldProps = Partial<ContextualSubmenuProps>
+type IsrcFieldProps = Partial<ContextualMenuProps>
 
 export const IsrcField = (props: IsrcFieldProps) => {
   const [{ value: isrc }] = useField<string>('isrc')
@@ -17,10 +17,10 @@ export const IsrcField = (props: IsrcFieldProps) => {
   const values = [isrc, iswc].filter(removeNullable)
 
   return (
-    <ContextualSubmenu
+    <ContextualMenu
       value={values}
       label={messages.label}
-      submenuScreenName='IsrcIswc'
+      menuScreenName='IsrcIswc'
       {...props}
     />
   )

apps/audius-client/packages/mobile/src/screens/edit-track-screen/fields/LicenseTypeField.tsx

@@ -4,8 +4,8 @@ import type { Nullable } from '@audius/common'
 import { useField } from 'formik'
 import { View } from 'react-native'
 
-import type { ContextualSubmenuProps } from 'app/components/core'
-import { ContextualSubmenu, Pill } from 'app/components/core'
+import type { ContextualMenuProps } from 'app/components/core'
+import { ContextualMenu, Pill } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
@@ -30,7 +30,7 @@ const useStyles = makeStyles(({ spacing }) => ({
   }
 }))
 
-type LicenseTypeFieldProps = Partial<ContextualSubmenuProps>
+type LicenseTypeFieldProps = Partial<ContextualMenuProps>
 
 export const LicenseTypeField = (props: LicenseTypeFieldProps) => {
   const [{ value: license }] = useField<Nullable<string>>('license')
@@ -72,10 +72,10 @@ export const LicenseTypeField = (props: LicenseTypeFieldProps) => {
   }, [allowAttribution, commercialUse, derivativeWorks, styles, neutral])
 
   return (
-    <ContextualSubmenu
+    <ContextualMenu
       value={license || messages.noLicense}
       label={messages.licenseType}
-      submenuScreenName='LicenseType'
+      menuScreenName='LicenseType'
       renderValue={
         license && license !== messages.noLicense ? renderValue : undefined
       }

apps/audius-client/packages/mobile/src/screens/edit-track-screen/fields/RemixSettingsField.tsx

@@ -3,8 +3,8 @@ import { useField } from 'formik'
 import { View } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import type { ContextualSubmenuProps } from 'app/components/core'
-import { Text, ContextualSubmenu } from 'app/components/core'
+import type { ContextualMenuProps } from 'app/components/core'
+import { Text, ContextualMenu } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 
 import { RemixTrackPill } from '../components'
@@ -26,7 +26,7 @@ const useStyles = makeStyles(({ spacing }) => ({
   }
 }))
 
-type SelectMoodFieldProps = Partial<ContextualSubmenuProps>
+type SelectMoodFieldProps = Partial<ContextualMenuProps>
 
 export const RemixSettingsField = (props: SelectMoodFieldProps) => {
   const styles = useStyles()
@@ -66,8 +66,8 @@ export const RemixSettingsField = (props: SelectMoodFieldProps) => {
   }
 
   return (
-    <ContextualSubmenu
-      submenuScreenName='RemixSettings'
+    <ContextualMenu
+      menuScreenName='RemixSettings'
       label={messages.label}
       value={value}
       renderValue={renderValue}

apps/audius-client/packages/mobile/src/screens/edit-track-screen/fields/SelectGenreField.tsx

@@ -1,19 +1,19 @@
-import type { ContextualSubmenuProps } from 'app/components/core'
+import type { ContextualMenuProps } from 'app/components/core'
 
-import { ContextualSubmenuField } from './ContextualSubmenuField'
+import { ContextualMenuField } from './ContextualMenuField'
 
 const messages = {
   genre: 'Genre',
   error: 'Selection Required'
 }
 
-type SelectGenreFieldProps = Partial<ContextualSubmenuProps>
+type SelectGenreFieldProps = Partial<ContextualMenuProps>
 
 export const SelectGenreField = (props: SelectGenreFieldProps) => {
   return (
-    <ContextualSubmenuField
+    <ContextualMenuField
       name='genre'
-      submenuScreenName='SelectGenre'
+      menuScreenName='SelectGenre'
       label={messages.genre}
       required
       errorMessage={messages.error}

apps/audius-client/packages/mobile/src/screens/edit-track-screen/fields/SelectMoodField.tsx

@@ -2,18 +2,18 @@ import { useCallback } from 'react'
 
 import { Image, View } from 'react-native'
 
-import type { ContextualSubmenuProps } from 'app/components/core'
+import type { ContextualMenuProps } from 'app/components/core'
 import { Pill, Text } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 import { moodMap } from 'app/utils/moods'
 
-import { ContextualSubmenuField } from './ContextualSubmenuField'
+import { ContextualMenuField } from './ContextualMenuField'
 
 const messages = {
   mood: 'Mood'
 }
 
-type SelectMoodFieldProps = Partial<ContextualSubmenuProps>
+type SelectMoodFieldProps = Partial<ContextualMenuProps>
 
 const useStyles = makeStyles(({ spacing }) => ({
   value: {
@@ -50,9 +50,9 @@ export const SelectMoodField = (props: SelectMoodFieldProps) => {
   )
 
   return (
-    <ContextualSubmenuField
+    <ContextualMenuField
       name='mood'
-      submenuScreenName='SelectMood'
+      menuScreenName='SelectMood'
       label={messages.mood}
       renderValue={renderValue}
       {...props}

apps/audius-client/packages/mobile/src/screens/edit-track-screen/fields/TrackVisibilityField.tsx

@@ -9,8 +9,8 @@ import {
 } from '@audius/common'
 import { useField } from 'formik'
 
-import type { ContextualSubmenuProps } from 'app/components/core'
-import { ContextualSubmenu } from 'app/components/core'
+import type { ContextualMenuProps } from 'app/components/core'
+import { ContextualMenu } from 'app/components/core'
 
 const messages = {
   availability: 'Availability',
@@ -37,7 +37,7 @@ const fieldVisibilityLabelMap = {
 
 const fieldVisibilityKeys = Object.keys(fieldVisibilityLabelMap)
 
-type TrackVisibilityFieldProps = Partial<ContextualSubmenuProps>
+type TrackVisibilityFieldProps = Partial<ContextualMenuProps>
 
 export const TrackVisibilityField = (props: TrackVisibilityFieldProps) => {
   const [{ value: premiumConditions }] =
@@ -67,9 +67,9 @@ export const TrackVisibilityField = (props: TrackVisibilityFieldProps) => {
   }, [premiumConditions, isUnlisted, fieldVisibilityLabels])
 
   return (
-    <ContextualSubmenu
+    <ContextualMenu
       label={messages.availability}
-      submenuScreenName={messages.availability}
+      menuScreenName={messages.availability}
       value={trackAvailabilityLabels}
       {...props}
     />

apps/audius-client/packages/stems/src/components/Icons/index.ts

@@ -1,3 +1,4 @@
+export * from './types'
 export { ReactComponent as AudiusLogoGlyph } from '../../assets/icons/audiusLogoGlyph.svg'
 export { ReactComponent as AudiusLogoHorizontal } from '../../assets/icons/audiusLogoHorizontal.svg'
 export { ReactComponent as BadgeArtist } from '../../assets/icons/badgeArtist.svg'

apps/audius-client/packages/stems/src/components/Icons/types.ts

@@ -1,3 +1,5 @@
-import React from 'react'
+import { ComponentType, SVGProps } from 'react'
 
-export type IconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>
+export type IconComponent = ComponentType<SVGProps<SVGSVGElement>> & {
+  title?: string
+}

apps/audius-client/packages/stems/src/components/Modal/Modal.module.css

@@ -147,3 +147,7 @@
 .sizeSmall {
   width: 488px;
 }
+
+.sizeMedium {
+  width: 720px;
+}

apps/audius-client/packages/web/src/components/Icon/Icon.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import { SVGProps } from 'react'
 
-import { ColorValue, toCSSVariableName } from '@audius/stems'
+import { ColorValue, IconComponent, toCSSVariableName } from '@audius/stems'
 import cn from 'classnames'
 
 import styles from './Icon.module.css'
@@ -15,9 +15,9 @@ type IconSize =
 
 type IconProps = {
   color?: ColorValue
-  icon: React.FC<React.SVGProps<SVGSVGElement>>
+  icon: IconComponent
   size?: IconSize
-} & React.SVGProps<SVGSVGElement>
+} & SVGProps<SVGSVGElement>
 
 /** Renders a stems Icon component
  * Ex: `<Icon icon={IconKebabHorizontal} color='accentGreen' />`
@@ -29,23 +29,26 @@ type IconProps = {
  * - xLarge: 30
  * - xxLarge: 32
  */
-export const Icon = ({
-  color,
-  icon: IconComponent,
-  size = 'small',
-  style,
-  ...iconProps
-}: IconProps) => {
-  const finalStyle = color
+export const Icon = (props: IconProps) => {
+  const {
+    color,
+    icon: IconComponent,
+    size = 'small',
+    style: styleProp,
+    ...iconProps
+  } = props
+
+  const style = color
     ? {
-        ...style,
+        ...styleProp,
         '--icon-color': toCSSVariableName(color)
       }
-    : style
+    : styleProp
+
   return (
     <IconComponent
       className={cn(styles.icon, styles[size])}
-      style={finalStyle}
+      style={style}
       {...iconProps}
     />
   )