From 0c40fa72c3c4c5b6640ea1cf085def171253b536 Mon Sep 17 00:00:00 2001 From: AI Christianson Date: Fri, 14 Mar 2025 15:09:22 -0400 Subject: [PATCH] style/hmr --- frontend/common/dist/index.js | 4 +- frontend/common/dist/styles/global.css | 27 +++++++++++ frontend/common/package.json | 4 +- .../src/components/DefaultAgentScreen.tsx | 2 +- frontend/common/src/index.ts | 5 +- frontend/web/vite.config.js | 46 ++++++++----------- 6 files changed, 57 insertions(+), 31 deletions(-) diff --git a/frontend/common/dist/index.js b/frontend/common/dist/index.js index 863663b..e06a60c 100644 --- a/frontend/common/dist/index.js +++ b/frontend/common/dist/index.js @@ -4,7 +4,7 @@ import './styles/global.css'; export * from './utils/types'; // Export utility functions export * from './utils'; -// Export all UI components +// Export UI components export * from './components/ui'; // Export timeline components export * from './components/TimelineStep'; @@ -12,7 +12,7 @@ export * from './components/TimelineFeed'; // Export session navigation components export * from './components/SessionDrawer'; export * from './components/SessionSidebar'; -// Export the main screen component +// Export main screens export * from './components/DefaultAgentScreen'; // Export the hello function (temporary example) export const hello = () => { diff --git a/frontend/common/dist/styles/global.css b/frontend/common/dist/styles/global.css index 3b8e0f9..836541c 100644 --- a/frontend/common/dist/styles/global.css +++ b/frontend/common/dist/styles/global.css @@ -917,6 +917,9 @@ video { .border-b { border-bottom-width: 1px; } +.border-b-2 { + border-bottom-width: 2px; +} .border-l { border-left-width: 1px; } @@ -929,6 +932,10 @@ video { .border-dashed { border-style: dashed; } +.border-blue-300 { + --tw-border-opacity: 1; + border-color: rgb(147 197 253 / var(--tw-border-opacity, 1)); +} .border-border { border-color: hsl(var(--border)); } @@ -1021,6 +1028,14 @@ video { --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } +.from-purple-100 { + --tw-gradient-from: #f3e8ff var(--tw-gradient-from-position); + --tw-gradient-to: rgb(243 232 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.to-blue-100 { + --tw-gradient-to: #dbeafe var(--tw-gradient-to-position); +} .to-purple-500 { --tw-gradient-to: #a855f7 var(--tw-gradient-to-position); } @@ -1483,6 +1498,10 @@ video { .data-\[state\=open\]\:duration-500[data-state="open"] { animation-duration: 500ms; } +.dark\:border-blue-700:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(29 78 216 / var(--tw-border-opacity, 1)); +} .dark\:border-gray-800:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(31 41 55 / var(--tw-border-opacity, 1)); @@ -1491,6 +1510,14 @@ video { --tw-border-opacity: 1; border-color: rgb(82 82 91 / var(--tw-border-opacity, 1)); } +.dark\:from-purple-900:is(.dark *) { + --tw-gradient-from: #581c87 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.dark\:to-blue-900:is(.dark *) { + --tw-gradient-to: #1e3a8a var(--tw-gradient-to-position); +} @media (min-width: 640px) { .sm\:max-w-md { diff --git a/frontend/common/package.json b/frontend/common/package.json index ff12aac..fb6e158 100644 --- a/frontend/common/package.json +++ b/frontend/common/package.json @@ -6,7 +6,9 @@ "types": "src/index.ts", "scripts": { "build": "tsc && postcss src/styles/global.css -o dist/styles/global.css", - "dev": "concurrently \"tsc --watch\" \"postcss src/styles/global.css -o dist/styles/global.css --watch\"", + "dev": "tsc --watch", + "watch:css": "postcss src/styles/global.css -o dist/styles/global.css --watch", + "watch": "concurrently \"npm run dev\" \"npm run watch:css\"", "prepare": "npm run build" }, "dependencies": { diff --git a/frontend/common/src/components/DefaultAgentScreen.tsx b/frontend/common/src/components/DefaultAgentScreen.tsx index fb34934..4123d03 100644 --- a/frontend/common/src/components/DefaultAgentScreen.tsx +++ b/frontend/common/src/components/DefaultAgentScreen.tsx @@ -89,7 +89,7 @@ export const DefaultAgentScreen: React.FC = () => { const headerContent = (

- RA-Aid + RA.Aid

diff --git a/frontend/common/src/index.ts b/frontend/common/src/index.ts index 6a63b0c..19ff8ab 100644 --- a/frontend/common/src/index.ts +++ b/frontend/common/src/index.ts @@ -7,7 +7,7 @@ export * from './utils/types'; // Export utility functions export * from './utils'; -// Export all UI components +// Export UI components export * from './components/ui'; // Export timeline components @@ -18,6 +18,9 @@ export * from './components/TimelineFeed'; export * from './components/SessionDrawer'; export * from './components/SessionSidebar'; +// Export main screens +export * from './components/DefaultAgentScreen'; + // Export the hello function (temporary example) export const hello = (): void => { console.log("Hello from @ra-aid/common"); diff --git a/frontend/web/vite.config.js b/frontend/web/vite.config.js index 082859f..dc00518 100644 --- a/frontend/web/vite.config.js +++ b/frontend/web/vite.config.js @@ -1,46 +1,40 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import path from 'path'; +import fs from 'fs'; + +// Get all component files from common package +const commonSrcDir = path.resolve(__dirname, '../common/src'); export default defineConfig({ - plugins: [ - react(), - ], + plugins: [react()], resolve: { - // Point to the source files instead of dist for development alias: { + // Direct alias to the source directory '@ra-aid/common': path.resolve(__dirname, '../common/src') - } + }, + preserveSymlinks: true }, optimizeDeps: { - // Force Vite to include these dependencies in its optimization - include: ['@ra-aid/common'], - // Tell Vite to respect our aliased packages instead of using node_modules for them - esbuildOptions: { - preserveSymlinks: true, - } + // Exclude the common package from optimization so it can trigger hot reload + exclude: ['@ra-aid/common'] }, server: { - hmr: { - // More verbose logging for HMR - overlay: true, - }, + hmr: true, watch: { - // Watch for changes in the common package - paths: ['../common/src/**'], - // Ensure changes in source files trigger a reload usePolling: true, + interval: 100, + // Make sure to explicitly NOT ignore the common package + ignored: [ + '**/node_modules/**', + '**/dist/**', + '!**/common/src/**' + ] } }, - css: { - // PostCSS configuration is loaded from postcss.config.js - // This ensures proper processing of Tailwind directives - devSourcemap: true, - }, build: { - // When building for production, we need to make sure the common package is built too commonjsOptions: { - transformMixedEsModules: true, - }, + transformMixedEsModules: true + } } }); \ No newline at end of file