Setup sanity as a cms in project (#626)

* set up sanity

* update workflows

* remove target from tsconfig

* fix broken story

* fix another story

* use hash to allow ssg with studio

* add files

* fix workflows

.github/workflows/check-builds.yml

@@ -15,6 +15,8 @@ env:
   NEXT_PUBLIC_FIREBASE_APP_ID: ${{secrets.VITE_FIREBASE_APP_ID}}
   NEXT_PUBLIC_BACKEND_BASE_URL: ${{secrets.VITE_BACKEND_BASE_URL}}
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: ${{secrets.TEST_STRIPE_PK}}
+  NEXT_PUBLIC_SANITY_PROJECT_ID: ${{secrets.STAGING_SANITY_PROJECT_ID}}
+  NEXT_PUBLIC_SANITY_DATASET: staging
   NEXT_CONFIG_ENV: staging
 
 jobs: 

.github/workflows/deploy-client-production.yml

@@ -13,6 +13,8 @@ env:
   NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{secrets.PROD_MEASUREMENT_ID}}
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: ${{secrets.PROD_STRIPE_PK}}
   DEPLOYMENT_BASE_PATH: ${{secrets.GH_PAGES_BASE_PATH}}
+  NEXT_PUBLIC_SANITY_PROJECT_ID: ${{secrets.PROD_SANITY_PROJECT_ID}}
+  NEXT_PUBLIC_SANITY_DATASET: production
   NEXT_CONFIG_ENV: production
 
 jobs:

.github/workflows/firebase-client-hosting-merge.yml

@@ -15,6 +15,8 @@ env:
   NEXT_PUBLIC_FIREBASE_APP_ID: ${{secrets.VITE_FIREBASE_APP_ID}}
   NEXT_PUBLIC_BACKEND_BASE_URL: ${{secrets.VITE_BACKEND_BASE_URL}}
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: ${{secrets.TEST_STRIPE_PK}}
+  NEXT_PUBLIC_SANITY_PROJECT_ID: ${{secrets.STAGING_SANITY_PROJECT_ID}}
+  NEXT_PUBLIC_SANITY_DATASET: staging
   NEXT_CONFIG_ENV: staging
 
 jobs:

.github/workflows/firebase-client-hosting-pull-request.yml

@@ -13,6 +13,8 @@ env:
   NEXT_PUBLIC_FIREBASE_APP_ID: ${{secrets.VITE_FIREBASE_APP_ID}}
   NEXT_PUBLIC_BACKEND_BASE_URL: ${{secrets.VITE_BACKEND_BASE_URL}}
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: ${{secrets.TEST_STRIPE_PK}}
+  NEXT_PUBLIC_SANITY_PROJECT_ID: ${{secrets.STAGING_SANITY_PROJECT_ID}}
+  NEXT_PUBLIC_SANITY_DATASET: staging
   NEXT_CONFIG_ENV: staging
 
 jobs:

client/environment.d.ts

@@ -23,6 +23,10 @@ declare global {
       readonly NEXT_CONFIG_ENV?: "production" | "staging"
       /** What all paths should be prefixed with */
       readonly DEPLOYMENT_BASE_PATH?: string
+      /** The project to fetch content from in sanity */
+      readonly NEXT_PUBLIC_SANITY_PROJECT_ID: string
+      /** The dataset to use - for local use this should only be set to staging */
+      readonly NEXT_PUBLIC_SANITY_DATASET: "production" | "staging"
     }
   }
 }

client/package.json

@@ -14,19 +14,24 @@
     "generate-types": "openapi-typescript ../server/src/middleware/__generated__/swagger.json -o ./src/models/__generated__/schema.d.ts "
   },
   "dependencies": {
+    "@sanity/image-url": "1",
+    "@sanity/vision": "3",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^4.1.0",
     "@tanstack/react-query": "^5.50.1",
     "firebase": "^10.12.3",
     "next": "14.2.4",
+    "next-sanity": "^9.4.2",
     "openapi-fetch": "~0.9.2",
     "prop-types": "^15.8.1",
     "react": "^18",
     "react-calendar": "^5.0.0",
     "react-csv": "^2.2.2",
     "react-dom": "^18",
     "react-sweet-state": "^2.7.1",
-    "scheduler": "^0.23.2"
+    "sanity": "3",
+    "scheduler": "^0.23.2",
+    "styled-components": "6"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "1.6.1",

client/sanity.cli.ts

@@ -0,0 +1,10 @@
+/**
+ * This configuration file lets you run `$ sanity [command]` in this folder
+ * Go to https://www.sanity.io/docs/cli to learn more.
+ **/
+import { defineCliConfig } from "sanity/cli"
+
+const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
+const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET
+
+export default defineCliConfig({ api: { projectId, dataset } })

client/sanity.config.ts

@@ -0,0 +1,27 @@
+"use client"
+
+/**
+ * This configuration is used to for the Sanity Studio that’s mounted on the `\src\app\studio\[[...tool]]\page.tsx` route
+ */
+
+import { visionTool } from "@sanity/vision"
+import { defineConfig } from "sanity"
+import { structureTool } from "sanity/structure"
+
+// Go to https://www.sanity.io/docs/api-versioning to learn how API versioning works
+import { apiVersion, dataset, projectId } from "./sanity/env"
+import { schema } from "./sanity/schema"
+
+export default defineConfig({
+  basePath: "/studio",
+  projectId,
+  dataset,
+  // Add and edit the content schema in the './sanity/schema' folder
+  schema,
+  plugins: [
+    structureTool(),
+    // Vision is a tool that lets you query your content with GROQ in the studio
+    // https://www.sanity.io/docs/the-vision-plugin
+    visionTool({ defaultApiVersion: apiVersion })
+  ]
+})

client/sanity/env.ts

@@ -0,0 +1,22 @@
+export const apiVersion =
+  process.env.NEXT_PUBLIC_SANITY_API_VERSION || "2024-07-13"
+
+export const dataset = assertValue(
+  process.env.NEXT_PUBLIC_SANITY_DATASET,
+  "Missing environment variable: NEXT_PUBLIC_SANITY_DATASET"
+)
+
+export const projectId = assertValue(
+  process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
+  "Missing environment variable: NEXT_PUBLIC_SANITY_PROJECT_ID"
+)
+
+export const useCdn = false
+
+function assertValue<T>(v: T | undefined, errorMessage: string): T {
+  if (v === undefined) {
+    throw new Error(errorMessage)
+  }
+
+  return v
+}

client/sanity/lib/client.ts

@@ -0,0 +1,11 @@
+import { createClient } from "next-sanity"
+
+import { apiVersion, dataset, projectId, useCdn } from "../env"
+
+export const client = createClient({
+  projectId,
+  dataset,
+  apiVersion,
+  useCdn,
+  perspective: "published"
+})

client/sanity/lib/image.ts

@@ -0,0 +1,13 @@
+import createImageUrlBuilder from "@sanity/image-url"
+import type { Image } from "sanity"
+
+import { dataset, projectId } from "../env"
+
+const imageBuilder = createImageUrlBuilder({
+  projectId: projectId || "",
+  dataset: dataset || ""
+})
+
+export const urlForImage = (source: Image) => {
+  return imageBuilder?.image(source).auto("format").fit("max").url()
+}

client/sanity/schema.ts

@@ -0,0 +1,5 @@
+import { type SchemaTypeDefinition } from "sanity"
+
+export const schema: { types: SchemaTypeDefinition[] } = {
+  types: []
+}

client/src/app/studio/page.tsx

@@ -0,0 +1,16 @@
+"use client"
+/**
+ * This route is responsible for the built-in authoring environment using Sanity Studio.
+ * All routes under your studio path is handled by this file using Next.js' catch-all routes:
+ * https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes
+ *
+ * You can learn more about the next-sanity package here:
+ * https://github.com/sanity-io/next-sanity
+ */
+
+import { NextStudio } from "next-sanity/studio"
+import config from "../../../sanity.config"
+
+export default function StudioPage() {
+  return <NextStudio config={config} history="hash" />
+}

client/src/components/generic/FigmaButtons/FigmaButton.story.tsx

@@ -1,57 +1,47 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta } from "@storybook/react"
 // importing button.tsx as the object
 import Button from "./FigmaButton"
 const meta: Meta<typeof Button> = {
   component: Button,
-  argTypes: {
-    variant: {
-      control: { type: "radio" },
-      options: ["default", "alternative", "secondary"]
-    },
-    children: {
-      name: "content"
-    }
-  }
+  argTypes: {}
 }
 
 export default meta
 
-type Story = StoryObj<typeof meta>
-
 /** Default button variant */
-export const defaultButton: Story = {
+export const defaultButton = {
   tags: ["autodocs"],
   args: {
     variant: "default",
     children: "Default Button Variant"
   }
 }
 
-export const defaultButtonSm: Story = {
+export const defaultButtonSm = {
   tags: ["autodocs"],
   args: {
     variant: "default-sm",
     children: "Default Button Variant Small"
   }
 }
 
-export const defaultButtonInvertedSm: Story = {
+export const defaultButtonInvertedSm = {
   tags: ["autodocs"],
   args: {
     variant: "inverted-default-sm",
     children: "Default Button Variant Inverted Small"
   }
 }
 
-export const defaultButtonInvertedSt: Story = {
+export const defaultButtonInvertedSt = {
   tags: ["autodocs"],
   args: {
     variant: "inverted-default-st",
     children: "Default Button Variant Inverted Standard"
   }
 }
 
-export const TertiaryButton: Story = {
+export const TertiaryButton = {
   tags: ["autodocs"],
   args: {
     variant: "tertiary",
@@ -67,46 +57,46 @@ export const progressButtons = () => (
 )
 
 /** Alternative button variant */
-export const alternativeButton: Story = {
+export const alternativeButton = {
   args: {
     variant: "alternative",
     children: "Alternative Button Variant"
   }
 }
 
 /** Secondary button variant */
-export const secondaryButton: Story = {
+export const secondaryButton = {
   args: {
     variant: "secondary",
     children: "Secondary Button Variant"
   }
 }
 
-export const Undefault: Story = {
+export const Undefault = {
   args: {
     variant: "default",
     children: "Disabled default button",
     disabled: true
   }
 }
 
-export const Unalternative: Story = {
+export const Unalternative = {
   args: {
     variant: "alternative",
     children: "Disabled alternative button",
     disabled: true
   }
 }
 
-export const Unsecondary: Story = {
+export const Unsecondary = {
   args: {
     variant: "secondary",
     children: "Disabled secondary button",
     disabled: true
   }
 }
 
-export const comparison: Story = {
+export const comparison = {
   decorators: [
     () => {
       return (

client/src/components/generic/StepperButtons/StepperButton.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta } from "@storybook/react"
 // importing button.tsx as the object
 import StepperButton from "./StepperButton"
 const meta: Meta<typeof StepperButton> = {
@@ -16,25 +16,23 @@ const meta: Meta<typeof StepperButton> = {
 
 export default meta
 
-type Story = StoryObj<typeof meta>
-
-export const first: Story = {
+export const first = {
   tags: ["autodocs"],
   args: {
     variant: "first",
     children: "confirm"
   }
 }
 
-export const normal: Story = {
+export const normal = {
   tags: ["autodocs"],
   args: {
     variant: "normal",
     children: "Additional"
   }
 }
 
-export const disabled: Story = {
+export const disabled = {
   tags: ["autodocs"],
   args: {
     variant: "normal",