@xhsreds/reds-rn-next 0.0.2-beta20240708190837 → 0.0.2

package/rollup.config.js

@@ -49,29 +49,29 @@ module.exports = [
     ],
     external: [...externalDeps, ...externalPeerDeps],
   },
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        dir: "./lib/cjs",
-        format: "cjs",
-        sourcemap: true,
-        chunkFileNames: "_chunks/[hash].js",
-        exports: "named",
-      },
-    ],
-    plugins: [
-      multiInput({ relative: "src/" }),
-      esbuild({}),
-      babel({
-        presets: ["@babel/preset-env", "@babel/preset-react"],
-        extensions: [".js", ".jsx", ".es6", ".es", ".mjs", ".vue", ".ts", ".tsx"],
-      }),
-      commonjs({}),
-      resolve({}),
-      json(),
-      dts(),
-    ],
-    external: [...externalDeps, ...externalPeerDeps],
-  },
+  // {
+  //   input: "src/index.ts",
+  //   output: [
+  //     {
+  //       dir: "./lib/cjs",
+  //       format: "cjs",
+  //       sourcemap: true,
+  //       chunkFileNames: "_chunks/[hash].js",
+  //       exports: "named",
+  //     },
+  //   ],
+  //   plugins: [
+  //     multiInput({ relative: "src/" }),
+  //     esbuild({}),
+  //     babel({
+  //       presets: ["@babel/preset-env", "@babel/preset-react"],
+  //       extensions: [".js", ".jsx", ".es6", ".es", ".mjs", ".vue", ".ts", ".tsx"],
+  //     }),
+  //     commonjs({}),
+  //     resolve({}),
+  //     json(),
+  //     dts(),
+  //   ],
+  //   external: [...externalDeps, ...externalPeerDeps],
+  // },
 ];

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

@@ -0,0 +1,50 @@
+import React, { useRef, useEffect, useState } from "react";
+import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
+import { Button } from "@xhs/reds-rn-next";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: 100,
+    paddingBottom: 100,
+  },
+  scrollView: {
+    backgroundColor: "pink",
+  },
+  root: {
+    flex: 1,
+    backgroundColor: "blue",
+  },
+});
+const Desc = ({ children = "" }) => {
+  return <Text>{children}</Text>;
+};
+const Br = (props) => <View style={{ height: props.height || 20 }}></View>;
+
+export default function App() {
+  const [value, setValue] = useState(false);
+  const [valueStr, setValueStr] = useState(value.toString());
+  const onClick = (e) => setValue((v) => !v);
+  const onChange = (v) => setValueStr(v.toString());
+  return (
+    <View style={styles.container}>
+      <Desc>默认用法</Desc>
+      <Button></Button>
+      <Br />
+
+      <Desc>设置默认值</Desc>
+      <Button defaultValue={true}></Button>
+      <Br />
+
+      <Desc>修改开关颜色</Desc>
+      <Button trackOnColor={"#1b8bcd"} trackOffColor={"#da36c9"}></Button>
+      <Br />
+
+      <Desc>受控用法</Desc>
+      <Text>当前值:{valueStr}</Text>
+      <Button value={value} onClick={onClick} onChange={onChange}></Button>
+      <Br />
+    </View>
+  );
+}

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

@@ -0,0 +1,50 @@
+import React, { useRef, useEffect, useState } from "react";
+import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
+import { Button } from "@xhs/reds-rn-next";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: 100,
+    paddingBottom: 100,
+  },
+  scrollView: {
+    backgroundColor: "pink",
+  },
+  root: {
+    flex: 1,
+    backgroundColor: "blue",
+  },
+});
+const Desc = ({ children = "" }) => {
+  return <Text>{children}</Text>;
+};
+const Br = (props) => <View style={{ height: props.height || 20 }}></View>;
+
+export default function App() {
+  const [value, setValue] = useState(false);
+  const [valueStr, setValueStr] = useState(value.toString());
+  const onClick = (e) => setValue((v) => !v);
+  const onChange = (v) => setValueStr(v.toString());
+  return (
+    <View style={styles.container}>
+      <Desc>默认用法</Desc>
+      <Button></Button>
+      <Br />
+
+      <Desc>设置默认值</Desc>
+      <Button defaultValue={true}></Button>
+      <Br />
+
+      <Desc>修改开关颜色</Desc>
+      <Button trackOnColor={"#1b8bcd"} trackOffColor={"#da36c9"}></Button>
+      <Br />
+
+      <Desc>受控用法</Desc>
+      <Text>当前值:{valueStr}</Text>
+      <Button value={value} onClick={onClick} onChange={onChange}></Button>
+      <Br />
+    </View>
+  );
+}

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

@@ -0,0 +1,18 @@
+## API
+
+### Props
+
+| 属性            | 描述             | 类型    | 默认值                |
+| --------------- | ---------------- | ------- | --------------------- |
+| value           | 当前的状态       | boolean |                       |
+| default-value   | 默认状态         | boolean | false                 |
+| disabled        | 是否显示气泡     | boolean | false                 |
+| track-on-color  | 开关开启时的颜色 | string  | rgba(255, 36, 66, 1)  |
+| track-off-color | 开关关闭时的颜色 | string  | rgba(48, 48, 52, 0.1) |
+
+### Events
+
+| 事件   | 描述               | 类型                     | 默认值 |
+| ------ | ------------------ | ------------------------ | ------ |
+| change | 当值发生变化时触发 | (value: boolean) => void |        |
+| click  | 被点击时触发       | (value: Event) => void   |        |

package/src/components/Button/index.tsx

@@ -4,7 +4,6 @@ import { Text, View } from "react-native";
 export default forwardRef<View>((props: any, ref) => {
   return (
     <View
-      // onPress={(e) => props?.onPress?.(e)}
       ref={ref}
       style={{
         paddingLeft: 24,

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

@@ -1,33 +1,21 @@
-/**
- * 按钮大小
- */
-export type ButtonSize = "mini" | "small" | "medium" | "large" | "extraLarge";
+import { GestureResponderEvent } from "react-native";
+import { lightColor } from "@xhs/reds-token-next";
 
-/**
- * 按钮类型
- */
-export type ButtonType = "primary" | "outlined" | "text" | "dark" | "filledGray" | "outlinedGray";
-
-/**
- * button
- */
 export interface RedsButton {
-  name?: string;
-  size?: ButtonSize;
-  /**
-   * 图标
-   */
-  icon?: string;
-  /**
-   * 按钮失效状态
-   */
+  value?: boolean;
+  defaultValue?: boolean;
   disabled?: boolean;
-  type?: ButtonType;
-  /**
-   * 将按钮宽度调整为其父宽度的选项
-   */
-  block?: boolean;
-  active?: boolean;
-  fixedWidth?: string;
-  loading?: boolean;
+  onClick?: (event: GestureResponderEvent) => void;
+  onChange?: (value: boolean) => void;
+  trackOnColor?: string;
+  trackOffColor?: string;
 }
+
+export const defaultProps: RedsButton = {
+  defaultValue: false,
+  disabled: false,
+  onClick: (event: GestureResponderEvent) => {},
+  onChange: (value: boolean) => {},
+  trackOnColor: lightColor.Primary,
+  trackOffColor: lightColor.Fill2,
+};

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

@@ -0,0 +1,18 @@
+import { describe, it, expect } from "vitest";
+import { render, fireEvent, userEvent } from "@testing-library/react-native";
+import "@testing-library/react-native/extend-expect";
+import { Pressable, Text, View } from "react-native";
+import Button from "../index";
+
+describe("Button", () => {
+  it(":base", async () => {
+    let isOn = false;
+    const wrapper = render(<Button onChange={(v) => (isOn = v)}></Button>);
+    expect(wrapper.UNSAFE_root.props.defaultValue).toBe(false);
+    await fireEvent(wrapper.UNSAFE_root.children[0], "press");
+    expect(isOn).toBe(true);
+
+    await fireEvent(wrapper.UNSAFE_root.children[0], "press");
+    expect(isOn).toBe(false);
+  });
+});

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

@@ -0,0 +1,9 @@
+import { describe, it, expect } from "vitest";
+import { render, fireEvent, userEvent } from "@testing-library/react-native";
+import "@testing-library/react-native/extend-expect";
+import { Pressable, Text, View } from "react-native";
+import Button from "../index";
+
+describe("Button", () => {
+  it(":base", async () => {});
+});

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -0,0 +1,48 @@
+import { ConfigProviderProps } from "./interface";
+import { configCache } from "./hooks/ConfigCache/ConfigCache";
+import { ConfigProviderContext, IConfigProviderContext } from "./hooks/ConfigContext/ConfigContext";
+
+const ConfigProvider = (props: ConfigProviderProps) => {
+  const {
+    id = "root",
+    theme = {
+      colorMode: "light",
+      inherit: true,
+    },
+    parentId = "root",
+    children,
+  } = props;
+
+  const themeCache = {
+    colorMode: theme.colorMode || "light",
+    token: {
+      lightColor: {
+        ...theme.token?.lightColor,
+      },
+      darkColor: {
+        ...theme.token?.darkColor,
+      },
+      alwaysColor: {
+        ...theme.token?.alwaysColor,
+      },
+      components: {
+        ...theme.token?.components,
+      },
+    },
+    inherit: theme.inherit,
+  };
+
+  configCache.addNewConfigCache({
+    id,
+    themeCache,
+    parentId,
+  });
+
+  const configProviderContextValue: IConfigProviderContext = {
+    id: id,
+  };
+
+  return <ConfigProviderContext.Provider value={configProviderContextValue}>{children}</ConfigProviderContext.Provider>;
+};
+
+export default ConfigProvider;

package/src/components/ConfigProvider/demo/base.jsx

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { Text, TouchableOpacity } from "react-native";
+import { ConfigProvider, useThemeColor } from "@xhs/reds-rn-next";
+
+const App = () => {
+  const themeColor = useThemeColor();
+  return (
+    <View style={{ height: 200, backgroundColor: themeColor.Bg }}>
+      <Text style={{ color: themeColor.Info }}>切换主题文字展示</Text>
+    </View>
+  );
+};
+
+const App2 = () => {
+  const themeColor = useThemeColor();
+  return (
+    <View style={{ height: 200, backgroundColor: themeColor.Bg }}>
+      <Text style={{ color: themeColor.Info }}>主题定制文字展示</Text>
+    </View>
+  );
+};
+
+export default () => {
+  // 切换主题
+  const [colorMode, setColorMode] = useState < ColorMode > "light";
+  const changeColorMode = () => {
+    setColorMode((preColorMode) => (preColorMode === "light" ? "dark" : "light"));
+  };
+
+  // 主题定制
+  const [colorMode2, setColorMode2] = useState < ColorMode > "light";
+  const [infoLightColor, setInfoLightColor] = useState < string > "red";
+  const [infoDarkColor, setInfoDarkColor] = useState < string > "black";
+  const changeInfoToken = () => {
+    setInfoLightColor((preInfoLightColor) => (preInfoLightColor === "red" ? "blue" : "red"));
+    setInfoDarkColor((preInfoDarkColor) => (preInfoDarkColor === "black" ? "white" : "black"));
+  };
+  const changeColorMode2 = () => {
+    setColorMode2((preColorMode) => (preColorMode === "light" ? "dark" : "light"));
+  };
+
+  // 组件级主题定制
+  const [colorMode3, setColorMode3] = useState < ColorMode > "light";
+  const [infoLightColor3, setInfoLightColor3] = useState < string > "red";
+  const [infoDarkColor3, setInfoDarkColor3] = useState < string > "black";
+  const changeInfoToken3 = () => {
+    setInfoLightColor3((preInfoLightColor) => (preInfoLightColor === "red" ? "blue" : "red"));
+    setInfoDarkColor3((preInfoDarkColor) => (preInfoDarkColor === "black" ? "white" : "black"));
+  };
+  const changeColorMode3 = () => {
+    setColorMode3((preColorMode) => (preColorMode === "light" ? "dark" : "light"));
+  };
+
+  return (
+    <>
+      <TouchableOpacity onPress={changeColorMode}>
+        <Text>切换主题</Text>
+      </TouchableOpacity>
+      <ConfigProvider
+        theme={{
+          colorMode: colorMode,
+        }}
+      >
+        <App />
+      </ConfigProvider>
+      <TouchableOpacity onPress={changeColorMode2}>
+        <Text>切换主题</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={changeInfoToken}>
+        <Text>主题定制</Text>
+      </TouchableOpacity>
+      <ConfigProvider
+        theme={{
+          colorMode: colorMode2,
+          token: {
+            lightColor: {
+              Info: infoLightColor,
+            },
+            darkColor: {
+              Info: infoDarkColor,
+            },
+          },
+        }}
+      >
+        <App2 />
+      </ConfigProvider>
+      <TouchableOpacity onPress={changeColorMode3}>
+        <Text>切换主题</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={changeInfoToken3}>
+        <Text>组件级主题切换</Text>
+      </TouchableOpacity>
+      <ConfigProvider
+        theme={{
+          colorMode: colorMode3,
+          token: {
+            components: {
+              Button: {
+                lightColor: {
+                  Info: infoLightColor3,
+                },
+                darkColor: {
+                  Info: infoDarkColor3,
+                },
+              },
+            },
+          },
+        }}
+      >
+        <App />
+      </ConfigProvider>
+    </>
+  );
+};

package/src/components/ConfigProvider/demo/index.jsx

@@ -0,0 +1,50 @@
+import React, { useRef, useEffect, useState } from "react";
+import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
+import { ConfigProvider, Button } from "@xhs/reds-rn-next";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: 100,
+    paddingBottom: 100,
+  },
+  scrollView: {
+    backgroundColor: "pink",
+  },
+  root: {
+    flex: 1,
+    backgroundColor: "blue",
+  },
+});
+const Desc = ({ children = "" }) => {
+  return <Text>{children}</Text>;
+};
+const Br = (props) => <View style={{ height: props.height || 20 }}></View>;
+
+export default function App() {
+  const [value, setValue] = useState(false);
+  const [valueStr, setValueStr] = useState(value.toString());
+  const onClick = (e) => setValue((v) => !v);
+  const onChange = (v) => setValueStr(v.toString());
+  return (
+    <View style={styles.container}>
+      <Desc>默认用法</Desc>
+      <ConfigProvider></ConfigProvider>
+      <Br />
+
+      <Desc>设置默认值</Desc>
+      <ConfigProvider defaultValue={true}></ConfigProvider>
+      <Br />
+
+      <Desc>修改开关颜色</Desc>
+      <ConfigProvider trackOnColor={"#1b8bcd"} trackOffColor={"#da36c9"}></ConfigProvider>
+      <Br />
+
+      <Desc>受控用法</Desc>
+      <Text>当前值:{valueStr}</Text>
+      <ConfigProvider value={value} onClick={onClick} onChange={onChange}></ConfigProvider>
+      <Br />
+    </View>
+  );
+}

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

@@ -0,0 +1,50 @@
+import React, { useRef, useEffect, useState } from "react";
+import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
+import { ConfigProvider } from "@xhs/reds-rn-next";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: 100,
+    paddingBottom: 100,
+  },
+  scrollView: {
+    backgroundColor: "pink",
+  },
+  root: {
+    flex: 1,
+    backgroundColor: "blue",
+  },
+});
+const Desc = ({ children = "" }) => {
+  return <Text>{children}</Text>;
+};
+const Br = (props) => <View style={{ height: props.height || 20 }}></View>;
+
+export default function App() {
+  const [value, setValue] = useState(false);
+  const [valueStr, setValueStr] = useState(value.toString());
+  const onClick = (e) => setValue((v) => !v);
+  const onChange = (v) => setValueStr(v.toString());
+  return (
+    <View style={styles.container}>
+      <Desc>默认用法</Desc>
+      <ConfigProvider></ConfigProvider>
+      <Br />
+
+      <Desc>设置默认值</Desc>
+      <ConfigProvider defaultValue={true}></ConfigProvider>
+      <Br />
+
+      <Desc>修改开关颜色</Desc>
+      <ConfigProvider trackOnColor={"#1b8bcd"} trackOffColor={"#da36c9"}></ConfigProvider>
+      <Br />
+
+      <Desc>受控用法</Desc>
+      <Text>当前值:{valueStr}</Text>
+      <ConfigProvider value={value} onClick={onClick} onChange={onChange}></ConfigProvider>
+      <Br />
+    </View>
+  );
+}

package/src/components/ConfigProvider/demo/token.jsx

@@ -0,0 +1,8 @@
+import { Text } from "react-native";
+import { useThemeColor } from "@xhs/reds-rn-next";
+
+export default () => {
+  const themeColor = useThemeColor();
+
+  return <Text style={{ color: themeColor.Info }}>使用 Token </Text>;
+};

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

@@ -0,0 +1,22 @@
+import BaseDemo from "!!raw-loader!../demo/base.jsx";
+
+## 演示
+
+### 基础用法
+
+::BaseDemo::
+
+## API
+
+### Props
+
+| 属性       | 描述                            | 类型         | 默认值                                                                                           |
+| ---------- | ------------------------------- | ------------ | ------------------------------------------------------------------------------------------------ |
+| id         | 主题 ID                         | string       | root                                                                                             |
+| parent-id  | 父级主题 ID                     | string       | root                                                                                             |
+| theme      | 主题定制                        | IThemeConfig | `{"colorMode":"light","inherit":true,"token":{"lightToken":{},"darkToken":{},"alwaysToken":{}}}` |
+| color-mode | IThemeConfig colorMode 主题模式 | string       | light                                                                                            |
+| inherit    | IThemeConfig inherit Token 继承 | boolean      | true                                                                                             |
+| token      | IThemeConfig token Token 定制   | Object       | `{}`                                                                                             |
+
+### Events

package/src/components/ConfigProvider/doc/token.mdx

@@ -0,0 +1,7 @@
+import BaseDemo from "!!raw-loader!../demo/token.jsx";
+
+## 演示
+
+### 基础用法
+
+::BaseDemo::