feat: custom block sample (#867)

packages/app/client/tsconfig.json

@@ -11,7 +11,7 @@
     "baseUrl": "./",
     "strict": true,
     "paths": {
-      "@nocobase/plugin-*-sample/client": ["../../samples/*/src/client"],
+      "@nocobase/plugin-sample-*/client": ["../../samples/*/src/client"],
       "@nocobase/plugin-*/client": ["../../plugins/*/src/client"],
       "@nocobase/utils/client": ["../../core/utils/src/client"],
       "@nocobase/*": ["../../core/*/src/"],

packages/samples/custom-block/README.md

@@ -0,0 +1,28 @@
+# Hello sample
+
+## Register
+
+```ts
+yarn pm add sample-custom-block
+```
+
+## Activate
+
+```bash
+yarn pm enable sample-custom-block
+```
+
+## Launch the app
+
+```bash
+# for development
+yarn dev
+
+# for production
+yarn build
+yarn start
+```
+
+## Demo
+
+[gif]

packages/samples/custom-block/client.d.ts

@@ -0,0 +1,4 @@
+// @ts-nocheck
+export * from './lib/client';
+export { default } from './lib/client';
+

packages/samples/custom-block/client.js

@@ -0,0 +1,30 @@
+"use strict";
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _index = _interopRequireWildcard(require("./lib/client"));
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _index.default;
+  }
+});
+
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index[key];
+    }
+  });
+});

packages/samples/custom-block/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@nocobase/plugin-sample-custom-block",
+  "version": "0.7.4-alpha.7",
+  "main": "lib/server/index.js",
+  "dependencies": {},
+  "devDependencies": {
+    "@nocobase/client": "0.7.4-alpha.7",
+    "@nocobase/server": "0.7.4-alpha.7",
+    "@nocobase/test": "0.7.4-alpha.7"
+  }
+}

packages/samples/custom-block/server.d.ts

@@ -0,0 +1,4 @@
+// @ts-nocheck
+export * from './lib/server';
+export { default } from './lib/server';
+

packages/samples/custom-block/server.js

@@ -0,0 +1,30 @@
+"use strict";
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _index = _interopRequireWildcard(require("./lib/server"));
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _index.default;
+  }
+});
+
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index[key];
+    }
+  });
+});

packages/samples/custom-block/src/client/HelloDesigner.tsx

@@ -0,0 +1,18 @@
+import { useFieldSchema } from '@formily/react';
+import { GeneralSchemaDesigner, SchemaSettings, useCollection } from '@nocobase/client';
+import React from 'react';
+
+export const HelloDesigner = () => {
+  const { name, title } = useCollection();
+  const fieldSchema = useFieldSchema();
+  return (
+    <GeneralSchemaDesigner title={title || name}>
+      <SchemaSettings.Remove
+        removeParentsIfNoChildren
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+};

packages/samples/custom-block/src/client/index.tsx

@@ -0,0 +1,47 @@
+import { TableOutlined } from '@ant-design/icons';
+import { SchemaComponentOptions, SchemaInitializer, SchemaInitializerContext } from '@nocobase/client';
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { HelloDesigner } from './HelloDesigner';
+
+export const HelloBlockInitializer = (props) => {
+  const { insert } = props;
+  const { t } = useTranslation();
+  return (
+    <SchemaInitializer.Item
+      {...props}
+      icon={<TableOutlined />}
+      onClick={() => {
+        insert({
+          type: 'void',
+          'x-component': 'CardItem',
+          'x-designer': 'HelloDesigner',
+          properties: {
+            hello: {
+              type: 'void',
+              'x-component': 'div',
+              'x-content': 'Hello World',
+            },
+          },
+        });
+      }}
+      title={t('Hello block')}
+    />
+  );
+};
+
+export default React.memo((props) => {
+  const items = useContext(SchemaInitializerContext);
+  const children = items.BlockInitializers.items[2].children;
+  children.push({
+    key: 'customBlock',
+    type: 'item',
+    title: '{{t("Hello block")}}',
+    component: 'HelloBlockInitializer',
+  });
+  return (
+    <SchemaComponentOptions components={{ HelloDesigner, HelloBlockInitializer }}>
+      <SchemaInitializerContext.Provider value={items}>{props.children}</SchemaInitializerContext.Provider>
+    </SchemaComponentOptions>
+  );
+});

packages/samples/custom-block/src/index.ts

@@ -0,0 +1 @@
+export { default } from './server';

packages/samples/custom-block/src/server/index.ts

@@ -0,0 +1,19 @@
+import { InstallOptions, Plugin } from '@nocobase/server';
+
+export class CustomBlockPlugin extends Plugin {
+  getName(): string {
+    return this.getPackageName(__dirname);
+  }
+
+  beforeLoad() {
+    // TODO
+  }
+
+  async load() {}
+
+  async install(options: InstallOptions) {
+    // TODO
+  }
+}
+
+export default CustomBlockPlugin;

packages/samples/hello/src/client/index.tsx

@@ -1,11 +1,5 @@
 import { TableOutlined } from '@ant-design/icons';
-import {
-  SchemaComponentOptions,
-  SchemaInitializer,
-  SchemaInitializerContext,
-  SettingsCenterProvider
-} from '@nocobase/client';
-import { Card } from 'antd';
+import { SchemaComponentOptions, SchemaInitializer, SchemaInitializerContext } from '@nocobase/client';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { HelloDesigner } from './HelloDesigner';
@@ -46,23 +40,8 @@ export default React.memo((props) => {
     component: 'HelloBlockInitializer',
   });
   return (
-    <SettingsCenterProvider
-      settings={{
-        'sample-hello': {
-          title: 'Hello',
-          icon: 'ApiOutlined',
-          tabs: {
-            tab1: {
-              title: 'Hello tab',
-              component: () => <Card bordered={false}>Hello Settings</Card>,
-            },
-          },
-        },
-      }}
-    >
-      <SchemaComponentOptions components={{ HelloDesigner, HelloBlockInitializer }}>
-        <SchemaInitializerContext.Provider value={items}>{props.children}</SchemaInitializerContext.Provider>
-      </SchemaComponentOptions>
-    </SettingsCenterProvider>
+    <SchemaComponentOptions components={{ HelloDesigner, HelloBlockInitializer }}>
+      <SchemaInitializerContext.Provider value={items}>{props.children}</SchemaInitializerContext.Provider>
+    </SchemaComponentOptions>
   );
 });