sanity-plugin-dashboard-widget-vercel 3.1.6 → 4.0.0

package/src/components/DeploymentTarget/index.tsx

@@ -1,51 +0,0 @@
-import {EditIcon} from '@sanity/icons'
-import {Box, Button, Flex, Text, Tooltip} from '@sanity/ui'
-import React, {FC} from 'react'
-
-import Deployments from '../Deployments'
-import {Sanity} from '../../types'
-
-type Props = {
-  item: Sanity.DeploymentTarget
-  onDialogEdit: (deploymentTarget: Sanity.DeploymentTarget) => void
-}
-
-const DeploymentTarget: FC<Props> = (props: Props) => {
-  const {item, onDialogEdit} = props
-
-  const deploymentTarget = {
-    deployHook: item.deployHook,
-    deployLimit: item.deployLimit,
-    name: item.name,
-    projectId: item.projectId,
-    teamId: item.teamId,
-    token: item.token,
-  } as Sanity.DeploymentTarget
-
-  return (
-    <Box style={{position: 'relative'}}>
-      {/* Header */}
-      <Flex align="center" justify="space-between" marginTop={2} paddingX={3}>
-        <Text size={2}>{item.name}</Text>
-
-        <Tooltip
-          content={
-            <Box padding={2}>
-              <Text muted size={1}>
-                Edit deployment target
-              </Text>
-            </Box>
-          }
-          placement="left"
-        >
-          <Button fontSize={1} icon={EditIcon} mode="bleed" onClick={() => onDialogEdit(item)} />
-        </Tooltip>
-      </Flex>
-
-      {/* Content */}
-      <Deployments deploymentTarget={deploymentTarget} />
-    </Box>
-  )
-}
-
-export default DeploymentTarget

package/src/components/DeploymentTargets/index.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import {Stack} from '@sanity/ui'
-
-import DeploymentTarget from '../DeploymentTarget'
-import {Sanity} from '../../types'
-
-type Props = {
-  items: Sanity.DeploymentTarget[]
-  onDialogEdit: (deploymentTarget: Sanity.DeploymentTarget) => void
-}
-
-const DeploymentTargets = (props: Props) => {
-  const {items, onDialogEdit} = props
-
-  return (
-    <Stack space={5}>
-      {items?.map((item) => (
-        <DeploymentTarget item={item} key={item._id} onDialogEdit={onDialogEdit} />
-      ))}
-    </Stack>
-  )
-}
-
-export default DeploymentTargets

package/src/components/Deployments/index.tsx

@@ -1,187 +0,0 @@
-import {Box, Text, useToast} from '@sanity/ui'
-import {useMachine} from '@xstate/react'
-import React, {useEffect, useRef} from 'react'
-import useDeepCompareEffect from 'use-deep-compare-effect'
-
-import {WIDGET_NAME} from '../../constants'
-import useDeployments from '../../hooks/useDeployments'
-import refreshMachine from '../../machines/refresh'
-import Deployment from '../Deployment'
-import DeployButton from '../DeployButton'
-import DeploymentPlaceholder from '../DeploymentPlaceholder'
-import StateDebug from '../StateDebug'
-import TableCell from '../TableCell'
-import {Sanity} from '../../types'
-import {useCardColor} from '../../utils/useCardColor'
-
-type Props = {
-  deploymentTarget: Sanity.DeploymentTarget
-}
-
-const Deployments = (props: Props) => {
-  const {deploymentTarget} = props
-
-  // Refs
-  const refTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  // XState
-  const [refreshState, refreshStateTransition] = useMachine(refreshMachine)
-
-  // Fetch deployments - disable hook / auto-refetching on error state
-  const {deployments, error, isFetching, isSuccess, refetch} = useDeployments(deploymentTarget, {
-    enabled: !refreshState.matches('error'),
-  })
-
-  const toast = useToast()
-  const isError = refreshState.matches('error')
-
-  const handleDeploySuccess = () => {
-    if (refTimeout.current) {
-      clearTimeout(refTimeout.current)
-    }
-    refTimeout.current = setTimeout(() => {
-      refetch({
-        cancelRefetch: true,
-        throwOnError: true,
-      })
-    }, 4000)
-  }
-
-  useEffect(() => {
-    return () => {
-      if (refTimeout.current) {
-        clearTimeout(refTimeout.current)
-      }
-    }
-  }, [])
-
-  useEffect(() => {
-    if (error) {
-      refreshStateTransition({type: 'ERROR'})
-    }
-
-    if (isFetching) {
-      refreshStateTransition({type: 'REFRESH'})
-    }
-
-    if (!isFetching && isSuccess) {
-      refreshStateTransition({type: 'REFRESHED'})
-    }
-  }, [error, isFetching, isSuccess, refreshStateTransition])
-
-  useDeepCompareEffect(() => {
-    if (!refreshState.matches('refreshing')) {
-      refreshStateTransition({type: 'REFRESH'})
-    }
-  }, [deploymentTarget])
-
-  useDeepCompareEffect(() => {
-    if (isError) {
-      toast.push({
-        closable: true,
-        description: `Unable to fetch deployments for ${deploymentTarget.name}`,
-        duration: 8000,
-        status: 'error',
-        title: WIDGET_NAME,
-      })
-    }
-  }, [deploymentTarget, isError])
-
-  const hasFetched = typeof deployments !== 'undefined'
-  const hasDeployments = deployments && deployments.length > 0
-
-  const {border} = useCardColor()
-  return (
-    <Box marginTop={3} style={{position: 'relative'}}>
-      {/* xstate debug */}
-      <StateDebug name="Refresh" state={refreshState} />
-
-      {!refreshState.matches('error') && (
-        <>
-          <Box
-            as="table"
-            style={{
-              borderBottom: `1px solid ${border}`,
-              borderCollapse: 'collapse',
-              display: 'table',
-              tableLayout: 'fixed',
-              width: '100%',
-            }}
-          >
-            <Box as="thead" style={{display: 'table-header-group'}}>
-              <tr>
-                {/* Deployment */}
-                <TableCell header>Deployment</TableCell>
-
-                {/* State */}
-                <TableCell header variant="state">
-                  State
-                </TableCell>
-
-                {/* Branch */}
-                <TableCell header variant="branch">
-                  Branch
-                </TableCell>
-
-                {/* Age */}
-                <TableCell header variant="age">
-                  Age
-                </TableCell>
-
-                {/* Creator */}
-                <TableCell header variant="age">
-                  Creator
-                </TableCell>
-              </tr>
-            </Box>
-
-            <Box as="tbody" style={{display: 'table-header-group'}}>
-              {/* Placeholders */}
-              {!deployments &&
-                new Array(deploymentTarget?.deployLimit)
-                  .fill(undefined)
-                  .map((_, index) => <DeploymentPlaceholder key={index} />)}
-              {/* Deployments */}
-              {hasDeployments &&
-                deployments?.map((deployment) => (
-                  <Deployment deployment={deployment} key={deployment.uid} />
-                ))}
-            </Box>
-          </Box>
-
-          {/* No results */}
-          {hasFetched && !hasDeployments && (
-            <Box padding={3} style={{width: '100%'}}>
-              <Text muted size={1}>
-                No deployments found. Don't forget to specify a valid team ID if your project
-                belongs to a team.
-              </Text>
-            </Box>
-          )}
-        </>
-      )}
-
-      {/* Error message */}
-      {refreshState.matches('error') && (
-        <Box padding={3}>
-          <Text muted size={1}>
-            Unable to fetch recent deployments. Please check your network and deployment settings.
-          </Text>
-        </Box>
-      )}
-
-      {/* Deploy button */}
-      {!refreshState.matches('error') && deploymentTarget.deployHook && (
-        <Box>
-          <DeployButton
-            deployHook={deploymentTarget.deployHook}
-            onDeploySuccess={handleDeploySuccess}
-            targetName={deploymentTarget.name}
-          />
-        </Box>
-      )}
-    </Box>
-  )
-}
-
-export default Deployments

package/src/components/DialogForm/index.tsx

@@ -1,220 +0,0 @@
-import {yupResolver} from '@hookform/resolvers/yup'
-import {Box, Button, Dialog, Flex, Stack, useToast} from '@sanity/ui'
-import {useActor} from '@xstate/react'
-import React, {FC, useEffect} from 'react'
-import {useForm} from 'react-hook-form'
-import * as yup from 'yup'
-
-import {Z_INDEX_DIALOG} from '../../constants'
-import {formMachine} from '../../machines/form'
-import sanitizeFormData from '../../utils/sanitizeFormData'
-import FormFieldInputText from '../FormFieldInputText'
-import {Sanity} from '../../types'
-import {useSanityClient} from '../../client'
-import {toPromise} from 'xstate'
-
-type Props = {
-  deploymentTarget?: Sanity.DeploymentTarget
-  onClose: () => void
-  onCreate?: (deploymentTarget: Sanity.DeploymentTarget) => void
-  onDelete?: (id: string) => void
-  onUpdate?: (deploymentTarget: Sanity.DeploymentTarget) => void
-}
-
-type FormData = yup.InferType<typeof formSchema>
-
-const formSchema = yup.object().shape({
-  deployHook: yup.string().url('Deploy hook must be a valid URL'),
-  deployLimit: yup
-    .number()
-    .positive()
-    .integer()
-    .min(1, 'Deploy limit must no less than 1')
-    .max(15, 'Deploy limit must no higher than 15')
-    .typeError('Deploy limit must be a number')
-    .required('Deploy limit must be a positive integer between 1 and 15'),
-  name: yup.string().required('Name cannot be empty'),
-  projectId: yup.string().required('Vercel Project ID cannot be empty'),
-  teamId: yup.string(),
-  token: yup.string().required('Vercel Account Token cannot be empty'),
-})
-
-const DialogForm: FC<Props> = (props: Props) => {
-  const {deploymentTarget, onClose, onCreate, onDelete, onUpdate} = props
-  const client = useSanityClient()
-  const toast = useToast()
-
-  const [formState, formStateTransition, formStateActorRef] = useActor(formMachine, {
-    input: {client},
-  })
-
-  const formUpdating = formState.hasTag('busy')
-
-  // react-hook-form v7
-  const {
-    formState: {errors, isDirty, isValid},
-    handleSubmit,
-    register,
-  } = useForm<FormData>({
-    // @ts-expect-error - fix typings later
-    defaultValues: {
-      deployHook: deploymentTarget?.deployHook || '',
-      deployLimit: deploymentTarget?.deployLimit || 5,
-      name: deploymentTarget?.name || '',
-      projectId: deploymentTarget?.projectId || '',
-      teamId: deploymentTarget?.teamId || '',
-      token: deploymentTarget?.token || '',
-    },
-    mode: 'onChange',
-    resolver: yupResolver(formSchema),
-  })
-
-  /**
-   * Handle errors and reaching the done state
-   */
-  useEffect(() => {
-    if (formState.matches('error')) {
-      toast.push({
-        status: 'error',
-        title: formState.context.message || 'An error occurred',
-      })
-    }
-    /**
-     * If the machine is done it means it reached updated, created, deleted or error state.
-     * We don't care which one, we just want to close the dialog
-     */
-    if (formState.status === 'done') {
-      onClose()
-    }
-  }, [formState, onClose, toast])
-
-  // Callbacks
-  // - submit react-hook-form
-  const onSubmit = async (formData: FormData) => {
-    const sanitizedFormData = sanitizeFormData(formData)
-    if (deploymentTarget) {
-      formStateTransition({type: 'UPDATE', id: deploymentTarget._id, formData: sanitizedFormData})
-    } else {
-      formStateTransition({type: 'CREATE', formData: sanitizedFormData})
-    }
-    await toPromise(formStateActorRef)
-    const snapshot = formStateActorRef.getSnapshot()
-    const {document} = snapshot.context
-    if (!document) return
-    if (snapshot.matches('created')) {
-      onCreate?.(document)
-    } else if (snapshot.matches('updated')) {
-      onUpdate?.(document)
-    }
-  }
-
-  const handleDelete = async () => {
-    const id = deploymentTarget!._id
-    formStateTransition({type: 'DELETE', id})
-    await toPromise(formStateActorRef)
-    if (formStateActorRef.getSnapshot().matches('deleted')) {
-      onDelete?.(id)
-    }
-  }
-
-  return (
-    <Dialog
-      footer={
-        <Box padding={3}>
-          <Flex justify={deploymentTarget ? 'space-between' : 'flex-end'}>
-            {/* Delete button */}
-            {deploymentTarget && (
-              <Button
-                loading={formState.matches('deleting')}
-                disabled={formUpdating}
-                fontSize={1}
-                mode="bleed"
-                onClick={handleDelete}
-                text="Delete"
-                tone="critical"
-              />
-            )}
-
-            {/* Submit button */}
-            <Button
-              loading={formState.matches('creating') || formState.matches('updating')}
-              disabled={!isDirty || !isValid}
-              fontSize={1}
-              onClick={handleSubmit(onSubmit)}
-              text={deploymentTarget ? 'Update and close' : 'Create'}
-              tone="primary"
-            />
-          </Flex>
-        </Box>
-      }
-      header={`${deploymentTarget ? 'Edit' : 'Create'} deployment target`}
-      id="create"
-      onClose={onClose}
-      width={1}
-      zOffset={Z_INDEX_DIALOG}
-    >
-      {/* We reverse direction to ensure that inline links dont autofocus before other form elements */}
-      <Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
-        {/* Hidden button to enable enter key submissions */}
-        <button style={{display: 'none'}} tabIndex={-1} type="submit" />
-
-        {/* Form fields */}
-        <Stack space={5}>
-          {/* Title */}
-          <FormFieldInputText
-            disabled={formUpdating}
-            description="Name displayed in this plugin (e.g. production, staging)"
-            error={errors?.name}
-            label="Name"
-            // @ts-expect-error - fix typings later
-            {...register('name')}
-          />
-
-          <FormFieldInputText
-            disabled={formUpdating}
-            error={errors?.token}
-            label="Vercel Account Token"
-            // @ts-expect-error - fix typings later
-            {...register('token')}
-          />
-
-          <FormFieldInputText
-            disabled={formUpdating}
-            error={errors?.projectId}
-            label="Vercel Project ID"
-            // @ts-expect-error - fix typings later
-            {...register('projectId')}
-          />
-
-          <FormFieldInputText
-            description="Required only if your project is owned by a team account"
-            disabled={formUpdating}
-            error={errors?.teamId}
-            label="Vercel Team ID (optional)"
-            // @ts-expect-error - fix typings later
-            {...register('teamId')}
-          />
-
-          <FormFieldInputText
-            description="Enter a valid deploy hook URL to enable manual deploys"
-            disabled={formUpdating}
-            error={errors?.deployHook}
-            label="Vercel Deploy Hook (optional)"
-            // @ts-expect-error - fix typings later
-            {...register('deployHook')}
-          />
-
-          <FormFieldInputText
-            disabled={formUpdating}
-            error={errors?.deployLimit}
-            label="Number of deploys to display"
-            // @ts-expect-error - fix typings later
-            {...register('deployLimit', {valueAsNumber: true})}
-          />
-        </Stack>
-      </Box>
-    </Dialog>
-  )
-}
-
-export default DialogForm

package/src/components/FormFieldInputLabel/index.tsx

@@ -1,65 +0,0 @@
-import {ErrorOutlineIcon} from '@sanity/icons'
-import {Box, Inline, Text, Tooltip} from '@sanity/ui'
-import React, {FC} from 'react'
-import {FieldError} from 'react-hook-form'
-import {styled} from 'styled-components'
-
-type Props = {
-  description?: string
-  error?: FieldError
-  label: string
-  name: string
-}
-
-const StyledErrorOutlineIcon = styled(ErrorOutlineIcon)(({theme}) => {
-  return {
-    color: theme.sanity.color.spot.red,
-  }
-})
-
-const FormFieldInputLabel: FC<Props> = (props: Props) => {
-  const {description, error, label, name} = props
-
-  return (
-    <Box marginBottom={3}>
-      {/* Label */}
-      <Inline space={2}>
-        <Text as="label" htmlFor={name} size={1} weight="semibold">
-          {label}
-        </Text>
-
-        {/* Error icon + tooltip */}
-        {error && (
-          <Text size={1}>
-            <Tooltip
-              content={
-                <Box padding={2}>
-                  <Text muted size={1}>
-                    <StyledErrorOutlineIcon style={{marginRight: '0.1em'}} />
-                    {error.message}
-                  </Text>
-                </Box>
-              }
-              fallbackPlacements={['top', 'left']}
-              placement="right"
-              portal
-            >
-              <StyledErrorOutlineIcon />
-            </Tooltip>
-          </Text>
-        )}
-      </Inline>
-
-      {/* Description */}
-      {description && (
-        <Box marginY={3}>
-          <Text htmlFor={name} muted size={1}>
-            {description}
-          </Text>
-        </Box>
-      )}
-    </Box>
-  )
-}
-
-export default FormFieldInputLabel

package/src/components/FormFieldInputText/index.tsx

@@ -1,43 +0,0 @@
-import {Box, TextInput} from '@sanity/ui'
-import React, {forwardRef} from 'react'
-import {FieldError} from 'react-hook-form'
-
-import FormFieldInputLabel from '../FormFieldInputLabel'
-
-type Props = {
-  description?: string
-  disabled?: boolean
-  error?: FieldError
-  label: string
-  name: string
-  placeholder?: string
-  value?: string
-  onChange?: React.ChangeEventHandler<HTMLInputElement>
-  onBlur?: React.FocusEventHandler<HTMLInputElement>
-}
-
-const FormFieldInputText = forwardRef<HTMLInputElement, Props>((props: Props, ref) => {
-  const {description, disabled, error, label, name, placeholder, value, onChange, onBlur} = props
-
-  return (
-    <Box>
-      {/* Label */}
-      <FormFieldInputLabel description={description} error={error} label={label} name={name} />
-      {/* Input */}
-      <TextInput
-        autoComplete="off"
-        autoFocus
-        defaultValue={value}
-        disabled={disabled}
-        id={name}
-        name={name}
-        placeholder={placeholder}
-        onChange={onChange}
-        onBlur={onBlur}
-        ref={ref}
-      />
-    </Box>
-  )
-})
-
-export default FormFieldInputText

package/src/components/PlaceholderAvatar/index.tsx

@@ -1,20 +0,0 @@
-import {Box} from '@sanity/ui'
-import React from 'react'
-import {useCardColor} from '../../utils/useCardColor'
-
-const PlaceholderAvatar = () => {
-  const {border} = useCardColor()
-  return (
-    <Box
-      style={{
-        backgroundColor: border,
-        borderRadius: '20px',
-        height: '20px',
-        userSelect: 'none',
-        width: '20px',
-      }}
-    />
-  )
-}
-
-export default PlaceholderAvatar

package/src/components/PlaceholderText/index.tsx

@@ -1,32 +0,0 @@
-import {Box, Stack, Text} from '@sanity/ui'
-import React from 'react'
-import {useCardColor} from '../../utils/useCardColor'
-
-type Props = {
-  rows: number
-}
-
-const PlaceholderText = (props: Props) => {
-  const {rows} = props
-  const {border} = useCardColor()
-  return (
-    <Box
-      style={{
-        backgroundColor: border,
-        borderRadius: '3px',
-        userSelect: 'none',
-        width: '100%',
-      }}
-    >
-      <Stack space={2}>
-        {new Array(rows).fill(undefined).map((_, index) => (
-          <Text key={index} size={1}>
-            &nbsp;
-          </Text>
-        ))}
-      </Stack>
-    </Box>
-  )
-}
-
-export default PlaceholderText

package/src/components/StateDebug/index.tsx

@@ -1,46 +0,0 @@
-import {Box, Card, Stack, Text} from '@sanity/ui'
-import React from 'react'
-
-import {DEBUG_MODE} from '../../constants'
-
-type Props = {
-  name: string
-  state: any // TODO: type correctly
-}
-
-const StateDebug = (props: Props) => {
-  const {name, state} = props
-
-  if (!DEBUG_MODE) {
-    return null
-  }
-
-  return (
-    <Card
-      scheme="dark"
-      style={{
-        backgroundColor: 'rgba(0, 0, 255, 0.9)',
-        borderRadius: '3px',
-        fontSize: 1,
-        fontWeight: 500,
-        lineHeight: 'body',
-        right: 0,
-        opacity: 0.75,
-        pointerEvents: 'none',
-        position: 'absolute',
-        textAlign: 'left',
-        top: 0,
-        zIndex: 9000,
-      }}
-    >
-      <Box padding={2}>
-        <Stack space={2}>
-          <Text size={0}>Name: {name}</Text>
-          <Text size={0}>state.value: {JSON.stringify(state.value)}</Text>
-        </Stack>
-      </Box>
-    </Card>
-  )
-}
-
-export default StateDebug