feat: add code component example

package.json

@@ -19,6 +19,7 @@
     "generate": "node scripts/generate",
     "editor": "INTEGRATION=editor npm run dev",
     "fs": "INTEGRATION=filesystem npm run dev",
+    "code": "INTEGRATION=code npm run dev",
     "diff-viewer": "INTEGRATION=diff-viewer npm run dev",
     "build": "node scripts/build",
     "build:all": "yarn run bundle && yarn run generate && yarn run build",

packages/core/src/api/renderApp.tsx

@@ -1,6 +1,7 @@
 import { REPORT_NAME, RuntimeConfig } from '@codeblitzjs/ide-sumi-core';
 import { getDebugLogger, IReporterService, localize } from '@opensumi/ide-core-common';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import cls from 'classnames';
+import React, { CSSProperties, useEffect, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { useConstant } from '../core/hooks';
 import { IPropsService, PropsServiceImpl } from '../core/props.service';
@@ -13,6 +14,9 @@ import { IAppInstance, IConfig } from './types';
 export interface IAppRendererProps extends IConfig {
   onLoad?(app: IAppInstance): void;
   Landing?: React.ComponentType<LandingProps>;
+
+  style?: CSSProperties;
+  className?: string;
 }
 
 export const renderApp = (domElement: HTMLElement, props: IAppRendererProps) => {
@@ -117,7 +121,13 @@ export const AppRenderer: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...o
   );
 
   return (
-    <Root {...state} theme={themeType} Landing={Landing} className={rootClassName}>
+    <Root
+      {...state}
+      theme={themeType}
+      Landing={Landing}
+      className={cls(rootClassName, opts.className)}
+      style={opts.style}
+    >
       {appElementRef.current ? <appElementRef.current /> : null}
     </Root>
   );

packages/core/src/core/Root.tsx

@@ -16,7 +16,7 @@ export const Root: FC<RootProps> = (props) => {
   return (
     <codeblitz-root
       class={`codeblitz-root ${themeType ? `codeblitz-${themeType}` : ''} ${props.className ?? ''}`}
-      style={{ width: '100%', height: '100%' }}
+      style={{ width: '100%', height: '100%', ...props.style }}
       data-meta-version={VERSION}
     >
       {(props.status === 'loading' || props.status === 'error') && <LandingComponent {...props} />}

packages/core/src/core/modules.ts

@@ -63,8 +63,8 @@ export const modules: ModuleConstructor[] = [
   WorkspaceModule,
   ExtensionStorageModule,
   StorageModule,
-  OpenedEditorModule,
-  OutlineModule,
+  // OpenedEditorModule,
+  // OutlineModule,
   PreferencesModule,
   ToolbarModule,
   WebviewModule,

packages/core/src/core/types.ts

@@ -11,4 +11,5 @@ export interface LandingProps {
 export interface RootProps extends LandingProps {
   Landing?: ComponentType<LandingProps>;
   children?: React.ReactNode;
+  style?: React.CSSProperties;
 }

packages/startup/package.json

@@ -11,15 +11,15 @@
     "opensumi codeblitzjs"
   ],
   "dependencies": {
-    "@ant-design/icons": "^4.0.0",
+    "@ant-design/icons": "^5.4.0",
     "@codeblitzjs/ide-cli": "workspace:*",
     "@codeblitzjs/ide-code-api": "workspace:*",
     "@codeblitzjs/ide-code-service": "workspace:*",
     "@codeblitzjs/ide-common": "workspace:*",
     "@codeblitzjs/ide-core": "workspace:*",
     "@codeblitzjs/ide-i18n": "workspace:*",
     "@codeblitzjs/ide-sumi-core": "workspace:*",
-    "antd": "^4.0.0",
+    "antd": "^5.20.2",
     "lodash": "^4.17.21",
     "tslib": "^2.2.0"
   },

packages/startup/src/code/code.module.less

@@ -0,0 +1,48 @@
+.codeblitz-dialog {
+  :global(.right-slot) {
+    div[class^='tab_panel'] {
+      border-right: 1px solid #00000000 !important;
+    }
+    div[class^='tab_panel'] {
+      border-left: 1px solid #00000000 !important;
+    }
+    #explorer div[class^='file_tree'] {
+      font-size: 14px;
+    }
+  }
+
+  :global {
+    .ant-modal-content {
+      padding: 0;
+      overflow: hidden;
+    }
+
+    .kt-scrollbar .scrollbar-decoration-vertical {
+      display: none;
+    }
+  }
+
+  :global {
+    div[class*='tab_panel'] {
+      &::before {
+        content: none;
+      }
+    }
+    #main-horizontal-ai {
+      padding-top: 40px !important;
+      padding-right: 10px !important;
+    }
+
+    .codeblitz-dark {
+      background-color: transparent !important;
+    }
+
+    div[data-menu-id='activityBar/extra'] {
+      display: none;
+    }
+
+    #opensumi-quickpick {
+      margin-top: 110px;
+    }
+  }
+}

packages/startup/src/code/component.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export function TitlePlaceHolder() {
+  return <div style={{
+    // height: 10,
+  }} />;
+}