refactor: move standard library to yamllibrary

Author: maxy-shpfy

src/components/shared/FavoriteComponentToggle.tsx

@@ -14,7 +14,6 @@ import { Spinner } from "@/components/ui/spinner";
 import { useGuaranteedHydrateComponentReference } from "@/hooks/useHydrateComponentReference";
 import { cn } from "@/lib/utils";
 import { useComponentLibrary } from "@/providers/ComponentLibraryProvider";
-import { flattenFolders } from "@/providers/ComponentLibraryProvider/componentLibrary";
 import { hydrateComponentReference } from "@/services/componentService";
 import { type ComponentReference } from "@/utils/componentSpec";
 import { MINUTES } from "@/utils/constants";
@@ -143,38 +142,20 @@ const FavoriteToggleButton = withSuspenseWrapper(
 );
 
 const useComponentFlags = (component: ComponentReference) => {
-  const { checkIfUserComponent, componentLibrary } = useComponentLibrary();
+  const { checkIfUserComponent, getComponentLibrary } = useComponentLibrary();
+  const componentLibrary = getComponentLibrary("standard_components");
 
   const isUserComponent = useMemo(
     () => checkIfUserComponent(component),
-    [checkIfUserComponent, component],
-  );
-
-  const flatComponentList = useMemo(
-    () => (componentLibrary ? flattenFolders(componentLibrary) : []),
-    [componentLibrary],
+    [checkIfUserComponent],
   );
 
   const { data: isInLibrary } = useSuspenseQuery({
     queryKey: ["component", "flags", component.digest],
     queryFn: async () => {
       if (!componentLibrary) return false;
 
-      for (const c of flatComponentList) {
-        if (c.name && c.name !== component.name) {
-          // micro optimization to skip components with different names
-          continue;
-        }
-
-        const hydratedComponent = await hydrateComponentReference(c);
-        const digest = c.digest ?? hydratedComponent?.digest;
-
-        if (digest === component.digest) {
-          return true;
-        }
-      }
-
-      return false;
+      return componentLibrary.hasComponent(component);
     },
     staleTime: 10 * MINUTES,
   });

src/components/shared/ReactFlow/FlowSidebar/components/LibraryStates.tsx

@@ -12,7 +12,3 @@ export const LoadingState = () => (
 export const ErrorState = ({ message }: { message: string }) => (
   <SidebarMenuItem className="text-red-500">Error: {message}</SidebarMenuItem>
 );
-
-export const EmptyState = () => (
-  <SidebarMenuItem>No components found</SidebarMenuItem>
-);

src/components/shared/ReactFlow/FlowSidebar/components/index.ts

@@ -1,5 +1,5 @@
 export { default as FolderItem } from "./FolderItem";
 export { default as ImportComponent } from "./ImportComponent";
-export { EmptyState, ErrorState, LoadingState } from "./LibraryStates";
+export { ErrorState, LoadingState } from "./LibraryStates";
 export { default as SearchInput } from "./SearchInput";
 export { default as SearchResults } from "./SearchResults";

src/components/shared/ReactFlow/FlowSidebar/sections/GraphComponents.tsx

@@ -22,7 +22,6 @@ import { useForcedSearchContext } from "@/providers/ComponentLibraryProvider/For
 import type { UIComponentFolder } from "@/types/componentLibrary";
 
 import {
-  EmptyState,
   ErrorState,
   FolderItem,
   ImportComponent,
@@ -131,14 +130,15 @@ function ComponentLibrarySection() {
 
   const { updateSearchFilter } = useForcedSearchContext();
   const {
-    componentLibrary,
     usedComponentsFolder,
     userComponentsFolder,
     isLoading,
     error,
     searchResult,
   } = useComponentLibrary();
 
+  const standardComponentsLibrary = getComponentLibrary("standard_components");
+
   const handleFiltersChange = (filters: string[]) => {
     updateSearchFilter({
       filters,
@@ -147,7 +147,6 @@ function ComponentLibrarySection() {
 
   if (isLoading) return <LoadingState />;
   if (error) return <ErrorState message={(error as Error).message} />;
-  if (!componentLibrary) return <EmptyState />;
 
   if (!remoteComponentLibrarySearchEnabled && searchResult) {
     // If there's a search result, use the SearchResults component
@@ -210,15 +209,9 @@ function ComponentLibrarySection() {
           icon="Cable"
         />
         <Separator />
-        <FolderItem
-          key="standard-library-folder"
-          folder={
-            {
-              name: "Standard library",
-              components: [],
-              folders: componentLibrary.folders,
-            } as UIComponentFolder
-          }
+        <LibraryFolderItem
+          key="standard-library-folder-v2"
+          library={standardComponentsLibrary}
           icon="Folder"
         />
         {githubComponentLibraryEnabled && (

src/providers/ComponentLibraryProvider/ComponentLibraryProvider.test.tsx

@@ -41,15 +41,12 @@ vi.mock("./componentLibrary");
 
 // Import mocked modules
 import * as componentLibraryUtils from "@/providers/ComponentLibraryProvider/componentLibrary";
-import * as componentService from "@/services/componentService";
 import * as componentStore from "@/utils/componentStore";
 import * as getComponentName from "@/utils/getComponentName";
 import * as localforage from "@/utils/localforage";
 
 // Mock implementations
-const mockFetchAndStoreComponentLibrary = vi.mocked(
-  componentService.fetchAndStoreComponentLibrary,
-);
+
 const mockFetchUserComponents = vi.mocked(
   componentLibraryUtils.fetchUserComponents,
 );
@@ -134,7 +131,6 @@ describe("ComponentLibraryProvider - Component Management", () => {
     componentDuplicateDialogProps.handleImportComponent = undefined;
 
     // Setup default mock implementations
-    mockFetchAndStoreComponentLibrary.mockResolvedValue(mockComponentLibrary);
     mockFetchUserComponents.mockResolvedValue(mockUserComponentsFolder);
     mockFetchUsedComponents.mockReturnValue({
       name: "Used Components",

src/providers/ComponentLibraryProvider/ComponentLibraryProvider.tsx

@@ -15,14 +15,10 @@ import {
   isYamlLibraryConfiguration,
 } from "@/components/shared/GitHubLibrary/types";
 import {
-  fetchAndStoreComponentLibrary,
+  COMPONENT_LIBRARY_URL,
   hydrateComponentReference,
 } from "@/services/componentService";
-import type {
-  ComponentFolder,
-  ComponentLibrary,
-  SearchResult,
-} from "@/types/componentLibrary";
+import type { ComponentFolder, SearchResult } from "@/types/componentLibrary";
 import type {
   ComponentReference,
   HydratedComponentReference,
@@ -75,7 +71,6 @@ type AvailableComponentLibraries =
   | string;
 
 type ComponentLibraryContextType = {
-  componentLibrary: ComponentLibrary | undefined;
   userComponentsFolder: ComponentFolder | undefined;
   usedComponentsFolder: ComponentFolder;
   isLoading: boolean;
@@ -142,6 +137,10 @@ function useComponentLibraryRegistry() {
         /**
          * In future we will have other library types,  including "standard_library", "favorite_components", "used_components", etc.
          */
+        [
+          "standard_components",
+          new YamlFileLibrary("Standard library", COMPONENT_LIBRARY_URL),
+        ],
       ]),
     [queryClient],
   );
@@ -193,7 +192,6 @@ export const ComponentLibraryProvider = ({
   const { getComponentLibraryObject, existingComponentLibraries } =
     useComponentLibraryRegistry();
 
-  const [componentLibrary, setComponentLibrary] = useState<ComponentLibrary>();
   const [userComponentsFolder, setUserComponentsFolder] =
     useState<ComponentFolder>();
 
@@ -202,17 +200,6 @@ export const ComponentLibraryProvider = ({
   const [newComponent, setNewComponent] =
     useState<HydratedComponentReference | null>(null);
 
-  // Fetch main component library
-  const {
-    data: rawComponentLibrary,
-    isLoading: isLibraryLoading,
-    error: libraryError,
-    refetch: refetchLibrary,
-  } = useQuery({
-    queryKey: ["componentLibrary"],
-    queryFn: fetchAndStoreComponentLibrary,
-  });
-
   // Fetch user components
   const {
     data: rawUserComponentsFolder,
@@ -233,14 +220,6 @@ export const ComponentLibraryProvider = ({
   );
 
   // Methods
-  const refreshComponentLibrary = useCallback(async () => {
-    const { data: updatedLibrary } = await refetchLibrary();
-
-    if (updatedLibrary) {
-      setComponentLibrary(updatedLibrary);
-    }
-  }, [refetchLibrary]);
-
   const refreshUserComponents = useCallback(async () => {
     const { data: updatedUserComponents } = await refetchUserComponents();
 
@@ -300,30 +279,7 @@ export const ComponentLibraryProvider = ({
         },
       };
 
-      if (componentLibrary) {
-        const uniqueComponents = filterToUniqueByDigest(
-          flattenFolders(componentLibrary),
-        );
-
-        if (!hasNameFilter && filtersSet.size > 1) {
-          // we need specs
-          const hydratedComponents = await Promise.all(
-            uniqueComponents.map(async (c) => {
-              if (!c.spec) {
-                return await hydrateComponentReference(c);
-              }
-              return c;
-            }),
-          );
-
-          result.components.standard = hydratedComponents
-            .filter((c) => c !== null)
-            .filter(componentMatches);
-        } else {
-          result.components.standard =
-            uniqueComponents.filter(componentMatches);
-        }
-      }
+      // classic search is not supported for now
 
       if (userComponentsFolder) {
         const uniqueComponents = filterToUniqueByDigest(
@@ -341,13 +297,13 @@ export const ComponentLibraryProvider = ({
 
       return result;
     },
-    [componentLibrary, userComponentsFolder, usedComponentsFolder],
+    [userComponentsFolder, usedComponentsFolder],
   );
 
   const internalAddComponentToLibrary = useCallback(
     async (hydratedComponent: HydratedComponentReference) => {
       await importComponent(hydratedComponent);
-      await refreshComponentLibrary();
+
       await refreshUserComponents();
       setNewComponent(null);
       setExistingComponent(null);
@@ -360,7 +316,7 @@ export const ComponentLibraryProvider = ({
         }),
       );
     },
-    [refreshComponentLibrary, refreshUserComponents, importComponent],
+    [refreshUserComponents, importComponent],
   );
 
   const handleImportComponent = useCallback(
@@ -379,12 +335,7 @@ export const ComponentLibraryProvider = ({
         console.error("Error importing component:", error);
       }
     },
-    [
-      newComponent,
-      refreshComponentLibrary,
-      refreshUserComponents,
-      importComponent,
-    ],
+    [newComponent, refreshUserComponents, importComponent],
   );
 
   const addToComponentLibraryWithDuplicateCheck = useCallback(
@@ -414,12 +365,7 @@ export const ComponentLibraryProvider = ({
         console.error("Error adding component to library:", error);
       }
     },
-    [
-      userComponentsFolder,
-      refreshComponentLibrary,
-      refreshUserComponents,
-      importComponent,
-    ],
+    [userComponentsFolder, refreshUserComponents, importComponent],
   );
 
   const addToComponentLibrary = useCallback(
@@ -458,7 +404,6 @@ export const ComponentLibraryProvider = ({
             USER_COMPONENTS_LIST_NAME,
             component.name,
           ).then(async () => {
-            await refreshComponentLibrary();
             await refreshUserComponents();
           });
         } else {
@@ -470,7 +415,7 @@ export const ComponentLibraryProvider = ({
         console.error("Error deleting component:", error);
       }
     },
-    [refreshComponentLibrary, refreshUserComponents],
+    [refreshUserComponents],
   );
 
   const handleCloseDuplicationDialog = useCallback(() => {
@@ -497,14 +442,6 @@ export const ComponentLibraryProvider = ({
     };
   }, [currentSearchFilter, searchComponentLibrary]);
 
-  useEffect(() => {
-    if (!rawComponentLibrary) {
-      setComponentLibrary(undefined);
-      return;
-    }
-    setComponentLibrary(rawComponentLibrary);
-  }, [rawComponentLibrary]);
-
   useEffect(() => {
     if (!rawUserComponentsFolder) {
       setUserComponentsFolder(undefined);
@@ -522,12 +459,11 @@ export const ComponentLibraryProvider = ({
     [],
   );
 
-  const isLoading = isLibraryLoading || isUserComponentsLoading;
-  const error = libraryError || userComponentsError;
+  const isLoading = isUserComponentsLoading;
+  const error = userComponentsError;
 
   const value = useMemo(
     () => ({
-      componentLibrary,
       userComponentsFolder,
       usedComponentsFolder,
       isLoading,
@@ -541,7 +477,6 @@ export const ComponentLibraryProvider = ({
       checkIfUserComponent,
     }),
     [
-      componentLibrary,
       userComponentsFolder,
       usedComponentsFolder,
       isLoading,