feat: Add Markdown View Plugin with React and Chakra UI

- Implemented main application structure with App and View components.
- Integrated React Markdown for rendering Markdown content.
- Added API function to fetch Markdown content from the backend.
- Created a custom Chakra UI theme to align with Airflow's design.
- Configured Vite for building the application with appropriate asset paths.
- Included a sample Markdown file for initial content display.
- Set up TypeScript configuration for better development experience.

markdown_view_plugin/ui/src/theme.ts

@@ -0,0 +1,71 @@
+import { extendTheme, type ThemeConfig } from '@chakra-ui/react';
+
+// Basic color mode config
+const config: ThemeConfig = {
+  initialColorMode: 'system',
+  useSystemColorMode: true,
+};
+
+// Define some basic colors similar to Airflow's scheme
+// This is a simplified version. For full consistency, you'd replicate more from Airflow's core theme.ts
+const colors = {
+  airflow: {
+    50: '#EBF8FF',  // Lightest blue
+    100: '#BEE3F8', 
+    200: '#90CDF4',
+    300: '#63B3ED',
+    400: '#4299E1', // Primary blue
+    500: '#3182CE',
+    600: '#2B6CB0',
+    700: '#2C5282',
+    800: '#2A4365',  // Darkest blue
+    900: '#1A365D',
+  },
+  success: {
+    500: '#38A169', // Green
+  },
+  error: {
+    500: '#E53E3E', // Red
+  },
+};
+
+const theme = extendTheme({
+  config,
+  colors,
+  styles: {
+    global: (props: any) => ({
+      body: {
+        bg: props.colorMode === 'dark' ? 'gray.800' : 'gray.50',
+        color: props.colorMode === 'dark' ? 'whiteAlpha.900' : 'gray.800',
+        height: '100%', // Ensure body takes full height
+        margin: 0,
+      },
+      html: {
+        height: '100%',
+      },
+      '#root': { // Ensure root div also takes full height
+        height: '100%',
+      }
+    }),
+  },
+  components: {
+    Button: {
+      baseStyle: {
+        // Example: fontWeight: 'bold',
+      },
+      variants: {
+        solid: (props: any) => ({
+          bg: props.colorMode === 'dark' ? 'airflow.300' : 'airflow.500',
+          color: props.colorMode === 'dark' ? 'gray.800' : 'white',
+          _hover: {
+            bg: props.colorMode === 'dark' ? 'airflow.400' : 'airflow.600',
+          }
+        }),
+      },
+    },
+    // You can add more component-specific style overrides here if needed
+    // For example, for Markdown components if View.tsx styling needs to be theme-aware
+  },
+});
+
+export default theme;