Merge pull request #10 from tinloof/document-icon-preview

Media preview now renders document icon + fix overflow styling issue

package.json

@@ -14,7 +14,8 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "publish-packages": "turbo run build --filter='./packages/*' lint && changeset version && changeset publish",
     "postinstall": "manypkg check",
-    "fix:deps": "manypkg fix && pnpm install"
+    "fix:deps": "manypkg fix && pnpm install",
+    "typecheck": "turbo run typecheck"
   },
   "engines": {
     "node": ">=18"

packages/sanity-studio/package.json

@@ -17,7 +17,8 @@
     "lint": "eslint .",
     "prepublishOnly": "run-s build",
     "watch": "pkg-utils watch --strict",
-    "dev": "run-s watch"
+    "dev": "run-s watch",
+    "typecheck": "tsc --noEmit"
   },
   "exports": {
     ".": {

packages/sanity-studio/src/components/PathnameFieldComponent.tsx

@@ -94,7 +94,7 @@ export function PathnameFieldComponent(props: ObjectFieldProps<SlugValue>) {
       locale: i18nOptions.enabled ? document.locale : undefined,
       pathname: value?.current,
     },
-    i18nOptions.defaultLocaleId
+    i18nOptions.defaultLocaleId || ""
   );
 
   const pathInput = useMemo(() => {
@@ -141,7 +141,7 @@ export function PathnameFieldComponent(props: ObjectFieldProps<SlugValue>) {
               disabled={readOnly}
             />
           </Box>
-          <PreviewButton localizedPathname={localizedPathname} />
+          <PreviewButton localizedPathname={localizedPathname || ""} />
         </Flex>
       );
     }
@@ -159,7 +159,7 @@ export function PathnameFieldComponent(props: ObjectFieldProps<SlugValue>) {
             style={{ flex: 1 }}
           />
         </Box>
-        <PreviewButton localizedPathname={localizedPathname} />
+        <PreviewButton localizedPathname={localizedPathname || ""} />
       </Flex>
     );
   }, [

packages/sanity-studio/src/plugins/i18n/index.ts

@@ -80,8 +80,8 @@ export type SanityI18NPluginOptions = {
 // Extracts the schema types that have a locale field
 function extractTranslatableSchemaTypes(schemas: BaseSchemaDefinition[]) {
   return schemas
-    .filter((schema: DocumentDefinition) =>
+    .filter((schema: any) =>
       schema?.fields?.find((field) => field.name === "locale")
     )
-    .map((schema: DocumentDefinition) => schema.name);
+    .map((schema) => schema.name);
 }

packages/sanity-studio/src/plugins/navigator/components/DefaultPagesNavigator.tsx

@@ -31,14 +31,15 @@ function DefaultPagesNavigator(props: PagesNavigatorOptions) {
 
   const [data, loading] = useSanityFetch({
     query: pagesRoutesQuery,
+    variables: {},
   });
 
   return (
     <ThemeProvider>
       <NavigatorProvider i18n={props.i18n} data={data || []}>
         <Header pages={props.creatablePages}>
           <SearchBox />
-          {props.i18n?.locales.length > 1 ? (
+          {props.i18n?.locales?.length && props.i18n.locales.length > 1 ? (
             <LocaleSelect locales={props.i18n.locales} />
           ) : null}
         </Header>

packages/sanity-studio/src/plugins/navigator/components/List.tsx

@@ -30,11 +30,11 @@ const ListWrapper = styled(Box)`
   border: 2px solid transparent;
   padding: 2px;
   border-radius: 8px;
-  width: 100%;
   height: 88vh;
   overflow-y: auto;
   margin: 0;
   display: flex;
+  gap: 0.25rem;
   flex-direction: column;
 `;
 
@@ -174,44 +174,30 @@ const List = ({ loading }: { loading: boolean }) => {
         aria-label="Pages and folders"
         aria-activedescendant={`item-${activeDescendant}`}
       >
-        <div
-          style={{
-            height: `${virtualizer.getTotalSize()}px`,
-            width: "100%",
-            position: "relative",
-          }}
-        >
-          {virtualizer.getVirtualItems().map((virtualChild) => {
-            const item = items[virtualChild.index];
-            return (
-              <ListItem
-                key={virtualChild.index}
-                item={item}
-                active={activeDescendant}
-                setActive={setActiveDescendant}
-                idx={virtualChild.index}
-                virtualChild={virtualChild}
-              />
-            );
-          })}
-        </div>
+        {virtualizer.getVirtualItems().map((virtualChild) => {
+          const item = items[virtualChild.index];
+          return (
+            <ListItem
+              key={virtualChild.index}
+              item={item}
+              active={activeDescendant}
+              setActive={setActiveDescendant}
+              idx={virtualChild.index}
+              virtualChild={virtualChild}
+            />
+          );
+        })}
       </ListWrapper>
     </Card>
   );
 };
 
-const ListItem = ({
-  item,
-  active,
-  setActive,
-  idx,
-  virtualChild,
-}: ListItemProps) => {
+const ListItem = ({ item, active, setActive, idx }: ListItemProps) => {
   const { defaultLocaleId, setCurrentDir, currentDir } = useNavigator();
   const innerRef = useRef<HTMLLIElement>(null);
   const listItemId = `item-${idx}`;
   const path = localizePathname({
-    pathname: item.pathname,
+    pathname: item.pathname || "",
     localeId: item.locale,
     isDefault: defaultLocaleId === item.locale,
   });
@@ -229,7 +215,7 @@ const ListItem = ({
         id: item._id,
       });
     } else {
-      setCurrentDir(item.pathname);
+      setCurrentDir(item.pathname || "");
     }
   };
 
@@ -278,14 +264,6 @@ const ListItem = ({
       aria-selected={listItemId === active}
       currentScheme={scheme}
       isPreviewed={previewed}
-      style={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: `${virtualChild?.size}px`,
-        transform: `translateY(${virtualChild?.start}px)`,
-      }}
     >
       <Flex align="center" gap={2} flex={1}>
         <Flex

packages/sanity-studio/src/plugins/navigator/components/Preview.tsx

@@ -25,15 +25,15 @@ const PreviewElement = ({
   item: Exclude<TreeNode, FolderTreeNode>; // Only accepts a PageTreeNode, FolderTreeNode is forbidden
   type: "media" | "title" | "subtitle";
   fallback?: React.ReactNode | string;
-}): React.ReactElement => {
+}): React.ReactElement | null => {
   const schema = useSchema();
   const { _id, _type } = item;
 
   const documentPreviewStore = useDocumentPreviewStore();
   const schemaType = schema.get(_type);
 
   const { draft, published, isLoading } = useMemoObservable(
-    () => getPreviewStateObservable(documentPreviewStore, schemaType, _id, ""),
+    () => getPreviewStateObservable(documentPreviewStore, schemaType!, _id, ""),
     [_id, documentPreviewStore, schemaType]
   )!;
 
@@ -44,15 +44,16 @@ const PreviewElement = ({
   });
 
   const showPreview =
-    typeof schemaType.preview?.prepare === "function" && !isLoading;
+    schemaType?.icon ||
+    (typeof schemaType?.preview?.prepare === "function" && !isLoading);
 
   if (type === "media") {
     return showPreview ? (
       <PreviewMedia
         {...previewValues}
         isPlaceholder={isLoading ?? true}
         layout="default"
-        icon={schemaType.icon}
+        icon={schemaType?.icon}
       />
     ) : (
       <>{!isLoading ? fallback : null}</>
@@ -118,10 +119,10 @@ const PreviewMedia = (props: SanityDefaultPreviewProps): React.ReactElement => {
               .image(
                 mediaProp as SanityImageSource /*will only enter this code path if it's compatible*/
               )
-              .width(dimensions?.width)
-              .height(dimensions.height)
+              .width(dimensions?.width || 100)
+              .height(dimensions.height || 100)
               .fit(dimensions.fit)
-              .dpr(dimensions.dpr)
+              .dpr(dimensions.dpr || 1)
               .url() || ""
           }
         />

packages/sanity-studio/src/plugins/navigator/context/index.tsx

@@ -125,7 +125,7 @@ export const NavigatorProvider = ({
   const targetTree = findTreeByPath(rootTree, state.currentDir);
   const currentTree = targetTree || rootTree;
   const items = Object.values(currentTree || rootTree).sort((a, b) =>
-    a.pathname.localeCompare(b.pathname)
+    a.pathname && b.pathname ? a.pathname.localeCompare(b.pathname) : 0
   );
 
   useEffect(() => {
@@ -168,12 +168,12 @@ function searchTree({
       const item: TreeNode = tree[key];
       if (
         item.title.toLowerCase().startsWith(q) ||
-        item.pathname.toLowerCase().startsWith(q) ||
+        item.pathname?.toLowerCase().startsWith(q) ||
         item.title
           .split(" ")
           .some((word) => word.toLowerCase().startsWith(q)) ||
         item.pathname
-          .toLowerCase()
+          ?.toLowerCase()
           .split("/")
           .some((word) => {
             return word.startsWith(q);

packages/sanity-studio/src/plugins/navigator/utils/index.tsx

@@ -1,6 +1,6 @@
 import { capitalize } from "lodash";
 import { useMemoObservable } from "react-rx";
-import { useDocumentStore } from "sanity";
+import { QueryParams, useDocumentStore } from "sanity";
 
 import {
   NormalizedCreatablePage,
@@ -15,7 +15,7 @@ export const useSanityFetch = ({
   variables,
 }: {
   query: string;
-  variables?: Record<string, any>;
+  variables: QueryParams;
 }) => {
   const documentStore = useDocumentStore();
   const subscribe = useMemoObservable(
@@ -44,11 +44,11 @@ export function buildTree(list: Page[]): Tree {
   for (const item of list) {
     const isDraft = item._originalId.startsWith("drafts.");
     const segments =
-      item.pathname === "/" ? [""] : item.pathname.split("/").filter(Boolean);
+      item.pathname === "/" ? [""] : item.pathname?.split("/").filter(Boolean);
     let currentFolder = root;
     let pathSoFar = "";
 
-    segments.forEach((segment, index) => {
+    segments?.forEach((segment, index) => {
       const isFolder = index !== segments.length - 1;
       pathSoFar += `/${segment}`;
 

packages/sanity-studio/src/utils/definePathname.ts

@@ -1,4 +1,5 @@
-import { FieldDefinition, SlugValidationContext, defineField } from "sanity";
+import { defineField, FieldDefinition, SlugValidationContext } from "sanity";
+
 import { PathnameFieldComponent } from "../components/PathnameFieldComponent";
 import { PathnameParams } from "../types";
 
@@ -29,12 +30,12 @@ async function isUnique(
 ): Promise<boolean> {
   const { document, getClient } = context;
   const client = getClient({ apiVersion: "2023-06-21" });
-  const id = document._id.replace(/^drafts\./, "");
+  const id = document?._id.replace(/^drafts\./, "");
   const params = {
     draft: `drafts.${id}`,
     published: id,
     slug,
-    locale: document.locale ?? null,
+    locale: document?.locale ?? null,
   };
   const query = `*[!(_id in [$draft, $published]) && pathname.current == $slug && locale == $locale]`;
   const result = await client.fetch(query, params);

packages/sanity-studio/tsconfig.base.json

@@ -12,7 +12,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "noImplicitAny": true,
+    "noImplicitAny": false,
     "strictNullChecks": true,
     "strictFunctionTypes": true,
     "strictPropertyInitialization": true,

packages/sanity-studio/tsconfig.json

@@ -1,13 +1,9 @@
 {
   "extends": "./tsconfig.base",
   "compilerOptions": {
-    "incremental": true,
-    "noEmit": true,
-    "strictNullChecks": true
+    "incremental": false,
+    "noEmit": true
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-  ],
+  "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["dist", "node_modules"]
 }

turbo.json

@@ -12,6 +12,7 @@
     "dev": {
       "cache": false,
       "persistent": true
-    }
+    },
+    "typecheck": {}
   }
 }