refactor: migrate to the new format

Signed-off-by: Antony Bouyon <antony.bouyon@believe.com>

docs-ui/src/app/hooks/[slug]/page.tsx

@@ -1,23 +0,0 @@
-import { hooks } from '@/utils/data';
-
-export default async function Page({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
-  const { slug } = await params;
-
-  const { default: Component } = await import(`@/content/hooks/${slug}.mdx`);
-
-  return <Component />;
-}
-
-export function generateStaticParams() {
-  const list = [...hooks];
-
-  return list.map(hook => ({
-    slug: hook.slug,
-  }));
-}
-
-export const dynamicParams = false;

docs-ui/src/app/hooks/use-breakpoint/page.mdx

@@ -3,11 +3,13 @@ import { CodeBlock } from '@/components/CodeBlock';
 import { PageTitle } from '@/components/PageTitle';
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
-import { UseBreakpointExample } from './use-breakpoint.example';
+import { UseBreakpointExample } from './components';
 import {
-  useBreakpointExampleSnippet,
   useBreakpointReturnDefs,
-} from './use-breakpoint.props';
+} from './props-definition';
+import {
+  useBreakpointExampleSnippet
+} from './snippets';
 
 <PageTitle
   title="useBreakpoint"

docs-ui/src/app/hooks/use-breakpoint/props-definition.ts

@@ -21,17 +21,3 @@ export const useBreakpointReturnDefs: Record<string, PropDef> = {
       'Function that takes a breakpoint and returns true if the screen width is at or below that breakpoint',
   },
 };
-
-export const useBreakpointExampleSnippet = `import { useBreakpoint } from '@backstage/ui';
-
-function ResponsiveComponent() {
-  const { breakpoint, up, down } = useBreakpoint();
-
-  return (
-    <div>
-      <p>Current Breakpoint: {breakpoint}</p>
-      {up('md') && <p>The viewport is medium or larger.</p>}
-      {down('sm') && <p>The viewport is small or smaller.</p>}
-    </div>
-  );
-}`;

docs-ui/src/app/hooks/use-breakpoint/snippets.ts

@@ -0,0 +1,13 @@
+export const useBreakpointExampleSnippet = `import { useBreakpoint } from '@backstage/ui';
+
+function ResponsiveComponent() {
+  const { breakpoint, up, down } = useBreakpoint();
+
+  return (
+    <div>
+      <p>Current Breakpoint: {breakpoint}</p>
+      {up('md') && <p>The viewport is medium or larger.</p>}
+      {down('sm') && <p>The viewport is small or smaller.</p>}
+    </div>
+  );
+}`;

docs-ui/src/app/hooks/use-media-query/page.mdx

@@ -2,21 +2,23 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 import { CodeBlock } from '@/components/CodeBlock';
 import { PageTitle } from '@/components/PageTitle';
 import { PropsTable } from '@/components/PropsTable';
-import {
-  useMediaQueryOrientationSnippet,
-  useMediaQueryParamDefs,
-  useMediaQueryPreferencesSnippet,
-  useMediaQueryResponsiveSnippet,
-  useMediaQueryReturnDefs,
-  useMediaQueryUsageSnippet,
-} from './use-media-query.props';
 import { Snippet } from '@/components/Snippet';
 import {
-  UseMediaQueryThemeExample,
+  UseMediaQueryOrientationExample,
   UseMediaQueryPreferencesExample,
   UseMediaQueryResponsiveExample,
-  UseMediaQueryOrientationExample,
-} from './use-media-query.example';
+  UseMediaQueryThemeExample,
+} from './components';
+import {
+  useMediaQueryParamDefs,
+  useMediaQueryReturnDefs,
+} from './props-definition';
+import {
+  useMediaQueryOrientationSnippet,
+  useMediaQueryPreferencesSnippet,
+  useMediaQueryResponsiveSnippet,
+  useMediaQueryUsageSnippet,
+} from './snippets';
 
 <PageTitle
   title="useMediaQuery"

docs-ui/src/app/hooks/use-media-query/props-definition.ts

@@ -0,0 +1,36 @@
+import { type PropDef } from '@/utils/propDefs';
+
+export const useMediaQueryParamDefs: Record<string, PropDef> = {
+  query: {
+    type: 'string',
+    description: 'The CSS media query to evaluate',
+  },
+  options: {
+    type: 'complex',
+    complexType: {
+      name: 'UseMediaQueryOptions',
+      properties: {
+        defaultValue: {
+          type: 'boolean',
+          required: false,
+          description:
+            'Default value to use when rendering on the server, defaults to false',
+        },
+        initializeWithValue: {
+          type: 'boolean',
+          required: false,
+          description:
+            'Whether to initialize with the current value of the media query, or use the default value initially',
+        },
+      },
+    },
+    default: 'defaultValue: false\ninitializeWithValue: true',
+  },
+};
+
+export const useMediaQueryReturnDefs: Record<string, PropDef> = {
+  matches: {
+    type: 'boolean',
+    description: 'True if the media query currently matches',
+  },
+};

docs-ui/src/app/hooks/use-media-query/snippets.ts

@@ -1,40 +1,3 @@
-import { type PropDef } from '@/utils/propDefs';
-
-export const useMediaQueryParamDefs: Record<string, PropDef> = {
-  query: {
-    type: 'string',
-    description: 'The CSS media query to evaluate',
-  },
-  options: {
-    type: 'complex',
-    complexType: {
-      name: 'UseMediaQueryOptions',
-      properties: {
-        defaultValue: {
-          type: 'boolean',
-          required: false,
-          description:
-            'Default value to use when rendering on the server, defaults to false',
-        },
-        initializeWithValue: {
-          type: 'boolean',
-          required: false,
-          description:
-            'Whether to initialize with the current value of the media query, or use the default value initially',
-        },
-      },
-    },
-    default: 'defaultValue: false\ninitializeWithValue: true',
-  },
-};
-
-export const useMediaQueryReturnDefs: Record<string, PropDef> = {
-  matches: {
-    type: 'boolean',
-    description: 'True if the media query currently matches',
-  },
-};
-
 export const useMediaQueryUsageSnippet = `import { useMediaQuery } from '@backstage/ui';
 
 function MyComponent() {