@nocobase/flow-engine 2.0.0-alpha.4 → 2.0.0-alpha.41

package/src/runjs-context/snippets/scene/block/chartjs-bar.snippet.ts

@@ -0,0 +1,80 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-chartjs',
+  label: 'Render Chart.js bar chart',
+  description: 'Load Chart.js from CDN and render a basic bar chart inside the block',
+  locales: {
+    'zh-CN': {
+      label: '渲染 Chart.js 柱状图',
+      description: '通过 CDN 引入 Chart.js 并在区块中渲染基础柱状图',
+    },
+  },
+  content: `
+const wrapper = document.createElement('div');
+wrapper.style.padding = '16px';
+wrapper.style.background = '#fff';
+wrapper.style.borderRadius = '8px';
+wrapper.style.boxShadow = '0 2px 8px rgba(0,0,0,0.05)';
+
+const canvas = document.createElement('canvas');
+canvas.width = 480;
+canvas.height = 320;
+wrapper.appendChild(canvas);
+ctx.element.replaceChildren(wrapper);
+
+async function renderChart() {
+  const loaded = await ctx.requireAsync('https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js');
+  const Chart = loaded?.Chart || loaded?.default?.Chart || loaded?.default;
+  if (!Chart) {
+    throw new Error('Chart.js is not available');
+  }
+
+  const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+  const data = [12, 18, 9, 15, 22];
+
+  new Chart(canvas.getContext('2d'), {
+    type: 'bar',
+    data: {
+      labels,
+      datasets: [
+        {
+          label: ctx.t('Daily visits'),
+          data,
+          backgroundColor: 'rgba(24, 144, 255, 0.6)',
+          borderColor: '#1890ff',
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      plugins: {
+        legend: { display: true },
+        title: {
+          display: true,
+          text: ctx.t('Weekly overview'),
+        },
+      },
+    },
+  });
+}
+
+renderChart().catch((error) => {
+  console.error('[RunJS] failed to render chart', error);
+  wrapper.innerHTML = '<div style="color:#c00;">' + (error?.message || ctx.t('Chart initialization failed')) + '</div>';
+});
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/echarts-init.snippet.ts

@@ -0,0 +1,44 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+import { SnippetModule } from '../../types';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-echarts',
+  label: 'Init ECharts',
+  description: 'Load ECharts and render a simple chart inside the block',
+  locales: {
+    'zh-CN': {
+      label: '初始化 ECharts',
+      description: '加载 ECharts 并在区块内渲染示例图表',
+    },
+  },
+  content: `
+const container = document.createElement('div');
+container.style.height = '400px';
+container.style.width = '100%';
+ctx.element.replaceChildren(container);
+const echarts = await ctx.requireAsync('https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js');
+if (!echarts) {
+  throw new Error('ECharts library not loaded');
+}
+
+const chart = echarts.init(container);
+chart.setOption({
+  title: { text: ctx.t('ECharts') },
+  series: [{ type: 'pie', data: [{ value: 1, name: ctx.t('A') }] }],
+});
+
+chart.resize();
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/render-antd-icons.snippet.ts

@@ -0,0 +1,46 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-antd-icons',
+  label: 'Render Ant Design icons',
+  description: 'Render Ant Design icons with buttons inside the block container',
+  locales: {
+    'zh-CN': {
+      label: '渲染 Ant Design 图标',
+      description: '在区块容器中使用 Ant Design 图标与按钮进行渲染',
+    },
+  },
+  content: `
+// Render Ant Design icons with buttons via ctx.libs
+const { React, antd, antdIcons } = ctx.libs;
+const { Button, Space } = antd;
+const { PlusOutlined, EditOutlined, DeleteOutlined } = antdIcons;
+
+const IconButtons = () => (
+  <Space style={{ padding: 12 }}>
+    <Button type="primary" icon={<PlusOutlined />}>
+      {ctx.t('Add')}
+    </Button>
+    <Button icon={<EditOutlined />}>{ctx.t('Edit')}</Button>
+    <Button danger icon={<DeleteOutlined />}>
+      {ctx.t('Delete')}
+    </Button>
+  </Space>
+);
+
+ctx.render(<IconButtons />);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/render-button-handler.snippet.ts

@@ -0,0 +1,35 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-button',
+  label: 'Render button handler',
+  description: 'Render a button and handle click events inside the block',
+  locales: {
+    'zh-CN': {
+      label: '按钮事件处理',
+      description: '在区块中渲染按钮并绑定点击处理逻辑',
+    },
+  },
+  content: `
+const { Button } = ctx.libs.antd;
+
+ctx.render(
+  <Button type="primary" onClick={() => ctx.message.success(ctx.t('Clicked!'))}>
+    {ctx.t('Button')}
+  </Button>
+);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/render-iframe.snippet.ts

@@ -0,0 +1,38 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-iframe',
+  label: 'Render iframe',
+  description: 'Embed example.com as a sandboxed iframe inside the block element',
+  locales: {
+    'zh-CN': {
+      label: '渲染 iframe',
+      description: '在区块中以 sandbox 限制嵌入 example.com 页面',
+    },
+  },
+  content: `
+// Create an iframe that fills the current block container
+const iframe = document.createElement('iframe');
+iframe.src = 'https://example.com';
+iframe.setAttribute('sandbox', 'allow-scripts');
+iframe.style.width = '100%';
+iframe.style.height = '100%';
+iframe.style.border = 'none';
+
+// Replace existing children so the iframe is the only content
+ctx.element.replaceChildren(iframe);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/render-info-card.snippet.ts

@@ -0,0 +1,52 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-info-card',
+  label: 'Render record info card',
+  description: 'Display current record information in an Ant Design card',
+  locales: {
+    'zh-CN': {
+      label: '渲染记录信息卡片',
+      description: '使用 Ant Design 卡片显示当前记录的关键信息',
+    },
+  },
+  content: `
+const { Card, Descriptions, Tag } = ctx.libs.antd;
+
+if (!ctx.record) {
+  ctx.render('<div style="padding:16px;color:#999;">' + ctx.t('No record data') + '</div>');
+  return;
+}
+
+const record = ctx.record;
+
+ctx.render(
+  <Card title={ctx.t('Record Details')} bordered style={{ margin: 0 }}>
+    <Descriptions column={2} size="small">
+      <Descriptions.Item label={ctx.t('ID')}>{record.id || '-'}</Descriptions.Item>
+      <Descriptions.Item label={ctx.t('Status')}>
+        <Tag color={record.status === 'active' ? 'green' : 'default'}>{record.status || '-'}</Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label={ctx.t('Title')}>{record.title || '-'}</Descriptions.Item>
+      <Descriptions.Item label={ctx.t('Created At')}>
+        {record.createdAt ? new Date(record.createdAt).toLocaleString() : '-'}
+      </Descriptions.Item>
+    </Descriptions>
+  </Card>
+);
+
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/render-react-jsx.snippet.ts

@@ -0,0 +1,39 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-react-jsx',
+  label: 'Render React (JSX)',
+  description: 'Render a simple React component using JSX syntax',
+  locales: {
+    'zh-CN': {
+      label: '渲染 React（JSX）',
+      description: '使用 JSX 语法渲染一个简单的 React 组件',
+    },
+  },
+  content: `
+// Render a React component with JSX
+const { React } = ctx.libs;
+
+const App = () => (
+  <div style={{ padding: 12 }}>
+    <h3 style={{ margin: 0, color: '#1890ff' }}>Hello JSX</h3>
+    <div style={{ color: '#555' }}>This block is rendered by JSX.</div>
+  </div>
+);
+
+ctx.render(<App />);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/render-react.snippet.ts

@@ -0,0 +1,38 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-react',
+  label: 'Render React',
+  description: 'Render a React element inside the block container',
+  locales: {
+    'zh-CN': {
+      label: '渲染 React',
+      description: '在区块容器中渲染 React 组件',
+    },
+  },
+  content: `
+// Render a React element into ctx.element via ReactDOM
+const { Button } = ctx.libs.antd;
+
+ctx.render(
+  <div style={{ padding: 12 }}>
+    <Button type="primary" onClick={() => ctx.message.success(ctx.t('Clicked!'))}>
+      {ctx.t('Click')}
+    </Button>
+  </div>
+);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/render-statistics.snippet.ts

@@ -0,0 +1,76 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-stats',
+  label: 'Render statistics cards',
+  description: 'Display multiple statistic cards with numbers from API',
+  locales: {
+    'zh-CN': {
+      label: '渲染统计卡片',
+      description: '显示多个统计数字卡片（从 API 获取数据）',
+    },
+  },
+  content: `
+const { Card, Statistic, Row, Col } = ctx.libs.antd;
+
+const res = await ctx.api.request({
+  url: 'users:list',
+  method: 'get',
+  params: {
+    pageSize: 100,
+    appends: ['roles'],
+  },
+});
+
+const users = res?.data?.data || [];
+
+const total = users.length;
+const adminCount = users.filter((user) =>
+  Array.isArray(user?.roles) && user.roles.some((role) => role?.name === 'admin')
+).length;
+const withEmail = users.filter((user) => !!user?.email).length;
+const distinctRoles = new Set(
+  users
+    .flatMap((user) => (Array.isArray(user?.roles) ? user.roles.map((role) => role?.name) : []))
+    .filter(Boolean),
+).size;
+
+ctx.render(
+  <Row gutter={16}>
+    <Col span={6}>
+      <Card>
+        <Statistic title={ctx.t('Total users')} value={total} valueStyle={{ color: '#3f8600' }} />
+      </Card>
+    </Col>
+    <Col span={6}>
+      <Card>
+        <Statistic title={ctx.t('Administrators')} value={adminCount} valueStyle={{ color: '#1890ff' }} />
+      </Card>
+    </Col>
+    <Col span={6}>
+      <Card>
+        <Statistic title={ctx.t('Users with email')} value={withEmail} valueStyle={{ color: '#faad14' }} />
+      </Card>
+    </Col>
+    <Col span={6}>
+      <Card>
+        <Statistic title={ctx.t('Distinct roles')} value={distinctRoles} valueStyle={{ color: '#cf1322' }} />
+      </Card>
+    </Col>
+  </Row>
+);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/render-timeline.snippet.ts

@@ -0,0 +1,65 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-timeline',
+  label: 'Render timeline from records',
+  description: 'Display records as a timeline using Ant Design Timeline',
+  locales: {
+    'zh-CN': {
+      label: '渲染时间轴',
+      description: '使用 Ant Design 时间轴组件显示记录历史',
+    },
+  },
+  content: `
+const { Timeline, Card } = ctx.libs.antd;
+
+const res = await ctx.api.request({
+  url: 'users:list',
+  method: 'get',
+  params: {
+    pageSize: 20,
+    sort: ['-createdAt'],
+  },
+});
+
+const records = res?.data?.data || [];
+
+if (!records.length) {
+  ctx.render('<div style="padding:16px;color:#999;">' + ctx.t('No data') + '</div>');
+  return;
+}
+
+ctx.render(
+  <Card title={ctx.t('Activity Timeline')} bordered>
+    <Timeline mode="left">
+      {records.map((record) => (
+        <Timeline.Item
+          key={record.id}
+          label={record.createdAt ? new Date(record.createdAt).toLocaleString() : ''}
+        >
+          <div>
+            <strong>{record.nickname || record.username || ctx.t('Unnamed user')}</strong>
+            {record.email ? (
+              <div style={{ color: '#999', fontSize: '12px', marginTop: '4px' }}>{record.email}</div>
+            ) : null}
+          </div>
+        </Timeline.Item>
+      ))}
+    </Timeline>
+  </Card>
+);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/resource-example.snippet.ts

@@ -0,0 +1,46 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+import type { SnippetModule } from '../../types';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-resource-example',
+  label: 'Resource example',
+  description: 'Create a resource via ctx.createResource and render JSON output',
+  locales: {
+    'zh-CN': {
+      label: '资源示例',
+      description: '使用 ctx.useResource 加载数据并渲染 JSON 输出',
+    },
+  },
+  content:
+    `
+// Create a resource and load a single record
+const resource = ctx.createResource('SingleRecordResource');
+resource.setDataSourceKey('main');
+resource.setResourceName('users');
+// Optionally set filterByTk to target a specific record:
+// resource.setRequestOptions('params', { filterByTk: 1 });
+await resource.refresh();
+
+ctx.element.innerHTML = ` +
+    '`' +
+    `
+  <pre style="padding: 12px; background: #f5f5f5; border-radius: 6px;">
+    \${JSON.stringify(resource.getData(), null, 2)}
+  </pre>
+` +
+    '`' +
+    `;
+`,
+};
+
+export default snippet;