feat: add backstage/ui hooks documentation

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

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

@@ -0,0 +1,23 @@
+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/page.mdx

@@ -0,0 +1,34 @@
+import { CodeBlock } from '@/components/CodeBlock';
+import { ComponentCard, ComponentCards } from '@/components/ComponentCards';
+
+# Hooks
+
+Backstage UI custom hooks provide easy access to design system features, style management, and responsive interface creation.
+
+<ComponentCards>
+  <ComponentCard
+    title="useBreakpoint"
+    description="Hook to detect current responsive breakpoints and manage adaptive behaviors."
+    href="/hooks/use-breakpoint"
+  />
+  <ComponentCard
+    title="useMediaQuery"
+    description="Hook to evaluate and react to CSS media queries programmatically."
+    href="/hooks/use-media-query"
+  />
+  <ComponentCard
+    title="useStyles"
+    description="Main hook to access and manipulate Backstage design system styles."
+    href="/hooks/use-styles"
+  />
+  <ComponentCard
+    title="useSurface"
+    description="Hook to manage surfaces and elevation levels in the interface."
+    href="/hooks/use-surface"
+  />
+  <ComponentCard
+    title="useIsomorphicLayoutEffect"
+    description="Isomorphic version of useLayoutEffect that works on both client and server."
+    href="/hooks/use-isomorphic-layout-effect"
+  />
+</ComponentCards>