@sis-cc/dotstatsuite-components 20.5.0 → 21.0.0

package/.gitlab-ci.yml

@@ -5,13 +5,14 @@ stages:
   - publish
 
 variables:
-  NODE_VERSION: node:18-alpine
+  NODE_VERSION: node:24-alpine
 
 setup:
   stage: setup
   image: $NODE_VERSION
   script:
     - yarn
+    - yarn peers
   artifacts:
     paths:
       - node_modules/
@@ -23,7 +24,7 @@ test:
     - chmod +x ./node_modules/web-component-env/src/wce-test
   script:
     - yarn test
-  coverage: /All files\s*.\[0m \|.\[31;1m\s*([\d\.]+)/
+  coverage: '/All files\s*\|\s*(\d+\.\d+)%/'
   dependencies:
     - setup
 

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright © OECD 2019-2024
+Copyright © OECD 2019-2025
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,19 +1,3 @@
 # dotstatsuite-components
 
-This library regroup a set of React components that were originally separated in their own git repositories.
-Those components are:
-  - [bridge-d3-react](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-components/blob/master/src/bridge-d3-react/README.md)
-  - [chart](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-components/blob/master/src/chart/README.md)
-  - [rules](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-components/blob/master/src/rules/README.md)
-  - [rules-driver](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-components/blob/master/src/rules-driver/README.md)
-  - [share](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-components/blob/master/src/share/README.md)
-
-Unlike other libraries as [dotstatsuite-ui-components](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-ui-components), this library doesn't focus only on UI design, but also on data parsing and deduced behaviour, like the visualisation charts.
-
-## setup
-
-- install: `npm i @sis-cc/dotstatsuite-components`
-
-## usage
-
-see individuals readme files of the components
+Set components based on React.

package/package.json

@@ -1,31 +1,33 @@
 {
   "name": "@sis-cc/dotstatsuite-components",
   "description": "Set components based on React.",
-  "version": "20.5.0",
-  "main": "lib/index.js",
+  "version": "21.0.0",
   "type": "module",
+  "module": "./dist/dotstatsuite-components.js",
+  "engines": {
+    "node": ">=18"
+  },
   "author": "OECD",
   "license": "MIT",
   "scripts": {
-    "build": "wce build",
-    "start": "wce start",
+    "peers": "install-peers --force-run",
+    "build": "vite build",
     "test": "wce test"
   },
   "devDependencies": {
-    "web-component-env": "^2.0.0"
+    "@rollup/plugin-replace": "^6.0.2",
+    "@sis-cc/dotstatsuite-d3-charts": "^9.2.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "install-peers-cli": "^2.2.0",
+    "ramda": "^0.26.1",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "vite": "^5.4.9",
+    "web-component-env": "^2.9.10"
   },
   "dependencies": {
     "@react-hook/size": "^2.1.1",
-    "@sis-cc/dotstatsuite-d3-charts": "^9.1.2",
-    "@sis-cc/dotstatsuite-sdmxjs": "^10.1.0",
-    "@sis-cc/dotstatsuite-visions": "^12.8.0",
-    "date-fns": "^1.30.1",
     "lodash": "^4.17.2",
-    "lodash.compose": "^2.4.1",
-    "memoizee": "^0.4.4",
-    "numeral": "^2.0.6",
-    "prop-types": "^15.6.2",
-    "ramda": "^0.26.1"
+    "memoizee": "^0.4.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -33,6 +35,10 @@
     "@mui/icons-material": "^5",
     "@mui/material": "^5",
     "@mui/styles": "^5",
+    "@sis-cc/dotstatsuite-sdmxjs": "~10.1.0",
+    "@sis-cc/dotstatsuite-visions": "~12.27.0",
+    "date-fns": "^1.30.1",
+    "numeral": "^2.0.6",
     "react": "^18",
     "react-dom": "^18"
   }

package/src/bridge-d3-react/src/react-chart-factory.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { isFunction, cloneDeep } from 'lodash';
 
 export default D3Chart => class ReactChart extends Component {
   constructor(props) {
@@ -48,7 +47,7 @@ export default D3Chart => class ReactChart extends Component {
 
   componentWillUnmount() {
     super.componentWillUnmount && super.componentWillUnmount();
-    
+
     this.chart && this.chart.destroy && this.chart.destroy(this.refs.chart);
   }
 

package/src/rules/src/factories/sample-series.js

@@ -1,4 +1,4 @@
-import { get, map, reduce, sortBy, head, isEmpty, isFunction, isNil, split } from 'lodash';
+import { map, sortBy, head, isEmpty, isNil, split } from 'lodash';
 import { categoryDisplay } from '../dimension-utils';
 import { getFormatedObservation } from '../observation-formater';
 

package/src/rules/src/index.js

@@ -3,7 +3,6 @@ import {
   filter, find, includes, isArray, findIndex, isEqual
 } from 'lodash';
 import * as R from 'ramda';
-import compose from 'lodash.compose';
 import memoizee from 'memoizee';
 import __sampleSeries from './factories/sample-series';
 import __sampleFocus from './factories/sample-focus';
@@ -29,7 +28,7 @@ export const freqQ = FREQ_Q;
 export const freqM = FREQ_M;
 
 // --------------------------------------------------------------------------------extractSdmxErrors
-const _extractSdmxErrors = (data) => compose(
+const _extractSdmxErrors = (data) => R.compose(
   (errors) => map(errors, (error) => ({ label: error.code, description: error.message })),
   (data) => get(data, 'errors', [])
 );
@@ -85,15 +84,15 @@ export const getDimensionValues = (dimension) => get(dimension, 'values', []);
 const _splitDimensions = (data) => {
   const { dimensions } = extractSdmxArtefacts(data);
   const [value, values] = partition(
-    reject(dimensions, compose(isEmpty, getDimensionValues)),
-    compose((values) => size(values) === 1, getDimensionValues)
+    reject(dimensions, R.compose(isEmpty, getDimensionValues)),
+    R.compose((values) => size(values) === 1, getDimensionValues)
   );
   return { value, values };
 }
 export const splitDimensions = memoizee(_splitDimensions);
 
 // ------------------------------------------------------------------dimensionsWithValuesIndexedById
-const _dimensionsWithValuesIndexedById = (data) => compose(
+const _dimensionsWithValuesIndexedById = (data) => R.compose(
   (dimensionsWithValues) => keyBy(dimensionsWithValues, 'id'),
   (split) => split.values,
   splitDimensions
@@ -212,11 +211,11 @@ const _source = (data, config, meta) => {
     return null;
   const source = get(config, 'source', null);
   if (source && !(isEmpty(source)))
-    return source; 
+    return source;
   const artefacts = extractSdmxArtefacts(data);
   const uri = get(artefacts, 'source');
-  if (!uri) 
-    return get(config, 'defaultSource', null); 
+  if (!uri)
+    return get(config, 'defaultSource', null);
   const match = uri.match(/(^http.*)\/SDMX-JSON\/data\/([^\/]+)\//);
   if (size(match) !== 3)
     return null;
@@ -232,20 +231,20 @@ const _focus = (data, type, dimension, _display) => {
     case 'RowChart': case 'BarChart':
     case 'HorizontalSymbolChart': case 'VerticalSymbolChart':
     case 'StackedBarChart': case 'StackedRowChart':
-      return compose(
+      return R.compose(
         (datapoints) => map(datapoints, (dp) => ({ label: dp.category, value: dp.key })),
         (series) => series[0].datapoints,
         series
       )(data, type, null, dimension, null, display);
     case 'TimelineChart':
-      return compose(
+      return R.compose(
         (series) => map(series, (serie) => ({ label: serie.category, value: serie.key })),
         series
       )(data, type, null, dimension, null, display)
     case 'ScatterChart':
       const id = get(dimension, 'id');
       if (isNil(id)) return [];
-      const dimensions = compose(
+      const dimensions = R.compose(
         (dimensions) => omit(dimensions, id),
         dimensionsWithValuesIndexedById
       )(data);
@@ -324,7 +323,7 @@ export const headerUprsLabel = display => uprAttributes => {
   ).join(', ');
 }
 
-export const getUprs = (data, display) => compose(
+export const getUprs = (data, display) => R.compose(
   headerUprsLabel(parseDisplay(display)),
   uprAttributesWithOneRelevantValue,
   ({ attributes }) => uprAttributes(attributes),
@@ -338,7 +337,7 @@ const _header = (data, _title, _subtitle, _display) => {
   return ({
     title,
     subtitle: isArray(subtitle) ? subtitle : [subtitle],
-    uprs: compose(
+    uprs: R.compose(
       headerUprsLabel(display),
       uprAttributesWithOneRelevantValue,
       ({ attributes }) => uprAttributes(attributes),
@@ -395,3 +394,5 @@ export { isSharedLayoutCompatible } from './layout';
 
 export { getObservations } from './preparators/getObservations';
 
+export const getFlags = R.identity;
+export const prepareData = R.identity;

package/src/rules/src/observation-formater.js

@@ -1,7 +1,6 @@
 import memoizee from 'memoizee';
 import numeral from 'numeral';
 import * as R from 'ramda';
-import { isNan } from 'lodash';
 import { extractSdmxArtefacts } from './';
 
 export const DEFAULT_PREFSCALE_ATTR_IDS = ["PREF_SCALE"];

package/src/rules/src/properties/focus.js

@@ -1,7 +1,7 @@
 import * as R from 'ramda';
 import { extractSdmxArtefacts, focus } from '../';
-import { BAR, ROW, SCATTER, TIMELINE, TYPES } from '../constants';
-import { toSingularity, hasFocus } from './utils';
+import { BAR, ROW, TIMELINE } from '../constants';
+import { hasFocus } from './utils';
 
 const sampleFocusTypes = { [BAR]: BAR, [ROW]: ROW, [TIMELINE]: TIMELINE };
 
@@ -63,7 +63,7 @@ export const focusStateFromNewProps = ({ data, display, type }, singularity, sta
 
 export const sampleFocusStateFromNewProps = (props, state) => {
   if (!R.has(props.type, sampleFocusTypes) || R.isNil(props.data)) {
-    return ({}); //no changes 
+    return ({}); //no changes
   }
   return focusStateFromNewProps(props, null, state);
 };

package/src/rules/src/sdmx-data/index.js

@@ -35,3 +35,5 @@ export const getIsHidden = annotations => R.pipe(
   R.find(R.propEq('type', NOT_DISPLAYED)),
   R.complement(R.isNil)
 )(annotations);
+
+export const getFullName = R.identity;

package/src/rules2/src/hierarchiseDimensionWithNativeHierarchy2.js

@@ -16,7 +16,11 @@ export const hierarchiseDimensionWithNativeHierarchy = (dimension) => {
           R.assoc('parents', parentsIndexes),
           R.assoc('parent', R.isEmpty(parentsIndexes) ? undefined : parentId),
         )(child);
-        const children = getChildren({ parentsIndexes: R.append(index, parentsIndexes), parentId: child.id });
+        const children = getChildren({
+          parentsIndexes: R.propOr(false, 'isSelected', child)
+           ? R.append(index, parentsIndexes) : parentsIndexes,
+          parentId: child.id
+        });
         return R.concat(acc, R.prepend(refined, children));
       },
       [],

package/src/rules2/src/table/getLayoutData2.js

@@ -5,7 +5,10 @@ import { getLayoutCoordinatesValidator } from '../utils';
 const getValueData = (index, dimension, parentsIndexes, missingParents = []) => ({
 	dimension: R.pick(['id', 'name', '__index'], dimension),
 	value: {
-		...R.pipe(R.pathOr({}, ['values', index]), R.pick(['id', 'name', 'isNonCoded', 'flags', 'hasAdvancedAttributes']))(dimension),
+		...R.pipe(
+			R.pathOr({}, ['values', index]),
+			R.pick(['id', 'name', 'isNonCoded', 'flags', 'hasAdvancedAttributes', 'display'])
+		)(dimension),
 		parents: parentsIndexes,
 		missingParents
 	}

package/src/viewer/src/index.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import * as R from 'ramda';
-import cx from 'classnames';
 import useSize from '@react-hook/size';
 import { Loading, NoData, TableHtml5 } from '@sis-cc/dotstatsuite-visions';
 import { makeStyles, useTheme } from '@mui/styles';
@@ -72,10 +71,10 @@ const Viewer = ({ type, targets={}, width, ...rest }) => {
   return (
     <div
       {...(targets.viewer ? { ref: targets.viewer } : {})}
-      className={cx(classes.container, {
-        [classes.tableContainer]: type === 'table',
-        [classes.chartContainer]: type !== 'table'
-      })}
+      className={[
+        classes.container,
+        type === 'table' ? classes.tableContainer : classes.chartContainer
+      ]}
     >
       <Header
         target={targets.header}

package/src/viewer/src/legends/AxisLegend.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import makeStyles from '@mui/styles/makeStyles';
 import { SCATTER } from '../../../rules/src/constants';
@@ -39,10 +38,4 @@ const AxisLegend = ({ axis, data, type }) => {
   }
 };
 
-AxisLegend.propTypes = {
-  axis: PropTypes.string.isRequired,
-  data: PropTypes.object.isRequired,
-  type: PropTypes.string.isRequired,
-};
-
 export default AxisLegend;

package/src/viewer/src/legends/FocusLegend.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import Legend from './Legend';
 import { SCATTER, TIMELINE } from '../../../rules/src/constants';
@@ -22,11 +21,11 @@ const FocusLegend = ({ data, options, type, width }) => {
   if (width < REDUCED_THRESHOLD) {
     return null;
   }
-  
+
   const itemRenderer = R.pipe(
     R.when(R.always(type === SCATTER), R.always(scatterRenderer)),
     R.when(R.always(type === TIMELINE), R.always(lineRenderer)),
-  )(null); 
+  )(null);
 
   const getItemLabel = R.ifElse(
     R.equals(SCATTER),
@@ -61,11 +60,4 @@ const FocusLegend = ({ data, options, type, width }) => {
   return (<Legend items={items} itemRenderer={itemRenderer} />);
 }
 
-FocusLegend.propTypes = {
-  data: PropTypes.object,
-  options: PropTypes.object,
-  type: PropTypes.string,
-  width: PropTypes.number
-};
-
 export default FocusLegend;

package/src/viewer/src/legends/Legend.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import makeStyles from '@mui/styles/makeStyles';
 import { getFontFromTheme } from '../utils';
@@ -44,9 +43,4 @@ const Legend = ({ items, itemRenderer }) => {
  return (<div className={classes.legend} >{legendEntries}</div>);
 };
 
-Legend.propTypes = {
-  itemRenderer: PropTypes.func,
-  items: PropTypes.array
-};
-
 export default Legend;

package/src/viewer/src/legends/SeriesLegend.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import Legend from './Legend';
 import { H_SYMBOL, STACKED_BAR, STACKED_ROW, V_SYMBOL } from '../../../rules/src/constants';
@@ -76,10 +75,4 @@ const SeriesLegend = ({ data, options, type }) => {
   );
 };
 
-SeriesLegend.propTypes = {
-  data: PropTypes.object,
-  options: PropTypes.object,
-  type: PropTypes.string,
-};
-
 export default SeriesLegend;

package/test/hierarchiseDimensionWithNativeHierarchy2.test.js

@@ -6,24 +6,24 @@ describe('hierarchiseDimensionWithNativeHierarchy tests', () => {
     const dimension = {
       id: 'test',
       values: [
-        { id: 'FRA', parent: 'EA', __indexPosition: 101 },
-        { id: 'GER', parent: 'EA', __indexPosition: 100 },
-        { id: 'EA', parent: 'W', __indexPosition: 30 },
-        { id: 'A', parent: 'W', __indexPosition: 20 },
-        { id: 'W', parent: undefined, __indexPosition: 5 },
-        { id: 'CHI', parent: undefined, __indexPosition: 0 }
+        { id: 'FRA', parent: 'EA', __indexPosition: 101, isSelected: true },
+        { id: 'GER', parent: 'EA', __indexPosition: 100, isSelected: true },
+        { id: 'EA', parent: 'W', __indexPosition: 30, isSelected: true },
+        { id: 'A', parent: 'W', __indexPosition: 20, isSelected: true },
+        { id: 'W', parent: undefined, __indexPosition: 5, isSelected: true },
+        { id: 'CHI', parent: undefined, __indexPosition: 0, isSelected: true }
       ]
     };
     
     const expected = {
       id: 'test',
       values: [
-        { id: 'CHI', parent: undefined, parents: [], __indexPosition: 0 },
-        { id: 'W', parent: undefined, parents: [], __indexPosition: 1 },
-        { id: 'A', parent: 'W', parents: [1], __indexPosition: 2 },
-        { id: 'EA', parent: 'W', parents: [1], __indexPosition: 3 },
-        { id: 'GER', parent: 'EA', parents: [1, 3], __indexPosition: 4 },
-        { id: 'FRA', parent: 'EA', parents: [1, 3], __indexPosition: 5 }
+        { id: 'CHI', parent: undefined, parents: [], __indexPosition: 0, isSelected: true },
+        { id: 'W', parent: undefined, parents: [], __indexPosition: 1, isSelected: true },
+        { id: 'A', parent: 'W', parents: [1], __indexPosition: 2, isSelected: true },
+        { id: 'EA', parent: 'W', parents: [1], __indexPosition: 3, isSelected: true },
+        { id: 'GER', parent: 'EA', parents: [1, 3], __indexPosition: 4, isSelected: true },
+        { id: 'FRA', parent: 'EA', parents: [1, 3], __indexPosition: 5, isSelected: true }
       ]
     };
 
@@ -33,22 +33,22 @@ describe('hierarchiseDimensionWithNativeHierarchy tests', () => {
     const dimension = {
       id: 'test',
       values: [
-        { id: 'FRA', parent: 'EA', __indexPosition: 101 },
-        { id: 'GER', parent: 'EA', __indexPosition: 100 },
-        { id: 'EA', parent: 'W', __indexPosition: 30 },
-        { id: 'A', parent: 'W', __indexPosition: 20 },
-        { id: 'CHI', parent: undefined, __indexPosition: 0 }
+        { id: 'FRA', parent: 'EA', __indexPosition: 101, isSelected: true },
+        { id: 'GER', parent: 'EA', __indexPosition: 100, isSelected: true },
+        { id: 'EA', parent: 'W', __indexPosition: 30, isSelected: true },
+        { id: 'A', parent: 'W', __indexPosition: 20, isSelected: true },
+        { id: 'CHI', parent: undefined, __indexPosition: 0, isSelected: true }
       ]
     };
     
     const expected = {
       id: 'test',
       values: [
-        { id: 'CHI', parent: undefined, parents: [], __indexPosition: 0 },
-        { id: 'A', parent: undefined, parents: [], __indexPosition: 1 },
-        { id: 'EA', parent: undefined, parents: [], __indexPosition: 2 },
-        { id: 'GER', parent: 'EA', parents: [2], __indexPosition: 3 },
-        { id: 'FRA', parent: 'EA', parents: [2], __indexPosition: 4 }
+        { id: 'CHI', parent: undefined, parents: [], __indexPosition: 0, isSelected: true },
+        { id: 'A', parent: undefined, parents: [], __indexPosition: 1, isSelected: true },
+        { id: 'EA', parent: undefined, parents: [], __indexPosition: 2, isSelected: true },
+        { id: 'GER', parent: 'EA', parents: [2], __indexPosition: 3, isSelected: true },
+        { id: 'FRA', parent: 'EA', parents: [2], __indexPosition: 4, isSelected: true }
       ]
     };
 
@@ -58,25 +58,52 @@ describe('hierarchiseDimensionWithNativeHierarchy tests', () => {
     const dimension = {
       id: 'test',
       values: [
-        { id: '', parent: '', __indexPosition: 101 },
-        { id: 'GER', parent: 'EA', __indexPosition: 100 },
-        { id: 'EA', parent: 'W', __indexPosition: 30 },
-        { id: 'A', parent: 'W', __indexPosition: 20 },
-        { id: 'CHI', parent: undefined, __indexPosition: 0 }
+        { id: '', parent: '', __indexPosition: 101, isSelected: true },
+        { id: 'GER', parent: 'EA', __indexPosition: 100, isSelected: true },
+        { id: 'EA', parent: 'W', __indexPosition: 30, isSelected: true },
+        { id: 'A', parent: 'W', __indexPosition: 20, isSelected: true },
+        { id: 'CHI', parent: undefined, __indexPosition: 0, isSelected: true }
       ]
     };
     
     const expected = {
       id: 'test',
       values: [
-        { id: 'CHI', parent: undefined, parents: [], __indexPosition: 0 },
-        { id: 'A', parent: undefined, parents: [], __indexPosition: 1 },
-        { id: 'EA', parent: undefined, parents: [], __indexPosition: 2 },
-        { id: 'GER', parent: 'EA', parents: [2], __indexPosition: 3 },
-        { id: '', parent: undefined, parents: [], __indexPosition: 4 }
+        { id: 'CHI', parent: undefined, parents: [], __indexPosition: 0, isSelected: true },
+        { id: 'A', parent: undefined, parents: [], __indexPosition: 1, isSelected: true },
+        { id: 'EA', parent: undefined, parents: [], __indexPosition: 2, isSelected: true },
+        { id: 'GER', parent: 'EA', parents: [2], __indexPosition: 3, isSelected: true },
+        { id: '', parent: undefined, parents: [], __indexPosition: 4, isSelected: true }
       ]
     };
 
     expect(hierarchiseDimensionWithNativeHierarchy(dimension)).to.deep.equal(expected);
   });
+  it('non selected parent', () => {
+    const dimension = {
+      id: 'test',
+      values: [
+        { id: 'FRA', parent: 'EA', __indexPosition: 101, isSelected: true },
+        { id: 'GER', parent: 'EA', __indexPosition: 100, isSelected: true },
+        { id: 'EA', parent: 'W', __indexPosition: 30, isSelected: false },
+        { id: 'A', parent: 'W', __indexPosition: 20, isSelected: true },
+        { id: 'W', parent: undefined, __indexPosition: 5, isSelected: true },
+        { id: 'CHI', parent: undefined, __indexPosition: 0, isSelected: true }
+      ]
+    };
+    
+    const expected = {
+      id: 'test',
+      values: [
+        { id: 'CHI', parent: undefined, parents: [], __indexPosition: 0, isSelected: true },
+        { id: 'W', parent: undefined, parents: [], __indexPosition: 1, isSelected: true },
+        { id: 'A', parent: 'W', parents: [1], __indexPosition: 2, isSelected: true },
+        { id: 'EA', parent: 'W', parents: [1], __indexPosition: 3, isSelected: false },
+        { id: 'GER', parent: 'EA', parents: [1], __indexPosition: 4, isSelected: true },
+        { id: 'FRA', parent: 'EA', parents: [1], __indexPosition: 5, isSelected: true }
+      ]
+    };
+
+    expect(hierarchiseDimensionWithNativeHierarchy(dimension)).to.deep.equal(expected);
+  })
 });

package/vite.config.mjs

@@ -0,0 +1,51 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { visualizer } from "rollup-plugin-visualizer";
+import replace from '@rollup/plugin-replace';
+import { dependencies, peerDependencies } from './package.json';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    visualizer({
+      open: false, // auto-open in browser
+      gzipSize: true,
+      brotliSize: true,
+    }),
+    replace({
+      preventAssignment: true,
+      delimiters: ['', ''],
+      values: {
+        'var d3_document = this.document;':
+          'var d3_document = globalThis.document;',
+        'this[d3_vendorSymbol(this, "requestAnimationFrame")]':
+          'globalThis[d3_vendorSymbol(globalThis, "requestAnimationFrame")]',
+        'this.navigator && /WebKit/.test(this.navigator.userAgent)':
+          'globalThis.navigator && /WebKit/.test(globalThis.navigator.userAgent)',
+      },
+    })
+  ],
+  build: {
+    minify: false,
+    lib: {
+      entry: 'src/index.js',
+      name: '@sis-cc/dotstatsuite-components',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: (id) => {
+        const externals = [
+          ...Object.keys(peerDependencies || {}),
+          ...Object.keys(dependencies || {}),
+        ];
+        return externals.some(pkg => id === pkg || id.startsWith(pkg + '/'));
+      },
+    },
+  },
+  // can be removed when all jsx files will have .jsx extension
+  esbuild: {
+    loader: 'jsx',
+    include: /src\/.*\.jsx?$/,
+    exclude: [],
+  }
+});

package/lib/app.js

@@ -1,22 +0,0 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _client = require('react-dom/client');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var container = document.getElementById('root');
-var root = (0, _client.createRoot)(container);
-
-var App = function App() {
-  return _react2.default.createElement(
-    _react.StrictMode,
-    null,
-    'I\'m not groot, I\'m component'
-  );
-};
-
-root.render(_react2.default.createElement(App, null));