Medical Screening Library (Verisk)

Background

This project is for centrally housing the front end application for all Staysure Group products where medical screening is necessary to provide a policy.

The application is a library package that is deployed to npm (jfrog) and consumed into our products via importing into NextJS/React project, or via an iFrame for legacy applications.

Working folders

The main library project code is inside the src folder in the root of this repo.

We also have an example NextJS application (demo-app) in the root. This imports the above folder into the demo-app > package.json via a symlink using yalc. See yalc docs for more details on how this works -> https://github.com/wclr/yalc

Storybook (for development)

We use Storybook to be able to view each component that makes up the package application.

In addition, we also run the whole application as a story using mock data to fully simulate the final product (without having to have access to the BFF)

The setup also includes our multi-brand component library which builds on top of NextUI + Tailwind

Run the following commands to run the development setup in each brand:

• Staysure + Expat = npm run storybook:sts
• Avanti = npm run storybook:avt

Mock BFF Api (for development)

When storybook runs it also starts a worker in the background (using MSW -> https://mswjs.io/)

This worker intercepts any network API calls from the application and returns some mock data via handlers. These handers are defined inside the src/mocks/handlers folder.

This setup allows us to fully run and test the front end without having the BBF layer involved. This allows the front end tests to be isolated, and also provides a cleaner development experience.

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});

• Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
• Optionally add ...tseslint.configs.stylisticTypeChecked
• Install eslint-plugin-react and update the config:

// eslint.config.js
import react from "eslint-plugin-react";

export default tseslint.config({
  // Set the react version
  settings: { react: { version: "18.3" } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs["jsx-runtime"].rules,
  },
});