From 243f9e244804bea85d9340cda1a38c5a3a96575b Mon Sep 17 00:00:00 2001
From: Junyi <mytharcher@users.noreply.github.com>
Date: Fri, 10 Mar 2023 17:42:15 +0800
Subject: [PATCH] docs(client): add variable docs (#1556)

---
 .../antd/variable/demos/demo1.tsx             | 42 +++++++++++++++++++
 .../antd/variable/demos/demo2.tsx             | 42 +++++++++++++++++++
 .../antd/variable/demos/demo3.tsx             | 42 +++++++++++++++++++
 .../schema-component/antd/variable/index.md   | 22 ++++++++++
 4 files changed, 148 insertions(+)
 create mode 100644 packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/variable/index.md

diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx
new file mode 100644
index 0000000000..218112ba1a
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx
@@ -0,0 +1,42 @@
+/**
+ * title: Variable.Input
+ */
+import { FormItem } from '@formily/antd';
+import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
+import React from 'react';
+
+const scope = [
+  { label: 'v1', value: 'v1' },
+  { label: 'nested', value: 'nested', children: [{ label: 'v2', value: 'v2'}] },
+];
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'string',
+      title: `替换模式`,
+      'x-decorator': 'FormItem',
+      'x-component': 'Variable.Input',
+      'x-component-props': {
+        scope,
+      },
+      // 'x-reactions': {
+      //   target: 'read',
+      //   fulfill: {
+      //     state: {
+      //       value: '{{$self.value}}',
+      //     },
+      //   },
+      // },
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ Variable, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};
diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx
new file mode 100644
index 0000000000..a6e8807e43
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx
@@ -0,0 +1,42 @@
+/**
+ * title: Variable.Input
+ */
+ import { FormItem } from '@formily/antd';
+ import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
+ import React from 'react';
+
+ const scope = [
+   { label: 'v1', value: 'v1' },
+   { label: 'nested', value: 'nested', children: [{ label: 'v2', value: 'v2'}] },
+ ];
+
+ const schema = {
+   type: 'object',
+   properties: {
+     input: {
+       type: 'string',
+       title: `表达式模式`,
+       'x-decorator': 'FormItem',
+       'x-component': 'Variable.TextArea',
+       'x-component-props': {
+         scope,
+       },
+       // 'x-reactions': {
+       //   target: 'read',
+       //   fulfill: {
+       //     state: {
+       //       value: '{{$self.value}}',
+       //     },
+       //   },
+       // },
+     },
+   },
+ };
+
+ export default () => {
+   return (
+     <SchemaComponentProvider components={{ Variable, FormItem }}>
+       <SchemaComponent schema={schema} />
+     </SchemaComponentProvider>
+   );
+ };
diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx
new file mode 100644
index 0000000000..c45692c986
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx
@@ -0,0 +1,42 @@
+/**
+ * title: Variable.Input
+ */
+ import { FormItem } from '@formily/antd';
+ import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
+ import React from 'react';
+
+ const scope = [
+   { label: 'v1', value: 'v1' },
+   { label: 'nested', value: 'nested', children: [{ label: 'v2', value: 'v2'}] },
+ ];
+
+ const schema = {
+   type: 'object',
+   properties: {
+     input: {
+       type: 'string',
+       title: `JSON 模式`,
+       'x-decorator': 'FormItem',
+       'x-component': 'Variable.JSON',
+       'x-component-props': {
+         scope,
+       },
+       // 'x-reactions': {
+       //   target: 'read',
+       //   fulfill: {
+       //     state: {
+       //       value: '{{$self.value}}',
+       //     },
+       //   },
+       // },
+     },
+   },
+ };
+
+ export default () => {
+   return (
+     <SchemaComponentProvider components={{ Variable, FormItem }}>
+       <SchemaComponent schema={schema} />
+     </SchemaComponentProvider>
+   );
+ };
diff --git a/packages/core/client/src/schema-component/antd/variable/index.md b/packages/core/client/src/schema-component/antd/variable/index.md
new file mode 100644
index 0000000000..00b667d56b
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/variable/index.md
@@ -0,0 +1,22 @@
+---
+nav:
+  path: /client
+group:
+  path: /schema-components
+---
+
+# Variable
+
+## Examples
+
+### `Variable.Input`
+
+<code src="./demos/demo1.tsx" />
+
+### `Variable.TextArea`
+
+<code src="./demos/demo2.tsx" />
+
+### `Variable.JSON`
+
+<code src="./demos/demo3.tsx" />