@sanity/language-filter 4.1.0 → 5.0.0

package/src/LanguageFilterMenuButton.tsx

@@ -1,194 +0,0 @@
-import {
-  CheckmarkCircleIcon,
-  CircleIcon,
-  EyeClosedIcon,
-  EyeOpenIcon,
-  TranslateIcon,
-} from '@sanity/icons'
-import {
-  Badge,
-  Box,
-  Button,
-  Card,
-  Flex,
-  Popover,
-  Stack,
-  Text,
-  TextInput,
-  useClickOutside,
-} from '@sanity/ui'
-import {type FormEvent, type MouseEventHandler, useCallback, useState} from 'react'
-import {TextWithTone} from 'sanity'
-import {styled} from 'styled-components'
-
-import {useLanguageFilterStudioContext} from './LanguageFilterStudioContext'
-import {usePaneLanguages} from './usePaneLanguages'
-
-const StyledBox = styled(Box)`
-  max-height: calc(100vh - 200px);
-`
-
-export function LanguageFilterMenuButton() {
-  const {options} = useLanguageFilterStudioContext()
-
-  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()
-  const [button, setButton] = useState<HTMLElement | null>(null)
-  const [popover, setPopover] = useState<HTMLElement | null>(null)
-
-  const handleToggleAll: MouseEventHandler<HTMLButtonElement> = useCallback(
-    (event) => {
-      const checked = event.currentTarget.value === 'ALL'
-
-      if (checked) {
-        selectAll()
-      } else {
-        selectNone()
-      }
-    },
-    [selectAll, selectNone],
-  )
-
-  const handleClick = useCallback(() => setOpen((o) => !o), [])
-
-  const handleClickOutside = useCallback(() => setOpen(false), [])
-
-  useClickOutside(handleClickOutside, [button, popover])
-
-  const langCount = options.supportedLanguages.length
-
-  // Search filter query
-  const [query, setQuery] = useState('')
-  const handleQuery = useCallback((event: FormEvent<HTMLInputElement>) => {
-    if (event.currentTarget.value) {
-      setQuery(event.currentTarget.value)
-    } else {
-      setQuery('')
-    }
-  }, [])
-
-  const showSearch = langCount > 4
-
-  const content = (
-    <StyledBox overflow="auto">
-      <Stack padding={1} space={1}>
-        {defaultLanguages.length > 0 && (
-          <>
-            {defaultLanguages.map((l) => (
-              <LanguageFilterOption key={l.id} id={l.id} title={l.title} selected />
-            ))}
-            <Card borderTop />
-          </>
-        )}
-
-        <Button
-          mode="bleed"
-          onClick={handleToggleAll}
-          justify="flex-start"
-          value={allSelected ? 'NONE' : 'ALL'}
-          disabled={!!query}
-        >
-          <Flex gap={3} align="center">
-            <Text size={2}>
-              {allSelected ? (
-                <TextWithTone tone="primary">
-                  <EyeClosedIcon />
-                </TextWithTone>
-              ) : (
-                <EyeOpenIcon />
-              )}
-            </Text>
-            <Box flex={1}>
-              <Text>{allSelected ? 'Hide all' : 'Show all'}</Text>
-            </Box>
-          </Flex>
-        </Button>
-
-        {showSearch ? (
-          <TextInput onChange={handleQuery} value={query} placeholder="Filter languages" />
-        ) : (
-          <Card borderTop />
-        )}
-
-        {languageOptions
-          .filter((language) => {
-            if (query) {
-              return language.title.toLowerCase().includes(query.toLowerCase())
-            }
-            return true
-          })
-          .map((lang) => (
-            <LanguageFilterOption
-              id={lang.id}
-              key={lang.id}
-              onToggle={toggleLanguage}
-              selected={activeLanguages.includes(lang.id)}
-              title={lang.title}
-            />
-          ))}
-      </Stack>
-    </StyledBox>
-  )
-
-  const buttonText =
-    activeLanguages.length === langCount
-      ? 'Showing all'
-      : `Showing ${activeLanguages.length} / ${langCount}`
-  return (
-    <Popover animate content={content} open={open} portal ref={setPopover}>
-      <Button
-        text={buttonText}
-        icon={TranslateIcon}
-        mode="bleed"
-        onClick={handleClick}
-        ref={setButton}
-        selected={open}
-      />
-    </Popover>
-  )
-}
-
-function LanguageFilterOption(props: {
-  id: string
-  selected: boolean
-  title: string
-  // eslint-disable-next-line react/require-default-props
-  onToggle?: (id: string) => void
-}) {
-  const {id, onToggle, selected, title} = props
-
-  const handleChange = useCallback(() => {
-    if (onToggle) {
-      onToggle(id)
-    }
-  }, [id, onToggle])
-
-  const disabled = !onToggle
-
-  return (
-    <Button mode="bleed" onClick={handleChange} justify="flex-start" disabled={disabled}>
-      <Flex gap={3} align="center">
-        <Text size={2}>
-          {selected ? (
-            <TextWithTone tone={disabled ? 'default' : 'positive'}>
-              <CheckmarkCircleIcon />
-            </TextWithTone>
-          ) : (
-            <CircleIcon />
-          )}
-        </Text>
-        <Box flex={1}>
-          <Text>{title}</Text>
-        </Box>
-        <Badge>{id}</Badge>
-      </Flex>
-    </Button>
-  )
-}

package/src/LanguageFilterObjectInput.tsx

@@ -1,54 +0,0 @@
-import {useMemo} from 'react'
-import {type ObjectInputProps, type ObjectMember, useFormValue, useSchema} from 'sanity'
-
-import {isLanguageFilterEnabled} from './filterField'
-import {useLanguageFilterStudioContext} from './LanguageFilterStudioContext'
-
-// First check that this Object is in a schema type for which language-filter is enabled
-export function FilteredObjectWrapper(props: ObjectInputProps) {
-  const {options} = useLanguageFilterStudioContext()
-
-  const documentType = useFormValue(['_type']) as string
-  const schema = useSchema()
-  const languageFilterEnabled = isLanguageFilterEnabled(schema.get(documentType), options)
-  return languageFilterEnabled ? <FilteredObjectInput {...props} /> : props.renderDefault(props)
-}
-
-// Modify the object members based on selected languages in the filter
-export function FilteredObjectInput(props: ObjectInputProps) {
-  const {members: membersProp, schemaType, renderDefault, ...restProps} = props
-  const {selectedLanguageIds, options} = useLanguageFilterStudioContext()
-  const {filterField} = options
-  const parentValue = props.value
-
-  const members: ObjectMember[] = useMemo(() => {
-    return membersProp
-      .filter((member) => {
-        return (
-          (member.kind === 'field' &&
-            filterField(schemaType, member, selectedLanguageIds, parentValue)) ||
-          member.kind === 'fieldSet' ||
-          member.kind === 'error'
-        )
-      })
-      .map((member) => {
-        if (member.kind === 'fieldSet') {
-          return {
-            ...member,
-            fieldSet: {
-              ...member.fieldSet,
-              members: member.fieldSet.members.filter((fieldsetMember) => {
-                return (
-                  fieldsetMember.kind === 'field' &&
-                  filterField(schemaType, fieldsetMember, selectedLanguageIds, parentValue)
-                )
-              }),
-            },
-          }
-        }
-        return member
-      })
-  }, [schemaType, membersProp, filterField, selectedLanguageIds, parentValue])
-
-  return renderDefault({...restProps, members, schemaType, renderDefault})
-}

package/src/LanguageFilterStudioContext.tsx

@@ -1,92 +0,0 @@
-import {createContext, useContext, useEffect, useMemo, useState} from 'react'
-import {type LayoutProps, useClient} from 'sanity'
-
-import {defaultFilterField} from './filterField'
-import type {
-  Language,
-  LanguageCallback,
-  LanguageFilterConfig,
-  LanguageFilterConfigProcessed,
-} from './types'
-import {useSelectedLanguageIds} from './useSelectedLanguageIds'
-
-export interface LanguageFilterStudioContextProps {
-  // eslint-disable-next-line react/require-default-props
-  options: Required<LanguageFilterConfig>
-}
-
-export interface LanguageFilterStudioContextProcessed {
-  options: Required<LanguageFilterConfigProcessed>
-}
-
-export interface LanguageFilterStudioContextValue extends LanguageFilterStudioContextProcessed {
-  selectedLanguageIds: string[]
-  setSelectedLanguageIds: (ids: string[]) => void
-}
-
-export const defaultContextValue: LanguageFilterStudioContextValue = {
-  options: {
-    apiVersion: '2022-11-27',
-    supportedLanguages: [],
-    defaultLanguages: [],
-    documentTypes: [],
-    filterField: defaultFilterField,
-  },
-  selectedLanguageIds: [],
-  setSelectedLanguageIds: () => console.error('LanguageFilterStudioContext not initialized'),
-}
-
-const LanguageFilterStudioContext =
-  createContext<LanguageFilterStudioContextValue>(defaultContextValue)
-
-/**
- * This is a separate Provider from the Context that wraps the document pane
- * but it used to listen to changes to the selected language IDs inside it
- * and provide them to a Studio-wide context
- */
-export function LanguageFilterStudioProvider(
-  props: LayoutProps & LanguageFilterStudioContextProps,
-) {
-  const client = useClient({apiVersion: '2023-01-01'})
-  const [languages, setLanguages] = useState<Language[]>(
-    Array.isArray(props.options.supportedLanguages) ? props.options.supportedLanguages : [],
-  )
-  useEffect(() => {
-    let asyncLanguages: Language[] = []
-
-    async function getLanguages(supportedLanguagesCallback: LanguageCallback) {
-      asyncLanguages = await supportedLanguagesCallback(client, {})
-      setLanguages(asyncLanguages)
-    }
-
-    if (!Array.isArray(props.options.supportedLanguages)) {
-      getLanguages(props.options.supportedLanguages)
-    }
-  }, [client, props.options.supportedLanguages])
-
-  const options = useMemo<Required<LanguageFilterConfigProcessed>>(() => {
-    return {
-      ...defaultContextValue.options,
-      ...props.options,
-      supportedLanguages: languages,
-    }
-  }, [props.options, languages])
-
-  const [selectedLanguageIds, setSelectedLanguageIds] = useSelectedLanguageIds(options)
-
-  return (
-    <LanguageFilterStudioContext.Provider
-      value={{options, selectedLanguageIds, setSelectedLanguageIds}}
-    >
-      {props.renderDefault(props)}
-    </LanguageFilterStudioContext.Provider>
-  )
-}
-
-/**
- * Retrieves plugin options and the currently selected
- * language IDs from anywhere in the Studio
- */
-export function useLanguageFilterStudioContext() {
-  return useContext(LanguageFilterStudioContext)
-}

package/src/filterField.test.ts

@@ -1,110 +0,0 @@
-import type {FieldMember, ObjectSchemaType} from 'sanity'
-
-import {defaultFilterField, isLanguageFilterEnabled} from './filterField'
-
-describe('filterField', () => {
-  describe('isLanguageFilterEnabled', () => {
-    const docType: ObjectSchemaType = {
-      name: 'some-doc',
-      jsonType: 'object',
-      fields: [],
-      // eslint-disable-next-line camelcase
-      __experimental_search: [],
-      type: {
-        name: 'document',
-        jsonType: 'object',
-        fields: [],
-        // eslint-disable-next-line camelcase
-        __experimental_search: [],
-      },
-    }
-    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: [],
-      // eslint-disable-next-line camelcase
-      __experimental_search: [],
-    }
-    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,
-      },
-      groups: [],
-      inSelectedGroup: false,
-    }
-
-    it('should filter -> true for nb field inside local-prefixed object', () => {
-      const result = defaultFilterField(localePrefixedObject, member, ['nb'], {
-        _key: 'nb',
-        _type: 'locale_parent',
-      })
-      expect(result).toBeTruthy()
-    })
-
-    it('should filter -> false for unselected field inside local-prefixed object', () => {
-      const result = defaultFilterField(localePrefixedObject, member, ['other'], {
-        _key: 'other',
-        _type: 'locale_parent',
-      })
-      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'],
-        {
-          _key: 'nb',
-          _type: 'not-start-with-locale-field',
-        },
-      )
-      expect(result).toBeTruthy()
-    })
-  })
-})

package/src/filterField.ts

@@ -1,35 +0,0 @@
-import type {SchemaType} from 'sanity'
-
-import type {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

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

package/src/languageSubscription.ts

@@ -1,32 +0,0 @@
-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

@@ -1,86 +0,0 @@
-import {
-  definePlugin,
-  type DocumentLanguageFilterComponent,
-  isObjectSchemaType,
-  type ObjectInputProps,
-} from 'sanity'
-
-import {isLanguageFilterEnabled} from './filterField'
-import {LanguageFilterMenuButton} from './LanguageFilterMenuButton'
-import {FilteredObjectWrapper} from './LanguageFilterObjectInput'
-import {defaultContextValue, LanguageFilterStudioProvider} from './LanguageFilterStudioContext'
-import type {LanguageFilterConfig} from './types'
-
-/**
- * ## Usage in sanity.config.ts (or .js)
- *
- * ```
- * import {defineConfig} from 'sanity'
- * import {languageFilter} from '@sanity/language-filter'
- *
- * export const defineConfig({
- *     /...
- *     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 = definePlugin<LanguageFilterConfig>((options) => {
-  const RenderLanguageFilter: DocumentLanguageFilterComponent = () => {
-    return <LanguageFilterMenuButton />
-  }
-
-  const pluginOptions = {
-    ...defaultContextValue.options,
-    ...options,
-  }
-
-  return {
-    name: '@sanity/language-filter',
-    studio: {
-      components: {
-        layout: (props) => LanguageFilterStudioProvider({...props, options: pluginOptions}),
-      },
-    },
-
-    document: {
-      unstable_languageFilter: (prev, {schemaType, schema}) => {
-        if (isLanguageFilterEnabled(schema.get(schemaType), options)) {
-          return [...prev, RenderLanguageFilter]
-        }
-        return prev
-      },
-    },
-
-    form: {
-      components: {
-        input: (props) => {
-          if (props.id !== 'root' && isObjectSchemaType(props.schemaType)) {
-            return FilteredObjectWrapper(props as ObjectInputProps)
-          }
-
-          return props.renderDefault(props)
-        },
-      },
-    },
-  }
-})

package/src/types.ts

@@ -1,42 +0,0 @@
-import type {FieldMember, FieldsetState, ObjectSchemaType, SanityClient} from 'sanity'
-
-export interface LanguageFilterOptions {
-  languageFilter?: boolean
-}
-
-export interface LanguageFilterSchema extends ObjectSchemaType {
-  options?: LanguageFilterOptions
-}
-
-export type Language = {
-  id: Intl.UnicodeBCP47LocaleIdentifier
-  title: string
-}
-
-export type LanguageCallback = (
-  client: SanityClient,
-  selectedValue: Record<string, unknown>,
-) => Promise<Language[]>
-
-export type FilterFieldFunction = (
-  enclosingType: ObjectSchemaType,
-  field: FieldMember | FieldsetState,
-  selectedLanguageIds: string[],
-  parentValue: Record<string, unknown> | undefined,
-) => boolean
-
-export interface LanguageFilterConfig {
-  supportedLanguages: Language[] | LanguageCallback
-  defaultLanguages?: string[]
-  documentTypes?: string[]
-  filterField?: FilterFieldFunction
-  /**
-   * https://www.sanity.io/docs/api-versioning
-   * @defaultValue '2022-11-27'
-   */
-  apiVersion?: string
-}
-
-export interface LanguageFilterConfigProcessed extends LanguageFilterConfig {
-  supportedLanguages: Language[]
-}