feat: add @nocobase/app

package.json

@@ -9,6 +9,7 @@
     "bootstrap": "lerna bootstrap",
     "clean": "rimraf -rf packages/*/{lib,esm,dist} && lerna clean",
     "nocobase": "ts-node-dev -r dotenv/config -r tsconfig-paths/register ./packages/api/src/index.ts",
+    "start-client": "cd packages/app && npm run start",
     "start-server": "ts-node-dev -r dotenv/config -r tsconfig-paths/register ./packages/api/src/index.ts",
     "build": "lerna run build",
     "build-docs": "dumi build",

packages/app/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

packages/app/.gitignore

@@ -0,0 +1,20 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local

packages/app/.prettierignore

@@ -0,0 +1,8 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test

packages/app/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

packages/app/.umirc.ts

@@ -0,0 +1,21 @@
+import { resolve } from 'path';
+import { defineConfig } from 'umi';
+
+process.env.MFSU_AD = 'none';
+
+export default defineConfig({
+  nodeModulesTransform: {
+    type: 'none',
+  },
+  routes: [{ path: '/', exact: false, component: '@/pages/index' }],
+  // fastRefresh: {},
+  chainWebpack(config) {
+    config.module.rules
+      .get('ts-in-node_modules')
+      .include.add(resolve(__dirname, '../client/src'));
+    config.resolve.alias.set(
+      '@nocobase/client',
+      resolve(__dirname, '../client/src'),
+    );
+  },
+});

packages/app/README.md

@@ -0,0 +1,15 @@
+# umi project
+
+## Getting Started
+
+Install dependencies,
+
+```bash
+$ yarn
+```
+
+Start the dev server,
+
+```bash
+$ yarn start
+```

packages/app/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@nocobase/app",
+  "version": "0.6.0-alpha.0",
+  "private": true,
+  "scripts": {
+    "start": "umi dev",
+    "build": "umi build",
+    "postinstall": "umi generate tmp",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage"
+  },
+  "dependencies": {
+    "@nocobase/client": "^0.6.0-alpha.0",
+    "react": "17.x",
+    "react-dom": "17.x",
+    "umi": "^3.5.20"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@umijs/test": "^3.5.20",
+    "lint-staged": "^10.0.7",
+    "yorkie": "^2.0.0"
+  }
+}

packages/app/src/pages/apiClient.ts

@@ -0,0 +1,10 @@
+import { APIClient } from '@nocobase/client';
+import mock from './mock';
+
+const apiClient = new APIClient({
+  baseURL: `${location.protocol}//${location.host}/api/`,
+});
+
+mock(apiClient);
+
+export default apiClient;

packages/app/src/pages/index.less

@@ -0,0 +1,3 @@
+.title {
+  background: rgb(121, 242, 157);
+}

packages/app/src/pages/index.tsx

@@ -0,0 +1,62 @@
+import {
+  ACLShortcut,
+  AdminLayout,
+  AntdConfigProvider,
+  AntdSchemaComponentProvider,
+  APIClientProvider,
+  AuthLayout,
+  CollectionManagerShortcut,
+  compose,
+  DesignableSwitch,
+  DocumentTitleProvider,
+  i18n,
+  PluginManagerProvider,
+  RouteSchemaComponent,
+  RouteSwitch,
+  RouteSwitchProvider,
+  SchemaComponentProvider,
+  SigninPage,
+  SignupPage,
+  SystemSettingsProvider,
+  SystemSettingsShortcut,
+  useRequest
+} from '@nocobase/client';
+import { Spin } from 'antd';
+import 'antd/dist/antd.css';
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { Link, MemoryRouter, NavLink } from 'react-router-dom';
+import apiClient from './apiClient';
+
+const providers = [
+  // [HashRouter],
+  [MemoryRouter, { initialEntries: ['/'] }],
+  [APIClientProvider, { apiClient }],
+  [I18nextProvider, { i18n }],
+  [AntdConfigProvider, { remoteLocale: true }],
+  SystemSettingsProvider,
+  [
+    PluginManagerProvider,
+    { components: { ACLShortcut, DesignableSwitch, CollectionManagerShortcut, SystemSettingsShortcut } },
+  ],
+  [SchemaComponentProvider, { components: { Link, NavLink } }],
+  AntdSchemaComponentProvider,
+  [DocumentTitleProvider, { addonAfter: 'NocoBase' }],
+  [RouteSwitchProvider, { components: { AuthLayout, AdminLayout, RouteSchemaComponent, SigninPage, SignupPage } }],
+];
+
+const App = compose(...providers)(() => {
+  const { data, loading } = useRequest({
+    url: 'routes:getAccessible',
+  });
+  if (loading) {
+    return <Spin />;
+  }
+  return (
+    <div>
+      <RouteSwitch routes={data?.data || []} />
+    </div>
+  );
+});
+
+export default App;

packages/app/src/pages/mock.ts

@@ -0,0 +1,171 @@
+import { uid } from '@formily/shared';
+import { APIClient } from '@nocobase/client';
+import MockAdapter from 'axios-mock-adapter';
+
+export default (apiClient: APIClient) => {
+  const mock = new MockAdapter(apiClient.axios);
+
+  mock.onGet('/app:getLang').reply(200, {
+    data: { lang: 'en-US' },
+  });
+
+  mock.onGet('/system_settings:get').reply(200, {
+    data: {
+      title: 'NocoBase',
+    },
+  });
+
+  const jsonSchema = {
+    qqzzjakwkwl: {
+      name: 'qqzzjakwkwl',
+      type: 'void',
+      'x-component': 'Menu',
+      'x-component-props': {
+        mode: 'mix',
+        theme: 'dark',
+        // defaultSelectedUid: 'u8',
+        onSelect: '{{ onSelect }}',
+        sideMenuRefScopeKey: 'sideMenuRef',
+      },
+      properties: {
+        item3: {
+          type: 'void',
+          title: 'SubMenu u3',
+          'x-uid': 'u3',
+          'x-component': 'Menu.SubMenu',
+          'x-component-props': {},
+          properties: {
+            item6: {
+              type: 'void',
+              title: 'SubMenu u6',
+              'x-uid': 'u6',
+              'x-component': 'Menu.SubMenu',
+              'x-component-props': {},
+              properties: {
+                item7: {
+                  type: 'void',
+                  title: 'Menu Item u7',
+                  'x-uid': 'u7',
+                  'x-component': 'Menu.Item',
+                  'x-component-props': {},
+                },
+                item8: {
+                  type: 'void',
+                  title: 'Menu Item u8',
+                  'x-uid': 'u8',
+                  'x-component': 'Menu.Item',
+                  'x-component-props': {},
+                },
+              },
+            },
+            item4: {
+              type: 'void',
+              title: 'Menu Item u4',
+              'x-uid': 'u4',
+              'x-component': 'Menu.Item',
+              'x-component-props': {},
+            },
+            item5: {
+              type: 'void',
+              title: 'Menu Item u5',
+              'x-uid': 'u5',
+              'x-component': 'Menu.Item',
+              'x-component-props': {},
+            },
+          },
+        },
+        item1: {
+          type: 'void',
+          title: 'Menu Item u1',
+          'x-uid': 'u1',
+          'x-component': 'Menu.Item',
+          'x-component-props': {},
+        },
+        item2: {
+          type: 'void',
+          title: 'Menu Item u2',
+          'x-uid': 'u2',
+          'x-component': 'Menu.Item',
+          'x-component-props': {},
+        },
+        item9: {
+          type: 'void',
+          title: 'SubMenu u9',
+          'x-uid': 'u9',
+          'x-component': 'Menu.SubMenu',
+          'x-component-props': {},
+          properties: {
+            item10: {
+              type: 'void',
+              title: 'Menu Item u10',
+              'x-uid': 'u10',
+              'x-component': 'Menu.Item',
+              'x-component-props': {},
+            },
+          },
+        },
+      },
+    },
+  };
+
+  mock.onGet(/\/ui_schemas\:getJsonSchema\/(\w+)/).reply(function (config) {
+    const name = config.url.split('/').pop();
+    console.log(name);
+    if (jsonSchema[name]) {
+      return [200, { data: jsonSchema[name] }];
+    }
+    const response = {
+      data: {
+        type: 'void',
+        name: name,
+        'x-uid': name,
+        'x-component': 'Page',
+        properties: {
+          [uid()]: {
+            type: 'void',
+            name: 'grid1',
+            'x-component': 'Grid',
+            'x-item-initializer': 'Grid.AddBlockItem',
+            'x-uid': uid(),
+            properties: {},
+          },
+        },
+      },
+    };
+    return [200, response];
+  });
+
+  mock.onGet('/routes:getAccessible').reply(200, {
+    data: [
+      {
+        type: 'redirect',
+        from: '/',
+        to: '/admin',
+        exact: true,
+      },
+      {
+        type: 'route',
+        uiSchemaUid: 'qqzzjakwkwl',
+        path: '/admin/:name(.+)?',
+        component: 'AdminLayout',
+        title: 'NocoBase Admin',
+      },
+      {
+        type: 'route',
+        component: 'AuthLayout',
+        routes: [
+          {
+            type: 'route',
+            path: '/signin',
+            component: 'SigninPage',
+          },
+          {
+            type: 'route',
+            path: '/signup',
+            component: 'SignupPage',
+          },
+        ],
+      },
+    ],
+  });
+};

packages/app/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "importHelpers": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "baseUrl": "./",
+    "strict": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"]
+    },
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "mock/**/*",
+    "src/**/*",
+    "config/**/*",
+    ".umirc.ts",
+    "typings.d.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib",
+    "es",
+    "dist",
+    "typings",
+    "**/__test__",
+    "test",
+    "docs",
+    "tests"
+  ]
+}

packages/app/typings.d.ts

@@ -0,0 +1,10 @@
+declare module '*.css';
+declare module '*.less';
+declare module '*.png';
+declare module '*.svg' {
+  export function ReactComponent(
+    props: React.SVGProps<SVGSVGElement>,
+  ): React.ReactElement;
+  const url: string;
+  export default url;
+}