chore(ui): creating a playground for the new components (#4301)

Co-authored-by: Dan Rukas <dan.rukas@gmail.com>
OHIF · Jul 26, 2024 · 6231629 · 6231629
1 parent b9eb54c
commit 6231629
Show file tree

Hide file tree

Showing 20 changed files with 1,202 additions and 321 deletions.
diff --git a/platform/app/src/index.js b/platform/app/src/index.js
@@ -5,7 +5,6 @@ import 'regenerator-runtime/runtime';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { history } from './utils/history';
 
 /**

diff --git a/platform/ui-next/.webpack/template.html b/platform/ui-next/.webpack/template.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body class="bg-gray-100">
+    <div
+      id="root"
+      class="min-h-screen"
+    ></div>
+  </body>
+</html>
diff --git a/platform/ui-next/.webpack/webpack.playground.js b/platform/ui-next/.webpack/webpack.playground.js
@@ -0,0 +1,116 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+// const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+const isProdBuild = process.env.NODE_ENV === 'production';
+
+const autoprefixer = require('autoprefixer');
+const tailwindcss = require('tailwindcss');
+const tailwindConfigPath = path.resolve('./tailwind.config.js');
+
+const cssToJavaScript = {
+  test: /\.css$/,
+  use: [
+    //'style-loader',
+    isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
+    { loader: 'css-loader', options: { importLoaders: 1 } },
+    {
+      loader: 'postcss-loader',
+      options: {
+        postcssOptions: {
+          verbose: true,
+          plugins: [
+            [tailwindcss(tailwindConfigPath)],
+            [autoprefixer('last 2 version', 'ie >= 11')],
+          ],
+        },
+      },
+    },
+  ],
+};
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    home: './src/_pages/index.tsx',
+    playground: './src/_pages/playground.tsx',
+    viewer: './src/_pages/viewer.tsx',
+    colors: './src/_pages/colors.tsx',
+    // add other pages here
+  },
+  output: {
+    filename: '[name].bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    // plugins: [new TsconfigPathsPlugin()],
+  },
+
+  module: {
+    rules: [
+      ...(isProdBuild
+        ? []
+        : [
+            {
+              test: /\.[jt]sx?$/,
+              exclude: /node_modules/,
+              loader: 'babel-loader',
+              options: {
+                plugins: ['react-refresh/babel'],
+              },
+            },
+          ]),
+      cssToJavaScript,
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+
+    new HtmlWebpackPlugin({
+      template: './.webpack/template.html',
+      chunks: ['home'],
+      filename: 'index.html',
+    }),
+    new HtmlWebpackPlugin({
+      template: './.webpack/template.html',
+      chunks: ['playground'],
+      filename: 'playground.html',
+    }),
+    new HtmlWebpackPlugin({
+      template: './.webpack/template.html',
+      chunks: ['viewer'],
+      filename: 'viewer.html',
+    }),
+    new HtmlWebpackPlugin({
+      template: './.webpack/template.html',
+      chunks: ['colors'],
+      filename: 'colors.html',
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+    isDevelopment && new ReactRefreshWebpackPlugin(),
+    !isDevelopment &&
+      new MiniCssExtractPlugin({
+        filename: '[name].css',
+      }),
+  ],
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'dist'),
+    },
+    hot: true,
+    open: true,
+    port: 8000,
+    historyApiFallback: true,
+    devMiddleware: {
+      writeToDisk: true,
+    },
+  },
+};
diff --git a/platform/ui-next/babel.config.js b/platform/ui-next/babel.config.js
@@ -0,0 +1,57 @@
+// https://babeljs.io/docs/en/options#babelrcroots
+const { extendDefaultPlugins } = require('svgo');
+
+module.exports = {
+  babelrcRoots: ['./platform/*', './extensions/*', './modes/*'],
+  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
+  plugins: [
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    '@babel/plugin-transform-typescript',
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    '@babel/plugin-transform-class-static-block',
+  ],
+  env: {
+    test: {
+      presets: [
+        [
+          // TODO: https://babeljs.io/blog/2019/03/19/7.4.0#migration-from-core-js-2
+          '@babel/preset-env',
+          {
+            modules: 'commonjs',
+            debug: false,
+          },
+        ],
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+      ],
+      plugins: [
+        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-syntax-dynamic-import',
+        '@babel/plugin-transform-regenerator',
+        '@babel/transform-destructuring',
+        '@babel/plugin-transform-runtime',
+        '@babel/plugin-transform-typescript',
+        '@babel/plugin-transform-class-static-block',
+      ],
+    },
+    production: {
+      presets: [
+        // WebPack handles ES6 --> Target Syntax
+        ['@babel/preset-env', { modules: false }],
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+      ],
+      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
+    },
+    development: {
+      presets: [
+        // WebPack handles ES6 --> Target Syntax
+        ['@babel/preset-env', { modules: false }],
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+      ],
+      plugins: ['react-refresh/babel'],
+      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
+    },
+  },
+};
diff --git a/platform/ui-next/components.json b/platform/ui-next/components.json
@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "src/tailwind.css",
-    "baseColor": "slate",
+    "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
   },

diff --git a/platform/ui-next/package.json b/platform/ui-next/package.json
@@ -15,6 +15,7 @@
     "clean": "rm -rf node_modules/.cache/storybook && shx rm -rf dist",
     "clean:deep": "yarn run clean && shx rm -rf node_modules",
     "start": "yarn run build --watch",
+    "dev": "cross-env NODE_ENV=development webpack serve --config .webpack/webpack.playground.js",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
     "build:package": "yarn run build"
@@ -30,6 +31,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "*",
     "cmdk": "^1.0.0",

diff --git a/platform/ui-next/src/_pages/README.md b/platform/ui-next/src/_pages/README.md
@@ -0,0 +1 @@
+This is our playground for designing and developing the next generation of the platform's UI. You probably don't need to be here.
diff --git a/platform/ui-next/src/_pages/colors.tsx b/platform/ui-next/src/_pages/colors.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import '../tailwind.css';
+
+function Colors() {
+  return (
+    <main>
+      <h2>Primary color</h2>
+      <div className="row">
+        <div className="example2">
+          <div className="bg-primary h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-primary/80 h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-primary/60 h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-primary/40 h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-primary/20 h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-infosecondary h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-highlight h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-highlight h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="h-16 w-16 rounded bg-white"></div>
+        </div>
+        <div className="example2">
+          <div className="h-16 w-16 rounded bg-white"></div>
+        </div>
+        <div className="example2">
+          <div className="h-16 w-16 rounded bg-white"></div>
+        </div>
+      </div>
+
+      <h2>New colors</h2>
+      <div className="row">
+        <div className="example2">
+          <div className="bg-highlight h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-bkg-low h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-bkg-med h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-bkg-full h-16 w-16 rounded"></div>
+        </div>
+      </div>
+
+      <h2>Core colors</h2>
+      <div className="row">
+        <div className="example2">
+          <div className="bg-background h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-foreground h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-card h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-card-foreground h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-popover h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-popover-foreground h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-primary h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-primary-foreground h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-secondary h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-secondary-foreground h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-muted h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-muted-foreground h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-accent h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-accent-foreground h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="destructive h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="destructive-foreground h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-border h-16 w-16 rounded"></div>
+        </div>
+      </div>
+
+      <h2>Borders</h2>
+      <div className="row">
+        <div className="example2">
+          <div className="bg-border h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-input h-16 w-16 rounded"></div>
+        </div>
+        <div className="example2">
+          <div className="bg-ring h-16 w-16 rounded"></div>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(React.createElement(Colors));
diff --git a/platform/ui-next/src/_pages/index.tsx b/platform/ui-next/src/_pages/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import '../tailwind.css';
+
+const App: React.FC = () => (
+  <div className="container mx-auto p-4">
+    <h1 className="mb-4 text-2xl font-bold">Home Page</h1>
+    <nav className="space-x-4">
+      <a
+        href="playground.html"
+        className="text-blue-500 hover:text-blue-700"
+      >
+        Playground
+      </a>
+      <a
+        href="viewer.html"
+        className="text-blue-500 hover:text-blue-700"
+      >
+        Viewer
+      </a>
+      <a
+        href="colors.html"
+        className="text-blue-500 hover:text-blue-700"
+      >
+        Colors
+      </a>
+    </nav>
+  </div>
+);
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(React.createElement(App));
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This is our playground for designing and developing the next generation of the platform's UI. You probably don't need to be here.