chore: use colors from @dhis2/ui-core (#306)

* chore: let webpack compile @dhis2 scoped packages to es5 to satisfy uglifyjs (#308) To allow DV to use the ui-core components (which are shipped as ES6 code), the App is responsible to compile the ui-core components into the target of the App. The problem is that UglifyJS does not support ES6, so we need to compile the ES6 code to ES5 code before shipping it to the html-webpack-plugin[1] minifier, which uses html-minifier[2] which finally runs the uglifyjs library[3] which crashes. > uglify-js only supports JavaScript (ECMAScript 5). To solve this we need to allow webpack to run babel on @dhis2-scope packages in node_modules. [1] https://github.com/jantimon/html-webpack-plugin#minification [2] https://github.com/kangax/html-minifier [3] https://github.com/mishoo/UglifyJS2 * fix: temporary fix for i18next namespace separator issue The : character is the default namespace separator and causes i18next to choke if present in a string. Nothing we can do in the app as the i18next init is defined in d2-i18n and not accessible from the app.
dhis2 · Jul 29, 2019 · c20913d · c20913d
1 parent c9f5c93
commit c20913d
Show file tree

Hide file tree

Showing 23 changed files with 78 additions and 107 deletions.
diff --git a/packages/app/config/webpack.config.dev.js b/packages/app/config/webpack.config.dev.js
@@ -167,6 +167,13 @@ module.exports = {
                         },
                     },
                     // Process JS with Babel.
+                    {
+                        test: /@dhis2\/.*\.(js|jsx|mjs)$/,
+                        loader: require.resolve('babel-loader'),
+                        options: {
+                            cacheDirectory: true,
+                        },
+                    },
                     {
                         test: /\.(js|jsx|mjs)$/,
                         include: paths.appSrc,

diff --git a/packages/app/config/webpack.config.prod.js b/packages/app/config/webpack.config.prod.js
@@ -157,6 +157,13 @@ module.exports = {
                         },
                     },
                     // Process JS with Babel.
+                    {
+                        test: /@dhis2\/.*\.(js|jsx|mjs)$/,
+                        loader: require.resolve('babel-loader'),
+                        options: {
+                            cacheDirectory: true,
+                        },
+                    },
                     {
                         test: /\.(js|jsx|mjs)$/,
                         include: paths.appSrc,

diff --git a/packages/app/i18n/en.pot b/packages/app/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2019-06-11T12:01:09.869Z\n"
-"PO-Revision-Date: 2019-06-11T12:01:09.869Z\n"
+"POT-Creation-Date: 2019-07-02T11:48:24.367Z\n"
+"PO-Revision-Date: 2019-07-02T11:48:24.367Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -316,6 +316,9 @@ msgstr ""
 msgid "Year over year (column)"
 msgstr ""
 
+msgid "Open as Map"
+msgstr ""
+
 msgid "Reporting rate"
 msgstr ""
 

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -32,6 +32,7 @@
         "@dhis2/d2-ui-interpretations": "6.1.0",
         "@dhis2/data-visualizer-plugin": "33.0.3",
         "@dhis2/ui": "^1.0.0-beta.11",
+        "@dhis2/ui-core": "^3.4.0",
         "@material-ui/core": "^3.1.2",
         "@material-ui/icons": "^3.0.1",
         "autoprefixer": "9.1.3",

diff --git a/packages/app/src/components/AxisSetup/styles/AxisSetup.style.js b/packages/app/src/components/AxisSetup/styles/AxisSetup.style.js
@@ -1,4 +1,4 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export default {
     tableContainer: {
@@ -11,11 +11,11 @@ export default {
         width: '10%',
     },
     coloredColumn: {
-        backgroundColor: colors.lightGrey,
+        backgroundColor: colors.grey100,
     },
     tableCell: {
         padding: '4px 24px',
-        borderBottom: `1px solid ${colors.greyLight}`,
+        borderBottom: `1px solid ${colors.grey300}`,
     },
     head: {
         borderBottom: 'none',

diff --git a/...p/src/components/DimensionsPanel/Dialogs/AddToLayoutButton/styles/DropDownButton.style.js b/...p/src/components/DimensionsPanel/Dialogs/AddToLayoutButton/styles/DropDownButton.style.js
@@ -1,4 +1,4 @@
-import { colors } from '../../../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export default {
     arrowDown: {

diff --git a/packages/app/src/components/DimensionsPanel/styles/DimensionsPanel.style.js b/packages/app/src/components/DimensionsPanel/styles/DimensionsPanel.style.js
@@ -1,11 +1,11 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export const styles = {
     divContainer: {
         height: '100%',
         display: 'flex',
         flexDirection: 'column',
-        backgroundColor: colors.snow,
+        backgroundColor: colors.grey050,
         padding: '8px 0 2px 8px',
     },
     textField: {

diff --git a/packages/app/src/components/ErrorBoundaries/styles/FatalErrorBoundary.style.js b/packages/app/src/components/ErrorBoundaries/styles/FatalErrorBoundary.style.js
@@ -1,7 +1,9 @@
-const bgColor = '#F4F6F8',
-    iconColor = '#B0BEC5',
-    primaryTextColor = '#000000',
-    secondaryTextColor = '#494949';
+import { colors } from '@dhis2/ui-core';
+
+const bgColor = colors.grey050,
+    iconColor = colors.grey500,
+    primaryTextColor = colors.black,
+    secondaryTextColor = colors.grey700;
 
 export default {
     mask: {

diff --git a/packages/app/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js b/packages/app/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js
@@ -1,4 +1,5 @@
-import { colors } from '../../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
+
 import defaultLayoutStyle from './DefaultLayout.style';
 import * as layoutStyle from '../../styles/style';
 
@@ -19,7 +20,7 @@ export default {
         maxWidth: 55,
         padding: '2px 0px 0px 0px',
         fontSize: 11,
-        color: colors.greyDark,
+        color: colors.grey700,
         userSelect: 'none',
         letterSpacing: '0.2px',
     },

diff --git a/packages/app/src/components/Layout/styles/Chip.style.js b/packages/app/src/components/Layout/styles/Chip.style.js
@@ -1,4 +1,5 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
+
 import * as layoutStyle from './style';
 
 export const styles = {
@@ -20,7 +21,7 @@ export const styles = {
         textOverflow: 'ellipsis',
     },
     chipEmpty: {
-        backgroundColor: colors.greyLight,
+        backgroundColor: colors.grey300,
     },
     fixedDimensionIcon: {
         paddingRight: '6px',

diff --git a/packages/app/src/components/Layout/styles/Menu.style.js b/packages/app/src/components/Layout/styles/Menu.style.js
@@ -1,9 +1,11 @@
+import { colors } from '@dhis2/ui-core';
+
 export const styles = {
     icon: {
         width: 22,
         height: 22,
         background: 'none',
-        color: '#000',
+        color: colors.black,
         padding: 0,
     },
 };
diff --git a/packages/app/src/components/Layout/styles/Tooltip.style.js b/packages/app/src/components/Layout/styles/Tooltip.style.js
@@ -1,12 +1,12 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export const styles = {
     tooltip: {
         fontFamily: 'roboto',
         padding: '7px 9px',
         color: colors.white,
         fontSize: '12px',
-        backgroundColor: '#4a4a4a',
+        backgroundColor: colors.grey900,
         boxShadow: 'none',
         borderRadius: '3px',
         position: 'relative',

diff --git a/packages/app/src/components/Layout/styles/style.js b/packages/app/src/components/Layout/styles/style.js
@@ -1,23 +1,21 @@
-import { colors } from '../../../modules/colors';
+import { colors, theme } from '@dhis2/ui-core';
 
 // Layout
 export const LAYOUT_HEIGHT = '78px';
 
 // Axis
 export const AXIS_PADDING = '4px 4px 2px 6px';
 export const AXIS_LABEL_PADDING = '2px 0px 0px 4px';
-export const AXIS_BORDER_COLOR = colors.greyLight;
+export const AXIS_BORDER_COLOR = colors.grey300;
 export const AXIS_BORDER_STYLE = 'solid';
 export const AXIS_BORDER_WIDTH = '0px 0px 1px 1px';
 export const AXIS_BACKGROUND_COLOR = colors.white;
 
 // Chip
-export const CHIP_COLOR = colors.black;
+export const CHIP_COLOR = colors.grey900;
 export const CHIP_FONT_WEIGHT = 400;
 export const CHIP_FONT_SIZE = '14px';
-export const CHIP_BACKGROUND_COLOR = colors.accentSecondaryLightest;
-export const CHIP_BACKGROUND_COLOR_HOVER = colors.lightBlueHover;
-export const CHIP_BACKGROUND_COLOR_ACTIVE = colors.lightBlueActive;
+export const CHIP_BACKGROUND_COLOR = theme.secondary200;
 export const CHIP_HEIGHT = '14px';
 export const CHIP_MARGIN = '4px';
 export const CHIP_PADDING = '1px 6px';

diff --git a/packages/app/src/components/MenuBar/styles/MenuBar.style.js b/packages/app/src/components/MenuBar/styles/MenuBar.style.js
@@ -1,6 +1,8 @@
+import { colors } from '@dhis2/ui-core';
+
 export default theme => ({
     menuBar: {
-        background: '#fff',
+        background: colors.white,
         display: 'flex',
         alignItems: 'center',
         padding: `0 ${theme.spacing.unit}px`,

diff --git a/packages/app/src/components/Snackbar/styles/Snackbar.style.js b/packages/app/src/components/Snackbar/styles/Snackbar.style.js
@@ -1,4 +1,4 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export default theme => ({
     container: {
@@ -15,11 +15,11 @@ export default theme => ({
         cursor: 'pointer',
     },
     warning: {
-        backgroundColor: '#FFCA28',
+        backgroundColor: colors.yellow500,
         color: colors.black,
     },
     error: {
-        backgroundColor: '#D32F2F',
+        backgroundColor: colors.red500,
         color: colors.white,
     },
 });
diff --git a/packages/app/src/components/TitleBar/styles/TitleBar.style.js b/packages/app/src/components/TitleBar/styles/TitleBar.style.js
@@ -1,4 +1,4 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export default {
     titleBar: {
@@ -8,7 +8,7 @@ export default {
     cell: {
         display: 'flex',
         alignItems: 'center',
-        background: '#fff',
+        background: colors.white,
         padding: '6px',
         borderRadius: '5px',
         margin: '4px',
@@ -21,7 +21,7 @@ export default {
     },
     interpretation: {
         fontSize: '12px',
-        color: colors.greyDark,
+        color: colors.grey700,
     },
     interpretationIcon: {
         display: 'flex',
@@ -31,10 +31,10 @@ export default {
         marginRight: '3px',
     },
     titleUnsaved: {
-        color: colors.grey,
+        color: colors.grey500,
         fontStyle: 'italic',
     },
     titleDirty: {
-        color: colors.greyDark,
+        color: colors.grey700,
     },
 };
diff --git a/packages/app/src/components/UpdateButton/styles/UpdateButton.style.js b/packages/app/src/components/UpdateButton/styles/UpdateButton.style.js
@@ -1,8 +1,8 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export default {
     flat: {
-        backgroundColor: colors.accentPrimary,
+        backgroundColor: colors.primary600,
         color: colors.white,
         fontSize: '13px',
         padding: '6px 15px',

diff --git a/packages/app/src/components/Visualization/styles/BlankCanvas.style.js b/packages/app/src/components/Visualization/styles/BlankCanvas.style.js
@@ -1,4 +1,4 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 const error = {
     fontWeight: 'bold',
@@ -21,10 +21,10 @@ export default {
     },
     title: {
         ...error,
-        color: colors.greyDark,
+        color: colors.grey700,
     },
     description: {
         ...error,
-        color: colors.grey,
+        color: colors.grey500,
     },
 };
diff --git a/packages/app/src/components/VisualizationOptions/styles/VisualizationOptions.style.js b/packages/app/src/components/VisualizationOptions/styles/VisualizationOptions.style.js
@@ -1,11 +1,13 @@
+import { colors } from '@dhis2/ui-core';
+
 export default {
     dialogContent: {
         flex: '1 1 550px',
     },
     tabsBar: {
         height: '48px',
-        backgroundColor: '#FFFFFF',
-        borderBottom: '1px solid #E0E0E0',
+        backgroundColor: colors.white,
+        borderBottom: `1px solid ${colors.grey300}`,
     },
     tab: {
         width: '33.33%',

diff --git a/...es/app/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.style.js b/...es/app/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.style.js
@@ -1,4 +1,4 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export default {
     button: {
@@ -20,7 +20,7 @@ export default {
     menuDivider: {
         border: 'none',
         borderBottom: '1px solid',
-        borderColor: colors.greyLight,
+        borderColor: colors.grey300,
     },
     menuItem: {
         height: 120,

diff --git a/packages/app/src/modules/chartTypes.js b/packages/app/src/modules/chartTypes.js
@@ -26,7 +26,7 @@ export const chartTypeDisplayNames = {
     [GAUGE]: i18n.t('Gauge'),
     [YEAR_OVER_YEAR_LINE]: i18n.t('Year over year (line)'),
     [YEAR_OVER_YEAR_COLUMN]: i18n.t('Year over year (column)'),
-    [OPEN_AS_MAP]: i18n.t('Open as: Map'),
+    [OPEN_AS_MAP]: i18n.t('Open as Map'), // TODO Open as: Map when i18next nsSeparator fixed
 };
 
 const stackedTypes = [STACKED_COLUMN, STACKED_BAR, AREA];

diff --git a/packages/app/src/modules/colors.js b/packages/app/src/modules/colors.js