Quellcode durchsuchen

[frontend] add ant design library (#2996)

[frontend] add bootstrap reset/revert styles
Bjorn Alm vor 3 Jahren
Ursprung
Commit
00aae19e84

+ 13 - 4
desktop/core/src/desktop/js/apps/editor/components/result/reactExample/ReactExample.tsx

@@ -1,11 +1,13 @@
 'use strict';
 
 import React, { FunctionComponent } from 'react';
+import { Button } from 'antd';
 
-// If importing using "import { Ace } from 'ext/ace'" VSCode typescript will complain
+// tsx-files don't have the same baseUrl as other js files so
+// we are using a relative path when importing
 import { Ace } from '../../../../../ext/ace';
 
-import {CURSOR_POSITION_CHANGED_EVENT} from '../../../components/aceEditor/AceLocationHandler';
+import { CURSOR_POSITION_CHANGED_EVENT } from '../../aceEditor/AceLocationHandler';
 import ReactExampleGlobal from '../../../../../reactComponents/ReactExampleGlobal/ReactExampleGlobal';
 import { useHuePubSub } from '../../../../../reactComponents/useHuePubSub';
 import SqlExecutable from '../../../execution/sqlExecutable';
@@ -22,7 +24,7 @@ export interface ReactExampleProps {
 // When we have type definitions and Ace imported using webackpack we should
 // use those types instead of creating our own, e.g. Ace.Position
 interface EditorCursor {
-  position: Ace.Position
+  position: Ace.Position;
 }
 
 const defaultProps = { title: 'Default result title' };
@@ -39,7 +41,11 @@ const ReactExample: FunctionComponent<ReactExampleProps> = ({ title, activeExecu
     editorCursor?.position !== undefined ? JSON.stringify(editorCursor.position) : 'not available';
 
   return (
-    <div className="react-example">
+    // The 'antd' class is added to the root element since we want it to apply the correct
+    // "global" styling to its antd sub components, e.g. the antd Button.
+    // Also make sure that the component specific Antd style is imported in the file
+    // 'root-wrapped-antd.less'.
+    <div className="react-example antd">
       <h1 className="react-example__title">{title}</h1>
       <p className="react-example__description">
         I'm an Editor specific react component containing subcomponents. The dynamic id that I'm
@@ -53,6 +59,9 @@ const ReactExample: FunctionComponent<ReactExampleProps> = ({ title, activeExecu
       <ReactExampleGlobal className="react-example__react-example-global-component">
         I'm a button from the application global component set
       </ReactExampleGlobal>
+      <Button type="primary" onClick={() => console.info('clicked')}>
+        I'm an Antd button
+      </Button>
     </div>
   );
 };

Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 1 - 0
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -24,6 +24,7 @@
 @import "hue-multi-cluster-icons.less";
 @import "components/hue-clearable.less";
 @import "hue4.less";
+@import "root-wrapped-antd.less";
 
 html {
   height: 100%;

+ 88 - 0
desktop/core/src/desktop/static/desktop/less/reset-globals.less

@@ -0,0 +1,88 @@
+// Reset global styles from Bootstrap to prevent them from
+// interfering with the Antd styles.
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+menu,
+nav,
+output,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font-style: inherit;
+  font-variant: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  font-family: inherit;
+}

+ 19 - 0
desktop/core/src/desktop/static/desktop/less/root-wrapped-antd.less

@@ -0,0 +1,19 @@
+// The Ant Design library modifies the global styles which will affect the UI in Hue
+// in multiple places where not intended. So in order to utilize the components locally
+// without leaking styles we wrap it all in an antd class.
+.antd {
+  /* stylelint-disable no-invalid-position-at-import-rule */
+
+  // We need to reset some global styles from Bootstrap to prevent them from
+  // interfering with the Antd styles
+  @import './reset-globals.less';
+
+  // Import global antd styles
+  @root-entry-name: variable;
+  @import 'node_modules/antd/es/style/core/index.less';
+  @import 'node_modules/antd/es/style/themes/default.less';
+
+  // Import the styles for the actual components used
+  @import 'node_modules/antd/es/button/style/index.less';
+  /* stylelint-enable no-invalid-position-at-import-rule */
+}

Datei-Diff unterdrückt, da er zu groß ist
+ 843 - 15
package-lock.json


+ 1 - 0
package.json

@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@gethue/sql-formatter": "4.0.3",
+    "antd": "^4.23.1",
     "axios": "0.24.0",
     "babel-cli": "^6.26.0",
     "babel-preset-react-app": "^3.1.2",

+ 4 - 2
tsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "jsx": "react",
     "declaration": true,
-    "emitDeclarationOnly": true,
     "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
@@ -38,6 +37,9 @@
     "node_modules",
     ".github",
     ".git",
-    ".circleci"
+    ".circleci",
+    // Temporary fix to prevent typescript generated JSX errors in the IDE 
+    // triggered by using baseUrl": "desktop/core/src/desktop/js".
+    "**/*.tsx"
   ]
 }

+ 20 - 1
webpack.config.js

@@ -15,6 +15,7 @@
 // limitations under the License.
 
 const fs = require('fs');
+const webpack = require('webpack');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const {
   BUNDLES,
@@ -62,6 +63,22 @@ const config = {
         exclude: /node_modules/,
         use: ['style-loader', 'css-loader', 'sass-loader']
       },
+      {
+        test: /\.less$/i,
+        use: [
+          { loader: "style-loader" },
+          { loader: "css-loader" },
+          {
+              loader: "less-loader",
+              options: {
+                  lessOptions: {
+                      // This is not ideal but required by antd library
+                      javascriptEnabled: true,
+                  }
+              }
+          }          
+        ],
+      },      
       {
         test: /\.html$/,
         exclude: /node_modules/,
@@ -93,7 +110,9 @@ const config = {
     maxAssetSize: 400 * 1024 // 400kb
   },
   plugins: getPluginConfig(BUNDLES.HUE).concat([
-    new CleanWebpackPlugin([`${__dirname}/desktop/core/src/desktop/static/desktop/js/bundles/hue`])
+    // Needed to wrap antd and prevent it from affecting global styles
+    new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, `${__dirname}/desktop/core/static/desktop/less/root-wrapped-antd.less`),
+    new CleanWebpackPlugin([`${__dirname}/desktop/core/src/desktop/static/desktop/js/bundles/hue`]),    
   ]),
   resolve: {
     extensions: ['.json', '.jsx', '.js', '.tsx', '.ts', '.vue'],

Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.