Styling approach #9

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuba-platform/react",
-  "version": "0.3.1-dev.7",
+  "version": "0.3.1-dev.8",
   "description": "CUBA Platform utilities and components for React",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -22,8 +22,10 @@
     "@types/moment-timezone": "^0.5.12",
     "@types/react": "^16.7.18",
     "antd": "^3.23.4",
+    "autoprefixer": "^9.7.2",
     "copyfiles": "^2.1.1",
     "jest": "^24.9.0",
+    "less": "^3.10.3",
     "mobx": "^4.13.0",
     "mobx-react": "^5.4.4",
     "moment-timezone": "^0.5.26",
@@ -41,8 +43,8 @@
     "typescript": "~3.5.3"
   },
   "scripts": {
-    "copycss": "copyfiles -u 1 './src/**/*.css' './dist-transpiled'",
-    "compile": "npm run clean && tsc && npm run copycss && rollup -c",
+    "copyless": "copyfiles -u 1 './src/**/*.less'",
+    "compile": "npm run clean && tsc && npm run copyless -- './dist-transpiled' && rollup -c && npm run copyless -- './dist'",
     "clean": "rm -rf dist && rm -rf dist-transpiled",
     "test": "jest"
   },

resolve-node-imports-in-less.js

@@ -0,0 +1,22 @@
+import path from 'path';
+
+/**
+ * A custom rollup-plugin-postcss loader that resolves node_modules imports in Less files
+ * and replaces them with relative path imports.
+ */
+export default {
+  name: 'resolveNodeImportsInLess',
+  test: /\.less$/,
+  async process({code}) {
+    const lessFilePath = this.id;
+    const from = path.dirname(lessFilePath);
+    const to = './node_modules/';
+    const relativePath = path.relative(from, to);
+
+    const modifiedInput = code.replace(/(@import ['"])(~)([a-zA-Z0-9\/]*['"];\n)/g, `$1${relativePath}/$3`);
+
+    return {
+      code: modifiedInput,
+    };
+  }
+}

rollup.config.js

@@ -1,7 +1,9 @@
 import resolve from 'rollup-plugin-node-resolve';
-import postcss from 'rollup-plugin-postcss';
 import commonjs from 'rollup-plugin-commonjs';
 import json from 'rollup-plugin-json';
+import postcss from 'rollup-plugin-postcss';
+import resolveNodeImportsInLess from './resolve-node-imports-in-less';
+import * as autoprefixer from "autoprefixer";
 
 export default {
   input: 'dist-transpiled/index.js',
@@ -29,15 +31,27 @@ export default {
     'react-testing-library',
   ],
   plugins: [
-    postcss({
-      extensions: ['.css']
-    }),
     resolve(),
     commonjs({
       namedExports: {
         'invariant': ['default'],
       }
     }),
     json(),
+    postcss({
+      extensions: ['.less'],
+      extract: 'dist/index.min.css',
+      minimize: true,
+      use: [
+        ['less', {javascriptEnabled: true}],
+        'resolveNodeImportsInLess',
+      ],
+      loaders: [
+        resolveNodeImportsInLess
+      ],
+      plugins: [
+        autoprefixer
+      ]
+    }),
   ]
 };

src/index.less

@@ -0,0 +1,7 @@
+@import "ui/FileUpload";
+@import "ui/table/DataTable";
+@import "ui/table/DataTableCustomFilter";
+@import "ui/table/DataTableFilterControlLayout";
+@import "ui/table/DataTableIntervalEditor";
+@import "ui/table/DataTableListEditor";
+@import "style/palette";

src/style/palette.less

@@ -0,0 +1,25 @@
+// NOTE: Use colors from antd/es/style/themes/default.less or antd/es/style/color/colors.less whenever possible
+
+@mono-tint-100: #ffffff; // same as antd @white;
+@mono-tint-90: #f2f2f2;
+@mono-tint-80: #e6e6e6;
+@mono-tint-70: #d9d9d9; // same as antd @normal-color
+@mono-tint-60: #cccccc;
+@mono-tint-50: #c0c0c0;
+@mono-tint-40: #b3b3b3;
+@mono-tint-30: #a6a6a6;
+@mono-tint-20: #999999;
+@mono-tint-10: #8d8d8d;
+@mono-primary: #808080;
+@mono-shade-10: #737373;
+@mono-shade-20: #666666;
+@mono-shade-30: #5a5a5a;
+@mono-shade-40: #4d4d4d;
+@mono-shade-50: #404040;
+@mono-shade-60: #333333;
+@mono-shade-70: #262626;
+@mono-shade-80: #1a1a1a;
+@mono-shade-90: #0d0d0d;
+@mono-shade-100: #000000; // same as antd @black
+
+@gray: @mono-primary;

src/ui/FileUpload.less

@@ -0,0 +1,40 @@
+@import '~antd/es/style/themes/default';
+@import '../style/palette';
+
+._cuba-file-upload-full-width-enabled span.ant-upload {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.cuba-file-drop-area {
+  background-color: @mono-tint-90;
+  border: dashed @border-width-base @mono-tint-30;
+  cursor: pointer;
+  display: table-cell;
+  padding: @padding-sm;
+  text-align: center;
+  transition: all @animation-duration-base;
+
+  &:hover {
+    border-color: @primary-color;
+  }
+
+  > .uploadicon {
+    font-size: 48px;
+    margin-bottom: 8px;
+  }
+
+  > .replaceicon {
+    margin-right: 8px;
+  }
+
+  > .uploadtext {
+    color: @mono-shade-70;
+  }
+
+  > .replacetext {
+    color: @mono-shade-30;
+    font-size: @font-size-sm;
+  }
+}

src/ui/FileUpload.tsx

@@ -6,7 +6,7 @@ import {IReactionDisposer, observable, reaction} from 'mobx';
 import {observer} from 'mobx-react';
 import {UploadProps} from 'antd/es/upload';
 import {UploadFile} from 'antd/es/upload/interface';
-import './FileUpload.css';
+import './FileUpload.less';
 import {FormattedMessage, injectIntl, WrappedComponentProps} from 'react-intl';
 
 export interface FileUploadProps {
@@ -120,7 +120,7 @@ class FileUploadComponent extends React.Component<FileUploadProps & WrappedCompo
         showPreviewIcon: true,
         showRemoveIcon: true,
       },
-      className: this.props.enableFullWidth ? 'file-upload-full-width-enabled' : '',
+      className: this.props.enableFullWidth ? '_cuba-file-upload-full-width-enabled' : '',
     };
 
     const uploadProps: UploadProps = { ...defaultUploadProps, ...this.props.uploadProps };
@@ -143,17 +143,17 @@ interface FileUploadDropAreaProps {
 function FileUploadDropArea(props: FileUploadDropAreaProps) {
   return props.fileInfo
     ? (
-      <div className='file-upload-drop-area'>
-        <Icon className='file-upload-drop-area__icon-replace' type='upload' />
-        <span className='file-upload-drop-area__text-replace'>
+      <div className='cuba-file-drop-area'>
+        <Icon className='replaceicon' type='upload' />
+        <span className='replacetext'>
           <FormattedMessage id='cubaReact.fileUpload.replace'/>
         </span>
       </div>
     )
     : (
-      <div className='file-upload-drop-area'>
-        <Icon className='file-upload-drop-area__icon-upload' type='upload' />
-        <div className='file-upload-drop-area__text-upload'>
+      <div className='cuba-file-drop-area'>
+        <Icon className='uploadicon' type='upload' />
+        <div className='uploadtext'>
           <FormattedMessage id='cubaReact.fileUpload.upload'/>
         </div>
       </div>

src/ui/table/DataTable.less

@@ -0,0 +1,36 @@
+@import "~antd/es/style/themes/default";
+
+.cuba-data-table {
+  > .buttons {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.cuba-data-table-clear-filters {
+  margin-left: auto;
+}
+
+.cuba-data-table-loader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.cuba-data-table-header-cell {
+  white-space: nowrap;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: clip;
+}
+
+._cuba-hide-selection-column .ant-table-selection-column {
+  display: none;
+}
+
+@media screen and (max-width: @screen-xs-max) {
+  .cuba-data-table-clear-filters {
+    margin-left: 0;
+  }
+}

src/ui/table/DataTable.tsx

@@ -9,7 +9,7 @@ import {
 import {action, computed, IReactionDisposer, observable, reaction, toJS} from 'mobx';
 import {observer} from 'mobx-react';
 import {ComparisonType, DataTableCustomFilterProps} from './DataTableCustomFilter';
-import './DataTable.css';
+import './DataTable.less';
 import {injectMainStore, MainStoreInjected, } from '../../app/MainStore';
 import {getPropertyInfoNN, WithId} from '../../util/metadata';
 import {DataCollectionStore} from '../../data/Collection';
@@ -266,9 +266,11 @@ export class DataTable<E> extends React.Component<DataTableProps<E>> {
       && !!this.props.mainStore.enums;
 
     if (!isMainStoreAvailable || (status === "LOADING" && this.firstLoad)) {
-      return (<div style={{position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)'}}>
-        <Spin size='large'/>
-      </div>);
+      return (
+        <div className='cuba-data-table-loader'>
+          <Spin size='large'/>
+        </div>
+      );
     }
 
     this.firstLoad = false;
@@ -304,13 +306,13 @@ export class DataTable<E> extends React.Component<DataTableProps<E>> {
     const tableProps = { ...defaultTableProps, ...this.props.tableProps };
 
     return (
-      <>
-        <div style={{display: 'flex', flexWrap: 'wrap'}}>
+      <div className='cuba-data-table'>
+        <div className='buttons'>
           {this.props.buttons}
           {this.props.hideClearFilters ? null : this.clearFiltersButton}
         </div>
-        <Table { ...tableProps } className={this.props.hideSelectionColumn ? 'data-table-hide-selection-column' : ''} />
-      </>
+        <Table { ...tableProps } className={this.props.hideSelectionColumn ? '_cuba-hide-selection-column' : ''} />
+      </div>
     );
   }
 
@@ -321,7 +323,7 @@ export class DataTable<E> extends React.Component<DataTableProps<E>> {
       && this.props.dataCollection.filter.conditions.length > 0) {
       return (
         <Button htmlType='button'
-                className={'data-table-clear-filters-btn'}
+                className='cuba-data-table-clear-filters'
                 onClick={this.clearFilters}
                 type='link'>
           <Icon type='filter' />