Merge pull request #102 from openbankingnigeria/web

Web

Author: christopheresivwekpe

apps/web/app/(webapp)/(components)/CodeEditor.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import React from 'react';
+// import dynamic from 'next/dynamic';
+import MonacoEditor from 'react-monaco-editor';
+import { CodeEditorProps } from '@/types/webappTypes/componentsTypes';
+// const MonacoEditor = dynamic(import('react-monaco-editor'), { ssr: false });
+
+const CodeEditor = ({
+  code, 
+  setCode
+}: CodeEditorProps) => {
+
+  const handleEditorChange = (newCode: string, event: any) => {
+    setCode(newCode);
+  };
+
+  const options = {
+    autoIndent: 'full',
+    contextmenu: true,
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: 24,
+    hideCursorInOverviewRuler: true,
+    matchBrackets: 'always',
+    minimap: {
+      enabled: true,
+    },
+    scrollbar: {
+      horizontalSliderSize: 4,
+      verticalSliderSize: 18,
+    },
+    selectOnLineNumbers: true,
+    roundedSelection: false,
+    readOnly: false,
+    cursorStyle: 'line',
+    automaticLayout: true,
+  }; 
+
+  return (
+    <div className='w-full rounded-[6px] overflow-hidden'>
+      <MonacoEditor
+        width="800"
+        height="400"
+        language="javascript"
+        theme="vs-dark"
+        value={code}
+        defaultValue={code}
+        // options={options}
+        onChange={handleEditorChange}
+      />
+    </div>
+  )
+}
+
+export default CodeEditor

apps/web/app/(webapp)/(components)/EmptyState.tsx

@@ -1,13 +1,15 @@
 import { EmptyStateProps } from '@/types/webappTypes/componentsTypes';
 import React from 'react';
-import { EmptyStateButton } from '.';
+import { AddPermissionButton } from '../app/api-management/consumers/(components)';
 
 const EmptyState = ({
   type,
   title,
   body,
   parentStyle,
   titleStyle,
+  searchQuery,
+  altData,
   bodyStyle,
   iconStyle,
   containerStyle,
@@ -77,8 +79,14 @@ const EmptyState = ({
         </div>
 
         { 
-          button &&
-          <EmptyStateButton type={buttonType} />
+          button && (
+              buttonType == 'ADD_PERMISSIONS' ?
+              <AddPermissionButton 
+                searchQuery={searchQuery || ''}
+                customerId={altData} 
+              />
+              : null
+          )
         }
       </div>
     </section>

apps/web/app/(webapp)/(components)/EmptyStateButton.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { ListPanelContainerProps } from '@/types/webappTypes/componentsTypes'
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { getObjectsNotInArrayB } from '@/utils/getObjectNotInArray';
+
+const ListPanel = ({
+  panel,
+  currentValue,
+  setCurrentValue,
+  containerStyle
+}: ListPanelContainerProps) => {
+
+  const [panelOut, setPanelOut] = useState<any[]>([]);
+  const panelRemaining = getObjectsNotInArrayB(panel, panelOut);
+
+  useEffect(() => {
+    setPanelOut([panel[0]]);
+  }, []);
+
+  const handlePanelList = (data: any) => {
+    if (panelOut?.find((item: any) => item?.id == data?.id)) {
+      const filteredItem = panelOut?.filter(item => item?.id != data?.id);
+      setPanelOut(filteredItem);
+    } else {
+      setPanelOut((prev: any) => [...prev, data]);
+    }
+  }
+
+  return (
+    <div className={`bg-white border-b border-o-border 
+      flex items-center gap-[16px] h-[40px] w-full ${containerStyle}`}
+    >
+      {
+        panelOut?.map((data) => (
+          <div 
+            key={data?.id} 
+            className='relative whitespace-nowrap cursor-pointer w-fit flex flex-col px-[4px] pt-[9px] pb-[11px]'
+            onClick={() => setCurrentValue(data?.value)}
+          >
+            <div className={`${currentValue == data?.value ? 'text-o-blue font-[500]' : 'text-o-text-medium3'} 
+              capitalize text-f14 hover:text-o-blue`}
+            >
+              {data?.label}
+            </div>
+
+            {
+              currentValue == data?.value &&
+              <motion.div
+                className='pane-underline'
+                layoutId='top-pane-underline'
+              ></motion.div>
+            }
+          </div>
+        ))
+      }
+
+      <div className='flex flex-col relative'>
+        <button type='button' className='peer' onClick={(e) => e.stopPropagation()}>
+          <svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="28" height="30" rx="4" fill="#F6F8FA"/>
+            <path d="M13.9998 8.16602V19.8327M8.1665 13.9993H19.8332" stroke="#666D80" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            <rect x="4" y="28" width="20" height="2" fill="#DCE3E8" fillOpacity="0.01"/>
+          </svg>
+        </button>
+
+        <div className='hidden peer-focus:flex hover:flex absolute bg-white rounded-lg flex-col z-10 border border-o-border right-0 top-[30px] py-[4px] w-[158px] items-start justify-start tablemenu-boxshadow'>
+          {
+            panelRemaining?.map((data) => (
+              <button
+                key={data.id}
+                className='whitespace-nowrap cursor-pointer hover:bg-o-bg-disabled w-full flex gap-[12px] items-center py-[10px] px-[16px] text-o-text-dark text-f14'
+                onClick={() => handlePanelList(data)}
+              >
+                <span className='whitespace-nowrap'>
+                  {data.label}
+                </span>
+              </button>
+            ))
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ListPanel

apps/web/app/(webapp)/(components)/ListPanel.tsx

@@ -27,7 +27,8 @@ import TierBox from "./TierBox";
 import DownloadButton from "./DownloadButton";
 import DragAndUploadFile from "./DragAndUploadFile";
 import KybBanner from "./KybBanner";
-import EmptyStateButton from "./EmptyStateButton";
+import ListPanel from "./ListPanel";
+import CodeEditor from "./CodeEditor";
 
 export {
   DatePicker,
@@ -59,5 +60,6 @@ export {
   TierBox,
   DownloadButton,
   DragAndUploadFile,
-  EmptyStateButton
+  ListPanel,
+  CodeEditor
 }