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

Co-authored-by: Dan Rukas <dan.rukas@gmail.com>

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,
+    },
+  },
+};