@bigbinary/neeto-molecules 3.16.86 → 3.16.88

package/types/VersionHistory.d.ts

@@ -0,0 +1,205 @@
+import React from 'react';
+
+type Version = {
+  id: string;
+  date: Date;
+  user: string;
+  onClick?: () => void;
+  isDraft?: boolean;
+  isPublished?: boolean;
+  showMoreDropdown?: boolean;
+  moreDropdownProps?: MoreDropdownProps;
+};
+type MoreDropdownProps = {
+  menuItems: MenuItem[];
+  disabled?: boolean;
+  dropdownButtonProps?: Record<string, any>;
+  dropdownProps?: Record<string, any>;
+};
+type MenuItem = {
+  key: string;
+  label: string;
+  onClick: () => void;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  disabled?: boolean;
+  [key: string]: any;
+};
+/**
+ *
+ * A React component that displays a timeline of versions with user information,
+ *
+ * dates, and status indicators. Each version can be a draft, published, or regular
+ *
+ * version with optional dropdown actions.
+ *
+ * undefined
+ *
+ * undefined
+ *
+ * Each version object in draftVersions and publishedVersions should have the
+ *
+ * following properties:
+ *
+ * @example 
+ *
+ * {
+ *   id: string,                    // Required: Unique identifier for the version
+ *   date: Date,                    // Required: Date when the version was created
+ *   user: string,                  // Required: Name of the user who created this version
+ *   onClick: function,             // Optional: Function called when version is clicked
+ *   isDraft: boolean,              // Optional: Whether this is a draft version
+ *   isPublished: boolean,          // Optional: Whether this is a published version
+ *   showMoreDropdown: boolean,     // Optional: Whether to show more dropdown menu
+ *   moreDropdownProps: object,     // Optional: Props for MoreDropdown component
+ * }
+ * @endexample
+ * @example 
+ *
+ * import VersionHistory from "@bigbinary/neeto-molecules/VersionHistory";
+ * 
+ * const MyComponent = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ * 
+ *   const draftVersions = [
+ *     {
+ *       id: "draft-1",
+ *       date: new Date("2024-01-15T10:30:00"),
+ *       user: "Oliver Smith",
+ *       isDraft: true,
+ *     },
+ *   ];
+ * 
+ *   const publishedVersions = [
+ *     {
+ *       id: "pub-1",
+ *       date: new Date("2024-01-14T15:45:00"),
+ *       user: "Sam Smith",
+ *       isPublished: true,
+ *     },
+ *   ];
+ * 
+ *   return (
+ *     <VersionHistory
+ *       isOpen={isOpen}
+ *       onClose={() => setIsOpen(false)}
+ *       draftVersions={draftVersions}
+ *       publishedVersions={publishedVersions}
+ *     />
+ *   );
+ * };
+ * @endexample
+ * @example 
+ *
+ * import VersionHistory from "@bigbinary/neeto-molecules/VersionHistory";
+ * import { Refresh } from "neetoicons";
+ * 
+ * const MyComponent = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ * 
+ *   const draftVersions = [
+ *     {
+ *       id: "draft-1",
+ *       date: new Date("2024-01-15T10:30:00"),
+ *       user: "Oliver Smith",
+ *       isDraft: true,
+ *     },
+ *   ];
+ * 
+ *   const publishedVersions = [
+ *     {
+ *       id: "pub-1",
+ *       date: new Date(),
+ *       user: "Sam Smith",
+ *       isPublished: true,
+ *       showMoreDropdown: true,
+ *       moreDropdownProps: {
+ *         menuItems: [
+ *           {
+ *             key: "revert",
+ *             label: "Revert to this version",
+ *             onClick: () => handleRevert("version-1"),
+ *             prefix: <Refresh size={16} />,
+ *           },
+ *         ],
+ *       },
+ *     },
+ *   ];
+ * 
+ *   return (
+ *     <VersionHistory
+ *       isOpen={isOpen}
+ *       onClose={() => setIsOpen(false)}
+ *       draftVersions={draftVersions}
+ *       publishedVersions={publishedVersions}
+ *     />
+ *   );
+ * };
+ * @endexample
+ * @example 
+ *
+ * import VersionHistory from "@bigbinary/neeto-molecules/VersionHistory";
+ * 
+ * const MyComponent = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ * 
+ *   const handleRefresh = () => {
+ *     // Fetch updated versions
+ *     fetchVersions();
+ *   };
+ * 
+ *   const draftVersions = [
+ *     {
+ *       id: "draft-1",
+ *       date: new Date("2024-01-15T10:30:00"),
+ *       user: "Oliver Smith",
+ *       isDraft: true,
+ *     },
+ *   ];
+ * 
+ *   const publishedVersions = [
+ *     {
+ *       id: "version-1",
+ *       date: new Date(),
+ *       user: "Sam Smith",
+ *       isPublished: true,
+ *       showMoreDropdown: true,
+ *       moreDropdownProps: {
+ *         menuItems: [
+ *           {
+ *             key: "revert",
+ *             label: "Revert to this version",
+ *             onClick: () => handleRevert("version-1"),
+ *             prefix: <Refresh size={16} />,
+ *           },
+ *         ],
+ *       },
+ *     },
+ *   ];
+ * 
+ *   return (
+ *     <VersionHistory
+ *       isOpen={isOpen}
+ *       onClose={() => setIsOpen(false)}
+ *       paneTitle="Article Version History"
+ *       showRefreshButton={true}
+ *       onRefreshClick={handleRefresh}
+ *       draftVersions={draftVersions}
+ *       publishedVersions={publishedVersions}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+declare const VersionHistory: React.FC<{
+  isOpen: boolean;
+  onClose: () => void;
+  isLoading?: boolean;
+  draftVersions?: Version[];
+  publishedVersions?: Version[];
+  paneTitle?: string;
+  showRefreshButton?: boolean;
+  onRefreshClick?: () => void;
+}>;
+
+export { VersionHistory as default };