docs(site): update docs

Author: xiejay97

packages/site/executors/build-base/files/resources.json

@@ -30,7 +30,8 @@
         "Overview": "Overview",
         "Getting Started": "Getting Started",
         "Dynamic Theme": "Dynamic Theme",
-        "Internationalization": "Internationalization"
+        "Internationalization": "Internationalization",
+        "GlobalConfiguration": "GlobalConfiguration"
       },
       "menu": {
         "components-group": {},
@@ -71,7 +72,8 @@
         "Overview": "概述",
         "Getting Started": "快速开始",
         "Dynamic Theme": "动态主题",
-        "Internationalization": "国际化"
+        "Internationalization": "国际化",
+        "GlobalConfiguration": "全局配置"
       },
       "menu": {
         "components-group": {},

packages/site/src/app/routes/docs/Internationalization/Internationalization.md

@@ -1,6 +1,6 @@
 # Internationalization
 
-Here is the [full configuration](https://github.com/DevCloudFE/react-devui/blob/main/packages/ui/src/hooks/i18n/resources.json).
+Here is the [full configuration](https://github.com/DevCloudFE/react-devui/blob/main/packages/ui/src/components/root/resources.json).
 
 ## Modify language
 
@@ -25,9 +25,9 @@ export default function App() {
 }
 ```
 
-## Modify language display
+## Modify modification
 
-Support to modify the language display:
+Partially modifications are supported:
 
 ```tsx
 import type { DRootProps } from '@react-devui/ui';
@@ -68,8 +68,10 @@ export default function App() {
   const rootContext = useMemo<DRootProps['context']>(
     () => ({
       i18n: {
+        lang: 'ja-JP',
         resources: {
           'ja-JP': { DatePicker: { Now: '今' } },
+          ...otherConfig,
         },
       },
     }),

packages/site/src/app/routes/docs/Internationalization/Internationalization.zh-CN.md

@@ -1,6 +1,6 @@
 # 国际化
 
-这里是[完整配置](https://github.com/DevCloudFE/react-devui/blob/main/packages/ui/src/hooks/i18n/resources.json)。
+这里是[完整配置](https://github.com/DevCloudFE/react-devui/blob/main/packages/ui/src/components/root/resources.json)。
 
 ## 修改语言
 
@@ -25,9 +25,9 @@ export default function App() {
 }
 ```
 
-## 修改语言显示
+## 部分修改
 
-支持修改语言显示：
+支持部分修改：
 
 ```tsx
 import type { DRootProps } from '@react-devui/ui';
@@ -69,7 +69,11 @@ export default function App() {
     () => ({
       i18n: {
         resources: {
-          'ja-JP': { DatePicker: { Now: '今' } },
+          lang: 'ja-JP',
+          'ja-JP': {
+            DatePicker: { Now: '今' },
+            ...otherConfig,
+          },
         },
       },
     }),

packages/site/src/app/routes/docs/dynamic-theme/DynamicTheme.md

@@ -20,32 +20,3 @@ export default function App() {
   }, [theme]);
 }
 ```
-
-## Variable conflict
-
-All our css variables have namespaces added, the default is `rd`, if our css variables conflict with your project, you can modify `$rd-namespace`.
-
-Note: `$rd-namespace` also affects stylesheets, so you need to modify the `DRoot` configuration:
-
-```scss
-$rd-namespace: 'app';
-```
-
-```tsx
-import type { DRootProps } from '@react-devui/ui';
-
-import { useMemo } from 'react';
-
-import { DRoot } from '@react-devui/ui';
-
-export default function App() {
-  const rootContext = useMemo<DRootProps['context']>(
-    () => ({
-      namespace: 'app',
-    }),
-    []
-  );
-
-  return <DRoot context={rootContext}>Some content...</DRoot>;
-}
-```

packages/site/src/app/routes/docs/dynamic-theme/DynamicTheme.zh-CN.md

@@ -20,32 +20,3 @@ export default function App() {
   }, [theme]);
 }
 ```
-
-## 变量冲突
-
-我们的 css 变量均添加了命名空间，默认为 `rd`，如果我们的 css 变量与您项目冲突，可以修改 `$rd-namespace`。
-
-注意：`$rd-namespace` 同样影响样式表，所以您需要修改 `DRoot` 的配置：
-
-```scss
-$rd-namespace: 'app';
-```
-
-```tsx
-import type { DRootProps } from '@react-devui/ui';
-
-import { useMemo } from 'react';
-
-import { DRoot } from '@react-devui/ui';
-
-export default function App() {
-  const rootContext = useMemo<DRootProps['context']>(
-    () => ({
-      namespace: 'app',
-    }),
-    []
-  );
-
-  return <DRoot context={rootContext}>Some content...</DRoot>;
-}
-```

packages/site/src/app/routes/docs/faq/FAQ.md

@@ -0,0 +1,34 @@
+# FAQ
+
+Some frequently asked questions are listed below:
+
+## Does the component library contain side effects?
+
+The component library only covers the global `box-sizing`, which is currently the choice of most people:
+
+```scss
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+```
+
+## When components are controlled
+
+We agree that `undefined` represents that the component is in an uncontrolled state, and other values represent that the component is controlled.
+
+## What is the general null value of the controlled component
+
+The null value of the controlled component is divided into the following situations:
+
+- String type: `''`
+- number: `null`
+- array: `[]`
+- Other: `null`
+
+## How to modify `dayjs` configuration
+
+First of all, we should ensure that the project is the only `dayjs` globally, so the `dayjs` of the component library is placed in `peerDependencies`.
+
+You only need to configure `dayjs` in your project, the best practice is to create a `startup` to ensure some configuration at the beginning, please refer to [startup](https://github.com/DevCloudFE/react-devui/tree/main/packages/platform/src/startup).

packages/site/src/app/routes/docs/faq/FAQ.zh-CN.md

@@ -0,0 +1,34 @@
+# FAQ
+
+下面列出了一些常见问题：
+
+## 组件库是否含有副作用
+
+组件库仅样式覆盖了全局的 `box-sizing`，这也是目前绝大多数人的选择：
+
+```scss
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+```
+
+## 组件何时受控
+
+我们约定 `undefined` 代表组件为非受控状态，其它值均代表组件受控。
+
+## 受控组件空值一般是什么
+
+受控组件空值分为下面几种情况：
+
+- 字符串类型：`''`
+- 数字: `null`
+- 数组: `[]`
+- 其它: `null`
+
+## 如何修改 `dayjs` 配置
+
+首先我们应该确保项目是全局唯一的 `dayjs`，所以组件库的 `dayjs` 是放在 `peerDependencies` 中。
+
+您只需要在您的项目中配置 `dayjs` 即可，最佳实践是创建一个 `startup` 确保最开始的时候进行一些配置，可参考 [startup](https://github.com/DevCloudFE/react-devui/tree/main/packages/platform/src/startup) 。

packages/site/src/app/routes/docs/getting-started/GettingStarted.md

@@ -33,7 +33,7 @@ Import on demand:
 
 ## Import the root component
 
-You need to import `DRoot` on the root component of your project (like `App.tsx`), `DRoot` is required and it provides global configuration.
+You need to import `DRoot` on the root component of your project (like `App.tsx`), `DRoot` is required and it provides [global configuration](/docs/GlobalConfiguration).
 
 It is recommended to configure the `layout` parameter, which provides the layout information of your page, so that we can automatically do some work (such as updating the popup position).
 

packages/site/src/app/routes/docs/getting-started/GettingStarted.zh-CN.md

@@ -33,7 +33,7 @@ npm install @react-devui/ui @react-devui/icons @react-devui/hooks @react-devui/u
 
 ## 引入根组件
 
-您需要在项目的根组件（如`App.tsx`）上引入 `DRoot`，`DRoot` 是必须的并且它提供了全局配置。
+您需要在项目的根组件（如`App.tsx`）上引入 `DRoot`，`DRoot` 是必须的并且它提供了[全局配置](/docs/GlobalConfiguration)。
 
 建议配置 `layout` 参数，它提供了您页面的布局信息，这样我们就可以自动完成某些工作（如更新弹窗位置）。
 

packages/site/src/app/routes/docs/global-configuration/GlobalConfiguration.md

@@ -0,0 +1,31 @@
+# Global Configuration
+
+Through our root component `DRoot`, you can configure our component library very conveniently, and all configuration items are listed below:
+
+```tsx
+interface DConfigContextData {
+  // Namespace, affects `className`, e.g. set value to 'app', then 'rd-button' will become 'app-button'
+  // Note: Need to modify the style sheet `$rd-namespace: 'app'` synchronously!
+  namespace: string;
+  // The global configuration of the component, the component Prop priority is: component > global configuration > default
+  // For example: `{ DEmpty: { dDescription: 'Global configuration' } }` will modify the default description of the empty component
+  componentConfigs: Partial<DComponentConfig>;
+  // [Internationalization](/docs/Internationalization)
+  i18n: {
+    lang: DLang;
+    resources: typeof resources;
+  };
+  // Page layout
+  layout: {
+    // Scroll container
+    pageScrollEl?: DRefExtra;
+    // Content container
+    contentResizeEl?: DRefExtra;
+  };
+  // Whether to monitor global scrolling will cause unnecessary calculations, use with caution!
+  // Calculations like popup position are mostly expected if the page layout is set up correctly
+  // But if the page often contains nested scrolling, it is undoubtedly difficult to handle various position
+  // calculations based on the scrolling events of each scrolling container. At this time, global scrolling can be monitored
+  globalScroll: boolean;
+}
+```