@xhsreds/reds-rn-next 0.0.23 → 0.1.0

package/lib/types/components/Collapse/interface/index.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+type ActiveValueType = Array<string | number>;
+export interface ICollapseContext {
+    isActiveValue?: (key: string | number) => boolean;
+    addActiveValue?: (key: string | number) => void;
+    removeActiveValue?: (key: string | number) => void;
+    activeValue?: Array<string | number>;
+}
+export interface RedsCollapse {
+    activeValue?: ActiveValueType;
+    accordion?: boolean;
+    defaultActiveValue?: ActiveValueType;
+    onChange?: (activeValue: ActiveValueType) => void;
+    children: ReactNode;
+}
+export interface RedsCollapseEvent {
+}
+export declare const CollapseDefaultProps: {
+    activeValue: never[];
+    accordion: boolean;
+    defaultActiveValue: never[];
+    children: null;
+};
+export {};

package/lib/types/components/Collapse/test/demo.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function App(): React.JSX.Element;

package/lib/types/components/Collapse/test/index.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/Collapse/test/index.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/react-native/extend-expect";

package/lib/types/components/ConfigProvider/hooks/ConfigCache/interface.d.ts

@@ -7,7 +7,7 @@ export type ThemeColor = {
     [key in LightToken | DarkToken]: ValueOf<typeof lightColor | typeof darkColor>;
 };
 export type ColorMode = "light" | "dark";
-export type Component = "Button" | "Popover" | "Text" | "Tag" | "Switch";
+export type Component = "Button" | "Popover" | "Text" | "Tag" | "Switch" | "Icon" | "Result" | "Empty";
 export type ComponentColor = {
     [key in Component]: ThemeColor;
 };

package/lib/types/components/ConfigProvider/index.d.ts

@@ -1,3 +1,5 @@
 import ConfigProvider from "./ConfigProvider";
+import * as ConfigProviderType from "./interface";
 export { useThemeColor } from "./hooks/themeToken/useThemeToken";
 export default ConfigProvider;
+export { ConfigProvider, ConfigProviderType };

package/lib/types/components/Empty/Empty.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { RedsEmpty } from "./interface/index";
+declare const Empty: {
+    (props: RedsEmpty): React.JSX.Element;
+    defaultProps: {
+        description: string;
+    };
+};
+export default Empty;

package/lib/types/components/Empty/demo/index.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function App(): React.JSX.Element;

package/lib/types/components/Empty/hooks/useDefaultIcon.d.ts

@@ -0,0 +1,5 @@
+export declare const defaultIcon: {
+    default: {
+        image: string;
+    };
+};

package/lib/types/components/Empty/index.d.ts

@@ -0,0 +1,4 @@
+import Empty from "./Empty";
+import * as EmptyType from "./interface";
+export default Empty;
+export { Empty, EmptyType };

package/lib/types/components/Empty/interface/index.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export interface RedsEmpty {
+    description?: string;
+    action?: ReactNode;
+    image?: ReactNode;
+}
+export declare const EmptyDefaultProps: {
+    description: string;
+};

package/lib/types/components/Empty/styles.d.ts

@@ -0,0 +1,20 @@
+declare const createStyles: () => {
+    container: {
+        alignItems: "center";
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    description: {
+        marginTop: number;
+    };
+    descriptionText: {
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+        lineHeight: number;
+        color: string;
+    };
+    action: {
+        marginTop: number;
+    };
+};
+export default createStyles;

package/lib/types/components/Empty/test/index.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/Empty/test/index.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/react-native/extend-expect";

package/lib/types/components/Image/Image.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { Image as RNImage, ImageProps } from "react-native";
+import { RedsImage } from "./interface/index";
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<RedsImage & Omit<ImageProps, keyof RedsImage> & React.RefAttributes<RNImage>>>;
+export default _default;

package/lib/types/components/Image/index.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
-import { Image as RNImage, ImageProps } from "react-native";
-import { RedsImage } from "./interface/index";
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<RedsImage & Omit<ImageProps, keyof RedsImage> & React.RefAttributes<RNImage>>>;
-export default _default;
+import Image from "./Image";
+import * as ImageType from "./interface";
+export default Image;
+export { Image, ImageType };

package/lib/types/components/Popover/Popover.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { RedsPopover } from "./interface/index";
+declare const _default: ({ mode, opacity, content, children, placement, closeOnClickAgain, trigger, zIndex, visible: defaultVisible, onVisibleChange, }: RedsPopover) => React.JSX.Element;
+export default _default;

package/lib/types/components/Popover/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { RedsPopover } from "./interface/index";
-declare const _default: ({ mode, opacity, content, children, placement, closeOnClickAgain, trigger, zIndex, visible: defaultVisible, onVisibleChange, }: RedsPopover) => React.JSX.Element;
-export default _default;
+import Popover from "./Popover";
+import * as PopoverType from "./interface";
+export default Popover;
+export { Popover, PopoverType };

package/lib/types/components/Popover/styles.d.ts

@@ -0,0 +1,20 @@
+declare const styles: {
+    PopoverContainer: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    thumb: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        justifyContent: "center";
+        alignItems: "center";
+        position: "absolute";
+        left: number;
+    };
+};
+export default styles;

package/lib/types/components/Result/Result.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { RedsResult } from "./interface/index";
+declare const Result: {
+    (props: RedsResult): React.JSX.Element;
+    defaultProps: {
+        type: string;
+        title: string;
+        description: string;
+    };
+};
+export default Result;

package/lib/types/components/Result/demo/index.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function App(): React.JSX.Element;

package/lib/types/components/Result/hooks/useDefaultIcon.d.ts

@@ -0,0 +1,14 @@
+export declare const defaultIcon: {
+    Success: {
+        title: string;
+        image: string;
+    };
+    Warning: {
+        title: string;
+        image: string;
+    };
+    Info: {
+        title: string;
+        image: string;
+    };
+};

package/lib/types/components/Result/index.d.ts

@@ -0,0 +1,4 @@
+import Result from "./Result";
+import * as ResultType from "./interface";
+export default Result;
+export { Result, ResultType };

package/lib/types/components/Result/interface/index.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+export interface RedsResult {
+    type?: "Success" | "Warning" | "Info";
+    title?: string;
+    description?: string;
+    action?: ReactNode;
+    image?: ReactNode;
+}
+export declare const ResultDefaultProps: {
+    type: string;
+    title: string;
+    description: string;
+};

package/lib/types/components/Result/styles.d.ts

@@ -0,0 +1,29 @@
+declare const createStyles: () => {
+    container: {
+        alignItems: "center";
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    title: {
+        marginTop: number;
+    };
+    titleText: {
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+        lineHeight: number;
+        color: string;
+    };
+    description: {
+        marginTop: number;
+    };
+    descriptionText: {
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+        lineHeight: number;
+        color: string;
+    };
+    action: {
+        marginTop: number;
+    };
+};
+export default createStyles;

package/lib/types/components/Result/test/Demo.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function Demo(): React.JSX.Element;

package/lib/types/components/Result/test/index.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/Result/test/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/Switch/Switch.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { RedsSwitch } from "./interface/index";
+declare const Switch: {
+    ({ value, defaultValue, onChange, onClick, trackOnColor, trackOffColor, disabled }: RedsSwitch): React.JSX.Element;
+    defaultProps: {
+        value: undefined;
+        defaultValue: boolean;
+        disabled: boolean;
+        trackOnColor: string;
+        trackOffColor: string;
+    };
+};
+export default Switch;

package/lib/types/components/Switch/index.d.ts

@@ -1,13 +1,4 @@
-import React from "react";
-import { RedsSwitch } from "./interface/index";
-declare const Switch: {
-    ({ value, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSwitch): React.JSX.Element;
-    defaultProps: {
-        value: undefined;
-        defaultValue: boolean;
-        disabled: boolean;
-        trackOnColor: string;
-        trackOffColor: string;
-    };
-};
+import Switch from "./Switch";
+import * as SwitchType from "./interface";
 export default Switch;
+export { Switch, SwitchType };

package/lib/types/components/Tag/Tag.d.ts

@@ -0,0 +1,4 @@
+import { FunctionComponent } from "react";
+import { RedsTag } from "./interface";
+declare const Tag: FunctionComponent<RedsTag>;
+export default Tag;

package/lib/types/components/Tag/index.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react";
-import { RedsTag } from "./interface";
-declare const Tag: FunctionComponent<RedsTag>;
+import Tag from "./Tag";
+import * as TagType from "./interface";
 export default Tag;
+export { Tag, TagType };

package/lib/types/components/Tag/interface/index.d.ts

@@ -1,3 +1,4 @@
+import { GestureResponderEvent } from "react-native";
 export interface RedsTag {
     content?: string | Function;
     type?: "primary" | "default" | "warning" | "success" | "info" | "ghost";
@@ -6,15 +7,13 @@ export interface RedsTag {
     borderRadius?: number;
     disabled?: boolean;
     shape?: "square" | "round" | "mark";
-    checkable?: boolean;
-    checked?: boolean;
     closeabled?: boolean;
     icon?: string | any;
     afterIcon?: string | any;
     closeIcon?: string | any;
     children?: string | any;
-    onCheck?: (value?: any) => any;
     onClose?: (value?: any) => any;
+    onClick?: (value: GestureResponderEvent) => any;
 }
 export interface RedsTagEvent {
 }
@@ -26,8 +25,6 @@ export declare const TagDefaultProps: {
     borderRadius: undefined;
     disabled: boolean;
     shape: string;
-    checkable: boolean;
-    checked: boolean;
     closeabled: boolean;
     icon: undefined;
     afterIcon: undefined;

package/lib/types/components/Tag/styles.d.ts

@@ -0,0 +1,20 @@
+declare const styles: {
+    TagContainer: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    thumb: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        justifyContent: "center";
+        alignItems: "center";
+        position: "absolute";
+        left: number;
+    };
+};
+export default styles;

package/lib/types/components/Text/Text.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { RedsTextReal } from "./interface";
+declare const _default: (props: RedsTextReal) => import("react").JSX.Element;
+export default _default;

package/lib/types/components/Text/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { RedsTextReal } from "./interface";
-declare const _default: (props: RedsTextReal) => import("react").JSX.Element;
-export default _default;
+import Text from "./Text";
+import * as TextType from "./interface";
+export default Text;
+export { Text, TextType };

package/lib/types/index.d.ts

@@ -1,10 +1,10 @@
-import Tag from "./components/Tag";
-import Image from "./components/Image";
-import Button from "./components/Button";
-import Popover from "./components/Popover";
-import Switch from "./components/Switch";
-import ConfigProvider, { useThemeColor } from "./components/ConfigProvider";
-import Text from "./components/Text";
-export * from "./components/Popover/interface";
-export * from "./components/Image/interface";
-export { Button, Popover, Switch, ConfigProvider, useThemeColor, Text, Tag, Image };
+export * from "./components/Tag";
+export * from "./components/Image";
+export * from "./components/Button";
+export * from "./components/Popover";
+export * from "./components/Switch";
+export * from "./components/ConfigProvider";
+export * from "./components/Text";
+export * from "./components/Collapse";
+export * from "./components/Empty";
+export * from "./components/Result";

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.0.23",
+  "version": "0.1.0",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
     "@floating-ui/react-native": "~0.10.6",
     "dayjs": "^1.10.7",
     "react-native-svg": "~15.4.0",
-    "@xhsreds/reds-token-next": "0.0.13"
+    "@xhsreds/reds-token-next": "0.1.0"
   },
   "peerDependencies": {
     "react": "~18.2.0",

package/src/components/Button/{index.tsx → Button.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 import { TouchableWithoutFeedback, View, Text, StyleSheet, ViewStyle, TextStyle } from "react-native";
 import { RedsButton, ButtonDefaultProps } from "./interface";
-import { sizeMap, getVariantStyles } from "./styleMap";
+import { sizeMap, getVariantStyles, iconStyle } from "./styleMap";
 
 const styles = StyleSheet.create({
   button: {
@@ -11,6 +11,7 @@ const styles = StyleSheet.create({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
+    flexDirection: "row",
   },
   disabledButton: {
     opacity: 0.3,
@@ -23,7 +24,7 @@ const styles = StyleSheet.create({
 
 const Button: React.FC<RedsButton> = (props) => {
   const finalProps = { ...(ButtonDefaultProps as RedsButton), ...props };
-  const { size, block, disabled, children, style = {}, onClick } = finalProps;
+  const { size, block, disabled, children, style = {}, onClick, iconLeft, iconRight } = finalProps;
   const sizeStyles = sizeMap[size!];
   const variantStyles = getVariantStyles(finalProps);
   const buttonStyles: ViewStyle[] = [styles.button, sizeStyles.button, variantStyles.button, style];
@@ -40,7 +41,9 @@ const Button: React.FC<RedsButton> = (props) => {
   return (
     <TouchableWithoutFeedback onPress={disabled ? undefined : onClick}>
       <View style={buttonStyles}>
+        {iconLeft && <View style={iconStyle.left}>{iconLeft}</View>}
         <Text style={textStyles}>{children}</Text>
+        {iconRight && <View style={iconStyle.right}>{iconRight}</View>}
       </View>
     </TouchableWithoutFeedback>
   );

package/src/components/Button/demo/index.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect, useState } from "react";
 import { View, Text, StyleSheet, Alert, ScrollView } from "react-native";
 import { Button } from "@xhs/reds-rn-next";
+import { Icon } from "react-native-paper";
 
 const styles = StyleSheet.create({
   container: {
@@ -23,7 +24,9 @@ export default function App() {
   const onClick = () => Alert.alert(Math.random().toFixed(2));
   return (
     <View style={styles.container}>
-      <Button style={styles.item}>默认用法</Button>
+      <Button style={styles.item} iconLeft={<Text>🚀</Text>} iconRight={<Text>🚀</Text>}>
+        默认用法
+      </Button>
       <Button style={styles.item} onClick={onClick} size="xLarge">
         小宽
       </Button>

package/src/components/Button/doc/index.mdx

@@ -10,19 +10,21 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性     | 描述                         | 类型              | 默认值  |
-| -------- | ---------------------------- | ----------------- | ------- |
-| size     | 按钮尺寸                     | RedsButtonSize    | medium  |
-| type     | 按钮类型                     | RedsButtonType    | default |
-| variant  | 强调状态                     | RedsButtonVariant | fill    |
-| shape    | 形状(暂时设计规范只支持胶囊) | "capsule"         | capsule |
-| block    | 按钮是否撑满父元素宽度       | boolean           | false   |
-| disabled | 按钮禁用或失效               | boolean           | false   |
-| style    | 样式注入                     | ViewStyle         | `{}`    |
-| children | 按钮禁用或失效               | React.ReactNode   |         |
+| 属性      | 描述                         | 类型              | 默认值  |
+| --------- | ---------------------------- | ----------------- | ------- |
+| size      | 按钮尺寸                     | RedsButtonSize    | medium  |
+| type      | 按钮类型                     | RedsButtonType    | default |
+| variant   | 强调状态                     | RedsButtonVariant | fill    |
+| shape     | 形状(暂时设计规范只支持胶囊) | "capsule"         | capsule |
+| block     | 按钮是否撑满父元素宽度       | boolean           | false   |
+| disabled  | 按钮禁用或失效               | boolean           | false   |
+| style     | 样式注入                     | ViewStyle         | `{}`    |
+| children  | 按钮禁用或失效               | React.ReactNode   |         |
+| iconLeft  | 左图标                       | React.ReactNode   |         |
+| iconRight | 右图标                       | React.ReactNode   |         |
 
 ### Events
 
-| 事件  | 描述         | 类型                                   | 默认值 |
-| ----- | ------------ | -------------------------------------- | ------ |
-| click | 被点击时触发 | (value: GestureResponderEvent) => void |        |
+| 事件    | 描述         | 类型                                   | 默认值 |
+| ------- | ------------ | -------------------------------------- | ------ |
+| onClick | 被点击时触发 | (value: GestureResponderEvent) => void |        |

package/src/components/Button/index.ts

@@ -0,0 +1,5 @@
+import Button from "./Button";
+import * as ButtonType from "./interface";
+
+export default Button;
+export { Button, ButtonType };

package/src/components/Button/interface/index.ts

@@ -12,6 +12,8 @@ export interface RedsButton {
   disabled?: boolean;
   style?: ViewStyle;
   children?: React.ReactNode;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
   onClick?: (value: GestureResponderEvent) => void;
 }
 

package/src/components/Button/styleMap.ts

@@ -125,3 +125,12 @@ export const getVariantStyles = (props: RedsButton) => {
   };
   return styles[props.variant!];
 };
+
+export const iconStyle = {
+  left: {
+    marginRight: 5,
+  },
+  right: {
+    marginLeft: 5,
+  },
+};

package/src/components/Button/test/__snapshots__/index.test.tsx.snap

@@ -28,6 +28,7 @@ exports[`Button Component > applies the correct styles for size 1`] = `
         "borderStyle": "solid",
         "borderWidth": 0.5,
         "display": "flex",
+        "flexDirection": "row",
         "justifyContent": "center",
       },
       {
@@ -91,6 +92,7 @@ exports[`Button Component > applies the correct styles when block is true 1`] =
         "borderStyle": "solid",
         "borderWidth": 0.5,
         "display": "flex",
+        "flexDirection": "row",
         "justifyContent": "center",
       },
       {
@@ -157,6 +159,7 @@ exports[`Button Component > applies the correct styles when disabled is true 1`]
         "borderStyle": "solid",
         "borderWidth": 0.5,
         "display": "flex",
+        "flexDirection": "row",
         "justifyContent": "center",
       },
       {

package/src/components/Button/test/index.test.tsx

@@ -3,7 +3,7 @@ import { render, fireEvent } from "@testing-library/react-native";
 import { describe, it, expect, vi } from "vitest";
 
 import Button from "../index";
-import { ViewStyle } from "react-native";
+import { ViewStyle, Text } from "react-native";
 
 describe("Button Component", () => {
   it("renders correctly", () => {
@@ -53,4 +53,28 @@ describe("Button Component", () => {
 
     expect(mockFn).toHaveBeenCalled();
   });
+  it("renders correctly with iconLeft", () => {
+    const { getByText, getByTestId } = render(<Button iconLeft={<Text testID="icon-left">🚀</Text>}>Click Me</Button>);
+    expect(getByText("Click Me")).toBeTruthy();
+    expect(getByTestId("icon-left")).toBeTruthy();
+  });
+
+  it("renders correctly with iconRight", () => {
+    const { getByText, getByTestId } = render(
+      <Button iconRight={<Text testID="icon-right">🚀</Text>}>Click Me</Button>,
+    );
+    expect(getByText("Click Me")).toBeTruthy();
+    expect(getByTestId("icon-right")).toBeTruthy();
+  });
+
+  it("renders correctly with both iconLeft and iconRight", () => {
+    const { getByText, getByTestId } = render(
+      <Button iconLeft={<Text testID="icon-left">🚀</Text>} iconRight={<Text testID="icon-right">🚀</Text>}>
+        Click Me
+      </Button>,
+    );
+    expect(getByText("Click Me")).toBeTruthy();
+    expect(getByTestId("icon-left")).toBeTruthy();
+    expect(getByTestId("icon-right")).toBeTruthy();
+  });
 });