feat: ui overhaul (#676)

packages/app/.eslintrc.js

@@ -55,23 +55,6 @@ module.exports = {
         caughtErrorsIgnorePattern: '^_',
       },
     ],
-    '@typescript-eslint/no-restricted-imports': [
-      'error',
-      {
-        patterns: [
-          {
-            group: ['@mui/*/*/*', '!@mui/material/test-utils/*'],
-            message: 'Do not import material imports as 3rd level imports',
-            allowTypeImports: true,
-          },
-          {
-            group: ['@mui/material', '!@mui/material/'],
-            message: 'Please import material imports as defaults or 2nd level imports',
-            allowTypeImports: true,
-          },
-        ],
-      },
-    ],
     'import/prefer-default-export': 'error',
   },
   plugins: ['babel', '@emotion', 'cypress', 'unicorn', 'react-hooks'],

packages/app/package.json

@@ -57,11 +57,12 @@
     "@babel/preset-typescript": "7.21.0",
     "@emotion/eslint-plugin": "11.10.0",
     "@emotion/jest": "11.10.5",
-    "@types/node": "16.18.16",
+    "@types/node": "18.11.18",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@typescript-eslint/eslint-plugin": "5.55.0",
     "@typescript-eslint/parser": "5.55.0",
+    "autoprefixer": "10.4.13",
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "9.1.2",
     "babel-plugin-emotion": "11.0.0",
@@ -73,6 +74,7 @@
     "babel-plugin-transform-export-extensions": "6.22.0",
     "babel-plugin-transform-inline-environment-variables": "0.4.4",
     "cross-env": "7.0.3",
+    "css-loader": "6.7.3",
     "dotenv": "16.0.3",
     "eslint": "8.36.0",
     "eslint-import-resolver-typescript": "3.5.3",
@@ -82,6 +84,7 @@
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-unicorn": "46.0.0",
+    "mini-css-extract-plugin": "2.7.2",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.21",
     "postcss-scss": "4.0.6",

packages/app/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/app/tailwind.config.js

@@ -0,0 +1,7 @@
+const baseConfig = require('../../tailwind.base.config');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['../core/src/**/*.tsx'],
+  ...baseConfig,
+};

packages/app/tsconfig.json

@@ -49,7 +49,7 @@
       "@staticcms/string/*": ["../core/src/widgets/string/*"],
       "@staticcms/text": ["../core/src/widgets/text"],
       "@staticcms/text/*": ["../core/src/widgets/text/*"],
-      "@staticcms/core": ["../core/core/src/*"],
+      "@staticcms/core": ["../core/src"],
       "@staticcms/core/*": ["../core/src/*"]
     },
     "types": ["@emotion/react/types/css-prop", "@types/jest", "@testing-library/jest-dom"]

packages/app/webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const webpack = require('webpack');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const isProduction = process.env.NODE_ENV === 'production';
 const devServerPort = parseInt(process.env.STATIC_CMS_DEV_SERVER_PORT || `${8080}`);
@@ -44,14 +45,11 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        include: ['ol', 'codemirror', '@toast-ui'].map(moduleNameToPath),
+        include: [...['ol', 'codemirror', '@toast-ui'].map(moduleNameToPath), path.resolve(__dirname, '..', 'core', 'src')],
         use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
+          !isProduction ? 'style-loader' : MiniCssExtractPlugin.loader,
+          'css-loader',
+          'postcss-loader',
         ],
       },
       {
@@ -85,6 +83,7 @@ module.exports = {
   },
   plugins: [
     !isProduction && new ReactRefreshWebpackPlugin(),
+    isProduction && new MiniCssExtractPlugin(),
     new webpack.IgnorePlugin({ resourceRegExp: /^esprima$/ }),
     new webpack.IgnorePlugin({ resourceRegExp: /moment\/locale\// }),
     new webpack.ProvidePlugin({