From ff0e9e1f0d2c976827f89f75674451487e090df4 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Fri, 28 Jun 2024 10:01:16 +0200
Subject: [PATCH 1/8] feat(corel): add bundles store

---
 .../sanity/src/core/store/bundles/index.ts    |   1 +
 .../sanity/src/core/store/bundles/reducer.ts  | 109 +++++++++++++
 .../sanity/src/core/store/bundles/types.ts    |  10 ++
 .../store/bundles/useBundlesOperations.ts     |   0
 .../src/core/store/bundles/useBundlesStore.ts | 147 ++++++++++++++++++
 5 files changed, 267 insertions(+)
 create mode 100644 packages/sanity/src/core/store/bundles/index.ts
 create mode 100644 packages/sanity/src/core/store/bundles/reducer.ts
 create mode 100644 packages/sanity/src/core/store/bundles/types.ts
 create mode 100644 packages/sanity/src/core/store/bundles/useBundlesOperations.ts
 create mode 100644 packages/sanity/src/core/store/bundles/useBundlesStore.ts

diff --git a/packages/sanity/src/core/store/bundles/index.ts b/packages/sanity/src/core/store/bundles/index.ts
new file mode 100644
index 00000000000..9b1c7f01542
--- /dev/null
+++ b/packages/sanity/src/core/store/bundles/index.ts
@@ -0,0 +1 @@
+export * from './useBundlesStore'
diff --git a/packages/sanity/src/core/store/bundles/reducer.ts b/packages/sanity/src/core/store/bundles/reducer.ts
new file mode 100644
index 00000000000..f808ff8d0bc
--- /dev/null
+++ b/packages/sanity/src/core/store/bundles/reducer.ts
@@ -0,0 +1,109 @@
+import {type BundleDocument} from './types'
+
+interface BundleAddedAction {
+  payload: BundleDocument
+  type: 'BUNDLE_ADDED'
+}
+
+interface BundleDeletedAction {
+  id: string
+  type: 'BUNDLE_DELETED'
+}
+
+interface BundleUpdatedAction {
+  payload: BundleDocument
+  type: 'BUNDLE_UPDATED'
+}
+
+interface BundlesSetAction {
+  bundles: BundleDocument[]
+  type: 'BUNDLES_SET'
+}
+
+interface BundleReceivedAction {
+  payload: BundleDocument
+  type: 'BUNDLE_RECEIVED'
+}
+
+export type bundlesReducerAction =
+  | BundleAddedAction
+  | BundleDeletedAction
+  | BundleUpdatedAction
+  | BundlesSetAction
+  | BundleReceivedAction
+
+export interface bundlesReducerState {
+  bundles: Map<string, BundleDocument>
+}
+
+function createBundlesSet(bundles: BundleDocument[]) {
+  const bundlesById = bundles.reduce((acc, bundle) => {
+    acc.set(bundle._id, bundle)
+    return acc
+  }, new Map<string, BundleDocument>())
+  return bundlesById
+}
+
+export function bundlesReducer(
+  state: bundlesReducerState,
+  action: bundlesReducerAction,
+): bundlesReducerState {
+  switch (action.type) {
+    case 'BUNDLES_SET': {
+      // Create an object with the BUNDLE id as key
+      const bundlesById = createBundlesSet(action.bundles)
+
+      return {
+        ...state,
+        bundles: bundlesById,
+      }
+    }
+
+    case 'BUNDLE_ADDED': {
+      const addedBundle = action.payload as BundleDocument
+      const currentBundles = new Map(state.bundles)
+      currentBundles.set(addedBundle._id, addedBundle)
+
+      return {
+        ...state,
+        bundles: currentBundles,
+      }
+    }
+
+    case 'BUNDLE_RECEIVED': {
+      const receivedBundle = action.payload as BundleDocument
+      const currentBundles = new Map(state.bundles)
+      currentBundles.set(receivedBundle._id, receivedBundle)
+
+      return {
+        ...state,
+        bundles: currentBundles,
+      }
+    }
+
+    case 'BUNDLE_DELETED': {
+      const currentBundles = new Map(state.bundles)
+      currentBundles.delete(action.id)
+
+      return {
+        ...state,
+        bundles: currentBundles,
+      }
+    }
+
+    case 'BUNDLE_UPDATED': {
+      const updatedBundle = action.payload
+      const id = updatedBundle._id as string
+      const currentBundles = new Map(state.bundles)
+      currentBundles.set(id, updatedBundle)
+
+      return {
+        ...state,
+        bundles: currentBundles,
+      }
+    }
+
+    default:
+      return state
+  }
+}
diff --git a/packages/sanity/src/core/store/bundles/types.ts b/packages/sanity/src/core/store/bundles/types.ts
new file mode 100644
index 00000000000..293c834e7d2
--- /dev/null
+++ b/packages/sanity/src/core/store/bundles/types.ts
@@ -0,0 +1,10 @@
+import {type SanityDocument} from '@sanity/types'
+
+export interface BundleDocument extends SanityDocument {
+  _type: 'bundle'
+  title: string
+  description?: string
+  color?: string
+  icon?: string
+  authorId: string
+}
diff --git a/packages/sanity/src/core/store/bundles/useBundlesOperations.ts b/packages/sanity/src/core/store/bundles/useBundlesOperations.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/sanity/src/core/store/bundles/useBundlesStore.ts b/packages/sanity/src/core/store/bundles/useBundlesStore.ts
new file mode 100644
index 00000000000..151597d8166
--- /dev/null
+++ b/packages/sanity/src/core/store/bundles/useBundlesStore.ts
@@ -0,0 +1,147 @@
+import {type ListenEvent, type ListenOptions} from '@sanity/client'
+import {useCallback, useEffect, useMemo, useReducer, useRef, useState} from 'react'
+import {catchError, of} from 'rxjs'
+
+import {useAddonDataset} from '../../studio/addonDataset/useAddonDataset'
+import {bundlesReducer, type bundlesReducerAction, type bundlesReducerState} from './reducer'
+import {type BundleDocument} from './types'
+
+interface BundlesStoreReturnType {
+  data: BundleDocument[] | null
+  error: Error | null
+  loading: boolean
+  dispatch: React.Dispatch<bundlesReducerAction>
+}
+
+const INITIAL_STATE: bundlesReducerState = {
+  bundles: new Map(),
+}
+
+const LISTEN_OPTIONS: ListenOptions = {
+  events: ['welcome', 'mutation', 'reconnect'],
+  includeResult: true,
+  visibility: 'query',
+}
+
+export const SORT_FIELD = '_createdAt'
+export const SORT_ORDER = 'desc'
+
+const QUERY_FILTERS = [`_type == "bundle"`]
+
+// TODO: Extend the projection with the fields needed
+const QUERY_PROJECTION = `{
+  ...,
+}`
+
+// Newest bundles first
+const QUERY_SORT_ORDER = `order(${SORT_FIELD} ${SORT_ORDER})`
+
+const QUERY = `*[${QUERY_FILTERS.join(' && ')}] ${QUERY_PROJECTION} | ${QUERY_SORT_ORDER}`
+
+export function useBundlesStore(): BundlesStoreReturnType {
+  const {client} = useAddonDataset()
+
+  const [state, dispatch] = useReducer(bundlesReducer, INITIAL_STATE)
+  const [loading, setLoading] = useState<boolean>(client !== null)
+  const [error, setError] = useState<Error | null>(null)
+
+  const didInitialFetch = useRef<boolean>(false)
+
+  const initialFetch = useCallback(async () => {
+    if (!client) {
+      setLoading(false)
+      return
+    }
+
+    try {
+      const res = await client.fetch(QUERY)
+      dispatch({type: 'BUNDLES_SET', bundles: res})
+      setLoading(false)
+    } catch (err) {
+      setError(err)
+    }
+  }, [client])
+
+  const handleListenerEvent = useCallback(
+    async (event: ListenEvent<Record<string, BundleDocument>>) => {
+      // Fetch all bundles on initial connection
+      if (event.type === 'welcome' && !didInitialFetch.current) {
+        setLoading(true)
+        await initialFetch()
+        setLoading(false)
+        didInitialFetch.current = true
+      }
+
+      // The reconnect event means that we are trying to reconnect to the realtime listener.
+      // In this case we set loading to true to indicate that we're trying to
+      // reconnect. Once a connection has been established, the welcome event
+      // will be received and we'll fetch all bundles again (above)
+      if (event.type === 'reconnect') {
+        setLoading(true)
+        didInitialFetch.current = false
+      }
+
+      // Handle mutations (create, update, delete) from the realtime listener
+      // and update the bundles store accordingly
+      if (event.type === 'mutation') {
+        if (event.transition === 'appear') {
+          const nextBundle = event.result as BundleDocument | undefined
+
+          if (nextBundle) {
+            dispatch({
+              type: 'BUNDLE_RECEIVED',
+              payload: nextBundle,
+            })
+          }
+        }
+
+        if (event.transition === 'disappear') {
+          dispatch({type: 'BUNDLE_DELETED', id: event.documentId})
+        }
+
+        if (event.transition === 'update') {
+          const updatedBundle = event.result as BundleDocument | undefined
+
+          if (updatedBundle) {
+            dispatch({
+              type: 'BUNDLE_UPDATED',
+              payload: updatedBundle,
+            })
+          }
+        }
+      }
+    },
+    [initialFetch],
+  )
+
+  const listener$ = useMemo(() => {
+    if (!client) return of()
+
+    const events$ = client.observable.listen(QUERY, {}, LISTEN_OPTIONS).pipe(
+      catchError((err) => {
+        setError(err)
+        return of(err)
+      }),
+    )
+
+    return events$
+  }, [client])
+
+  useEffect(() => {
+    const sub = listener$.subscribe(handleListenerEvent)
+
+    return () => {
+      sub?.unsubscribe()
+    }
+  }, [handleListenerEvent, listener$])
+
+  // Transform bundles object to array
+  const bundlesAsArray = useMemo(() => Array.from(state.bundles.values()), [state.bundles])
+
+  return {
+    data: bundlesAsArray,
+    dispatch,
+    error,
+    loading,
+  }
+}

From 01ad6fe9459f0e07c7c3179b70fc21a079906a3b Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Fri, 28 Jun 2024 11:29:00 +0200
Subject: [PATCH 2/8] chore(corel): use rxjs in bundlesStore listener

---
 .../src/core/store/bundles/useBundlesStore.ts | 73 +++++++++----------
 1 file changed, 35 insertions(+), 38 deletions(-)

diff --git a/packages/sanity/src/core/store/bundles/useBundlesStore.ts b/packages/sanity/src/core/store/bundles/useBundlesStore.ts
index 151597d8166..4c05ae189b9 100644
--- a/packages/sanity/src/core/store/bundles/useBundlesStore.ts
+++ b/packages/sanity/src/core/store/bundles/useBundlesStore.ts
@@ -42,34 +42,33 @@ export function useBundlesStore(): BundlesStoreReturnType {
   const {client} = useAddonDataset()
 
   const [state, dispatch] = useReducer(bundlesReducer, INITIAL_STATE)
-  const [loading, setLoading] = useState<boolean>(client !== null)
+  const [loading, setLoading] = useState<boolean>(true)
   const [error, setError] = useState<Error | null>(null)
 
   const didInitialFetch = useRef<boolean>(false)
 
-  const initialFetch = useCallback(async () => {
+  const initialFetch$ = useCallback(() => {
     if (!client) {
-      setLoading(false)
-      return
-    }
-
-    try {
-      const res = await client.fetch(QUERY)
-      dispatch({type: 'BUNDLES_SET', bundles: res})
-      setLoading(false)
-    } catch (err) {
-      setError(err)
+      return of(null) // emits null and completes if no client
     }
+    return client.observable.fetch(QUERY).pipe(
+      map((res) => {
+        dispatch({type: 'BUNDLES_SET', bundles: res})
+        didInitialFetch.current = true
+        setLoading(false)
+      }),
+      catchError((err) => {
+        setError(err)
+        return of(null) // ensure stream completion even on error
+      }),
+    )
   }, [client])
-
   const handleListenerEvent = useCallback(
-    async (event: ListenEvent<Record<string, BundleDocument>>) => {
+    (event: ListenEvent<Record<string, BundleDocument>>) => {
       // Fetch all bundles on initial connection
       if (event.type === 'welcome' && !didInitialFetch.current) {
-        setLoading(true)
-        await initialFetch()
-        setLoading(false)
-        didInitialFetch.current = true
+        // Do nothing here, the initial fetch is done in the useEffect below
+        initialFetch$()
       }
 
       // The reconnect event means that we are trying to reconnect to the realtime listener.
@@ -83,59 +82,57 @@ export function useBundlesStore(): BundlesStoreReturnType {
 
       // Handle mutations (create, update, delete) from the realtime listener
       // and update the bundles store accordingly
-      if (event.type === 'mutation') {
+      if (event.type === 'mutation' && didInitialFetch.current) {
+        if (event.transition === 'disappear') {
+          dispatch({type: 'BUNDLE_DELETED', id: event.documentId})
+        }
+
         if (event.transition === 'appear') {
           const nextBundle = event.result as BundleDocument | undefined
 
           if (nextBundle) {
-            dispatch({
-              type: 'BUNDLE_RECEIVED',
-              payload: nextBundle,
-            })
+            dispatch({type: 'BUNDLE_RECEIVED', payload: nextBundle})
           }
         }
 
-        if (event.transition === 'disappear') {
-          dispatch({type: 'BUNDLE_DELETED', id: event.documentId})
-        }
-
         if (event.transition === 'update') {
           const updatedBundle = event.result as BundleDocument | undefined
 
           if (updatedBundle) {
-            dispatch({
-              type: 'BUNDLE_UPDATED',
-              payload: updatedBundle,
-            })
+            dispatch({type: 'BUNDLE_UPDATED', payload: updatedBundle})
           }
         }
       }
     },
-    [initialFetch],
+    [initialFetch$],
   )
 
   const listener$ = useMemo(() => {
     if (!client) return of()
 
     const events$ = client.observable.listen(QUERY, {}, LISTEN_OPTIONS).pipe(
+      map(handleListenerEvent),
       catchError((err) => {
         setError(err)
         return of(err)
       }),
     )
 
-    return events$
-  }, [client])
+    return events$ // as Observable<ListenEvent<Record<string, BundleDocument>>>
+  }, [client, handleListenerEvent])
 
   useEffect(() => {
-    const sub = listener$.subscribe(handleListenerEvent)
+    if (!client) return
+    const subscription = initialFetch$()
+      .pipe(concatMap(() => listener$))
+      .subscribe()
 
+    // eslint-disable-next-line consistent-return
     return () => {
-      sub?.unsubscribe()
+      subscription.unsubscribe()
     }
-  }, [handleListenerEvent, listener$])
+  }, [initialFetch$, listener$, client])
 
-  // Transform bundles object to array
   const bundlesAsArray = useMemo(() => Array.from(state.bundles.values()), [state.bundles])
 
   return {

From 1fd7376900e1268f4f70981d231f5a21fc2d7dc5 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Fri, 28 Jun 2024 12:35:59 +0200
Subject: [PATCH 3/8] feat(corel): add retry to initialFetch

---
 .../sanity/src/core/store/bundles/useBundlesStore.ts   | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/store/bundles/useBundlesStore.ts b/packages/sanity/src/core/store/bundles/useBundlesStore.ts
index 4c05ae189b9..8a5790034e5 100644
--- a/packages/sanity/src/core/store/bundles/useBundlesStore.ts
+++ b/packages/sanity/src/core/store/bundles/useBundlesStore.ts
@@ -1,6 +1,6 @@
 import {type ListenEvent, type ListenOptions} from '@sanity/client'
 import {useCallback, useEffect, useMemo, useReducer, useRef, useState} from 'react'
-import {catchError, of} from 'rxjs'
+import {catchError, concatMap, map, of, retry, timeout} from 'rxjs'
 
 import {useAddonDataset} from '../../studio/addonDataset/useAddonDataset'
 import {bundlesReducer, type bundlesReducerAction, type bundlesReducerState} from './reducer'
@@ -52,12 +52,20 @@ export function useBundlesStore(): BundlesStoreReturnType {
       return of(null) // emits null and completes if no client
     }
     return client.observable.fetch(QUERY).pipe(
+      timeout(10000), // 10s timeout
       map((res) => {
         dispatch({type: 'BUNDLES_SET', bundles: res})
         didInitialFetch.current = true
         setLoading(false)
       }),
+      retry({
+        count: 2,
+        delay: 1000,
+      }),
       catchError((err) => {
+        if (err.name === 'TimeoutError') {
+          console.error('Fetch operation timed out:', err)
+        }
         setError(err)
         return of(null) // ensure stream completion even on error
       }),

From c85934b4f6205a9ba755658a052661741f03a58c Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Fri, 28 Jun 2024 14:09:42 +0200
Subject: [PATCH 4/8] feat(corel): include useBundleOperations and story

---
 .../__workshop__/BundlesStoreStory.tsx        | 112 +++++++++++++++
 .../bundles/__workshop__/ReleaseForm.tsx      | 135 ++++++++++++++++++
 .../core/store/bundles/__workshop__/index.ts  |  14 ++
 .../sanity/src/core/store/bundles/types.ts    |   4 +-
 .../core/store/bundles/useBundleOperations.ts |  50 +++++++
 .../store/bundles/useBundlesOperations.ts     |   0
 6 files changed, 314 insertions(+), 1 deletion(-)
 create mode 100644 packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx
 create mode 100644 packages/sanity/src/core/store/bundles/__workshop__/ReleaseForm.tsx
 create mode 100644 packages/sanity/src/core/store/bundles/__workshop__/index.ts
 create mode 100644 packages/sanity/src/core/store/bundles/useBundleOperations.ts
 delete mode 100644 packages/sanity/src/core/store/bundles/useBundlesOperations.ts

diff --git a/packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx b/packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx
new file mode 100644
index 00000000000..d49f28fa10a
--- /dev/null
+++ b/packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx
@@ -0,0 +1,112 @@
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {type ComponentType, type FormEvent, useCallback, useState} from 'react'
+import {AddonDatasetProvider, LoadingBlock} from 'sanity'
+
+import {Button} from '../../../../ui-components'
+import {type BundleDocument} from '../types'
+import {useBundleOperations} from '../useBundleOperations'
+import {useBundlesStore} from '../useBundlesStore'
+import {ReleaseForm} from './ReleaseForm'
+
+const WithAddonDatasetProvider = <P extends object>(Component: ComponentType<P>): React.FC<P> => {
+  // Function that returns the wrapped component
+  const WrappedComponent: React.FC<P> = (props) => (
+    <AddonDatasetProvider>
+      <Component {...props} />
+    </AddonDatasetProvider>
+  )
+
+  // Setting a display name for the wrapped component
+  WrappedComponent.displayName = `WithAddonDatasetProvider(${Component.displayName || Component.name || 'Component'})`
+
+  return WrappedComponent
+}
+
+const initialValue = {name: '', title: '', tone: undefined, publishAt: undefined}
+const BundlesStoreStory = () => {
+  const {data, loading} = useBundlesStore()
+  const {createBundle, deleteBundle} = useBundleOperations()
+  const [creating, setCreating] = useState(false)
+  const [deleting, setDeleting] = useState<string | null>(null)
+  const [value, setValue] = useState<Partial<BundleDocument>>(initialValue)
+  const handleCreateBundle = useCallback(
+    async (event: FormEvent<HTMLFormElement>) => {
+      try {
+        event.preventDefault()
+        setCreating(true)
+        await createBundle(value)
+        setValue(initialValue)
+      } catch (err) {
+        console.error(err)
+      } finally {
+        setCreating(false)
+      }
+    },
+    [createBundle, value],
+  )
+
+  const handleDeleteBundle = useCallback(
+    async (id: string) => {
+      try {
+        setDeleting(id)
+        await deleteBundle(id)
+      } catch (err) {
+        console.error(err)
+      } finally {
+        setDeleting(null)
+      }
+    },
+    [deleteBundle],
+  )
+
+  return (
+    <Stack space={3}>
+      <Flex gap={2}>
+        <Card margin={3} padding={3} border>
+          <form onSubmit={handleCreateBundle}>
+            <Stack space={4}>
+              <Text weight="medium">Create a new release</Text>
+              <ReleaseForm onChange={setValue} value={value} />
+              <Flex justify="flex-end">
+                <Button
+                  text="Create"
+                  tone="primary"
+                  type="submit"
+                  disabled={creating}
+                  loading={creating}
+                />
+              </Flex>
+            </Stack>
+          </form>
+        </Card>
+        <Card margin={3} border padding={3}>
+          <div style={{maxHeight: '400px', overflow: 'scroll'}}>
+            <Text>Data</Text>
+            {loading ? <LoadingBlock /> : <pre>{JSON.stringify(data, null, 2)}</pre>}
+          </div>
+        </Card>
+      </Flex>
+      <Card margin={3} border padding={3}>
+        <Stack space={3}>
+          {data?.map((bundle) => (
+            <Card key={bundle._id} padding={3} border radius={3}>
+              <Flex align="center" gap={3} justify={'space-between'}>
+                <Text>{bundle.name}</Text>
+                <Button
+                  text="Delete"
+                  tone="critical"
+                  // eslint-disable-next-line react/jsx-no-bind
+                  onClick={() => handleDeleteBundle(bundle._id)}
+                  disabled={deleting === bundle._id}
+                  loading={deleting === bundle._id}
+                />
+              </Flex>
+            </Card>
+          ))}
+        </Stack>
+      </Card>
+    </Stack>
+  )
+}
+
+export default WithAddonDatasetProvider(BundlesStoreStory)
diff --git a/packages/sanity/src/core/store/bundles/__workshop__/ReleaseForm.tsx b/packages/sanity/src/core/store/bundles/__workshop__/ReleaseForm.tsx
new file mode 100644
index 00000000000..ca29651923a
--- /dev/null
+++ b/packages/sanity/src/core/store/bundles/__workshop__/ReleaseForm.tsx
@@ -0,0 +1,135 @@
+import {COLOR_HUES} from '@sanity/color'
+import {CalendarIcon} from '@sanity/icons'
+import {
+  Box,
+  type ButtonTone,
+  Card,
+  Flex,
+  Select,
+  Stack,
+  Text,
+  TextArea,
+  TextInput,
+} from '@sanity/ui'
+
+import {Button} from '../../../../ui-components/button'
+import {type BundleDocument} from '../types'
+
+function toSlug(value: string): string {
+  return value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+/**
+ * Copy from Prototype, not a final or complete working implementation.
+ */
+export function ReleaseForm(props: {
+  onChange: (params: Partial<BundleDocument>) => void
+  value: Partial<BundleDocument>
+}) {
+  const {onChange, value} = props
+
+  const handleReleaseTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const v = event.target.value
+
+    onChange({...value, title: v, name: toSlug(v)})
+  }
+
+  const handleReleaseDescriptionChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const v = event.target.value
+
+    onChange({...value, description: v || undefined})
+  }
+
+  const handleReleaseToneChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange({...value, tone: (event.target.value || undefined) as ButtonTone | undefined})
+  }
+
+  const handleReleasePublishAtChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const v = event.target.value
+
+    onChange({...value, publishAt: v})
+  }
+
+  return (
+    <Stack space={5}>
+      <Stack space={3}>
+        <Text size={1} weight="medium">
+          Title
+        </Text>
+        <TextInput fontSize={3} onChange={handleReleaseTitleChange} value={value.title} />
+      </Stack>
+
+      <Stack space={3}>
+        <Text size={1} weight="medium">
+          Description
+        </Text>
+        <TextArea onChange={handleReleaseDescriptionChange} value={value.description} />
+      </Stack>
+
+      <Stack hidden space={3}>
+        <Text size={1} weight="medium">
+          Schedule for publishing at
+        </Text>
+        <TextInput
+          onChange={handleReleasePublishAtChange}
+          suffix={
+            <Box padding={1} style={{border: '1px solid transparent'}}>
+              <Button icon={CalendarIcon} mode="bleed" />
+            </Box>
+          }
+          value={value.publishAt || ''}
+        />
+      </Stack>
+
+      <Stack space={3}>
+        <Text size={1} weight="medium">
+          Color
+        </Text>
+        <Flex>
+          <Card
+            borderTop
+            borderLeft
+            borderBottom
+            flex="none"
+            radius={2}
+            padding={2}
+            style={{
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0,
+            }}
+          >
+            <div
+              style={{
+                borderRadius: 1,
+                width: 17,
+                height: 17,
+                backgroundColor: `var(--card-avatar-${value.tone || 'gray'}-bg-color)`,
+              }}
+            >
+              &nbsp;
+            </div>
+          </Card>
+          <Stack flex={1}>
+            <Select
+              onChange={handleReleaseToneChange}
+              style={{
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+              }}
+              value={value.tone || ''}
+            >
+              {COLOR_HUES.map((hue) => (
+                <option key={hue} value={hue === 'gray' ? '' : hue}>
+                  {hue}
+                </option>
+              ))}
+            </Select>
+          </Stack>
+        </Flex>
+      </Stack>
+    </Stack>
+  )
+}
diff --git a/packages/sanity/src/core/store/bundles/__workshop__/index.ts b/packages/sanity/src/core/store/bundles/__workshop__/index.ts
new file mode 100644
index 00000000000..a1ffae0f240
--- /dev/null
+++ b/packages/sanity/src/core/store/bundles/__workshop__/index.ts
@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'core/bundles',
+  title: 'bundles',
+  stories: [
+    {
+      name: 'bundles-store',
+      title: 'BundlesStore',
+      component: lazy(() => import('./BundlesStoreStory')),
+    },
+  ],
+})
diff --git a/packages/sanity/src/core/store/bundles/types.ts b/packages/sanity/src/core/store/bundles/types.ts
index 293c834e7d2..7a873baf8dc 100644
--- a/packages/sanity/src/core/store/bundles/types.ts
+++ b/packages/sanity/src/core/store/bundles/types.ts
@@ -1,10 +1,12 @@
 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
-  color?: string
+  tone?: ButtonTone
   icon?: string
   authorId: string
 }
diff --git a/packages/sanity/src/core/store/bundles/useBundleOperations.ts b/packages/sanity/src/core/store/bundles/useBundleOperations.ts
new file mode 100644
index 00000000000..2fe7163f311
--- /dev/null
+++ b/packages/sanity/src/core/store/bundles/useBundleOperations.ts
@@ -0,0 +1,50 @@
+import {uuid} from '@sanity/uuid'
+import {useCallback} from 'react'
+import {useAddonDataset} from 'sanity'
+
+import {type BundleDocument} from './types'
+
+// WIP - Raw implementation for initial testing purposes
+export function useBundleOperations() {
+  const {client} = useAddonDataset()
+
+  const handleCreateBundle = useCallback(
+    async (bundle: Partial<BundleDocument>) => {
+      const document = {
+        ...bundle,
+        _type: 'bundle',
+        _id: bundle._id ?? uuid(),
+      } as BundleDocument
+      const res = await client?.createIfNotExists(document)
+      return res
+    },
+    [client],
+  )
+
+  const handleDeleteBundle = useCallback(
+    async (id: string) => {
+      const res = await client?.delete(id)
+      return res
+    },
+    [client],
+  )
+
+  const handleUpdateBundle = useCallback(
+    async (bundle: BundleDocument) => {
+      const document = {
+        ...bundle,
+        _type: 'bundle',
+      } as BundleDocument
+
+      const res = await client?.patch(bundle._id).set(document).commit()
+      return res
+    },
+    [client],
+  )
+
+  return {
+    createBundle: handleCreateBundle,
+    deleteBundle: handleDeleteBundle,
+    updateBundle: handleUpdateBundle,
+  }
+}
diff --git a/packages/sanity/src/core/store/bundles/useBundlesOperations.ts b/packages/sanity/src/core/store/bundles/useBundlesOperations.ts
deleted file mode 100644
index e69de29bb2d..00000000000

From 36a40133967b083dd7e3729b33ca1c9f2bf9cbe7 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Fri, 28 Jun 2024 14:38:49 +0200
Subject: [PATCH 5/8] fix(corel): update imports paths

---
 .../core/store/bundles/__workshop__/BundlesStoreStory.tsx   | 6 ++----
 .../sanity/src/core/store/bundles/useBundleOperations.ts    | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx b/packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx
index d49f28fa10a..cd554fe5b86 100644
--- a/packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx
+++ b/packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx
@@ -1,22 +1,20 @@
 import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {type ComponentType, type FormEvent, useCallback, useState} from 'react'
-import {AddonDatasetProvider, LoadingBlock} from 'sanity'
 
 import {Button} from '../../../../ui-components'
+import {LoadingBlock} from '../../../components/loadingBlock/LoadingBlock'
+import {AddonDatasetProvider} from '../../../studio/addonDataset/AddonDatasetProvider'
 import {type BundleDocument} from '../types'
 import {useBundleOperations} from '../useBundleOperations'
 import {useBundlesStore} from '../useBundlesStore'
 import {ReleaseForm} from './ReleaseForm'
 
 const WithAddonDatasetProvider = <P extends object>(Component: ComponentType<P>): React.FC<P> => {
-  // Function that returns the wrapped component
   const WrappedComponent: React.FC<P> = (props) => (
     <AddonDatasetProvider>
       <Component {...props} />
     </AddonDatasetProvider>
   )
-
-  // Setting a display name for the wrapped component
   WrappedComponent.displayName = `WithAddonDatasetProvider(${Component.displayName || Component.name || 'Component'})`
 
   return WrappedComponent
diff --git a/packages/sanity/src/core/store/bundles/useBundleOperations.ts b/packages/sanity/src/core/store/bundles/useBundleOperations.ts
index 2fe7163f311..7d37cc1d78b 100644
--- a/packages/sanity/src/core/store/bundles/useBundleOperations.ts
+++ b/packages/sanity/src/core/store/bundles/useBundleOperations.ts
@@ -1,7 +1,7 @@
 import {uuid} from '@sanity/uuid'
 import {useCallback} from 'react'
-import {useAddonDataset} from 'sanity'
 
+import {useAddonDataset} from '../../studio/addonDataset/useAddonDataset'
 import {type BundleDocument} from './types'
 
 // WIP - Raw implementation for initial testing purposes

From 8a0b6248d9eae341db09de56377914b6326effe7 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Mon, 1 Jul 2024 12:15:08 +0200
Subject: [PATCH 6/8] fix(corel): rename bundleSetAction parameter to payload

---
 packages/sanity/src/core/store/bundles/reducer.ts         | 4 ++--
 packages/sanity/src/core/store/bundles/useBundlesStore.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/core/store/bundles/reducer.ts b/packages/sanity/src/core/store/bundles/reducer.ts
index f808ff8d0bc..631664b82e6 100644
--- a/packages/sanity/src/core/store/bundles/reducer.ts
+++ b/packages/sanity/src/core/store/bundles/reducer.ts
@@ -16,7 +16,7 @@ interface BundleUpdatedAction {
 }
 
 interface BundlesSetAction {
-  bundles: BundleDocument[]
+  payload: BundleDocument[]
   type: 'BUNDLES_SET'
 }
 
@@ -51,7 +51,7 @@ export function bundlesReducer(
   switch (action.type) {
     case 'BUNDLES_SET': {
       // Create an object with the BUNDLE id as key
-      const bundlesById = createBundlesSet(action.bundles)
+      const bundlesById = createBundlesSet(action.payload)
 
       return {
         ...state,
diff --git a/packages/sanity/src/core/store/bundles/useBundlesStore.ts b/packages/sanity/src/core/store/bundles/useBundlesStore.ts
index 8a5790034e5..6053ddacb53 100644
--- a/packages/sanity/src/core/store/bundles/useBundlesStore.ts
+++ b/packages/sanity/src/core/store/bundles/useBundlesStore.ts
@@ -54,7 +54,7 @@ export function useBundlesStore(): BundlesStoreReturnType {
     return client.observable.fetch(QUERY).pipe(
       timeout(10000), // 10s timeout
       map((res) => {
-        dispatch({type: 'BUNDLES_SET', bundles: res})
+        dispatch({type: 'BUNDLES_SET', payload: res})
         didInitialFetch.current = true
         setLoading(false)
       }),

From 70d738fb6a90abffe46439e5624588a54a6559db Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Mon, 1 Jul 2024 12:25:48 +0200
Subject: [PATCH 7/8] fix(corel): use speakingurl to slugify the name

---
 .../src/core/store/bundles/__workshop__/ReleaseForm.tsx     | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/sanity/src/core/store/bundles/__workshop__/ReleaseForm.tsx b/packages/sanity/src/core/store/bundles/__workshop__/ReleaseForm.tsx
index ca29651923a..34f601d5880 100644
--- a/packages/sanity/src/core/store/bundles/__workshop__/ReleaseForm.tsx
+++ b/packages/sanity/src/core/store/bundles/__workshop__/ReleaseForm.tsx
@@ -11,15 +11,13 @@ import {
   TextArea,
   TextInput,
 } from '@sanity/ui'
+import speakingurl from 'speakingurl'
 
 import {Button} from '../../../../ui-components/button'
 import {type BundleDocument} from '../types'
 
 function toSlug(value: string): string {
-  return value
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
+  return speakingurl(value, {truncate: 200, symbols: true})
 }
 
 /**

From 2ef4b679ee1a63aab1f6dcce37bd42a648e9e130 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Mon, 1 Jul 2024 12:41:07 +0200
Subject: [PATCH 8/8] fix(corel): remove useEffect in favour of useObservable

---
 .../src/core/store/bundles/useBundlesStore.ts | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/sanity/src/core/store/bundles/useBundlesStore.ts b/packages/sanity/src/core/store/bundles/useBundlesStore.ts
index 6053ddacb53..dc1820638a9 100644
--- a/packages/sanity/src/core/store/bundles/useBundlesStore.ts
+++ b/packages/sanity/src/core/store/bundles/useBundlesStore.ts
@@ -1,5 +1,6 @@
 import {type ListenEvent, type ListenOptions} from '@sanity/client'
-import {useCallback, useEffect, useMemo, useReducer, useRef, useState} from 'react'
+import {useCallback, useMemo, useReducer, useRef, useState} from 'react'
+import {useObservable} from 'react-rx'
 import {catchError, concatMap, map, of, retry, timeout} from 'rxjs'
 
 import {useAddonDataset} from '../../studio/addonDataset/useAddonDataset'
@@ -71,6 +72,7 @@ export function useBundlesStore(): BundlesStoreReturnType {
       }),
     )
   }, [client])
+
   const handleListenerEvent = useCallback(
     (event: ListenEvent<Record<string, BundleDocument>>) => {
       // Fetch all bundles on initial connection
@@ -129,18 +131,13 @@ export function useBundlesStore(): BundlesStoreReturnType {
     return events$ // as Observable<ListenEvent<Record<string, BundleDocument>>>
   }, [client, handleListenerEvent])
 
-  useEffect(() => {
-    if (!client) return
-    const subscription = initialFetch$()
-      .pipe(concatMap(() => listener$))
-      .subscribe()
-
-    // eslint-disable-next-line consistent-return
-    return () => {
-      subscription.unsubscribe()
-    }
+  const observable = useMemo(() => {
+    if (!client) return of(null) // emits null and completes if no client
+    return initialFetch$().pipe(concatMap(() => listener$))
   }, [initialFetch$, listener$, client])
 
+  useObservable(observable)
+
   const bundlesAsArray = useMemo(() => Array.from(state.bundles.values()), [state.bundles])
 
   return {