ui-spacetimechart: fix tailwind config for storybooks

- add postcss.config.cjs & tailwind.config.js - remove css mockup import from stories - remove tailwind-mockup.css - fix import order in rollup-base.config.js
OpenRailAssociation · Sep 10, 2024 · d13b7d4 · d13b7d4
1 parent 7eeb707
commit d13b7d4
Show file tree

Hide file tree

Showing 17 changed files with 37 additions and 66 deletions.
diff --git a/rollup-base.config.js b/rollup-base.config.js
@@ -1,9 +1,10 @@
+import process from 'process';
+
 import eslint from '@rollup/plugin-eslint';
 import terser from '@rollup/plugin-terser';
 import typescript from '@rollup/plugin-typescript';
 import livereload from 'rollup-plugin-livereload';
 import postcss from 'rollup-plugin-postcss';
-import process from 'process';
 
 const formats = ['esm'];
 const isDev = process.env.NODE_ENV === 'development';

diff --git a/ui-spacetimechart/package.json b/ui-spacetimechart/package.json
@@ -15,10 +15,12 @@
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "main": "dist/index.esm.js",
+  "style": "dist/theme.css",
   "files": [
     "/dist"
   ],
   "exports": {
+    "./dist/theme.css": "./dist/theme.css",
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.esm.js"
@@ -28,6 +30,7 @@
     "rollup": "rollup -c",
     "clean": "rimraf dist",
     "build": "npm run rollup",
+    "watch": "NODE_ENV=development rollup -c -w",
     "test": "vitest run --dir src/__tests__",
     "prepublishOnly": "npm run clean && npm run build",
     "lint": "eslint src --ext .ts,.tsx  --max-warnings 0",

diff --git a/ui-spacetimechart/postcss.config.cjs b/ui-spacetimechart/postcss.config.cjs
@@ -0,0 +1,2 @@
+const generateBasePostcssConfig = require('../postcss-base.config.cjs');
+module.exports = generateBasePostcssConfig();
diff --git a/ui-spacetimechart/rollup.config.js b/ui-spacetimechart/rollup.config.js
@@ -1,18 +1,3 @@
-import typescript from '@rollup/plugin-typescript';
-import terser from '@rollup/plugin-terser';
-import eslint from '@rollup/plugin-eslint';
+import generateBaseRollupConfig from '../rollup-base.config.js';
 
-const formats = ['esm'];
-
-/** @type {import('rollup').RollupOptions} */
-export default {
-  input: 'src/index.ts',
-  output: formats.map((format) => ({
-    file: `dist/index.${format}.js`,
-    format,
-    name: 'osrdspacetimechart',
-    sourcemap: true,
-  })),
-  plugins: [eslint(), typescript(), terser()],
-  external: ['react', 'chroma-js', 'classnames', 'lodash'],
-};
+export default generateBaseRollupConfig('osrdcore', ['react']);
diff --git a/ui-spacetimechart/src/index.ts b/ui-spacetimechart/src/index.ts
@@ -1,2 +1,4 @@
+import './styles/main.css';
+
 export * from './components/SpaceTimeChart';
 export * from './components/PathLayer';
diff --git a/ui-spacetimechart/src/stories/additional-data.stories.tsx b/ui-spacetimechart/src/stories/additional-data.stories.tsx
@@ -4,6 +4,7 @@ import type { Meta } from '@storybook/react';
 import cx from 'classnames';
 import { clamp, inRange } from 'lodash';
 
+import { SpaceTimeChart, PathLayer } from '../';
 import { MouseTracker } from './lib/components';
 import { OPERATIONAL_POINTS, PATHS, START_DATE } from './lib/paths';
 import {
@@ -14,13 +15,12 @@ import {
   X_ZOOM_LEVEL,
   Y_ZOOM_LEVEL,
 } from './lib/utils';
-import { SpaceTimeChart, PathLayer } from '../';
 import { useDraw } from '../hooks/useCanvas';
 import { AMBIANT_A10, ERROR_30, ERROR_60, HOUR, KILOMETER, MINUTE } from '../lib/consts';
 import { type DrawingFunction, type Point } from '../lib/types';
 import { getDiff } from '../utils/vectors';
 
-import './lib/tailwind-mockup.css';
+import '@osrd-project/ui-spacetimechart/dist/theme.css';
 
 const MONO_TRACK_SPACES = [
   { from: 6 * KILOMETER, to: 24 * KILOMETER },

diff --git a/ui-spacetimechart/src/stories/base-rendering.stories.tsx b/ui-spacetimechart/src/stories/base-rendering.stories.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 
 import type { Meta } from '@storybook/react';
 
+import { SpaceTimeChart, PathLayer } from '../';
 import { OPERATIONAL_POINTS, PATHS } from './lib/paths';
 import { X_ZOOM_LEVEL, Y_ZOOM_LEVEL } from './lib/utils';
-import { SpaceTimeChart, PathLayer } from '../';
 
-import './lib/tailwind-mockup.css';
+import '@osrd-project/ui-spacetimechart/dist/theme.css';
 
 type WrapperProps = {
   xZoomLevel: number;

diff --git a/ui-spacetimechart/src/stories/custom-styles.stories.tsx b/ui-spacetimechart/src/stories/custom-styles.stories.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import type { Meta } from '@storybook/react';
 import cx from 'classnames';
 
+import { PathLayer, SpaceTimeChart } from '../';
 import { OPERATIONAL_POINTS, PATHS } from './lib/paths';
 import {
   MAX_X_ZOOM,
@@ -12,11 +13,10 @@ import {
   X_ZOOM_LEVEL,
   Y_ZOOM_LEVEL,
 } from './lib/utils';
-import { PathLayer, SpaceTimeChart } from '../';
 import { type Point } from '../lib/types';
 import { getDiff } from '../utils/vectors';
 
-import './lib/tailwind-mockup.css';
+import '@osrd-project/ui-spacetimechart/dist/theme.css';
 
 const DEFAULT_COLOR_1 = '#FF511A';
 const DEFAULT_COLOR_2 = '#FF8B61';

diff --git a/ui-spacetimechart/src/stories/lib/tailwind-mockup.css b/ui-spacetimechart/src/stories/lib/tailwind-mockup.css
diff --git a/ui-spacetimechart/src/stories/measuring.stories.tsx b/ui-spacetimechart/src/stories/measuring.stories.tsx
@@ -3,13 +3,15 @@ import React, { useState } from 'react';
 import type { Meta } from '@storybook/react';
 import cx from 'classnames';
 
+import { SpaceTimeChart, PathLayer } from '../';
 import { MouseTracker } from './lib/components';
 import { OPERATIONAL_POINTS, PATHS } from './lib/paths';
 import { X_ZOOM_LEVEL, Y_ZOOM_LEVEL, zoom } from './lib/utils';
-import { SpaceTimeChart, PathLayer } from '../';
 import { type DataPoint, type Point } from '../lib/types';
 import { getDiff } from '../utils/vectors';
 
+import '@osrd-project/ui-spacetimechart/dist/theme.css';
+
 type WrapperProps = {
   spaceScaleType: 'linear' | 'proportional';
   enableSnapping: boolean;

diff --git a/ui-spacetimechart/src/stories/options.stories.tsx b/ui-spacetimechart/src/stories/options.stories.tsx
@@ -4,6 +4,7 @@ import type { Meta } from '@storybook/react';
 import cx from 'classnames';
 import FileSaver from 'file-saver';
 
+import { SpaceTimeChart, PathLayer } from '../';
 import { MouseTracker } from './lib/components';
 import { OPERATIONAL_POINTS, PATHS } from './lib/paths';
 import {
@@ -14,13 +15,10 @@ import {
   X_ZOOM_LEVEL,
   Y_ZOOM_LEVEL,
 } from './lib/utils';
-import { SpaceTimeChart, PathLayer } from '../';
 import { CanvasContext } from '../lib/context';
 import { type Point } from '../lib/types';
 import { getDiff } from '../utils/vectors';
 
-import './lib/tailwind-mockup.css';
-
 const ScreenshotButton = () => {
   const { captureCanvases } = useContext(CanvasContext);
 

diff --git a/ui-spacetimechart/src/stories/paths-interactions.stories.tsx b/ui-spacetimechart/src/stories/paths-interactions.stories.tsx
@@ -4,13 +4,13 @@ import type { Meta } from '@storybook/react';
 import cx from 'classnames';
 import { keyBy } from 'lodash';
 
+import { SpaceTimeChart, PathLayer } from '../';
 import { OPERATIONAL_POINTS, PATHS } from './lib/paths';
 import { X_ZOOM_LEVEL, Y_ZOOM_LEVEL, zoom } from './lib/utils';
-import { SpaceTimeChart, PathLayer } from '../';
 import { type HoveredItem, type PathData, type Point } from '../lib/types';
 import { getDiff } from '../utils/vectors';
 
-import './lib/tailwind-mockup.css';
+import '@osrd-project/ui-spacetimechart/dist/theme.css';
 
 function delayPath<T extends PathData>(path: T, newTimeOrigin: number): T {
   const delay = newTimeOrigin - path.points[0].time;

diff --git a/ui-spacetimechart/src/stories/performances.stories.tsx b/ui-spacetimechart/src/stories/performances.stories.tsx
@@ -4,14 +4,14 @@ import { type Meta } from '@storybook/react';
 import cx from 'classnames';
 import { random, range } from 'lodash';
 
+import { SpaceTimeChart, PathLayer } from '../';
 import { getPaths, type PATHS } from './lib/paths';
 import { X_ZOOM_LEVEL, Y_ZOOM_LEVEL, zoom } from './lib/utils';
-import { SpaceTimeChart, PathLayer } from '../';
 import { KILOMETER, MINUTE } from '../lib/consts';
 import { type OperationalPoint, type Point } from '../lib/types';
 import { getDiff } from '../utils/vectors';
 
-import './lib/tailwind-mockup.css';
+import '@osrd-project/ui-spacetimechart/dist/theme.css';
 
 const DATE_OFFSET = +new Date('2024/01/01');
 const COLORS = [

diff --git a/ui-spacetimechart/src/stories/scroll-navigation.stories.tsx b/ui-spacetimechart/src/stories/scroll-navigation.stories.tsx
@@ -4,15 +4,15 @@ import type { Meta } from '@storybook/react';
 import cx from 'classnames';
 import { keyBy } from 'lodash';
 
+import { SpaceTimeChart, PathLayer } from '../';
 import { OPERATIONAL_POINTS, PATHS } from './lib/paths';
 import { X_ZOOM_LEVEL, Y_ZOOM_LEVEL, zoom } from './lib/utils';
-import { SpaceTimeChart, PathLayer } from '../';
 import { type HoveredItem, type Point } from '../lib/types';
 import { isPathOnScreen } from '../utils/geometry';
 import { getSpaceAtTime } from '../utils/scales';
 import { getDiff } from '../utils/vectors';
 
-import './lib/tailwind-mockup.css';
+import '@osrd-project/ui-spacetimechart/dist/theme.css';
 
 const PATHS_DICT = keyBy(PATHS, 'id');
 

diff --git a/ui-spacetimechart/src/stories/stage-interactions.stories.tsx b/ui-spacetimechart/src/stories/stage-interactions.stories.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import type { Meta } from '@storybook/react';
 import cx from 'classnames';
 
+import { SpaceTimeChart, PathLayer } from '../';
 import { OPERATIONAL_POINTS, PATHS } from './lib/paths';
 import {
   MAX_X_ZOOM,
@@ -12,12 +13,9 @@ import {
   X_ZOOM_LEVEL,
   Y_ZOOM_LEVEL,
 } from './lib/utils';
-import { SpaceTimeChart, PathLayer } from '../';
 import { type Point } from '../lib/types';
 import { getDiff } from '../utils/vectors';
 
-import './lib/tailwind-mockup.css';
-
 type WrapperProps = {
   xPan: boolean;
   yPan: boolean;

diff --git a/ui-spacetimechart/src/styles/main.css b/ui-spacetimechart/src/styles/main.css
@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
diff --git a/ui-spacetimechart/tailwind.config.js b/ui-spacetimechart/tailwind.config.js
@@ -0,0 +1,6 @@
+import osrdUiPreset from '../tailwind-preset.js';
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [osrdUiPreset],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		const generateBasePostcssConfig = require('../postcss-base.config.cjs');
		module.exports = generateBasePostcssConfig();