@bigbinary/neeto-molecules 1.0.111 → 1.0.112

package/types/NavigationHeader.d.ts

@@ -0,0 +1,145 @@
+import React from "react";
+import Rename from "./Rename";
+type TooltipPropType = {
+  content: string;
+  position: string;
+};
+type HomeButtonPropType = {
+  tooltip: TooltipPropType;
+  icon: React.ReactNode;
+};
+type HeaderLinkPropType = {
+  key: string;
+  to: string;
+  label: string;
+};
+type RightActionBlockPropTypes = {
+  isDraftBlockHidden: boolean;
+  previewDraftUrl: string;
+  isResetDraftButtonVisible: boolean;
+  onResetClick: () => void;
+  isResetting: boolean;
+  isPublishDisabled: boolean;
+  isPublishing: boolean;
+  handlePublish: () => void;
+  isPublishPreviewDisabled: boolean;
+  previewPublishedUrl: string;
+  isPublishButtonVisible: boolean;
+  isResetAlertOpen: boolean;
+  setIsResetAlertOpen: () => void;
+  handleReset: () => void;
+  publishAlertTitle: string;
+  publishAlertDescription: string;
+};
+type NavigationLinkPropsType = {
+  headerLinks: HeaderLinkPropType[];
+};
+type LeftBlockPropTypes = {
+  homeButtonProps?: HomeButtonPropType;
+  homeUrl: string;
+  renameProps?: Rename;
+  children?: React.ReactNode;
+};
+/**
+ *
+ * A common component to use as navigation header.
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
+ * 
+ * const Page = () => (
+ *   <NavigationHeader
+ *     leftActionBlock={<NavigationHeader.LeftActionBlock {...leftBlockProps} />}
+ *     rightActionBlock={<NavigationHeader.RightActionBlock {...rightBlockProps} />}
+ *     navigationLinks={<NavigationHeader.NavigationLinks {...navigationLinkProps} />}
+ *   />
+ * );
+ * @endexample
+ * To specify the content to be rendered in the left side of the NavigationHeader.
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
+ * 
+ * const Page = () => (
+ *   <NavigationHeader
+ *     leftActionBlock={<NavigationHeader.LeftActionBlock
+ *       homeButtonProps={{ tooltip: { position: "right" } }}
+ *       homeUrl={homeUrl}
+ *       renameProps={{
+ *         disabled: false,
+ *         dropdownItems: [{ label: "Clone", onClick: noop }],
+ *         placeholder: "Enter a name",
+ *         value: "Feedback form",
+ *         onRename: () => noop,
+ *       }}
+ *     />}
+ *     rightActionBlock={<NavigationHeader.RightActionBlock {...rightBlockProps} />}
+ *     navigationLinks={<NavigationHeader.NavigationLinks {...navigationLinkProps} />}
+ *   />
+ * );
+ * @endexample
+ * To specify the content to be rendered at the center of the NavigationHeader.
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
+ * 
+ * const Page = () => (
+ *   <NavigationHeader
+ *     navigationLinks={<NavigationHeader.NavigationLinks
+ *       headerLinks={[
+ *         { key: "build", to: "/build", label: "Build" },
+ *         { key: "design", to: "/design", label: "Design" },
+ *         { key: "configure", to: "/configure", label: "Configure" },
+ *       ]}
+ *     />}
+ *     rightActionBlock={<NavigationHeader.RightActionBlock {...rightBlockProps} />}
+ *     leftActionBlock={<NavigationHeader.LeftActionBlock {...leftBlockProps} />}
+ *   />
+ * );
+ * @endexample
+ * To specify the content to be rendered in the right side of the NavigationHeader
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
+ * 
+ * const Page = () => (
+ *   <NavigationHeader
+ *     rightActionBlock={<NavigationHeader.RightActionBlock
+ *       isPublishButtonVisible={false}
+ *       draftPreviewUrl="/preview/draft"
+ *       isDraftBlockHidden={false}
+ *       isResetDraftButtonVisible={true}
+ *       isResetting={false}
+ *       onResetClick={noop}
+ *       isPublishDisabled={true}
+ *       isPublishing={false}
+ *       handlePublish={noop}
+ *       isPublishPreviewDisabled={true}
+ *       publishedPreviewUrl="/preview/published"
+ *       setIsResetAlertOpen={noop}
+ *       handleReset={noop}
+ *     />}
+ *     navigationLinks={<NavigationHeader.NavigationLinks {...navigationLinkProps} />}
+ *     leftActionBlock={<NavigationHeader.LeftActionBlock {...leftBlockProps} />}
+ *   />
+ * );
+ * @endexample
+*/
+const NavigationHeader: React.FC<{
+  leftActionBlock?: React.ReactNode;
+  navigationLinks?: React.ReactNode;
+  rightActionBlock?: React.ReactNode;
+}> & {
+  RightActionBlock: React.FC<RightActionBlockPropTypes>;
+  NavigationLinks: React.FC<NavigationLinkPropsType>;
+  LeftActionBlock: React.FC<LeftBlockPropTypes>;
+};
+export default NavigationHeader;