@sanity/language-filter 2.31.2-performance-opts.7 → 3.0.0-v3-studio.1

package/sanity.json

@@ -1,16 +1,8 @@
 {
-  "paths": {
-    "source": "./src",
-    "compiled": "./lib"
-  },
   "parts": [
     {
-      "implements": "part:@sanity/desk-tool/filter-fields-fn",
-      "path": "filter-fields"
-    },
-    {
-      "implements": "part:@sanity/desk-tool/language-select-component",
-      "path": "SelectLanguageProvider"
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
     }
   ]
 }

package/src/LanguageFilterContext.tsx

@@ -0,0 +1,30 @@
+import React, {createContext, PropsWithChildren, useContext, useMemo} from 'react'
+import {LanguageFilterConfig} from './types'
+
+export interface LanguageFilterContextValue {
+  // eslint-disable-next-line react/require-default-props
+  options: LanguageFilterConfig
+  // eslint-disable-next-line react/require-default-props
+  enabled: boolean
+}
+
+const LanguageFilterContext = createContext<LanguageFilterContextValue | undefined>(undefined)
+
+export function LanguageFilterProvider({
+  options,
+  enabled,
+  children,
+}: PropsWithChildren<
+  Omit<LanguageFilterContextValue, 'selectedLanguageIds' | 'setSelectedLanguageIds'>
+>) {
+  const value = useMemo(() => ({options, enabled}), [options, enabled])
+  return <LanguageFilterContext.Provider value={value}>{children}</LanguageFilterContext.Provider>
+}
+
+export function useLanguageFilterContext() {
+  const value = useContext(LanguageFilterContext)
+  if (!value) {
+    throw new Error('LanguageFilterContext is missing')
+  }
+  return value
+}

package/src/LanguageFilterMenuButton.tsx

@@ -0,0 +1,147 @@
+import {Box, Button, Card, Checkbox, Flex, Popover, Stack, Text, useClickOutside} from '@sanity/ui'
+import React, {FormEvent, useCallback, useState} from 'react'
+import {usePaneLanguages} from './usePaneLanguages'
+import {LanguageFilterConfig} from './types'
+
+export interface LanguageFilterMenuButtonProps {
+  options: LanguageFilterConfig
+  onSelectedIdsChange: (ids: string[]) => void
+}
+
+export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
+  const {options, onSelectedIdsChange} = props
+
+  const defaultLanguages = options.supportedLanguages.filter((l) =>
+    options.defaultLanguages?.includes(l.id)
+  )
+
+  const languageOptions = options.supportedLanguages.filter(
+    (l) => !options.defaultLanguages?.includes(l.id)
+  )
+  const [open, setOpen] = useState(false)
+  const {activeLanguages, allSelected, selectAll, selectNone, toggleLanguage} = usePaneLanguages({
+    options,
+    onSelectedIdsChange,
+  })
+  const [button, setButton] = useState<HTMLElement | null>(null)
+  const [popover, setPopover] = useState<HTMLElement | null>(null)
+
+  const handleToggleAll = useCallback(
+    (event: FormEvent<HTMLInputElement>) => {
+      const checked = event.currentTarget.checked
+
+      if (checked) {
+        selectAll()
+      } else {
+        selectNone()
+      }
+    },
+    [selectAll, selectNone]
+  )
+
+  const handleClick = useCallback(() => setOpen((o) => !o), [])
+
+  const handleClickOutside = useCallback(() => setOpen(false), [])
+
+  useClickOutside(handleClickOutside, [button, popover])
+
+  const content = (
+    <Box overflow="auto" padding={1}>
+      {defaultLanguages.length > 0 && (
+        <Card radius={2}>
+          <Stack padding={2} space={3}>
+            <Box paddingBottom={2}>
+              <Text size={1} weight="semibold">
+                Default language{defaultLanguages.length > 1 && <>s</>}
+              </Text>
+            </Box>
+
+            {defaultLanguages.map((l) => (
+              <Text key={l.id}>{l.title}</Text>
+            ))}
+          </Stack>
+        </Card>
+      )}
+
+      <Stack marginTop={3} padding={2} space={2}>
+        <Box paddingBottom={2}>
+          <Text size={1} weight="semibold">
+            Show translations
+          </Text>
+        </Box>
+
+        <Card as="label">
+          <Flex align="center" gap={2}>
+            <Checkbox checked={allSelected} name="_allSelected" onChange={handleToggleAll} />
+            <Box flex={1}>
+              <Text muted={!allSelected} weight="semibold">
+                All translations
+              </Text>
+            </Box>
+          </Flex>
+        </Card>
+
+        {languageOptions.map((lang) => (
+          <LanguageFilterOption
+            id={lang.id}
+            key={lang.id}
+            onToggle={toggleLanguage}
+            selected={activeLanguages.includes(lang.id)}
+            title={lang.title}
+          />
+        ))}
+      </Stack>
+    </Box>
+  )
+
+  const langCount = options.supportedLanguages.length
+  return (
+    <Popover content={content} open={open} portal ref={setPopover}>
+      <Button
+        text={
+          <Flex gap={1}>
+            <Box>Filter languages:</Box>
+            <Flex gap={1} justify="space-around">
+              <Flex
+                style={{width: `${Math.floor(Math.log10(langCount) + 1)}ch`}}
+                justify="flex-end"
+              >
+                {activeLanguages.length}
+              </Flex>
+              <Box>/</Box>
+              <Box>{langCount}</Box>
+            </Flex>
+          </Flex>
+        }
+        mode="bleed"
+        onClick={handleClick}
+        ref={setButton}
+        selected={open}
+      />
+    </Popover>
+  )
+}
+
+function LanguageFilterOption(props: {
+  id: string
+  onToggle: (id: string) => void
+  selected: boolean
+  title: string
+}) {
+  const {id, onToggle, selected, title} = props
+
+  const handleChange = useCallback(() => {
+    onToggle(id)
+  }, [id, onToggle])
+
+  return (
+    <Card as="label">
+      <Flex align="center" gap={2}>
+        <Checkbox checked={selected} name={`language-${id}`} onChange={handleChange} />
+        <Box flex={1}>
+          <Text muted={!selected}>{title}</Text>
+        </Box>
+      </Flex>
+    </Card>
+  )
+}

package/src/LanguageFilterObjectInput.tsx

@@ -0,0 +1,72 @@
+import React, {useEffect, useMemo} from 'react'
+import {ObjectInputProps, ObjectMember, RenderInputCallback} from 'sanity'
+import {LanguageFilterConfig} from './types'
+import {defaultFilterField} from './filterField'
+import {useLanguageFilterContext} from './LanguageFilterContext'
+import {useSelectedLanguageIds} from './useSelectedLanguageIds'
+
+export type LanguageFilterObjectInputProps = {
+  options: LanguageFilterConfig
+  next: RenderInputCallback
+  /**
+   * We need a way to communicate state changes between the pane menu and input components.
+   * LanguageFilter button lives outside the input-render tree, so Context is out.
+   * This is a workaround for that.
+   */
+  subscribeSelectedIds: (callback: (ids: string[]) => void) => () => void
+} & ObjectInputProps
+
+export function LanguageFilterObjectInput(
+  props: ObjectInputProps & {
+    next: RenderInputCallback
+    subscribeSelectedIds: (callback: (ids: string[]) => void) => () => void
+  }
+) {
+  const {options, enabled} = useLanguageFilterContext()
+  const {next, subscribeSelectedIds, ...restProps} = props
+  if (!enabled || !options) {
+    return <>{next(restProps)}</>
+  }
+  return (
+    <FilteredObjectInput
+      {...restProps}
+      next={next}
+      options={options}
+      subscribeSelectedIds={subscribeSelectedIds}
+    />
+  )
+}
+
+function FilteredObjectInput(props: LanguageFilterObjectInputProps) {
+  const {
+    members: membersProp,
+    options,
+    schemaType,
+    next,
+    subscribeSelectedIds,
+    ...restProps
+  } = props
+  const [selectedIds, setSelectedIds] = useSelectedLanguageIds(options)
+
+  useEffect(() => {
+    const unsubscribe = subscribeSelectedIds(setSelectedIds)
+    return () => unsubscribe()
+  }, [subscribeSelectedIds, setSelectedIds])
+
+  const activeLanguages = useMemo(
+    () => [...(options.defaultLanguages ?? []), ...selectedIds],
+    [options.defaultLanguages, selectedIds]
+  )
+
+  const filterField = options.filterField ?? defaultFilterField
+
+  const members: ObjectMember[] = useMemo(() => {
+    return membersProp.filter(
+      (member) =>
+        (member.kind === 'field' && filterField(schemaType, member, activeLanguages)) ||
+        (member.kind === 'fieldSet' && filterField(schemaType, member.fieldSet, activeLanguages))
+    )
+  }, [schemaType, membersProp, filterField, activeLanguages])
+
+  return <>{next({...restProps, members, schemaType})}</>
+}

package/src/filterField.test.ts

@@ -0,0 +1,91 @@
+import {defaultFilterField, isLanguageFilterEnabled} from './filterField'
+import {FieldMember, ObjectSchemaType} from 'sanity'
+
+describe('filterField', () => {
+  describe('isLanguageFilterEnabled', () => {
+    const docType: ObjectSchemaType = {
+      name: 'some-doc',
+      jsonType: 'object',
+      fields: [],
+      type: {
+        name: 'document',
+        jsonType: 'object',
+        fields: [],
+      },
+    }
+    it('should be enabled when documentTypes is missing', () => {
+      const enabled = isLanguageFilterEnabled(docType, {supportedLanguages: []})
+      expect(enabled).toBeTruthy()
+    })
+
+    it('should be disabled when documentTypes is missing and options.languageFilter: false', () => {
+      const enabled = isLanguageFilterEnabled(
+        {...docType, options: {languageFilter: false}},
+        {supportedLanguages: []}
+      )
+      expect(enabled).toBeFalsy()
+    })
+
+    it('should be enabled when documentTypes is contains doc-type name', () => {
+      const enabled = isLanguageFilterEnabled(
+        {...docType, options: {languageFilter: false}},
+        {supportedLanguages: [], documentTypes: [docType.name]}
+      )
+      expect(enabled).toBeTruthy()
+    })
+
+    it('should be enabled when documentTypes does not contain doc-type name, but options.languageFilter: true', () => {
+      const enabled = isLanguageFilterEnabled(
+        {...docType, options: {languageFilter: true}},
+        {supportedLanguages: [], documentTypes: []}
+      )
+      expect(enabled).toBeTruthy()
+    })
+  })
+
+  describe('defaultFilterField', () => {
+    const localePrefixedObject: ObjectSchemaType = {
+      name: 'locale_parent',
+      jsonType: 'object',
+      fields: [],
+    }
+    const member: FieldMember = {
+      name: 'nb',
+      key: 'nb',
+      collapsed: undefined,
+      collapsible: undefined,
+      kind: 'field',
+      open: true,
+      index: 0,
+      field: {
+        schemaType: {name: 'string', jsonType: 'string'},
+        level: 1,
+        id: 'nb',
+        path: [],
+        validation: [],
+        presence: [],
+        changed: false,
+        value: undefined,
+      },
+    }
+
+    it('should filter -> true for nb field inside local-prefixed object', () => {
+      const result = defaultFilterField(localePrefixedObject, member, ['nb'])
+      expect(result).toBeTruthy()
+    })
+
+    it('should filter -> false for unselected field inside local-prefixed object', () => {
+      const result = defaultFilterField(localePrefixedObject, member, ['other'])
+      expect(result).toBeFalsy()
+    })
+
+    it('should filter -> true for nb field inside non-prefixed object', () => {
+      const result = defaultFilterField(
+        {...localePrefixedObject, name: 'not-start-with-locale-field'},
+        member,
+        ['nb']
+      )
+      expect(result).toBeTruthy()
+    })
+  })
+})

package/src/filterField.ts

@@ -0,0 +1,34 @@
+import type {SchemaType} from 'sanity'
+import {FilterFieldFunction, LanguageFilterConfig, LanguageFilterSchema} from './types'
+
+export const defaultFilterField: FilterFieldFunction = (
+  enclosingType,
+  field,
+  selectedLanguageIds
+) => !enclosingType.name.startsWith('locale') || selectedLanguageIds.includes(field.name)
+
+export function isLanguageFilterEnabled(
+  schemaType: SchemaType | undefined,
+  options: LanguageFilterConfig
+): boolean {
+  const schemaFilter =
+    isDocument(schemaType) && (schemaType as LanguageFilterSchema)?.options?.languageFilter
+  const defaultEnabled = !options.documentTypes
+
+  return !!(
+    (defaultEnabled && schemaFilter !== false) ||
+    (!defaultEnabled && schemaFilter) ||
+    (schemaType && options.documentTypes?.includes(schemaType.name))
+  )
+}
+
+function isDocument(schemaType?: SchemaType) {
+  return schemaType?.jsonType === 'object' && getRootType(schemaType).name === 'document'
+}
+
+function getRootType(schema: SchemaType): SchemaType {
+  if (schema.type) {
+    return getRootType(schema.type)
+  }
+  return schema
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Plugin function
+ */
+export {languageFilter} from './plugin'
+
+export {defaultFilterField, isLanguageFilterEnabled} from './filterField'
+
+export type {
+  LanguageFilterConfig,
+  LanguageFilterSchema,
+  LanguageFilterOptions,
+  FilterFieldFunction,
+  Language,
+} from './types'

package/src/languageSubscription.ts

@@ -0,0 +1,32 @@
+export type LanguageSubscription = (ids: string[]) => void
+export type Unsubscribe = () => void
+export type LanguageSubscribe = (subscription: LanguageSubscription) => Unsubscribe
+
+export interface SelectedLanguageIdsBus {
+  onSelectedIdsChange: (ids: string[]) => void
+  subscribeSelectedIds: LanguageSubscribe
+}
+
+/**
+ * We need a way to communicate state changes between the pane menu and input components.
+ * LanguageFilter button lives outside the input-render tree, so Context is out.
+ * This is a workaround for that.
+ */
+export function createSelectedLanguageIdsBus(): SelectedLanguageIdsBus {
+  const subs: LanguageSubscription[] = []
+
+  const onSelectedIdsChange = (ids: string[]) => {
+    subs.forEach((s) => s(ids))
+  }
+  const subscribeSelectedIds = (subscription: LanguageSubscription) => {
+    subs.push(subscription)
+    return () => {
+      subs.splice(subs.indexOf(subscription), 1)
+    }
+  }
+
+  return {
+    onSelectedIdsChange,
+    subscribeSelectedIds,
+  }
+}

package/src/plugin.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import {_DocumentLanguageFilterComponent, createPlugin, ObjectInputProps} from 'sanity'
+import {LanguageFilterObjectInput} from './LanguageFilterObjectInput'
+import {LanguageFilterMenuButton} from './LanguageFilterMenuButton'
+import {LanguageFilterConfig} from './types'
+import {isLanguageFilterEnabled} from './filterField'
+import {LanguageFilterProvider} from './LanguageFilterContext'
+import {createSelectedLanguageIdsBus} from './languageSubscription'
+
+/**
+ * ## Usage in sanity.config.ts (or .js)
+ *
+ * ```
+ * import {createConfig} from 'sanity'
+ * import {languageFilter} from '@sanity/language-filter'
+ *
+ * export const createConfig({
+ *     /...
+ *     plugins: [
+ *         languageFilter({
+ *             supportedLanguages: [
+ *               {id: 'nb', title: 'Norwegian (Bokmål)'},
+ *               {id: 'nn', title: 'Norwegian (Nynorsk)'},
+ *               {id: 'en', title: 'English'},
+ *               {id: 'es', title: 'Spanish'},
+ *               {id: 'arb', title: 'Arabic'},
+ *               {id: 'pt', title: 'Portuguese'},
+ *               //...
+ *             ],
+ *             // Select Norwegian (Bokmål) by default
+ *             defaultLanguages: ['nb'],
+ *             // Only show language filter for document type `page` (schemaType.name)
+ *             // Can also enable via document-options: options.languageFilter: true
+ *             documentTypes: ['page'],
+ *             // default filter function shown
+ *             filterField: (enclosingType, field, selectedLanguageIds) =>
+ *               !enclosingType.name.startsWith('locale') || selectedLanguageIds.includes(field.name),
+ *        })
+ *    ]
+ * })
+ * ```
+ */
+export const languageFilter = createPlugin<LanguageFilterConfig>((options) => {
+  const {onSelectedIdsChange, subscribeSelectedIds} = createSelectedLanguageIdsBus()
+
+  const RenderLanguageFilter: _DocumentLanguageFilterComponent = () => {
+    return <LanguageFilterMenuButton options={options} onSelectedIdsChange={onSelectedIdsChange} />
+  }
+
+  return {
+    name: '@sanity/language-filter',
+    document: {
+      unstable_languageFilter: (prev, {schemaType, schema}) => {
+        if (isLanguageFilterEnabled(schema.get(schemaType), options)) {
+          return [...prev, RenderLanguageFilter]
+        }
+        return prev
+      },
+    },
+
+    form: {
+      renderInput(props, next) {
+        const enabled = isLanguageFilterEnabled(props.schemaType, options)
+        // will only be considered enabled for document, so this is only done once
+        if (enabled) {
+          return (
+            <LanguageFilterProvider enabled={enabled} options={options}>
+              {next(props)}
+            </LanguageFilterProvider>
+          )
+        }
+        if (props.schemaType.jsonType === 'object') {
+          return (
+            <LanguageFilterObjectInput
+              {...(props as ObjectInputProps)}
+              next={next}
+              subscribeSelectedIds={subscribeSelectedIds}
+            />
+          )
+        }
+
+        return undefined
+      },
+    },
+  }
+})

package/src/types.ts

@@ -0,0 +1,27 @@
+import {FieldMember, FieldsetState, ObjectSchemaType} from 'sanity'
+
+export interface LanguageFilterOptions {
+  languageFilter?: boolean
+}
+
+export interface LanguageFilterSchema extends ObjectSchemaType {
+  options?: LanguageFilterOptions
+}
+
+export interface Language {
+  id: string
+  title: string
+}
+
+export type FilterFieldFunction = (
+  enclosingType: ObjectSchemaType,
+  field: FieldMember | FieldsetState,
+  selectedLanguageIds: string[]
+) => boolean
+
+export interface LanguageFilterConfig {
+  supportedLanguages: Language[]
+  defaultLanguages?: string[]
+  documentTypes?: string[]
+  filterField?: FilterFieldFunction
+}

package/src/usePaneLanguages.ts

@@ -0,0 +1,78 @@
+import {useCallback, useMemo} from 'react'
+import {LanguageFilterConfig} from './types'
+import {
+  getSelectableLanguages,
+  persistLanguageIds,
+  useSelectedLanguageIds,
+} from './useSelectedLanguageIds'
+
+export interface UsePaneLanguagesParams {
+  options: LanguageFilterConfig
+  /**
+   * We need a way to communicate state changes between the pane menu and input components.
+   * LanguageFilter button lives outside the input-render tree, so Context is out.
+   * This is a workaround for that.
+   */
+  onSelectedIdsChange: (ids: string[]) => void
+}
+
+export function usePaneLanguages(props: UsePaneLanguagesParams): {
+  activeLanguages: string[]
+  allSelected: boolean
+  selectAll: () => void
+  selectNone: () => void
+  toggleLanguage: (languageId: string) => void
+} {
+  const {options, onSelectedIdsChange} = props
+  const {defaultLanguages} = options
+
+  const [selectedIds, setSelectedIds] = useSelectedLanguageIds(options)
+
+  const selectableLanguages = useMemo(() => getSelectableLanguages(options), [options])
+
+  const updateSelectedIds = useCallback(
+    (ids: string[]) => {
+      setSelectedIds(ids)
+      persistLanguageIds(ids)
+      onSelectedIdsChange(ids)
+    },
+    [onSelectedIdsChange, setSelectedIds]
+  )
+
+  const selectAll = useCallback(
+    () => updateSelectedIds(selectableLanguages.map((l) => l.id)),
+    [updateSelectedIds, selectableLanguages]
+  )
+
+  const selectNone = useCallback(() => {
+    updateSelectedIds([])
+  }, [updateSelectedIds])
+
+  const toggleLanguage = useCallback(
+    (languageId: string) => {
+      let lang = selectedIds
+
+      if (lang.includes(languageId)) {
+        lang = lang.filter((l) => l !== languageId)
+      } else {
+        lang = [...lang, languageId]
+      }
+
+      updateSelectedIds(lang)
+    },
+    [updateSelectedIds, selectedIds]
+  )
+
+  const activeLanguages = useMemo(
+    () => [...(defaultLanguages ?? []), ...selectedIds],
+    [defaultLanguages, selectedIds]
+  )
+
+  return {
+    activeLanguages,
+    allSelected: selectedIds.length === selectableLanguages.length,
+    selectAll,
+    selectNone,
+    toggleLanguage,
+  }
+}

package/src/useSelectedLanguageIds.ts

@@ -0,0 +1,40 @@
+import {Language, LanguageFilterConfig} from './types'
+import {useState} from 'react'
+const storageKey = '@sanity/plugin/language-filter/selected-languages'
+
+export function getPersistedLanguageIds(options: LanguageFilterConfig): string[] {
+  const selectableLangs = getSelectableLanguages(options).map((l) => l.id)
+
+  let selected: string[] = selectableLangs
+  try {
+    const persistedValue = window.localStorage.getItem(storageKey)
+    if (persistedValue) {
+      selected = JSON.parse(persistedValue)
+    }
+  } catch (err) {} // eslint-disable-line no-empty
+
+  // constrain persisted/selected languages to the ones currently supported
+  selected = intersection(selected, selectableLangs)
+  return selected
+}
+
+export function persistLanguageIds(languageIds: string[]): void {
+  window.localStorage.setItem(storageKey, JSON.stringify(languageIds))
+}
+
+function intersection(array1: string[], array2: string[]) {
+  return array1.filter((value) => array2.includes(value))
+}
+
+export function getSelectableLanguages({
+  supportedLanguages,
+  defaultLanguages,
+}: LanguageFilterConfig): Language[] {
+  return supportedLanguages.filter((lang) => !defaultLanguages?.includes(lang.id))
+}
+
+export function useSelectedLanguageIds(
+  options: LanguageFilterConfig
+): [string[], (ids: string[]) => void] {
+  return useState(() => getPersistedLanguageIds(options))
+}

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})