docs: setup components type in studio (#1072)

Author: alexanbj

apps/docs/app/lib/sanity.ts

@@ -0,0 +1,23 @@
+import { type QueryParams, createClient } from '@sanity/client';
+
+export const client = createClient({
+  projectId: 'tq6w17ny',
+  dataset: 'grunnmuren',
+  apiVersion: '2024-09-18',
+  useCdn: true,
+});
+
+export async function sanityFetch<const QueryString extends string>({
+  query,
+  params = {},
+}: {
+  query: QueryString;
+  params?: QueryParams;
+}) {
+  // Not sure what's happening here, but I need to set filterReponse to false to get the data as an array?
+  const { result } = await client.fetch(query, params, {
+    filterResponse: false,
+  });
+
+  return { data: result };
+}

apps/docs/app/routeTree.gen.ts

@@ -11,21 +11,15 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
-import { Route as StudioImport } from './routes/studio'
 import { Route as DocsImport } from './routes/_docs'
 import { Route as DocsIndexImport } from './routes/_docs/index'
+import { Route as StudioSplatImport } from './routes/studio/$'
 import { Route as DocsIkonerImport } from './routes/_docs/ikoner'
 import { Route as DocsKomponenterButtonImport } from './routes/_docs/komponenter/button'
 import { Route as DocsKomponenterBadgeImport } from './routes/_docs/komponenter/badge'
 
 // Create/Update Routes
 
-const StudioRoute = StudioImport.update({
-  id: '/studio',
-  path: '/studio',
-  getParentRoute: () => rootRoute,
-} as any)
-
 const DocsRoute = DocsImport.update({
   id: '/_docs',
   getParentRoute: () => rootRoute,
@@ -37,6 +31,12 @@ const DocsIndexRoute = DocsIndexImport.update({
   getParentRoute: () => DocsRoute,
 } as any)
 
+const StudioSplatRoute = StudioSplatImport.update({
+  id: '/studio/$',
+  path: '/studio/$',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const DocsIkonerRoute = DocsIkonerImport.update({
   id: '/ikoner',
   path: '/ikoner',
@@ -66,20 +66,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DocsImport
       parentRoute: typeof rootRoute
     }
-    '/studio': {
-      id: '/studio'
-      path: '/studio'
-      fullPath: '/studio'
-      preLoaderRoute: typeof StudioImport
-      parentRoute: typeof rootRoute
-    }
     '/_docs/ikoner': {
       id: '/_docs/ikoner'
       path: '/ikoner'
       fullPath: '/ikoner'
       preLoaderRoute: typeof DocsIkonerImport
       parentRoute: typeof DocsImport
     }
+    '/studio/$': {
+      id: '/studio/$'
+      path: '/studio/$'
+      fullPath: '/studio/$'
+      preLoaderRoute: typeof StudioSplatImport
+      parentRoute: typeof rootRoute
+    }
     '/_docs/': {
       id: '/_docs/'
       path: '/'
@@ -124,16 +124,16 @@ const DocsRouteWithChildren = DocsRoute._addFileChildren(DocsRouteChildren)
 
 export interface FileRoutesByFullPath {
   '': typeof DocsRouteWithChildren
-  '/studio': typeof StudioRoute
   '/ikoner': typeof DocsIkonerRoute
+  '/studio/$': typeof StudioSplatRoute
   '/': typeof DocsIndexRoute
   '/komponenter/badge': typeof DocsKomponenterBadgeRoute
   '/komponenter/button': typeof DocsKomponenterButtonRoute
 }
 
 export interface FileRoutesByTo {
-  '/studio': typeof StudioRoute
   '/ikoner': typeof DocsIkonerRoute
+  '/studio/$': typeof StudioSplatRoute
   '/': typeof DocsIndexRoute
   '/komponenter/badge': typeof DocsKomponenterBadgeRoute
   '/komponenter/button': typeof DocsKomponenterButtonRoute
@@ -142,8 +142,8 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/_docs': typeof DocsRouteWithChildren
-  '/studio': typeof StudioRoute
   '/_docs/ikoner': typeof DocsIkonerRoute
+  '/studio/$': typeof StudioSplatRoute
   '/_docs/': typeof DocsIndexRoute
   '/_docs/komponenter/badge': typeof DocsKomponenterBadgeRoute
   '/_docs/komponenter/button': typeof DocsKomponenterButtonRoute
@@ -153,18 +153,23 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | ''
-    | '/studio'
     | '/ikoner'
+    | '/studio/$'
     | '/'
     | '/komponenter/badge'
     | '/komponenter/button'
   fileRoutesByTo: FileRoutesByTo
-  to: '/studio' | '/ikoner' | '/' | '/komponenter/badge' | '/komponenter/button'
+  to:
+    | '/ikoner'
+    | '/studio/$'
+    | '/'
+    | '/komponenter/badge'
+    | '/komponenter/button'
   id:
     | '__root__'
     | '/_docs'
-    | '/studio'
     | '/_docs/ikoner'
+    | '/studio/$'
     | '/_docs/'
     | '/_docs/komponenter/badge'
     | '/_docs/komponenter/button'
@@ -173,12 +178,12 @@ export interface FileRouteTypes {
 
 export interface RootRouteChildren {
   DocsRoute: typeof DocsRouteWithChildren
-  StudioRoute: typeof StudioRoute
+  StudioSplatRoute: typeof StudioSplatRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   DocsRoute: DocsRouteWithChildren,
-  StudioRoute: StudioRoute,
+  StudioSplatRoute: StudioSplatRoute,
 }
 
 export const routeTree = rootRoute
@@ -192,7 +197,7 @@ export const routeTree = rootRoute
       "filePath": "__root.tsx",
       "children": [
         "/_docs",
-        "/studio"
+        "/studio/$"
       ]
     },
     "/_docs": {
@@ -204,13 +209,13 @@ export const routeTree = rootRoute
         "/_docs/komponenter/button"
       ]
     },
-    "/studio": {
-      "filePath": "studio.tsx"
-    },
     "/_docs/ikoner": {
       "filePath": "_docs/ikoner.tsx",
       "parent": "/_docs"
     },
+    "/studio/$": {
+      "filePath": "studio/$.tsx"
+    },
     "/_docs/": {
       "filePath": "_docs/index.tsx",
       "parent": "/_docs"

apps/docs/app/routes/_docs.tsx

@@ -1,4 +1,5 @@
-import appCss from '@/app.css?url';
+import { sanityFetch } from '@/lib/sanity';
+import appCss from '@/styles/app.css?url';
 import { Footer } from '@/ui/footer';
 import { MainNav } from '@/ui/main-nav';
 import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
@@ -10,6 +11,12 @@ import {
   createFileRoute,
   useRouter,
 } from '@tanstack/react-router';
+import { defineQuery } from 'groq';
+
+const COMPONENTS_QUERY = defineQuery(
+  // make sure the slug is always a string so we don't have add fallback value in code just to make TypeScript happy
+  `*[_type == "component"]{ _id, name, 'slug': coalesce(slug.current, '')} | order(name asc)`,
+);
 
 // This is the shared layout for all the Grunnmuren docs pages that are "public", ie not the Sanity studio
 export const Route = createFileRoute('/_docs')({
@@ -22,6 +29,7 @@ export const Route = createFileRoute('/_docs')({
       },
     ],
   }),
+  loader: () => sanityFetch({ query: COMPONENTS_QUERY }),
 });
 
 function RootLayout() {

apps/docs/app/routes/studio.tsx

@@ -0,0 +1,12 @@
+// See https://www.sanity.io/docs/embedding-sanity-studio
+import cssLink from '@/styles/sanity.css?url';
+import { createFileRoute } from '@tanstack/react-router';
+import { Studio } from 'sanity';
+import sanityConfig from 'sanity.config';
+
+export const Route = createFileRoute('/studio/$')({
+  head: () => ({
+    links: [{ rel: 'stylesheet', href: cssLink }],
+  }),
+  component: () => <Studio config={sanityConfig} />,
+});

apps/docs/app/routes/studio/$.tsx

@@ -1,5 +1,6 @@
 import { ChevronDown } from '@obosbbl/grunnmuren-icons-react';
 import { Heading } from '@obosbbl/grunnmuren-react';
+import { getRouteApi } from '@tanstack/react-router';
 import { Link } from '@tanstack/react-router';
 import { Button, Disclosure, DisclosurePanel } from 'react-aria-components';
 
@@ -48,19 +49,6 @@ const MainNavItem = ({ title, subNavItems }: MainNavItemProps) => (
 );
 
 const mainNavItems = [
-  {
-    title: 'Komponenter',
-    subNavItems: [
-      {
-        to: '/komponenter/badge',
-        title: 'Badge',
-      },
-      {
-        to: '/komponenter/button',
-        title: 'Button',
-      },
-    ],
-  },
   {
     title: 'Profil',
     subNavItems: [
@@ -72,15 +60,26 @@ const mainNavItems = [
   },
 ];
 
-export const MainNav = () => (
-  <nav
-    className="-order-1 w-72 max-w-full bg-sky-lightest px-5 py-9"
-    aria-label="Navigasjonsmeny for grunnmuren"
-  >
-    <ul>
-      {mainNavItems.map((mainNavItem) => (
-        <MainNavItem key={mainNavItem.title} {...mainNavItem} />
-      ))}
-    </ul>
-  </nav>
-);
+export const MainNav = () => {
+  const routeApi = getRouteApi('/_docs');
+  const { data } = routeApi.useLoaderData();
+
+  const componentsNavLinks = data.map((component) => ({
+    to: `/komponenter/${component.slug}`,
+    title: component.name as string,
+  }));
+
+  return (
+    <nav
+      className="-order-1 w-72 max-w-full bg-sky-lightest px-5 py-9"
+      aria-label="Navigasjonsmeny for grunnmuren"
+    >
+      <ul>
+        <MainNavItem title="Komponenter" subNavItems={componentsNavLinks} />
+        {mainNavItems.map((mainNavItem) => (
+          <MainNavItem key={mainNavItem.title} {...mainNavItem} />
+        ))}
+      </ul>
+    </nav>
+  );
+};

apps/docs/app/app.css renamed to apps/docs/app/styles/app.css

@@ -11,16 +11,21 @@
     "build:assets": "mkdir -p public/resources/icons && cp -r node_modules/@obosbbl/grunnmuren-icons-svg/src/ public/resources/icons",
     "build:docgen": "node build-docs.js && prettier --write docgen.ts --ignore-path",
     "dev": "vinxi dev",
-    "start": "vinxi start"
+    "start": "vinxi start",
+    "typegen:extract": "sanity schema extract",
+    "typegen:generate": "sanity typegen generate"
   },
   "dependencies": {
     "@code-obos/sanity-auth": "1.4.0",
     "@obosbbl/grunnmuren-icons-react": "workspace:*",
     "@obosbbl/grunnmuren-icons-svg": "workspace:*",
     "@obosbbl/grunnmuren-react": "workspace:*",
+    "@sanity/client": "6.24.1",
+    "@sanity/vision": "3.68.3",
     "@tanstack/react-router": "1.95.1",
     "@tanstack/start": "1.95.1",
     "cva": "1.0.0-beta.2",
+    "groq": "3.68.3",
     "prism-react-renderer": "2.4.1",
     "react": "19.0.0",
     "react-aria-components": "1.5.0",

apps/docs/app/sanity.css renamed to apps/docs/app/styles/sanity.css

@@ -0,0 +1,19 @@
+import { obosAuthStore } from '@code-obos/sanity-auth';
+import { visionTool } from '@sanity/vision';
+import { defineConfig } from 'sanity';
+import { structureTool } from 'sanity/structure';
+import { schemaTypes } from './studio/schema-types';
+
+const dataset = 'grunnmuren';
+
+export default defineConfig({
+  projectId: 'tq6w17ny',
+  dataset: 'grunnmuren',
+  basePath: '/studio',
+  title: 'Grunnmuren - Sanity Studio',
+  auth: obosAuthStore({ dataset }),
+  plugins: [structureTool(), visionTool()],
+  schema: {
+    types: schemaTypes,
+  },
+});