feat: make onPublish prop optional

Author: chrisvxd

apps/docs/pages/docs/api-reference/components/puck.mdx

@@ -29,7 +29,7 @@ export function Editor() {
 | ----------------------------------------------------- | ------------------------------------ | -------------------------------------------------- | -------- |
 | [`config`](#config)                                   | `config: { components: {} }`         | [Config](/docs/api-reference/configuration/config) | Required |
 | [`data`](#data)                                       | `data: { content: [], root: {} }`    | [Data](/docs/api-reference/data)                   | Required |
-| [`onPublish()`](#onpublishdata)                       | `onPublish: async (data) => {}`      | Function                                           | Required |
+| [`onPublish()`](#onpublishdata)                       | `onPublish: async (data) => {}`      | Function                                           | -        |
 | [`headerPath`](#headerpath)                           | `headerPath: "/my-page"`             | String                                             | -        |
 | [`headerTitle`](#headertitle)                         | `headerTitle: "My Page"`             | String                                             | -        |
 | [`onChange()`](#onchangedata)                         | `onChange: (data) => {}`             | Function                                           | -        |
@@ -91,6 +91,8 @@ export function Editor() {
 }
 ```
 
+## Optional props
+
 ### `onPublish(data)`
 
 Callback that triggers when the user hits the "Publish" button. Use this to save the Puck data to your database.
@@ -113,8 +115,6 @@ export function Editor() {
 }
 ```
 
-## Optional props
-
 ### `headerPath`
 
 Set a path to show after the header title

packages/core/components/MenuBar/index.tsx

@@ -24,7 +24,7 @@ export const MenuBar = ({
   appState: AppState;
   data: Data;
   dispatch: (action: PuckAction) => void;
-  onPublish: (data: Data) => void;
+  onPublish?: (data: Data) => void;
   menuOpen: boolean;
   renderHeaderActions?: (props: {
     state: AppState;
@@ -87,7 +87,7 @@ export const MenuBar = ({
         <div>
           <Button
             onClick={() => {
-              onPublish(data);
+              onPublish && onPublish(data);
             }}
             icon={<Globe size="14px" />}
           >

packages/core/components/Puck/index.tsx

@@ -56,7 +56,7 @@ export function Puck({
   data: Data;
   ui?: Partial<UiState>;
   onChange?: (data: Data) => void;
-  onPublish: (data: Data) => void;
+  onPublish?: (data: Data) => void;
   plugins?: Plugin[];
   customUi?: Partial<CustomUi>;
   renderComponentList?: (props: {
@@ -392,7 +392,7 @@ export function Puck({
                         <CustomHeaderActions />
                         <Button
                           onClick={() => {
-                            onPublish(data);
+                            onPublish && onPublish(data);
                           }}
                           icon={<Globe size="14px" />}
                         >
@@ -425,55 +425,16 @@ export function Puck({
                             </IconButton>
                           </div>
                         </div>
-<<<<<<< HEAD
-                        <div className={getClassName("rightSideBarToggle")}>
-                          <IconButton
-                            onClick={() => {
-                              toggleSidebars("right");
-                            }}
-                            title="Toggle right sidebar"
-                          >
-                            <Sidebar focusable="false" />
-                          </IconButton>
-                        </div>
-                      </div>
-                      <div className={getClassName("headerTitle")}>
-                        <Heading rank={2} size="xs">
-                          {headerTitle || rootProps.title || "Page"}
-                          {headerPath && (
-                            <>
-                              {" "}
-                              <code className={getClassName("headerPath")}>
-                                {headerPath}
-                              </code>
-                            </>
-                          )}
-                        </Heading>
-                      </div>
-                      <div className={getClassName("headerTools")}>
-                        <div className={getClassName("menuButton")}>
-                          <IconButton
-                            onClick={() => {
-                              return setMenuOpen(!menuOpen);
-                            }}
-                            title="Toggle menu bar"
-                          >
-                            {menuOpen ? (
-                              <ChevronUp focusable="false" />
-                            ) : (
-                              <ChevronDown focusable="false" />
-=======
                         <div className={getClassName("headerTitle")}>
                           <Heading rank={2} size="xs">
-                            {headerTitle || data.root.props.title || "Page"}
+                            {headerTitle || rootProps.title || "Page"}
                             {headerPath && (
                               <>
                                 {" "}
                                 <code className={getClassName("headerPath")}>
                                   {headerPath}
                                 </code>
                               </>
->>>>>>> b9c0ed2 (feat: introduce UI overrides API)
                             )}
                           </Heading>
                         </div>