ui-trackoccupancydiagram: setup sub-repo

Co-authored-by: Uriel-Sautron <[email protected]>
Signed-off-by: Yohh <[email protected]>

Author: Yohh

package-lock.json

@@ -17,6 +17,7 @@
     "ui-warped-map",
     "ui-manchette",
     "ui-manchette-with-spacetimechart",
+    "ui-trackoccupancydiagram",
     "storybook"
   ],
   "engines": {

package.json

@@ -5,9 +5,9 @@ import { mergeConfig } from 'vite';
 /** @type { import('@storybook/html-vite').StorybookConfig } */
 const config: StorybookConfig = {
   stories: [
-    '../stories/**/stories.ts',
-    '../../**/src/**/*.mdx',
+    // TODO: remove this when every stories are migrated to `@osrd-project/stroybook/stories/`
     '../../**/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: [
     getAbsolutePath('@storybook/addon-links'),

storybook/.storybook/main.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {
+  TrackOccupancyManchette,
+  TrackOccupancyCanvas,
+} from '@osrd-project/ui-trackoccupancydiagram';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const TrackOccupancyDiagram = () => (
+  <div>
+    <TrackOccupancyManchette />
+    <TrackOccupancyCanvas />
+  </div>
+);
+
+const meta: Meta<typeof TrackOccupancyDiagram> = {
+  title: 'TrackOccupancyDiagram/Rendering',
+  component: TrackOccupancyDiagram,
+  decorators: [(Story) => <Story />],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+
+  render: () => <TrackOccupancyDiagram />,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TrackOccupancyDiagram>;
+
+export const TrackOccupancyDiagramStoryDefault: Story = {
+  args: {},
+};

storybook/stories/TrackOccupancyDiagram/TrackOccupancyDiagram.stories.tsx

@@ -1,8 +1,8 @@
 {
   "extends": "../tsconfig.base.json",
-  "include": [".storybook/*.tsx", "./stories/**/*"],
+  "include": [".storybook/*.tsx", "stories/**/*"],
   "compilerOptions": {
-    "rootDir": "./src",
+    "rootDir": "./",
     "outDir": "./dist",
     "declarationDir": "./dist"
   }

storybook/stories/just-a-test.mdx

@@ -0,0 +1,58 @@
+{
+  "name": "@osrd-project/ui-trackoccupancydiagram",
+  "version": "0.0.1-dev",
+  "license": "LGPL-3.0-or-later",
+  "bugs": "https://github.com/osrd-project/osrd-ui/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/osrd-project/osrd-ui.git",
+    "directory": "ui-trackoccupancydiagram"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "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"
+    }
+  },
+  "scripts": {
+    "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 --max-warnings 0",
+    "lint:fix": "eslint src --fix"
+  },
+  "dependencies": {
+    "@types/chroma-js": "^2.4.4",
+    "chroma-js": "^3.1.1",
+    "classnames": "^2.5.1",
+    "tailwindcss": "^3.4.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.37",
+    "postcss-assets": "^6.0.0",
+    "postcss-import": "^16.0.0",
+    "postcss-preset-env": "^10.0.5",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-serve": "^1.1.1"
+  }
+}

storybook/tsconfig.json

@@ -0,0 +1,3 @@
+import generateBaseRollupConfig from '../rollup-base.config.js';
+
+export default generateBaseRollupConfig('osrdcore', ['react']);

ui-trackoccupancydiagram/README.md

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const TrackOccupancyCanvas = () => <div>TrackOccupancyCanvas</div>;
+
+export default TrackOccupancyCanvas;

ui-trackoccupancydiagram/package.json

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const TrackOccupancyManchette = () => <div>TrackOccupancyManchette</div>;
+
+export default TrackOccupancyManchette;

ui-trackoccupancydiagram/rollup.config.js

@@ -0,0 +1,6 @@
+import './styles/main.css';
+
+import TrackOccupancyCanvas from './components/TrackOccupancyCanvas';
+import TrackOccupancyManchette from './components/TrackOccupancyManchette';
+
+export { TrackOccupancyCanvas, TrackOccupancyManchette };

ui-trackoccupancydiagram/src/__tests__/utils.spec.ts

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

ui-trackoccupancydiagram/src/components/TrackOccupancyCanvas.tsx

@@ -0,0 +1,6 @@
+import osrdUiPreset from '../tailwind-preset.js';
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [osrdUiPreset],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+};

ui-trackoccupancydiagram/src/components/TrackOccupancyManchette.tsx

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.base.json",
+  "include": ["./src/**/*"],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "declarationDir": "./dist",
+    "typeRoots": ["./node_modules/@types", "../raw.d.ts"]
+  }
+}