@flowuent-org/diagramming-core 1.0.5

package/packages/molecules/src/lib/UserCard/UserCard.module.css

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

package/packages/molecules/src/lib/UserCard/UserCard.spec.tsx

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

package/packages/molecules/src/lib/UserCard/UserCard.tsx

@@ -0,0 +1,22 @@
+import { Avatar, Box, Typography, Card, CardContent } from '@flowuent-labs/atoms';
+import styles from './UserCard.module.css';
+import { UserCardProps } from '@flowuent-labs/interfaces';
+
+const UserCard = (props: UserCardProps) => {
+  const { name, userName, email, phoneNumber, profileUrl } = props;
+  return (
+    <Card>
+      <CardContent>
+        <Box className={styles['user-card']}>
+          <Typography>{name}</Typography>
+          <Avatar src={profileUrl}>SK</Avatar>
+          <Typography>{userName}</Typography>
+          <Typography>{email}</Typography>
+          <Typography>{phoneNumber}</Typography>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default UserCard;

package/packages/molecules/src/lib/VerbSelection/HTTPVerbSelection.module.css

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

package/packages/molecules/src/lib/VerbSelection/HTTPVerbSelection.spec.tsx

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

package/packages/molecules/src/lib/VerbSelection/HTTPVerbSelection.tsx

@@ -0,0 +1,72 @@
+import {
+  FormControl,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  SxProps,
+} from '@mui/material';
+import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface HTTPVerbSelectionProps {
+  fullWidth?: boolean;
+  onChange: (e: SelectChangeEvent) => void;
+  options?: Array<Option>;
+  selectedValue?: string;
+  sx?: SxProps;
+}
+
+const HTTPVerbSelectionOptions = [
+  {
+    label: 'GET',
+    value: 'get',
+  },
+  {
+    label: 'POST',
+    value: 'post',
+  },
+  {
+    label: 'PUT',
+    value: 'put',
+  },
+  {
+    label: 'DELETE',
+    value: 'delete',
+  },
+];
+
+const HTTPVerbSelection = ({
+  fullWidth = false,
+  onChange,
+  options = HTTPVerbSelectionOptions,
+  selectedValue = '',
+  sx,
+}: HTTPVerbSelectionProps) => {
+  const { t } = useTranslation();
+  return (
+    <FormControl fullWidth={fullWidth}>
+      <Select
+        sx={sx}
+        value={selectedValue}
+        onChange={onChange}
+        IconComponent={ExpandMoreIcon}
+      >
+        {options.map((singleOption) => {
+          const { value, label } = singleOption;
+          return (
+            <MenuItem value={value} key={value}>
+              {t(`httpVerb.${value}`)}
+            </MenuItem>
+          );
+        })}
+      </Select>
+    </FormControl>
+  );
+};
+
+export default HTTPVerbSelection;

package/packages/molecules/tsconfig.json

@@ -0,0 +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"
+}

package/packages/molecules/tsconfig.lib.json

@@ -0,0 +1,30 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "../organisms/src/lib/UserList/store.ts"
+  ]
+}

package/packages/organisms/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/packages/organisms/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/packages/organisms/README.md

@@ -0,0 +1,7 @@
+# organisms
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test organisms` to execute the unit tests via [Jest](https://jestjs.io).

package/packages/organisms/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "organisms",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/organisms/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {}
+}

package/packages/organisms/src/index.ts

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

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

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

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

@@ -0,0 +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();
+  });
+});

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

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

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

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

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

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

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

@@ -0,0 +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();
+  });
+});

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

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

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

@@ -0,0 +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',
+    }
+  )
+);

package/packages/organisms/tsconfig.json

@@ -0,0 +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"
+}

package/packages/organisms/tsconfig.lib.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/packages/zustand/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/packages/zustand/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/packages/zustand/README.md

@@ -0,0 +1,7 @@
+# zustand
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test zustand` to execute the unit tests via [Jest](https://jestjs.io).

package/packages/zustand/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "zustand",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/zustand/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {}
+}

package/packages/zustand/src/index.ts

@@ -0,0 +1,4 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+export { create, devtools };

package/packages/zustand/tsconfig.json

@@ -0,0 +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"
+}