user-management-fragment v2.0.0

user-management-fragment

The base project is a CRA-based react application for develop/testing the components, and will not be deployed or published.

Actual components to be published are at ./src/export/index.js.

Fragments will be composed with container applications at build-time.

• -fragment prefix denotes the components are microfrontend fragments.
• -portal suffix denotes the project is a microfrontend container application.

Libraries

• Javascript: ES6+
• UI Framework: React 17+
• Component library: material-ui
• http requests: axios
• bundler: rollup

see package.json for more

Conventions

• Prefer functional components
• React Hooks API for stateful components
• React Context API for shared state
• Prettier for code formatter (see .prettierrc)
• ESLint for linter (see .eslintrc)

Disclaimer: conventions are still a bit loose, conflicts between linter (eslint) and formatter (prettier) can still occur.

Getting started

1. restore dependencies

npm install

re-run periodically if others have added dependencies

2. Start dev environment

npm start

Build

build configuration: rollup.config.js

1. run build / bundle process

npm run build

Publish

# login to private npm registry (verdaccio), if necessary.
npm login --registry http://nugetfeed.ktd.com:4873

# bump patch version
npm version patch

# build
npm run build

# publish package
npm publish

Use in React/jsx project

Install this react component

npm install user-management-fragment

Sample React wrapper

import React from 'react';
import ManageUsers from './components/manage-users';

function App() {
  const config = {
    language: 'en',
    baseUrl: 'https://provider-portal-dev.dpplab.com/platform/provider',
    app: 'provider-portal', // 'provider-portal' | 'lite-dms'
    tenantId: 'yuuvistest',
    token: '',
    configBrand: "Kyocera", // 'Kyocera' | 'TA'
    productCode: "", // for license subscription 'KCIM' | null 
  };

  // userProfile from keycloak or api
  const userProfile = {
    email: "",
    emailVerified: "",
    lastname: "",
    firstname: "",
    username: "",
    id: "",
    locale: "",
    role: "",
  },
  setUserProfile: (userProfile: any) => { }, // callback function to set user profile
  getTokenFromStorage: ():string => { },  // callback function to return toke
  
  // callback to get keycloak instance
  // example getKeycloak
  function getKeycloak() {
    const keycloak = useContext(KeycloakContext);

    if (!keycloak) {
      throw new Error(
        "useKeycloak hook must be used inside KeycloakProvider context"
      );
    }
  
    const { authenticated } = keycloak;
    return {
      authenticated,
      keycloak,
    };
  }

  return (
    <ManageUsers config={config} 
              profile={userProfile}
              setUserProfile ={setUserProfile}
              getTokenFromStorage={getTokenFromStorage}
              getKeycloak= {getKeycloak}/>
  );
}

export default App;

Use in Angular/ts project

Unfortunately, this is a javascript only project. It may be ported to ts as time allows.

To use in typescript projects, you can:

1. write a declaration file

2. or allow implicit 'any'

// tsconfig.json
{
  "compilerOptions": {
    //...
    "noImplicitAny": false
  },
  //...
}

Install react and @types

npm install react react-dom
npm install --save-dev @types/react @types/react-dom

Install this react component

npm install user-management-fragment

Sample Angular wrapper component w/o TSX

// manageusers.component.ts

import {
  Component,
  OnChanges,
  AfterViewInit,
} from '@angular/core';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import ManageUsers from 'user-management-fragment';

@Component({
  selector: 'app-react-manage-users',
  template: '<div [id]="rootId"></div>',
})
export class ReactManageUsersComponent implements OnChanges, AfterViewInit {
  public rootId = 'manage-users-root';
  private hasViewLoaded = false;

  public ngOnChanges() {
    this.renderComponent();
  }

  public ngAfterViewInit() {
    this.hasViewLoaded = true;
    this.renderComponent();
  }

  private renderComponent() {
    if (!this.hasViewLoaded) {
      return;
    }

    const props = {
      config: {
        language: 'en',
        baseUrl: 'https://provider-portal-dev.dpplab.com/platform/provider',
        app: 'provider-portal', // 'provider-portal' | 'lite-dms'
        tenantId: 'yuuvistest',
        token: '',
      },
    };

    ReactDOM.render(
      React.createElement(ManageUsers, props),
      document.getElementById(this.rootId)
    );
  }
}