🔧(tooling-presentation) bootstrap storybook for ats frontend (#596)

* 🔧(tooling-presentation) bootstrap storybook for ats frontend

* 💎(presentation-frontend) add dsfr tokens and foundation storybook story

* 💎(presentation-frontend) add tailwind v4

* 💚(tooling-presentation) add dedicated storybook job in ci

Author: ShallowRed

.github/workflows/web.yml

@@ -33,6 +33,21 @@ jobs:
       - name: Build frontend
         run: pnpm run build
 
+  storybook-web:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./src/web
+    steps:
+      - uses: actions/checkout@v5
+      - uses: ./.github/actions/setup-pnpm-node
+        with:
+          lock-file-path: src/web/pnpm-lock.yaml
+      - name: Install frontend dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build Storybook
+        run: pnpm --filter csplab-frontend build-storybook
+
   lint-web:
     needs: build-web
     runs-on: ubuntu-latest

.gitignore

@@ -94,3 +94,6 @@ ARCHITECTURE*
 !.vscode/settings.json
 !.vscode/extensions.json
 **/iframe_figures/
+
+storybook-static/
+**/iframe_figures/

Makefile

@@ -158,6 +158,14 @@ frontend-lint-fix: ## lint and fix frontend sources
 	cd $(WEB_DIR) && pnpm --filter $(FRONTEND_FILTER) lint:fix
 .PHONY: frontend-lint-fix
 
+storybook: ## run Storybook dev server (port 6006)
+	cd $(WEB_DIR) && pnpm --filter $(FRONTEND_FILTER) storybook
+.PHONY: storybook
+
+storybook-build: ## build Storybook static output
+	cd $(WEB_DIR) && pnpm --filter $(FRONTEND_FILTER) build-storybook
+.PHONY: storybook-build
+
 ### RUN
 run-notebook: ## run the notebook service
 	$(NOTEBOOK_UV) jupyter lab --ip=0.0.0.0 --port=8888 --no-browser