@sanity/document-internationalization 1.0.0 → 1.0.1

package/src/language-select/components/LanguageSelect/LanguageSelectList.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import styled from 'styled-components'
+import {Box, Grid} from '@sanity/ui'
+import {IExtendedLanguageObject} from '../../../types'
+import {UiMessages} from '../../../constants'
+import {baseToTop} from '../../../utils/baseToTop'
+import {LanguageSelectLabel} from './LanguageSelectLabel'
+import {LanguageSelectListItem} from './LanguageSelectListItem'
+
+type Props = {
+  draftLanguageObjects: IExtendedLanguageObject[]
+  publishedLanguageObjects: IExtendedLanguageObject[]
+  missingLanguageObjects: IExtendedLanguageObject[]
+}
+
+const Divider = styled(Box)`
+  border-bottom: 1px solid var(--card-shadow-outline-color);
+`
+
+const SelectorBox = styled(Box)`
+  minwidth: 250;
+`
+
+export const LanguageSelectList: React.FC<Props> = ({
+  draftLanguageObjects,
+  publishedLanguageObjects,
+  missingLanguageObjects,
+}) => {
+  const showDivider = React.useMemo(
+    () =>
+      Boolean(
+        !!(draftLanguageObjects.length || publishedLanguageObjects.length) &&
+          missingLanguageObjects.length
+      ),
+    [draftLanguageObjects, publishedLanguageObjects, missingLanguageObjects]
+  )
+
+  const existingLanguageObjects = React.useMemo(() => {
+    return [
+      ...draftLanguageObjects.map((lang) => ({
+        ...lang,
+        status: 'draft' as const,
+      })),
+      ...publishedLanguageObjects.map((lang) => ({
+        ...lang,
+        status: 'published' as const,
+      })),
+    ]
+      .sort(baseToTop)
+      .reverse()
+  }, [draftLanguageObjects, publishedLanguageObjects])
+
+  return (
+    <SelectorBox>
+      {!!existingLanguageObjects.length && (
+        <Box>
+          <LanguageSelectLabel>{UiMessages.languageSelect.listLabels.existing}</LanguageSelectLabel>
+          <Grid columns={1} gap={1}>
+            {existingLanguageObjects.map((language) => (
+              <LanguageSelectListItem
+                key={language.id}
+                status={language.status}
+                language={language}
+              />
+            ))}
+          </Grid>
+        </Box>
+      )}
+
+      {showDivider && <Divider marginY={1} />}
+
+      {!!missingLanguageObjects.length && (
+        <Box>
+          <LanguageSelectLabel>{UiMessages.languageSelect.listLabels.missing}</LanguageSelectLabel>
+          <Grid columns={1} gap={1}>
+            {missingLanguageObjects.map((language) => (
+              <LanguageSelectListItem key={language.id} status="missing" language={language} />
+            ))}
+          </Grid>
+        </Box>
+      )}
+    </SelectorBox>
+  )
+}

package/src/language-select/components/LanguageSelect/LanguageSelectListItem.tsx

@@ -0,0 +1,251 @@
+import React, {useContext} from 'react'
+import omit from 'just-omit'
+import {hues} from '@sanity/color'
+import {Text, Button, Badge, Flex, useToast, MenuItem, Box} from '@sanity/ui'
+import {AddIcon, SpinnerIcon} from '@sanity/icons'
+import styled, {css, keyframes} from 'styled-components'
+import {usePaneRouter} from 'sanity/desk'
+import {useEditState} from 'sanity'
+import {RouterContext} from 'sanity/router'
+import {useConfig} from '../../../hooks'
+import {SingleFlag} from '../SingleFlag'
+import type {IExtendedLanguageObject} from '../../../types'
+import {ReferenceBehavior, UiMessages} from '../../../constants'
+import {buildDocId, getBaseIdFromId, useSanityClient} from '../../../utils'
+import {SplitPaneIcon} from '../SplitPaneIcon'
+import {LanguageSelectContext} from './LanguageSelectContext'
+import {LanguageConfigContext} from './LanguageConfigContext'
+
+type Props = {
+  status: 'draft' | 'published' | 'missing'
+  language: IExtendedLanguageObject
+}
+
+const rotate = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`
+
+const ListItemSpinner = styled(SpinnerIcon)`
+  animation: ${rotate} 500ms linear infinite;
+`
+
+const ListItemSplitButton = styled(Button)`
+  display: none;
+  flex-shrink: 0;
+  margin-left: 4px;
+
+  & svg {
+    display: block;
+    color: ${hues.gray[700].hex};
+  }
+
+  ${({theme}) => css`
+    @media (min-width: ${theme.sanity.media[1] / 16}em) {
+      display: block;
+    }
+  `}
+`
+
+const MenuItemButtonComponent: React.ForwardRefRenderFunction<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+> = (props, ref) => <button type="button" ref={ref} {...props} />
+const MenuItemButton = React.forwardRef(MenuItemButtonComponent)
+
+const MenuItemSelectedButton = styled.button`
+  color: ${({theme}) => theme.sanity.color.button.default.primary.enabled.fg};
+  background-color: ${({theme}) => theme.sanity.color.button.default.primary.enabled.bg};
+
+  span {
+    color: ${({theme}) => theme.sanity.color.button.default.primary.enabled.fg};
+  }
+`
+
+export const LanguageSelectListItem: React.FC<Props> = ({status, language}) => {
+  const toast = useToast()
+  const pluginConfig = useContext(LanguageConfigContext)
+  const client = useSanityClient()
+  const {currentDocumentId, currentDocumentType, baseLanguage} =
+    React.useContext(LanguageSelectContext)
+
+  if (!currentDocumentId || !currentDocumentType) {
+    throw new Error('No document in view')
+  }
+
+  const config = useConfig(pluginConfig, currentDocumentType)
+  const routerContext = React.useContext(RouterContext)
+  const {routerPanesState, groupIndex, replaceCurrent} = usePaneRouter()
+  const [pending, setPending] = React.useState(false)
+
+  const baseId = React.useMemo(() => getBaseIdFromId(currentDocumentId), [currentDocumentId])
+  const flagCode = React.useMemo(() => language.id.split(/[_-]/).pop(), [language.id])
+
+  const translatedId = React.useMemo(
+    () => (language.id === baseLanguage?.id ? baseId : buildDocId(config, baseId, language.id)),
+    [config, baseId, language.id, baseLanguage]
+  )
+  const baseDocumentEditState = useEditState(baseId, currentDocumentType)
+  const baseTranslationBadgeLabel = React.useMemo(() => {
+    if (language.isBase) {
+      if (language.title.length >= 20) {
+        return UiMessages.base.split(' ')[0]
+      }
+      return UiMessages.base
+    }
+    return null
+  }, [language])
+
+  const openDocumentInCurrentPane = React.useCallback(
+    (id: string, type: string) => {
+      replaceCurrent({
+        id,
+        params: {type},
+      })
+    },
+    [replaceCurrent]
+  )
+
+  const openDocumentInSidePane = React.useCallback(
+    (id: string, type: string) => {
+      if (!routerContext) {
+        return
+      }
+      const panes = [...routerPanesState]
+      panes.splice(groupIndex + 1, 0, [
+        {
+          id: id,
+          params: {type},
+        },
+      ])
+
+      const href = routerContext.resolvePathFromState({panes})
+      routerContext.navigateUrl({path: href})
+    },
+    [routerContext, routerPanesState, groupIndex]
+  )
+
+  const handleCreateClick = React.useCallback(async () => {
+    try {
+      setPending(true)
+      const baseDocument = baseDocumentEditState.draft || baseDocumentEditState.published
+      const langFieldName = config.fieldNames.lang
+      const referencesFieldName = config.fieldNames.references
+      const baseFieldName = config.fieldNames.baseReference
+      const referenceBehavior = config.referenceBehavior
+      await client.createIfNotExists({
+        _id: `drafts.${translatedId}`,
+        _type: currentDocumentType,
+
+        // Remove other language references from new draft
+        ...(baseDocument ? omit(baseDocument, [`_id`, `_type`, referencesFieldName]) : {}),
+
+        // Set new language
+        [langFieldName]: language.id,
+
+        // Set base language reference
+        ...(baseDocument?._id && referenceBehavior !== ReferenceBehavior.DISABLED
+          ? {
+              [baseFieldName]: {
+                _type: 'reference',
+                _ref: baseDocument._id.replace(`drafts.`, ``),
+                _weak: true,
+                _strengthenOnPublish: {
+                  type: currentDocumentType,
+                  weak: referenceBehavior === 'weak',
+                  template: {
+                    id: currentDocumentType,
+                    params: undefined,
+                  },
+                },
+              },
+            }
+          : {}),
+      })
+      toast.push({
+        closable: true,
+        status: 'success',
+        title: UiMessages.translationCreatedToast.title(language.title),
+        description: baseLanguage
+          ? UiMessages.translationCreatedToast.description(baseLanguage.title)
+          : undefined,
+      })
+      openDocumentInCurrentPane(translatedId, currentDocumentType)
+    } catch (err) {
+      toast.push({
+        closable: true,
+        status: 'error',
+        title: (err as Error).toString(),
+      })
+    } finally {
+      setPending(false)
+    }
+  }, [
+    config,
+    baseDocumentEditState,
+    translatedId,
+    currentDocumentType,
+    language.id,
+    language.title,
+    toast,
+    baseLanguage,
+    openDocumentInCurrentPane,
+    client,
+  ])
+
+  const handleOpenClick = React.useCallback(() => {
+    openDocumentInCurrentPane(translatedId, currentDocumentType)
+  }, [openDocumentInCurrentPane, translatedId, currentDocumentType])
+
+  const handleOpenInSidePaneClick = React.useCallback(() => {
+    openDocumentInSidePane(translatedId, currentDocumentType)
+  }, [openDocumentInSidePane, translatedId, currentDocumentType])
+
+  if (status === 'missing') {
+    return (
+      <MenuItem
+        as={MenuItemButton}
+        data-as="button"
+        disabled={pending}
+        icon={pending ? ListItemSpinner : AddIcon}
+        text={language.title}
+        onClick={handleCreateClick}
+      />
+    )
+  }
+
+  return (
+    <Flex>
+      <MenuItem
+        as={language.isCurrentLanguage ? MenuItemSelectedButton : MenuItemButton}
+        data-as="button"
+        data-selected={language.isCurrentLanguage}
+        selected={language.isCurrentLanguage}
+        onClick={handleOpenClick}
+        paddingY={1}
+        paddingX={2}
+      >
+        <Flex align="center" gap={2}>
+          <SingleFlag code={flagCode} langCulture={language.id} />
+          <Box flex={1}>
+            <Text>{language.title}</Text>
+          </Box>
+          {baseTranslationBadgeLabel ? (
+            <Badge fontSize={0}>{baseTranslationBadgeLabel}</Badge>
+          ) : null}
+        </Flex>
+      </MenuItem>
+      {!language.isCurrentLanguage && (
+        <ListItemSplitButton
+          type="button"
+          tone="default"
+          mode="bleed"
+          padding={2}
+          onClick={handleOpenInSidePaneClick}
+        >
+          <SplitPaneIcon width={19} height={19} />
+        </ListItemSplitButton>
+      )}
+    </Flex>
+  )
+}

package/src/language-select/components/LanguageSelect/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import {InputProps, SanityDocument} from 'sanity'
+import {Flex} from '@sanity/ui'
+import {Ti18nConfig} from '../../../types'
+import {LanguageSelect} from './LanguageSelect'
+import {LanguageConfigContext} from './LanguageConfigContext'
+
+export type LanguageSelectProps = InputProps & {
+  config: Ti18nConfig
+}
+
+export function LanguageSelectWrapped(props: LanguageSelectProps) {
+  const {config, ...inputProps} = props
+  const doc = props.value as SanityDocument
+  return (
+    <LanguageConfigContext.Provider value={config}>
+      {doc._id && (
+        <Flex flex={1} justify="flex-end">
+          <LanguageSelect schemaType={props.schemaType} document={doc} />
+        </Flex>
+      )}
+      {props.renderDefault(inputProps)}
+    </LanguageConfigContext.Provider>
+  )
+}

package/src/language-select/components/SingleFlag/SingleFlag.tsx

@@ -0,0 +1,44 @@
+import React, {useContext, useMemo} from 'react'
+import twemoji from 'twemoji'
+import parse from 'html-react-parser'
+import {Box} from '@sanity/ui'
+import styled from 'styled-components'
+import {getFlag} from '../../../utils/getFlag'
+import {LanguageConfigContext} from '../LanguageSelect/LanguageConfigContext'
+
+type Props = {
+  code?: string
+  langCulture?: string
+}
+
+const EmojiBox = styled(Box)`
+  min-width: 24px;
+  transform: translateY(1px);
+`
+
+export const SingleFlag: React.FunctionComponent<Props> = ({code, langCulture}) => {
+  const flagEmoji = useMemo(() => code && getFlag(code), [code])
+  const flagHtml = twemoji.parse(flagEmoji ?? `🇺🇳`, {folder: 'svg', ext: '.svg'})
+  const flagReact = parse(flagHtml)
+
+  const {customFlagComponents} = useContext(LanguageConfigContext)
+  const CustomFlagComponent = useMemo(() => {
+    if (langCulture && customFlagComponents) {
+      const exportedName = langCulture.replace(/[^a-zA-Z0-9_]/g, '_')
+      if (exportedName in customFlagComponents) {
+        return customFlagComponents[exportedName]
+      }
+    }
+    return null
+  }, [langCulture, customFlagComponents])
+
+  return (
+    <Box aria-label={code}>
+      {CustomFlagComponent && code ? (
+        <CustomFlagComponent code={code} />
+      ) : (
+        <EmojiBox>{flagReact}</EmojiBox>
+      )}
+    </Box>
+  )
+}

package/src/language-select/components/SingleFlag/allEmojiFlagCodes.ts

@@ -0,0 +1,251 @@
+export const allEmojiFlagCodes = [
+  'AD',
+  'AE',
+  'AF',
+  'AG',
+  'AI',
+  'AL',
+  'AM',
+  'AO',
+  'AQ',
+  'AR',
+  'AS',
+  'AT',
+  'AU',
+  'AW',
+  'AX',
+  'AZ',
+  'BA',
+  'BB',
+  'BD',
+  'BE',
+  'BF',
+  'BG',
+  'BH',
+  'BI',
+  'BJ',
+  'BL',
+  'BM',
+  'BN',
+  'BO',
+  'BQ',
+  'BR',
+  'BS',
+  'BT',
+  'BV',
+  'BW',
+  'BY',
+  'BZ',
+  'CA',
+  'CC',
+  'CD',
+  'CF',
+  'CG',
+  'CH',
+  'CI',
+  'CK',
+  'CL',
+  'CM',
+  'CN',
+  'CO',
+  'CR',
+  'CU',
+  'CV',
+  'CW',
+  'CX',
+  'CY',
+  'CZ',
+  'DE',
+  'DJ',
+  'DK',
+  'DM',
+  'DO',
+  'DZ',
+  'EC',
+  'EE',
+  'EG',
+  'EH',
+  'ER',
+  'ES',
+  'ET',
+  'FI',
+  'FJ',
+  'FK',
+  'FM',
+  'FO',
+  'FR',
+  'GA',
+  'GB',
+  'GD',
+  'GE',
+  'GF',
+  'GG',
+  'GH',
+  'GI',
+  'GL',
+  'GM',
+  'GN',
+  'GP',
+  'GQ',
+  'GR',
+  'GS',
+  'GT',
+  'GU',
+  'GW',
+  'GY',
+  'HK',
+  'HM',
+  'HN',
+  'HR',
+  'HT',
+  'HU',
+  'ID',
+  'IE',
+  'IL',
+  'IM',
+  'IN',
+  'IO',
+  'IQ',
+  'IR',
+  'IS',
+  'IT',
+  'JE',
+  'JM',
+  'JO',
+  'JP',
+  'KE',
+  'KG',
+  'KH',
+  'KI',
+  'KM',
+  'KN',
+  'KP',
+  'KR',
+  'KW',
+  'KY',
+  'KZ',
+  'LA',
+  'LB',
+  'LC',
+  'LI',
+  'LK',
+  'LR',
+  'LS',
+  'LT',
+  'LU',
+  'LV',
+  'LY',
+  'MA',
+  'MC',
+  'MD',
+  'ME',
+  'MF',
+  'MG',
+  'MH',
+  'MK',
+  'ML',
+  'MM',
+  'MN',
+  'MO',
+  'MP',
+  'MQ',
+  'MR',
+  'MS',
+  'MT',
+  'MU',
+  'MV',
+  'MW',
+  'MX',
+  'MY',
+  'MZ',
+  'NA',
+  'NC',
+  'NE',
+  'NF',
+  'NG',
+  'NI',
+  'NL',
+  'NO',
+  'NP',
+  'NR',
+  'NU',
+  'NZ',
+  'OM',
+  'PA',
+  'PE',
+  'PF',
+  'PG',
+  'PH',
+  'PK',
+  'PL',
+  'PM',
+  'PN',
+  'PR',
+  'PS',
+  'PT',
+  'PW',
+  'PY',
+  'QA',
+  'RE',
+  'RO',
+  'RS',
+  'RU',
+  'RW',
+  'SA',
+  'SB',
+  'SC',
+  'SD',
+  'SE',
+  'SG',
+  'SH',
+  'SI',
+  'SJ',
+  'SK',
+  'SL',
+  'SM',
+  'SN',
+  'SO',
+  'SR',
+  'SS',
+  'ST',
+  'SV',
+  'SX',
+  'SY',
+  'SZ',
+  'TC',
+  'TD',
+  'TF',
+  'TG',
+  'TH',
+  'TJ',
+  'TK',
+  'TL',
+  'TM',
+  'TN',
+  'TO',
+  'TR',
+  'TT',
+  'TV',
+  'TW',
+  'TZ',
+  'UA',
+  'UG',
+  'UM',
+  'US',
+  'UY',
+  'UZ',
+  'VA',
+  'VC',
+  'VE',
+  'VG',
+  'VI',
+  'VN',
+  'VU',
+  'WF',
+  'WS',
+  'YE',
+  'YT',
+  'ZA',
+  'ZM',
+  'ZW',
+]

package/src/language-select/components/SingleFlag/index.ts

@@ -0,0 +1 @@
+export * from './SingleFlag'

package/src/language-select/components/SplitPaneIcon/SplitPaneIcon.tsx

@@ -0,0 +1,25 @@
+import React, {forwardRef} from 'react'
+
+export const SplitPaneIcon = forwardRef(function UndoIcon(
+  props: React.SVGProps<SVGSVGElement>,
+  ref: React.Ref<SVGSVGElement>
+) {
+  return (
+    <svg
+      data-sanity-icon="splitPane"
+      width="1em"
+      height="1em"
+      viewBox="0 0 25 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M10.5 5.5V19.5M13 12.5H15.5M18 12.5H15.5M15.5 12.5V15M15.5 12.5V10M4.5 5.5H20.5V19.5H4.5V5.5Z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+      />
+    </svg>
+  )
+})

package/src/language-select/components/SplitPaneIcon/index.ts

@@ -0,0 +1 @@
+export * from './SplitPaneIcon'

package/src/language-select/components/index.ts

@@ -0,0 +1,2 @@
+export * from './LanguageSelect'
+export * from './SingleFlag'

package/src/language-select/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useLanguages'