@bigbinary/neeto-molecules 1.5.0-beta.0 → 1.6.0

package/types/Onboarding.d.ts

@@ -0,0 +1,87 @@
+import React from "react";
+import { ButtonProps } from "@bigbinary/neetoui";
+interface OnboardingScreen {
+  title: string;
+  description: string;
+  buttonProps: ButtonProps;
+  className: string;
+}
+;
+export
+/**
+ *
+ * WelcomeScreen is used to show a welcome screen in the onboarding flow of
+ *
+ * neeto.
+ *
+ * @example 
+ *
+ * import {
+ *   WelcomeScreen,
+ *   CompletedScreen,
+ * } from "@bigbinary/neeto-molecules/Onboarding";
+ * 
+ * const Onboarding = () => {
+ *   const [currentStep, setCurrentStep] = useState(ONBOARDING_STEPS.WELCOME);
+ * 
+ *   return (
+ *     <>
+ *       {currentStep === ONBOARDING_STEPS.WELCOME && (
+ *         <WelcomeScreen
+ *           title="Welcome to neetoDesk"
+ *           description="Let's customize neetoDesk so that it meets your needs."
+ *         />
+ *       )}
+ *       {currentStep === ONBOARDING_STEPS.COMPLETED && (
+ *         <CompletedScreen
+ *           title="Your neetoDesk is ready."
+ *           description="If you have any question at any time you can click on the help icon on the left hand side and have a 'live chat' with us."
+ *           buttonProps={{ label: "Start using neetoDesk" }}
+ *         />
+ *       )}
+ *     </>
+ *   );
+ * };
+ * @endexample
+*/
+const WelcomeScreen: React.FC<OnboardingScreen>;
+export
+/**
+ *
+ * CompletedScreen is used to show a completed screen in the onboarding flow of
+ *
+ * neeto.
+ *
+ * @example 
+ *
+ * import {
+ *   WelcomeScreen,
+ *   CompletedScreen,
+ * } from "@bigbinary/neeto-molecules/Onboarding";
+ * 
+ * const Onboarding = () => {
+ *   const [currentStep, setCurrentStep] = useState(ONBOARDING_STEPS.WELCOME);
+ * 
+ *   return (
+ *     <>
+ *       {currentStep === ONBOARDING_STEPS.WELCOME && (
+ *         <WelcomeScreen
+ *           title="Welcome to neetoDesk"
+ *           description="Let's customize neetoDesk so that it meets your needs."
+ *         />
+ *       )}
+ *       {currentStep === ONBOARDING_STEPS.COMPLETED && (
+ *         <CompletedScreen
+ *           title="Your neetoDesk is ready."
+ *           description="If you have any question at any time you can click on the help icon on the left hand side and have a 'live chat' with us."
+ *           buttonProps={{ label: "Start using neetoDesk" }}
+ *         />
+ *       )}
+ *     </>
+ *   );
+ * };
+ * @endexample
+*/
+const CompletedScreen: React.FC<{
+  children: React.ReactNode;
+}> & OnboardingScreen;

package/types/Sidebar.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { NavLinkProps } from "react-router-dom";
-import { AvatarProps } from "@bigbinary/neetoui";
 type NavLinkItemType = {
   to: string;
   label?: React.ReactNode;
@@ -8,35 +7,13 @@ type NavLinkItemType = {
   description?: React.ReactNode;
   isActive: () => boolean;
 } & React.PropsWithoutRef<NavLinkProps<any>> & React.RefAttributes<HTMLAnchorElement>;
-type LinkType = {
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  label?: React.ReactNode;
-  icon?: any;
-} & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-interface ProfileInfo {
-  name?: string;
-  email?: string;
-  topLinks?: LinkType[];
-  bottomLinks?: LinkType[];
-  customContent?: React.ReactNode;
-  changelogProps?: LinkType;
-  helpProps?: LinkType;
-}
-interface HelpLinks {
-  liveChatProps?: LinkType;
-  helpCenterProps?: LinkType;
-  changelogProps?: ChangeLogPropsType;
-  keyboardShortcutProps?: LinkType;
-}
 /**
  *
- * Used in neeto products for showing options like: settings, profile, whats new,
- *
- * app switcher etc. App switcher UI & Changelog display UI are all implemented
+ * The Sidebar component is used in neeto products for showing navigation links
  *
- * internally in this component.
+ * that take the user to different parts of the app. The sidebar is collapsible and
  *
- * ![image](https://user-images.githubusercontent.com/29166133/220422846-7cb06cd1-396c-4f5e-b493-531c96c70e43.png|height=200|width=300)
+ * can be toggled by clicking on the chevron icon.
  *
  * @example 
  *
@@ -47,7 +24,7 @@ interface HelpLinks {
  *   // custom app logic
  *   return (
  *     <div>
- *       <Sidebar showAppSwitcher={false} navLinks={SIDEBAR_LINKS} />
+ *       <Sidebar navLinks={SIDEBAR_LINKS} />
  *       {children}
  *     </div>
  *   );
@@ -56,10 +33,6 @@ interface HelpLinks {
 */
 const Sidebar: React.FC<{
   navLinks?: NavLinkItemType[];
-  profileInfoOverrides?: ProfileInfo & AvatarProps;
-  helpLinkOverrides?: HelpLinks;
-  extraTopLinks?: LinkType[];
-  showAppSwitcher?: boolean;
   customLogo?: any;
 }>;
 export default Sidebar;