@wwog/react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) github/wwog
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,133 @@
+# @wwog/react
+
+一个实用的 React 组件库，提供声明式流程控制组件和常用 UI 工具组件，使您的 React 代码更加简洁和可读。
+
+[![npm version](https://img.shields.io/npm/v/@wwog/react.svg)](https://www.npmjs.com/package/@wwog/react)
+[![ESM](https://img.shields.io/badge/📦-ESM%20only-brightgreen.svg)](https://nodejs.org/api/esm.html)
+
+## 安装
+
+```bash
+# 使用 npm
+npm install @wwog/react
+
+# 使用 yarn
+yarn add @wwog/react
+
+# 使用 pnpm
+pnpm add @wwog/react
+```
+
+## 功能特性
+
+- **仅 ESModule**：现代化的模块系统支持
+- **完全类型支持**：用 TypeScript 编写，提供完整的类型定义
+- **零依赖**：仅依赖 React 和 React DOM 作为 peer dependencies
+- **声明式流程控制**：JSX 风格的条件渲染和流程控制组件
+- **通用工具组件**：简单实用的常见 UI 工具组件
+
+## 组件和用法
+
+### 流程控制组件
+
+#### `<If>`, `<Then>`, `<Else>`, `<ElseIf>`
+
+声明式的条件渲染组件，类似于 if-else 语句，但在 JSX 中使用。
+
+```tsx
+import { If, Then, Else, ElseIf } from '@wwog/react';
+
+function Example({ count }) {
+  return (
+    <If condition={count > 10}>
+      <Then>
+        <p>Count is greater than 10</p>
+      </Then>
+      <ElseIf condition={count > 5}>
+        <p>Count is greater than 5</p>
+      </ElseIf>
+      <Else>
+        <p>Count is 5 or less</p>
+      </Else>
+    </If>
+  );
+}
+```
+
+#### `<Switch>`, `<Case>`, `<Default>`
+
+类似于 JavaScript 的 switch 语句，但更具声明性和类型安全性。
+
+```tsx
+import { Switch, Case, Default } from '@wwog/react';
+
+function Example({ status }) {
+  return (
+    <Switch value={status}>
+      <Case value="loading">
+        <Loading />
+      </Case>
+      <Case value="success">
+        <Success />
+      </Case>
+      <Case value="error">
+        <Error />
+      </Case>
+      <Default>
+        <p>Unknown status</p>
+      </Default>
+    </Switch>
+  );
+}
+```
+
+### 通用组件
+
+#### `<ArrayRender>`
+
+高效渲染数组数据的工具组件，支持过滤和自定义渲染。
+
+```tsx
+import { ArrayRender } from '@wwog/react';
+
+function UserList({ users }) {
+  return (
+    <ArrayRender 
+      items={users}
+      filter={(user) => user.active}
+      renderItem={(user, index) => (
+        <div key={user.id}>
+          {index + 1}. {user.name}
+        </div>
+      )}
+    />
+  );
+}
+```
+
+#### `<SizeBox>`
+
+创建固定尺寸的容器，用于布局调整和间距控制。
+
+```tsx
+import { SizeBox } from '@wwog/react';
+
+function Layout() {
+  return (
+    <div>
+      <Header />
+      {/* 创建垂直间距 */}
+      <SizeBox height={20} />
+      <Content />
+      {/* 创建具有固定尺寸的容器 */}
+      <SizeBox width={200} height={150}>
+        <SideContent />
+      </SizeBox>
+    </div>
+  );
+}
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+declare function add(a: number, b: number): number;
+
+export { add };

package/dist/index.js

@@ -0,0 +1,5 @@
+function add(a, b) {
+  return a + b;
+}
+
+export { add };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@wwog/react",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "author": "wwog",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.mts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "homepage": "https://github.com/wwog/react",
+  "license": "MIT",
+  "scripts": {
+    "build": "unbuild",
+    "format": "biome format --write src",
+    "check": "biome check --apply src",
+    "test": "pnpm check && pnpm test:types && vitest run --coverage",
+    "test:types": "tsc --noEmit --skipLibCheck",
+    "preinstall": "npx only-allow pnpm"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@vitest/coverage-v8": "^3.1.1",
+    "typescript": "^5.8.3",
+    "unbuild": "^3.5.0",
+    "vitest": "^3.1.1"
+  },
+  "engines": {
+    "node": ">= 20.0.0",
+    "pnpm": ">=8.15.0"
+  }
+}

package/src/Common/ArrayRender.tsx

@@ -0,0 +1,31 @@
+import { Fragment, type ReactNode } from "react";
+
+//#region component Types
+export interface ArrayRenderProps<T> {
+  items: T[];
+  renderItem: (item: T, index: number) => React.ReactNode;
+  filter?: (item: T) => boolean;
+}
+//#endregion component Types
+
+//#region component
+export function ArrayRender<T>(props: ArrayRenderProps<T>): ReactNode {
+  const { items, renderItem, filter } = props;
+
+  if (!items) {
+    console.error("ArrayRender: items is null");
+    return null;
+  }
+
+  return (
+    <Fragment>
+      {items.map((item, index) => {
+        if (filter && !filter(item)) {
+          return null;
+        }
+        return renderItem(item, index);
+      })}
+    </Fragment>
+  );
+}
+//#endregion component

package/src/Common/SizeBox.tsx

@@ -0,0 +1,22 @@
+import { FC, ReactNode } from "react";
+
+interface SizeBoxProps {
+  size?: number | string;
+  height?: number | string;
+  width?: number | string;
+  h?: number | string;
+  w?: number | string;
+  children?: ReactNode;
+}
+/**
+ * @description SizeBox 组件用于设置一个固定大小的盒子
+ */
+export const SizeBox: FC<SizeBoxProps> = (props) => {
+  const { children, h, w, size, height, width } = props;
+
+  const widthValue = size || w || width;
+  const heightValue = size || h || height;
+  return (
+    <div style={{ width: widthValue, height: heightValue }}>{children}</div>
+  );
+};

package/src/Common/index.ts

@@ -0,0 +1,2 @@
+export * from "./SizeBox";
+export * from "./ArrayRender";

package/src/ProcessControl/If.tsx

@@ -0,0 +1,109 @@
+import React, { type FC } from "react";
+
+export interface IfProps {
+  condition: boolean;
+  children?: React.ReactNode;
+}
+
+export interface ThenProps {
+  children?: React.ReactNode;
+}
+
+export interface ElseProps {
+  children?: React.ReactNode;
+}
+
+export interface ElseIfProps {
+  condition: boolean;
+  children?: React.ReactNode;
+}
+
+export const Then: FC<ThenProps> = (props) => {
+  return <>{props.children}</>;
+};
+export const Else: FC<ElseProps> = ({ children }) => {
+  return <>{children}</>;
+};
+export const ElseIf: FC<ElseIfProps> = (props) => {
+  return <>{props.children}</>;
+};
+Then.displayName = "If_Then";
+Else.displayName = "If_Else";
+ElseIf.displayName = "If_ElseIf";
+
+export const If = ({
+  condition,
+  children,
+}: IfProps): React.ReactElement | null => {
+  let thenChild: React.ReactElement<ThenProps> | null =
+    null as React.ReactElement<ThenProps> | null;
+  let elseChild: React.ReactElement<ElseProps> | null = null;
+  const elseIfChildren: React.ReactElement<ElseIfProps>[] = [];
+
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) {
+      throw new Error("If component only accepts valid React elements");
+    }
+
+    const type = child.type as any;
+
+    if (type.displayName === Then.displayName) {
+      if (thenChild) {
+        throw new Error("If component can only have one Then child");
+      }
+      thenChild = child as React.ReactElement<ThenProps>;
+    } else if (type.displayName === ElseIf.displayName) {
+      elseIfChildren.push(child as React.ReactElement<ElseIfProps>);
+    } else if (type.displayName === Else.displayName) {
+      if (elseChild) {
+        throw new Error("If component can only have one Else child");
+      }
+      elseChild = child as React.ReactElement<ElseProps>;
+    } else {
+      throw new Error(
+        `If component only accepts 'Then', 'ElseIf', or 'Else' elements as children, found: ${String(
+          type.displayName || type.name || type
+        )}`
+      );
+    }
+  });
+
+  if (condition) {
+    return thenChild ? <>{thenChild.props.children}</> : null;
+  }
+
+  const matchedElseIf = elseIfChildren.find((child) => {
+    const elseIfProps = child.props as ElseIfProps;
+    return elseIfProps.condition;
+  });
+
+  if (matchedElseIf) {
+    return <>{matchedElseIf.props.children}</>;
+  }
+
+  if (elseChild) {
+    return elseChild ? (
+      <>{(elseChild as React.ReactElement<ElseProps>).props.children}</>
+    ) : null;
+  }
+
+  return null;
+};
+
+If.displayName = "If";
+If.Then = Then;
+If.ElseIf = ElseIf;
+If.Else = Else;
+If.createTyped = function () {
+  return {
+    If,
+    Then,
+    ElseIf,
+    Else,
+  } as {
+    If: (props: IfProps) => React.ReactElement | null;
+    Then: (props: ThenProps) => React.ReactElement;
+    ElseIf: (props: ElseIfProps) => React.ReactElement;
+    Else: (props: ElseProps) => React.ReactElement;
+  };
+};

package/src/ProcessControl/Switch.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { childrenLoop } from "../utils";
+
+export interface SwitchProps<T> {
+  value: T;
+  /**
+   * @description 可选的比对函数，默认() => a===b
+   * @description_en optional compare function, default to () => a === b
+   **/
+  compare?: (a: T, b: T) => boolean;
+  children?: React.ReactNode;
+  /**
+   * @description 是否严格模式，默认 false.建议跟随开发环境变化,严格模式下,会循环所有节点来提供更多的错误提示
+   * @description_en strict mode, default to false. It is recommended to follow the development environment changes. In strict mode, all nodes will be looped to provide more error prompts
+   * @extra
+   * 1.严格模式下，无论什么情况都会循环所有节点，以确保所有的 case 和 default 都能被检查到
+   * 2.非严格模式下，如果有一个 case 匹配成功，就不会继续循环
+   * @extra_en
+   * 1. In strict mode, all nodes will be looped regardless of the situation to ensure that all cases and defaults can be checked
+   * 2. In non-strict mode, if a case matches successfully, it will not continue to loop
+   */
+  strict?: boolean;
+}
+
+export interface SwitchCaseProps<T> {
+  value: T;
+  children?: React.ReactNode;
+}
+
+export interface SwitchDefaultProps {
+  children?: React.ReactNode;
+}
+
+const defaultCompare = <T,>(a: T, b: T): boolean => {
+  return a === b;
+};
+
+const Case = <T,>(props: SwitchCaseProps<T>): React.ReactElement => {
+  return <>{props.children}</>;
+};
+Case.displayName = "Switch_Case";
+
+const Default = (props: SwitchDefaultProps): React.ReactElement => {
+  return <>{props.children}</>;
+};
+Default.displayName = "Switch_Default";
+
+type SwitchChildType = typeof Case | typeof Default;
+/**
+ * @description Switch 组件用于根据传入的 value 渲染不同的子组件
+ * @description_en The Switch component is used to render different child components based on the passed value
+ */
+export const Switch = <T,>(
+  props: SwitchProps<T>
+): React.ReactElement | null => {
+  const { value, compare = defaultCompare, children, strict = false } = props;
+  const seenValues = new Set<T>();
+  let matchedChildren: React.ReactNode = null;
+  let defaultChild: React.ReactNode = null;
+  let hasDefault = false;
+
+  childrenLoop(children, (child, index) => {
+    if (!React.isValidElement(child)) {
+      throw new Error(
+        `Switch Children only accepts valid React elements at index ${index}`
+      );
+    }
+    const type = child.type as SwitchChildType;
+
+    if (type.displayName === Case.displayName) {
+      const caseProps = child.props as SwitchCaseProps<T>;
+
+      if (seenValues.has(caseProps.value)) {
+        throw new Error(
+          `Switch found duplicate Case value at index ${index}: ${JSON.stringify(
+            caseProps.value
+          )}${strict ? " (detected in strict mode)" : ""}`
+        );
+      }
+      seenValues.add(caseProps.value);
+
+      if (!matchedChildren && compare(value, caseProps.value)) {
+        matchedChildren = caseProps.children;
+        if (strict === false) {
+          return false;
+        }
+      }
+    } else if (type.displayName === Default.displayName) {
+      if (hasDefault) {
+        throw new Error(
+          `Switch can only have one Default child at index ${index}`
+        );
+      }
+      hasDefault = true;
+      defaultChild = (child.props as SwitchDefaultProps).children;
+      if (!strict && matchedChildren) {
+        return false;
+      }
+    } else {
+      throw new Error(
+        `Switch Children only accepts 'Case' or 'Default' elements, found: ${String(
+          type.displayName || type.name || type
+        )} at index ${index}`
+      );
+    }
+  });
+
+  return <>{matchedChildren ?? defaultChild}</>;
+};
+
+Switch.displayName = "Switch";
+Switch.Case = Case;
+Switch.Default = Default;
+Switch.createTyped = function <T>() {
+  return {
+    Switch: Switch<T>,
+    Case: Case<T>,
+    Default: Default,
+  } as {
+    Switch: (props: SwitchProps<T>) => React.ReactElement | null;
+    Case: (props: SwitchCaseProps<T>) => React.ReactElement;
+    Default: (props: SwitchDefaultProps) => React.ReactElement;
+  } 
+};

package/src/ProcessControl/index.ts

@@ -0,0 +1,2 @@
+export * from "./Switch";
+export * from "./If";

package/src/index copy.ts

@@ -0,0 +1,3 @@
+export * from "./ProcessControl";
+export * from "./Common";
+export * from "./utils";

package/src/index.ts

@@ -0,0 +1,3 @@
+export function add(a: number, b: number): number {
+  return a + b
+}

package/src/utils/index.ts

@@ -0,0 +1,23 @@
+import React from "react";
+
+/**
+ * @description 性能优化，替代 React.Children.forEach, 回调可以返回 false 来中断循环
+ * @description_en Replace React.Children.forEach, the callback can return false to interrupt the loop
+ */
+export function childrenLoop(
+  children: React.ReactNode | undefined,
+  callback: (child: React.ReactNode, index: number) => boolean | void
+): void {
+  if (children === undefined) return;
+  let index = 0;
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      const shouldContinue = callback(child, index++);
+      if (shouldContinue === false) {
+        break;
+      }
+    }
+  } else {
+    callback(children, index);
+  }
+}