@sanity/language-filter 0.147.10-next.22 → 1.0.0-firstpass-v3-impl.1

package/src/LanguageFilterMenuButton.tsx

@@ -0,0 +1,128 @@
+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'
+import {LanguageFilterConfig} from './types'
+
+export interface LanguageFilterMenuButtonProps {
+  options: LanguageFilterConfig
+}
+
+export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
+  const {options} = 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({
+    options,
+  })
+  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} tone="primary">
+          <Stack padding={2} space={3}>
+            <Text size={1} weight="semibold">
+              Default language{defaultLanguages.length > 1 && <>s</>}
+            </Text>
+
+            {defaultLanguages.map((l) => (
+              <Text key={l.id}>{l.title}</Text>
+            ))}
+          </Stack>
+        </Card>
+      )}
+
+      <Stack marginTop={3} padding={2} space={2}>
+        <Box paddingBottom={1}>
+          <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={visibleLanguages.includes(lang.id)}
+            title={lang.title}
+          />
+        ))}
+      </Stack>
+    </Box>
+  )
+
+  return (
+    <Popover constrainSize content={content} open={open} portal ref={setPopover}>
+      <Button
+        icon={TranslateIcon}
+        text={`Filter languages (${visibleLanguages.length}/${options.supportedLanguages.length})`}
+        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,33 @@
+import React, {useMemo} from 'react'
+import {ObjectInputProps, ObjectMember} from 'sanity'
+import {ObjectInput} from 'sanity/form'
+import {usePaneLanguages} from './usePaneLanguages'
+import {LanguageFilterConfig} from './types'
+import {defaultFilterField} from './filterField'
+
+export type LanguageFilterObjectInputProps = {options: LanguageFilterConfig} & ObjectInputProps
+
+export function LanguageFilterObjectInput(props: LanguageFilterObjectInputProps) {
+  const {members: membersProp, level, options, path, schemaType, ...restProps} = props
+  const {visibleLanguages} = usePaneLanguages({options})
+
+  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))
+    )
+  }, [schemaType, membersProp, filterField, visibleLanguages])
+
+  return (
+    <ObjectInput
+      {...restProps}
+      level={level}
+      members={members}
+      path={path}
+      schemaType={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,26 @@
+/**
+ * Plugin function
+ */
+export {languageFilter} from './plugin'
+
+export {defaultFilterField, isLanguageFilterEnabled} from './filterField'
+
+export type {
+  LanguageFilterConfig,
+  LanguageFilterSchema,
+  LanguageFilterOptions,
+  FilterFieldFunction,
+  Language,
+} from './types'
+
+export {
+  LanguageFilterObjectInput,
+  type LanguageFilterObjectInputProps,
+} from './LanguageFilterObjectInput'
+
+export {
+  LanguageFilterMenuButton,
+  type LanguageFilterMenuButtonProps,
+} from './LanguageFilterMenuButton'
+
+export {usePaneLanguages} from './usePaneLanguages'

package/src/plugin.tsx

@@ -0,0 +1,67 @@
+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'
+
+/**
+ * ## 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 RenderLanguageFilter: _DocumentLanguageFilterComponent = () => {
+    return <LanguageFilterMenuButton options={options} />
+  }
+
+  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)
+        if (enabled && props.schemaType.jsonType === 'object') {
+          return <LanguageFilterObjectInput {...(props as ObjectInputProps)} options={options} />
+        }
+        return next(props)
+      },
+    },
+  }
+})

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,81 @@
+import {useCallback, useMemo} from 'react'
+import {usePaneRouter} from 'sanity/desk'
+import {LanguageFilterConfig} from './types'
+
+// NOTE: use `+` instead of `,` since the desk tool URL format already uses comma
+const LANG_ID_SEPARATOR = '+'
+
+export function usePaneLanguages(props: {options: LanguageFilterConfig}): {
+  visibleLanguages: 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 selectedLanguages = useMemo(() => {
+    if (params?.langs === '$none') {
+      return []
+    }
+
+    if (params?.langs === '$all') {
+      return selectableLanguages.map((lang) => lang.id)
+    }
+
+    return params?.langs?.split(LANG_ID_SEPARATOR) || selectableLanguages.map((lang) => lang.id)
+  }, [params, selectableLanguages])
+
+  const selectAll = useCallback(() => {
+    setParams({...params, langs: '$all'})
+  }, [params, setParams])
+
+  const selectNone = useCallback(() => {
+    setParams({...params, langs: '$none'})
+  }, [params, setParams])
+
+  const toggleLanguage = useCallback(
+    (languageId: string) => {
+      let lang = selectedLanguages
+
+      if (lang.includes(languageId)) {
+        lang = lang.filter((l) => l !== languageId)
+      } else {
+        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)})
+    },
+    [params, selectableLanguages, selectedLanguages, setParams]
+  )
+
+  const visibleLanguages = useMemo(
+    () => [...(defaultLanguages ?? []), ...selectedLanguages],
+    [defaultLanguages, selectedLanguages]
+  )
+
+  return {
+    visibleLanguages,
+    allSelected: selectedLanguages.length === selectableLanguages.length,
+    selectAll,
+    selectNone,
+    toggleLanguage,
+  }
+}

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,
+})

package/lib/SelectLanguage.js

@@ -1,139 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _poppable = _interopRequireDefault(require("part:@sanity/components/utilities/poppable"));
-
-var _checkbox = _interopRequireDefault(require("part:@sanity/components/toggles/checkbox"));
-
-var _default = _interopRequireDefault(require("part:@sanity/components/buttons/default"));
-
-var _SelectLanguage = _interopRequireDefault(require("./styles/SelectLanguage.css"));
-
-var _angleDownIcon = _interopRequireDefault(require("part:@sanity/base/angle-down-icon"));
-
-var _angleUpIcon = _interopRequireDefault(require("part:@sanity/base/angle-up-icon"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var LanguagePropType = _propTypes.default.shape({
-  id: _propTypes.default.string,
-  title: _propTypes.default.string
-});
-
-class SelectLanguage extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "state", {
-      isOpen: false
-    });
-
-    _defineProperty(this, "refElement", _react.default.createRef());
-
-    _defineProperty(this, "handleToggle", () => this.setState(prevState => ({
-      isOpen: !prevState.isOpen
-    })));
-
-    _defineProperty(this, "handleOpen", () => this.setState({
-      isOpen: true
-    }));
-
-    _defineProperty(this, "handleClose", () => {
-      this.setState({
-        isOpen: false
-      });
-    });
-
-    _defineProperty(this, "selectLang", langId => {
-      var _this$props = this.props,
-          selected = _this$props.selected,
-          onChange = _this$props.onChange;
-      onChange(selected.concat(langId));
-    });
-
-    _defineProperty(this, "unselectLang", langId => {
-      var _this$props2 = this.props,
-          selected = _this$props2.selected,
-          onChange = _this$props2.onChange;
-      onChange(selected.filter(id => id !== langId));
-    });
-
-    _defineProperty(this, "handleSelectAll", event => {
-      var _this$props3 = this.props,
-          languages = _this$props3.languages,
-          onChange = _this$props3.onChange;
-      onChange(languages.map(l => l.id));
-    });
-
-    _defineProperty(this, "handleSelectNone", event => {
-      var onChange = this.props.onChange;
-      onChange([]);
-    });
-
-    _defineProperty(this, "handleLangCheckboxChange", event => {
-      var id = event.target.getAttribute('data-lang-id');
-      var checked = event.target.checked;
-      this[checked ? 'selectLang' : 'unselectLang'](id);
-    });
-  }
-
-  render() {
-    var isOpen = this.state.isOpen;
-    var _this$props4 = this.props,
-        languages = _this$props4.languages,
-        selected = _this$props4.selected;
-    var allIsSelected = languages.length === selected.length;
-    var refElement = this.refElement && this.refElement.current && this.refElement.current._element;
-    return _react.default.createElement(_react.Fragment, null, _react.default.createElement("span", {
-      className: _SelectLanguage.default.target,
-      onClick: this.handleToggle,
-      ref: this.refElement,
-      title: allIsSelected ? 'Filter language fields' : 'Displaying only fields for selected languages'
-    }, "Filter languages", allIsSelected ? '…' : " (".concat(selected.length, "/").concat(languages.length, ")"), _react.default.createElement("span", {
-      className: _SelectLanguage.default.arrow
-    }, isOpen ? _react.default.createElement(_angleUpIcon.default, null) : _react.default.createElement(_angleDownIcon.default, null))), _react.default.createElement(_poppable.default, {
-      onEscape: this.handleClose,
-      onClickOutside: this.handleClose,
-      placement: "bottom-end",
-      referenceElement: refElement
-    }, isOpen && _react.default.createElement("div", {
-      className: _SelectLanguage.default.root
-    }, _react.default.createElement("div", {
-      className: _SelectLanguage.default.functions
-    }, _react.default.createElement(_default.default, {
-      onClick: allIsSelected ? this.handleSelectNone : this.handleSelectAll
-    }, "Select ", allIsSelected ? 'none' : 'all')), _react.default.createElement("ul", {
-      className: _SelectLanguage.default.list
-    }, languages.map(lang => _react.default.createElement("li", {
-      className: _SelectLanguage.default.item,
-      key: lang.id
-    }, _react.default.createElement(_checkbox.default, {
-      onChange: this.handleLangCheckboxChange,
-      "data-lang-id": lang.id,
-      checked: selected.includes(lang.id)
-    }, lang.title)))))));
-  }
-
-}
-
-exports.default = SelectLanguage;
-
-_defineProperty(SelectLanguage, "propTypes", {
-  languages: _propTypes.default.arrayOf(LanguagePropType),
-  selected: _propTypes.default.arrayOf(LanguagePropType),
-  onChange: _propTypes.default.func
-});