feat: add support for C, C++, and Java languages with corresponding configurations and UI components

code-editor/package.json

@@ -10,8 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-tabs": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "devicons-react": "^1.4.0",
     "lucide-react": "^0.469.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -20,6 +25,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@shikijs/monaco": "^1.26.1",
     "@types/node": "^22.10.5",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
@@ -30,6 +36,7 @@
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
     "postcss": "^8.4.49",
+    "shiki": "^1.26.1",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",

code-editor/src/App.tsx

@@ -1,5 +1,80 @@
+import {
+  DEFAULT_FILES,
+  DEFAULT_EDITOR_THEME,
+  DEFAULT_EDITOR_LANGUAGE,
+} from "@/config";
+import { useState } from "react";
+import { highlighter } from "@/lib/shiki";
+import { Bot, CodeXml } from "lucide-react";
+import { shikiToMonaco } from "@shikijs/monaco";
+import { DiffEditor, Editor, Monaco } from "@monaco-editor/react";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 function App() {
-  return null;
+  const [language, setLanguage] = useState(DEFAULT_EDITOR_LANGUAGE);
+  const [theme, setTheme] = useState(DEFAULT_EDITOR_THEME);
+  const file = DEFAULT_FILES[language];
+
+  return (
+    <div className="h-screen bg-[#282c34] dark overflow-hidden">
+      <Tabs defaultValue="code-editor" className="h-full pt-2">
+        <ScrollArea>
+          <TabsList className="gap-1 bg-transparent px-4">
+            <TabsTrigger
+              value="code-editor"
+              className="rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none"
+            >
+              <CodeXml
+                className="-ms-0.5 me-1.5 opacity-60"
+                size={16}
+                strokeWidth={2}
+                aria-hidden="true"
+              />
+              Code
+            </TabsTrigger>
+            <TabsTrigger
+              value="diff-editor"
+              className="500 rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none"
+            >
+              <Bot
+                className="-ms-0.5 me-1.5 opacity-60"
+                size={16}
+                strokeWidth={2}
+                aria-hidden="true"
+              />
+              AI Assistant
+            </TabsTrigger>
+          </TabsList>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+        <TabsContent value="code-editor" className="h-full">
+          <Editor
+            theme={theme}
+            path={file.path}
+            defaultLanguage={file.language}
+            defaultValue={file.value}
+            options={{ automaticLayout: true, minimap: { enabled: false } }}
+            beforeMount={(monaco: Monaco) => {
+              shikiToMonaco(highlighter, monaco);
+            }}
+          />
+        </TabsContent>
+        <TabsContent value="diff-editor" className="h-full">
+          <DiffEditor
+            theme={theme}
+            language={file.language}
+            original={file.value}
+            modified={file.value}
+            options={{ automaticLayout: true, minimap: { enabled: false } }}
+            beforeMount={(monaco: Monaco) => {
+              shikiToMonaco(highlighter, monaco);
+            }}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
 }
 
 export default App;

code-editor/src/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

code-editor/src/components/ui/select.tsx

@@ -0,0 +1,157 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

code-editor/src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

code-editor/src/config/index.ts

@@ -0,0 +1,43 @@
+import { SupportedEditorLanguage } from "@/constants/languages";
+
+export const DEFAULT_EDITOR_THEME = "vitesse-dark";
+
+export const DEFAULT_EDITOR_LANGUAGE: SupportedEditorLanguage = "c";
+
+export const DEFAULT_FILES: Record<
+  SupportedEditorLanguage,
+  {
+    path: string;
+    language: SupportedEditorLanguage;
+    value: string;
+  }
+> = {
+  c: {
+    path: "playground/main.c",
+    language: "c",
+    value: `#include <stdio.h>
+int main() {
+  printf("Hello, World!");
+  return 0;
+}`,
+  },
+  cpp: {
+    path: "playground/main.cpp",
+    language: "cpp",
+    value: `#include <iostream>
+using namespace std;
+int main() {
+  cout << "Hello, World!";
+  return 0;
+}`,
+  },
+  java: {
+    path: "playground/Main.java",
+    language: "java",
+    value: `public class Main {
+  public static void main(String[] args) {
+      System.out.println("Hello, World!");
+  }
+}`,
+  },
+};

code-editor/src/constants/languages.ts

@@ -0,0 +1,24 @@
+import { COriginal, CplusplusOriginal, JavaOriginal } from "devicons-react";
+
+export const SUPPORTED_EDITOR_LANGUAGES = ["c", "cpp", "java"];
+
+export const SUPPORTED_EDITOR_LANGUAGES_CONFIG = {
+  c: {
+    id: "c",
+    label: "C",
+    icon: COriginal,
+  },
+  cpp: {
+    id: "cpp",
+    label: "C++",
+    icon: CplusplusOriginal,
+  },
+  java: {
+    id: "java",
+    label: "Java",
+    icon: JavaOriginal,
+  },
+};
+
+export type SupportedEditorLanguage =
+  (typeof SUPPORTED_EDITOR_LANGUAGES)[number];

code-editor/src/constants/themes.ts

@@ -0,0 +1,202 @@
+export const SUPPORTED_EDITOR_THEMES = [
+  {
+    id: "andromeeda",
+    label: "Andromeeda",
+  },
+  {
+    id: "aurora-x",
+    label: "Aurora X",
+  },
+  {
+    id: "ayu-dark",
+    label: "Ayu Dark",
+  },
+  {
+    id: "catppuccin-frappe",
+    label: "Catppuccin Frappé",
+  },
+  {
+    id: "catppuccin-latte",
+    label: "Catppuccin Latte",
+  },
+  {
+    id: "catppuccin-macchiato",
+    label: "Catppuccin Macchiato",
+  },
+  {
+    id: "catppuccin-mocha",
+    label: "Catppuccin Mocha",
+  },
+  {
+    id: "dark-plus",
+    label: "Dark Plus",
+  },
+  {
+    id: "dracula",
+    label: "Dracula",
+  },
+  {
+    id: "dracula-soft",
+    label: "Dracula Soft",
+  },
+  {
+    id: "everforest-dark",
+    label: "Everforest Dark",
+  },
+  {
+    id: "everforest-light",
+    label: "Everforest Light",
+  },
+  {
+    id: "github-dark",
+    label: "GitHub Dark",
+  },
+  {
+    id: "github-light",
+    label: "GitHub Light",
+  },
+  {
+    id: "github-light-default",
+    label: "GitHub Light Default",
+  },
+  {
+    id: "github-light-high-contrast",
+    label: "GitHub Light High Contrast",
+  },
+  {
+    id: "houston",
+    label: "Houston",
+  },
+  {
+    id: "kanagawa-dragon",
+    label: "Kanagawa Dragon",
+  },
+  {
+    id: "kanagawa-lotus",
+    label: "Kanagawa Lotus",
+  },
+  {
+    id: "kanagawa-wave",
+    label: "Kanagawa Wave",
+  },
+  {
+    id: "laserwave",
+    label: "Laserwave",
+  },
+  {
+    id: "light-plus",
+    label: "Light Plus",
+  },
+  {
+    id: "material-theme",
+    label: "Material Theme",
+  },
+  {
+    id: "material-theme-darker",
+    label: "Material Theme Darker",
+  },
+  {
+    id: "material-theme-lighter",
+    label: "Material Theme Lighter",
+  },
+  {
+    id: "material-theme-ocean",
+    label: "Material Theme Ocean",
+  },
+  {
+    id: "material-theme-palenight",
+    label: "Material Theme Palenight",
+  },
+  {
+    id: "min-dark",
+    label: "Min Dark",
+  },
+  {
+    id: "min-light",
+    label: "Min Light",
+  },
+  {
+    id: "monokai",
+    label: "Monokai",
+  },
+  {
+    id: "night-owl",
+    label: "Night Owl",
+  },
+  {
+    id: "nord",
+    label: "Nord",
+  },
+  {
+    id: "one-dark-pro",
+    label: "One Dark Pro",
+  },
+  {
+    id: "one-light",
+    label: "One Light",
+  },
+  {
+    id: "plastic",
+    label: "Plastic",
+  },
+  {
+    id: "poimandres",
+    label: "Poimandres",
+  },
+  {
+    id: "red",
+    label: "Red",
+  },
+  {
+    id: "rose-pine",
+    label: "Rosé Pine",
+  },
+  {
+    id: "rose-pine-dawn",
+    label: "Rosé Pine Dawn",
+  },
+  {
+    id: "rose-pine-moon",
+    label: "Rosé Pine Moon",
+  },
+  {
+    id: "slack-dark",
+    label: "Slack Dark",
+  },
+  {
+    id: "slack-ochin",
+    label: "Slack Ochin",
+  },
+  {
+    id: "snazzy-light",
+    label: "Snazzy Light",
+  },
+  {
+    id: "solarized-dark",
+    label: "Solarized Dark",
+  },
+  {
+    id: "solarized-light",
+    label: "Solarized Light",
+  },
+  {
+    id: "synthwave-84",
+    label: "Synthwave '84",
+  },
+  {
+    id: "tokyo-night",
+    label: "Tokyo Night",
+  },
+  {
+    id: "vitesse-black",
+    label: "Vitesse Black",
+  },
+  {
+    id: "vitesse-dark",
+    label: "Vitesse Dark",
+  },
+  {
+    id: "vitesse-light",
+    label: "Vitesse Light",
+  },
+];

code-editor/src/lib/shiki.ts

@@ -0,0 +1,16 @@
+import { createHighlighter } from "shiki";
+import { SUPPORTED_EDITOR_THEMES } from "@/constants/themes";
+import { SUPPORTED_EDITOR_LANGUAGES_CONFIG } from "@/constants/languages";
+
+const SUPPORTED_EDITOR_THEMES_ID = SUPPORTED_EDITOR_THEMES.map(
+  (theme) => theme.id
+);
+
+const SUPPORTED_EDITOR_LANGUAGES_ID = Object.values(
+  SUPPORTED_EDITOR_LANGUAGES_CONFIG
+).map((language: { id: string }) => language.id);
+
+export const highlighter = await createHighlighter({
+  themes: SUPPORTED_EDITOR_THEMES_ID,
+  langs: SUPPORTED_EDITOR_LANGUAGES_ID,
+});