ci: deploy set && avatar components change

    Add
        git pages deploy feature
        deploy.yml

    Change
        static picture url to cdn url
        avatar example schema.jsx

.dumirc.ts

@@ -1,12 +1,18 @@
 import { defineConfig } from 'dumi';
 
+const isDev = process.env.NODE_ENV === 'development';
+export const basePath = isDev ? '/' : '/XForm/';
+const logoPath = `${basePath}logo.png`;
+
 export default defineConfig({
+  base: basePath,
+  publicPath: basePath,
   outputPath: 'docs-dist',
-  favicons: ['/logo.png'],
+  favicons: [logoPath],
   themeConfig: {
     title: 'XForm',
     name: 'XForm',
-    logo: '/logo.png',
+    logo: logoPath,
     socialLinks: {
       github: 'https://github.com/totalizer-team/XForm',
     },

.eslintrc.js

@@ -14,6 +14,10 @@ module.exports = {
       },
     },
   },
+  ignorePatterns: [
+    'jest.config.ts',
+    'docs/*/examples/*',
+  ],
   overrides: [
     {
       env: {
@@ -24,6 +28,11 @@ module.exports = {
         sourceType: 'script',
       },
     },
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      plugins: ['@typescript-eslint'],
+    },
   ],
   parserOptions: {
     ecmaVersion: 'latest',
@@ -39,12 +48,15 @@ module.exports = {
     'react/no-danger': 0,
     'no-underscore-dangle': 0,
     'import/no-extraneous-dependencies': 0,
-    // 'no-unused-vars': 0,
     'import/no-cycle': 0,
     'import/prefer-default-export': 0,
     'no-console': 0,
     'react/jsx-wrap-multilines': 0,
     'react/no-array-index-key': 0,
     'no-plusplus': 0,
+    'no-unused-vars': 0,
+    'no-cond-assign': 0,
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+    'no-else-return': 0,
   },
 };

.github/workflows/deploy.yml

@@ -0,0 +1,48 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build your project
+        run: yarn run docs:build
+
+      - name: Remove ~demos/:id
+        run: rm -rf ./docs-dist/~demos/:id
+
+      - name: Show build output directory
+        run: ls -la ./docs-dist
+
+      - name: Upload build artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          name: github-pages
+          path: ./docs-dist
+
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v3

.gitignore

@@ -27,6 +27,7 @@ lib
 es
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 coverage/
 .doc
 dist/
@@ -41,4 +42,4 @@ dist/
 .dumi/tmp
 .dumi/tmp-production
 .node
-docs-dist
+docs-dist

.stylelintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "@umijs/lint/dist/config/stylelint"
-}
+  "extends": "@umijs/lint/dist/config/stylelint",
+  "rules": {
+    "selector-class-pattern": null
+  }
+}

docs/enh/Avatar.md

@@ -0,0 +1,13 @@
+---
+order: 05
+toc: content
+mobile: false
+---
+
+# Enh.Avatar
+
+头像展示组件
+
+## 示例
+
+<code src="./examples/Avatar" compact  background="#fff"></code>

docs/enh/examples/Avatar/index.jsx

@@ -0,0 +1,9 @@
+import { XBaseForm } from '@totalizer/xform';
+import { observer } from 'mobx-react';
+
+import schema from './schema.jsx';
+import store from './store.js';
+
+export default observer(() => (
+  <XBaseForm path="myFormData" store={store} schema={schema} debug />
+));

docs/enh/examples/Avatar/schema.jsx

@@ -0,0 +1,43 @@
+const schema = {
+  imageAvatar: {
+    c: 'Enh.Avatar',
+    xs: 12,
+    label: '图片头像',
+    alt: 'alt content',
+    src: 'https://s2.loli.net/2024/09/14/g6adqDxkCv14LZj.jpg',
+    size: 64,
+  },
+  textAvatar: {
+    c: 'Enh.Avatar',
+    xs: 12,
+    label: '文字头像',
+    alt: 'alt content',
+    content: 'T',
+    bgColor: 'orange',
+  },
+  textBgAvatar1: {
+    c: 'Enh.Avatar',
+    xs: 12,
+    label: '文字头像背景颜色1',
+    alt: 'alt content',
+    content: 'T',
+    bgColor: '#1890ff',
+    size: 64,
+  },
+
+  avatarGroup: {
+    c: 'Enh.Avatar',
+    xs: 12,
+    label: '头像组',
+    alt: 'alt content',
+    src: [
+      'https://s2.loli.net/2024/09/14/pFiQIzVUBu29NeE.jpg',
+      'https://s2.loli.net/2024/09/14/g6adqDxkCv14LZj.jpg',
+      'https://s2.loli.net/2024/09/14/2PkevRYnHGq46tb.jpg',
+      'https://s2.loli.net/2024/09/14/KHXqLyimJSYjMek.jpg',
+    ],
+    size: 32,
+  },
+};
+
+export default schema;

docs/enh/examples/Avatar/store.js

@@ -0,0 +1,33 @@
+import { $$get, $$merge, $$set } from '@totalizer/xform';
+import { configure, makeAutoObservable } from 'mobx';
+import schema from './schema';
+
+configure({
+  enforceActions: 'never',
+});
+
+class Store {
+  /**
+   * 定义 myFormData 用于存储表单数据
+   * $$merge 方法能够确保传入的数据与schema保持一致
+   */
+  myFormData = $$merge(schema, {});
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  /**
+   * 你需要将 $$set, $$get 这两个方法按照以下示例置于你的 store 中
+   * 以便表单组件与 store 进行数据通信
+   */
+  $$set(path, value) {
+    $$set(this, path, value);
+  }
+
+  $$get(path) {
+    return $$get(this, path);
+  }
+}
+
+export default new Store();

jest.config.ts

@@ -178,13 +178,12 @@ const config: Config = {
   "transform": {
     "\\.[jt]sx?$": "babel-jest",
     ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
-  }
+  },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  // transformIgnorePatterns: [
-  //   "/node_modules/",
-  //   "\\.pnp\\.[^\\/]+$"
-  // ],
+  transformIgnorePatterns: [
+    "/node_modules/(?!lodash-es/)"
+  ],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

package.json

@@ -69,6 +69,8 @@
     "@commitlint/config-conventional": "^17.1.0",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^8.5.0",
+    "@typescript-eslint/parser": "^8.5.0",
     "@umijs/lint": "^4.0.0",
     "babel-jest": "^29.7.0",
     "dumi": "^2.3.0",

src/components/Enh/Avatar.jsx

@@ -0,0 +1,67 @@
+import { observer } from 'mobx-react';
+
+import { Avatar, AvatarGroup, Stack } from '@mui/material';
+import React from 'react';
+
+export default observer(({ path = '', $$store = null }) => {
+  console.log('~~~ Avatar', path);
+
+  if (!$$store) return null;
+
+  const {
+    c,
+    xs,
+    label,
+    disabled,
+    required,
+    helperText,
+    errorMsg,
+    visible,
+
+    /**
+     * componentProps
+     */
+    src,
+    content,
+    size,
+    bgColor,
+    total,
+    max,
+  } = $$store?.context?.(path) || {};
+
+  const isGroup = Array.isArray(src);
+  const currentSxProps = {
+    sx: {
+      height: size,
+      width: size,
+      bgcolor: bgColor,
+    },
+  };
+
+  if (!isGroup) {
+    return (
+      <Stack direction="row" justifyContent="center">
+        <Avatar src={src} {...currentSxProps}>
+          {content}
+        </Avatar>
+      </Stack>
+    );
+  } else {
+    const isImageAvatarGroup = !!src?.length;
+    if (!isImageAvatarGroup) return null;
+    const currentArr = src;
+    return (
+      <Stack direction="row" justifyContent="center">
+        <AvatarGroup max={max} total={total}>
+          {currentArr.map((item) => (
+            <Avatar
+              key={item}
+              src={isImageAvatarGroup ? item : undefined}
+              {...currentSxProps}
+            />
+          ))}
+        </AvatarGroup>
+      </Stack>
+    );
+  }
+});

src/components/index.js

@@ -27,6 +27,7 @@ import EnhFormButton from './Enh/FormButton';
 import EnhFormTitle from './Enh/FormTitle';
 import EnhLink from './Enh/Link';
 import EnhTypography from './Enh/Typography';
+import EnhAvatar from './Enh/Avatar';
 
 const COMPONENTS = {};
 const DEFAULT_VALUE = {};
@@ -78,6 +79,7 @@ registerComponent('Enh.FormTitle', EnhFormTitle, '', 'Enh');
 registerComponent('Enh.Link', EnhLink, '', 'Enh');
 registerComponent('Enh.Typography', EnhTypography, '', 'Enh');
 registerComponent('Enh.FormButton', EnhFormButton, '', 'Enh');
+registerComponent('Enh.Avatar', EnhAvatar, '', 'Enh');
 
 export default COMPONENTS;