feat: init uni mode ui layout

examples/package.json

@@ -50,6 +50,7 @@
  "@univerjs/thread-comment-ui": "workspace:*",
  "@univerjs/ui": "workspace:*",
  "@univerjs/uniscript": "workspace:*",
+ "@univerjs/uniui": "workspace:*",
  "@wendellhu/redi": "0.15.4",
  "clsx": "^2.1.1",
  "monaco-editor": "0.49.0",

examples/src/data/sheets/demo/default-workbook-data-demo1.ts

@@ -18,7 +18,7 @@ import type { IWorkbookData } from '@univerjs/core';
 import { BooleanNumber, BorderStyleTypes, LocaleType } from '@univerjs/core';
 
 export const DEFAULT_WORKBOOK_DATA_DEMO1: IWorkbookData = {
- id: 'workbook-01',
+ id: 'workbook-001',
  locale: LocaleType.ZH_CN,
  name: 'universheet',
  sheetOrder: ['sheet-0003'],

examples/src/uni/main.ts

@@ -25,12 +25,13 @@ import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula';
 import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt';
 import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
 import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor';
-import { UniverUIPlugin } from '@univerjs/ui';
+import { UniverUniUIPlugin } from '@univerjs/uniui';
 import { UniverDebuggerPlugin } from '@univerjs/debugger';
 import { FUniver } from '@univerjs/facade';
 import { UniverDrawingPlugin } from '@univerjs/drawing';
 import { DEFAULT_WORKBOOK_DATA_DEMO } from '../data/sheets/demo/default-workbook-data-demo';
 import { enUS } from '../locales';
+import { DEFAULT_DOCUMENT_DATA_CN } from '../data';
 
 /* eslint-disable-next-line node/prefer-global/process */
 const IS_E2E: boolean = !!process.env.IS_E2E;
@@ -52,7 +53,7 @@ univer.registerPlugin(UniverDocsPlugin, {
 });
 univer.registerPlugin(UniverFormulaEnginePlugin);
 univer.registerPlugin(UniverRenderEnginePlugin);
-univer.registerPlugin(UniverUIPlugin, {
+univer.registerPlugin(UniverUniUIPlugin, {
  container: 'app',
 });
 
@@ -70,6 +71,8 @@ univer.registerPlugin(UniverSheetsFormulaPlugin);
 // create univer sheet instance
 if (!IS_E2E) {
  univer.createUnit(UniverInstanceType.UNIVER_SHEET, DEFAULT_WORKBOOK_DATA_DEMO);
+ // univer.createUnit(UniverInstanceType.UNIVER_SHEET, DEFAULT_WORKBOOK_DATA_DEMO1);
+ univer.createUnit(UniverInstanceType.UNIVER_DOC, DEFAULT_DOCUMENT_DATA_CN);
 }
 
 // debugger plugin

packages-experimental/README.md

@@ -0,0 +1,3 @@
+# Experimental Packages
+
+Experimental packages in development. These packages are not meant to be published to npm or used in production.

packages-experimental/uniui/README.md

@@ -0,0 +1,16 @@
+# @univerjs/uniui
+
+[![npm version](https://img.shields.io/npm/v/@univerjs/uniui)](https://npmjs.org/packages/@univerjs/uniui)
+[![license](https://img.shields.io/npm/l/@univerjs/uniui)](https://img.shields.io/npm/l/@univerjs/uniui)
+
+## Introduction
+
+> TODO: Introduction
+
+## Usage
+
+### Installation
+
+```shell
+npm i @univerjs/uniui
+```

packages-experimental/uniui/package.json

@@ -0,0 +1,91 @@
+{
+ "name": "@univerjs/uniui",
+ "version": "0.0.1",
+ "private": true,
+ "description": "",
+ "author": "DreamNum <[email protected]>",
+ "license": "Apache-2.0",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/univer"
+ },
+ "homepage": "https://univer.ai",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/dream-num/univer"
+ },
+ "bugs": {
+ "url": "https://github.com/dream-num/univer/issues"
+ },
+ "keywords": [],
+ "sideEffects": [
+ "**/*.css"
+ ],
+ "exports": {
+ ".": "./src/index.ts",
+ "./*": "./src/*"
+ },
+ "main": "./lib/cjs/index.js",
+ "module": "./lib/es/index.js",
+ "types": "./lib/types/index.d.ts",
+ "publishConfig": {
+ "access": "public",
+ "main": "./lib/cjs/index.js",
+ "module": "./lib/es/index.js",
+ "exports": {
+ ".": {
+ "import": "./lib/es/index.js",
+ "require": "./lib/cjs/index.js",
+ "types": "./lib/types/index.d.ts"
+ },
+ "./*": {
+ "import": "./lib/es/*",
+ "require": "./lib/cjs/*",
+ "types": "./lib/types/index.d.ts"
+ },
+ "./lib/*": "./lib/*"
+ }
+ },
+ "directories": {
+ "lib": "lib"
+ },
+ "files": [
+ "lib"
+ ],
+ "scripts": {
+ "test": "vitest run",
+ "test:watch": "vitest",
+ "coverage": "vitest run --coverage",
+ "lint:types": "tsc --noEmit",
+ "build": "tsc && vite build"
+ },
+ "peerDependencies": {
+ "@univerjs/core": "workspace:*",
+ "@univerjs/design": "workspace:*",
+ "@univerjs/engine-render": "workspace:*",
+ "@univerjs/ui": "workspace:*",
+ "@wendellhu/redi": ">=0.12.13",
+ "clsx": ">=2.0.0",
+ "react": ">=16.9.0",
+ "rxjs": ">=7.0.0"
+ },
+ "dependencies": {
+ "@univerjs/icons": "^0.1.46",
+ "rc-util": "^5.43.0"
+ },
+ "devDependencies": {
+ "@univerjs/core": "workspace:*",
+ "@univerjs/design": "workspace:*",
+ "@univerjs/engine-render": "workspace:*",
+ "@univerjs/shared": "workspace:*",
+ "@univerjs/ui": "workspace:*",
+ "@wendellhu/redi": "^0.15.2",
+ "clsx": "^2.1.1",
+ "less": "^4.2.0",
+ "react": "18.3.1",
+ "rxjs": "^7.8.1",
+ "typescript": "^5.4.5",
+ "vite": "^5.2.11",
+ "vitest": "^1.6.0"
+ }
+}

packages-experimental/uniui/src/controllers/uniui-desktop.controller.tsx

@@ -0,0 +1,110 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http:https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Disposable, LifecycleService, LifecycleStages, toDisposable } from '@univerjs/core';
+import { IRenderManagerService } from '@univerjs/engine-render';
+import type { IWorkbenchOptions } from '@univerjs/ui';
+import { BuiltInUIPart, CanvasPopup, FloatDom, ILayoutService, IUIPartsService } from '@univerjs/ui';
+import type { IDisposable } from '@wendellhu/redi';
+import { Inject, Injector, Optional } from '@wendellhu/redi';
+import { connectInjector } from '@wendellhu/redi/react-bindings';
+import React from 'react';
+import { delay, filter, take } from 'rxjs';
+import { render as createRoot, unmount } from 'rc-util/lib/React/render';
+
+import { UniWorkbench } from '../views/workbench/UniWorkbench';
+
+const STEADY_TIMEOUT = 3000;
+
+export class UniverUniUIController extends Disposable {
+ constructor(
+ @IRenderManagerService private readonly _renderManagerService: IRenderManagerService,
+ @Inject(Injector) private readonly _injector: Injector,
+ @Inject(LifecycleService) private readonly _lifecycleService: LifecycleService,
+ @IUIPartsService private readonly _uiPartsService: IUIPartsService,
+ @Optional(ILayoutService) private readonly _layoutService?: ILayoutService
+ ) {
+ super();
+ this._initBuiltinComponents();
+ }
+
+ bootstrapWorkbench(options: IWorkbenchOptions): void {
+ this.disposeWithMe(
+ bootstrap(this._injector, options, () => {
+ this._lifecycleService.lifecycle$.pipe(
+ filter((lifecycle) => lifecycle === LifecycleStages.Ready),
+ delay(300),
+ take(1)
+ ).subscribe(() => {
+ this._lifecycleService.stage = LifecycleStages.Rendered;
+ setTimeout(() => this._lifecycleService.stage = LifecycleStages.Steady, STEADY_TIMEOUT);
+ });
+ })
+ );
+ }
+
+ private _initBuiltinComponents() {
+ this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(CanvasPopup, this._injector)));
+ this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(FloatDom, this._injector)));
+ }
+}
+
+function bootstrap(
+ injector: Injector,
+ options: IWorkbenchOptions,
+ callback: () => void
+): IDisposable {
+ let mountContainer: HTMLElement;
+
+ const container = options.container;
+ if (typeof container === 'string') {
+ const containerElement = document.getElementById(container);
+ if (!containerElement) {
+ mountContainer = createContainer(container);
+ } else {
+ mountContainer = containerElement;
+ }
+ } else if (container instanceof HTMLElement) {
+ mountContainer = container;
+ } else {
+ mountContainer = createContainer('univer');
+ }
+
+ const ConnectedApp = connectInjector(UniWorkbench, injector);
+ function render() {
+ createRoot(
+ <ConnectedApp
+ {...options}
+ mountContainer={mountContainer}
+ onRendered={callback}
+ />,
+ mountContainer
+ );
+ }
+
+ render();
+
+ return toDisposable(() => {
+ unmount(mountContainer);
+ });
+}
+
+function createContainer(id: string): HTMLElement {
+ const element = document.createElement('div');
+ element.id = id;
+ // FIXME: the element is not append to the DOM tree. So it won't be rendered.
+ return element;
+}

packages/docs-ui/src/views/doc-background/DocBackground.tsx → packages-experimental/uniui/src/index.ts

@@ -14,15 +14,4 @@
  * limitations under the License.
  */
 
-import React from 'react';
-
-import styles from './index.module.less';
-
-/**
- * Doc standalone background
- */
-export const DocBackground = () => {
- return (
- <div className={styles.docsUiCanvasBackground}></div>
- );
-};
+export { UniverUniUIPlugin } from './plugin';