initial

.babelrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
+  plugins: ['@babel/plugin-transform-runtime'],
+  env: {
+    esm: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            modules: false,
+          },
+        ],
+      ],
+      plugins: [
+        [
+          '@babel/plugin-transform-runtime',
+          {
+            useESModules: true,
+          },
+        ],
+      ],
+    },
+  },
+};

.browserslistrc

@@ -0,0 +1,3 @@
+>0.2%
+not dead
+not op_mini all

.commitlintrc.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

.dumi/theme/layouts/GlobalLayout.tsx

@@ -0,0 +1,19 @@
+import { useOutlet, usePrefersColor } from 'dumi';
+import { ThemeProvider } from '../../../src';
+
+const GlobalLayout = () => {
+  const [color] = usePrefersColor();
+  const outlet = useOutlet();
+
+  return (
+    <ThemeProvider
+      theme={{
+        mode: color,
+      }}
+    >
+      {outlet}
+    </ThemeProvider>
+  );
+};
+
+export default GlobalLayout;

.dumi/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "**/*"
+  ]
+}

.dumirc.ts

@@ -0,0 +1,39 @@
+import { defineConfig } from 'dumi';
+
+let base: string | undefined;
+let publicPath: string | undefined;
+
+// Github Pages 部署时需要更换为自己的仓库名
+if (process.env.NODE_ENV === 'production' && process.env.PREVIEW !== '1') {
+  base = '/zens/';
+  publicPath = '/zens/';
+}
+
+export default defineConfig({
+  base,
+  publicPath,
+  logo: '/logo.png',
+  title: 'zens',
+  outputPath: 'doc-site',
+  resolve: {
+    docDirs: ['docs'],
+    atomDirs: [{ type: 'component', dir: 'src' }],
+  },
+  themeConfig: {
+    logo: '/logo.png',
+    lastUpdated: true,
+    footer: 'Open-source MIT Licensed | Copyright © 2024  <a href="https://github.com/drl990114">@drl990114</a>'
+  },
+  exportStatic: {},
+  forkTSChecker: {},
+  extraBabelPlugins: [
+    [
+      'import',
+      {
+        libraryName: 'zens',
+        libraryDirectory: '',
+        camel2DashComponentName: false,
+      },
+    ],
+  ],
+});

.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

.eslintignore

@@ -0,0 +1,7 @@
+.dumi/
+esm/
+lib/
+scripts/
+template/
+**/__tests__/
+*.js

.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: [require.resolve('@umijs/fabric/dist/eslint')],
+  rules: {
+    'react/require-default-props': 0,
+  },
+};

.github/workflows/gh-pages.yml

@@ -0,0 +1,21 @@
+name: github pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - run: yarn build:site
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.ACCESS_TOKEN }}
+          publish_dir: ./doc-site

.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+/.vscode
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+/site
+# testing
+/coverage
+
+# production
+/build
+/dist
+/lib
+/esm
+/doc-site
+/types
+
+# dumi
+.dumi/tmp
+.dumi/tmp-test
+.dumi/tmp-production
+.umi
+.umi-production
+.env.local
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

.prettierrc.js

@@ -0,0 +1,13 @@
+const fabric = require('@umijs/fabric');
+
+module.exports = {
+  ...fabric.prettier,
+  plugins: [
+    require.resolve('prettier-plugin-packagejson'),
+    require.resolve('@trivago/prettier-plugin-sort-imports'),
+  ],
+  importOrder: ['^react', '<THIRD_PARTY_MODULES>', '^@.*', '^./(.*)', '^../(.*)'],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+  importOrderCaseInsensitive: true,
+};

.stylelintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  extends: [require.resolve('@umijs/fabric/dist/stylelint')],
+  rules: {},
+};

README.md

@@ -0,0 +1,5 @@
+# Zens
+
+MarkFlowy components.
+
+> This project is a work in progress.

docs/getting-started.md

@@ -0,0 +1,59 @@
+---
+nav:
+  title: 快速上手
+  order: 1
+---
+
+# 快速上手
+
+## 安装
+
+**使用 npm 或 yarn 安装**
+
+```shell
+npm install zens
+```
+
+```shell
+yarn add zens
+```
+
+## 示例
+
+```js
+import Button from 'zens/es/Button'; // 手动按需加载 js
+
+ReactDOM.render(<Button>按钮</Button>, mountNode);
+```
+
+### 自动按需加载
+
+使用 [babel-plugin-import ](https://www.npmjs.com/package/babel-plugin-import) 优化引入方式，如下：
+
+```js
+import { Button } from 'zens'; // 与上述示例等价
+
+ReactDOM.render(<Button>按钮</Button>, mountNode);
+```
+
+安装 `babel-plugin-import`
+
+```
+yarn add babel-plugin-import --dev
+```
+
+配置`.babelrc` 或 `babel-loader`
+
+```json
+{
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "zens",
+        "libraryDirectory": "esm" // default: lib
+      }
+    ]
+  ]
+}
+```

docs/index.md

@@ -0,0 +1,9 @@
+---
+title: 'zens'
+hero:
+  title: 'zens'
+  desc: markflowy components
+  actions:
+    - text: 快速上手
+      link: /getting-started
+---

gulpfile.js

@@ -0,0 +1,102 @@
+const gulp = require('gulp');
+const babel = require('gulp-babel');
+const less = require('gulp-less');
+const autoprefixer = require('gulp-autoprefixer');
+const cssnano = require('gulp-cssnano');
+const through2 = require('through2');
+
+const paths = {
+  dest: {
+    lib: 'lib',
+    esm: 'esm',
+    dist: 'dist',
+  },
+  styles: 'src/**/*.less',
+  scripts: ['src/**/*.{ts,tsx}', '!src/**/demo/*.{ts,tsx}', '!src/**/__tests__/*.{ts,tsx}'],
+};
+
+/**
+ * 当前组件样式 import './index.less' => import './index.css'
+ * 依赖的其他组件样式 import '../test-comp/style' => import '../test-comp/style/css.js'
+ * 依赖的其他组件样式 import '../test-comp/style/index.js' => import '../test-comp/style/css.js'
+ * @param {string} content
+ */
+function cssInjection(content) {
+  return content
+    .replace(/\/style\/?'/g, "/style/css'")
+    .replace(/\/style\/?"/g, '/style/css"')
+    .replace(/\.less/g, '.css');
+}
+
+/**
+ * 编译脚本文件
+ * @param {string} babelEnv babel环境变量
+ * @param {string} destDir 目标目录
+ */
+function compileScripts(babelEnv, destDir) {
+  const { scripts } = paths;
+  process.env.BABEL_ENV = babelEnv;
+  return gulp
+    .src(scripts)
+    .pipe(babel()) // 使用gulp-babel处理
+    .pipe(
+      through2.obj(function z(file, encoding, next) {
+        this.push(file.clone());
+        // 找到目标
+        if (file.path.match(/(\/|\\)style(\/|\\)index\.js/)) {
+          const content = file.contents.toString(encoding);
+          file.contents = Buffer.from(cssInjection(content)); // 处理文件内容
+          file.path = file.path.replace(/index\.js/, 'css.js'); // 文件重命名
+          this.push(file); // 新增该文件
+          next();
+        } else {
+          next();
+        }
+      }),
+    )
+    .pipe(gulp.dest(destDir));
+}
+
+/**
+ * 编译cjs
+ */
+function compileCJS() {
+  const { dest } = paths;
+  return compileScripts('cjs', dest.lib);
+}
+
+/**
+ * 编译esm
+ */
+function compileESM() {
+  const { dest } = paths;
+  return compileScripts('esm', dest.esm);
+}
+
+const buildScripts = gulp.series(compileCJS, compileESM);
+
+/**
+ * 拷贝less文件
+ */
+function copyLess() {
+  return gulp.src(paths.styles).pipe(gulp.dest(paths.dest.lib)).pipe(gulp.dest(paths.dest.esm));
+}
+
+/**
+ * 生成css文件
+ */
+function less2css() {
+  return gulp
+    .src(paths.styles)
+    .pipe(less()) // 处理less文件
+    .pipe(autoprefixer()) // 根据browserslistrc增加前缀
+    .pipe(cssnano({ zindex: false, reduceIdents: false })) // 压缩
+    .pipe(gulp.dest(paths.dest.lib))
+    .pipe(gulp.dest(paths.dest.esm));
+}
+
+const build = gulp.parallel(buildScripts, copyLess, less2css);
+
+exports.build = build;
+
+exports.default = build;