@hiver/connector-admin 0.0.7 → 0.0.8-beta.1

package/index-Df5OkDqQ.js

@@ -0,0 +1,61 @@
+import { s as styled, B as Box, M as MainAppContext, j as jsxRuntimeExports, C as CUSTOM_CONNECTORS, N as NavLink, S as Stack, a as SIDEBAR_OPTIONS, O as Outlet } from "./index-Cg0w12Ck.js";
+import { useContext } from "react";
+import { T as Typography } from "./Typography-B0pksnYc.js";
+const BoxWrapper = styled(Box)`
+  box-sizing: border-box;
+  padding: 35px 0 35px 35px;
+`;
+const SideBarWrapper = styled(Box)`
+  padding-top: 17px;
+  box-sizing: border-box;
+  width: 178px;
+  border-right: 1px solid rgba(214, 221, 232, 1);
+  height: 100%;
+`;
+const CustomConnectorText = styled(Typography)`
+  font-size: 14px;
+  line-height: 24px;
+`;
+const NavLinkWrapper = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 29px;
+  & a {
+    display: block;
+    height: 32px;
+    width: 162px;
+    padding: 4px 12px;
+    text-decoration: none;
+    color: #6f7c90;
+    font-size: 13px;
+    line-height: 24px;
+    &.active {
+      font-size: 14px;
+      background-color: rgba(246, 248, 252, 1);
+      border-radius: 4px;
+      color: #343c45;
+    }
+  }
+`;
+const SideBar = ({ sidebarOptions = [] }) => {
+  const { currentSideBar } = useContext(MainAppContext);
+  const renderOptions = () => /* @__PURE__ */ jsxRuntimeExports.jsx(NavLinkWrapper, { children: sidebarOptions.map(({ id, value, route }) => {
+    const isActive = currentSideBar === value;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(NavLink, { to: route, "data-testid": id, className: isActive ? "active" : "", children: value }, id);
+  }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BoxWrapper, { "data-testid": "sideBarParent", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(SideBarWrapper, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CustomConnectorText, { variant: "h3", "data-testid": "custom-connector-heading", children: CUSTOM_CONNECTORS }),
+    renderOptions()
+  ] }) });
+};
+const ConnectorView = () => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { direction: "row", alignItems: "stretch", sx: { minHeight: "100vh" }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SideBar, { sidebarOptions: SIDEBAR_OPTIONS }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Outlet, {})
+  ] });
+};
+export {
+  ConnectorView
+};
+//# sourceMappingURL=index-Df5OkDqQ.js.map

package/index-Df5OkDqQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-Df5OkDqQ.js","sources":["../src/components/layouts/sidebar/styles.ts","../src/components/layouts/sidebar/index.tsx","../src/app/connectors/pages/connector-view/index.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@hiver/hiver-ui-kit';\nimport { StyledComponent } from '@emotion/styled';\n\nimport type { BoxProps, TypographyProps } from '@hiver/hiver-ui-kit';\n\nexport const BoxWrapper: StyledComponent<BoxProps> = styled(Box)`\n  box-sizing: border-box;\n  padding: 35px 0 35px 35px;\n`;\n\nexport const SideBarWrapper: StyledComponent<BoxProps> = styled(Box)`\n  padding-top: 17px;\n  box-sizing: border-box;\n  width: 178px;\n  border-right: 1px solid rgba(214, 221, 232, 1);\n  height: 100%;\n`;\n\nexport const CustomConnectorText: StyledComponent<TypographyProps> = styled(Typography)`\n  font-size: 14px;\n  line-height: 24px;\n`;\n\nexport const NavLinkWrapper: StyledComponent<BoxProps> = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 29px;\n  & a {\n    display: block;\n    height: 32px;\n    width: 162px;\n    padding: 4px 12px;\n    text-decoration: none;\n    color: #6f7c90;\n    font-size: 13px;\n    line-height: 24px;\n    &.active {\n      font-size: 14px;\n      background-color: rgba(246, 248, 252, 1);\n      border-radius: 4px;\n      color: #343c45;\n    }\n  }\n`;\n","import { useContext } from 'react';\nimport { NavLink } from 'react-router-dom';\n\nimport { CUSTOM_CONNECTORS } from '@/constants/sidebar';\nimport { BoxWrapper, SideBarWrapper, CustomConnectorText, NavLinkWrapper } from './styles';\nimport type { SidebarList } from '@/types/sidebar';\nimport { MainAppContext } from '@/context';\n\ninterface ISideBarProps {\n  sidebarOptions: SidebarList;\n}\n\nexport const SideBar = ({ sidebarOptions = [] }: ISideBarProps) => {\n  const { currentSideBar } = useContext(MainAppContext);\n  const renderOptions = () => (\n    <NavLinkWrapper>\n      {sidebarOptions.map(({ id, value, route }) => {\n        const isActive = currentSideBar === value;\n        return (\n          <NavLink key={id} to={route} data-testid={id} className={isActive ? 'active' : ''}>\n            {value}\n          </NavLink>\n        );\n      })}\n    </NavLinkWrapper>\n  );\n\n  return (\n    <BoxWrapper data-testid=\"sideBarParent\">\n      <SideBarWrapper>\n        <CustomConnectorText variant=\"h3\" data-testid=\"custom-connector-heading\">\n          {CUSTOM_CONNECTORS}\n        </CustomConnectorText>\n        {renderOptions()}\n      </SideBarWrapper>\n    </BoxWrapper>\n  );\n};\n","import { FC } from 'react';\nimport { Outlet } from 'react-router-dom';\nimport { Stack } from '@hiver/hiver-ui-kit';\n\nimport { SideBar } from '@/components/layouts/sidebar';\nimport { SIDEBAR_OPTIONS } from '@/constants/sidebar';\n\nexport const ConnectorView: FC = () => {\n  return (\n    <Stack direction=\"row\" alignItems={'stretch'} sx={{ minHeight: '100vh' }}>\n      <SideBar sidebarOptions={SIDEBAR_OPTIONS} />\n      <Outlet />\n    </Stack>\n  );\n};\n"],"names":["jsx","jsxs"],"mappings":";;;AAKa,MAAA,aAAwC,OAAO,GAAG;AAAA;AAAA;AAAA;AAKlD,MAAA,iBAA4C,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtD,MAAA,sBAAwD,OAAO,UAAU;AAAA;AAAA;AAAA;AAKzE,MAAA,iBAA4C,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACX5D,MAAM,UAAU,CAAC,EAAE,iBAAiB,CAAA,QAAwB;AACjE,QAAM,EAAE,eAAA,IAAmB,WAAW,cAAc;AAC9C,QAAA,gBAAgB,MACpBA,sCAAC,gBACE,EAAA,UAAA,eAAe,IAAI,CAAC,EAAE,IAAI,OAAO,MAAA,MAAY;AAC5C,UAAM,WAAW,mBAAmB;AAElC,WAAAA,kCAAAA,IAAC,SAAiB,EAAA,IAAI,OAAO,eAAa,IAAI,WAAW,WAAW,WAAW,IAC5E,UAAA,MAAA,GADW,EAEd;AAAA,EAEH,CAAA,EACH,CAAA;AAGF,SACGA,kCAAA,IAAA,YAAA,EAAW,eAAY,iBACtB,iDAAC,gBACC,EAAA,UAAA;AAAA,IAAAA,sCAAC,qBAAoB,EAAA,SAAQ,MAAK,eAAY,4BAC3C,UACH,mBAAA;AAAA,IACC,cAAc;AAAA,EAAA,EACjB,CAAA,EACF,CAAA;AAEJ;AC9BO,MAAM,gBAAoB,MAAM;AAEnC,SAAAC,uCAAC,OAAM,EAAA,WAAU,OAAM,YAAY,WAAW,IAAI,EAAE,WAAW,QAAA,GAC7D,UAAA;AAAA,IAACD,kCAAAA,IAAA,SAAA,EAAQ,gBAAgB,gBAAiB,CAAA;AAAA,0CACzC,QAAO,EAAA;AAAA,EACV,EAAA,CAAA;AAEJ;"}

package/index-Dkx6PyMA.js

@@ -0,0 +1,57 @@
+import { s as styled, S as Stack, K as on, j as jsxRuntimeExports, B as Box } from "./index-Cg0w12Ck.js";
+import { T as Typography } from "./Typography-B0pksnYc.js";
+const CUSTOM_CONNECTORS = "Custom Connectors";
+const SALESFORCE_CONNECTOR = "Salesforce API connector";
+const SETTINGS = "Settings";
+const BREADCRUMBS_ARRAY = [CUSTOM_CONNECTORS, SALESFORCE_CONNECTOR, SETTINGS];
+const BreadCrumbsWrapper = styled(Stack)`
+  margin-bottom: 36px;
+  .arrow {
+    border: solid ${on.palette.gray.gray3};
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    padding: 3px;
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+    height: 5px;
+  }
+`;
+const BreadCrumbsText = styled(Typography)`
+  margin-right: 4px;
+  &.last {
+    cursor: pointer;
+  }
+`;
+const ArrowWrapper = styled(Stack)`
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  padding-right: 6px;
+`;
+const BreadCrumbs = () => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BreadCrumbsWrapper, { direction: "row", alignItems: "center", "data-testid": "breadCrumbs", children: BREADCRUMBS_ARRAY.map((item, idx) => {
+    const isLast = idx === BREADCRUMBS_ARRAY.length - 1;
+    const color = isLast ? on.palette.gray.black : on.palette.gray.gray4;
+    const crumbId = isLast ? "lastCrumb" : `crumb-${idx}`;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { direction: "row", alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(BreadCrumbsText, { className: isLast ? "last" : "", variant: "h3", color, "data-testid": crumbId, children: item }),
+      !isLast ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowWrapper, { direction: "row", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "arrow" }) }) : null
+    ] }, item.replace(/\s/g, ""));
+  }) });
+};
+const AUTH_COMP = "auth component";
+const Auth = () => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: AUTH_COMP });
+};
+const SideBarCrumbWrapper = styled(Box)`
+  padding: 52px;
+  box-sizing: border-box;
+`;
+const Settings = () => /* @__PURE__ */ jsxRuntimeExports.jsxs(SideBarCrumbWrapper, { children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx(BreadCrumbs, {}),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(Auth, {})
+] });
+export {
+  Settings
+};
+//# sourceMappingURL=index-Dkx6PyMA.js.map

package/index-Dkx6PyMA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-Dkx6PyMA.js","sources":["../src/constants/bread-crumbs.ts","../src/components/ui/bread-crumbs/styles.ts","../src/components/ui/bread-crumbs/index.tsx","../src/features/settings/constants/auth.ts","../src/features/settings/components/auth/auth.tsx","../src/app/connectors/pages/settings/styles.ts","../src/app/connectors/pages/settings/index.tsx"],"sourcesContent":["export const CUSTOM_CONNECTORS: string = 'Custom Connectors';\nexport const SALESFORCE_CONNECTOR: string = 'Salesforce API connector';\nexport const SETTINGS: string = 'Settings';\nexport const BREADCRUMBS_ARRAY: Array<string> = [CUSTOM_CONNECTORS, SALESFORCE_CONNECTOR, SETTINGS];\n","import { styled, Typography, Stack, theme } from '@hiver/hiver-ui-kit';\nimport { StyledComponent } from '@emotion/styled';\nimport type { TypographyProps, StackProps } from '@hiver/hiver-ui-kit';\n\nexport const BreadCrumbsWrapper: StyledComponent<StackProps> = styled(Stack)`\n  margin-bottom: 36px;\n  .arrow {\n    border: solid ${theme.palette.gray.gray3};\n    border-width: 0 2px 2px 0;\n    display: inline-block;\n    padding: 3px;\n    transform: rotate(-45deg);\n    -webkit-transform: rotate(-45deg);\n    height: 5px;\n  }\n`;\n\nexport const BreadCrumbsText: StyledComponent<TypographyProps> = styled(Typography)`\n  margin-right: 4px;\n  &.last {\n    cursor: pointer;\n  }\n`;\n\nexport const ArrowWrapper: StyledComponent<StackProps> = styled(Stack)`\n  width: 20px;\n  height: 20px;\n  margin-right: 4px;\n  padding-right: 6px;\n`;\n","import { FC } from 'react';\nimport { Stack, theme } from '@hiver/hiver-ui-kit';\n\nimport { BREADCRUMBS_ARRAY } from '@/constants/bread-crumbs';\nimport { BreadCrumbsWrapper, BreadCrumbsText, ArrowWrapper } from './styles';\n\nexport const BreadCrumbs: FC = () => {\n  return (\n    <BreadCrumbsWrapper direction={'row'} alignItems={'center'} data-testid=\"breadCrumbs\">\n      {BREADCRUMBS_ARRAY.map((item: string, idx: number) => {\n        const isLast = idx === BREADCRUMBS_ARRAY.length - 1;\n        const color = isLast ? theme.palette.gray.black : theme.palette.gray.gray4;\n        const crumbId = isLast ? 'lastCrumb' : `crumb-${idx}`;\n        return (\n          <Stack key={item.replace(/\\s/g, '')} direction={'row'} alignItems={'center'}>\n            <BreadCrumbsText className={isLast ? 'last' : ''} variant={'h3'} color={color} data-testid={crumbId}>\n              {item}\n            </BreadCrumbsText>\n            {!isLast ? (\n              <ArrowWrapper direction={'row'} alignItems={'center'} justifyContent={'center'}>\n                <div className=\"arrow\" />\n              </ArrowWrapper>\n            ) : null}\n          </Stack>\n        );\n      })}\n    </BreadCrumbsWrapper>\n  );\n};\n","export const AUTH_COMP = 'auth component';\n","import { AUTH_COMP } from '../../constants/auth';\n\nexport const Auth = () => {\n  return <div>{AUTH_COMP}</div>;\n};\n","import { Box, styled } from '@hiver/hiver-ui-kit';\nimport { StyledComponent } from '@emotion/styled';\n\nimport type { BoxProps } from '@hiver/hiver-ui-kit';\n\nexport const SideBarCrumbWrapper: StyledComponent<BoxProps> = styled(Box)`\n  padding: 52px;\n  box-sizing: border-box;\n`;\n","import { BreadCrumbs } from '@/components/ui/bread-crumbs';\nimport { Auth } from '@/features/settings/components/auth/auth';\n\nimport { SideBarCrumbWrapper } from './styles';\n\nexport const Settings = () => (\n  <SideBarCrumbWrapper>\n    <BreadCrumbs />\n    <Auth />\n  </SideBarCrumbWrapper>\n);\n"],"names":["theme","jsx","jsxs"],"mappings":";;AAAO,MAAM,oBAA4B;AAClC,MAAM,uBAA+B;AACrC,MAAM,WAAmB;AACzB,MAAM,oBAAmC,CAAC,mBAAmB,sBAAsB,QAAQ;ACCrF,MAAA,qBAAkD,OAAO,KAAK;AAAA;AAAA;AAAA,oBAGvDA,GAAM,QAAQ,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/B,MAAA,kBAAoD,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrE,MAAA,eAA4C,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AClB9D,MAAM,cAAkB,MAAM;AACnC,SACGC,kCAAAA,IAAA,oBAAA,EAAmB,WAAW,OAAO,YAAY,UAAU,eAAY,eACrE,UAAkB,kBAAA,IAAI,CAAC,MAAc,QAAgB;AAC9C,UAAA,SAAS,QAAQ,kBAAkB,SAAS;AAC5C,UAAA,QAAQ,SAASD,GAAM,QAAQ,KAAK,QAAQA,GAAM,QAAQ,KAAK;AACrE,UAAM,UAAU,SAAS,cAAc,SAAS,GAAG;AACnD,WACGE,kCAAAA,KAAA,OAAA,EAAoC,WAAW,OAAO,YAAY,UACjE,UAAA;AAAA,MAACD,kCAAAA,IAAA,iBAAA,EAAgB,WAAW,SAAS,SAAS,IAAI,SAAS,MAAM,OAAc,eAAa,SACzF,UACH,KAAA,CAAA;AAAA,MACC,CAAC,SACCA,kCAAAA,IAAA,cAAA,EAAa,WAAW,OAAO,YAAY,UAAU,gBAAgB,UACpE,UAACA,kCAAA,IAAA,OAAA,EAAI,WAAU,QAAQ,CAAA,EACzB,CAAA,IACE;AAAA,IAAA,EAAA,GARM,KAAK,QAAQ,OAAO,EAAE,CASlC;AAAA,EAEH,CAAA,EACH,CAAA;AAEJ;AC5BO,MAAM,YAAY;ACElB,MAAM,OAAO,MAAM;AACjB,SAAAA,kCAAA,IAAC,SAAK,UAAU,UAAA,CAAA;AACzB;ACCa,MAAA,sBAAiD,OAAO,GAAG;AAAA;AAAA;AAAA;ACA3D,MAAA,WAAW,MACtBC,kCAAAA,KAAC,qBACC,EAAA,UAAA;AAAA,EAAAD,kCAAA,IAAC,aAAY,EAAA;AAAA,wCACZ,MAAK,EAAA;AAAA,EACR,CAAA;"}

package/index-G3Hgu5xC.js

@@ -0,0 +1,95 @@
+import { s as styled, S as Stack, I as IconButton, K as on, j as jsxRuntimeExports, $ as useLocation, T as API_STATUS, V as ROUTES, L as useNavigate } from "./index-Cg0w12Ck.js";
+import { C as CustomSkeleton, a as useAppSelector, t as selectConnectors, b as selectConnectorTemplates, v as selectCurrentTemplateData, w as selectTemplateDetailsApiStatus, x as selectCurrentConnector, T as Tooltip, r as CustomConnectorCard } from "./index-cz0aBfFX.js";
+import { useRef } from "react";
+import { T as Typography } from "./Typography-B0pksnYc.js";
+const ConfigSettingsWrapper = styled(Stack)`
+  margin: 43px 48px 0 52px;
+  position: relative;
+`;
+const IconBtnWrapper = styled(IconButton)`
+  position: absolute;
+  left: -30px;
+  img {
+    width: 15px;
+    height: 15px;
+    margin: 3.5px 2.5px;
+  }
+`;
+const BackArrow = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M8.86421%2015.9708C9.20287%2016.3941%209.13423%2017.0118%208.71091%2017.3505C8.28758%2017.6891%207.66987%2017.6205%207.33121%2017.1972L8.86421%2015.9708ZM2.94434%2010.1423L2.17784%2010.7555C1.89104%2010.397%201.89104%209.88757%202.17784%209.52907L2.94434%2010.1423ZM7.33121%203.08735C7.66987%202.66403%208.28758%202.59539%208.71091%202.93405C9.13423%203.27271%209.20287%203.89042%208.86421%204.31375L7.33121%203.08735ZM3.31243%2011.1852C2.77031%2011.1852%202.33084%2010.7457%202.33084%2010.2036C2.33084%209.66149%202.77031%209.22201%203.31243%209.22201L3.31243%2011.1852ZM17.0548%209.22201C17.5969%209.22201%2018.0364%209.66149%2018.0364%2010.2036C18.0364%2010.7457%2017.5969%2011.1852%2017.0548%2011.1852V9.22201ZM7.33121%2017.1972L2.17784%2010.7555L3.71083%209.52907L8.86421%2015.9708L7.33121%2017.1972ZM2.17784%209.52907L7.33121%203.08735L8.86421%204.31375L3.71083%2010.7555L2.17784%209.52907ZM3.31243%209.22201L17.0548%209.22201V11.1852L3.31243%2011.1852L3.31243%209.22201Z'%20fill='%236F7C90'/%3e%3c/svg%3e";
+const APILibraryWrapper = styled(Stack)`
+  margin-left: 32px;
+`;
+const API_LIB_TITLE = "APIs in {{connector}} connector";
+const API_LIB_DESCRIPTION = "Following are the list of APIs that you will find in this connector";
+const SkeletonWrapper = styled(Stack)`
+  width: 100%;
+  height: 72px;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid ${on.palette.gray.gray6};
+  border-radius: 8px;
+  box-sizing: border-box;
+`;
+const ApiLibrarySkeleton = () => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { gap: "12px", children: Array(3).fill(0).map((_, idx) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(SkeletonWrapper, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(CustomSkeleton, { variant: "rounded", width: "40%", height: "10px", animation: "wave" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(CustomSkeleton, { variant: "rounded", width: "80%", height: "10px", animation: "wave" })
+    ] }, idx);
+  }) });
+};
+const APILibrary = ({ isConfigSettingsPage, currentConnector }) => {
+  var _a;
+  const { pathname } = useLocation();
+  const connectors = useAppSelector(selectConnectors);
+  const isLibraryCard = pathname === ROUTES.CARD_SETTINGS;
+  const connectorTemplate = useAppSelector(selectConnectorTemplates);
+  const currentConnectorData = useRef();
+  const data = useAppSelector(selectCurrentTemplateData);
+  const apiStatus = useAppSelector(selectTemplateDetailsApiStatus);
+  if (!isConfigSettingsPage) {
+    return null;
+  }
+  if (isConfigSettingsPage && currentConnector) {
+    currentConnectorData.current = isLibraryCard && (connectorTemplate == null ? void 0 : connectorTemplate[currentConnector]) ? connectorTemplate == null ? void 0 : connectorTemplate[currentConnector] : connectors == null ? void 0 : connectors[currentConnector];
+  }
+  const apiList = (data == null ? void 0 : data.apiList) ?? [];
+  const title = API_LIB_TITLE.replace("{{connector}}", ((_a = currentConnectorData == null ? void 0 : currentConnectorData.current) == null ? void 0 : _a.name) ?? "");
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(APILibraryWrapper, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h2", children: title }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", marginBottom: "20px", children: API_LIB_DESCRIPTION }),
+    apiStatus === API_STATUS.LOADING ? /* @__PURE__ */ jsxRuntimeExports.jsx(ApiLibrarySkeleton, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { gap: "12px", children: apiList.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Stack,
+      {
+        width: "100%",
+        height: "72px",
+        border: "1px solid #E0E0E0",
+        borderRadius: "5px",
+        padding: "12px",
+        gap: "10px",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1_medium", children: item.name }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", children: item.description })
+        ]
+      },
+      item.keyName
+    )) })
+  ] });
+};
+const ConnectorConfig = () => {
+  const navigate = useNavigate();
+  const currentConnector = useAppSelector(selectCurrentConnector);
+  const handleBackClick = (e) => {
+    e == null ? void 0 : e.stopPropagation();
+    navigate(ROUTES.BASEPATH);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ConfigSettingsWrapper, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Back", placement: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconBtnWrapper, { onClick: handleBackClick, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: BackArrow }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CustomConnectorCard, { isConfigSettingsPage: true, currentConnector }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(APILibrary, { isConfigSettingsPage: true, currentConnector })
+  ] });
+};
+export {
+  ConnectorConfig
+};
+//# sourceMappingURL=index-G3Hgu5xC.js.map

package/index-G3Hgu5xC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-G3Hgu5xC.js","sources":["../src/app/connectors/pages/settings/connector-config/style.tsx","../src/assets/BackArrow.svg","../src/features/connector-library/components/api-library/styles.tsx","../src/features/connector-library/constants/api-library.ts","../src/features/connector-library/components/api-library-skeleton/styles.ts","../src/features/connector-library/components/api-library-skeleton/index.tsx","../src/features/connector-library/components/api-library/index.tsx","../src/app/connectors/pages/settings/connector-config/index.tsx"],"sourcesContent":["import { IconButton, Stack, styled } from '@hiver/hiver-ui-kit';\nimport { StyledComponent } from '@emotion/styled';\nimport type { IconButtonProps, StackProps } from '@hiver/hiver-ui-kit';\n\nexport const ConfigSettingsWrapper: StyledComponent<StackProps> = styled(Stack)`\n  margin: 43px 48px 0 52px;\n  position: relative;\n`;\n\nexport const IconBtnWrapper: StyledComponent<IconButtonProps> = styled(IconButton)`\n  position: absolute;\n  left: -30px;\n  img {\n    width: 15px;\n    height: 15px;\n    margin: 3.5px 2.5px;\n  }\n`;\n","export default \"data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M8.86421%2015.9708C9.20287%2016.3941%209.13423%2017.0118%208.71091%2017.3505C8.28758%2017.6891%207.66987%2017.6205%207.33121%2017.1972L8.86421%2015.9708ZM2.94434%2010.1423L2.17784%2010.7555C1.89104%2010.397%201.89104%209.88757%202.17784%209.52907L2.94434%2010.1423ZM7.33121%203.08735C7.66987%202.66403%208.28758%202.59539%208.71091%202.93405C9.13423%203.27271%209.20287%203.89042%208.86421%204.31375L7.33121%203.08735ZM3.31243%2011.1852C2.77031%2011.1852%202.33084%2010.7457%202.33084%2010.2036C2.33084%209.66149%202.77031%209.22201%203.31243%209.22201L3.31243%2011.1852ZM17.0548%209.22201C17.5969%209.22201%2018.0364%209.66149%2018.0364%2010.2036C18.0364%2010.7457%2017.5969%2011.1852%2017.0548%2011.1852V9.22201ZM7.33121%2017.1972L2.17784%2010.7555L3.71083%209.52907L8.86421%2015.9708L7.33121%2017.1972ZM2.17784%209.52907L7.33121%203.08735L8.86421%204.31375L3.71083%2010.7555L2.17784%209.52907ZM3.31243%209.22201L17.0548%209.22201V11.1852L3.31243%2011.1852L3.31243%209.22201Z'%20fill='%236F7C90'/%3e%3c/svg%3e\"","import { Stack, StackProps, styled } from '@hiver/hiver-ui-kit';\nimport { StyledComponent } from '@emotion/styled';\n\nexport const APILibraryWrapper: StyledComponent<StackProps> = styled(Stack)`\n  margin-left: 32px;\n`;\n","export const API_LIB_TITLE = 'APIs in {{connector}} connector';\nexport const API_LIB_DESCRIPTION = 'Following are the list of APIs that you will find in this connector';\n","import { Stack, styled, theme } from '@hiver/hiver-ui-kit';\nimport { StyledComponent } from '@emotion/styled';\n\nimport type { StackProps } from '@hiver/hiver-ui-kit';\n\nexport const SkeletonWrapper: StyledComponent<StackProps> = styled(Stack)`\n  width: 100%;\n  height: 72px;\n  gap: 12px;\n  padding: 16px;\n  border: 1px solid ${theme.palette.gray.gray6};\n  border-radius: 8px;\n  box-sizing: border-box;\n`;\n","import { CustomSkeleton } from '@/components/ui/styled-ui-components';\nimport { SkeletonWrapper } from './styles';\nimport { Stack } from '@hiver/hiver-ui-kit';\n\nexport const ApiLibrarySkeleton = () => {\n  return (\n    <Stack gap={'12px'}>\n      {Array(3)\n        .fill(0)\n        .map((_, idx) => {\n          return (\n            <SkeletonWrapper key={idx}>\n              <CustomSkeleton variant=\"rounded\" width={'40%'} height={'10px'} animation=\"wave\" />\n              <CustomSkeleton variant=\"rounded\" width={'80%'} height={'10px'} animation=\"wave\" />\n            </SkeletonWrapper>\n          );\n        })}\n    </Stack>\n  );\n};\n","import { useRef } from 'react';\nimport { IConnectorStruct, IConnectorTemplate } from '../../types/connector';\nimport { Stack, Typography } from '@hiver/hiver-ui-kit';\nimport { useAppSelector } from '@/store/hooks';\nimport {\n  selectConnectors,\n  selectConnectorTemplates,\n  selectCurrentTemplateData,\n  selectTemplateDetailsApiStatus\n} from '../../store/selectors';\nimport { useLocation } from 'react-router-dom';\nimport { ROUTES } from '@/constants/router-paths';\nimport { APILibraryWrapper } from './styles';\nimport { API_LIB_DESCRIPTION, API_LIB_TITLE } from '../../constants/api-library';\nimport { API_STATUS } from '@/constants/api';\nimport { ApiLibrarySkeleton } from '../api-library-skeleton';\n\ninterface IProps {\n  isConfigSettingsPage?: boolean;\n  currentConnector?: string | null | undefined;\n}\n\nexport const APILibrary = ({ isConfigSettingsPage, currentConnector }: IProps) => {\n  const { pathname } = useLocation();\n  const connectors: { [ke: string]: IConnectorStruct } | null = useAppSelector(selectConnectors);\n  const isLibraryCard = pathname === ROUTES.CARD_SETTINGS;\n  const connectorTemplate: { [key: string]: IConnectorTemplate } | null = useAppSelector(selectConnectorTemplates);\n  const currentConnectorData = useRef<IConnectorStruct | IConnectorTemplate | undefined>();\n  const data = useAppSelector(selectCurrentTemplateData);\n  const apiStatus = useAppSelector(selectTemplateDetailsApiStatus);\n\n  if (!isConfigSettingsPage) {\n    return null;\n  }\n\n  if (isConfigSettingsPage && currentConnector) {\n    currentConnectorData.current =\n      isLibraryCard && connectorTemplate?.[currentConnector]\n        ? connectorTemplate?.[currentConnector]\n        : connectors?.[currentConnector];\n  }\n\n  const apiList = data?.apiList ?? [];\n\n  const title = API_LIB_TITLE.replace('{{connector}}', currentConnectorData?.current?.name ?? '');\n\n  return (\n    <APILibraryWrapper>\n      <Typography variant=\"h2\">{title}</Typography>\n      <Typography variant=\"body1\" marginBottom={'20px'}>\n        {API_LIB_DESCRIPTION}\n      </Typography>\n      {apiStatus === API_STATUS.LOADING ? (\n        <ApiLibrarySkeleton />\n      ) : (\n        <Stack gap={'12px'}>\n          {apiList.map((item) => (\n            <Stack\n              key={item.keyName}\n              width={'100%'}\n              height={'72px'}\n              border={'1px solid #E0E0E0'}\n              borderRadius={'5px'}\n              padding={'12px'}\n              gap={'10px'}>\n              <Typography variant=\"body1_medium\">{item.name}</Typography>\n              <Typography variant=\"body2\">{item.description}</Typography>\n            </Stack>\n          ))}\n        </Stack>\n      )}\n    </APILibraryWrapper>\n  );\n};\n","import { MouseEvent } from 'react';\nimport { Tooltip } from '@hiver/hiver-ui-kit';\n\nimport { CustomConnectorCard } from '@/features/request-new-connector/components/custom-connector-card';\nimport { ConfigSettingsWrapper, IconBtnWrapper } from './style';\n\nimport BackArrow from '@/assets/BackArrow.svg';\n\nimport { useAppSelector } from '@/store/hooks';\nimport { selectCurrentConnector } from '@/features/connector-library/store/selectors';\nimport { useNavigate } from 'react-router-dom';\nimport { APILibrary } from '@/features/connector-library/components/api-library';\nimport { ROUTES } from '@/constants/router-paths';\n\nexport const ConnectorConfig = () => {\n  const navigate = useNavigate();\n  const currentConnector = useAppSelector(selectCurrentConnector);\n\n  const handleBackClick = (e: MouseEvent) => {\n    e?.stopPropagation();\n    navigate(ROUTES.BASEPATH);\n  };\n\n  return (\n    <ConfigSettingsWrapper>\n      <Tooltip title={'Back'} placement={'bottom'}>\n        <IconBtnWrapper onClick={handleBackClick}>\n          <img src={BackArrow} />\n        </IconBtnWrapper>\n      </Tooltip>\n      <CustomConnectorCard isConfigSettingsPage={true} currentConnector={currentConnector} />\n      <APILibrary isConfigSettingsPage={true} currentConnector={currentConnector} />\n    </ConfigSettingsWrapper>\n  );\n};\n"],"names":["theme","jsx","jsxs"],"mappings":"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"}