@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/organisms/src/index.ts

@@ -1,4 +1,4 @@
-import UserList from './lib/UserList/UserList';
-import EditorToolbar from './lib/EditorToolbar/EditorToolbar';
-
-export { UserList, EditorToolbar };
+import UserList from './lib/UserList/UserList';
+import EditorToolbar from './lib/EditorToolbar/EditorToolbar';
+
+export { UserList, EditorToolbar };

package/packages/organisms/src/lib/EditorToolbar/EditorToolbar.module.css

@@ -1,7 +1,7 @@
-/*
- * Replace this with your own classes
- *
- * e.g.
- * .container {
- * }
-*/
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

package/packages/organisms/src/lib/EditorToolbar/EditorToolbar.spec.tsx

@@ -1,10 +1,10 @@
-import { render } from '@testing-library/react';
-
-import EditorToolbar from './EditorToolbar';
-
-describe('EditorToolbar', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<EditorToolbar />);
-    expect(baseElement).toBeTruthy();
-  });
-});
+import { render } from '@testing-library/react';
+
+import EditorToolbar from './EditorToolbar';
+
+describe('EditorToolbar', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<EditorToolbar />);
+    expect(baseElement).toBeTruthy();
+  });
+});

package/packages/organisms/src/lib/EditorToolbar/EditorToolbar.tsx

@@ -1,117 +1,117 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
-import {
-  arrayMove,
-  horizontalListSortingStrategy,
-  SortableContext,
-  useSortable,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { Stack } from '@mui/material';
-import { ToolbarItem } from '@flowuent-labs/interfaces';
-import { Button, Box } from '@flowuent-labs/atoms';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { CloseableButton } from '@flowuent-labs/molecules';
-import SortableItem from './SortableItem';
-
-const EditorToolbar = ({
-  items,
-  handleDragEnd,
-}: {
-  items: Array<ToolbarItem>;
-  handleDragEnd?: (data: Array<ToolbarItem>) => void;
-  headTitle?: string;
-}) => {
-  const [listItems, setListItems] = useState<Array<ToolbarItem>>(items);
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleOnDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-
-      if (!active || !over) {
-        return;
-      }
-
-      const { id: activeId = '' } = active || {};
-      const { id: overId = '' } = over || {};
-
-      if (activeId !== overId) {
-        setListItems((items) => {
-          const oldIndex = items.findIndex((item) => item?.id === activeId);
-          const newIndex = items.findIndex((item) => item?.id === overId);
-
-          const listItemsAfterDragEnd = arrayMove(items, oldIndex, newIndex);
-
-          if (handleDragEnd) {
-            handleDragEnd(listItemsAfterDragEnd);
-          }
-          return listItemsAfterDragEnd;
-        });
-      }
-    },
-    [items]
-  );
-
-  const memoizedListItems = useMemo(() => {
-    return listItems.map((singleListItem, index) => {
-      const {
-        id = index,
-        label = '',
-        icon,
-        url = '',
-        renderer,
-      } = singleListItem;
-      return (
-        <SortableItem
-          key={index}
-          id={id}
-          label={label}
-          url={url}
-          icon={icon}
-          renderer={renderer}
-        />
-      );
-    });
-  }, [listItems]);
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragEnd={handleOnDragEnd}
-      modifiers={[restrictToHorizontalAxis]}
-    >
-      <SortableContext
-        items={listItems}
-        strategy={horizontalListSortingStrategy}
-      >
-        <Stack
-          width="100%"
-          overflow="auto"
-          direction="row"
-          borderRadius={1.5}
-          border="1px solid"
-          borderColor="common.white"
-          p={1}
-          columnGap={1.5}
-        >
-          {memoizedListItems}
-        </Stack>
-      </SortableContext>
-    </DndContext>
-  );
-};
-
-export default EditorToolbar;
+import { useCallback, useMemo, useState } from 'react';
+
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Stack } from '@mui/material';
+import { ToolbarItem } from '@flowuent-labs/interfaces';
+import { Button, Box } from '@flowuent-labs/atoms';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { CloseableButton } from '@flowuent-labs/molecules';
+import SortableItem from './SortableItem';
+
+const EditorToolbar = ({
+  items,
+  handleDragEnd,
+}: {
+  items: Array<ToolbarItem>;
+  handleDragEnd?: (data: Array<ToolbarItem>) => void;
+  headTitle?: string;
+}) => {
+  const [listItems, setListItems] = useState<Array<ToolbarItem>>(items);
+  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
+
+  const handleOnDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+
+      if (!active || !over) {
+        return;
+      }
+
+      const { id: activeId = '' } = active || {};
+      const { id: overId = '' } = over || {};
+
+      if (activeId !== overId) {
+        setListItems((items) => {
+          const oldIndex = items.findIndex((item) => item?.id === activeId);
+          const newIndex = items.findIndex((item) => item?.id === overId);
+
+          const listItemsAfterDragEnd = arrayMove(items, oldIndex, newIndex);
+
+          if (handleDragEnd) {
+            handleDragEnd(listItemsAfterDragEnd);
+          }
+          return listItemsAfterDragEnd;
+        });
+      }
+    },
+    [items]
+  );
+
+  const memoizedListItems = useMemo(() => {
+    return listItems.map((singleListItem, index) => {
+      const {
+        id = index,
+        label = '',
+        icon,
+        url = '',
+        renderer,
+      } = singleListItem;
+      return (
+        <SortableItem
+          key={index}
+          id={id}
+          label={label}
+          url={url}
+          icon={icon}
+          renderer={renderer}
+        />
+      );
+    });
+  }, [listItems]);
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleOnDragEnd}
+      modifiers={[restrictToHorizontalAxis]}
+    >
+      <SortableContext
+        items={listItems}
+        strategy={horizontalListSortingStrategy}
+      >
+        <Stack
+          width="100%"
+          overflow="auto"
+          direction="row"
+          borderRadius={1.5}
+          border="1px solid"
+          borderColor="common.white"
+          p={1}
+          columnGap={1.5}
+        >
+          {memoizedListItems}
+        </Stack>
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+export default EditorToolbar;

package/packages/organisms/src/lib/EditorToolbar/SortableItem.tsx

@@ -1,51 +1,51 @@
-import {useSortable} from '@dnd-kit/sortable';
-import {CSS} from '@dnd-kit/utilities';
-import {ToolbarItem} from '@flowuent-labs/interfaces';
-import {Box} from '@flowuent-labs/atoms';
-import {colorMap} from "../../../../../apps/diagramming/src/types/colors";
-import {IBlock} from "../../../../../apps/diagramming/src/types/card-node";
-export interface ICardNodeData {
-  isBlock: boolean;
-  nodeId: string;
-  parentId: string | null;
-  blocks: IBlock[];
-  title: string;
-  color?: keyof typeof colorMap;
-  sideHandles?: boolean;
-  img?: string;
-}
-
-const SortableItem = ({id, label = '', icon, url, renderer}: ToolbarItem) => {
-  const {attributes, listeners, setNodeRef, transform, transition} =
-    useSortable({id});
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition ?? 'transform 0.2s ease',
-  };
-
-  return (
-    // Note: here two div component wrapper is required to work drag and drop, the mui box component with div variant will not work
-    <div>
-      <div style={style} {...attributes} ref={setNodeRef} {...listeners}>
-        <Box component="div" sx={{cursor: 'pointer'}}>
-          {renderer ? (
-            renderer()
-          ) : (
-            <CloseableButton
-              icon={icon}
-              label={label}
-              url={url}
-              active={true}
-              onClose={() => {
-                // add close action here
-              }}
-            />
-          )}
-        </Box>
-      </div>
-    </div>
-  );
-};
-
-export default SortableItem;
+import {useSortable} from '@dnd-kit/sortable';
+import {CSS} from '@dnd-kit/utilities';
+import {ToolbarItem} from '@flowuent-labs/interfaces';
+import {Box} from '@flowuent-labs/atoms';
+import {colorMap} from "../../../../../apps/diagramming/src/types/colors";
+import {IBlock} from "../../../../../apps/diagramming/src/types/card-node";
+export interface ICardNodeData {
+  isBlock: boolean;
+  nodeId: string;
+  parentId: string | null;
+  blocks: IBlock[];
+  title: string;
+  color?: keyof typeof colorMap;
+  sideHandles?: boolean;
+  img?: string;
+}
+
+const SortableItem = ({id, label = '', icon, url, renderer}: ToolbarItem) => {
+  const {attributes, listeners, setNodeRef, transform, transition} =
+    useSortable({id});
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition ?? 'transform 0.2s ease',
+  };
+
+  return (
+    // Note: here two div component wrapper is required to work drag and drop, the mui box component with div variant will not work
+    <div>
+      <div style={style} {...attributes} ref={setNodeRef} {...listeners}>
+        <Box component="div" sx={{cursor: 'pointer'}}>
+          {renderer ? (
+            renderer()
+          ) : (
+            <CloseableButton
+              icon={icon}
+              label={label}
+              url={url}
+              active={true}
+              onClose={() => {
+                // add close action here
+              }}
+            />
+          )}
+        </Box>
+      </div>
+    </div>
+  );
+};
+
+export default SortableItem;

package/packages/organisms/src/lib/UserList/UserList.module.css

@@ -1,7 +1,7 @@
-/*
- * Replace this with your own classes
- *
- * e.g.
- * .user-list {
- * }
-*/
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .user-list {
+ * }
+*/

package/packages/organisms/src/lib/UserList/UserList.spec.tsx

@@ -1,11 +1,11 @@
-import { render } from '@testing-library/react';
-
-import UserList from './UserList';
-import React from 'react';
-
-describe('UserList', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<UserList />);
-    expect(baseElement).toBeTruthy();
-  });
-});
+import { render } from '@testing-library/react';
+
+import UserList from './UserList';
+import React from 'react';
+
+describe('UserList', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<UserList />);
+    expect(baseElement).toBeTruthy();
+  });
+});

package/packages/organisms/src/lib/UserList/UserList.tsx

@@ -1,48 +1,48 @@
-import { UserCard } from '@flowuent-labs/molecules';
-import { UserCardProps } from '@flowuent-labs/interfaces';
-import { Grid } from '@flowuent-labs/atoms';
-import { generateRandomProfilePic } from '@flowuent-labs/common';
-import { useCardStore } from './store';
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-
-export interface UserListProps {
-  users?: Array<UserCardProps>;
-}
-
-const UserList = (props: UserListProps) => {
-  const { fetchData, loading, error, data } = useCardStore();
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  if (loading) return t('status.loading');
-  if (error) return t('status.error');
-
-  return (
-    <>
-      <Grid container gap={4} justifyContent="center" py={4}>
-        {data.map((singleUser: any, index: number) => {
-          const { name, username, email, phone, id } = singleUser;
-          const profileUrl = generateRandomProfilePic(index + 200) ?? '';
-          return (
-            <Grid item xs={12} md={2} key={index}>
-              <UserCard
-                key={id}
-                name={name}
-                userName={username}
-                email={email}
-                phoneNumber={phone}
-                profileUrl={profileUrl}
-              />
-            </Grid>
-          );
-        })}
-      </Grid>
-    </>
-  );
-};
-
-export default UserList;
+import { UserCard } from '@flowuent-labs/molecules';
+import { UserCardProps } from '@flowuent-labs/interfaces';
+import { Grid } from '@flowuent-labs/atoms';
+import { generateRandomProfilePic } from '@flowuent-labs/common';
+import { useCardStore } from './store';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export interface UserListProps {
+  users?: Array<UserCardProps>;
+}
+
+const UserList = (props: UserListProps) => {
+  const { fetchData, loading, error, data } = useCardStore();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  if (loading) return t('status.loading');
+  if (error) return t('status.error');
+
+  return (
+    <>
+      <Grid container gap={4} justifyContent="center" py={4}>
+        {data.map((singleUser: any, index: number) => {
+          const { name, username, email, phone, id } = singleUser;
+          const profileUrl = generateRandomProfilePic(index + 200) ?? '';
+          return (
+            <Grid item xs={12} md={2} key={index}>
+              <UserCard
+                key={id}
+                name={name}
+                userName={username}
+                email={email}
+                phoneNumber={phone}
+                profileUrl={profileUrl}
+              />
+            </Grid>
+          );
+        })}
+      </Grid>
+    </>
+  );
+};
+
+export default UserList;

package/packages/organisms/src/lib/UserList/store.ts

@@ -1,49 +1,49 @@
-import { getUsers } from '@flowuent-labs/api';
-import { create, devtools } from '@flowuent-labs/zustand';
-
-interface IUseCardStore {
-  loading?: boolean;
-  data?: any;
-  error?: any;
-
-  fetchData: () => Promise<void>;
-
-  clearUseCardStore: () => void;
-}
-
-export const useCardStore = create<IUseCardStore>()(
-  devtools(
-    (set, get) => ({
-      loading: true,
-      data: undefined,
-      error: undefined,
-
-      fetchData: async () => {
-        try {
-          set({ loading: true });
-          const allUser = await getUsers();
-          set({ data: allUser });
-        } catch (e) {
-          console.log(e);
-          set({ error: e });
-        } finally {
-          set({ loading: false });
-        }
-      },
-
-      clearUseCardStore: () => {
-        set(
-          { loading: true, data: undefined, error: undefined },
-          false,
-          'Clear use card store'
-        );
-      },
-    }),
-
-    {
-      anonymousActionType: 'USE CARD STORE',
-      trace: true,
-      name: 'card store',
-    }
-  )
-);
+import { getUsers } from '@flowuent-labs/api';
+import { create, devtools } from '@flowuent-labs/zustand';
+
+interface IUseCardStore {
+  loading?: boolean;
+  data?: any;
+  error?: any;
+
+  fetchData: () => Promise<void>;
+
+  clearUseCardStore: () => void;
+}
+
+export const useCardStore = create<IUseCardStore>()(
+  devtools(
+    (set, get) => ({
+      loading: true,
+      data: undefined,
+      error: undefined,
+
+      fetchData: async () => {
+        try {
+          set({ loading: true });
+          const allUser = await getUsers();
+          set({ data: allUser });
+        } catch (e) {
+          console.log(e);
+          set({ error: e });
+        } finally {
+          set({ loading: false });
+        }
+      },
+
+      clearUseCardStore: () => {
+        set(
+          { loading: true, data: undefined, error: undefined },
+          false,
+          'Clear use card store'
+        );
+      },
+    }),
+
+    {
+      anonymousActionType: 'USE CARD STORE',
+      trace: true,
+      name: 'card store',
+    }
+  )
+);

package/packages/organisms/tsconfig.json

@@ -1,17 +1,17 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json"
-}
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}