chore: move Docusaurus deps to outer component

(not sure if useful; and seems impractical to move the type definitions out so I didn't move those) Signed-off-by: Hidde de Vries <hidde@hiddedevries.nl>
nl-design-system · Dec 11, 2024 · 4a91fc8 · 4a91fc8
1 parent a9c6175
commit 4a91fc8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/docs/componenten/README.mdx b/docs/componenten/README.mdx
@@ -15,10 +15,14 @@ keywords:
 ---
 
 import { ComponentOverview } from "@site/src/components/ComponentOverview";
+import { useCurrentSidebarCategory } from "@docusaurus/theme-common";
+import { useDocById } from "@docusaurus/theme-common/internal";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 
 # Componenten
 
 De componenten van NL Design System worden met een [estafette aanpak](/handboek/estafettemodel) gemaakt en kunnen dus verschillende statussen hebben.
 
-<BrowserOnly>{() => <ComponentOverview headingLevel={2} />}</BrowserOnly>
+<BrowserOnly>
+  {() => <ComponentOverview headingLevel={2} category={useCurrentSidebarCategory()} useDocById={useDocById} />}
+</BrowserOnly>
diff --git a/src/components/ComponentOverview.tsx b/src/components/ComponentOverview.tsx
@@ -1,17 +1,20 @@
-import type { PropSidebarItem, PropSidebarItemLink } from '@docusaurus/plugin-content-docs';
-import { useCurrentSidebarCategory } from '@docusaurus/theme-common';
-import { useDocById } from '@docusaurus/theme-common/internal';
 import componentProgress from '@nl-design-system/component-progress/dist/index.json';
 import { AccordionProvider, Fieldset, FormToggle, Paragraph } from '@utrecht/component-library-react';
+import type { PropSidebarItem, PropSidebarItemLink } from '@docusaurus/plugin-content-docs';
 import { Checkbox, FormField, FormLabel } from '@utrecht/component-library-react/dist/css-module';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type PropsWithChildren } from 'react';
 import { CardGroup } from './CardGroup';
 import { ComponentCard } from './ComponentCard';
 import { EstafetteBadge } from './EstafetteBadge';
 import { COMPONENT_STATES, normalizeName, relayProjectIds } from '../utils';
 import './ComponentOverview.css';
 
-export const ComponentOverview = () => {
+interface ComponentOverviewProps {
+  category: object;
+  useDocById: object;
+}
+
+export const ComponentOverview = ({ category, useDocById }: PropsWithChildren<ComponentOverviewProps>) => {
   const SEARCH_PARAM = 'filter';
   const SEARCH_VALUES = {
     TODO: 'todo',
@@ -22,7 +25,6 @@ export const ComponentOverview = () => {
     ONLY_IMPLEMENTED: 'geenImplementatie',
   };
 
-  const category = useCurrentSidebarCategory();
   const { location } = window;
   const params = new URLSearchParams(location.search);