chore(build): try to build demo and docs (#3434)

platform/ui/.webpack/webpack.dev.js

@@ -2,7 +2,10 @@ const path = require('path');
 const webpackCommon = require('./../../../.webpack/webpack.base.js');
 const SRC_DIR = path.join(__dirname, '../src');
 const DIST_DIR = path.join(__dirname, '../dist');
+const ENTRY = {
+  app: `${SRC_DIR}/index.tsx`,
+};
 
 module.exports = (env, argv) => {
-  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
+  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
 };

platform/ui/.webpack/webpack.prod.js

@@ -1,6 +1,8 @@
 const { merge } = require('webpack-merge');
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
 
 const webpackCommon = require('./../../../.webpack/webpack.base.js');
 const pkg = require('./../package.json');
@@ -9,8 +11,14 @@ const ROOT_DIR = path.join(__dirname, './..');
 const SRC_DIR = path.join(__dirname, '../src');
 const DIST_DIR = path.join(__dirname, '../dist');
 
+const ENTRY = {
+  app: `${SRC_DIR}/index.js`,
+};
+
+const outputName = `ohif-${pkg.name.split('/').pop()}`;
+
 module.exports = (env, argv) => {
-  const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
+  const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
 
   return merge(commonConfig, {
     stats: {
@@ -26,23 +34,28 @@ module.exports = (env, argv) => {
     },
     optimization: {
       minimize: true,
-      sideEffects: true,
+      sideEffects: false,
     },
     output: {
       path: ROOT_DIR,
-      library: 'ohifUi',
+      library: 'ohif-ui',
       libraryTarget: 'umd',
       filename: pkg.main,
     },
-    externals: {
-      react: 'React',
-      'react-dom': 'ReactDOM',
-    },
+    externals: [
+      /\b(dcmjs)/,
+      /\b(gl-matrix)/,
+      {
+        react: 'React',
+        'react-dom': 'ReactDOM',
+      },
+    ],
     plugins: [
       new MiniCssExtractPlugin({
-        filename: `./dist/[name].css`,
-        chunkFilename: `./dist/[id].css`,
+        filename: `./dist/${outputName}.css`,
+        chunkFilename: `./dist/${outputName}.css`,
       }),
+      // new BundleAnalyzerPlugin({}),
     ],
   });
 };

platform/ui/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@ohif/ui",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",
-  "main": "dist/index.umd.js",
+  "main": "dist/ohif-ui.umd.js",
   "module": "src/index.js",
   "publishConfig": {
     "access": "public"

platform/ui/src/components/AboutModal/AboutModal.tsx

@@ -43,7 +43,7 @@ const Row = ({ title, value, link }) => {
   );
 };
 
-const AboutModal = ({ buildNumber, versionNumber }) => {
+const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
   const { os, version, name } = detect();
   const browser = `${name[0].toUpperCase()}${name.substr(1)} ${version}`;
 
@@ -80,16 +80,17 @@ const AboutModal = ({ buildNumber, versionNumber }) => {
       <div className="flex flex-col">
         <Row
           title="Repository URL"
-          value="https://github.com/OHIF/Viewers/tree/v3-stable"
-          link="https://github.com/OHIF/Viewers/tree/v3-stable"
+          value="https://github.com/OHIF/Viewers/"
+          link="https://github.com/OHIF/Viewers/"
         />
         {/* <Row
           title="Last Master Commits"
-          value="https://github.com/OHIF/Viewers/tree/v3-stable"
-          link="https://github.com/OHIF/Viewers/tree/v3-stable"
+          value="https://github.com/OHIF/Viewers/"
+          link="https://github.com/OHIF/Viewers/"
         /> */}
         <Row title="Version number" value={versionNumber} />
-        <Row title="Build number" value={buildNumber} />
+        {buildNumber && <Row title="Build number" value={buildNumber} />}
+        {commitHash && <Row title="Commit Hash" value={commitHash} />}
         <Row title="Browser" value={browser} />
         <Row title="OS" value={os} />
       </div>

platform/ui/src/storybook/components/footer/footer.tsx

@@ -8,7 +8,7 @@ export const Footer = ({ componentRelativePath }) => {
         additional usecases, please send us a pull request. Edit this page on{' '}
         <a
           className="text-blue-400"
-          href={`https://github.com/OHIF/Viewers/edit/v3-stable/platform/ui/src/components/${componentRelativePath}`}
+          href={`https://github.com/OHIF/Viewers/edit/master/platform/ui/src/components/${componentRelativePath}`}
         >
           Github
         </a>

platform/ui/src/storybook/components/heading/heading.tsx

@@ -32,7 +32,7 @@ export const Heading = ({ title, componentRelativePath }) => {
       {componentRelativePath && (
         <div>
           <a
-            href={`https://github.com/OHIF/Viewers/blob/v3-stable/platform/ui/src/components/${componentRelativePath}`}
+            href={`https://github.com/OHIF/Viewers/blob/master/platform/ui/src/components/${componentRelativePath}`}
             className="text-sm font-normal text-blue-600"
             target="_blank"
             rel="noopener noreferrer"