@bigbinary/neeto-molecules 3.15.42 → 3.15.43

package/types/BoardView.d.ts

@@ -1,149 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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 };