feat: implement a standard document model toolbar with out of the box…

… functionalities in the document model editor (#430)

* feat(design-system): added DocumentToolbar component

* feat(document-model-libs): added documentToolbar option in EditorConfig type

* feat(codegen): enabled support for ExtendedEditor + import actions in Editor

packages/codegen/src/codegen/.hygen/templates/powerhouse/generate-editor/editor.esm.t

@@ -4,7 +4,7 @@ unless_exists: true
 ---
 <% if(!documentTypes.length){ %>import { Action, EditorProps } from 'document-model/document';<% } else { %>import { EditorProps } from 'document-model/document';<% } %>
 <% documentTypes.forEach(type => { _%>
-import { <%= documentTypesMap[type] %>State, <%= documentTypesMap[type] %>Action, <%= documentTypesMap[type] %>LocalState } from "../.<%= documentModelsDir %>/<%= h.changeCase.param(documentTypesMap[type]) %>";
+import { <%= documentTypesMap[type] %>State, <%= documentTypesMap[type] %>Action, <%= documentTypesMap[type] %>LocalState, actions } from "../.<%= documentModelsDir %>/<%= h.changeCase.param(documentTypesMap[type]) %>";
 %><% }); _%>
 
 export type IProps = <% if(!documentTypes.length){ %>EditorProps<unknown, Action><% } else { %><% documentTypes.forEach((type, index) => { _%>EditorProps<<%= documentTypesMap[type] %>State, <%= documentTypesMap[type] %>Action, <%= documentTypesMap[type] %>LocalState%>%>><% if(index < documentTypes.length - 1){ %> | <% }%><% }); _%> <% } %>;

packages/codegen/src/codegen/.hygen/templates/powerhouse/generate-editor/index.esm.t

@@ -2,15 +2,20 @@
 to: "<%= rootDir %>/<%= h.changeCase.param(name) %>/index.ts"
 force: true
 ---
-import { type Editor as EditorModule<% if(!documentTypes.length){ %>, Action<% } %> } from 'document-model/document';
+import { ExtendedEditor, EditorContextProps } from 'document-model-libs';
 import Editor from './editor';
 <% documentTypes.forEach(type => { _%>
 import { <%= documentTypesMap[type] %>State, <%= documentTypesMap[type] %>Action, <%= documentTypesMap[type] %>LocalState } from "../.<%= documentModelsDir %>/<%= h.changeCase.param(documentTypesMap[type]) %>";
 %><% }); _%>
 
-export const module: <% if(!documentTypes.length){ %>EditorModule<unknown, Action><% } else { %><% documentTypes.forEach((type, index) => { _%>EditorModule<<%= documentTypesMap[type] %>State, <%= documentTypesMap[type] %>Action, <%= documentTypesMap[type] %>LocalState%>%>> <% if(index < documentTypes.length - 1){ %>| <% }%><% }); _%> <% } %>= {
+export const module: <% if(!documentTypes.length){ %>ExtendedEditor<unknown, Action, unknown, unknown><% } else { %><% documentTypes.forEach((type, index) => { _%>ExtendedEditor<<%= documentTypesMap[type] %>State, <%= documentTypesMap[type] %>Action, <%= documentTypesMap[type] %>LocalState, EditorContextProps%>%>> <% if(index < documentTypes.length - 1){ %>| <% }%><% }); _%> <% } %>= {
     Component: Editor,
     documentTypes: [<% if(!documentTypes.length){ %>'*'<% } else { %><% documentTypes.forEach(type => { _%>"<%= type %>", %><% }); _%> <% } %>],
+    config: {
+        id: 'editor-id',
+        disableExternalControls: true,
+        documentToolbarEnabled: true,
+    },
 };
 
 export default module;

packages/design-system/src/connect/components/document-toolbar/document-toolbar.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { DocumentToolbar } from "./document-toolbar";
+
+const meta = {
+  title: "Connect/Components/DocumentToolbar",
+  component: DocumentToolbar,
+} satisfies Meta<typeof DocumentToolbar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "My Document Model V2",
+    canUndo: true,
+    canRedo: true,
+    redo: () => console.log("redo"),
+    undo: () => console.log("undo"),
+    onClose: () => console.log("close"),
+    onExport: () => console.log("export"),
+    onShowRevisionHistory: () => console.log("show revision history"),
+    onSwitchboardLinkClick: () => console.log("switchboard link click"),
+  },
+};

packages/design-system/src/connect/components/document-toolbar/document-toolbar.tsx

@@ -0,0 +1,56 @@
+import {
+  EditorUndoRedoButtons,
+  EditorUndoRedoButtonsProps,
+} from "@/connect/components/editor-undo-redo-buttons";
+import {
+  EditorActionButtons,
+  EditorActionButtonsProps,
+} from "@/connect/components/editor-action-buttons";
+import { twMerge } from "tailwind-merge";
+
+export type DocumentToolbarProps = {
+  title?: string;
+  className?: string;
+} & Partial<EditorUndoRedoButtonsProps> &
+  EditorActionButtonsProps;
+
+export const DocumentToolbar: React.FC<DocumentToolbarProps> = (props) => {
+  const {
+    undo,
+    canUndo,
+    redo,
+    canRedo,
+    title,
+    onClose,
+    onExport,
+    className,
+    onShowRevisionHistory,
+    onSwitchboardLinkClick,
+  } = props;
+
+  return (
+    <div className={twMerge("flex items-center justify-between", className)}>
+      <div>
+        {undo && redo && canUndo && canRedo && (
+          <EditorUndoRedoButtons
+            undo={undo}
+            canUndo={canUndo}
+            redo={redo}
+            canRedo={canRedo}
+          />
+        )}
+      </div>
+      <div>
+        <h2 className="text-sm font-semibold">{title}</h2>
+      </div>
+      <div>
+        <EditorActionButtons
+          onClose={onClose}
+          onExport={onExport}
+          onShowRevisionHistory={onShowRevisionHistory}
+          onSwitchboardLinkClick={onSwitchboardLinkClick}
+        />
+      </div>
+    </div>
+  );
+};

packages/design-system/src/connect/components/document-toolbar/index.ts

@@ -0,0 +1 @@
+export * from "./document-toolbar";

packages/design-system/src/connect/components/editor-action-buttons/editor-action-buttons.tsx

@@ -1,12 +1,12 @@
 import { Icon } from "@/powerhouse";
 
-type Props = {
-  readonly onSwitchboardLinkClick: (() => void) | undefined;
+export type EditorActionButtonsProps = {
+  readonly onSwitchboardLinkClick?: (() => void) | undefined;
   readonly onExport: () => void;
   readonly onClose: () => void;
   readonly onShowRevisionHistory: () => void;
 };
-export function EditorActionButtons(props: Props) {
+export function EditorActionButtons(props: EditorActionButtonsProps) {
   const { onSwitchboardLinkClick, onExport, onClose, onShowRevisionHistory } =
     props;
 

packages/design-system/src/connect/components/editor-undo-redo-buttons/editor-undo-redo-buttons.tsx

@@ -1,31 +1,35 @@
 import { Icon } from "@/powerhouse";
 import { twMerge } from "tailwind-merge";
 
-type Props = {
+export type EditorUndoRedoButtonsProps = {
   readonly canUndo: boolean;
   readonly canRedo: boolean;
   readonly undo: () => void;
   readonly redo: () => void;
 };
-export function EditorUndoRedoButtons(props: Props) {
+export function EditorUndoRedoButtons(props: EditorUndoRedoButtonsProps) {
   const { canUndo, canRedo, undo, redo } = props;
   const buttonStyles =
-    "w-8 h-8 tab-shadow rounded-lg flex justify-center items-center";
+    "w-8 h-8 rounded-lg flex justify-center items-center rounded border border-gray-200";
   return (
     <div className="flex gap-x-2 text-gray-500">
       <button className={buttonStyles} disabled={!canUndo} onClick={undo}>
         <Icon
           className={twMerge(
             "-scale-x-100",
-            canUndo ? "active:opacity-50" : "text-gray-500",
+            canUndo ? "text-gray-900 active:opacity-50" : "text-gray-500",
           )}
           name="RedoArrow"
+          size={18}
         />
       </button>
       <button className={buttonStyles} disabled={!canRedo} onClick={redo}>
         <Icon
-          className={twMerge(canRedo ? "active:opacity-50" : "text-gray-500")}
+          className={twMerge(
+            canRedo ? "text-gray-900 active:opacity-50" : "text-gray-500",
+          )}
           name="RedoArrow"
+          size={18}
         />
       </button>
     </div>

packages/design-system/src/connect/components/index.ts

@@ -28,3 +28,4 @@ export * from "./toast";
 export * from "./toggle";
 export * from "./tooltip";
 export * from "./tree-view";
+export * from "./document-toolbar";

packages/design-system/src/rwa/components/table/base/table.tsx

@@ -4,6 +4,7 @@ import {
   MoreDetailsCell,
   RWATableCell,
   RWATableRow,
+  SortDirection,
   TableBase,
   TableColumn,
   TableItemType,
@@ -115,7 +116,9 @@ export function Table(props: TableProps) {
         hasSelectedItem={!!selectedTableItem}
         headerRef={headerRef}
         maxHeight={maxHeight}
-        onClickSort={sortHandler}
+        onClickSort={
+          sortHandler as (key: string, direction: SortDirection) => void
+        }
         ref={tableContainerRef}
         renderRow={renderRow}
         specialFirstRow={specialFirstRow}

packages/document-model-libs/editors/types.ts

@@ -4,6 +4,20 @@ import { Action, EditorProps } from "document-model/document";
 export type EditorConfig = {
   id: string;
   disableExternalControls: boolean;
+  documentToolbarEnabled?: boolean;
+};
+
+export type EditorContextProps = {
+  readonly isAllowedToCreateDocuments: boolean;
+  readonly isAllowedToEditDocuments: boolean;
+  readonly canUndo: boolean;
+  readonly canRedo: boolean;
+  readonly undo: () => void;
+  readonly redo: () => void;
+  readonly onSwitchboardLinkClick: (() => void) | undefined;
+  readonly onExport: () => void;
+  readonly onClose: () => void;
+  readonly onShowRevisionHistory: () => void;
 };
 
 export type ExtendedEditor<