@sanity/language-filter 1.0.0-firstpass-v3-impl.1 → 1.0.0-v3-studio.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/language-filter",
-  "version": "1.0.0-firstpass-v3-impl.1",
+  "version": "1.0.0-v3-studio.1",
   "description": "A Sanity plugin that supports filtering localized fields by language",
   "author": "Sanity.io <hello@sanity.io>",
   "license": "MIT",
@@ -28,7 +28,8 @@
     "watch": "parcel watch",
     "test": "jest",
     "link-watch": "plugin-kit link-watch",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "prepare": "husky install"
   },
   "repository": {
     "type": "git",
@@ -40,14 +41,14 @@
   "dependencies": {
     "@sanity/icons": "^1.3.4",
     "@sanity/incompatible-plugin": "^1.0.0",
-    "@sanity/ui": "^0.37.20",
+    "@sanity/ui": "^0.38.0",
     "@sanity/util": "3.0.0-dev-preview.15"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
-    "@commitlint/cli": "^17.0.3",
-    "@commitlint/config-conventional": "^17.0.3",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
     "@parcel/packager-ts": "^2.7.0",
     "@parcel/transformer-typescript-types": "^2.7.0",
     "@sanity/plugin-kit": "^1.0.1",
@@ -55,11 +56,11 @@
     "@types/jest": "^28.1.8",
     "@typescript-eslint/eslint-plugin": "^5.35.1",
     "@typescript-eslint/parser": "^5.35.1",
-    "eslint": "^8.22.0",
+    "eslint": "8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-sanity": "^6.0.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.0",
+    "eslint-plugin-react": "^7.31.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "jest": "^28.1.3",
@@ -70,7 +71,7 @@
     "rimraf": "^3.0.2",
     "sanity": "3.0.0-dev-preview.15",
     "ts-jest": "^28.0.8",
-    "typescript": "^4.7.4"
+    "typescript": "4.7.4"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",

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

@@ -1,4 +1,3 @@
-import {TranslateIcon} from '@sanity/icons'
 import {Box, Button, Card, Checkbox, Flex, Popover, Stack, Text, useClickOutside} from '@sanity/ui'
 import React, {FormEvent, useCallback, useState} from 'react'
 import {usePaneLanguages} from './usePaneLanguages'
@@ -6,19 +5,23 @@ import {LanguageFilterConfig} from './types'
 
 export interface LanguageFilterMenuButtonProps {
   options: LanguageFilterConfig
+  onSelectedIdsChange: (ids: string[]) => void
 }
 
 export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
-  const {options} = props
+  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 {visibleLanguages, allSelected, selectAll, selectNone, toggleLanguage} = usePaneLanguages({
+  const {activeLanguages, allSelected, selectAll, selectNone, toggleLanguage} = usePaneLanguages({
     options,
+    onSelectedIdsChange,
   })
   const [button, setButton] = useState<HTMLElement | null>(null)
   const [popover, setPopover] = useState<HTMLElement | null>(null)
@@ -45,11 +48,13 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
   const content = (
     <Box overflow="auto" padding={1}>
       {defaultLanguages.length > 0 && (
-        <Card radius={2} tone="primary">
+        <Card radius={2}>
           <Stack padding={2} space={3}>
-            <Text size={1} weight="semibold">
-              Default language{defaultLanguages.length > 1 && <>s</>}
-            </Text>
+            <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>
@@ -59,7 +64,7 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
       )}
 
       <Stack marginTop={3} padding={2} space={2}>
-        <Box paddingBottom={1}>
+        <Box paddingBottom={2}>
           <Text size={1} weight="semibold">
             Show translations
           </Text>
@@ -81,7 +86,7 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
             id={lang.id}
             key={lang.id}
             onToggle={toggleLanguage}
-            selected={visibleLanguages.includes(lang.id)}
+            selected={activeLanguages.includes(lang.id)}
             title={lang.title}
           />
         ))}
@@ -89,11 +94,25 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
     </Box>
   )
 
+  const langCount = options.supportedLanguages.length
   return (
-    <Popover constrainSize content={content} open={open} portal ref={setPopover}>
+    <Popover content={content} open={open} portal ref={setPopover}>
       <Button
-        icon={TranslateIcon}
-        text={`Filter languages (${visibleLanguages.length}/${options.supportedLanguages.length})`}
+        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}

package/src/LanguageFilterObjectInput.tsx

@@ -1,33 +1,72 @@
-import React, {useMemo} from 'react'
-import {ObjectInputProps, ObjectMember} from 'sanity'
-import {ObjectInput} from 'sanity/form'
-import {usePaneLanguages} from './usePaneLanguages'
+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} & ObjectInputProps
+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: LanguageFilterObjectInputProps) {
-  const {members: membersProp, level, options, path, schemaType, ...restProps} = props
-  const {visibleLanguages} = usePaneLanguages({options})
+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, visibleLanguages)) ||
-        (member.kind === 'fieldSet' && filterField(schemaType, member.fieldSet, visibleLanguages))
+        (member.kind === 'field' && filterField(schemaType, member, activeLanguages)) ||
+        (member.kind === 'fieldSet' && filterField(schemaType, member.fieldSet, activeLanguages))
     )
-  }, [schemaType, membersProp, filterField, visibleLanguages])
+  }, [schemaType, membersProp, filterField, activeLanguages])
 
-  return (
-    <ObjectInput
-      {...restProps}
-      level={level}
-      members={members}
-      path={path}
-      schemaType={schemaType}
-    />
-  )
+  return <>{next({...restProps, members, schemaType})}</>
 }

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

@@ -4,6 +4,8 @@ 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)
@@ -39,8 +41,10 @@ import {isLanguageFilterEnabled} from './filterField'
  * ```
  */
 export const languageFilter = createPlugin<LanguageFilterConfig>((options) => {
+  const {onSelectedIdsChange, subscribeSelectedIds} = createSelectedLanguageIdsBus()
+
   const RenderLanguageFilter: _DocumentLanguageFilterComponent = () => {
-    return <LanguageFilterMenuButton options={options} />
+    return <LanguageFilterMenuButton options={options} onSelectedIdsChange={onSelectedIdsChange} />
   }
 
   return {
@@ -57,10 +61,25 @@ export const languageFilter = createPlugin<LanguageFilterConfig>((options) => {
     form: {
       renderInput(props, next) {
         const enabled = isLanguageFilterEnabled(props.schemaType, options)
-        if (enabled && props.schemaType.jsonType === 'object') {
-          return <LanguageFilterObjectInput {...(props as ObjectInputProps)} options={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 next(props)
+
+        return undefined
       },
     },
   }

package/src/usePaneLanguages.ts

@@ -1,49 +1,56 @@
 import {useCallback, useMemo} from 'react'
-import {usePaneRouter} from 'sanity/desk'
 import {LanguageFilterConfig} from './types'
+import {
+  getSelectableLanguages,
+  persistLanguageIds,
+  useSelectedLanguageIds,
+} from './useSelectedLanguageIds'
 
-// NOTE: use `+` instead of `,` since the desk tool URL format already uses comma
-const LANG_ID_SEPARATOR = '+'
+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: {options: LanguageFilterConfig}): {
-  visibleLanguages: string[]
+export function usePaneLanguages(props: UsePaneLanguagesParams): {
+  activeLanguages: string[]
   allSelected: boolean
   selectAll: () => void
   selectNone: () => void
   toggleLanguage: (languageId: string) => void
 } {
-  const {options} = props
-  const {params, setParams} = usePaneRouter()
-  const {supportedLanguages, defaultLanguages} = options
-
-  const selectableLanguages = useMemo(
-    () => supportedLanguages.filter((lang) => !defaultLanguages?.includes(lang.id)),
-    [supportedLanguages, defaultLanguages]
-  )
+  const {options, onSelectedIdsChange} = props
+  const {defaultLanguages} = options
 
-  const selectedLanguages = useMemo(() => {
-    if (params?.langs === '$none') {
-      return []
-    }
+  const [selectedIds, setSelectedIds] = useSelectedLanguageIds(options)
 
-    if (params?.langs === '$all') {
-      return selectableLanguages.map((lang) => lang.id)
-    }
+  const selectableLanguages = useMemo(() => getSelectableLanguages(options), [options])
 
-    return params?.langs?.split(LANG_ID_SEPARATOR) || selectableLanguages.map((lang) => lang.id)
-  }, [params, selectableLanguages])
+  const updateSelectedIds = useCallback(
+    (ids: string[]) => {
+      setSelectedIds(ids)
+      persistLanguageIds(ids)
+      onSelectedIdsChange(ids)
+    },
+    [onSelectedIdsChange, setSelectedIds]
+  )
 
-  const selectAll = useCallback(() => {
-    setParams({...params, langs: '$all'})
-  }, [params, setParams])
+  const selectAll = useCallback(
+    () => updateSelectedIds(selectableLanguages.map((l) => l.id)),
+    [updateSelectedIds, selectableLanguages]
+  )
 
   const selectNone = useCallback(() => {
-    setParams({...params, langs: '$none'})
-  }, [params, setParams])
+    updateSelectedIds([])
+  }, [updateSelectedIds])
 
   const toggleLanguage = useCallback(
     (languageId: string) => {
-      let lang = selectedLanguages
+      let lang = selectedIds
 
       if (lang.includes(languageId)) {
         lang = lang.filter((l) => l !== languageId)
@@ -51,29 +58,19 @@ export function usePaneLanguages(props: {options: LanguageFilterConfig}): {
         lang = [...lang, languageId]
       }
 
-      if (lang.length === 0) {
-        setParams({...params, langs: '$none'}) // none
-        return
-      }
-
-      if (lang.length === selectableLanguages.length) {
-        setParams({...params, langs: '$all'})
-        return
-      }
-
-      setParams({...params, langs: lang.join(LANG_ID_SEPARATOR)})
+      updateSelectedIds(lang)
     },
-    [params, selectableLanguages, selectedLanguages, setParams]
+    [updateSelectedIds, selectedIds]
   )
 
-  const visibleLanguages = useMemo(
-    () => [...(defaultLanguages ?? []), ...selectedLanguages],
-    [defaultLanguages, selectedLanguages]
+  const activeLanguages = useMemo(
+    () => [...(defaultLanguages ?? []), ...selectedIds],
+    [defaultLanguages, selectedIds]
   )
 
   return {
-    visibleLanguages,
-    allSelected: selectedLanguages.length === selectableLanguages.length,
+    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))
+}