@paro.io/expert-shared-components 1.9.3 → 1.9.4

package/lib/components/OrganizationChart/OrgChart.js

@@ -22,67 +22,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OrganizationChart = void 0;
 const react_1 = __importStar(require("react"));
 const core_1 = require("@material-ui/core");
 const icons_1 = require("@material-ui/icons");
 const utils_1 = require("./utils");
-const PersonCard = ({ name, position, experience, location, initial, noOfchildren, }) => (react_1.default.createElement("div", { className: "relative group" },
-    react_1.default.createElement("div", { className: "flex flex-col items-center" },
-        react_1.default.createElement("div", { className: "flex flex-col items-center mb-2" },
-            react_1.default.createElement("div", { className: `
-                        -mb-4 z-10 w-12 h-12 rounded-full bg-[#434889] flex items-center justify-center 
-                        text-white font-semibold text-lg
-                        transition-all duration-200 hover:bg-[#102377]
-                        ${noOfchildren > 0 ? 'hover:shadow-lg' : ''}
-                    ` },
-                initial,
-                noOfchildren > 0 && (react_1.default.createElement("div", { className: "absolute -bottom-3 w-6 h-6 rounded bg-gray-400 flex items-center justify-center text-white text-sm" }, noOfchildren)))),
-        react_1.default.createElement("div", { className: "p-4 bg-white rounded-lg shadow-sm border text-center w-48 transition-all duration-200 group-hover:shadow-md" },
-            react_1.default.createElement("div", { className: "font-semibold text-[#102377]" }, name),
-            react_1.default.createElement("div", { className: "text-sm text-gray-600" }, position),
-            react_1.default.createElement("div", { className: "text-xs text-gray-500" },
-                experience,
-                " Years Experience"),
-            react_1.default.createElement("div", { className: "text-xs text-gray-500" }, location)))));
-const ServicesCard = ({ uniqueServices, employeeCount, employeeLocation, totalYears }) => {
-    const [expanded, setExpanded] = (0, react_1.useState)(false);
-    const handleExpandClick = () => {
-        setExpanded((prev) => !prev);
-    };
-    const highlightsExists = (employeeCount > 0 || employeeLocation !== 'none' || totalYears > 0);
-    const uniqueServicesExists = (uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.length) >= 1;
-    const theme = (0, core_1.useTheme)();
-    const smallScreen = (0, core_1.useMediaQuery)(theme.breakpoints.down('lg'));
-    return (highlightsExists || uniqueServicesExists) ? react_1.default.createElement(utils_1.InfoCard, null,
-        react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'row', justifyContent: 'space-between', alignItems: 'center' },
-            react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
-                react_1.default.createElement("b", null, "Services Offered & Highlights")),
-            react_1.default.createElement(core_1.Tooltip, { title: !expanded ? "Expand to view services offered & highlights" : "", arrow: true, placement: 'top' },
-                react_1.default.createElement(core_1.IconButton, { onClick: handleExpandClick }, expanded ? react_1.default.createElement(icons_1.ExpandLess, null) : react_1.default.createElement(icons_1.ExpandMore, null)))),
-        react_1.default.createElement(core_1.Collapse, { in: expanded },
-            react_1.default.createElement(core_1.Grid, { container: true, spacing: 2, style: { paddingLeft: 12 }, direction: smallScreen ? 'column' : 'row' },
-                uniqueServicesExists && react_1.default.createElement(core_1.Grid, { item: true },
-                    react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
-                        react_1.default.createElement("b", null, "Services Offered")),
-                    react_1.default.createElement("ul", { className: "pl-2 my-0" }, uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.map((service) => {
-                        return react_1.default.createElement("li", null, service);
-                    }))),
-                react_1.default.createElement(core_1.Box, { m: 1, mb: smallScreen ? 1 : 2 },
-                    react_1.default.createElement(core_1.Divider, { orientation: smallScreen ? 'horizontal' : 'vertical' })),
-                highlightsExists && react_1.default.createElement(core_1.Grid, { item: true },
-                    react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
-                        react_1.default.createElement("b", null, "Highlights")),
-                    react_1.default.createElement("ul", { className: "pl-2 my-0" },
-                        employeeCount > 0 && react_1.default.createElement("li", null,
-                            employeeCount,
-                            " Team Members"),
-                        employeeLocation !== 'none' && react_1.default.createElement("li", null, employeeLocation),
-                        totalYears > 0 && react_1.default.createElement("li", null,
-                            totalYears,
-                            " years of combined experience")))))) : react_1.default.createElement(react_1.default.Fragment, null);
-};
+const PersonCard_1 = __importDefault(require("./PersonCard"));
+const ServicesCard_1 = __importDefault(require("./ServicesCard"));
 const RenderChildren = ({ children, zooming, isDragging }) => {
     const childWidth = 100 / children.length;
     const hasSiblings = children.length > 1;
@@ -117,7 +67,7 @@ const RenderChildren = ({ children, zooming, isDragging }) => {
                         return (react_1.default.createElement("div", { key: child.name, className: "flex flex-col items-center", style: { width: `${childWidth}%` } },
                             react_1.default.createElement(utils_1.ConnectorContainer, { ref: (el) => childRefs.current[index] = el, className: "child-vertical-line" }),
                             react_1.default.createElement("div", { className: "flex flex-col items-center relative" },
-                                react_1.default.createElement(PersonCard, Object.assign({}, child, { noOfchildren: (_b = (_a = child === null || child === void 0 ? void 0 : child.children) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 })),
+                                react_1.default.createElement(PersonCard_1.default, Object.assign({}, child, { noOfchildren: (_b = (_a = child === null || child === void 0 ? void 0 : child.children) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 })),
                                 child.children && child.children.length > 0 && (react_1.default.createElement(RenderChildren, { children: child.children, zooming: zooming, isDragging: isDragging })))));
                     })))))));
 };
@@ -207,7 +157,7 @@ const OrganizationChart = ({ expertFirms, openModal, setOpenModal, firstName, la
                         react_1.default.createElement(core_1.Box, null, "See what services the organization offers and where they're located"))),
                 react_1.default.createElement(core_1.IconButton, { onClick: () => setOpenModal(false), style: { position: 'absolute', top: 0, right: 0 } },
                     react_1.default.createElement(icons_1.Close, null))),
-            isPublicProfile && (react_1.default.createElement(ServicesCard, { uniqueServices: uniqueServices, employeeCount: expertFirms.employeeCount, employeeLocation: employeeLocation, totalYears: totalYears })),
+            isPublicProfile && (react_1.default.createElement(ServicesCard_1.default, { uniqueServices: uniqueServices, employeeCount: expertFirms.employeeCount, employeeLocation: employeeLocation, totalYears: totalYears })),
             react_1.default.createElement(core_1.DialogContent, { onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onDoubleClick: handleDoubleClick, style: {
                     overflow: 'hidden',
                     width: '100%',
@@ -226,7 +176,7 @@ const OrganizationChart = ({ expertFirms, openModal, setOpenModal, firstName, la
                     } },
                     react_1.default.createElement("div", { className: "p-8" },
                         react_1.default.createElement("div", { className: "flex flex-col items-center" },
-                            react_1.default.createElement(PersonCard, Object.assign({}, treeData, { noOfchildren: (_d = (_c = treeData === null || treeData === void 0 ? void 0 : treeData.children) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0 })),
+                            react_1.default.createElement(PersonCard_1.default, Object.assign({}, treeData, { noOfchildren: (_d = (_c = treeData === null || treeData === void 0 ? void 0 : treeData.children) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0 })),
                             react_1.default.createElement(RenderChildren, { children: treeData.children || [], zooming: zoomingRef.current, isDragging: isDraggingRef.current }))))))));
 };
 exports.OrganizationChart = OrganizationChart;

package/lib/components/OrganizationChart/PersonCard.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface EmployeeData {
+    name: string;
+    position: string;
+    experience: number;
+    location: string;
+    initial: string;
+    level?: number | null;
+    children?: EmployeeData[];
+}
+interface PersonCardProps extends EmployeeData {
+    noOfchildren: number;
+}
+declare const PersonCard: React.FC<PersonCardProps>;
+export default PersonCard;

package/lib/components/OrganizationChart/PersonCard.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const PersonCard = ({ name, position, experience, location, initial, noOfchildren, }) => (react_1.default.createElement("div", { className: "relative group" },
+    react_1.default.createElement("div", { className: "flex flex-col items-center" },
+        react_1.default.createElement("div", { className: "flex flex-col items-center mb-2" },
+            react_1.default.createElement("div", { className: `
+                        -mb-4 z-10 w-12 h-12 rounded-full bg-[#434889] flex items-center justify-center 
+                        text-white font-semibold text-lg
+                        transition-all duration-200 hover:bg-[#102377]
+                        ${noOfchildren > 0 ? 'hover:shadow-lg' : ''}
+                    ` },
+                initial,
+                noOfchildren > 0 && (react_1.default.createElement("div", { className: "absolute -bottom-3 w-6 h-6 rounded bg-gray-400 flex items-center justify-center text-white text-sm" }, noOfchildren)))),
+        react_1.default.createElement("div", { className: "p-4 bg-white rounded-lg shadow-sm border text-center w-48 transition-all duration-200 group-hover:shadow-md" },
+            react_1.default.createElement("div", { className: "font-semibold text-[#102377]" }, name),
+            react_1.default.createElement("div", { className: "text-sm text-gray-600" }, position),
+            react_1.default.createElement("div", { className: "text-xs text-gray-500" },
+                experience,
+                " Years Experience"),
+            react_1.default.createElement("div", { className: "text-xs text-gray-500" }, location)))));
+exports.default = PersonCard;

package/lib/components/OrganizationChart/ServicesCard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ServicesCard: ({ uniqueServices, employeeCount, employeeLocation, totalYears }: any) => React.JSX.Element;
+export default ServicesCard;

package/lib/components/OrganizationChart/ServicesCard.js

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const icons_1 = require("@material-ui/icons");
+const utils_1 = require("./utils");
+const ServicesCard = ({ uniqueServices, employeeCount, employeeLocation, totalYears }) => {
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const handleExpandClick = () => {
+        setExpanded((prev) => !prev);
+    };
+    const highlightsExists = (employeeCount > 0 || employeeLocation !== 'none' || totalYears > 0);
+    const uniqueServicesExists = (uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.length) >= 1;
+    const theme = (0, core_1.useTheme)();
+    const smallScreen = (0, core_1.useMediaQuery)(theme.breakpoints.down('lg'));
+    return (highlightsExists || uniqueServicesExists) ? react_1.default.createElement(utils_1.InfoCard, null,
+        react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'row', justifyContent: 'space-between', alignItems: 'center' },
+            react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
+                react_1.default.createElement("b", null, "Services Offered & Highlights")),
+            react_1.default.createElement(core_1.Tooltip, { title: !expanded ? "Expand to view services offered & highlights" : "", arrow: true, placement: 'top' },
+                react_1.default.createElement(core_1.IconButton, { onClick: handleExpandClick }, expanded ? react_1.default.createElement(icons_1.ExpandLess, null) : react_1.default.createElement(icons_1.ExpandMore, null)))),
+        react_1.default.createElement(core_1.Collapse, { in: expanded },
+            react_1.default.createElement(core_1.Grid, { container: true, spacing: 2, style: { paddingLeft: 12 }, direction: smallScreen ? 'column' : 'row' },
+                uniqueServicesExists && react_1.default.createElement(core_1.Grid, { item: true },
+                    react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
+                        react_1.default.createElement("b", null, "Services Offered")),
+                    react_1.default.createElement("ul", { className: "pl-2 my-0" }, uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.map((service) => {
+                        return react_1.default.createElement("li", null, service);
+                    }))),
+                react_1.default.createElement(core_1.Box, { m: 1, mb: smallScreen ? 1 : 2 },
+                    react_1.default.createElement(core_1.Divider, { orientation: smallScreen ? 'horizontal' : 'vertical' })),
+                highlightsExists && react_1.default.createElement(core_1.Grid, { item: true },
+                    react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
+                        react_1.default.createElement("b", null, "Highlights")),
+                    react_1.default.createElement("ul", { className: "pl-2 my-0" },
+                        employeeCount > 0 && react_1.default.createElement("li", null,
+                            employeeCount,
+                            " Team Members"),
+                        employeeLocation !== 'none' && react_1.default.createElement("li", null, employeeLocation),
+                        totalYears > 0 && react_1.default.createElement("li", null,
+                            totalYears,
+                            " years of combined experience")))))) : react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.default = ServicesCard;

package/lib/components/OrganizationChart/utils.js

@@ -7,54 +7,6 @@ exports.getTotalYearsWithFirm = exports.checkEmployeeLocation = exports.parseSer
 const styled_components_1 = __importDefault(require("styled-components"));
 const core_1 = require("@material-ui/core");
 const Dialog_1 = __importDefault(require("@material-ui/core/Dialog"));
-// export const transformEmployeeData = (
-//     employeeData: Employee[],
-//     firstName: string,
-//     lastName: string,
-//     primaryServiceLine: string,
-//     city: string,
-//     stateAbbreviation: string,
-//     paroTenure: number
-//   ) => {
-//     const getInitial = (name: string): string => name.charAt(0).toUpperCase();
-//     // // Organize employees by their level
-//     // const levels: { [key: number]: Employee[] } = {};
-//     // employeeData.forEach((employee) => {
-//     //   if (!levels[employee.level]) {
-//     //     levels[employee.level] = [];
-//     //   }
-//     //   levels[employee.level].push(employee);
-//     // });
-//     const buildHierarchy = (parent: Employee | null, level: number): TransformedEmployee[] => {
-//     //   if (!levels[level]) return [];
-//       // Filter employees based on matching direct_report and expert_firm_id with the parent
-//       const children = employeeData.filter((employee) => {
-//         return (parent === null || 
-//                 (employee.directReport === parent.employeeName && 
-//                  employee.expertFirmId === parent.expertFirmId));
-//       }).map((employee) => ({
-//         name: employee.employeeName,
-//         position: employee.firmRole,
-//         experience: employee.yearsWithFirm,
-//         location: employee.employeeLocation,
-//         initial: getInitial(employee.employeeName),
-//         level: level,
-//         children: buildHierarchy(employee, level + 1),  // Recursive call to get the next level of children
-//       }));
-//       return children;
-//     };
-//     // Start building hierarchy from level 1 (assuming the top-most level is level 1)
-//     const transformedData = buildHierarchy(null, 1);
-//     return {
-//       name: `${firstName} ${lastName}`,
-//       position: primaryServiceLine,
-//       experience: paroTenure,
-//       location: `${city}, ${stateAbbreviation}`,
-//       initial: firstName.charAt(0).toUpperCase(),
-//       level: 0,
-//       children: transformedData,
-//     };
-// };
 const transformEmployeeData = (employeeData, firstName, lastName, primaryServiceLine, city, stateAbbreviation, paroTenure) => {
     const getInitial = (name) => name.charAt(0).toUpperCase();
     const buildHierarchy = (parent) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paro.io/expert-shared-components",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "description": "",
   "main": "lib/index.js",
   "scripts": {