@mcf/lib-ui 2.0.156 → 2.0.169

package/dist/main.css

@@ -1,15 +1,23 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800');:root {
   --primary: var(--purple);
   --primary: var(--purple);
+  --dark-primary: #552895; /* shade(10%) */
+  --light-primary: #E3D7F4;
+  --lighter-primary: #EFEAF6; /* lightness(90%)) */
+  --generic: #1263CB;
+  --generic: var(--blue-blue, #1263CB);
+  --hover-generic: #0c4fa7;
+  --active-generic: #00449E;
   --gray: gray;
   --white: white;
-  --lighter-primary: #EFEAF6; /* lightness(90%)) */
-  --light-primary: #E3D7F4;
-  --dark-primary: #552895; /* shade(10%) */
   --secondary: #D6008F;
-  --dark-secondary: #c10081; /* shade(10%) */
+  --dark-secondary: #C10081; /* shade(10%) */
   --danger:#CE030D;
-  --dark-danger: #eb142a;
+  --bright-danger: #EB142A;
+  --dark-danger: #B0030B;
+  --light-danger: #FFDFDF;
+  --light-danger: var(--red-washed-red, #FFDFDF);
+  --lighter-danger: #FFEFEF;
   --green: #118159;
 }:root {
   --borderstyle: 1px solid var(--black-20);
@@ -25,6 +33,7 @@
   --font-size-4: 1.25rem;
   --font-size-5: 1rem;
   --font-size-6: .875rem;
+  --font-size-8: 0.6rem;
   --font-size-2-5: calc(((2.25rem + 1.5rem) / 2));
   --font-size-2-5: calc(((var(--font-size-2) + var(--font-size-3)) / 2));
   --font-size-3-5: calc(((1.25rem + 1.5rem) / 2));

package/jest.config.js

@@ -87,6 +87,7 @@ module.exports = {
 
   // A preset that is used as a base for Jest's configuration
   // preset: null,
+  preset: 'ts-jest',
 
   // Run tests from one or more projects
   // projects: null,
@@ -121,13 +122,13 @@ module.exports = {
   // setupFiles: [],
 
   // The path to a module that runs some code to configure or set up the testing framework before each test
-  setupTestFrameworkScriptFile: '<rootDir>/test/helpers/index.ts',
+  setupFilesAfterEnv: ['<rootDir>/test/helpers/index.ts'],
 
   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
   snapshotSerializers: ['enzyme-to-json/serializer'],
 
   // The test environment that will be used for testing
-  // testEnvironment: "jest-environment-jsdom",
+  testEnvironment: 'jest-environment-jsdom',
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@mcf/lib-ui",
-  "version": "2.0.156",
+  "version": "2.0.169",
   "description": "User Interface (UI) components for use in the MCF project.",
   "main": "dist/index.js",
   "types": "dist/@types/Component/index.d.ts",
   "scripts": {
     "build-bundle": "cross-env NODE_ENV=production webpack --mode production",
     "build-css": "cross-env NODE_ENV=production postcss src/style/main.scss --dir dist/ --ext css",
-    "build-storybook": "build-storybook -c .storybook -o ./static",
+    "build-storybook": "storybook build -o ./static",
     "build-types": "tsc --module es6 --declaration --emitDeclarationOnly --outDir dist/@types",
     "build-watch": "yarn build-bundle --watch & yarn build-types --watch",
     "build": "yarn clean && yarn build-bundle && yarn build-types && yarn build-css",
@@ -15,15 +15,14 @@
     "clean": "rm -rf dist",
     "deploy": "node serve-static.js",
     "eslint": "eslint .",
-    "lint-fix": "yarn eslint --fix && yarn tslint --fix",
-    "lint": "yarn eslint && yarn tslint",
+    "lint-fix": "yarn eslint --fix",
+    "lint": "yarn eslint",
     "nsp": "mkdir -p ./coverage/nsp && cross-env nsp check --output json > ./coverage/nsp/report.json",
     "start": "yarn storybook",
-    "storybook": "start-storybook -p 9001 -c .storybook",
     "test": "jest",
     "test:watch": "jest --watch",
     "tsc-check": "tsc --noEmit --skipLibCheck",
-    "tslint": "tslint -c tslint.json -p . -t stylish"
+    "storybook": "storybook dev -p 6006"
   },
   "repository": "gitlab:mycf.sg/lib-ui",
   "author": "MCF",
@@ -36,23 +35,38 @@
     "scrolling-element": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "7.20.5",
+    "@babel/core": "7.21.8",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "7.20.2",
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "7.18.6",
-    "@storybook/react": "5.3.21",
+    "@babel/plugin-proposal-object-rest-spread": "7.20.7",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@storybook/addon-a11y": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addon-onboarding": "^1.0.9",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/react": "^7.6.4",
+    "@storybook/react-webpack5": "^7.6.4",
+    "@storybook/testing-library": "^0.2.2",
+    "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.1.6",
+    "@testing-library/react": "12.1.5",
+    "@testing-library/user-event": "^14.5.2",
     "@types/cheerio": "0.22.31",
     "@types/enzyme": "3.10.12",
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/jest": "23.3.14",
     "@types/lodash": "4.14.185",
+    "@types/node": "^20.10.6",
     "@types/prop-types": "15.7.5",
     "@types/react": "16.14.21",
     "@types/react-autosuggest": "9.3.14",
     "@types/react-dom": "16.9.14",
-    "@types/storybook__react": "4.0.2",
+    "@types/webpack-env": "^1.18.4",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
     "babel-eslint": "8.2.5",
     "babel-loader": "8.3.0",
     "babel-plugin-lodash": "3.3.4",
@@ -62,43 +76,42 @@
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.7",
     "enzyme-to-json": "3.6.2",
-    "eslint": "4.19.1",
+    "eslint": "^8.53.0",
     "eslint-config-google": "0.9.1",
     "eslint-config-govtech-mcf": "1.2.0",
     "eslint-config-prettier": "2.9.0",
     "eslint-import-resolver-webpack": "0.10.1",
     "eslint-plugin-babel": "5.1.0",
     "eslint-plugin-import": "2.13.0",
+    "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-mocha": "5.0.0",
     "eslint-plugin-no-unsafe-innerhtml": "1.0.16",
-    "eslint-plugin-prettier": "2.6.1",
-    "eslint-plugin-react": "7.10.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-storybook": "^0.6.15",
     "express": "4.18.2",
     "identity-obj-proxy": "3.0.0",
-    "jest": "23.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "nsp": "3.2.1",
     "postcss-cli": "5.0.1",
     "postcss-import": "11.1.0",
     "postcss-inline-svg": "3.1.1",
     "postcss-loader": "2.1.6",
     "postcss-preset-env": "5.3.0",
-    "prettier": "1.13.7",
+    "prettier": "^3.1.0",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
+    "storybook": "^7.6.4",
     "style-loader": "0.23.1",
     "tachyons": "4.12.0",
-    "ts-jest": "23.10.5",
-    "tslint": "5.10.0",
-    "tslint-config-prettier": "1.13.0",
-    "tslint-eslint-rules": "5.3.1",
-    "tslint-plugin-prettier": "1.3.0",
-    "tslint-react": "3.6.0",
-    "typescript": "3.9.10",
-    "url-loader": "1.1.2",
-    "webpack": "4.15.1",
-    "webpack-cli": "2.1.5",
-    "webpack-node-externals": "1.7.2"
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.2.2",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-node-externals": "^3.0.0"
   },
   "peerDependencies": {
     "react": "16.x"

package/test/helpers/index.ts

@@ -1 +1,2 @@
 import './enzyme';
+import '@testing-library/jest-dom';

package/tsconfig.json

@@ -16,7 +16,8 @@
     "strict": true,
     "target": "es5",
     "pretty": true,
-    "typeRoots": ["./node_modules/@types"]
+    "typeRoots": ["./node_modules/@types"],
+    "resolveJsonModule": true
   },
   "include": ["./src/**/*"],
   "exclude": ["**/*.test.tsx", "**/*.test.ts"]

package/tslint.json

@@ -1,17 +0,0 @@
-{
-  "extends": [
-    "tslint:latest",
-    "tslint-react",
-    "tslint-eslint-rules",
-    "tslint-plugin-prettier",
-    "tslint-config-prettier"
-  ],
-  "rules": {
-    "no-submodule-imports": false,
-    "jsx-no-lambda": false,
-    "jsx-boolean-value": false,
-    "prettier": true,
-    "no-var-requires": false,
-    "no-implicit-dependencies": false
-  }
-}