docs: add localisation example to demo

Author: chrisvxd

apps/demo/app/locales/[locale]/[...puckPath]/client.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { Data } from "@/core/types/Config";
+import { Puck } from "@/core/components/Puck";
+import { Render } from "@/core/components/Render";
+import { Button } from "@/core/components/Button";
+import headingAnalyzer from "@/plugin-heading-analyzer/src/HeadingAnalyzer";
+import config, { UserConfig } from "../../../../config";
+import {
+  LocalisedHeading,
+  localeContext,
+} from "../../../../config/blocks/LocalisedHeading";
+import { useDemoData } from "../../../../lib/use-demo-data";
+import { useState } from "react";
+
+const localisedConfig: UserConfig = {
+  ...config,
+  components: {
+    ...config.components,
+    Heading: LocalisedHeading as any,
+  },
+};
+
+export function Client({
+  path,
+  isEdit,
+  locale,
+}: {
+  path: string;
+  isEdit: boolean;
+  locale: string;
+}) {
+  const { data, resolvedData, key } = useDemoData({
+    path: `locales/${path}`,
+    isEdit,
+  });
+
+  const [currentLocale, setCurrentLocale] = useState(locale);
+
+  if (isEdit) {
+    return (
+      <localeContext.Provider value={currentLocale}>
+        <Puck<UserConfig>
+          config={localisedConfig}
+          data={data}
+          onPublish={async (data: Data) => {
+            localStorage.setItem(key, JSON.stringify(data));
+          }}
+          plugins={[headingAnalyzer]}
+          headerPath={path}
+          overrides={{
+            headerActions: () => (
+              <>
+                <select
+                  onChange={(e) => {
+                    setCurrentLocale(e.currentTarget.value);
+                  }}
+                  value={currentLocale}
+                  style={{ fontSize: 18, border: "none" }}
+                >
+                  <option value="en">en</option>
+                  <option value="de">de</option>
+                </select>
+                <div>
+                  <Button
+                    href={`/locales/${currentLocale}${path}`}
+                    newTab
+                    variant="secondary"
+                  >
+                    View page
+                  </Button>
+                </div>
+              </>
+            ),
+          }}
+        />
+      </localeContext.Provider>
+    );
+  }
+
+  if (data) {
+    return (
+      <localeContext.Provider value={currentLocale}>
+        <Render<UserConfig> config={localisedConfig} data={resolvedData} />
+      </localeContext.Provider>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        height: "100vh",
+        textAlign: "center",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <div>
+        <h1>404</h1>
+        <p>Page does not exist in session storage</p>
+      </div>
+    </div>
+  );
+}
+
+export default Client;

apps/demo/app/locales/[locale]/[...puckPath]/page.tsx

@@ -0,0 +1,35 @@
+import dynamic from "next/dynamic";
+import resolvePuckPath from "../../../../lib/resolve-puck-path";
+import { Metadata } from "next";
+
+const Client = dynamic(() => import("./client"), {
+  ssr: false,
+});
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { framework: string; uuid: string; puckPath: string[] };
+}): Promise<Metadata> {
+  const { isEdit, path } = resolvePuckPath(params.puckPath);
+
+  if (isEdit) {
+    return {
+      title: "Editing: " + path,
+    };
+  }
+
+  return {
+    title: "",
+  };
+}
+
+export default async function Page({
+  params,
+}: {
+  params: { framework: string; uuid: string; locale; puckPath: string[] };
+}) {
+  const { isEdit, path } = resolvePuckPath(params.puckPath);
+
+  return <Client isEdit={isEdit} path={path} locale={params.locale} />;
+}

apps/demo/app/locales/[locale]/page.tsx

@@ -0,0 +1,2 @@
+export { default } from "./[...puckPath]/page";
+export * from "./[...puckPath]/page";

apps/demo/config/blocks/LocalisedHeading/index.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { createContext, useContext } from "react";
+
+import { ComponentConfig } from "@/core";
+import { Heading as _Heading } from "@/core/components/Heading";
+import { Heading } from "../Heading";
+import type { HeadingProps as _HeadingProps } from "@/core/components/Heading";
+import { HeadingProps } from "../Heading";
+
+export const localeContext = createContext("en");
+
+export type LocalisedHeadingProps = Omit<HeadingProps, "text"> & {
+  text: {
+    en: string;
+    de: string;
+  };
+};
+
+export const LocalisedHeading: ComponentConfig<LocalisedHeadingProps> = {
+  fields: {
+    ...Heading.fields,
+    text: {
+      type: "object",
+      objectFields: { en: { type: "text" }, de: { type: "text" } },
+    },
+  },
+  defaultProps: {
+    ...Heading.defaultProps,
+    text: {
+      en: "Hello, world",
+      de: "Hallo, Welt",
+    },
+  },
+  render: ({ text, ...props }) => {
+    const locale = useContext(localeContext);
+
+    return <Heading.render {...props} text={text[locale]} />;
+  },
+};