sanity-plugin-iconify 1.1.0 → 1.1.1

package/dist/index.d.ts

@@ -0,0 +1,209 @@
+import { BaseSchemaDefinition } from 'sanity';
+import { IconifyInfo } from '@iconify/types';
+import { Plugin as Plugin_2 } from 'sanity';
+
+export { BaseSchemaDefinition };
+
+/**
+ * Usage in `sanity.config.ts` (or .js)
+ *
+ * ```ts
+ * import { defineConfig } from 'sanity'
+ * import { iconify } from 'sanity-plugin-iconify'
+ *
+ * export default defineConfig({
+ *   // ...
+ *   plugins: [iconify()],
+ * })
+ * ```
+ */
+export declare const iconify: Plugin_2<void | IconifyPluginConfig>;
+
+export declare interface IconifyPluginConfig {
+  collections?: IconPrefix[];
+  showName?: boolean;
+}
+
+export declare interface IconifySearchResult {
+  icons: string[];
+  collections: Record<string, IconifyInfo>;
+}
+
+export declare interface IconOptions {
+  collections?: IconPrefix[];
+  showName?: boolean;
+}
+
+export declare type IconPrefix =
+  | 'material-symbols'
+  | 'material-symbols-light'
+  | 'ic'
+  | 'mdi'
+  | 'ph'
+  | 'solar'
+  | 'tabler'
+  | 'mingcute'
+  | 'ri'
+  | 'bi'
+  | 'carbon'
+  | 'iconamoon'
+  | 'iconoir'
+  | 'ion'
+  | 'lucide'
+  | 'uil'
+  | 'tdesign'
+  | 'teenyicons'
+  | 'clarity'
+  | 'bx'
+  | 'bxs'
+  | 'majesticons'
+  | 'ant-design'
+  | 'gg'
+  | 'octicon'
+  | 'memory'
+  | 'cil'
+  | 'mynaui'
+  | 'basil'
+  | 'pixelarticons'
+  | 'akar-icons'
+  | 'ci'
+  | 'system-uicons'
+  | 'typcn'
+  | 'radix-icons'
+  | 'zondicons'
+  | 'ep'
+  | 'circum'
+  | 'mdi-light'
+  | 'fe'
+  | 'eos-icons'
+  | 'charm'
+  | 'prime'
+  | 'humbleicons'
+  | 'uiw'
+  | 'uim'
+  | 'uit'
+  | 'uis'
+  | 'maki'
+  | 'gridicons'
+  | 'mi'
+  | 'quill'
+  | 'gala'
+  | 'fluent'
+  | 'icon-park-outline'
+  | 'icon-park-solid'
+  | 'icon-park-twotone'
+  | 'icon-park'
+  | 'vscode-icons'
+  | 'jam'
+  | 'heroicons'
+  | 'codicon'
+  | 'pajamas'
+  | 'pepicons-pop'
+  | 'pepicons-print'
+  | 'pepicons-pencil'
+  | 'bytesize'
+  | 'ei'
+  | 'streamline'
+  | 'guidance'
+  | 'fa6-solid'
+  | 'fa6-regular'
+  | 'ooui'
+  | 'nimbus'
+  | 'formkit'
+  | 'line-md'
+  | 'meteocons'
+  | 'svg-spinners'
+  | 'openmoji'
+  | 'twemoji'
+  | 'noto'
+  | 'fluent-emoji'
+  | 'fluent-emoji-flat'
+  | 'fluent-emoji-high-contrast'
+  | 'noto-v1'
+  | 'emojione'
+  | 'emojione-monotone'
+  | 'emojione-v1'
+  | 'fxemoji'
+  | 'streamline-emojis'
+  | 'bxl'
+  | 'logos'
+  | 'simple-icons'
+  | 'cib'
+  | 'fa6-brands'
+  | 'nonicons'
+  | 'arcticons'
+  | 'file-icons'
+  | 'devicon'
+  | 'devicon-plain'
+  | 'skill-icons'
+  | 'brandico'
+  | 'entypo-social'
+  | 'cryptocurrency'
+  | 'cryptocurrency-color'
+  | 'flag'
+  | 'circle-flags'
+  | 'flagpack'
+  | 'cif'
+  | 'gis'
+  | 'map'
+  | 'geo'
+  | 'game-icons'
+  | 'fad'
+  | 'academicons'
+  | 'wi'
+  | 'healthicons'
+  | 'medical-icon'
+  | 'covid'
+  | 'la'
+  | 'eva'
+  | 'dashicons'
+  | 'flat-color-icons'
+  | 'entypo'
+  | 'foundation'
+  | 'raphael'
+  | 'icons8'
+  | 'iwwa'
+  | 'heroicons-outline'
+  | 'heroicons-solid'
+  | 'fa-solid'
+  | 'fa-regular'
+  | 'fa-brands'
+  | 'fa'
+  | 'fluent-mdl2'
+  | 'fontisto'
+  | 'icomoon-free'
+  | 'subway'
+  | 'oi'
+  | 'wpf'
+  | 'simple-line-icons'
+  | 'et'
+  | 'el'
+  | 'vaadin'
+  | 'grommet-icons'
+  | 'whh'
+  | 'si-glyph'
+  | 'zmdi'
+  | 'ls'
+  | 'bpmn'
+  | 'flat-ui'
+  | 'vs'
+  | 'topcoat'
+  | 'il'
+  | 'websymbol'
+  | 'fontelico'
+  | 'ps'
+  | 'feather'
+  | 'mono-icons'
+  | 'pepicons';
+
+export {};
+
+declare module 'sanity' {
+  interface IconDefinition extends BaseSchemaDefinition {
+    type: 'icon';
+    options?: IconOptions;
+  }
+  interface IntrinsicDefinitions {
+    icon: IconDefinition;
+  }
+}

package/dist/index.esm.js

@@ -0,0 +1,459 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { unset, set, definePlugin } from 'sanity';
+import { Grid, Box, Card, Text, TextInput, Button, useToast, Popover, useTheme, studioTheme, ThemeProvider, Stack, Flex } from '@sanity/ui';
+import { useState, useCallback, forwardRef, useId, useRef, useEffect, useMemo } from 'react';
+import { Combobox } from '@headlessui/react';
+import { match } from 'ts-pattern';
+import { useQueryClient, useQuery, keepPreviousData, QueryClient, QueryClientProvider as QueryClientProvider$1 } from '@tanstack/react-query';
+import { useDebounce } from 'use-debounce';
+import styled from 'styled-components';
+import { Icon } from '@iconify/react';
+import { TrashIcon } from '@sanity/icons';
+import { stringToIcon } from '@iconify/utils';
+import { sentenceCase } from 'change-case';
+const BASE_API_URL = "https://api.iconify.design";
+function fetchJson(_ref) {
+  let {
+    url,
+    signal
+  } = _ref;
+  return fetch(url, {
+    signal
+  }).then(response => {
+    if (!response.ok) {
+      throw new Error("Network error: status ".concat(response.status));
+    }
+    return response.json();
+  }).then(result => result, error => {
+    if (error instanceof Error) {
+      throw error;
+    } else {
+      console.error("Unknown error: ".concat(error));
+      throw new Error("Something went wrong");
+    }
+  });
+}
+function useSearch(_ref2) {
+  let {
+    collections
+  } = _ref2;
+  const queryClient = useQueryClient();
+  const [term, setTerm] = useState("");
+  const [debouncedTerm, setDebouncedTerm] = useDebounce(term, 500);
+  const updateTerm = useCallback(function (newTerm) {
+    let updateImmediately = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setTerm(newTerm);
+    if (updateImmediately) {
+      setDebouncedTerm(newTerm);
+    }
+  }, [setDebouncedTerm]);
+  const {
+    isLoading,
+    isError,
+    error,
+    data,
+    isPlaceholderData
+  } = useQuery({
+    queryKey: ["search", collections, debouncedTerm],
+    queryFn: async _ref3 => {
+      let {
+        signal
+      } = _ref3;
+      var _a;
+      const url = new URL("/search", BASE_API_URL);
+      url.searchParams.append("query", debouncedTerm);
+      url.searchParams.append("limit", "60");
+      if (collections) {
+        url.searchParams.append("prefixes", collections.join(","));
+      }
+      const result = debouncedTerm ? await fetchJson({
+        url,
+        signal
+      }) : null;
+      if (result) {
+        Object.entries(result.collections).forEach(_ref4 => {
+          let [prefix, info] = _ref4;
+          queryClient.setQueryData(["iconSetInfo", prefix], info);
+        });
+      }
+      return (_a = result == null ? void 0 : result.icons) != null ? _a : [];
+    },
+    enabled: debouncedTerm.length > 0,
+    placeholderData: keepPreviousData,
+    staleTime: 5 * 60 * 1e3
+    // 5 minutes
+  });
+
+  return {
+    term,
+    setTerm: updateTerm,
+    debouncedTerm,
+    isLoading,
+    isError,
+    error,
+    data,
+    isPreviousData: isPlaceholderData
+  };
+}
+function useIconSetInfo(_ref5) {
+  let {
+    prefix
+  } = _ref5;
+  return useQuery({
+    queryKey: ["iconSetInfo", prefix],
+    queryFn: async _ref6 => {
+      let {
+        signal
+      } = _ref6;
+      var _a;
+      if (!prefix) return null;
+      const url = new URL("/collection", BASE_API_URL);
+      url.searchParams.append("prefix", prefix);
+      url.searchParams.append("info", "true");
+      const result = await fetchJson({
+        url,
+        signal
+      });
+      return (_a = result == null ? void 0 : result.info) != null ? _a : null;
+    },
+    staleTime: Infinity
+  });
+}
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", {
+  value: __freeze(raw || cooked.slice())
+}));
+var _a, _b;
+const ComboboxWrapper = styled(Grid)(_a || (_a = __template(["\n  grid-template-columns: 1fr min-content;\n  position: relative;\n"])));
+const OptionsWrapper = styled(Box)(_b || (_b = __template(["\n  box-sizing: border-box;\n  padding: 0.5rem;\n\n  & [role='listbox'] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(100%, 2.5rem), 1fr));\n    gap: 0.5rem;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    @media (min-width: 650px) {\n      grid-template-columns: repeat(10, minmax(min(100%, 2.5rem), 1fr));\n    }\n  }\n\n  & [role='option'] {\n    display: grid;\n    place-items: center;\n\n    & button {\n      aspect-ratio: 1;\n      cursor: pointer;\n      width: 100%;\n\n      & > [data-ui='Box'] {\n        display: flex;\n      }\n    }\n  }\n"])));
+function MessageWrapper(_ref7) {
+  let {
+    children
+  } = _ref7;
+  return /* @__PURE__ */jsx(Card, {
+    padding: 4,
+    children: /* @__PURE__ */jsx(Text, {
+      align: "center",
+      muted: true,
+      children
+    })
+  });
+}
+const SearchInput = forwardRef((props, ref) => {
+  const {
+    term,
+    selectedIcon,
+    onChange
+  } = props;
+  return /* @__PURE__ */jsx(Combobox.Input, {
+    as: TextInput,
+    ref,
+    inputMode: "search",
+    value: term,
+    onChange,
+    icon: selectedIcon ? /* @__PURE__ */jsx(Icon, {
+      icon: selectedIcon
+    }) : null,
+    placeholder: selectedIcon ? "Search and replace selected icon..." : "Search for an icon..."
+  });
+});
+SearchInput.displayName = "SearchInput";
+function SearchResults(props) {
+  const {
+    state,
+    data
+  } = props;
+  if (state === "initial") {
+    return /* @__PURE__ */jsx(MessageWrapper, {
+      children: "Search for icons"
+    });
+  }
+  if (state === "loading") {
+    return /* @__PURE__ */jsx(MessageWrapper, {
+      children: "Searching..."
+    });
+  }
+  if (state === "error") {
+    return /* @__PURE__ */jsx(MessageWrapper, {
+      children: "Something went wrong..."
+    });
+  }
+  if (state === "empty") {
+    return /* @__PURE__ */jsx(MessageWrapper, {
+      children: "No icons found"
+    });
+  }
+  return /* @__PURE__ */jsx(Combobox.Options, {
+    style: {
+      opacity: state === "stale" ? 0.5 : 1
+    },
+    children: data.map(icon => /* @__PURE__ */jsx(Combobox.Option, {
+      value: icon,
+      children: _ref8 => {
+        let {
+          active
+        } = _ref8;
+        return /* @__PURE__ */jsx(Button, {
+          padding: 3,
+          mode: "bleed",
+          selected: active,
+          children: /* @__PURE__ */jsx(Icon, {
+            icon,
+            width: "100%",
+            height: "100%"
+          })
+        });
+      }
+    }, icon))
+  });
+}
+function UnsetButton(props) {
+  const {
+    onUnset
+  } = props;
+  return /* @__PURE__ */jsx(Card, {
+    border: true,
+    borderLeft: false,
+    padding: 1,
+    display: "flex",
+    children: /* @__PURE__ */jsx(Button, {
+      icon: /* @__PURE__ */jsx(TrashIcon, {}),
+      onClick: onUnset,
+      mode: "bleed",
+      fontSize: 1,
+      padding: 2
+    })
+  });
+}
+function IconifyCombobox(props) {
+  const {
+    selectedIcon,
+    onSelect: pushSelection,
+    collections
+  } = props;
+  const id = useId();
+  const toast = useToast();
+  const inputRef = useRef(null);
+  const {
+    term,
+    setTerm,
+    debouncedTerm,
+    isLoading,
+    isError,
+    error,
+    data,
+    isPreviousData
+  } = useSearch({
+    collections
+  });
+  const handleTermChange = useCallback(event => setTerm(event.target.value), [setTerm]);
+  const handleSelect = useCallback(icon => {
+    pushSelection(icon);
+    setTerm("", true);
+  }, [pushSelection, setTerm]);
+  const handleUnset = useCallback(() => handleSelect(""), [handleSelect]);
+  useEffect(() => {
+    if (isError) {
+      console.error("Iconify input error:", error);
+      toast.push({
+        id,
+        status: "error",
+        title: "Iconify input error",
+        description: error == null ? void 0 : error.message
+      });
+    }
+  }, [error, id, isError, toast]);
+  return /* @__PURE__ */jsxs(ComboboxWrapper, {
+    children: [/* @__PURE__ */jsx(Combobox, {
+      onChange: handleSelect,
+      children: _ref9 => {
+        let {
+          open
+        } = _ref9;
+        return /* @__PURE__ */jsxs(Fragment, {
+          children: [/* @__PURE__ */jsx(SearchInput, {
+            ref: inputRef,
+            term,
+            selectedIcon,
+            onChange: handleTermChange
+          }), /* @__PURE__ */jsx(Popover, {
+            open,
+            placement: "bottom",
+            arrow: false,
+            matchReferenceWidth: true,
+            portal: true,
+            constrainSize: true,
+            referenceElement: inputRef.current,
+            content: /* @__PURE__ */jsx(OptionsWrapper, {
+              children: /* @__PURE__ */jsx(SearchResults, {
+                state: match(true).returnType().with(isLoading, () => "loading").with(!debouncedTerm, () => "initial").with(isError, () => "error").with(!data || data.length === 0, () => "empty").with(isPreviousData, () => "stale").otherwise(() => "data"),
+                data
+              })
+            })
+          })]
+        });
+      }
+    }), selectedIcon ? /* @__PURE__ */jsx(UnsetButton, {
+      onUnset: handleUnset
+    }) : null]
+  });
+}
+const queryClient = new QueryClient();
+function QueryClientProvider(props) {
+  return /* @__PURE__ */jsx(QueryClientProvider$1, {
+    client: queryClient,
+    children: props.children
+  });
+}
+function usePrettyIconName(props) {
+  var _a, _b;
+  const {
+    name
+  } = props;
+  const iconMeta = useMemo(() => {
+    var _a2;
+    return (_a2 = props.iconMeta) != null ? _a2 : name ? stringToIcon(name) : null;
+  }, [name, props.iconMeta]);
+  const iconSetInfo = useIconSetInfo({
+    prefix: (_a = iconMeta == null ? void 0 : iconMeta.prefix) != null ? _a : null
+  });
+  return useMemo(() => {
+    var _a2, _b2;
+    return iconMeta ? {
+      name: sentenceCase(iconMeta.name),
+      collection: (_b2 = (_a2 = iconSetInfo.data) == null ? void 0 : _a2.name) != null ? _b2 : iconMeta.prefix
+    } : null;
+  }, [iconMeta, (_b = iconSetInfo.data) == null ? void 0 : _b.name]);
+}
+function IconifyInput(props) {
+  var _a, _b, _c, _d, _e;
+  const {
+    config,
+    value,
+    onChange: pushChange,
+    schemaType
+  } = props;
+  const selectedIcon = (_a = value == null ? void 0 : value.name) != null ? _a : null;
+  const options = schemaType.options;
+  const collections = !!((_b = options == null ? void 0 : options.collections) == null ? void 0 : _b.length) && options.collections || !!((_c = config == null ? void 0 : config.collections) == null ? void 0 : _c.length) && config.collections || null;
+  const showName = (_e = (_d = options == null ? void 0 : options.showName) != null ? _d : config == null ? void 0 : config.showName) != null ? _e : false;
+  const parentTheme = useTheme();
+  const theme = useMemo(() => parentTheme ? {
+    ...parentTheme.sanity,
+    color: studioTheme.color
+  } : studioTheme, [parentTheme]);
+  const handleSelect = useCallback(icon => {
+    pushChange(icon === "" ? unset() : set(icon, ["name"]));
+  }, [pushChange]);
+  return /* @__PURE__ */jsx(QueryClientProvider, {
+    children: /* @__PURE__ */jsx(ThemeProvider, {
+      theme,
+      children: /* @__PURE__ */jsxs(Stack, {
+        space: 2,
+        children: [/* @__PURE__ */jsx(IconifyCombobox, {
+          selectedIcon,
+          onSelect: handleSelect,
+          collections
+        }), showName && selectedIcon ? /* @__PURE__ */jsx(IconifyNameDisplay, {
+          name: selectedIcon
+        }) : null]
+      })
+    })
+  });
+}
+function IconifyNameDisplay(props) {
+  var _a;
+  const {
+    name
+  } = props;
+  const prettyName = usePrettyIconName({
+    name
+  });
+  return /* @__PURE__ */jsxs(Flex, {
+    gap: 1,
+    children: [/* @__PURE__ */jsx(Text, {
+      size: 1,
+      muted: true,
+      children: "Selected:"
+    }), /* @__PURE__ */jsx(Text, {
+      size: 1,
+      weight: "semibold",
+      children: (_a = prettyName == null ? void 0 : prettyName.name) != null ? _a : name
+    }), (prettyName == null ? void 0 : prettyName.collection) && /* @__PURE__ */jsxs(Text, {
+      size: 1,
+      muted: true,
+      style: {
+        fontStyle: "italic"
+      },
+      children: ["by ", prettyName == null ? void 0 : prettyName.collection]
+    })]
+  });
+}
+function IconifyPreview(props) {
+  const {
+    title
+  } = props;
+  const iconName = typeof props.title === "string" ? stringToIcon(props.title) : null;
+  if (typeof title === "string" && iconName) {
+    return /* @__PURE__ */jsx(QueryClientProvider, {
+      children: /* @__PURE__ */jsx(IconifyPreviewInner, {
+        ...props,
+        iconName: title,
+        iconMeta: iconName
+      })
+    });
+  }
+  return props.renderDefault(props);
+}
+function IconifyPreviewInner(props) {
+  var _a;
+  const {
+    iconMeta,
+    iconName,
+    ...previewProps
+  } = props;
+  const prettyName = usePrettyIconName({
+    iconMeta
+  });
+  return props.renderDefault({
+    ...previewProps,
+    media: /* @__PURE__ */jsx(Icon, {
+      icon: iconName
+    }),
+    title: (_a = prettyName == null ? void 0 : prettyName.name) != null ? _a : iconName,
+    subtitle: prettyName == null ? void 0 : prettyName.collection
+  });
+}
+const iconify = definePlugin(function () {
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    name: "sanity-plugin-iconify",
+    schema: {
+      types: [{
+        name: "icon",
+        title: "Icon",
+        type: "object",
+        fields: [{
+          name: "name",
+          title: "Name",
+          type: "string"
+        }],
+        components: {
+          input: props => /* @__PURE__ */jsx(IconifyInput, {
+            ...props,
+            config
+          }),
+          preview: IconifyPreview,
+          // This makes sure the input component is not indented
+          field: props => props.renderDefault({
+            ...props,
+            level: 0
+          })
+        }
+      }]
+    }
+  };
+});
+export { iconify };
+//# sourceMappingURL=index.esm.js.map