docs(ui): add base for ui component showcase in docs (#4414)

.webpack/webpack.base.js

@@ -22,7 +22,6 @@ const cssToJavaScript = require('./rules/cssToJavaScript.js');
 // const stylusToJavaScript = require('./rules/stylusToJavaScript.js');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
-
 // ~~ ENV VARS
 const NODE_ENV = process.env.NODE_ENV;
 const QUICK_BUILD = process.env.QUICK_BUILD;
@@ -101,14 +100,18 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
     module: {
       noParse: [/(codec)/, /(dicomicc)/],
       rules: [
-        ...(isProdBuild ? [] : [{
-          test: /\.[jt]sx?$/,
-          exclude: /node_modules/,
-          loader: 'babel-loader',
-          options: {
-            plugins: ['react-refresh/babel'],
-          },
-        }]),
+        ...(isProdBuild
+          ? []
+          : [
+              {
+                test: /\.[jt]sx?$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader',
+                options: {
+                  plugins: ['react-refresh/babel'],
+                },
+              },
+            ]),
         {
           test: /\.svg?$/,
           oneOf: [
@@ -123,11 +126,11 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
                           name: 'preset-default',
                           params: {
                             overrides: {
-                              removeViewBox: false
+                              removeViewBox: false,
                             },
                           },
                         },
-                      ]
+                      ],
                     },
                     prettier: false,
                     svgo: true,

package.json

@@ -68,7 +68,7 @@
   },
   "optionalDependencies": {
     "@percy/cypress": "^3.1.1",
-    "@playwright/test": "^1.44.0",
+    "@playwright/test": "^1.48.0",
     "cypress": "13.7.2",
     "cypress-file-upload": "^3.5.3"
   },

platform/docs/docs/configuration/dataSources/configuration-ui.md

@@ -69,21 +69,21 @@ API, this would be `['Project', 'Location', 'Data set', 'DICOM store']`.
 
 Besides the configurable item labels themselves, several other string look ups
 are used base on EACH of the labels returned by this method.
-For instance, for the label `{itemLabel}``, the following strings are fetched for
+For instance, for the label `{itemLabel}`, the following strings are fetched for
 translation...
-1. `No {itemLabel} available`
+1. No `{itemLabel}` available
    - used to indicate no such items are available
-   - for example, for Google, `No Project available` would be 'No projects available'
-2. `Select {itemLabel}`
+   - for example, for Google, No Project available would be 'No projects available'
+2. Select `{itemLabel}`
    - used to direct selection of the item
-   - for example, for Google, `Select Project` would be 'Select a project'
-3. `Error fetching {itemLabel} list`
+   - for example, for Google, Select Project would be 'Select a project'
+3. Error fetching `{itemLabel}` list
    - used to indicate an error occurred fetching the list of items
    - usually accompanied by the error itself
-   - for example, for Google, `Error fetching Project list` would be 'Error fetching projects'
-4. `Search {itemLabel} list`
+   - for example, for Google, Error fetching Project list would be 'Error fetching projects'
+4. Search `{itemLabel}` list
    - used as the placeholder text for filtering a list of items
-   - for example, for Google, `Search Project list` would be 'Search projects'
+   - for example, for Google, Search Project list would be 'Search projects'
 
 #### `initialize`
 

platform/docs/docs/deployment/docker.md

@@ -36,7 +36,7 @@ Once the Docker image has been built, it can be run as a container from the comm
 |Flag|Description|
 |----|-----------|
 |-d|Run the container in the background and print the container ID|
-|-p {host-port}:{nginx-port}/tcp|Publish the `nginx` listen port on the given host port|
+|-p `{host-port}:{nginx-port}/tcp`|Publish the `nginx` listen port on the given host port|
 |--name|An arbitrary name for the container.|
 
 
@@ -58,7 +58,7 @@ Simply replace `latest` at the end of the command with any of the tags for a spe
 
 ### Configuring the `nginx` Listen Port
 
-The Dockerfile and entry point use the `${PORT}` environment variable as the port that the `nginx` server uses to serve the web server. The default value for `${PORT}` is `80`. One way to set this environment variable is to use the `-e` switch when running the container with `docker run`. The block below gives an example where the listen port is set to `8080` and published on the host as `3000`.
+The Dockerfile and entry point use the `{PORT}` environment variable as the port that the `nginx` server uses to serve the web server. The default value for `{PORT}` is `80`. One way to set this environment variable is to use the `-e` switch when running the container with `docker run`. The block below gives an example where the listen port is set to `8080` and published on the host as `3000`.
 
 ```sh
 docker run -d -e PORT=8080 -p 3000:8080/tcp --name ohif-viewer-container ohif-viewer-image
@@ -83,13 +83,13 @@ docker run -d -p 3000:80/tcp -v /path/to/config/file.js:/usr/share/nginx/html/ap
 :::
 #### Environment Variable
 
-In certain scenarios, such as deploying the Docker container to Google Cloud, it might be convenient to specify the configuration file (contents) as an environment variable. That environment variable is `${APP_CONFIG}` and it can be set in the `docker run` command using the `-e` switch.
+In certain scenarios, such as deploying the Docker container to Google Cloud, it might be convenient to specify the configuration file (contents) as an environment variable. That environment variable is `{APP_CONFIG}` and it can be set in the `docker run` command using the `-e` switch.
 
 :::tip
 It is important to stress here that the environment variable is the contents of the configuration file and NOT the path to the config file as is [typically specified](https://docs.ohif.org/configuration/configurationFiles#configuration-files) for development and build environments or for the [volume mounting method](#volume-mounting).
 :::
 
-Below the `cat` command is used to convert the configuration file to a string and its result set as the `${APP_CONFIG}` environment variable.
+Below the `cat` command is used to convert the configuration file to a string and its result set as the `{APP_CONFIG}` environment variable.
 
 ```sh
 docker run -d -p 3000:80/tcp -e APP_CONFIG="$(cat /path/to/the/config/file)" --name ohif-viewer-container ohif-viewer-image
@@ -100,7 +100,7 @@ To be safe, remove single line comments (i.e. `//`) from the configuration file
 :::
 
 :::tip
-As an alternative to the `cat` command, convert the configuration file to a single line and copy and paste it as the value to the `${APP_CONFIG}` environment variable on the `docker run` line. Editors such as [Visual Studio Code](https://stackoverflow.com/questions/46491061/shortcut-for-joining-two-lines) and [Notepad++](https://superuser.com/questions/518229/how-do-i-remove-linebreaks-in-notepad) have 'Join Lines' commands to facilitate this.
+As an alternative to the `cat` command, convert the configuration file to a single line and copy and paste it as the value to the `{APP_CONFIG}` environment variable on the `docker run` line. Editors such as [Visual Studio Code](https://stackoverflow.com/questions/46491061/shortcut-for-joining-two-lines) and [Notepad++](https://superuser.com/questions/518229/how-do-i-remove-linebreaks-in-notepad) have 'Join Lines' commands to facilitate this.
 :::
 
 :::tip
@@ -139,15 +139,15 @@ Consideration must be given as to whether OHIF should be deployed in a secure co
 ### Specifying the SSL Port, Certificate and Private Key
 
 For convenience, the [built Docker image](#building-the-docker-image) can be run over SSL by
-- setting the `${SSL_PORT}` environment variable
+- setting the `{SSL_PORT}` environment variable
 - volume mounting the SSL certificate
 - volume mounting the SSL private key
 
 :::info
 The volume mounted SSL certificate and private key are mapped to the [`ssl_certificate`](http://nginx.org/en/docs/http/ngx_http_ssl_module.html#ssl_certificate) and [`ssl_certificate_key`](http://nginx.org/en/docs/http/ngx_http_ssl_module.html#ssl_certificate_key) `nginx` directives respectively.
 :::
 
-Similar to the [`nginx` listen port](#configuring-the-nginx-listen-port), the `${SSL_PORT}` environment variable is the internal port that `nginx` listens on to serve the OHIF web server over SSL and has to be likewise published via the `-p` switch.
+Similar to the [`nginx` listen port](#configuring-the-nginx-listen-port), the `{SSL_PORT}` environment variable is the internal port that `nginx` listens on to serve the OHIF web server over SSL and has to be likewise published via the `-p` switch.
 
 The following is an example command running the Docker container over SSL. Note that depending on the version of Docker, an absolute path to the certificate and private key files might be required.
 
@@ -164,7 +164,7 @@ The private key is a secure entity and should have restricted access. Keep it sa
 :::
 
 :::caution
-The presence of the `${SSL_PORT}` environment variable is used to trigger to deploy over SSL as opposed to HTTP. If `${SSL_PORT}` is NOT defined, then HTTP is used even if the certificate and private key volumes are mounted.
+The presence of the `{SSL_PORT}` environment variable is used to trigger to deploy over SSL as opposed to HTTP. If `{SSL_PORT}` is NOT defined, then HTTP is used even if the certificate and private key volumes are mounted.
 :::
 
 :::tip

platform/docs/docs/faq/general.md

@@ -67,14 +67,14 @@ You can check out the studies that we have put in this [Dropbox link](https://ww
 <!--
   Links
   -->
-[general]: ../faq.md#general
-[technical]: ../faq.md#technical
-[report-bug]: ../faq.md#how-do-i-report-a-bug
-[new-feature]: ../faq.md#how-can-i-request-a-new-feature
-[commercial-support]: ../faq.md#does-ohif-offer-commercial-support
-[academic]: ../faq.md#who-should-i-contact-about-academic-collaborations
-[fda-clearance]: ../faq.md#does-the-ohif-viewer-have-510k-clearance-from-the-us-fda-or-ce-marking-from-the-european-commission
-[hipaa]: ../faq.md#is-the-ohif-viewer-hipaa-compliant
+[general]: general
+[technical]: technical
+[report-bug]: how-do-i-report-a-bug
+[new-feature]: how-can-i-request-a-new-feature
+[commercial-support]: does-ohif-offer-commercial-support
+[academic]: who-should-i-contact-about-academic-collaborations
+[fda-clearance]: does-the-ohif-viewer-have-510k-clearance-from-the-us-fda-or-ce-marking-from-the-european-commission
+[hipaa]: is-the-ohif-viewer-hipaa-compliant
 [501k-clearance]: https://www.fda.gov/MedicalDevices/DeviceRegulationandGuidance/HowtoMarketYourDevice/PremarketSubmissions/PremarketNotification510k/
 [ce-marking]: https://ec.europa.eu/growth/single-market/ce-marking_en
 [hipaa-def]: https://en.wikipedia.org/wiki/Health_Insurance_Portability_and_Accountability_Act

platform/docs/docs/faq/index.md

@@ -3,17 +3,6 @@ id: index
 ---
 
 
-- [General FAQ](../faq.md#general-faq)
-  - [How do I report a bug?](../faq.md#how-do-i-report-a-bug)
-  - [How can I request a new feature?](../faq.md#how-can-i-request-a-new-feature)
-  - [Who should I contact about Academic Collaborations?](../faq.md#who-should-i-contact-about-academic-collaborations)
-  - [Does OHIF offer support?](../faq.md#does-ohif-offer-support)
-  - [Does The OHIF Viewer have 510(k) Clearance from the U.S. F.D.A or CE Marking from the European Commission?](../faq.md#does-the-ohif-viewer-have-510k-clearance-from-the-us-fda-or-ce-marking-from-the-european-commission)
-  - [Is there a DICOM Conformance Statement for the OHIF Viewer?](../faq.md#is-there-a-dicom-conformance-statement-for-the-ohif-viewer)
-  - [Is The OHIF Viewer HIPAA Compliant?](../faq.md#is-the-ohif-viewer-hipaa-compliant)
-  - [Could you provide me with a particular study from the OHIF Viewer Demo?](../faq.md#could-you-provide-me-with-a-particular-study-from-the-ohif-viewer-demo)
-
-
 # General FAQ
 
 
@@ -77,14 +66,14 @@ You can check out the studies that we have put in this [Dropbox link](https://ww
 <!--
   Links
   -->
-[general]: ../faq.md#general
-[technical]: ../faq.md#technical
-[report-bug]: ../faq.md#how-do-i-report-a-bug
-[new-feature]: ../faq.md#how-can-i-request-a-new-feature
-[commercial-support]: ../faq.md#does-ohif-offer-commercial-support
-[academic]: ../faq.md#who-should-i-contact-about-academic-collaborations
-[fda-clearance]: ../faq.md#does-the-ohif-viewer-have-510k-clearance-from-the-us-fda-or-ce-marking-from-the-european-commission
-[hipaa]: ../faq.md#is-the-ohif-viewer-hipaa-compliant
+[general]: #general
+[technical]: #technicalß˚
+[report-bug]: #how-do-i-report-a-bug
+[new-feature]: #how-can-i-request-a-new-feature
+[commercial-support]: #does-ohif-offer-commercial-support
+[academic]: #who-should-i-contact-about-academic-collaborations
+[fda-clearance]: #does-the-ohif-viewer-have-510k-clearance-from-the-us-fda-or-ce-marking-from-the-european-commission
+[hipaa]: #is-the-ohif-viewer-hipaa-compliant
 [501k-clearance]: https://www.fda.gov/MedicalDevices/DeviceRegulationandGuidance/HowtoMarketYourDevice/PremarketSubmissions/PremarketNotification510k/
 [ce-marking]: https://ec.europa.eu/growth/single-market/ce-marking_en
 [hipaa-def]: https://en.wikipedia.org/wiki/Health_Insurance_Portability_and_Accountability_Act

platform/docs/docs/migration-guide/from-v2.md

@@ -209,8 +209,8 @@ Remember that there is no strict rule for deciding between modes and extensions.
 In OHIF v2 a study was loaded and mounted on `/viewer/:studyInstanceUID` route. In OHIF v3
 we have reworked the route registration to enable more sophisticated routing. Now, Modes are tied to specific routes in the viewer, and multiple modes/routes can be present within a single application, making "routes" configuration the most important part of mode configuration.
 
-- Routes with a dataSourceName: ${mode.id}/${dataSourceName}
-- Routes without a dataSourceName: ${mode.id} which uses the default dataSourceName
+- Routes with a dataSourceName: `{mode.id}/{dataSourceName}`
+- Routes without a dataSourceName: `{mode.id}` which uses the default dataSourceName
 
 This makes a mode flexible enough to be able to connect to multiple datasources
 without rebuild of the app for use cases such as reading from one PACS and