@bigbinary/neeto-molecules 3.15.43 → 3.15.45

package/types/BoardView.d.ts

@@ -0,0 +1,149 @@
+type SectionData = {
+  id: string;
+};
+type ItemData = {
+  id: string;
+};
+type SectionArgs = {
+  section: SectionData;
+  index: number;
+};
+type ItemArgs = {
+  Item: ItemData;
+  section: SectionData;
+  index: number;
+};
+/**
+ *
+ * The BoardView component renders a Kanban board with draggable sections and
+ *
+ * cards. It supports bi-directional auto-scrolling and lazy loading for improved
+ *
+ * performance.
+ *
+ * The main container component for the Kanban board, which wraps all sections.
+ *
+ * A component used within the BoardView to render individual sections.
+ *
+ * @example 
+ *
+ * import BoardView from "neetomolecules/BoardView";
+ * 
+ * // custom Item component
+ * const Item = ({ item }) => (
+ *   <div className=" neeto-ui-bg-white neeto-ui-rounded-sm flex min-h-10 items-center justify-center">
+ *     <h5>Item {item.name}</h5>
+ *   </div>
+ * );
+ * 
+ * // custom Section component.
+ * const Section = ({ section }) => (
+ *   <div className="neeto-ui-bg-gray-300 neeto-ui-rounded-sm p-4">
+ *     <h4 className="text-center">Section {section.name}</h4>
+ *     <BoardView.Section
+ *       {...{ section }}
+ *       items={section.items}
+ *       renderItem={({ item }) => <Item {...{ item }} />}
+ *     />
+ *   </div>
+ * );
+ * 
+ * const Main = () => {
+ *   const [sections, setSections] = useState([
+ *     {
+ *       id: "s1",
+ *       name: "S1",
+ *       items: [
+ *         { id: "s1t1", name: "S1T1" },
+ *         { id: "s1t2", name: "S1T2" },
+ *         { id: "s1t3", name: "S1T3" },
+ *       ],
+ *     },
+ *     {
+ *       id: "s2",
+ *       name: "S2",
+ *       items: [
+ *         { id: "s2t1", name: "S2T1" },
+ *         { id: "s2t2", name: "S2T2" },
+ *         { id: "s2t3", name: "S2T3" },
+ *       ],
+ *     },
+ *     {
+ *       id: "s3",
+ *       name: "S3",
+ *       items: [
+ *         { id: "s3t1", name: "S3T1" },
+ *         { id: "s3t2", name: "S3T2" },
+ *         { id: "s3t3", name: "S3T3" },
+ *       ],
+ *     },
+ *   ]);
+ * 
+ *   const onMoveSection = (source, destination) => {
+ *     setSections(([...sections]) => {
+ *       // destination index may change after removal of source section from list.
+ *       const destinationIndex =
+ *         source.index >= destination.index
+ *           ? destination.index
+ *           : destination.index - 1;
+ * 
+ *       const [section] = sections.splice(source.index, 1);
+ *       sections.splice(destinationIndex, 0, section);
+ * 
+ *       return sections;
+ *     });
+ *   };
+ * 
+ *   const onMoveItem = (source, destination) => {
+ *     setSections(([...sections]) => {
+ *       // destination index may change after removal of item if same section.
+ *       const destinationIndex =
+ *         source.section.id === destination.section.id &&
+ *         source.index >= destination.index
+ *           ? destination.index - 1
+ *           : destination.index;
+ * 
+ *       sections.forEach(section => {
+ *         if (section.id === source.section.id) {
+ *           section.items.splice(source.index, 1);
+ *         }
+ * 
+ *         if (section.id === destination.section.id) {
+ *           section.items.splice(destinationIndex, 0, source.item);
+ *         }
+ *       });
+ * 
+ *       return sections;
+ *     });
+ *   };
+ * 
+ *   return (
+ *     <BoardView
+ *       {...{ onMoveItem, onMoveSection, sections }}
+ *       renderItemOverlay={({ item }) => <Item {...{ item }} />}
+ *       renderSection={({ section }) => <Section {...{ section }} />}
+ *       renderSectionOverlay={({ section }) => <Section {...{ section }} />}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+declare const BoardView: React.FC<{
+  ref?: React.Ref<HTMLDivElement>;
+  sections: SectionData[];
+  renderSection: (args: SectionArgs) => React.ReactNode;
+  renderSectionOverlay: (args: SectionArgs) => React.ReactNode;
+  renderItemOverlay: (args: ItemArgs) => React.ReactNode;
+  onMoveSection?: (source: SectionArgs, destination: SectionArgs) => void;
+  onMoveItem?: (source: ItemArgs, destination: ItemArgs) => void;
+  className?: string;
+}> & {
+  Section: React.FC<{
+    ref?: React.Ref<HTMLDivElement>;
+    section: SectionData;
+    items: ItemData[];
+    renderItem: (args: ItemArgs) => React.ReactNode;
+  }>;
+};
+
+export { BoardView as default };

package/types/Breadcrumbs.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+/**
+ *
+ * Component to show breadcrumbs
+ *
+ * @example 
+ *
+ * import Breadcrumbs from "@bigbinary/neeto-molecules/Breadcrumbs";
+ * 
+ * const SETTINGS_BREADCRUMBS = [
+ *   {
+ *     text: "Settings",
+ *     link: "/admin/settings",
+ *   },
+ * ];
+ * 
+ * const Page = () => <Breadcrumbs Breadcrumbs={SETTINGS_BREADCRUMBS} />;
+ * @endexample
+*/
+declare const Breadcrumbs: React.FC<{
+  breadcrumbs?: {
+    text: string;
+    link: string;
+  }[];
+  hasTrailingSeparator?: boolean;
+  className?: string;
+}>;
+
+export { Breadcrumbs as default };

package/types/BrowserPreview.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+/**
+ *
+ * The BrowserPreview component is used to render the content wrapped in the
+ *
+ * browser frame for preview purposes.
+ *
+ * @example 
+ *
+ * import BrowserPreview from "@bigbinary/neeto-molecules/BrowserPreview";
+ * 
+ * const Component = () => (
+ *   <BrowserPreview>
+ *     <div className="flex h-full items-center justify-center">
+ *       <Typography className="text-center" style="body2">
+ *         This is the body of the browser preview
+ *       </Typography>
+ *     </div>
+ *   </BrowserPreview>
+ * );
+ * @endexample
+*/
+declare const BrowserPreview: React.FC<{
+  wrapperClassName?: string;
+  className?: string;
+  children?: React.ReactNode;
+}>;
+
+export { BrowserPreview as default };

package/types/BrowserSupport.d.ts

@@ -0,0 +1,110 @@
+import React from 'react';
+
+type VersionLimits = {
+  softLimit?: number;
+  hardLimit?: number;
+};
+/**
+ *
+ * A wrapper that displays a callout message for partially supported browsers
+ *
+ * (below a soft limit) along with the site content. If the browser is an
+ *
+ * unsupported version (below a hard limit), it shows a full-page message to update
+ *
+ * the browser and does not display the site content. If the browser is in the list
+ *
+ * of unsupported browsers, it displays a full-page message that the browser is
+ *
+ * unsupported and does not display the site content.
+ *
+ * @example 
+ *
+ * import BrowserSupport from "@bigbinary/neeto-molecules/BrowserSupport";
+ * 
+ * const App = () => (
+ *   <BrowserSupport>
+ *     {children}
+ *   </BrowserSupport>
+ *   <Main />
+ * )
+ * @endexample
+ * Minimum supported browser version of a specific browser can be changed using the
+ *
+ * overrides prop like so:
+ *
+ * @example 
+ *
+ * <BrowserSupport
+ *   overrides={{
+ *     Chrome: { softLimit: 80, hardLimit: 60 },
+ *     Safari: { softLimit: 14.1, hardLimit: 13.5 },
+ *   }}
+ *   unsupportedBrowsers={["Firefox"]}
+ * />
+ * @endexample
+ * In the above code we have changed the minimum supported versions of Chrome &
+ *
+ * Safari. Now if a user has accessed the site using Chrome < 80 or Safari < 14.1
+ *
+ * the callout message will be displayed. If a user has accessed the site using
+ *
+ * Chrome < 60 or Safari < 13.5, a message will be displayed to update the browser
+ *
+ * and page contents will not be shown. If a user has accessed the site using any
+ *
+ * version of Firefox, a message will be displayed that the browser is unsupported
+ *
+ * and page contents will not be shown.
+ *
+ * The default supported browser names and their versions are given below:
+ *
+ * | Browser Name    | Min Supported version |
+ *
+ * | :-------------- | :-------------------- |
+ *
+ * | Chrome          | 79                    |
+ *
+ * | Firefox         | 91                    |
+ *
+ * | IE              | 11                    |
+ *
+ * | Opera           | 73                    |
+ *
+ * | Safari          | 12.2                  |
+ *
+ * | ChromeMobile    | 105                   |
+ *
+ * | FirefoxMobile   | 104                   |
+ *
+ * | UCBrowser       | 13.4                  |
+ *
+ * | SamsungInternet | 4                     |
+ *
+ * The default unsupported browsers are given below:
+ *
+ * Any other browser which is not in the above lists will be considered as unknown
+ *
+ * and a corresponding callout will be shown.
+ *
+*/
+declare const BrowserSupport: React.FC<{
+  overrides?: {
+    Chrome?: VersionLimits;
+    MicrosoftEdge?: VersionLimits;
+    Firefox?: VersionLimits;
+    IE?: VersionLimits;
+    Opera?: VersionLimits;
+    Safari?: VersionLimits;
+    AndroidBrowser?: VersionLimits;
+    OperaMini?: VersionLimits;
+    ChromeMobile?: VersionLimits;
+    FirefoxMobile?: VersionLimits;
+    UCBrowser?: VersionLimits;
+    SamsungInternet?: VersionLimits;
+  };
+  unsupportedBrowsers?: string[];
+  children?: React.ReactNode | React.ReactNode[];
+}>;
+
+export { BrowserSupport as default };

package/types/Builder.d.ts

@@ -0,0 +1,99 @@
+type Element = {
+  label: string;
+  value: string;
+  icon: React.ReactNode;
+};
+type ElementSection = {
+  title: string;
+  elements: Element[];
+  key: string;
+  isCreatable: (element: Element) => boolean;
+  disabledElementTooltip?: (label: string) => string;
+};
+type SelectedElementAction = {
+  label: string;
+  key: string;
+  onClick: (element: Element) => void;
+  isVisible?: boolean;
+};
+type SelectedElement = {
+  id: string;
+  kind: string;
+  position: number;
+  label: string;
+  icon: React.ReactNode;
+  isPending: boolean;
+  actions: SelectedElementAction[] | ((element: Element) => SelectedElementAction[]);
+};
+/**
+ *
+ * @example 
+ *
+ * import Container from "@bigbinary/neeto-molecules/Container";
+ * import {
+ *   ElementsPanel,
+ *   PropertiesPanel,
+ * } from "@bigbinary/neeto-molecules/Builder";
+ * import Configure from "./Configure";
+ * 
+ * const Component = () => (
+ *   <Container isHeaderFixed>
+ *     <div className="flex h-full w-full justify-between">
+ *       <ElementsPanel
+ *         elementSections={sections}
+ *         {...{
+ *           handleAddElement,
+ *           isElementVisible,
+ *           selectedElements,
+ *           fixedFirstElement,
+ *           fixedLastElement,
+ *         }}
+ *         selectedElementActions={[
+ *           {
+ *             label: "Duplicate",
+ *             key: "duplicate",
+ *             onClick: element => alert("Clicked", JSON.stringify(element)),
+ *           },
+ *           {
+ *             label: "Delete",
+ *             key: "delete",
+ *             onClick: element => alert("Clicked", JSON.stringify(element)),
+ *           },
+ *         ]}
+ *       />
+ *       <PropertiesPanel
+ *         onClose={id => alert("The panel is closed :", id)}
+ *         id={selectedRecord.id}
+ *       >
+ *         {selectedRecord.id ? <Configure /> : <PropertiesPanel.EmptyProperty />}
+ *       </PropertiesPanel>
+ *     </div>
+ *   </Container>
+ * );
+ * @endexample
+*/
+declare const ElementsPanel: React.FC<{
+  elementSections: ElementSection[];
+  selectedElements: SelectedElement[];
+  handleAddElement: (element: Element) => void;
+  isElementVisible: (element: Element) => boolean;
+  fixedFirstElement?: SelectedElement[] | SelectedElement;
+  fixedLastElement?: SelectedElement;
+  isReorderDisabled?: boolean;
+  isDragElementsDisabled?: boolean;
+  handleSelectElement: (index: number) => void;
+  selectedElementId: string;
+  selectedElementActions: SelectedElementAction[] | ((element: Element) => SelectedElementAction[]);
+  addAllElements: () => void;
+  isAddingAllElements?: boolean;
+  showElementsFillButton?: boolean;
+  isAddingNewElement?: boolean;
+  primaryPanel?: "summary" | "elements";
+}>;
+declare const PropertiesPanel: React.FC<{
+  children: React.ReactNode;
+  id: string;
+  onClose?: (id: string) => void;
+}>;
+
+export { ElementsPanel, PropertiesPanel };

package/types/ButtonGroup.d.ts

@@ -0,0 +1,45 @@
+import { ButtonProps } from '@bigbinary/neetoui';
+import React from 'react';
+
+interface Button extends ButtonProps {
+  key: string;
+  isActive?: boolean;
+}
+interface ButtonGroupProps {
+  style?: "secondary" | "tertiary";
+  size?: "small" | "medium" | "large";
+  buttons: Button[];
+}
+/**
+ *
+ * ButtonGroup component is a wrapper component that groups icon only buttons and
+ *
+ * highlights the active button.
+ *
+ * @example 
+ *
+ * import ButtonGroup from "@bigbinary/neeto-molecules/ButtonGroup";
+ * 
+ * const Component = () => (
+ *   <ButtonGroup
+ *     buttons={[
+ *       {
+ *         key: "calendar",
+ *         icon: Calendar,
+ *         onClick: () => handleSwitch(),
+ *       },
+ *       {
+ *         key: "list",
+ *         icon: List,
+ *         onClick: () => handleSwitch(),
+ *       },
+ *     ]}
+ *     style="tertiary"
+ *     size="medium"
+ *   />
+ * );
+ * @endexample
+*/
+declare const ButtonGroup: React.FC<ButtonGroupProps>;
+
+export { type ButtonGroupProps, ButtonGroup as default };

package/types/CalendarView.d.ts

@@ -0,0 +1,98 @@
+import React from 'react';
+import { DateClickArg, EventClickArg } from '@fullcalendar/react';
+import { Dayjs } from 'dayjs';
+import { EventContentArg } from '@fullcalendar/core';
+
+type ViewOption = {
+  label: string;
+  fullCalendarView: string;
+  picker: string;
+  default?: boolean;
+};
+type ViewOptionsType = {
+  [key: string]: ViewOption;
+};
+interface EventObject {
+  title: string;
+  start: Date;
+  [key: string]: any;
+}
+/**
+ *
+ * A calendar component with daily, weekly, and monthly view options.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/45137335/c1924e09-7cbf-4de0-9b93-c14250c7a500|height=200|width=300)
+ *
+ * @example 
+ *
+ *  yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/react @fullcalendar/timegrid
+ * @endexample
+ * @example 
+ *
+ * viewOptions: {
+ *     ["Daily"]: {
+ *       label: "Daily",
+ *       fullCalendarView: "timeGridDay",
+ *       picker: "day",
+ *     },
+ *     ["Weekly"]: {
+ *       label: "Weekly",
+ *       fullCalendarView: "timeGridWeek",
+ *       picker: "week",
+ *       default: true, //default initial view can be set by adding 'default: true'
+ *     },
+ *     ["Monthly"]: {
+ *       label: "Monthly",
+ *       fullCalendarView: "dayGridMonth",
+ *       picker: "month",
+ *     },
+ *   },
+ * @endexample
+ * @example 
+ *
+ * import CalendarView from "@bigbinary/neeto-molecules/CalendarView";
+ * 
+ * const MONTHLY_VIEW = "Monthly";
+ * const VIEW_OPTIONS = {
+ *   [MONTHLY_VIEW]: {
+ *     label: MONTHLY_VIEW,
+ *     fullCalendarView: "dayGridMonth",
+ *     picker: "month",
+ *   },
+ * };
+ * 
+ * const events = [
+ *   { title: "Meeting 1", start: new Date() },
+ *   { title: "Meeting 2", start: new Date() },
+ *   { title: "Meeting 3", start: new Date() },
+ * ],
+ * 
+ * <CalendarView
+ *   dayMaxEvents={2}
+ *   eventMaxStack={1}
+ *   events={events}
+ *   viewOptions={VIEW_OPTIONS}
+ *   handleDateClick={noop}
+ *   handleEventClick={noop}
+ * />;
+ * @endexample
+*/
+declare const CalendarView: React.FC<{
+  viewOptions: ViewOptionsType;
+  events: EventObject[];
+  handleDateClick: (info: DateClickArg) => void;
+  handleEventClick: (info: EventClickArg) => void;
+  onDateChange?: (date: Dayjs) => void;
+  eventClassNames: string | ((arg: EventContentArg) => string);
+  eventContent?: (arg: EventContentArg) => void;
+  dayCellClassNames: string | ((arg: any) => string);
+  dayMaxEvents: number;
+  eventMaxStack: number;
+  validDates?: {
+    start: Dayjs | Date | null;
+    end: Dayjs | Date | null;
+  };
+  hideHeader?: boolean;
+}>;
+
+export { CalendarView as default };

package/types/CardLayout.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+
+/**
+ *
+ * The CardLayout component is used to render the content wrapped in the card
+ *
+ * layout.
+ *
+ * @example 
+ *
+ * import CardLayout from "@bigbinary/neeto-molecules/CardLayout";
+ * 
+ * const Component = () => (
+ *   <CardLayout
+ *     title="Set start day of the week"
+ *     description="Choose your preferred start day of the week. This setting will be applied to all calendars."
+ *     actionBlock={<Button label="Primary action" />}
+ *   >
+ *     {children}
+ *   </CardLayout>
+ * );
+ * @endexample
+*/
+declare const CardLayout: React.FC<{
+  title?: string;
+  description?: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+  children?: React.ReactNode;
+  actionBlock?: React.ReactNode;
+  icon?: React.ReactNode;
+}>;
+
+export { CardLayout as default };

package/types/Codeblock.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SyntaxHighlighterProps } from 'react-syntax-highlighter';
+import { CopyToClipboardButtonProps } from './CopyToClipboardButton.js';
+
+/**
+ *
+ * Codeblock can be used to render a block of code, with appropriate syntax
+ *
+ * highlighting, and a copy code button.
+ *
+ * Note: To use this component, you should install
+ *
+ * react-syntax-highlighter@^15.5.0 package.
+ *
+ * ![image](https://github.com/bigbinary/neeto-molecules/assets/66865722/ed5c589f-7086-46b9-b8b2-2746afa7e750|height=200|width=300)
+ *
+ * @example 
+ *
+ * import Codeblock from "@bigbinary/neeto-molecules/Codeblock";
+ * import { generateEmbedCode } from "./utils";
+ * 
+ * const EmbedPage = () => (
+ *   <Codeblock
+ *     code={generateEmbedCode()}
+ *     codeblockProps={{ showLineNumbers: true }}
+ *   />
+ * );
+ * @endexample
+*/
+declare const Codeblock: React.FC<{
+  code: string;
+  showCopyButton?: boolean;
+  codeblockProps?: Partial<SyntaxHighlighterProps>;
+  copyButtonProps?: Partial<CopyToClipboardButtonProps>;
+}>;
+
+export { Codeblock as default };