fix(style): import visualizations style in visualizations-react bundle (

#231)
opendatasoft · Mar 26, 2024 · 2157be9 · 2157be9 · github-actions · Mar 26, 2024
1 parent 67a822d
commit 2157be9
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 20 deletions.
diff --git a/packages/visualizations-react/.storybook/preview.js b/packages/visualizations-react/.storybook/preview.js
@@ -1,2 +1 @@
-import '@opendatasoft/visualizations/dist/index.css';
 import './theme.css';
diff --git a/packages/visualizations-react/.storybook/theme.css b/packages/visualizations-react/.storybook/theme.css
@@ -17,22 +17,3 @@ h3 {
 a:link, a:visited, a:active {
     color: #774936;
 }
-
-/* Style for the Custom style Table story */
-.table-story--custom-style .table-wrapper {
-    border-color: #fcd4cf;
-}
-.table-story--custom-style thead {
-    border-bottom-color: #f94346;
-    border-bottom-width: 2px;
-    background-color: #fd635d;
-    color:#ffffff;
-}
-
-.table-story--custom-style tbody tr {
-    border-bottom-color: #fcd4cf;
-}
-.table-story--custom-style tbody tr:hover {
-    background-color: #f9aea4;
-}
-
diff --git a/packages/visualizations-react/jest.config.js b/packages/visualizations-react/jest.config.js
@@ -5,5 +5,7 @@ module.exports = {
     moduleNameMapper: {
         src: '<rootDir>/src',
         reactify: '<rootDir>/src/reactify',
+        // https://jestjs.io/docs/webpack#handling-static-assets
+        '\\.css$': '<rootDir>/test/__mocks__/styleMock.js',
     },
 };  
diff --git a/packages/visualizations-react/src/index.ts b/packages/visualizations-react/src/index.ts
@@ -1,3 +1,5 @@
+import '@opendatasoft/visualizations/dist/index.css';
+
 import {
     Chart as _Chart,
     KpiCard as _KpiCard,

diff --git a/packages/visualizations-react/stories/Table/Table.stories.tsx b/packages/visualizations-react/stories/Table/Table.stories.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Column, TableOptions, TableData, Async } from '@opendatasoft/visualizations';
 
+import './custom-style.css';
+
 import { Table } from '../../src';
 
 import value from './data';

diff --git a/packages/visualizations-react/stories/Table/custom-style.css b/packages/visualizations-react/stories/Table/custom-style.css
@@ -0,0 +1,16 @@
+.table-story--custom-style .table-wrapper {
+    border-color: #fcd4cf;
+}
+.table-story--custom-style thead {
+    border-bottom-color: #f94346;
+    border-bottom-width: 2px;
+    background-color: #fd635d;
+    color:#ffffff;
+}
+
+.table-story--custom-style tbody tr {
+    border-bottom-color: #fcd4cf;
+}
+.table-story--custom-style tbody tr:hover {
+    background-color: #f9aea4;
+}
diff --git a/packages/visualizations-react/test/__mocks__/styleMock.js b/packages/visualizations-react/test/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		import '@opendatasoft/visualizations/dist/index.css';
		import './theme.css';
File	Branches	Funcs	Lines	Uncovered Lines
src
index.ts	100%	100%	100%
src/client
error.ts	100%	100%	100%
index.ts	75.32%	100%	96.88%	124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
types.ts	100%	100%	100%
src/odsql
clauses.ts	71.43%	80%	90.91%	14, 32, 42
index.ts	83.72%	95.65%	94.12%	111, 140, 25, 28, 56–57, 57, 57–58, 68, 78–79