Add Canon styles

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/app/package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@backstage/app-defaults": "workspace:^",
+    "@backstage/canon": "workspace:^",
     "@backstage/catalog-model": "workspace:^",
     "@backstage/cli": "workspace:^",
     "@backstage/config": "workspace:^",

packages/app/src/App.tsx

@@ -86,6 +86,10 @@ import {
   UserNotificationSettingsCard,
 } from '@backstage/plugin-notifications';
 
+// Canon styles
+import '@backstage/canon/css/core.css';
+import '@backstage/canon/css/components.css';
+
 const app = createApp({
   apis,
   icons: {

packages/canon/package.json

@@ -35,6 +35,8 @@
     "lint": "backstage-cli package lint",
     "prepack": "backstage-cli package prepack",
     "postpack": "backstage-cli package postpack",
+    "postinstall": "yarn setup-dev",
+    "setup-dev": "bash scripts/setup-dev.sh",
     "start": "storybook dev -p 6006",
     "test": "backstage-cli package test"
   },

packages/canon/scripts/setup-dev.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+
+# Script to create a symlinked css directory for development
+
+# Exit on error
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PACKAGE_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
+
+# Ensure target CSS directory exists
+mkdir -p "$PACKAGE_ROOT/css"
+
+# Remove any existing content in the css directory
+rm -rf "$PACKAGE_ROOT/css/"*
+
+echo "Creating symlinks for CSS files..."
+
+# Create symlinks for each CSS file
+for cssFile in "$PACKAGE_ROOT/src/css/"*.css; do
+  filename=$(basename "$cssFile")
+  ln -sf "../src/css/$filename" "$PACKAGE_ROOT/css/$filename"
+  echo "- Linked: $filename"
+done
+
+echo "Setup complete. CSS files are now accessible from both paths:"
+echo "- @backstage/canon/src/css/..."
+echo "- @backstage/canon/css/..."
+