@sis-cc/dotstatsuite-components 18.1.0 → 19.0.0

package/.gitlab-ci.yml

@@ -5,7 +5,7 @@ stages:
   - publish
 
 variables:
-  NODE_VERSION: node:14-alpine
+  NODE_VERSION: node:18-alpine
 
 setup:
   stage: setup

package/lib/app.js

@@ -6,29 +6,16 @@ var _react2 = _interopRequireDefault(_react);
 
 var _client = require('react-dom/client');
 
-var _app = require('./viewer/src/app');
-
-var _app2 = _interopRequireDefault(_app);
-
-var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
-
-var _styles = require('@mui/material/styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var theme = (0, _styles.createTheme)((0, _dotstatsuiteVisions.sisccTheme)({ rtl: 'ltr' }));
 var container = document.getElementById('root');
 var root = (0, _client.createRoot)(container);
 
 var App = function App() {
   return _react2.default.createElement(
-    _styles.StyledEngineProvider,
-    { injectFirst: true },
-    _react2.default.createElement(
-      _styles.ThemeProvider,
-      { theme: theme },
-      _react2.default.createElement(_app2.default, null)
-    )
+    _react.StrictMode,
+    null,
+    'I\'m not groot, I\'m component'
   );
 };
 

package/lib/viewer/src/app/use-case-1.js

@@ -26,29 +26,11 @@ var _oecdHEALTH_PROT = require('../../../rules/test/oecd-HEALTH_PROT.json');
 
 var _oecdHEALTH_PROT2 = _interopRequireDefault(_oecdHEALTH_PROT);
 
-var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/*return (
-    <div style={{display: 'flex', flexWrap: 'wrap'}}>
-      {R.map(([key, value]) => (
-        <React.Fragment key={key}>
-          <div style={{width: value - 1, margin: 10}}>
-            <h5>{key}: {value}px</h5>
-            <Viewer {...rowData()} chartOptions={options} type="RowChart" />
-          </div>
-          <div style={{width: value - 1, margin: 10}}>
-            <h5>{key}: {value}px</h5>
-            <Viewer {...stackData()} chartOptions={options} type="StackedBarChart" />
-          </div>
-        </React.Fragment>
-      ), R.toPairs(T4_BREAKPOINTS))}
-    </div>
-  );*/
-
+//import stackData from '../../mocks/stack';
 exports.default = function (_ref) {
   var config = _ref.config,
       style = _ref.style,
@@ -75,5 +57,4 @@ exports.default = function (_ref) {
     },
     type: type
   });
-};
-//import stackData from '../../mocks/stack';
+};

package/lib/viewer/src/app.js

@@ -12,10 +12,6 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactHelmet = require('react-helmet');
-
-var _core = require('@blueprintjs/core');
-
 var _styles = require('@mui/material/styles');
 
 var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
@@ -62,9 +58,9 @@ var AppTab = function AppTab(_ref) {
   var label = _ref.label,
       iconName = _ref.iconName;
   return _react2.default.createElement(
-    _core.Tooltip,
-    { content: label, position: _core.Position.RIGHT },
-    _react2.default.createElement(_core.Icon, { iconName: iconName })
+    Tooltip,
+    { content: label, position: Position.RIGHT },
+    _react2.default.createElement(Icon, { iconName: iconName })
   );
 };
 
@@ -149,25 +145,18 @@ exports.default = function () {
   
   */
 
-  return _react2.default.createElement(
-    'div',
-    { style: { padding: 10 } },
-    _react2.default.createElement(_reactHelmet.Helmet, { htmlAttributes: { dir: isRtl ? 'rtl' : 'ltr' } }),
-    _react2.default.createElement(
-      'button',
-      { onClick: function onClick() {
-          return setRtl(!isRtl);
-        } },
-      isRtl ? 'left to right' : 'right to left'
-    ),
-    _react2.default.createElement(
-      _core.Tabs2,
-      { renderActiveTabPanelOnly: false },
-      _react2.default.createElement(_core.Tab2, {
-        id: 'uc1',
-        title: _react2.default.createElement(AppTab, { label: 'full screen resizable chart', iconName: 'fullscreen' }),
-        panel: _react2.default.createElement(_useCase2.default, { isRtl: isRtl, config: config, style: style, options: options })
-      })
-    )
-  );
+  return {/* <div style={{ padding: 10 }}>
+           <StyledEngineProvider injectFirst>
+             <ThemeProvider theme={theme}>
+           <button onClick={() => setRtl(!isRtl)}>{isRtl ? 'left to right' : 'right to left'}</button>
+           <Tabs2 renderActiveTabPanelOnly={false}>
+             <Tab2
+               id="uc1"
+               title={<AppTab label="full screen resizable chart" iconName="fullscreen" />}
+               panel={<UseCase1 isRtl={isRtl} config={config} style={style} options={options} />}
+             />
+           </Tabs2>
+           </ThemeProvider>
+           </StyledEngineProvider>
+          </div> */};
 };

package/package.json

@@ -1,36 +1,24 @@
 {
   "name": "@sis-cc/dotstatsuite-components",
   "description": "Set components based on React.",
-  "version": "18.1.0",
+  "version": "19.0.0",
   "main": "lib/index.js",
+  "type": "module",
   "author": "OECD",
   "license": "MIT",
   "scripts": {
     "build": "wce build",
     "start": "wce start",
-    "test": "wce test",
-    "demo": "wce bundle --app --relative && mv dist public"
+    "test": "wce test"
   },
   "devDependencies": {
-    "@blueprintjs/core": "^1.22.0",
-    "@mui/material": "^5.16.5",
-    "@mui/styles": "^5.16.5",
-    "@sis-cc/dotstatsuite-sdmxjs": "*",
-    "@sis-cc/dotstatsuite-visions": "*",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-addons-css-transition-group": "^15.6.2",
-    "react-helmet": "^5.2.1",
     "web-component-env": "^2.0.0"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.5",
-    "@mui/material": "^5.16.5",
-    "@mui/styles": "^5.16.5",
     "@react-hook/size": "^2.1.1",
-    "@sis-cc/dotstatsuite-d3-charts": "^8.3.0",
+    "@sis-cc/dotstatsuite-d3-charts": "~8.3.0",
+    "@sis-cc/dotstatsuite-sdmxjs": "~10.1.0",
+    "@sis-cc/dotstatsuite-visions": "~12.2.0",
     "date-fns": "^1.30.1",
     "lodash": "^4.17.2",
     "lodash.compose": "^2.4.1",
@@ -40,10 +28,11 @@
     "ramda": "^0.26.1"
   },
   "peerDependencies": {
-    "@mui/icons-material": "^5.16.5",
-    "@mui/material": "^5.16.5",
-    "@sis-cc/dotstatsuite-sdmxjs": "^8",
-    "@sis-cc/dotstatsuite-visions": "^9",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "@mui/styles": "^5",
     "react": "^18",
     "react-dom": "^18"
   }

package/src/app.js

@@ -1,20 +1,13 @@
-import React from 'react';
+import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import ViewerApp from './viewer/src/app';
-import { sisccTheme } from '@sis-cc/dotstatsuite-visions';
-import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
-import { createTheme } from '@mui/material/styles';
 
-const theme = createTheme(sisccTheme({ rtl: 'ltr' }));
 const container = document.getElementById('root');
 const root = createRoot(container);
 
 const App = () => (
-  <StyledEngineProvider injectFirst>
-    <ThemeProvider theme={theme}>
-      <ViewerApp />
-    </ThemeProvider>
-  </StyledEngineProvider>
+  <StrictMode>
+    I'm not groot, I'm component
+  </StrictMode>
 );
 
 root.render(<App />);

package/src/viewer/src/app/use-case-1.js

@@ -5,24 +5,6 @@ import rowData from '../../mocks/row';
 //import stackData from '../../mocks/stack';
 import { series } from '../../../rules/src';
 import data from '../../../rules/test/oecd-HEALTH_PROT.json';
-import { T4_BREAKPOINTS } from '@sis-cc/dotstatsuite-visions';
-
-/*return (
-    <div style={{display: 'flex', flexWrap: 'wrap'}}>
-      {R.map(([key, value]) => (
-        <React.Fragment key={key}>
-          <div style={{width: value - 1, margin: 10}}>
-            <h5>{key}: {value}px</h5>
-            <Viewer {...rowData()} chartOptions={options} type="RowChart" />
-          </div>
-          <div style={{width: value - 1, margin: 10}}>
-            <h5>{key}: {value}px</h5>
-            <Viewer {...stackData()} chartOptions={options} type="StackedBarChart" />
-          </div>
-        </React.Fragment>
-      ), R.toPairs(T4_BREAKPOINTS))}
-    </div>
-  );*/
 
 export default ({ config, style, options }) => {
   const type = 'StackedRowChart';

package/src/viewer/src/app.js

@@ -1,6 +1,4 @@
 import React, { useState } from 'react';
-import { Helmet } from 'react-helmet';
-import { Tab2, Tabs2, Intent, Icon, Tooltip, Position } from '@blueprintjs/core';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import { createTheme } from '@mui/material/styles';
 import { sisccTheme } from '@sis-cc/dotstatsuite-visions';
@@ -100,10 +98,9 @@ export default () => {
 */
 
   return (
-    <div style={{ padding: 10 }}>
-      {/* <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={theme}> */}
-      <Helmet htmlAttributes={{ dir: isRtl ? 'rtl' : 'ltr' }} />
+    {/* <div style={{ padding: 10 }}>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
       <button onClick={() => setRtl(!isRtl)}>{isRtl ? 'left to right' : 'right to left'}</button>
       <Tabs2 renderActiveTabPanelOnly={false}>
         <Tab2
@@ -112,8 +109,8 @@ export default () => {
           panel={<UseCase1 isRtl={isRtl} config={config} style={style} options={options} />}
         />
       </Tabs2>
-      {/* </ThemeProvider>
-      </StyledEngineProvider> */}
-    </div>
+      </ThemeProvider>
+      </StyledEngineProvider>
+    </div> */}
   );
 };