docs: site theme

.gitignore

@@ -5,9 +5,13 @@
 .history
 
 # misc
+site/dist
+site/server
 site/.dumi/tmp
 site/.dumi/tmp-test
 site/.dumi/tmp-production
+site/dist
+site/server
 
 # npm
 package-lock.json
@@ -26,4 +30,4 @@ node_modules
 *.tsbuildinfo
 .swc
 
-/packages/*/zarm-icons/**
+/packages/*/zarm-icons/**

.npmrc

@@ -1,2 +1,2 @@
 registry=https://registry.npmmirror.com/
-strict-peer-dependencies=false
+auto-install-peers=false

package.json

@@ -65,7 +65,7 @@
     "stylelint": "13.8.0",
     "stylelint-config-za": "0.3.0",
     "stylelint-scss": "^3.18.0",
-    "typescript": "~4.5.0"
+    "typescript": "~5.1.6"
   },
   "engines": {
     "node": ">= 16.18.1"

packages/bem/package.json

@@ -24,6 +24,8 @@
       "./*.d.ts"
     ]
   },
+  "main": "lib/index.js",
+  "module": "es/index.js",
   "typesVersions": {
     "*": {
       "*": [
@@ -33,8 +35,6 @@
       ]
     }
   },
-  "main": "lib/index.js",
-  "module": "es/index.js",
   "typings": "lib/index.d.ts",
   "directories": {
     "lib": "lib",
@@ -52,11 +52,13 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.22.5",
     "@babel/plugin-transform-runtime": "^7.13.10",
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
     "@babel/runtime": "^7.13.10",
-    "@zarm-design/cli": "workspace:*"
+    "@zarm-design/cli": "^0.0.48",
+    "sass": "^1.58.3"
   }
 }

packages/mini-demo/package.json

@@ -50,12 +50,12 @@
     "@tarojs/shared": "3.6.7",
     "@tarojs/taro": "3.6.7",
     "@tarojs/taro-h5": "3.6.7",
-    "@zarm-design/icons": "workspace:*",
+    "@zarm-design/icons": "^0.1.13",
     "postcss-loader": "^7.0.2",
     "postcss-transform-selector": "^1.1.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "zarm": "workspace:*"
+    "zarm": "^3.0.14"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",

packages/site/package.json

@@ -17,7 +17,7 @@
     "Android >= 4"
   ],
   "dependencies": {
-    "@zarm-design/icons": "workspace:*",
+    "@zarm-design/icons": "^0.1.13",
     "antd": "^5.0.7",
     "classnames": "2.2.6",
     "clipboard": "^2.0.11",
@@ -28,7 +28,7 @@
     "react-intl": "^5.12.1",
     "react-loadable": "^5.5.0",
     "react-router-dom": "^5.1.2",
-    "zarm": "workspace:*",
+    "zarm": "^3.0.14",
     "zarm-web": "0.0.1-alpha.13"
   },
   "devDependencies": {
@@ -38,7 +38,7 @@
     "@types/classnames": "^2.2.3",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
-    "@zarm-design/cli": "workspace:*",
+    "@zarm-design/cli": "^0.0.48",
     "babel-plugin-import": "^1.13.0",
     "babel-plugin-prismjs": "^2.0.1",
     "browserslist": "^4.6.6",

packages/zarm-cli/package.json

@@ -39,6 +39,8 @@
     "@babel/runtime": "^7.13.10",
     "@babel/runtime-corejs3": "^7.13.10",
     "@sentry/webpack-plugin": "^1.15.1",
+    "@zarm-design/bem": "^0.0.8",
+    "@zarm-design/icons": "^0.1.13",
     "babel-jest": "^26.5.2",
     "babel-loader": "^8.2.2",
     "chalk": "^4.1.1",
@@ -52,7 +54,8 @@
     "gulp-sass": "^5.1.0",
     "html-webpack-plugin": "^5.5.0",
     "import-local": "^3.0.2",
-    "jest": "^26.5.3",
+    "jest": "^29.6.4",
+    "jest-mock": "^29.6.3",
     "metro-react-native-babel-preset": "^0.63.0",
     "mini-css-extract-plugin": "^2.7.2",
     "mkdirp": "^0.5.1",
@@ -79,7 +82,7 @@
   "devDependencies": {
     "@types/node": "^15.3.0",
     "@types/webpack": "^5.28.0",
-    "ts-jest": "^26.5.6",
+    "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1"
   },
   "tags": [

packages/zarm-cli/src/__tests__/deploy.spec.ts

@@ -1,5 +1,5 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { mocked } from 'ts-jest/utils';
+import { mocked } from "jest-mock";
 
 import { getProjectConfig } from '../deploy';
 import { getCustomConfig } from '../utils';

packages/zarm-cli/src/__tests__/template.spec.ts

@@ -1,4 +1,4 @@
-import { mocked } from 'ts-jest/utils';
+import { mocked } from "jest-mock";
 import fs from 'fs';
 import { sync } from 'mkdirp';
 import signale from 'signale';
@@ -23,7 +23,8 @@ describe('template', () => {
   });
   describe('#createTemplate', () => {
     it('should create react component code snippet', () => {
-      chalkGreenMocked.mockImplementation((str: any) => str);
+      // @ts-ignore
+      chalkGreenMocked.mockImplementation((str) => str);
       const openSyncMocked = jest.spyOn(fs, 'openSync').mockReturnValue(1);
       const writeSyncMocked = jest.spyOn(fs, 'writeSync').mockReturnValue(1);
       const infoStub = jest.spyOn(console, 'info').mockReturnValue();

packages/zarm-cli/src/__tests__/test.spec.ts

@@ -1,4 +1,4 @@
-import { mocked } from 'ts-jest/utils';
+import { mocked } from "jest-mock";
 import execa from 'execa';
 import testExecutor from '../test';
 

packages/zarm-cli/src/__tests__/utils.spec.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { mocked } from 'ts-jest/utils';
+import { mocked } from "jest-mock";
 import { fileTree, FileInfo, getCustomConfig } from '../utils';
 
 jest.mock('fs');
@@ -48,7 +48,7 @@ describe('utils', () => {
       });
       const statsA = { isDirectory: jest.fn().mockReturnValue(true) } as unknown as fs.Stats;
       const statsB = { isDirectory: jest.fn().mockReturnValue(false) } as unknown as fs.Stats;
-      statSyncMocked.mockImplementation((filePath: string) => {
+      statSyncMocked.mockImplementation((filePath: string): any => {
         switch (filePath) {
           case path.join(testDirPath, '/a'):
             return statsA;

packages/zarm-cli/src/config/gulpConfig.ts

@@ -2,6 +2,7 @@ import gulp from 'gulp';
 import gulpSass from 'gulp-sass';
 import dartSass from 'sass';
 import through2 from 'through2';
+import * as Path from 'path';
 import { getProjectPath } from '../utils';
 
 const sass = gulpSass(dartSass);

packages/zarm-icons/package.json

@@ -29,16 +29,18 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@zarm-design/bem": "workspace:*",
+    "@zarm-design/bem": "^0.0.8",
     "change-case": "^4.1.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.13.16",
+    "@babel/plugin-transform-modules-commonjs": "^7.22.5",
     "@svgr/cli": "^5.5.0",
     "@testing-library/react": "^12.0.0",
     "@types/react": "^18.0.26",
-    "@zarm-design/cli": "workspace:*",
+    "@zarm-design/cli": "^0.0.48",
     "react": "^17.0.2",
+    "sass": "^1.58.3",
     "shelljs": "^0.8.4"
   },
   "peerDependencies": {

packages/zarm/package.json

@@ -80,8 +80,8 @@
     "@tarojs/components": "3.6.7",
     "@tarojs/taro": "3.6.7",
     "@use-gesture/react": "^10.1.1",
-    "@zarm-design/bem": "workspace:*",
-    "@zarm-design/icons": "workspace:*",
+    "@zarm-design/bem": "^0.0.8",
+    "@zarm-design/icons": "^0.1.13",
     "ahooks": "^3.7.6",
     "classnames": "^2.3.1",
     "color": "^3.1.3",
@@ -93,7 +93,9 @@
     "react-transition-group": "^4.4.2"
   },
   "devDependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.22.5",
     "@babel/runtime": "^7.14.0",
+    "@emotion/react": "^11.10.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
@@ -104,12 +106,13 @@
     "@types/react-dom": "^18.0.9",
     "@types/react-transition-group": "^4.4.5",
     "@types/testing-library__jest-dom": "^5.14.6",
-    "@zarm-design/cli": "workspace:*",
+    "@zarm-design/cli": "^0.0.48",
     "chalk": "^4.1.1",
     "dekko": "^0.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "resolve-url-loader": "^5.0.0",
+    "sass": "^1.58.3",
     "ts-jest": "^26.5.0"
   },
   "peerDependencies": {

packages/zarm/src/button/demo/demo1.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Button, Panel } from 'zarm';
+import './style.scss';
+
+export default () => {
+  return (
+    <>
+      <Panel title="基础用法" className="wrapper">
+        <Button>default</Button>
+        <Button theme="primary">primary</Button>
+      </Panel>
+      <Panel title="块级按钮" className="wrapper">
+        <Button block>default</Button>
+        <Button block disabled>
+          default disabled
+        </Button>
+        <Button block theme="primary">
+          primary
+        </Button>
+        <Button block disabled theme="primary">
+          primary disabled
+        </Button>
+      </Panel>
+      <Panel title="按钮主题" className="wrapper">
+        <Button>default</Button>
+        <Button theme="primary">primary</Button>
+        <Button theme="danger">danger</Button>
+      </Panel>
+      <Panel title="按钮尺寸" className="wrapper">
+        <Button size="lg">lg</Button>
+        <Button>md</Button>
+        <Button size="sm">sm</Button>
+        <Button size="xs">xs</Button>
+      </Panel>
+    </>
+  );
+};

packages/zarm/src/button/demo/demo2.tsx

@@ -0,0 +1,49 @@
+import { CloseCircle, Success, SuccessCircle } from '@zarm-design/icons';
+import * as React from 'react';
+import { Button, Panel } from 'zarm';
+import './style.scss';
+
+export default () => {
+  return (
+    <>
+      <Panel title="按钮形状" className="wrapper">
+        <Button shape="rect" theme="primary">
+          rect
+        </Button>
+        <Button theme="primary">radius</Button>
+        <Button shape="round" theme="primary">
+          round
+        </Button>
+        <Button shape="circle" theme="primary">
+          circle
+        </Button>
+        <Button shape="circle" icon={<Success />} />
+      </Panel>
+      <Panel title="按钮图标" className="wrapper">
+        <Button icon={<SuccessCircle theme="success" />}>success</Button>
+        <Button icon={<CloseCircle theme="danger" />}>danger</Button>
+      </Panel>
+      <Panel title="加载状态" className="wrapper">
+        <Button loading>loading</Button>
+        <Button loading theme="primary">
+          loading
+        </Button>
+        <Button loading disabled theme="primary">
+          disabled
+        </Button>
+      </Panel>
+      <Panel title="链接按钮" className="wrapper">
+        <Button href="https://zarm.design">default</Button>
+        <Button theme="primary" href="https://zarm.design">
+          primary
+        </Button>
+        <Button theme="danger" href="https://zarm.design">
+          danger
+        </Button>
+        <Button disabled theme="primary" href="https://zarm.design">
+          disabled
+        </Button>
+      </Panel>
+    </>
+  );
+};

packages/zarm/src/button/demo/demo3.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Button, Panel } from 'zarm';
+import './style.scss';
+
+export default () => {
+  return (
+    <>
+      <Panel title="幽灵按钮" className="wrapper" style={{ '--body-background': '#333' }}>
+        <Button block ghost>
+          default
+        </Button>
+        <Button block ghost theme="primary">
+          primary
+        </Button>
+        <Button block ghost theme="danger">
+          danger
+        </Button>
+        <Button block ghost disabled>
+          disabled
+        </Button>
+      </Panel>
+    </>
+  );
+};