1.0.41 • Published 6 months ago

@razorrisk/web-ui-lib v1.0.41

Weekly downloads
-
License
-
Repository
-
Last release
6 months ago

@razorrisk/web-ui-lib

Extendable Cloud UI library for RazorRisk web applications.

Prerequisites

Before installing @razorrisk/web-ui-lib, ensure your project has the following peer dependencies installed and that you are not running React on Strict Mode. These libraries are required for compatibility and proper functionality:

PackageRequired Version
react^18.3.1
react-dom^18.3.1
react-router6.26.2
react-router-dom6.26.2

You can install them using the following command:

npm install react@^18.3.1 react-dom@^18.3.1 react-router@6.26.2 react-router-dom@6.26.2

Installation

npm install @razorrisk/web-ui-lib

⚙️ Usage

To bootstrap your application using the Web UI Library, set up both the WebUiLib component and your configuration as follows:

import React, { useEffect, useState } from 'react';
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { ApolloClient } from '@apollo/client';

import {
  WebUiLib,
  initializeApolloClient,
  overrideRoutes,
  addRoutes,
  deleteRoutes,
  request,
} from '@razorrisk/web-ui-lib';

import '@razorrisk/web-ui-lib/style.css';
import { en } from './translations/en';

// Set up language translations
i18n.use(initReactI18next).init({
  resources: { en },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: { escapeValue: false },
});

export function App() {
  const [apolloClient, setApolloClient] = useState<ApolloClient<unknown>>();

  useEffect(() => {
    initializeApolloClient().then(setApolloClient);
  }, []);

  return <WebUiLib apolloClient={apolloClient} />;
}

export default App;

Then in your /public/config.json file:

{
  "server": {
    "hostname": "localhost",
    "port": "3000",
    "apiEndPoint": "http://127.0.1:3333",
    "workflowEndPoint": "http://127.0.1:555"
  },
  "client": {
    "maxNumber": 1000000000000,
    "navigationBarProperties": {
      "color": "#fff"
    },
    "tradeContributionPageSize": 500
  }
}

🈯 Setting Up Language Translations

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { en } from './translations/en';

i18n.use(initReactI18next).init({
  resources: {
    en,
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false,
  },
});

🚀 Setting Up Apollo Client

import { initializeApolloClient } from '@razorrisk/web-ui-lib';
import { ApolloClient } from '@apollo/client';
import { useEffect, useState } from 'react';

const [apolloClient, setApolloClient] = useState<ApolloClient<unknown>>();

useEffect(() => {
  initializeApolloClient().then(setApolloClient);
}, []);

Pass it to the UI shell:

<WebUiLib apolloClient={apolloClient} />

🧠 overrideRoutes

Used to fully replace an existing route by ID, including its label, path, component, and icon.

import { overrideRoutes } from '@razorrisk/web-ui-lib';
import { RiDashboardLine } from 'react-icons/ri';
import PrivateRoute from './PrivateRoute';
import CustomDashboard from './CustomDashboard';

overrideRoutes([
  {
    id: 'Dashboard',
    path: '/custom-dashboard',
    component: props => <PrivateRoute {...props} component={CustomDashboard} menu="Dashboard" />,
    navLabel: 'Custom Dashboard',
    navIcon: RiDashboardLine,
    propsMerger: originalProps => ({
      ...originalProps,
      customProp: 'Hello',
    }),
  },
]);

addRoutes

Used to add completely new routes and navigation items.

import { addRoutes } from '@razorrisk/web-ui-lib';
import PrivateRoute from './PrivateRoute';
import CustomAudit from './CustomAudit';
import { RiFileTextLine } from 'react-icons/ri';

addRoutes(
  [
    {
      path: '/custom-audit',
      element: <PrivateRoute component={CustomAudit} menu="CustomAudit" />,
    },
  ],
  [
    {
      id: 'Admin',
      label: 'Admin',
      icon: RiFileTextLine,
      variant: 'nav',
      children: [
        {
          id: 'CustomAudit',
          label: 'Custom Audit',
          route: '/custom-audit',
          icon: RiFileTextLine,
          variant: 'nav',
        },
      ],
    },
  ]
);

deleteRoutes

Used to hide/remove routes and nav items by their ID:

import { deleteRoutes } from '@razorrisk/web-ui-lib';

deleteRoutes(['Dashboard', 'Trades', 'AuditTrail']);

🌐 request Utility

Simple wrapper around axios to perform authenticated requests.

import { request } from '@razorrisk/web-ui-lib';

const data = await request({
  url: '/api/some-endpoint',
  options: {
    method: 'POST',
    data: { key: 'value' },
  },
});

Dynamic Runtime Configuration via config.json

Before injecting your components at runtime, you need to compile them into ES modules using the @razorrisk/react-runtime-component-builder CLI.

After building the components you can also control route injection at runtime by defining deleteRoutes and addRoutes in your config.json file. For example:

{
  "deleteRoutes": ["AuditTrail"],
  "addRoutes": [
    {
      "id": "Admin",
      "label": "Admin",
      "icon": "MdInsertChart",
      "variant": "nav",
      "children": [
        {
          "id": "CustomAudit",
          "route": "/custom-audit",
          "componentPath": "/externals-dist/Home2.js",
          "label": "Custom Audit",
          "icon": "MdInsertChart",
          "variant": "nav"
        }
      ]
    },
    {
      "id": "custom",
      "route": "/custom-page",
      "componentPath": "/externals-dist/Home2.js",
      "label": "Custom Page",
      "icon": "MdInsertChart",
      "variant": "nav"
    }
  ]
}

deleteRoutes: An array of id strings for routes you want to remove from the default navigation.

addRoutes: An array of nav-item objects defining new menu entries and associated components to inject.

After placing this file at the root of your project the runtime loader will automatically inject the routes.

Supports:

  • Auto-auth headers
  • Smart endpoint routing for /workflow prefix
  • Accepts custom headers or disables Accept: application/json
  • Runtime Extension with custom functionality

🗂 Navigation Schema (IDs + Labels Overview)

Dashboard - "Dashboard"
Report - "Report"
  ├─ CounterpartyReportView - "Counterparty Report View"
  └─ CountryReportView - "Country Report View"
RiskViews - "Risk Views"
  ├─ CounterpartyRiskView - "Counterparty Risk View"
  └─ CountryReportView - "Country Risk View"
Counterparty - "Counterparty"
Country - "Country"
Portfolios - "Portfolios"
ReferenceData - "Reference Data"
Trades - "Trades"
  ├─ TradeList - "Trade List"
  ├─ PDLC - "Pre-Deal Check"
  ├─ ReservationsList - "Reservations List"
  └─ Reservations - "Reservations"
Admin - "Admin"
  ├─ AuditTrail - "Audit Trail"
  ├─ PDCAuditTrail - "Pre-Deal Check Audit Trail"
  ├─ RiskViewAuditTrail - "Risk View Audit Trail"
  ├─ BatchSummaries - "Batch Summaries"
  └─ UAM - "UAM"

🧩 Summary of Exports

Function / ComponentPurpose
WebUiLibMain app wrapper
initializeApolloClientBootstraps Apollo Client
overrideRoutesReplaces a route + nav config by ID
addRoutesAdds new routes + nav items
deleteRoutesRemoves nav/routes by ID
requestSecure HTTP client

Let us know if you want additional setup examples (Remix, Next.js, etc).

@ag-grid-community/all-modules@ag-grid-community/core@ag-grid-community/react@ag-grid-enterprise/all-modules@apollo/client@azure/msal-browser@azure/msal-react@json2csv/plainjs@loadable/component@material-ui/core@material-ui/icons@mdi/js@mdi/react@radix-ui/react-accordion@radix-ui/react-checkbox@radix-ui/react-dialog@radix-ui/react-dropdown-menu@radix-ui/react-icons@radix-ui/react-label@radix-ui/react-radio-group@radix-ui/react-select@radix-ui/react-separator@radix-ui/react-slider@radix-ui/react-switch@radix-ui/react-tabs@radix-ui/react-toast@radix-ui/react-tooltip@razorrisk/shared-ui@razorrisk/web-ui-lib@swc/helpers@tanstack/react-table@tanstack/react-virtual@vitejs/plugin-legacyajvautosizeaxiosbabel-polyfillbootstrapchalkchart.jsclsxcompressioncore-jscross-envdate-fnsdayjsdom-helpersdompurifyexpressfile-saverfont-awesomefontfaceobserverframer-motiongraphqlhistoryhoist-non-react-staticshtml2canvashuskyi18nextimmerimmutableintlinvariantjson2csvjspdfjwt-decodelodashminimistmomentnamornumeralpapaparsepowerbi-clientpowerbi-client-reactprop-typesreact-bootstrap-typeaheadreact-chartjs-2react-checkbox-treereact-contextmenureact-day-pickerreact-dndreact-dnd-html5-backendreact-draggablereact-grid-layoutreact-helmetreact-i18nextreact-iconsreact-input-autosizereact-intlreact-isreact-loadablereact-number-formatreact-reduxreact-rndreact-router-reduxreact-selectreact-sizemereact-tablereact-table-hoc-fixed-columnsreact-tagsinputreact-treebeardreact-virtualizedreactstraprecomposereduxredux-immutableredux-sagaregenerator-runtimereselectsavestyled-componentstslibuse-deep-compare-effectutf8uuidvite-plugin-requirewarningwhatwg-fetchxml-jsxml2jszustand
1.0.41

6 months ago

1.0.40

7 months ago

1.0.39

7 months ago

1.0.38

7 months ago

1.0.37

7 months ago

1.0.36

7 months ago

1.0.35

7 months ago

1.0.34

7 months ago

1.0.33

7 months ago

1.0.32

7 months ago

1.0.31

7 months ago

1.0.30

7 months ago

1.0.28

7 months ago

1.0.27

7 months ago

1.0.26

7 months ago

1.0.25

7 months ago

1.0.24

7 months ago

1.0.23

7 months ago

1.0.20

7 months ago

1.0.19

7 months ago

1.0.18

7 months ago

1.0.17

7 months ago

1.0.16

7 months ago

1.0.15

7 months ago

1.0.14

7 months ago

1.0.13

7 months ago

1.0.12

7 months ago

1.0.11

7 months ago

1.0.10

7 months ago

1.0.8

7 months ago

1.0.7

7 months ago

1.0.6

7 months ago

1.0.4

7 months ago

1.0.3

7 months ago

1.0.2

7 months ago

1.0.1

7 months ago

0.0.1

7 months ago