sanity-plugin-iconify 1.0.1 → 1.0.3

package/src/iconify-input.tsx

@@ -1,12 +1,14 @@
-import { Flex, Stack, Text } from '@sanity/ui';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { useCallback } from 'react';
+import { Flex, RootTheme, Stack, Text, ThemeProvider, studioTheme, useTheme } from '@sanity/ui';
+import { useCallback, useMemo } from 'react';
 import { ObjectInputProps, set, unset } from 'sanity';
 import { IconifyCombobox } from './combobox';
+import { QueryClientProvider } from './lib/query-client';
 import { IconOptions, IconifyPluginConfig } from './lib/types';
 import { usePrettyIconName } from './lib/use-pretty-icon-name';
 
-const queryClient = new QueryClient();
+// -------------- //
+// ICONIFY INPUT //
+// -------------- //
 
 interface IconifyInputProps extends ObjectInputProps {
   config: IconifyPluginConfig;
@@ -15,8 +17,7 @@ interface IconifyInputProps extends ObjectInputProps {
 export function IconifyInput(props: IconifyInputProps) {
   const { config, value, onChange: pushChange, schemaType } = props;
 
-  const selectedIcon = value?.name ?? null;
-  const prettyName = usePrettyIconName(selectedIcon);
+  const selectedIcon: string | null = value?.name ?? null;
 
   const options: IconOptions = schemaType.options;
   const collections =
@@ -25,6 +26,12 @@ export function IconifyInput(props: IconifyInputProps) {
     null;
   const showName = options?.showName ?? config?.showName ?? false;
 
+  const parentTheme = useTheme();
+  const theme: RootTheme = useMemo(
+    () => (parentTheme ? { ...parentTheme.sanity, color: studioTheme.color } : studioTheme),
+    [parentTheme],
+  );
+
   const handleSelect = useCallback(
     (icon: string) => {
       pushChange(icon === '' ? unset() : set(icon, ['name']));
@@ -33,32 +40,45 @@ export function IconifyInput(props: IconifyInputProps) {
   );
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <Stack space={2}>
-        <IconifyCombobox
-          selectedIcon={selectedIcon}
-          onSelect={handleSelect}
-          collections={collections}
-        />
+    <QueryClientProvider>
+      <ThemeProvider theme={theme}>
+        <Stack space={2}>
+          <IconifyCombobox
+            selectedIcon={selectedIcon}
+            onSelect={handleSelect}
+            collections={collections}
+          />
 
-        {showName && selectedIcon ? (
-          <Flex gap={1}>
-            <Text size={1} muted>
-              Selected:
-            </Text>
+          {showName && selectedIcon ? <IconifyNameDisplay name={selectedIcon} /> : null}
+        </Stack>
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+}
 
-            <Text size={1} weight="semibold">
-              {prettyName?.name ?? selectedIcon}
-            </Text>
+interface IconifyNameDisplayProps {
+  name?: string | null;
+}
 
-            {prettyName?.collection && (
-              <Text size={1} muted style={{ fontStyle: 'italic' }}>
-                by {prettyName?.collection}
-              </Text>
-            )}
-          </Flex>
-        ) : null}
-      </Stack>
-    </QueryClientProvider>
+function IconifyNameDisplay(props: IconifyNameDisplayProps) {
+  const { name } = props;
+  const prettyName = usePrettyIconName({ name });
+
+  return (
+    <Flex gap={1}>
+      <Text size={1} muted>
+        Selected:
+      </Text>
+
+      <Text size={1} weight="semibold">
+        {prettyName?.name ?? name}
+      </Text>
+
+      {prettyName?.collection && (
+        <Text size={1} muted style={{ fontStyle: 'italic' }}>
+          by {prettyName?.collection}
+        </Text>
+      )}
+    </Flex>
   );
 }

package/src/iconify-preview.tsx

@@ -1,20 +1,46 @@
 import { Icon } from '@iconify/react';
 import { PreviewProps } from 'sanity';
 import { usePrettyIconName } from './lib/use-pretty-icon-name';
+import { IconifyIconName, stringToIcon } from '@iconify/utils';
+import { QueryClientProvider } from './lib/query-client';
+
+// --------------- //
+// ICONIFY PREVIEW //
+// --------------- //
 
 export function IconifyPreview(props: PreviewProps) {
   const { title } = props;
-  const prettyName = usePrettyIconName(typeof title === 'string' ? title : null);
+  const iconName = typeof props.title === 'string' ? stringToIcon(props.title) : null;
 
   // We check this double to avoid the TS error
-  if (typeof title === 'string' && prettyName) {
-    return props.renderDefault({
-      ...props,
-      media: <Icon icon={title} />,
-      title: prettyName.name,
-      subtitle: prettyName.collection,
-    });
+  if (typeof title === 'string' && iconName) {
+    return (
+      <QueryClientProvider>
+        <IconifyPreviewInner {...props} iconName={title} iconMeta={iconName} />
+      </QueryClientProvider>
+    );
   }
 
   return props.renderDefault(props);
 }
+
+// --------------------- //
+// ICONIFY PREVIEW INNER //
+// --------------------- //
+
+interface IconifyPreviewInnerProps extends PreviewProps {
+  iconName: string;
+  iconMeta: IconifyIconName;
+}
+
+function IconifyPreviewInner(props: IconifyPreviewInnerProps) {
+  const { iconMeta, iconName, ...previewProps } = props;
+  const prettyName = usePrettyIconName({ iconMeta });
+
+  return props.renderDefault({
+    ...previewProps,
+    media: <Icon icon={iconName} />,
+    title: prettyName?.name ?? iconName,
+    subtitle: prettyName?.collection,
+  });
+}

package/src/lib/query-client.tsx

@@ -0,0 +1,11 @@
+import {
+  QueryClient,
+  QueryClientProvider as ReactQueryClientProvider,
+} from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+export const queryClient = new QueryClient();
+
+export function QueryClientProvider(props: { children: ReactNode }) {
+  return <ReactQueryClientProvider client={queryClient}>{props.children}</ReactQueryClientProvider>;
+}

package/src/lib/use-pretty-icon-name.ts

@@ -1,10 +1,19 @@
-import { stringToIcon } from '@iconify/utils';
+import { IconifyIconName, stringToIcon } from '@iconify/utils';
 import { sentenceCase } from 'change-case';
 import { useMemo } from 'react';
 import { useIconSetInfo } from './api';
 
-export function usePrettyIconName(name?: string | null) {
-  const iconMeta = useMemo(() => (name ? stringToIcon(name) : null), [name]);
+interface UsePrettyIconNameProps {
+  name?: string | null;
+  iconMeta?: IconifyIconName | null;
+}
+
+export function usePrettyIconName(props: UsePrettyIconNameProps) {
+  const { name } = props;
+  const iconMeta = useMemo(
+    () => props.iconMeta ?? (name ? stringToIcon(name) : null),
+    [name, props.iconMeta],
+  );
   const iconSetInfo = useIconSetInfo({ prefix: iconMeta?.prefix ?? null });
 
   return useMemo(