@bigbinary/neeto-molecules 1.0.97 → 1.0.99

package/types/Settings.d.ts

@@ -0,0 +1,95 @@
+import React, { ReactNode } from "react";
+import { IntegrationCardProps } from "./IntegrationCard";
+type SettingItem = {
+  label: string;
+  path: string;
+} & Partial<IntegrationCardProps>;
+type SettingCategory = {
+  id: string;
+  label: string;
+  isIntegration?: boolean;
+  items: SettingItem[];
+};
+/**
+ *
+ * Settings can be used to create a settings page card layout.
+ *
+ * ![image](https://github.com/bigbinary/neeto-molecules/assets/66865722/16af3d07-e96a-4b4e-8013-ed6fa577c7b8|height=200|width=300)
+ *
+ * @example 
+ *
+ * categories={[
+ *   {
+ *     id: "general-settings",
+ *     label: "General Settings",
+ *     items: [
+ *       {
+ *         label: 'Ticket tags',
+ *         description: 'Create and manage tags',
+ *         icon: TicketIcon,
+ *         path: '/settings/general/ticket_tags'
+ *         dataCy: 'Ticket tags' //dataCy can be passed here.
+ *         // other props will be passed on to the setting card.
+ *       }
+ *       ...
+ *       ...
+ *       //more items
+ *     ]
+ *   },
+ *   {
+ *     id: "integrations",
+ *     isIntegration: true //Integrations section MUST have 'isIntegration: true',
+ *     label: "Integrations",
+ *     items: [
+ *       {
+ *         label: 'Github',
+ *         description: 'Connect with github',
+ *         icon: GithubIcon
+ *         onConnect: () => setIsIntegrationModalOpen(true)
+ *         onDisconnect: ()=> setIsIntegrationDisconnectModalOpen(true)
+ *         ...
+ *         ...
+ *         //rest of the props for IntegrationCard should be passed here.
+ *         // other props will be passed on to the integration card.
+ *       }
+ *     ],
+ *   },
+ *   ...
+ *   ...
+ *   //more categories
+ * ]}
+ * @endexample
+ * Note: This component also supports "scroll-into-view" functionality to scroll
+ *
+ * specific setting categories into view, based on the query params. For example,
+ *
+ * the page will scroll to the "Integrations" category, when the query params
+ *
+ * contain ?category=integrations. The query param should be the id of the
+ *
+ * category.
+ *
+ * @example 
+ *
+ * import React, { useState } from "react";
+ * import Settings from "@bigbinary/neeto-molecules/Settings";
+ * import { Modal as IntegrationModal } from "neetointegrations"
+ * import { getCategories } from "./utils";
+ * 
+ * const SettingsPage = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ * 
+ *   return (
+ *     <div>
+ *       <Settings categories={getCategories({setIsIntegrationModalOpen: setIsOpen})} />
+ *       <IntegrationModal isOpen={isOpen}>
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const Settings: React.FC<{
+  categories: SettingCategory[];
+  className?: string;
+}>;
+export default Settings;

package/types/ToggleFeatureCard.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { InputProps, SwitchProps } from "neetoui";
 /**
  *
  * ToggleFeatureCard can be used to enable or disable a setting, and supports
@@ -19,14 +20,7 @@ const ToggleFeatureCard: React.FC<{
   descriptionDataCy?: string;
   isDisabled?: boolean;
   children?: React.ReactNode | null;
-  inputProps: {
-    name: string;
-    display?: React.ReactNode | null;
-    label?: string;
-    editButtonTooltip?: string;
-    editButtonDataCy?: string;
-    placeholder?: string;
-    dataCy?: string;
-  };
+  inputProps?: InputProps;
+  switchProps?: SwitchProps;
 }>;
 export default ToggleFeatureCard;