Refine styles

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 <!--__CHANGELOG_ENTRY__-->
 
+## [0.5.0](https://github.com/measuredco/puck/compare/v0.4.1...v0.5.0) (2023-08-14)
+
+
+### Features
+
+* add headerTitle and headerPath APIs ([ae5c7c2](https://github.com/measuredco/puck/commit/ae5c7c2083b16e8f69e9995d74f8be7fffbe6ea5))
+* gracefully fallback if component definition doesn't exist ([d7e3190](https://github.com/measuredco/puck/commit/d7e31901626734ce43cd9161971d9811b6d5c483))
+* refine editor styles ([9e57649](https://github.com/measuredco/puck/commit/9e57649e7bd9444b290122ecbc1c40bc6d88c3d1))
+* support booleans in radios and selects ([acb7a96](https://github.com/measuredco/puck/commit/acb7a96b727c9bc6d4599dcd06e2448c10e82d0f))
+
+
+
+
 ## [0.4.1](https://github.com/measuredco/puck/compare/v0.4.0...v0.4.1) (2023-08-09)
 
 

README.md

@@ -121,6 +121,9 @@ The `<Puck>` component renders the Puck editor.
 - **onChange** (`(Data) => void` [optional]): Callback that triggers when the user makes a change
 - **onPublish** (`(Data) => void` [optional]): Callback that triggers when the user hits the "Publish" button
 - **renderHeader** (`Component` [optional]): Render function for overriding the Puck header component
+- **renderHeaderActions** (`Component` [optional]): Render function for overriding the Puck header actions. Use a fragment.
+- **headerTitle** (`string` [optional]): Set the title shown in the header title
+- **headerPath** (`string` [optional]): Set a path to show after the header title
 - **plugins** (`Plugin[]` [optional]): Array of plugins that can be used to enhance Puck
 
 ### `<Render>`
@@ -155,9 +158,9 @@ A `Field` represents a user input field shown in the Puck interface.
   - **[fieldName]** (`Field`): The Field objects describing the input data for each item
 - **getItemSummary** (`(object, number) => string` [optional]): Function to get the name of each item when using the `array` or `external` field types
 - **defaultItemProps** (`object` [optional]): Default props to pass to each new item added, when using a `array` field type
-- **options** (`object[]`): array of items to render for select-type inputs
+- **options** (`object[]`): array of items to render for select or radio inputs
   - **label** (`string`)
-  - **value** (`string`)
+  - **value** (`string` | `number` | `boolean`)
 - **adaptor** (`Adaptor`): Content adaptor if using the `external` input type
 - **adaptorParams** (`object`): Paramaters passed to the adaptor
 

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

@@ -0,0 +1,90 @@
+"use client";
+
+import { Data } from "@measured/puck/types/Config";
+import { Puck } from "@measured/puck/components/Puck";
+import { Render } from "@measured/puck/components/Render";
+import { Framework } from "../Framework";
+import { useEffect, useState } from "react";
+import { Button } from "@measured/puck/components/Button";
+import headingAnalyzer from "@measured/puck-plugin-heading-analyzer/src/HeadingAnalyzer";
+
+const isBrowser = typeof window !== "undefined";
+
+export function Client({
+  path,
+  isEdit,
+  framework,
+}: {
+  path: string;
+  isEdit: boolean;
+  framework: Framework;
+}) {
+  const config = require(`../configs/${framework}/`).default;
+  const initialData = require(`../configs/${framework}/`).initialData || {};
+
+  const key = `puck-demo:${framework}:${path}`;
+
+  const [data] = useState<Data>(() => {
+    if (isBrowser) {
+      const dataStr = localStorage.getItem(key);
+
+      if (dataStr) {
+        return JSON.parse(dataStr);
+      }
+
+      return initialData[path] || undefined;
+    }
+  });
+
+  useEffect(() => {
+    if (!isEdit) {
+      document.title = data?.root?.title || "";
+    }
+  }, [data, isEdit]);
+
+  if (isEdit) {
+    return (
+      <div>
+        <Puck
+          config={config}
+          data={data}
+          onPublish={async (data: Data) => {
+            localStorage.setItem(key, JSON.stringify(data));
+          }}
+          plugins={[headingAnalyzer]}
+          headerPath={path}
+          renderHeaderActions={() => (
+            <>
+              <Button href={path} newTab variant="secondary">
+                View page
+              </Button>
+            </>
+          )}
+        />
+      </div>
+    );
+  }
+
+  if (data) {
+    return <Render config={config} data={data} />;
+  }
+
+  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/[framework]/[...puckPath]/page.tsx → apps/demo/app/[...puckPath]/page.tsx

@@ -1,8 +1,6 @@
 import dynamic from "next/dynamic";
-import { notFound } from "next/navigation";
 import resolvePuckPath from "./resolve-puck-path";
 import { Metadata } from "next";
-import { Framework, validFrameworks } from "../../Framework";
 
 const Client = dynamic(() => import("./client"), {
   ssr: false,
@@ -33,15 +31,5 @@ export default async function Page({
 }) {
   const { isEdit, path } = resolvePuckPath(params.puckPath);
 
-  if (validFrameworks.indexOf(params.framework) === -1) {
-    return notFound();
-  }
-
-  return (
-    <Client
-      isEdit={isEdit}
-      path={path}
-      framework={params.framework as Framework}
-    />
-  );
+  return <Client isEdit={isEdit} path={path} framework={"custom"} />;
 }

apps/demo/app/configs/custom/blocks/ButtonGroup/index.tsx

@@ -46,7 +46,12 @@ export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
       <Section className={getClassName({ center: align === "center" })}>
         <div className={getClassName("actions")}>
           {buttons.map((button, i) => (
-            <Button key={i} href={button.href} variant={button.variant}>
+            <Button
+              key={i}
+              href={button.href}
+              variant={button.variant}
+              size="large"
+            >
               {button.label}
             </Button>
           ))}

apps/demo/app/configs/custom/blocks/Hero/index.tsx

@@ -122,7 +122,12 @@ export const Hero: ComponentConfig<HeroProps> = {
             <p className={getClassName("subtitle")}>{description}</p>
             <div className={getClassName("actions")}>
               {buttons.map((button, i) => (
-                <Button key={i} href={button.href} variant={button.variant}>
+                <Button
+                  key={i}
+                  href={button.href}
+                  variant={button.variant}
+                  size="large"
+                >
                   {button.label}
                 </Button>
               ))}

apps/demo/app/configs/custom/components/Footer/index.tsx

@@ -54,7 +54,7 @@ const FooterList = ({
 
 const Footer = ({ children }: { children: ReactNode }) => {
   return (
-    <footer style={{ background: "var(--puck-color-grey-10)" }}>
+    <footer style={{ background: "var(--puck-color-grey-11)" }}>
       <h2 style={{ visibility: "hidden", height: 0 }}>Footer</h2>
       <Section padding="32px">
         <div
@@ -74,7 +74,7 @@ const Footer = ({ children }: { children: ReactNode }) => {
           padding: 64,
           textAlign: "center",
           color: "var(--puck-color-grey-2)",
-          background: "var(--puck-color-grey-9)",
+          background: "var(--puck-color-grey-10)",
         }}
       >
         Made by{" "}

apps/demo/app/configs/custom/index.tsx

@@ -54,7 +54,7 @@ export const initialData: Record<string, Data> = {
             },
             {
               label: "Edit this page",
-              href: "/custom/edit",
+              href: "/edit",
               variant: "secondary",
             },
           ],
@@ -289,7 +289,7 @@ export const initialData: Record<string, Data> = {
             },
             {
               label: "Edit this page",
-              href: "/custom/edit",
+              href: "/edit",
               variant: "secondary",
             },
           ],
@@ -302,7 +302,7 @@ export const initialData: Record<string, Data> = {
         props: { size: "96px", id: "VerticalSpace-1687284290127" },
       },
     ],
-    root: { title: "Custom Example" },
+    root: { title: "Puck Example" },
   },
   "/pricing": {
     content: [],