front: import osrd-ui

.github/dependabot.yml

@@ -56,9 +56,16 @@ updates:
       rjsf:
         patterns:
           - "@rjsf/*"
+      storybook:
+        patterns:
+          - "storybook"
+          - "@storybook/*"
       turf:
         patterns:
           - "@turf/*"
+      typescript-eslint:
+        patterns:
+          - "@typescript-eslint/*"
       vitest:
         patterns:
           - "vitest"

.github/workflows/osrd-ui-publish.yml

@@ -0,0 +1,40 @@
+name: Publish osrd-ui on Release
+
+on:
+  release:
+    types: [released]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '23'
+
+      - name: Authenticate with Registry
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Publish
+        run: |
+          TAG=${GITHUB_REF/refs\/tags\//}
+          VERSION=${TAG/v/}
+          cd front
+          npm ci
+          cd ui
+          npx lerna publish ${VERSION} --yes --no-push --no-git-tag-version

.github/workflows/osrd-ui-website.yml

@@ -0,0 +1,40 @@
+name: Publish osrd-ui website
+
+on:
+  workflow_dispatch:
+  release:
+    types: [created]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '23'
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Build
+        run: |
+          cd front
+          npm ci
+          npm run build --workspaces --if-present
+
+      - name: Deploy to GitHub Pages
+        uses: crazy-max/ghaction-github-pages@v4
+        with:
+          repo: OpenRailAssociation/osrd-ui
+          target_branch: gh-pages
+          build_dir: front/ui/storybook/storybook-static
+          jekyll: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ui-icons-optimize.yml

@@ -0,0 +1,39 @@
+on:
+  # This workflow will be laucnhed manually and will trigger a new commit
+  # on the branc that is specified.
+  workflow_dispatch:
+
+name: Optimize SVGs on ui-icons
+jobs:
+  optimize:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.10'
+          cache: 'pip'
+      - run: pip install -r front/ui/ui-icons/requirements.txt
+      - run: |
+          for icon in front/ui/ui-icons/icons/*; do
+            echo "::group::Optimizing $icon"
+            picosvg $icon --output_file $icon
+            echo "::endgroup::"
+          done
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '23'
+      - run: |
+          cd front/ui/ui-icons
+          npm install
+          npm run svgo
+
+      - uses: EndBug/add-and-commit@v9
+        with:
+          add: 'front/ui/ui-icons/icons'
+          message: 'Optimize SVGs'
+          author_email: [email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

front/.eslintrc

@@ -7,7 +7,8 @@
     "src/common/api/osrdGatewayApi.ts",
     "public",
     "build",
-    "playwright-report"
+    "playwright-report",
+    "ui"
   ],
   "extends": [
     "plugin:vitest/recommended",

front/.prettierignore

@@ -6,3 +6,4 @@ src/common/api/osrdGatewayApi.ts
 src/modules/trainschedule/components/ImportTrainSchedule/rollingstock_opendata2osrd.json
 src/reducers/osrdconf/infra_schema.json
 src/utils/__tests__/assets/*.json
+/ui

front/README.md

@@ -2,9 +2,26 @@
 
 ## How to launch project for development purpose?
 
+### Inside of Docker
+
+A Docker Compose override is provided in `docker/docker-compose.front.yml` to
+run the frontend in watch mode together with the rest of the OSRD stack. The
+osrd-compose script can be used to start OSRD in this mode:
+
+    ./osrd-compose dev-front build
+    ./osrd-compose up -d
+
+The first time the container starts up, the osrd-ui library will be missing.
+This will trigger some build errors, which should go away as soon as osrd-ui
+gets built. Restarting the front container helps getting rid of lingering
+ESLint errors.
+
+### Outside of Docker
+
 - go inside `/front/` from OSRD main project
 - you'll need [`npm`](https://nodejs.org/en/download/package-manager)
 - exec `npm install` (hope you have a good connection and a good cup of tea)
+- exec `npm run build-ui`
 - exec `npm start` (perhaps you'll need `NODE_OPTIONS="--openssl-legacy-provider"` if your node
   version is too new)
 - enjoy

front/docker/Dockerfile.devel

@@ -23,4 +23,4 @@ ENV VITE_OSRD_GIT_DESCRIBE=${OSRD_GIT_DESCRIBE}
 # Start the app
 COPY docker/dev-entrypoint.sh /
 ENTRYPOINT ["/dev-entrypoint.sh"]
-CMD ["sh", "-c", "id && npm install && exec npm run start-container"]
+CMD ["sh", "-c", "id && npm install && (npm run build-ui & npm run start-container)"]