all: stop importing CSS files from library code

We were importing CSS files directly from library code. This causes
issues for downstream users, because they are forced to configure
their build system to support CSS imports (e.g. webpack doesn't
support this by default). Moreover, this makes it impossible to use
the library without a build system (e.g. importing it directly from
pure HTML/JS files).

Make users responsible for including the CSS one way or another.
Our stories do this using CSS imports already, but other downstream
consumers might prefer to use a <link> or similar.

Signed-off-by: Simon Ser <[email protected]>

Author: emersion

package-lock.json

@@ -19,5 +19,9 @@
     "clean": "rimraf storybook-static",
     "start": "storybook dev -p 6006",
     "build": "storybook build"
+  },
+  "dependencies": {
+    "@osrd-project/ui-core": "0.0.1-dev",
+    "@osrd-project/ui-trackoccupancydiagram": "0.0.1-dev"
   }
 }

storybook/package.json

@@ -37,6 +37,9 @@ import {
 import occupancyZones from '../samples/TrackOccupancyDiagramSamples/occupancyZones';
 import tracks from '../samples/TrackOccupancyDiagramSamples/tracks';
 
+import '@osrd-project/ui-core/dist/theme.css';
+import '@osrd-project/ui-trackoccupancydiagram/dist/theme.css';
+
 type TrackOccupancyDiagramProps = {
   xZoomLevel: number;
   yZoomLevel: number;

storybook/stories/TrackOccupancyDiagram/TrackOccupancyDiagram.stories.tsx

@@ -1,5 +1,3 @@
-import './styles/main.css';
-
 export { default as Button, ButtonProps } from './components/buttons/Button';
 export {
   default as ComboBox,

ui-core/src/index.ts

@@ -1,5 +1,3 @@
-import './styles/main.css';
-
 export { default as useManchettesWithSpaceTimeChart } from './hooks/useManchetteWithSpaceTimeChart';
 export { DEFAULT_ZOOM_MS_PER_PX } from './consts';
 export { timeScaleToZoomValue } from './helpers';

ui-manchette-with-spacetimechart/src/index.ts

@@ -3,7 +3,6 @@ import React from 'react';
 import cx from 'classnames';
 
 import { type InteractiveWaypoint } from '../types';
-import '@osrd-project/ui-core/dist/theme.css';
 import { positionMmToKm } from '../utils';
 
 type WaypointProps = {

ui-manchette/src/components/Waypoint.tsx

@@ -1,5 +1,3 @@
-import '@osrd-project/ui-core/dist/theme.css';
-import './styles/main.css';
 import './components/consts';
 
 import Manchette from './components/Manchette';

ui-manchette/src/index.ts

@@ -1,5 +1,3 @@
-import './styles/main.css';
-
 export type { HoveredItem, SpaceTimeChartProps } from './lib/types';
 
 export * from './components/SpaceTimeChart';

ui-spacetimechart/src/index.ts

@@ -1,4 +1 @@
-import '@osrd-project/ui-core/dist/theme.css';
-import './styles/main.css';
-
 export { default as SpeedSpaceChart } from './components/SpeedSpaceChart';

ui-speedspacechart/src/index.ts

@@ -1,5 +1,2 @@
-import '@osrd-project/ui-core/dist/theme.css';
-import './styles/main.css';
-
 export { default as TrackOccupancyCanvas } from './components/TrackOccupancyCanvas';
 export { default as TrackOccupancyManchette } from './components/TrackOccupancyManchette';