✨ feat(All): 组件文档 组件部分细节调整

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@marherb-work/m-bob-components",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "type": "module",
     "repository": {
         "type": "git",

src/CusButton/CusIconButton.tsx

@@ -1,12 +1,12 @@
-import { MouseEventHandler, memo, useRef } from "react";
+import { MouseEventHandler, useRef } from "react";
 import { useHover } from "ahooks";
 import { Button } from "antd";
 import { borderRadius, paddings } from "../config";
 import { backgrounds, borderColors, borderColorsOnHover } from "./buttonConfig";
 import CusComIcon, { CusComIconType } from "../CusIcon/CusComIcon";
 
 /**图标按钮 */
-function CusIconButton({
+export default function CusIconButton({
     icon,
     onClick,
     size = "m",
@@ -52,9 +52,11 @@ function CusIconButton({
                 control={isHovering}
                 size={size}
                 animation="rotate"
+                style={{
+                    cursor: "pointer",
+                }}
                 {...icon}
             />
         </Button>
     );
 }
-export default memo(CusIconButton);

src/CusButton/index.fixture.tsx

@@ -1,27 +1,51 @@
-import { Space } from "antd";
+import { Row, Space } from "antd";
 import CusButton from ".";
+import testPng from "../assets/test.png";
 
 export default () => {
     return (
         <Space direction="vertical">
-            <Space>
-                <CusButton size="el">size=el</CusButton>
-                <CusButton size="l">size=l</CusButton>
-                <CusButton size="m">size=m</CusButton>
-                <CusButton size="s">size=s</CusButton>
-                <CusButton size="es">size=es</CusButton>
-            </Space>
-            <Space>
-                <CusButton type="solid">type=solid</CusButton>
-                <CusButton type="outline">type=outline</CusButton>
-                <CusButton type="text">type=text</CusButton>
-            </Space>
-            <Space>
-                <CusButton disabled={true}>disabled</CusButton>
-            </Space>
-            <Space>
-                <CusButton block={true}>block</CusButton>
-            </Space>
+            <Row>
+                <Space>
+                    <CusButton size="el">size=el</CusButton>
+                    <CusButton size="l">size=l</CusButton>
+                    <CusButton size="m">size=m</CusButton>
+                    <CusButton size="s">size=s</CusButton>
+                    <CusButton size="es">size=es</CusButton>
+                </Space>
+            </Row>
+            <Row>
+                <Space>
+                    <CusButton type="solid">type=solid</CusButton>
+                    <CusButton type="outline">type=outline</CusButton>
+                    <CusButton type="text">type=text</CusButton>
+                </Space>
+            </Row>
+            <Row>
+                <CusButton disabled>disabled</CusButton>
+            </Row>
+            <Row>
+                <CusButton block>block</CusButton>
+            </Row>
+            <Row>
+                <Space>
+                    <CusButton
+                        leftIcon={{
+                            src: testPng,
+                        }}
+                    >
+                        leftIcon
+                    </CusButton>
+                    <CusButton
+                        leftIcon={{
+                            src: testPng,
+                            animation: "width",
+                        }}
+                    >
+                        HoverAnimation
+                    </CusButton>
+                </Space>
+            </Row>
         </Space>
     );
 };

src/CusIcon/Icons.tsx

@@ -1,12 +1,9 @@
 import Icon from "@ant-design/icons";
 
 /**自定义图标 */
-export default {
-    CloseIcon,
-};
 
 /**Modal框 关闭按钮 */
-function CloseIcon() {
+export function CloseIcon() {
     return (
         <Icon
             component={() => (

src/CusIcon/index.fixture.tsx

@@ -0,0 +1,6 @@
+import CusIconButton from "../CusButton/CusIconButton";
+import testPng from "../assets/test.png";
+
+export default function () {
+    return <CusIconButton icon={{ src: testPng }} />;
+}

src/CusInput/index.fixture.tsx

@@ -0,0 +1,56 @@
+import { Divider, Space } from "antd";
+import CusInput from ".";
+import TestPng from "../assets/test.png";
+import CusTextArea from "./CusTextArea";
+
+export default function () {
+    return (
+        <div
+            style={{
+                padding: "1rem",
+                backgroundColor: "#ffffff1f",
+            }}
+        >
+            <Space direction="vertical" size="large">
+                <Space>
+                    <CusInput size="el" placeholder="size=el" />
+                    <CusInput size="l" placeholder="size=l" />
+                    <CusInput size="m" placeholder="size=m" />
+                </Space>
+                <Space>
+                    <CusInput state="default" placeholder="state=default" />
+                    <CusInput state="success" placeholder="state=success" />
+                    <CusInput state="warning" placeholder="state=warning" />
+                    <CusInput state="error" placeholder="state=error" />
+                </Space>
+                <Space>
+                    <CusInput
+                        leftIcon={{ src: TestPng }}
+                        placeholder="leftIcon"
+                    />
+                    <CusInput
+                        rightIcon={{ src: TestPng }}
+                        placeholder="rightIcon"
+                    />
+                </Space>
+                <Space>
+                    <CusInput type="email" placeholder="type=email" />
+                </Space>
+                <Divider />
+                <Space>
+                    <CusInput label="label" placeholder="label" />
+                    <CusInput
+                        feedback="feedback"
+                        state="warning"
+                        placeholder="feedback"
+                    />
+                    <CusInput tip="tip" placeholder="tip" />
+                </Space>
+                <Divider />
+                <Space>
+                    <CusTextArea placeholder="textArea" />
+                </Space>
+            </Space>
+        </div>
+    );
+}

src/CusInput/inputConfig.ts

@@ -1,30 +1,30 @@
-import SuccessIcon from "./assets/success.png";
-import WarningIcon from "./assets/warning.png";
-import ErrorIcon from "./assets/error.png";
+import SuccessIcon from "../assets/success.png";
+import WarningIcon from "../assets/warning.png";
+import ErrorIcon from "../assets/error.png";
 
 // input框主题色
 export const themeColor = {
-  default: "#FFFFFF",
-  success: "#55EB47",
-  warning: "#FF9933",
-  error: "#FF3333",
+    default: "#FFFFFF",
+    success: "#55EB47",
+    warning: "#FF9933",
+    error: "#FF3333",
 };
 
 // 反馈图标
 export const feedbackIcon = {
-  success: SuccessIcon,
-  warning: WarningIcon,
-  error: ErrorIcon,
+    success: SuccessIcon,
+    warning: WarningIcon,
+    error: ErrorIcon,
 };
 // 反馈图标大小
 export const feedbackIconSize = {
-  el: 1.25,
-  l: 1.125,
-  m: 1,
+    el: 1.25,
+    l: 1.125,
+    m: 1,
 };
 // 反馈图标间距
 export const feedbackGap = {
-  el: 0.5,
-  l: 0.44,
-  m: 0.38,
+    el: 0.5,
+    l: 0.44,
+    m: 0.38,
 };

src/CusListSelect/index.fixture.tsx

@@ -0,0 +1,27 @@
+import { useState } from "react";
+import CusListSelect from ".";
+import { Space } from "antd";
+
+export default function () {
+    const [value, setValue] = useState("one");
+
+    return (
+        <div
+            style={{
+                padding: "1rem",
+                backgroundColor: "#ffffff",
+            }}
+        >
+            <Space>
+                <CusListSelect
+                    options={[
+                        { label: "one", value: "one" },
+                        { label: "two", value: "two" },
+                    ]}
+                    value={value}
+                    onChange={setValue}
+                />
+            </Space>
+        </div>
+    );
+}

src/CusListSelect/style.scss

@@ -3,6 +3,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
+        cursor: pointer;
         &:nth-last-child(n + 2) {
             border-bottom: 1px solid rgba(255, 255, 255, 0.05);
         }

src/CusMenu/index.fixture.tsx

@@ -0,0 +1,37 @@
+import CusMenu from ".";
+import TestPng from "../assets/test.png";
+
+export default function () {
+    return (
+        <div
+            style={{
+                padding: "1rem",
+                backgroundColor: "#ffffff1f",
+            }}
+        >
+            <CusMenu
+                options={[
+                    {
+                        icon: (
+                            <img
+                                src={TestPng}
+                                alt=""
+                                style={{ width: "100%" }}
+                            />
+                        ),
+                        label: "one",
+                        onClick: () => {
+                            alert("one");
+                        },
+                    },
+                    {
+                        label: "two",
+                        onClick: () => {
+                            alert("two");
+                        },
+                    },
+                ]}
+            />
+        </div>
+    );
+}

src/CusMenu/style.scss

@@ -17,15 +17,18 @@
         align-items: center;
         color: #ffffff;
         background: rgba(255, 255, 255, 0.05);
+        padding-left: 1rem;
         cursor: pointer;
         &:hover {
             color: #0b4367;
         }
         .item-icon {
             width: 2.5rem;
             height: 2.5rem;
-            margin-left: 1rem;
             margin-right: 0.5rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
         .item-text {
             font-size: 1rem;

src/CusModal/index.fixture.tsx

@@ -0,0 +1,40 @@
+import { Space } from "antd";
+import CusModal from ".";
+import CusButton from "../CusButton";
+import { useBoolean } from "ahooks";
+import { useEffect } from "react";
+
+export default function () {
+    const [open, setOpen] = useBoolean(false);
+    const [loading, setLoading] = useBoolean(false);
+
+    useEffect(() => {
+        if (loading) {
+            setTimeout(() => {
+                setLoading.setFalse();
+            }, 1000);
+        }
+    }, [loading]);
+
+    return (
+        <Space>
+            <CusButton onClick={setOpen.setTrue}>modal</CusButton>
+            <CusModal
+                open={open}
+                onCancel={() => {
+                    setOpen.setFalse();
+                    setLoading.setFalse();
+                }}
+                loading={loading}
+            >
+                <Space
+                    style={{
+                        padding: "1rem",
+                    }}
+                >
+                    <CusButton onClick={setLoading.setTrue}>loading</CusButton>
+                </Space>
+            </CusModal>
+        </Space>
+    );
+}

src/CusText/index.fixture.tsx

@@ -0,0 +1,19 @@
+import { Space } from "antd";
+import CusText from ".";
+
+export default function () {
+    return (
+        <Space direction="vertical">
+            <Space>
+                <CusText style="b1">style=b1</CusText>
+                <CusText style="b2">style=b2</CusText>
+            </Space>
+            <Space>
+                <CusText outline="regular">outline=regular</CusText>
+                <CusText outline="medium">outline=medium</CusText>
+                <CusText outline="semibold">outline=semibold</CusText>
+                <CusText outline="bold">outline=bold</CusText>
+            </Space>
+        </Space>
+    );
+}