@bigbinary/neeto-molecules 1.1.77 → 1.2.0-beta1

package/types/Sidebar.d.ts

@@ -1,42 +1,28 @@
+import { filters } from "@bigbinary/neeto-filters-frontend";
 import React from "react";
 import { NavLinkProps } from "react-router-dom";
-import { AvatarProps } from "@bigbinary/neetoui";
 type NavLinkItemType = {
-  to: string;
+  to?: string;
   label?: React.ReactNode;
   icon?: any;
   description?: React.ReactNode;
-  isActive: () => boolean;
+  isActive?: () => boolean;
+  count?: number;
+  type?: string;
+  filters?: filters;
+  checkpointKey?: string;
+  isConfigureNavLink?: boolean;
+  isCountsLoading?: 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,
+ * The Sidebar component is used in neeto products for showing navigation links
  *
- * app switcher etc. App switcher UI & Changelog display UI are all implemented
+ * that take the user to different parts of the app. The sidebar is collapsible and
  *
- * internally in this component.
+ * can be toggled by clicking on the chevron icon.
  *
- * ![image](https://user-images.githubusercontent.com/29166133/220422846-7cb06cd1-396c-4f5e-b493-531c96c70e43.png|height=200|width=300)
+ * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/12969853/9be99f89-97cf-4295-acbf-ec39c658f68f|height=200|width=300)
  *
  * @example 
  *
@@ -47,7 +33,7 @@ interface HelpLinks {
  *   // custom app logic
  *   return (
  *     <div>
- *       <Sidebar showAppSwitcher={false} navLinks={SIDEBAR_LINKS} />
+ *       <Sidebar navLinks={SIDEBAR_LINKS} />
  *       {children}
  *     </div>
  *   );
@@ -56,10 +42,8 @@ interface HelpLinks {
 */
 const Sidebar: React.FC<{
   navLinks?: NavLinkItemType[];
-  profileInfoOverrides?: ProfileInfo & AvatarProps;
-  helpLinkOverrides?: HelpLinks;
-  extraTopLinks?: LinkType[];
-  showAppSwitcher?: boolean;
   customLogo?: any;
+  isCountsLoading?: boolean;
+  homePath?: string;
 }>;
 export default Sidebar;

package/types/SubHeader.d.ts

@@ -19,7 +19,6 @@ type ColumnsButtonProps = {
   actionBlock?: React.ReactNode;
   checkboxProps?: Partial<CheckboxProps>;
   columnData?: ColumnData[];
-  fixedColumns?: string[];
   isSearchable?: boolean;
   localStorageKey?: string;
   initialValue?: string[];

package/types/SuffixedInput.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+/**
+ *
+ * This component can be used to display an input where the value is customizable
+ *
+ * by the user, but not the suffix. eg: Emails, blog urls etc.
+ *
+ * @example 
+ *
+ * import SuffixedInput from "@bigbinary/neeto-molecules/SuffixedInput";
+ * 
+ * const MailboxConfiguration = () => {
+ *   return (
+ *     <Form
+ *       formikProps={{
+ *         initialValues: { email: "" },
+ *         onSubmit: noop,
+ *         onreset: noop,
+ *       }}
+ *     >
+ *       {({ values: { email } }) => (
+ *         <div className="w-full p-6">
+ *           <SuffixedInput {...{ ...args }} value={email} name="email" />
+ *         </div>
+ *       )}
+ *     </Form>
+ *   );
+ * };
+ * @endexample
+*/
+const SuffixedInput: React.FC<{
+  placeholder?: string;
+  helpUrl?: string;
+  helpIconTooltipContent?: string;
+  label: string;
+  value: string;
+  getInputRef?: (ref: HTMLInputElement | null) => void;
+  suffix: string;
+  isCopyToClipboardEnabled?: boolean;
+  name?: string;
+  inputProps?: object;
+}>;
+export default SuffixedInput;

package/types/ToggleFeatureCard.d.ts

@@ -1,5 +1,12 @@
 import React from "react";
-import { InputProps, SwitchProps } from "neetoui";
+import { InputProps, SwitchProps as NeetoUISwitchProps } from "neetoui";
+type TooltipProps = {
+  enabledSwitchText?: string;
+  disabledSwitchText?: string;
+};
+interface SwitchProps extends NeetoUISwitchProps {
+  tooltipProps?: TooltipProps;
+}
 /**
  *
  * ToggleFeatureCard can be used to enable or disable a setting, and supports