v0.0.36

gulpfile.js

@@ -38,7 +38,20 @@ function compileScripts(babelEnv, destDir) {
   process.env.BABEL_ENV = babelEnv;
   return gulp
     .src(scripts)
-    .pipe(babel()) // 使用gulp-babel处理
+    .pipe(
+      babel({
+        plugins: [
+          [
+            require.resolve('babel-plugin-module-resolver'),
+            {
+              alias: {
+                '@': './src',
+              },
+            },
+          ],
+        ],
+      }),
+    ) // 使用gulp-babel处理
     .pipe(
       through2.obj(function z(file, encoding, next) {
         this.push(file.clone());

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zens",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "MarkFlowy's ui component library.",
   "keywords": [],
   "homepage": "https://github.com/drl990114/zens#readme",
@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
-    "@ariakit/react": "^0.4.5",
+    "@ariakit/react": "^0.4.11",
     "@babel/runtime": "^7",
     "@emotion/is-prop-valid": "^1.2.2",
     "@floating-ui/dom": "^1.0.0",
@@ -101,6 +101,7 @@
     "@typescript-eslint/parser": "5.62.0",
     "@umijs/fabric": "^3",
     "babel-plugin-import": "^1.13.3",
+    "babel-plugin-module-resolver": "^5.0.2",
     "commitizen": "^4.2.5",
     "core-js": "^3.26.1",
     "cpr": "^3.0.1",

src/Box/index.tsx

@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, memo } from 'react'
 
 export interface BoxProps extends BaseComponentProps {
   ref?: React.Ref<any>
 }
 
-export const Box = forwardRef<{}, BoxProps>((props, ref) => {
+export const Box = memo(forwardRef<{}, BoxProps>((props, ref) => {
   return <div ref={ref} {...props} />
 })
+)

src/Image/ErrorTip.tsx

@@ -1,6 +1,3 @@
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-
 import styled from 'styled-components';
 
 const ErrorTipContainer = styled.div`
@@ -11,8 +8,8 @@ const ErrorTipContainer = styled.div`
   color: ${props => props.theme.errorTipColor};
 
   .zens-error-icon-box {
-    width: 50px;
-    height: 50px;
+    width: 40px;
+    height: 40px;
   }
 
   .zens-error-icon {
@@ -34,15 +31,15 @@ export interface ErrorTipProps {
   width?: number;
 }
 export const ErrorTip = (props: ErrorTipProps) => {
-  const { errortip, width = 100, height = 60 } = props;
+  const { errortip, width = 100, height = 70 } = props;
 
   return (
     <ErrorTipContainer style={{ width: `${width}px`, height: `${height}px` }}>
       <div className="zens-error-icon-box">
         <svg
           fill="none"
           stroke="currentColor"
-          stroke-width="4"
+          strokeWidth="4"
           viewBox="0 0 48 48"
           aria-hidden="true"
           focusable="false"
@@ -57,10 +54,10 @@ export const ErrorTip = (props: ErrorTipProps) => {
           ></path>
           <path
             fill="currentColor"
-            fill-rule="evenodd"
+            fillRule="evenodd"
             stroke="none"
             d="M46 38a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-4.95-4.782 1.74 1.74-3.045 3.046 3.046 3.046-1.74 1.74-3.047-3.045-3.046 3.046-1.74-1.74 3.046-3.047-3.046-3.046 1.74-1.74 3.046 3.046 3.046-3.046Z"
-            clip-rule="evenodd"
+            clipRule="evenodd"
           ></path>
           <path d="M17 15h-2v2h2v-2Z"></path>
         </svg>

src/Image/index.tsx

@@ -1,7 +1,7 @@
 import ErrorTip from './ErrorTip';
 import Img, { ImgProps as RcImageProps } from './Img';
 
-import { Loading3QuartersOutlined } from '../Icons';
+import { Icon } from '@/index';
 
 interface ImageProps extends RcImageProps {
   errorTip?: string;
@@ -11,7 +11,7 @@ const ImageView = (props: ImageProps) => {
   const { errorTip = 'load error' } = props;
   return (
     <Img
-      loader={<Loading3QuartersOutlined spin size={40} />}
+      loader={<Icon.Loading3QuartersOutlined spin size={40} />}
       unloader={<ErrorTip errortip={errorTip} />}
       {...props}
     />

src/Popover/index.tsx

@@ -49,7 +49,7 @@ const Popover: React.FC<PopoverProps> = (props) => {
         {children}
       </PopoverDisclosure>
       {!customContent && !title ? null : (
-        <PopoverWrapper render={<Box />} {...rest}>
+        <PopoverWrapper render={(p) => <Box {...p} />} {...rest}>
           {arrow ? <PopoverArrow /> : null}
           {title ? <PopoverHeading>{title}</PopoverHeading> : null}
           {customContent}

src/Tooltip/index.tsx

@@ -53,7 +53,7 @@ const Tooltip = ({
   return (
     <Ariakit.TooltipProvider placement={placement} open={open}>
       <Ariakit.TooltipAnchor render={child} />
-      <Ariakit.Tooltip render={<Box style={{ zIndex: 99 }} {...rest} />}>
+      <Ariakit.Tooltip render={p => <Box style={{ zIndex: 99 }} {...p} {...rest} />}>
         <TooltipWrapper>{title}</TooltipWrapper>
       </Ariakit.Tooltip>
     </Ariakit.TooltipProvider>

src/index.ts

@@ -17,4 +17,8 @@ export * from './Popover'
 
 export * from 'react-spinners'
 
-export * from '@ant-design/icons'
+import * as Icon from '@ant-design/icons'
+import * as AriaKit from '@ariakit/react'
+
+export { AriaKit }
+export { Icon }

tsconfig.json

@@ -15,7 +15,8 @@
     "skipLibCheck": true,
     "paths": {
       "zens": ["src/index.ts"],
-      "@@/*": [".dumi/tmp/*"]
+      "@@/*": [".dumi/tmp/*"],
+      "@/*": ["src/*"]
     }
   },
   "include": [