@sanity/language-filter 2.31.2-performance-opts.9 → 3.0.0-v3-studio.2

package/package.json

@@ -1,43 +1,89 @@
 {
   "name": "@sanity/language-filter",
-  "version": "2.31.2-performance-opts.9+580febbe51",
+  "version": "3.0.0-v3-studio.2",
   "description": "A Sanity plugin that supports filtering localized fields by language",
-  "main": "index.js",
-  "scripts": {
-    "clean": "rimraf lib dest"
-  },
-  "keywords": [
-    "sanity",
-    "cms",
-    "headless",
-    "realtime",
-    "content",
-    "language-filter"
+  "author": "Sanity.io <hello@sanity.io>",
+  "license": "MIT",
+  "source": "./src/index.ts",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./lib/cjs/index.js",
+      "default": "./lib/esm/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "v2-incompatible.js",
+    "sanity.json"
   ],
+  "scripts": {
+    "clean": "rimraf lib",
+    "lint": "eslint .",
+    "prebuild": "npm run clean && plugin-kit verify-package --silent",
+    "build": "parcel build --no-cache",
+    "watch": "parcel watch",
+    "test": "jest",
+    "link-watch": "plugin-kit link-watch",
+    "prepublishOnly": "npm run build",
+    "prepare": "husky install"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/sanity-io/language-filter.git"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
   "dependencies": {
     "@sanity/icons": "^1.3.4",
-    "@sanity/types": "2.31.2-performance-opts.9+580febbe51",
-    "@sanity/ui": "^0.37.21",
-    "lodash": "^4.17.15",
-    "rxjs": "^6.5.3"
+    "@sanity/incompatible-plugin": "^1.0.0",
+    "@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.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",
+    "@sanity/semantic-release-preset": "^2.0.1",
+    "@types/jest": "^28.1.8",
+    "@typescript-eslint/eslint-plugin": "^5.35.1",
+    "@typescript-eslint/parser": "^5.35.1",
+    "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.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.1",
+    "jest": "^28.1.3",
+    "lint-staged": "^13.0.3",
+    "parcel": "^2.7.0",
+    "prettier": "^2.7.1",
+    "react": "^17.0.0 || ^18.0.0",
+    "rimraf": "^3.0.2",
+    "sanity": "3.0.0-dev-preview.15",
+    "ts-jest": "^28.0.8",
+    "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "prop-types": "^15.3",
-    "react": "^16.9 || ^17"
+    "react": "^17.0.0 || ^18.0.0",
+    "sanity": "dev-preview"
   },
-  "author": "Sanity.io <hello@sanity.io>",
-  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/sanity-io/sanity/issues"
-  },
-  "homepage": "https://www.sanity.io/",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sanity-io/sanity.git",
-    "directory": "packages/@sanity/language-filter"
-  },
-  "publishConfig": {
-    "access": "public"
+    "url": "https://github.com/sanity-io/language-filter/issues"
   },
-  "gitHead": "580febbe519250bafddafd3fa688fa469b0686a3"
+  "homepage": "https://github.com/sanity-io/language-filter#readme",
+  "sanityPlugin": {
+    "verifyPackage": {
+      "babelConfig": false
+    }
+  }
 }

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,91 @@
+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) => {
+        return (
+          (member.kind === 'field' && filterField(schemaType, member, activeLanguages)) ||
+          member.kind === 'fieldSet'
+        )
+      })
+      .map((member) => {
+        if (member.kind === 'fieldSet') {
+          return {
+            ...member,
+            fieldSet: {
+              ...member.fieldSet,
+              members: member.fieldSet.members.filter((fieldsetMember) => {
+                return (
+                  fieldsetMember.kind === 'field' &&
+                  filterField(schemaType, fieldsetMember, activeLanguages)
+                )
+              }),
+            },
+          }
+        }
+        return member
+      })
+  }, [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
+      },
+    },
+  }
+})