docs: remove 1.0.0 and add 1.x

website/docs/guides/extend-workbench.md

@@ -9,17 +9,18 @@ sidebar_label: Workbench
 
 ![molecule](/img/guides/workbench-ui.png)
 
-We divide the Workbench UI into **six** modules, including [MenuBar](#menubar), [ActivityBar](#activitybar), [Sidebar](#sidebar), [Editor](#editor), [Panel](#panel), [StatusBar](#statusbar):
+We divide the Workbench UI into **seven** modules, including [MenuBar](#menubar), [ActivityBar](#activitybar), [Sidebar](#sidebar), [Editor](#editor), [Panel](#panel), [StatusBar](#statusbar) and [AuxiliaryBar](#auxiliarybarsupported-in-v130)(supported in `v1.3.0+`):
 
 -   **MenuBar**: For managing the menu bar in workbench, like **File**, **Edit**, **Selection**, **View** and so on.
 -   **ActivityBar**: For showing the **active bar** in workbench, like [Explorer](./extend-builtin-ui#explorer), [Search](./extend-builtin-ui#search) and other bars. It's noticed that the ActivityBar should **cooperate** with other modules in general. For example, the Sidebar is going to show the correspond panel when switching the ActivityBar.
 -   **Sidebar**: In general, it's as a significant navigator part placed in the left of workbench like the built-in [Explorer](./extend-builtin-ui#explorer).
 -   **Editor**: For editing some data in tabs. In general, we can **edit the codes** in Editor. Or you can render your own editor UI. Molecule will have an **Entry** in **Editor** when without the tabs. Obviously, the Entry Page supports **customized**.
 -   **Panel**: In general, it's placed on the below of the Editor for rendering some panels like [Problems](./extend-builtin-ui#problems), [Output](extend-builtin-ui#output), **Terminal**, and so on.
--   **StatusBar**: It's placed on the bottom of Workbench for rendering the **status infomations**. For example, the **Language** informations of current file in Editor, or the informations about the **Columns** and **Line** of cursor, or the [Notification](./extend-builtin-ui#notification).
+-   **StatusBar**: It's placed on the bottom of Workbench for rendering the **status informations**. For example, the **Language** informations of current file in Editor, or the informations about the **Columns** and **Line** of cursor, or the [Notification](./extend-builtin-ui#notification).
+-   **AuxiliaryBar**: Generally, it's auxiliary for Sidebar. We could put some primary data in Sidebar, and secondary data in AuxiliaryBar.
 
 :::tip
-There is do not real function with the isolated module, which is only for pure rendering. If you want to achieve some specific commerial scenarios, you should integrate one with other modules, like integrating **ActivityBar** with **Sidebar**, or intergrating **FolderTree** with **Editor** and so on.
+There is do not real function with the isolated module, which is only for pure rendering. If you want to achieve some specific commercial scenarios, you should integrate one with other modules, like integrating **ActivityBar** with **Sidebar**, or integrating **FolderTree** with **Editor** and so on.
 
 Besides, for reducing the work of developing in UI, we have a majority of [**built-in components**](./extend-builtin-ui), refer to [参考](./extend-builtin-ui) about the detail usage.
 :::
@@ -32,7 +33,7 @@ To begin with a scenario:
 
 ![Extend Workbench](/img/guides/extend-workbench.png)
 
-As the picture indicated, we imitate a simple UI for **managing databse**. In this scenario, we will respectively extend the six modules, including the [MenuBar](#menubar), [ActivityBar](#activitybar), [Sidebar](#sidebar), [Editor](#editor), [Panel](#panel), [StatusBar](#statusbar).
+As the picture indicated, we imitate a simple UI for **managing database**. In this scenario, we will respectively extend the six modules, including the [MenuBar](#menubar), [ActivityBar](#activitybar), [Sidebar](#sidebar), [Editor](#editor), [Panel](#panel), [StatusBar](#statusbar).
 
 :::tip
 The code demos in this part are all based on the [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo) in [Quick Start](../quick-start).
@@ -69,7 +70,7 @@ export class DataSourceExtension implements IExtension {
 }
 ```
 
-As the above, we delcare a `DataSourceExtension` implemented the `IExtension`, and in the `initUI` method, we use `molecule.sidebar.add`, `molecule.activityBar.add` respectively to add a new UI component. And in the `dispose` method, we **remove** the UI component added in `initUI`.
+As the above, we declare a `DataSourceExtension` implemented the `IExtension`, and in the `initUI` method, we use `molecule.sidebar.add`, `molecule.activityBar.add` respectively to add a new UI component. And in the `dispose` method, we **remove** the UI component added in `initUI`.
 
 After that, let's see how to extend the ActivityBar.
 
@@ -89,7 +90,7 @@ export const dataSourceActivityBar: IActivityBarItem = {
 };
 ```
 
-The `id` property of the `dataSourceActivityBar` is **DataSource**, whose `icon` is **databse**, and define a `sortIndex` property for adjusting the order of **activityBar**.
+The `id` property of the `dataSourceActivityBar` is **DataSource**, whose `icon` is **database**, and define a `sortIndex` property for adjusting the order of **activityBar**.
 
 ### [SideBar](../api/interfaces/molecule.ISidebarService)
 
@@ -109,9 +110,9 @@ export const dataSourceSidebar: ISidebarPane = {
 };
 ```
 
-The differencies with the `IActivityBarItem` object is that we define a `render` function in Sidebar, which should return a `ReactNode` component. The `DataSourceView` component is a **business component** defined by our business.
+The differences with the `IActivityBarItem` object is that we define a `render` function in Sidebar, which should return a `ReactNode` component. The `DataSourceView` component is a **business component** defined by our business.
 
-The complete example can refer to [molecule-examples](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo/src/extensions/dataSource)
+The complete example can refer to [molecule-examples](https://github.com/DTStack/molecule-examples/tree/main/molecule-demo/src/extensions/dataSource)
 
 :::caution
 The id property of `dataSourceSidebar` and `dataSourceActivityBar` in example are both used the `DATA_SOURCE_ID`, which mainly for rendering the content of `dataSourceSidebar` correctly in **Sidebar** when switching **ActivityBar**.
@@ -200,7 +201,7 @@ export class TerminalExtension implements IExtension {
 
 We can add `terminalPanel` into Panel view via [`molecule.panel.add`](../api/interfaces/molecule.IPanelService#add) in the `activate` method.
 
-The complete example can refer to [Terminal](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo/src/extensions/terminal).
+The complete example can refer to [Terminal](https://github.com/DTStack/molecule-examples/tree/main/molecule-demo/src/extensions/terminal).
 
 ### [StatusBar](../api/interfaces/molecule.IStatusBarService)
 
@@ -267,5 +268,46 @@ The layout of Menubar is in `vertical` mode as default. We can change it to `hor
 
 The more detail about Menubar, please refer to [MenuBar API](../api/interfaces/molecule.IMenuBarService).
 
+### [AuxiliaryBar](../api/interfaces/molecule.IAuxiliaryBarService)(Supported in v1.3.0+)
+
+There are two modes for auxiliaryBar, which is `default` and `tabs` defined in [`IAuxiliaryBarMode`](../api/namespaces/molecule.model#iauxiliarybarmode).
+
+The default mode is same as sideBar. You can call [`molecule.layout.setAuxiliaryBar`](../api/interfaces/molecule.ILayoutService#setauxiliarybar) to toggle the visibility for the bar.
+
+The tabs mode is a little different with default. First of all, you call change the mode by [`molecule.auxiliaryBar.setMode`](../api/interfaces/molecule.IAuxiliaryBarService#setmode). And once you change the mode to `tabs`, the interactive of auxiliaryBar will like a tab.
+
+```ts
+molecule.auxiliaryBar.setMode('tabs');
+```
+
+While setting mode to tabs, you should set the tabs' title too by calling [`molecule.auxiliaryBar.addAuxiliaryBar`](../api/interfaces/molecule.IAuxiliaryBarService#addauxiliarybar)
+
+```ts
+molecule.auxiliaryBar.setMode('tabs');
+molecule.auxiliaryBar.addAuxiliaryBar([
+    {
+        key: ~~(Math.random() * 10) + new Date().getTime(),
+        title: '任务属性',
+    },
+]);
+```
+
+And whatever the mode is, the above code would never render the content area which we called `children`(treated as the React Component's children). If you want render children, you should subscribe the click event of auxiliaryBar and call [`molecule.auxiliaryBar.setChildren`](../api/interfaces/molecule.IAuxiliaryBarService#setchildren) to render children.
+
+```tsx
+molecule.auxiliaryBar.onTabClick(() => {
+    const tab = molecule.auxiliaryBar.getCurrentTab();
+    const TabContent = () => {
+        return <div>Do anything you like</div>;
+    };
+
+    if (tab) {
+        molecule.auxiliaryBar.setChildren(<TabContent />);
+    }
+
+    molecule.layout.setAuxiliaryBar(!tab);
+});
+```
+
 [workbench-url]: ../api/namespaces/molecule#workbench
-[demo-url]: https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo
+[demo-url]: https://github.com/DTStack/molecule-examples/tree/main/molecule-demo

website/docs/quick-start.md

@@ -8,47 +8,46 @@ sidebar_position: 2
 
 > -   Node.js version: **Node.js 12.13.0 +**
 > -   React.js version: **React.js 16.14.0 +**
-> -   [Yarn](https://yarnpkg.com/en/) - Recommend to use **Yarn** as package management
+> -   [Yarn](https://yarnpkg.com/en/)
+> -   [pnpm](https://pnpm.io/) - Recommend to use **Pnpm** as package management
 
 :::info
 use the `node -v` command to view the current Node version. It is recommended to use [nvm](https://github.com/nvm-sh/nvm) on Mac systems to manage multiple versions of Node.js.
 :::
 
 ## Create a Project in One Line
 
-We provide a command line tool to create a project quickly. It uses [create-react-app](https://github.com/facebook/create-react-app) to create this project.
+Your can use CLI to create a Project with **TypeScript** and a scaffold which you can choose your like.
 
 ### npx
 
 ```bash
-npx @dtinsight/create molecule-demo
-```
-
-Or create the project based on the **TypeScript** template
-
-```bash
-npx @dtinsight/create molecule-demo -t
+npx @dtinsight/create
 ```
 
 _[npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f)_
 
 ### Yarn
 
 ```bash
-yarn create @dtinsight/ molecule-demo
+yarn create @dtinsight/
 ```
 
-Or create the project based on the **TypeScript** template
+_`yarn create` is available in Yarn 0.25+_
+
+### pnpm
 
 ```bash
-yarn create @dtinsight/ molecule-demo -t
+pnpm create @dtinsight/
 ```
 
-_`yarn create` is available in Yarn 0.25+_
+_✔ We strongly recommend to use pnpm._
 
 ### Startup Project
 
-After waiting a second, you could see `Happy coding!😊` in terminal. And then just following the guide to start up your project.
+After waiting a second, you could see `Downloading application successfully at` in terminal.
+
+And then just going into the folder and install dependencies.
 
 ## Create a Project Manually
 
@@ -97,19 +96,14 @@ export default App;
 
 `extensions` are extensions that need to be customized.
 
-And open the `src/index.js` file and change it to the following:
-
-```diff title="src/index.js"
-root.render(
--  <React.StrictMode>
-    <App />
--  </React.StrictMode>
-);
-```
-
-:::caution
-It's **noticed** that the Molecule for now is not compatible with `React.StrictMode`. So we should remove `React.StrictMode` from `src/index.js`.
-:::
+<details>
+  <summary>Can work with React.StrictMode?</summary>
+  <div>
+    <div>Molecule can work with React.StrictMode since <code>v1.3.0</code></div>
+    <br />
+    <div>So check your version and if the version is under 1.3.0, remove the React.StrictMode in <code>src/index.js</code></div>
+  </div>
+</details>
 
 ### Startup Project
 
@@ -153,4 +147,4 @@ module.exports = function override(config, env) {
 };
 ```
 
-For the complete code example, please check the [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo) project.
+For the complete code example, please check the [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/molecule-demo) project.