sanity-plugin-media 4.3.6 → 5.0.0

package/src/components/DialogConfirm/index.tsx

@@ -1,90 +0,0 @@
-import {WarningOutlineIcon} from '@sanity/icons'
-import {Box, Button, Flex, Stack, Text} from '@sanity/ui'
-import {type ReactNode} from 'react'
-import {useDispatch} from 'react-redux'
-
-import {dialogActions} from '../../modules/dialog'
-import type {DialogConfirmProps} from '../../types'
-import Dialog from '../Dialog'
-
-type Props = {
-  children?: ReactNode
-  dialog: DialogConfirmProps
-}
-
-const DialogConfirm = (props: Props) => {
-  const {children, dialog} = props
-
-  // Redux
-  const dispatch = useDispatch()
-
-  // Callbacks
-  const handleClose = () => {
-    dispatch(dialogActions.remove({id: dialog?.id}))
-  }
-
-  const handleConfirm = () => {
-    // Close target dialog, if provided
-    if (dialog?.closeDialogId) {
-      dispatch(dialogActions.remove({id: dialog?.closeDialogId}))
-    }
-
-    if (dialog?.confirmCallbackAction) {
-      dispatch(dialog.confirmCallbackAction)
-    }
-
-    // Close self
-    handleClose()
-  }
-
-  const Footer = () => (
-    <Box padding={3}>
-      <Flex justify="space-between">
-        <Button fontSize={1} mode="bleed" onClick={handleClose} text="Cancel" />
-        <Button
-          fontSize={1}
-          onClick={handleConfirm}
-          text={dialog?.confirmText}
-          tone={dialog?.tone}
-        />
-      </Flex>
-    </Box>
-  )
-
-  const Header = () => (
-    <Flex align="center">
-      <Box paddingX={1}>
-        <WarningOutlineIcon />
-      </Box>
-      <Box marginLeft={2}>{dialog?.headerTitle}</Box>
-    </Flex>
-  )
-
-  return (
-    <Dialog
-      animate
-      // oxlint-disable-next-line react/react-compiler
-      footer={<Footer />}
-      // oxlint-disable-next-line react/react-compiler
-      header={<Header />}
-      id="confirm"
-      onClose={handleClose}
-      width={1}
-    >
-      <Box paddingX={4} paddingY={4}>
-        <Stack space={3}>
-          {dialog?.title && <Text size={1}>{dialog.title}</Text>}
-          {dialog?.description && (
-            <Text muted size={1}>
-              <em>{dialog.description}</em>
-            </Text>
-          )}
-        </Stack>
-      </Box>
-
-      {children}
-    </Dialog>
-  )
-}
-
-export default DialogConfirm

package/src/components/DialogSearchFacets/index.tsx

@@ -1,42 +0,0 @@
-import {Box} from '@sanity/ui'
-import {type ReactNode, useCallback} from 'react'
-import {useDispatch} from 'react-redux'
-
-import {dialogActions} from '../../modules/dialog'
-import type {DialogSearchFacetsProps} from '../../types'
-import Dialog from '../Dialog'
-import SearchFacets from '../SearchFacets'
-import SearchFacetsControl from '../SearchFacetsControl'
-
-type Props = {
-  children: ReactNode
-  dialog: DialogSearchFacetsProps
-}
-
-const DialogSearchFacets = (props: Props) => {
-  const {
-    children,
-    dialog: {id},
-  } = props
-
-  // Redux
-  const dispatch = useDispatch()
-
-  // Callbacks
-  const handleClose = useCallback(() => {
-    dispatch(dialogActions.clear())
-  }, [dispatch])
-
-  return (
-    <Dialog animate header="Filters" id={id} onClose={handleClose} width={1}>
-      <Box padding={3}>
-        <SearchFacets layout="stack" />
-        <SearchFacetsControl />
-      </Box>
-
-      {children}
-    </Dialog>
-  )
-}
-
-export default DialogSearchFacets

package/src/components/DialogTagCreate/DialogTagCreate.test.tsx

@@ -1,121 +0,0 @@
-import {screen, waitFor} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import {describe, expect, it, vi} from 'vitest'
-
-import {renderWithProviders} from '../../__tests__/fixtures/renderWithProviders'
-import {createTestRootState} from '../../__tests__/fixtures/rootState'
-import {getDialogRoot, inputByName, withinDialog} from '../../__tests__/fixtures/withinDialog'
-import {tagsActions} from '../../modules/tags'
-import DialogTagCreate from './index'
-
-describe('DialogTagCreate', () => {
-  it('dispatches tag create flow when form is valid', async () => {
-    const user = userEvent.setup()
-    const {store} = renderWithProviders(
-      <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
-        <span />
-      </DialogTagCreate>,
-    )
-
-    const dlg = withinDialog(/create tag/i, screen)
-    await user.type(inputByName(/create tag/i, screen, 'name'), 'my-tag')
-    await user.click(dlg.getByRole('button', {name: /save and close/i}))
-
-    expect(store.getState().tags.creating).toBe(true)
-  })
-
-  it('dispatches createRequest with a trimmed tag name', async () => {
-    const user = userEvent.setup()
-    const {store} = renderWithProviders(
-      <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
-        <span />
-      </DialogTagCreate>,
-    )
-    const dispatchSpy = vi.spyOn(store, 'dispatch')
-    const dlg = withinDialog(/create tag/i, screen)
-
-    await user.type(inputByName(/create tag/i, screen, 'name'), '  spaced  ')
-    await user.click(dlg.getByRole('button', {name: /save and close/i}))
-
-    await waitFor(() => {
-      let createAction
-      for (const call of dispatchSpy.mock.calls) {
-        const action = call[0]
-        if (tagsActions.createRequest.match(action)) {
-          createAction = action
-          break
-        }
-      }
-      expect(createAction).toBeDefined()
-      expect(createAction?.payload).toEqual({name: 'spaced'})
-    })
-  })
-
-  it('keeps Save disabled until the name is non-empty and valid', async () => {
-    const user = userEvent.setup()
-    renderWithProviders(
-      <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
-        <span />
-      </DialogTagCreate>,
-    )
-
-    expect(
-      withinDialog(/create tag/i, screen).getByRole('button', {name: /save and close/i}),
-    ).toBeDisabled()
-
-    const nameInput = inputByName(/create tag/i, screen, 'name')
-    await user.type(nameInput, 'a')
-    await user.tab()
-    await waitFor(() => {
-      expect(
-        withinDialog(/create tag/i, screen).getByRole('button', {name: /save and close/i}),
-      ).not.toBeDisabled()
-    })
-  })
-
-  it('clears the entire dialog stack when the dialog close control is used', async () => {
-    const user = userEvent.setup()
-    const base = createTestRootState({
-      dialog: {
-        items: [
-          {id: 'dlg-1', type: 'tagCreate'},
-          {id: 'tags', type: 'tags'},
-        ],
-      },
-    })
-
-    const {store} = renderWithProviders(
-      <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
-        <span />
-      </DialogTagCreate>,
-      {preloaded: base},
-    )
-
-    const dlg = withinDialog(/create tag/i, screen)
-    await user.click(dlg.getByRole('button', {name: /close dialog/i}))
-
-    expect(store.getState().dialog.items).toEqual([])
-  })
-
-  it('shows an error indicator beside the name when tag creation failed on the server', async () => {
-    const base = createTestRootState({
-      tags: {
-        ...createTestRootState().tags,
-        creatingError: {message: 'Tag already exists', statusCode: 409},
-      },
-    })
-
-    renderWithProviders(
-      <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
-        <span />
-      </DialogTagCreate>,
-      {preloaded: base},
-    )
-
-    await waitFor(() => {
-      expect(
-        getDialogRoot(/create tag/i, screen).querySelector('[data-sanity-icon="error-outline"]'),
-      ).toBeTruthy()
-    })
-  })
-})

package/src/components/DialogTagCreate/index.tsx

@@ -1,111 +0,0 @@
-import {Box, Flex} from '@sanity/ui'
-import {type ReactNode, useEffect} from 'react'
-import {type SubmitHandler, useForm} from 'react-hook-form'
-import {useDispatch} from 'react-redux'
-
-import {tagFormSchema} from '../../formSchema'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {dialogActions} from '../../modules/dialog'
-import {tagsActions} from '../../modules/tags'
-import type {DialogTagCreateProps, TagFormData} from '../../types'
-import sanitizeFormData from '../../utils/sanitizeFormData'
-import zodFormResolver from '../../utils/zodFormResolver'
-import Dialog from '../Dialog'
-import FormFieldInputText from '../FormFieldInputText'
-import FormSubmitButton from '../FormSubmitButton'
-
-type Props = {
-  children: ReactNode
-  dialog: DialogTagCreateProps
-}
-
-const DialogTagCreate = (props: Props) => {
-  const {
-    children,
-    dialog: {id},
-  } = props
-
-  const dispatch = useDispatch()
-
-  const creating = useTypedSelector((state) => state.tags.creating)
-  const creatingError = useTypedSelector((state) => state.tags.creatingError)
-
-  const {
-    // Read the formState before render to subscribe the form state through Proxy
-    formState: {errors, isDirty, isValid},
-    handleSubmit,
-    register,
-    setError,
-  } = useForm<TagFormData>({
-    defaultValues: {
-      name: '',
-    },
-    mode: 'onChange',
-    resolver: zodFormResolver<TagFormData>(tagFormSchema),
-  })
-
-  const formUpdating = creating
-
-  const handleClose = () => {
-    dispatch(dialogActions.clear())
-  }
-
-  // - submit react-hook-form
-  const onSubmit: SubmitHandler<TagFormData> = (formData) => {
-    const sanitizedFormData = sanitizeFormData(formData)
-
-    dispatch(tagsActions.createRequest({name: sanitizedFormData['name']}))
-  }
-
-  useEffect(() => {
-    if (creatingError) {
-      setError('name', {
-        message: creatingError?.message,
-      })
-    }
-  }, [creatingError, setError])
-
-  const Footer = () => (
-    <Box padding={3}>
-      <Flex justify="flex-end">
-        {/* Submit button */}
-        <FormSubmitButton
-          disabled={formUpdating || !isDirty || !isValid}
-          isValid={isValid}
-          onClick={handleSubmit(onSubmit)}
-        />
-      </Flex>
-    </Box>
-  )
-
-  return (
-    <Dialog
-      animate
-      // oxlint-disable-next-line react/react-compiler
-      footer={<Footer />}
-      header="Create Tag"
-      id={id}
-      onClose={handleClose}
-      width={1}
-    >
-      {/* Form fields */}
-      <Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
-        {/* Hidden button to enable enter key submissions */}
-        <button style={{display: 'none'}} tabIndex={-1} type="submit" />
-
-        {/* Title */}
-        <FormFieldInputText
-          {...register('name')}
-          disabled={formUpdating}
-          error={errors?.name?.message}
-          label="Name"
-          name="name"
-        />
-      </Box>
-
-      {children}
-    </Dialog>
-  )
-}
-
-export default DialogTagCreate

package/src/components/DialogTagEdit/DialogTagEdit.test.tsx

@@ -1,165 +0,0 @@
-import {fireEvent, screen, waitFor} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import {Subject} from 'rxjs'
-import {describe, expect, it, vi} from 'vitest'
-
-import {createMockSanityClient} from '../../__tests__/fixtures/mockSanityClient'
-import {renderWithProviders} from '../../__tests__/fixtures/renderWithProviders'
-import {createTestRootState} from '../../__tests__/fixtures/rootState'
-import {inputByName, withinDialog} from '../../__tests__/fixtures/withinDialog'
-import {tagsActions} from '../../modules/tags'
-import type {Tag} from '../../types'
-import DialogTagEdit from './index'
-
-const tag: Tag = {
-  _id: 't1',
-  _type: 'media.tag',
-  _createdAt: '',
-  _updatedAt: '',
-  _rev: 'r1',
-  name: {_type: 'slug', current: 'alpha'},
-}
-
-const tagsPreloaded = {
-  allIds: ['t1'],
-  byIds: {
-    t1: {_type: 'tag' as const, tag, picked: false, updating: false},
-  },
-  creating: false,
-  fetchCount: -1,
-  fetching: false,
-  panelVisible: true,
-}
-
-vi.mock('../../hooks/useVersionedClient', () => ({
-  default: () =>
-    createMockSanityClient({
-      listen: vi.fn(() => new Subject()),
-    }),
-}))
-
-describe('DialogTagEdit', () => {
-  it('dispatches updateRequest when name changes and form submits', async () => {
-    const user = userEvent.setup()
-    const {store} = renderWithProviders(
-      <DialogTagEdit dialog={{id: 'dlg-1', type: 'tagEdit', tagId: 't1'}}>
-        <span />
-      </DialogTagEdit>,
-      {
-        preloaded: {
-          tags: tagsPreloaded,
-        },
-      },
-    )
-
-    const dlg = withinDialog(/edit tag/i, screen)
-    const input = inputByName(/edit tag/i, screen, 'name')
-    await user.clear(input)
-    await user.type(input, 'beta')
-    await user.click(dlg.getByRole('button', {name: /save and close/i}))
-
-    expect(store.getState().tags.byIds['t1']!.updating).toBe(true)
-  })
-
-  it('dispatches updateRequest with slug-shaped form data', async () => {
-    const user = userEvent.setup()
-    const {store} = renderWithProviders(
-      <DialogTagEdit dialog={{id: 'dlg-1', type: 'tagEdit', tagId: 't1'}}>
-        <span />
-      </DialogTagEdit>,
-      {
-        preloaded: {
-          tags: tagsPreloaded,
-        },
-      },
-    )
-    const dispatchSpy = vi.spyOn(store, 'dispatch')
-    const dlg = withinDialog(/edit tag/i, screen)
-
-    const input = inputByName(/edit tag/i, screen, 'name')
-    await user.clear(input)
-    await user.type(input, 'gamma')
-    await user.click(dlg.getByRole('button', {name: /save and close/i}))
-
-    await waitFor(() => {
-      let updateAction
-      for (const call of dispatchSpy.mock.calls) {
-        const action = call[0]
-        if (tagsActions.updateRequest.match(action)) {
-          updateAction = action
-          break
-        }
-      }
-      expect(updateAction).toBeDefined()
-      expect(updateAction?.payload).toMatchObject({
-        closeDialogId: 't1',
-        formData: {
-          name: {_type: 'slug', current: 'gamma'},
-        },
-        tag,
-      })
-    })
-  })
-
-  it('does not enable Save until the name is edited', () => {
-    renderWithProviders(
-      <DialogTagEdit dialog={{id: 'dlg-1', type: 'tagEdit', tagId: 't1'}}>
-        <span />
-      </DialogTagEdit>,
-      {
-        preloaded: {
-          tags: tagsPreloaded,
-        },
-      },
-    )
-
-    const dlg = withinDialog(/edit tag/i, screen)
-    expect(dlg.getByRole('button', {name: /save and close/i})).toBeDisabled()
-  })
-
-  it('removes only this dialog when closed', async () => {
-    const user = userEvent.setup()
-    const base = createTestRootState({
-      dialog: {
-        items: [
-          {id: 'dlg-1', type: 'tagEdit', tagId: 't1'},
-          {id: 'tags', type: 'tags'},
-        ],
-      },
-      tags: tagsPreloaded,
-    })
-
-    const {store} = renderWithProviders(
-      <DialogTagEdit dialog={{id: 'dlg-1', type: 'tagEdit', tagId: 't1'}}>
-        <span />
-      </DialogTagEdit>,
-      {preloaded: base},
-    )
-
-    const dlg = withinDialog(/edit tag/i, screen)
-    await user.click(dlg.getByRole('button', {name: /close dialog/i}))
-
-    expect(store.getState().dialog.items).toEqual([{id: 'tags', type: 'tags'}])
-  })
-
-  it('opens the delete confirmation dialog when Delete is clicked', async () => {
-    const {store} = renderWithProviders(
-      <DialogTagEdit dialog={{id: 'dlg-1', type: 'tagEdit', tagId: 't1'}}>
-        <span />
-      </DialogTagEdit>,
-      {
-        preloaded: {
-          tags: tagsPreloaded,
-        },
-      },
-    )
-
-    const dlg = withinDialog(/edit tag/i, screen)
-    fireEvent.click(dlg.getByRole('button', {name: /^delete$/i}))
-
-    const confirm = store.getState().dialog.items.find((d) => d.type === 'confirm')
-    expect(confirm).toBeDefined()
-    expect(confirm?.title).toMatch(/permanently delete/i)
-    expect(confirm?.headerTitle).toBe('Confirm deletion')
-  })
-})