feat(COREL): update types to bundle + add create bundle functionality (…

…#7047)

* refactor(sanity): update types to bundle

* feat(sanity): add ability to create releases from dialog + update types

* feat(sanity): update list on global and document to use store

* feat(sanity): update types, add icon and hue picker to bundles, update uis

* feat(sanity): add date picker to bundleform

* refactor(sanity): update publishAt fields in menus

* refactor(sanity): update type in dummyGetter

* chore(sanity): remove BUNDLES const

* chore(sanity): update LATEST type to Partial

* chore(sanity): update validation for bundle date creation

* chore(sanity): clean up code

* refactor(sanity): add archived filter

* refactor(sanity): make single bundle menu + clean up

* chore(sanity): add missing properties

* feat(sanity): add loading & remove unused code

* feat(sanity): add loading to document version, update filter

* chore(sanity): rename VersionBadge to BundleBadge

* chore(sanity): clean up methods and style

* chore(sanity): remove unused import

* refactor(sanity): use Bundle provider instead of store

* chore(sanity): update bundleRow to use the new name for badge

* chore(sanity): clean up code

* refactor(sanity): re-add oncancel and oncreate props in dialog

* refactor(sanity): add scroll to bundle menu

* refactor(sanity): move from archived to archivedAt

* refactor(sanity): only show the list of bundles if it has more than published / drafts

* chore(sanity): remove warnings comments

.eslintrc.cjs

@@ -164,7 +164,7 @@ const config = {
 
     // Ignore i18n in releases files. TODO: Remove this before moving releases to GA.
     {
-      files: ['**/*/core/releases/**/*'],
+      files: ['**/*/core/releases/**/*', '**/*/core/versions/**/*'],
       rules: {
         'i18next/no-literal-string': 'off',
         '@sanity/i18n/no-attribute-string-literals': 'off',

packages/sanity/src/_singletons/context/VersionContext.tsx

@@ -4,14 +4,15 @@
 // eslint-disable-next-line import/consistent-type-specifier-style
 import {createContext, type ReactElement} from 'react'
 
-import type {Version} from '../../../core/versions/types'
-import {BUNDLES, LATEST} from '../../../core/versions/util/const'
+import {useBundlesStore} from '../../../core/store/bundles'
+import type {BundleDocument} from '../../../core/store/bundles/types'
+import {LATEST} from '../../../core/versions/util/const'
 import {useRouter} from '../../../router'
 
 export interface VersionContextValue {
-  currentVersion: Version
+  currentVersion: Partial<BundleDocument>
   isDraft: boolean
-  setCurrentVersion: (version: Version) => void
+  setCurrentVersion: (bundle: Partial<BundleDocument>) => void
 }
 
 export const VersionContext = createContext<VersionContextValue>({
@@ -27,22 +28,25 @@ interface VersionProviderProps {
 
 export function VersionProvider({children}: VersionProviderProps): JSX.Element {
   const router = useRouter()
-  const setCurrentVersion = (version: Version) => {
+  const {data: bundles} = useBundlesStore()
+
+  const setCurrentVersion = (version: Partial<BundleDocument>) => {
     const {name} = version
     if (name === 'drafts') {
       router.navigateStickyParam('perspective', '')
     } else {
       router.navigateStickyParam('perspective', `bundle.${name}`)
     }
   }
-  const selectedVersion = router.stickyParams?.perspective
-    ? BUNDLES.find((bundle) => {
-        return (
-          `bundle.${bundle.name}`.toLocaleLowerCase() ===
-          router.stickyParams.perspective?.toLocaleLowerCase()
-        )
-      })
-    : LATEST
+  const selectedVersion =
+    router.stickyParams?.perspective && bundles
+      ? bundles.find((bundle) => {
+          return (
+            `bundle.${bundle.name}`.toLocaleLowerCase() ===
+            router.stickyParams.perspective?.toLocaleLowerCase()
+          )
+        })
+      : LATEST
 
   const currentVersion = selectedVersion || LATEST
 

packages/sanity/src/core/releases/components/BundlesTable/BundleRow.tsx

@@ -3,7 +3,7 @@ import {RelativeTime} from 'sanity'
 import {useRouter} from 'sanity/router'
 
 import {type BundleDocument} from '../../../store/bundles/types'
-import {VersionBadge} from '../../../versions/components/VersionBadge'
+import {BundleBadge} from '../../../versions/components/BundleBadge'
 import {BundleMenuButton} from '../BundleMenuButton/BundleMenuButton'
 
 type Props = {
@@ -26,7 +26,7 @@ export function BundleRow({bundle}: Props) {
         >
           <Flex align="center" gap={2}>
             <Box flex="none">
-              <VersionBadge tone={bundle.tone} icon={bundle.icon} />
+              <BundleBadge tone={bundle.tone} icon={bundle.icon} />
             </Box>
             <Stack flex={1} space={2}>
               <Flex align="center" gap={2}>

packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx

@@ -4,10 +4,10 @@ import {type ComponentType, type FormEvent, useCallback, useState} from 'react'
 import {Button} from '../../../../ui-components'
 import {LoadingBlock} from '../../../components/loadingBlock/LoadingBlock'
 import {AddonDatasetProvider} from '../../../studio/addonDataset/AddonDatasetProvider'
+import {BundleForm} from '../../../versions/components/dialog/BundleForm'
 import {BundlesProvider, useBundles} from '../BundlesProvider'
 import {type BundleDocument} from '../types'
 import {useBundleOperations} from '../useBundleOperations'
-import {ReleaseForm} from './ReleaseForm'
 
 const WithAddonDatasetProvider = <P extends object>(Component: ComponentType<P>): React.FC<P> => {
   const WrappedComponent: React.FC<P> = (props) => (
@@ -66,7 +66,7 @@ const BundlesStoreStory = () => {
           <form onSubmit={handleCreateBundle}>
             <Stack space={4}>
               <Text weight="medium">Create a new release</Text>
-              <ReleaseForm onChange={setValue} value={value} />
+              <BundleForm onChange={setValue} value={value} />
               <Flex justify="flex-end">
                 <Button
                   text="Create"

packages/sanity/src/core/store/bundles/types.ts

@@ -1,13 +1,13 @@
+import {type ColorHueKey} from '@sanity/color'
 import {type IconSymbol} from '@sanity/icons'
 import {type SanityDocument} from '@sanity/types'
-import {type ButtonTone} from '@sanity/ui'
 
 export interface BundleDocument extends SanityDocument {
   _type: 'bundle'
   title: string
   name: string
   description?: string
-  tone?: ButtonTone
+  hue?: ColorHueKey
   icon?: IconSymbol
   authorId: string
   publishedAt?: string

packages/sanity/src/core/studio/StudioProvider.tsx

@@ -6,6 +6,7 @@ import javascript from 'refractor/lang/javascript.js'
 import json from 'refractor/lang/json.js'
 import jsx from 'refractor/lang/jsx.js'
 import typescript from 'refractor/lang/typescript.js'
+import {AddonDatasetProvider} from 'sanity'
 
 import {VersionProvider} from '../../_singletons/core/form/VersionContext'
 import {LoadingBlock} from '../components/loadingBlock'
@@ -71,12 +72,14 @@ export function StudioProvider({
       <WorkspaceLoader LoadingComponent={LoadingBlock} ConfigErrorsComponent={ConfigErrorsScreen}>
         <StudioTelemetryProvider config={config}>
           <LocaleProvider>
-            <VersionProvider>
-              <PackageVersionStatusProvider>
-                <MaybeEnableErrorReporting errorReporter={errorReporter} />
-                <ResourceCacheProvider>{children}</ResourceCacheProvider>
-              </PackageVersionStatusProvider>
-            </VersionProvider>
+            <AddonDatasetProvider>
+              <VersionProvider>
+                <PackageVersionStatusProvider>
+                  <MaybeEnableErrorReporting errorReporter={errorReporter} />
+                  <ResourceCacheProvider>{children}</ResourceCacheProvider>
+                </PackageVersionStatusProvider>
+              </VersionProvider>
+            </AddonDatasetProvider>
           </LocaleProvider>
         </StudioTelemetryProvider>
       </WorkspaceLoader>

packages/sanity/src/core/versions/components/VersionBadge.tsx → packages/sanity/src/core/versions/components/BundleBadge.tsx

@@ -1,23 +1,27 @@
+import {hues} from '@sanity/color'
 import {ChevronDownIcon, Icon} from '@sanity/icons'
-import {Box, Flex, Text} from '@sanity/ui'
+// eslint-disable-next-line camelcase
+import {Box, Flex, rgba, Text, useTheme_v2} from '@sanity/ui'
 import {type CSSProperties} from 'react'
 
-import {type SanityVersionIcon} from '../types'
+import {type BundleDocument} from '../../store/bundles/types'
 
-export function VersionBadge(
-  props: Partial<SanityVersionIcon> & {openButton?: boolean; padding?: number; title?: string},
+export function BundleBadge(
+  props: Partial<BundleDocument> & {openButton?: boolean; padding?: number; title?: string},
 ): JSX.Element {
-  const {tone, icon, openButton, padding = 3, title} = props
+  const {hue = 'gray', icon, openButton, padding = 3, title} = props
+  const {color} = useTheme_v2()
 
   return (
     <Flex
       gap={padding}
       padding={padding}
       style={
         {
-          '--card-fg-color': `var(--card-badge-${tone}-fg-color)`,
-          '--card-icon-color': `var(--card-badge-${tone}-icon-color)`,
-          'backgroundColor': `var(--card-badge-${tone}-bg-color)`,
+          '--card-bg-color': rgba(hues[hue][color._dark ? 700 : 300].hex, 0.2),
+          '--card-fg-color': hues[hue][color._dark ? 400 : 600].hex,
+          '--card-icon-color': hues[hue][color._dark ? 400 : 600].hex,
+          'backgroundColor': 'var(--card-bg-color)',
           'borderRadius': '9999px',
         } as CSSProperties
       }