@bigbinary/neeto-molecules 1.0.94-beta → 1.0.95-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.0.94-beta",
+  "version": "1.0.95-beta",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",
@@ -53,10 +53,10 @@
     "@bigbinary/neeto-filters-frontend": "^2.11.15",
     "@bigbinary/neeto-icons": "^1.14.0",
     "@bigbinary/neeto-molecules": "^1.0.5",
+    "@bigbinary/neeto-time-zones": "^0.5.0",
     "@bigbinary/neetoui": "^5.1.5",
     "@faker-js/faker": "7.6.0",
     "@honeybadger-io/react": "2.0.1",
-    "@neetohq/timezones": "^0.2.0",
     "@rails/activestorage": "^7.0.5",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.1",
@@ -161,9 +161,9 @@
     "@bigbinary/neeto-filters-frontend": "latest",
     "@bigbinary/neeto-icons": "latest",
     "@bigbinary/neeto-molecules": "latest",
+    "@bigbinary/neeto-time-zones": "latest",
     "@bigbinary/neetoui": "latest",
     "@honeybadger-io/react": "2.0.1",
-    "@neetohq/timezones": "latest",
     "@svgr/webpack": "^6.5.1",
     "antd": "5.9.2",
     "axios": "^0.27.2",

package/src/translations/en.json

@@ -303,6 +303,11 @@
     "integrationDisconnectAlert": {
       "disconnect": "Disconnect"
     },
+    "navigationHeader": {
+      "home": "Home",
+      "resetDescription": "Are you sure you want to reset this form to the last published version? This cannot be undone.",
+      "resetTitle": "Reset form"
+    },
     "publishBlock": {
       "viewDraftVersion": "View draft version",
       "deleteDraftVersion": "Delete draft version. It'll not impact the published version",

package/types/Header.d.ts

@@ -23,10 +23,9 @@ const Header: React.FC<{
   searchProps?: object;
   breadcrumbs?: {
     text: string;
-    link: string;
+    link?: string;
   }[];
   size?: keyof typeof SIZES;
   renderDropdown?: (Dropdown: React.FC<DropdownProps>) => JSX.Element;
-  menuBarToggle?: (...args: any[]) => any;
 }>;
 export default Header;

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;

package/types/Schedule.d.ts

@@ -3,11 +3,11 @@ import React from "react";
  *
  * It is a component which allows setting working hours for the week.
  *
- * To use this component, you should install @neetohq/timezones package.
+ * To use this component, you should install @bigbinary/neeto-time-zones package.
  *
  * @example 
  *
- * yarn add @neetohq/timezones
+ * yarn add @bigbinary/neeto-time-zones
  * @endexample
  * ![image](https://user-images.githubusercontent.com/35630321/198989580-36a91233-8e7b-4300-b980-f50d2b0efcaa.png|height=200|width=300)
  *

package/types/Sidebar.d.ts

@@ -60,5 +60,6 @@ const Sidebar: React.FC<{
   helpLinkOverrides?: HelpLinks;
   extraTopLinks?: LinkType[];
   showAppSwitcher?: boolean;
+  customLogo?: any;
 }>;
 export default Sidebar;