idealjs · cqh963852 · Dec 19, 2023 · Dec 19, 2023 · Dec 19, 2023 · Dec 19, 2023
diff --git a/.eslintrc b/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "extends": ["react-app"],
+  "extends": ["next/core-web-vitals"],
   "parserOptions": {
     "babelOptions": {
       "parserOpts": {

diff --git a/.github/workflows/ci-check.yml b/.github/workflows/ci-check.yml
@@ -13,40 +13,12 @@ jobs:
     name: CI Check
     runs-on: ubuntu-latest
     steps:
-      - name: Generate a token
-        id: generate_token
-        uses: tibdex/github-app-token@b62528385c34dbc9f38e5f4225ac829252d1ea92
-        with:
-          app_id: ${{ secrets.IDEALJS_BOT_APP_ID }}
-          private_key: ${{ secrets.IDEALJS_BOT_PRIVATE_KEY }}
       - uses: actions/checkout@v3
-        with:
-          token: ${{ steps.generate_token.outputs.token }}
       - uses: actions/setup-node@v3
         with:
           node-version: 18
           cache: yarn
       - name: Install Dependencies
         run: yarn install --immutable
       - name: Test Packages
-        run: yarn workspaces foreach run test
-      - name: Build Packages
-        run: yarn workspaces foreach run build
-      - name: Install Playwright Browsers
-        run: yarn workspace website playwright install --with-deps
-      - name: Run Playwright tests
-        id: e2e
-        run: yarn workspace website test:e2e
-      - name: Update Playwright Snapshot
-        if: ${{ failure() && steps.e2e.conclusion == 'failure' }}
-        run: yarn workspace website test:e2e -u
-      - name: Upload playwright-report
-        uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          path: apps/website/playwright-report/
-          retention-days: 30
-      - uses: stefanzweifel/git-auto-commit-action@v4
-        if: ${{ failure() && steps.e2e.conclusion == 'failure' }}
-        with:
-          commit_message: 'chore: update image snapshot'
+        run: yarn workspaces foreach -A run test
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.tabSize": 2
 }
diff --git a/apps/editor/.gitignore b/apps/editor/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/editor/index.html b/apps/editor/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/editor/package.json b/apps/editor/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "editor",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@idealjs/eslint-plugin-sapling": "^0.1.23",
+    "@types/lodash.debounce": "^4.0.9",
+    "@vanilla-extract/css": "^1.14.0",
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/vite-plugin": "^3.9.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
+  },
+  "dependencies": {
+    "@idealjs/camphora-styled": "workspace:^",
+    "@idealjs/dnd-core": "workspace:^",
+    "@idealjs/layout-manager": "^3.0.0",
+    "@idealjs/sapling": "^0.1.23",
+    "clsx": "^2.0.0",
+    "csstype": "^3.1.2",
+    "lodash.debounce": "^4.0.8",
+    "nanoid": "^5.0.3"
+  }
+}
diff --git a/apps/editor/public/vite.svg b/apps/editor/public/vite.svg
diff --git a/apps/editor/src/App.css.ts b/apps/editor/src/App.css.ts
@@ -0,0 +1,6 @@
+import { vars } from "@idealjs/camphora-styled";
+import { style } from "@vanilla-extract/css";
+
+export const appStyle = style({
+  backgroundColor: vars.colors.base[200],
+});
diff --git a/apps/editor/src/App.tsx b/apps/editor/src/App.tsx
@@ -0,0 +1,45 @@
+import {
+  full,
+  lightTheme,
+  relative,
+  runtimeComponent,
+  runtimeContainer,
+  screen,
+} from "@idealjs/camphora-styled";
+import clsx from "clsx";
+
+import { appStyle } from "./App.css";
+import Menubar from "./components/Menubar";
+import { menuItems } from "./configs";
+import Layout from "./features/Layout";
+import NewFileDialog from "./features/NewFileModal";
+import Welcome from "./features/Welcome";
+
+const App = () => {
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      console.log("test test");
+    }
+  });
+  return (
+    <div
+      style={{
+        height: "100vh",
+        width: "100vw",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+      }}
+      className={clsx(screen, relative, appStyle, lightTheme)}
+    >
+      <Menubar menuItems={menuItems} />
+      <div className={clsx(full, runtimeContainer)}>
+        <Welcome className={runtimeComponent} />
+        <Layout className={runtimeComponent} />
+      </div>
+      <NewFileDialog />
+    </div>
+  );
+};
+
+export default App;
diff --git a/apps/editor/src/components/FileExplorer.tsx b/apps/editor/src/components/FileExplorer.tsx
@@ -0,0 +1,5 @@
+const FileExplorer = () => {
+  return <div style={{ marginTop: "24px" }}>FileExplorer</div>;
+};
+
+export default FileExplorer;
diff --git a/apps/editor/src/components/Menubar/Menu.tsx b/apps/editor/src/components/Menubar/Menu.tsx
@@ -0,0 +1,72 @@
+import { card, cardShadow, menu } from "@idealjs/camphora-styled";
+import { createRef } from "@idealjs/sapling";
+import clsx from "clsx";
+
+import { popover, popoverBottom, popoverContent } from "../../popover.css";
+import MenuItem, { IMenuItem } from "./MenuItem";
+import { menuCard, menuLabel, subMenus } from "./style.css";
+
+interface IProps {
+  menuItem: IMenuItem;
+}
+
+export const showMenu = createRef<HTMLLIElement | null>(null);
+
+const Menu = (props: IProps) => {
+  const { menuItem } = props;
+  const ref = createRef<HTMLLIElement>(null);
+
+  return (
+    <li
+      ref={ref}
+      tabIndex={0}
+      className={() =>
+        clsx(menu, popover, {
+          showSubMenus: showMenu.current == ref.current,
+        })
+      }
+      onBlur={() => {
+        showMenu.current = null;
+      }}
+    >
+      <div
+        className={menuLabel}
+        onClick={() => {
+          if (showMenu.current === ref.current) {
+            ref.current?.blur();
+            showMenu.current = null;
+            return;
+          }
+          showMenu.current = ref.current;
+        }}
+        onMouseEnter={() => {
+          if (showMenu.current != null) {
+            ref.current?.focus();
+            showMenu.current = ref.current;
+          }
+        }}
+      >
+        {menuItem.label}
+      </div>
+      <ul
+        className={clsx(
+          menu,
+          menuCard,
+          subMenus,
+          card,
+          cardShadow,
+          popoverContent,
+          popoverBottom
+        )}
+      >
+        {menuItem.subMenus != null
+          ? menuItem.subMenus.map((menu) => {
+              return <MenuItem key={menu.label} item={menu} />;
+            })
+          : null}
+      </ul>
+    </li>
+  );
+};
+
+export default Menu;
diff --git a/apps/editor/src/components/Menubar/MenuItem.tsx b/apps/editor/src/components/Menubar/MenuItem.tsx
@@ -0,0 +1,56 @@
+import {
+  card,
+  cardShadow,
+  hoverAction,
+  hoverReaction,
+  menu,
+  menuItem,
+} from "@idealjs/camphora-styled";
+import clsx from "clsx";
+
+import { popover, popoverContent } from "../../popover.css";
+import { menuCard, menuItemLabel, subMenus } from "./style.css";
+
+export interface IMenuItem {
+  label: string;
+  subMenus?: IMenuItem[];
+  onClick?: (event: MouseEvent) => void;
+}
+
+interface IProps {
+  item: IMenuItem;
+}
+
+const MenuItem = (props: IProps) => {
+  const { item } = props;
+  return (
+    <li className={clsx(menuItem, popover, hoverAction)}>
+      <div
+        tabIndex={item.subMenus == null ? 0 : undefined}
+        className={menuItemLabel}
+        onMouseDown={item.onClick}
+      >
+        {item.label}
+      </div>
+      {item.subMenus != null ? (
+        <ul
+          className={clsx(
+            menu,
+            menuCard,
+            subMenus,
+            popoverContent,
+            card,
+            cardShadow,
+            hoverReaction
+          )}
+        >
+          {item.subMenus.map((menu) => {
+            return <MenuItem key={menu.label} item={menu} />;
+          })}
+        </ul>
+      ) : null}
+    </li>
+  );
+};
+
+export default MenuItem;
diff --git a/apps/editor/src/components/Menubar/index.tsx b/apps/editor/src/components/Menubar/index.tsx
@@ -0,0 +1,29 @@
+import { menu, menuVertical } from "@idealjs/camphora-styled";
+import { PanelNode } from "@idealjs/layout-manager";
+import clsx from "clsx";
+
+import { newFileDialogRef } from "../../features/NewFileModal";
+import { addPanel } from "../../features/store/layout";
+import { PAGE_TYPE } from "../Panel";
+import Menu from "./Menu";
+import { IMenuItem } from "./MenuItem";
+import { menuBar } from "./style.css";
+
+
+
+interface IProps {
+  menuItems: IMenuItem[];
+}
+
+const Menubar = (props: IProps) => {
+  const { menuItems } = props;
+  return (
+    <ul className={clsx(menu, menuVertical, menuBar)}>
+      {menuItems.map((menuItem) => {
+        return <Menu key={menuItem.label} menuItem={menuItem} />;
+      })}
+    </ul>
+  );
+};
+
+export default Menubar;