Package updates (#107)

* Update @labkey/components and @labkey/build package versions to latest
- fix for jest config with revert of ESModules build
- package version updates for jest and related
- move scss import to app/dev
- fix for view customization, wrap context providers

Author: cnathe

demo/package-lock.json

@@ -12,28 +12,24 @@
     "test": "cross-env NODE_ENV=test jest"
   },
   "dependencies": {
-    "@labkey/components": "2.222.0"
+    "@labkey/components": "2.246.2"
   },
   "devDependencies": {
-    "@labkey/build": "6.2.1",
-    "@types/enzyme": "3.10.11",
-    "@types/jest": "28.1.6",
-    "@types/react": "16.14.23",
+    "@labkey/build": "6.4.0",
+    "@types/enzyme": "3.10.12",
+    "@types/jest": "29.2.0",
+    "@types/react": "16.14.34",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
-    "jest": "28.1.3",
-    "jest-environment-jsdom": "28.1.3",
+    "jest": "29.2.2",
+    "jest-environment-jsdom": "29.2.2",
     "jest-teamcity-reporter": "0.9.0",
     "react-test-renderer": "16.14.0",
-    "ts-jest": "28.0.7"
+    "ts-jest": "29.0.3"
   },
   "jest": {
     "globals": {
-      "ts-jest": {
-        "tsconfig": "node_modules/@labkey/build/webpack/tsconfig.json",
-        "isolatedModules": true
-      },
       "LABKEY": {}
     },
     "moduleFileExtensions": [
@@ -45,24 +41,18 @@
     "setupFilesAfterEnv": [
       "<rootDir>/test/jest.setup.ts"
     ],
-    "moduleNameMapper": {
-      "\\.(scss)$": "<rootDir>/test/styleMock.ts"
-    },
     "testEnvironment": "jsdom",
     "testMatch": null,
     "testRegex": "(\\.(test|spec))\\.(ts|tsx)$",
     "testResultsProcessor": "jest-teamcity-reporter",
     "transform": {
-      "^.+\\.tsx?$": "ts-jest",
-      "\\.jsx?$": [
-        "babel-jest",
+      "^.+\\.tsx?$": [
+        "ts-jest",
         {
-          "configFile": "./node_modules/@labkey/build/webpack/babel.config.js"
+          "isolatedModules": true,
+          "tsconfig": "node_modules/@labkey/build/webpack/tsconfig.json"
         }
       ]
-    },
-    "transformIgnorePatterns": [
-      "node_modules/(?!(@labkey))"
-    ]
+    }
   }
 }

demo/package.json

@@ -1 +1 @@
-@import "~@labkey/components/dist/assets/scss/theme";
+@import "@labkey/components-scss";

demo/src/client/FileAttachmentPage/fileAttachment.scss

@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react';
-import './helloWorld.scss';
 
 export class App extends PureComponent {
     render() {

demo/src/client/HelloWorldPage/HelloWorld.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { App } from './HelloWorld';
+import './helloWorld.scss';
 
 // Need to wait for container element to be available in labkey wrapper before render
 window.addEventListener('DOMContentLoaded', (event) => {

demo/src/client/HelloWorldPage/app.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
 
 import { App } from './HelloWorld';
+import './helloWorld.scss';
 
 const render = () => {
     ReactDOM.render(

demo/src/client/HelloWorldPage/dev.tsx

@@ -1,24 +1,23 @@
-import React, { PureComponent } from 'react';
-import { Query } from '@labkey/api';
-import { SchemaQuery } from '@labkey/components';
+import React, { FC, PureComponent } from 'react';
+import { Query, getServerContext } from '@labkey/api';
+import { SchemaQuery, ServerContextProvider, withAppUser, AppContextProvider } from '@labkey/components';
 
 import { ExampleDetailPanel } from "./ExampleDetailPanel";
 import { ExampleGridPanel } from "./ExampleGridPanel";
 
-import './queryModelExample.scss';
+export const App: FC = (() => {
+    const serverContext = withAppUser(getServerContext());
+    const queryConfigs = {
+        containersModel: {
+            schemaQuery: SchemaQuery.create('core', 'Containers'),
+            containerFilter: Query.containerFilter.allFolders,
+            omittedColumns: ['SortOrder','Searchable','Type','Title','ContainerType','Workbook','IdPrefixedName']
+        }
+    };
 
-export class App extends PureComponent {
-    render() {
-        const queryConfigs = {
-            containersModel: {
-                schemaQuery: SchemaQuery.create('core', 'Containers'),
-                containerFilter: Query.containerFilter.allFolders,
-                omittedColumns: ['SortOrder','Searchable','Type','Title','ContainerType','Workbook','IdPrefixedName']
-            }
-        };
-
-        return (
-            <>
+    return (
+        <ServerContextProvider initialContext={serverContext}>
+            <AppContextProvider>
                 <p>
                     This page contains two example usages of the <b>QueryModel API</b>. The first panel uses
                     the <b>DetailPanelWithModel</b> to show a details view of some information about the current
@@ -41,7 +40,7 @@ export class App extends PureComponent {
                     asPanel={true}
                     autoLoad
                 />
-            </>
-        )
-    }
-}
+            </AppContextProvider>
+        </ServerContextProvider>
+    )
+});

demo/src/client/QueryModelPage/QueryModelExample.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { App } from './QueryModelExample';
+import './queryModelExample.scss';
 
 // Need to wait for container element to be available in labkey wrapper before render
 window.addEventListener('DOMContentLoaded', (event) => {

demo/src/client/QueryModelPage/app.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
 
 import { App } from './QueryModelExample';
+import './queryModelExample.scss';
 
 const render = () => {
     ReactDOM.render(

demo/src/client/QueryModelPage/dev.tsx

@@ -1 +1 @@
-@import "~@labkey/components/dist/assets/scss/theme";
+@import "@labkey/components-scss";