@wwog/react 1.2.5 → 1.2.6

package/README.md

@@ -314,7 +314,7 @@ function Layout() {
 
 #### `<ClassName>` (v1.2.5+)
 
-用于将 CSS 类名分类编写的组件，内置类似`clsx`的功能，并且可以去除重复的 className。支持基础类、悬停态、激活态等多种状态的类名管理。
+用于将 CSS 类名分类编写的组件，内置类似`clsx`的功能，并且可以去除重复的 className。
 
 ```tsx
 import { ClassName } from "@wwog/react";
@@ -327,6 +327,7 @@ function Example() {
         hover: "hover:bg-gray-100",
         active: "active:bg-gray-200",
         focus: "focus:ring-2",
+        other: "button",
       }}
     >
       <button>点击我</button>

package/dist/index.d.mts

@@ -259,49 +259,6 @@ interface ScopeProps {
  */
 declare const Scope: FC<ScopeProps>;
 
-/**
- * @description 性能优化，替代 React.Children.forEach, 回调可以返回 false 来中断循环
- * @description_en Replace React.Children.forEach, the callback can return false to interrupt the loop
- */
-declare function childrenLoop(children: React$1.ReactNode | undefined, callback: (child: React$1.ReactNode, index: number) => boolean | void): void;
-/**
- * @param schema
- * @example
- * YY | 18 | Two-digit year
- * YYYY | 2018 | Four-digit year
- * M | 1-12 | The month, beginning at 1
- * MM | 01-12 | The month, 2-digits
- * MMM | Jan-Dec | The abbreviated month name
- * MMMM | January-December | The full month name
- * D | 1-31 | The day of the month
- * DD | 01-31 | The day of the month, 2-digits
- * d | 0-6 | The day of the week, with Sunday as 0
- * dd | Su-Sa | The min name of the day of the week
- * ddd | Sun-Sat | The short name of the day of the week
- * dddd | Sunday-Saturday | The name of the day of the week
- * H | 0-23 | The hour
- * HH | 00-23 | The hour, 2-digits
- * h | 1-12 | The hour, 12-hour clock
- * hh | 01-12 | The hour, 12-hour clock, 2-digits
- * m | 0-59 | The minute
- * mm | 00-59 | The minute, 2-digits
- * s | 0-59 | The second
- * ss | 00-59 | The second, 2-digits
- * SSS | 000-999 | The millisecond, 3-digits
- * Z | +05:00 | The offset from UTC, ±HH:mm
- * ZZ | +0500 | The offset from UTC, ±HHmm
- * A | AM | PM
- * a | am | pm
- */
-declare function formatDate(schema: string, date?: Date): string;
-declare class Counter {
-    count: number;
-    /**
-     * @description 获取下一个计数值,不考虑越界。
-     * @description_en Get the next count value, without considering overflow.
-     */
-    next(): number;
-}
 type CxInput = string | string[] | Record<string, boolean> | undefined | null | false;
 declare function cx(...args: CxInput[]): string;
 
@@ -464,5 +421,50 @@ interface UseControlledOptions<T> {
 }
 declare function useControlled<T>(options: UseControlledOptions<T>): [T, Dispatch<React.SetStateAction<T>>];
 
+/**
+ * @param schema
+ * @example
+ * YY | 18 | Two-digit year
+ * YYYY | 2018 | Four-digit year
+ * M | 1-12 | The month, beginning at 1
+ * MM | 01-12 | The month, 2-digits
+ * MMM | Jan-Dec | The abbreviated month name
+ * MMMM | January-December | The full month name
+ * D | 1-31 | The day of the month
+ * DD | 01-31 | The day of the month, 2-digits
+ * d | 0-6 | The day of the week, with Sunday as 0
+ * dd | Su-Sa | The min name of the day of the week
+ * ddd | Sun-Sat | The short name of the day of the week
+ * dddd | Sunday-Saturday | The name of the day of the week
+ * H | 0-23 | The hour
+ * HH | 00-23 | The hour, 2-digits
+ * h | 1-12 | The hour, 12-hour clock
+ * hh | 01-12 | The hour, 12-hour clock, 2-digits
+ * m | 0-59 | The minute
+ * mm | 00-59 | The minute, 2-digits
+ * s | 0-59 | The second
+ * ss | 00-59 | The second, 2-digits
+ * SSS | 000-999 | The millisecond, 3-digits
+ * Z | +05:00 | The offset from UTC, ±HH:mm
+ * ZZ | +0500 | The offset from UTC, ±HHmm
+ * A | AM | PM
+ * a | am | pm
+ */
+declare function formatDate(schema: string, date?: Date): string;
+declare class Counter {
+    count: number;
+    /**
+     * @description 获取下一个计数值,不考虑越界。
+     * @description_en Get the next count value, without considering overflow.
+     */
+    next(): number;
+}
+
+/**
+ * @description 性能优化，替代 React.Children.forEach, 回调可以返回 false 来中断循环
+ * @description_en Replace React.Children.forEach, the callback can return false to interrupt the loop
+ */
+declare function childrenLoop(children: React$1.ReactNode | undefined, callback: (child: React$1.ReactNode, index: number) => boolean | void): void;
+
 export { ArrayRender, ClassName, Counter, DateRender, False, If, Pipe, Scope, SizeBox, Switch, Toggle, True, When, childrenLoop, cx, formatDate, useControlled };
 export type { ArrayRenderProps, ClassNameProps, CxInput, DateRenderProps, ElseIfProps, ElseProps, FalseProps, IfProps, PipeProps, ScopeProps, SwitchCaseProps, SwitchDefaultProps, SwitchProps, ThenProps, ToggleProps, TrueProps, UseControlledOptions, WhenProps };

package/dist/index.js

@@ -1 +1 @@
-import r,{useMemo as h,useEffect as I,isValidElement as T,Fragment as M,cloneElement as H,useState as A,useCallback as P}from"react";function Y(t,n){if(t===void 0)return;let e=0;if(Array.isArray(t)){for(const l of t)if(n(l,e++)===!1)break}else n(t,e)}function W(t,n){const e=n||new Date,l=e.getFullYear(),a=e.getMonth()+1,o=e.getDate(),s=e.getHours(),c=e.getMinutes(),u=e.getSeconds(),d=e.getMilliseconds(),i=e.getDay(),f=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],m=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],y=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],x=["January","February","March","April","May","June","July","August","September","October","November","December"],D=i===0?6:i-1,k=m[D],b=f[D],C=a-1,O=x[C],J=y[C],j={YY:l.toString().slice(2),YYYY:l.toString(),M:a.toString(),MM:a.toString().padStart(2,"0"),MMM:J,MMMM:O,D:o.toString(),DD:o.toString().padStart(2,"0"),d:i.toString(),dd:b,ddd:b,dddd:k,H:s.toString(),HH:s.toString().padStart(2,"0"),h:(s%12).toString(),hh:(s%12).toString().padStart(2,"0"),m:c.toString(),mm:c.toString().padStart(2,"0"),s:u.toString(),ss:u.toString().padStart(2,"0"),SSS:d.toString().padStart(3,"0"),Z:"+08:00",ZZ:"+0800",A:s<12?"AM":"PM",a:s<12?"am":"pm"};return t.replace(/YYYY|YY|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|m{1,2}|s{1,2}|SSS|Z{1,2}|A|a/g,R=>j[R])}class _{count=0;next(){return this.count++}}function v(...t){const n=new Set;for(const e of t)if(e){if(typeof e=="string")n.add(e);else if(Array.isArray(e))e.forEach(l=>n.add(l));else if(typeof e=="object")for(const[l,a]of Object.entries(e))a&&n.add(l)}return Array.from(n).join(" ")}const B=(t,n)=>t===n,S=t=>r.createElement(r.Fragment,null,t.children);S.displayName="Switch_Case";const E=t=>r.createElement(r.Fragment,null,t.children);E.displayName="Switch_Default";const g=t=>{const{value:n,compare:e=B,children:l,strict:a=!1}=t,o=new Set;let s=null,c=null,u=!1;return Y(l,(d,i)=>{if(!r.isValidElement(d))throw new Error(`Switch Children only accepts valid React elements at index ${i}`);const f=d.type;if(f.displayName===S.displayName){const m=d.props;if(o.has(m.value))throw new Error(`Switch found duplicate Case value at index ${i}: ${JSON.stringify(m.value)}${a?" (detected in strict mode)":""}`);if(o.add(m.value),!s&&e(n,m.value)&&(s=m.children,a===!1))return!1}else if(f.displayName===E.displayName){if(u)throw new Error(`Switch can only have one Default child at index ${i}`);if(u=!0,c=d.props.children,!a&&s)return!1}else throw new Error(`Switch Children only accepts 'Case' or 'Default' elements, found: ${String(f.displayName||f.name||f)} at index ${i}`)}),r.createElement(r.Fragment,null,s??c)};g.displayName="Switch",g.Case=S,g.Default=E,g.createTyped=function(){return{Switch:g,Case:S,Default:E}};const w=t=>r.createElement(r.Fragment,null,t.children),N=({children:t})=>r.createElement(r.Fragment,null,t),F=t=>r.createElement(r.Fragment,null,t.children);w.displayName="If_Then",N.displayName="If_Else",F.displayName="If_ElseIf";const p=({condition:t,children:n})=>{let e=null,l=null;const a=[];if(r.Children.forEach(n,o=>{if(!r.isValidElement(o))throw new Error("If component only accepts valid React elements");const s=o.type;if(s.displayName===w.displayName){if(e)throw new Error("If component can only have one Then child");e=o}else if(s.displayName===F.displayName)a.push(o);else if(s.displayName===N.displayName){if(l)throw new Error("If component can only have one Else child");l=o}else throw new Error(`If component only accepts 'Then', 'ElseIf', or 'Else' elements as children, found: ${String(s.displayName||s.name||s)}`)}),t)return e?r.createElement(r.Fragment,null,e.props.children):null;for(const o of a)if(o.props.condition)return r.createElement(r.Fragment,null,o.props.children);return l?r.createElement(r.Fragment,null,l.props.children):null};p.displayName="If",p.Then=w,p.ElseIf=F,p.Else=N,p.createTyped=function(){return{If:p,Then:w,ElseIf:F,Else:N}};const V=({condition:t,children:n})=>t?r.createElement(r.Fragment,null,n):null,Z=({condition:t,children:n})=>t===!1?r.createElement(r.Fragment,null,n):null,$=({all:t,any:n,none:e,children:l,fallback:a})=>h(()=>(t&&(n||e)&&console.warn('When: Multiple condition types (all, any, none) provided; "all" takes precedence.'),!!(t&&t.length>0&&t.every(Boolean)||n&&n.length>0&&n.some(Boolean)||e&&e.length>0&&e.every(o=>!o))),[t,n,e])?r.createElement(r.Fragment,null,l):r.createElement(r.Fragment,null,a||null),z=({data:t,transform:n,render:e,fallback:l})=>{const a=h(()=>n.reduce((o,s)=>s(o),t),[t,n]);return a==null?r.createElement(r.Fragment,null,l||null):r.createElement(r.Fragment,null,e(a))},L=t=>{const{children:n,h:e,w:l,size:a,height:o,width:s,className:c}=t;return r.createElement("div",{style:{width:a||l||s,height:a||e||o,flexShrink:0},className:c},n)},q=({let:t,props:n,children:e,fallback:l})=>{const a=h(()=>typeof t=="function"?t(n):t,[t,n]);return!e||!Object.keys(a).length?r.createElement(r.Fragment,null,l||null):r.createElement(r.Fragment,null,e(a))},G=t=>{const{className:n,children:e,asWrapper:l}=t;if(I(()=>{T(e)===!1&&console.warn("<ClassName>: children is not a valid React element. Please check your code.")},[e]),!e)return null;if(!n)return r.createElement(M,null,e);const a=v(...Object.values(n));return l?r.createElement(typeof l=="string"?l:"div",{className:a},e):T(e)?H(e,{className:v(e.props.className,a)}):r.createElement(M,null,e)},K=t=>{const{index:n=0,options:e,next:l,render:a}=t;I(()=>{if(e.length<n+1)throw new Error(`Index ${n} is out of bounds for options array of length ${e.length}. Defaulting to first option.`)},[n,e]);const[o,s]=A(n),c=()=>{s(u=>e.length?l?l(u,e):(u+1)%e.length:u)};return a(e[o],c)};function Q(t){const{items:n,renderItem:e,filter:l}=t;return n?r.createElement(M,null,n.map((a,o)=>l&&!l(a)?null:e(a,o))):(console.error("ArrayRender: items is null"),null)}function U({source:t,format:n,children:e}){const l=h(()=>{if(t instanceof Date)return t;if(typeof t=="string"||typeof t=="number"){const o=new Date(t);return isNaN(o.getTime())?null:o}return null},[t]),a=h(()=>l?n?n(l):l.toLocaleString():null,[l,n]);return!a||!e?null:r.createElement(r.Fragment,null,e(a))}const X="onChange",ee="value";function te(t){const{defaultValue:n,onBeforeChange:e,trigger:l=X,valuePropName:a=ee,props:o}=t,s=Object.prototype.hasOwnProperty.call(o,a),[c,u]=A(n),d=s?o[a]:c,i=h(()=>o[l],[o,l]),f=P(m=>{const y=typeof m=="function"?m(d):m;e&&e(y,d)===!1||(s||u(y),i&&i(y))},[s,e,l,d,i]);return[d,f]}export{Q as ArrayRender,G as ClassName,_ as Counter,U as DateRender,Z as False,p as If,z as Pipe,q as Scope,L as SizeBox,g as Switch,K as Toggle,V as True,$ as When,Y as childrenLoop,v as cx,W as formatDate,te as useControlled};
+import r,{useMemo as h,useEffect as C,isValidElement as I,Fragment as M,cloneElement as R,useState as T,useCallback as H}from"react";function A(n,t){if(n===void 0)return;let e=0;if(Array.isArray(n)){for(const l of n)if(t(l,e++)===!1)break}else t(n,e)}const P=(n,t)=>n===t,S=n=>r.createElement(r.Fragment,null,n.children);S.displayName="Switch_Case";const E=n=>r.createElement(r.Fragment,null,n.children);E.displayName="Switch_Default";const g=n=>{const{value:t,compare:e=P,children:l,strict:a=!1}=n,o=new Set;let s=null,c=null,u=!1;return A(l,(d,i)=>{if(!r.isValidElement(d))throw new Error(`Switch Children only accepts valid React elements at index ${i}`);const f=d.type;if(f.displayName===S.displayName){const m=d.props;if(o.has(m.value))throw new Error(`Switch found duplicate Case value at index ${i}: ${JSON.stringify(m.value)}${a?" (detected in strict mode)":""}`);if(o.add(m.value),!s&&e(t,m.value)&&(s=m.children,a===!1))return!1}else if(f.displayName===E.displayName){if(u)throw new Error(`Switch can only have one Default child at index ${i}`);if(u=!0,c=d.props.children,!a&&s)return!1}else throw new Error(`Switch Children only accepts 'Case' or 'Default' elements, found: ${String(f.displayName||f.name||f)} at index ${i}`)}),r.createElement(r.Fragment,null,s??c)};g.displayName="Switch",g.Case=S,g.Default=E,g.createTyped=function(){return{Switch:g,Case:S,Default:E}};const w=n=>r.createElement(r.Fragment,null,n.children),N=({children:n})=>r.createElement(r.Fragment,null,n),F=n=>r.createElement(r.Fragment,null,n.children);w.displayName="If_Then",N.displayName="If_Else",F.displayName="If_ElseIf";const p=({condition:n,children:t})=>{let e=null,l=null;const a=[];if(r.Children.forEach(t,o=>{if(!r.isValidElement(o))throw new Error("If component only accepts valid React elements");const s=o.type;if(s.displayName===w.displayName){if(e)throw new Error("If component can only have one Then child");e=o}else if(s.displayName===F.displayName)a.push(o);else if(s.displayName===N.displayName){if(l)throw new Error("If component can only have one Else child");l=o}else throw new Error(`If component only accepts 'Then', 'ElseIf', or 'Else' elements as children, found: ${String(s.displayName||s.name||s)}`)}),n)return e?r.createElement(r.Fragment,null,e.props.children):null;for(const o of a)if(o.props.condition)return r.createElement(r.Fragment,null,o.props.children);return l?r.createElement(r.Fragment,null,l.props.children):null};p.displayName="If",p.Then=w,p.ElseIf=F,p.Else=N,p.createTyped=function(){return{If:p,Then:w,ElseIf:F,Else:N}};const W=({condition:n,children:t})=>n?r.createElement(r.Fragment,null,t):null,_=({condition:n,children:t})=>n===!1?r.createElement(r.Fragment,null,t):null,B=({all:n,any:t,none:e,children:l,fallback:a})=>h(()=>(n&&(t||e)&&console.warn('When: Multiple condition types (all, any, none) provided; "all" takes precedence.'),!!(n&&n.length>0&&n.every(Boolean)||t&&t.length>0&&t.some(Boolean)||e&&e.length>0&&e.every(o=>!o))),[n,t,e])?r.createElement(r.Fragment,null,l):r.createElement(r.Fragment,null,a||null),V=({data:n,transform:t,render:e,fallback:l})=>{const a=h(()=>t.reduce((o,s)=>s(o),n),[n,t]);return a==null?r.createElement(r.Fragment,null,l||null):r.createElement(r.Fragment,null,e(a))},Z=n=>{const{children:t,h:e,w:l,size:a,height:o,width:s,className:c}=n;return r.createElement("div",{style:{width:a||l||s,height:a||e||o,flexShrink:0},className:c},t)},$=({let:n,props:t,children:e,fallback:l})=>{const a=h(()=>typeof n=="function"?n(t):n,[n,t]);return!e||!Object.keys(a).length?r.createElement(r.Fragment,null,l||null):r.createElement(r.Fragment,null,e(a))};function v(...n){const t=new Set;for(const e of n)if(e){if(typeof e=="string")t.add(e);else if(Array.isArray(e))e.forEach(l=>t.add(l));else if(typeof e=="object")for(const[l,a]of Object.entries(e))a&&t.add(l)}return Array.from(t).join(" ")}const z=n=>{const{className:t,children:e,asWrapper:l}=n;if(C(()=>{I(e)===!1&&console.warn("<ClassName>: children is not a valid React element. Please check your code.")},[e]),!e)return null;if(!t)return r.createElement(M,null,e);const a=v(...Object.values(t));return l?r.createElement(typeof l=="string"?l:"div",{className:a},e):I(e)?R(e,{className:v(e.props.className,a)}):r.createElement(M,null,e)},L=n=>{const{index:t=0,options:e,next:l,render:a}=n;C(()=>{if(e.length<t+1)throw new Error(`Index ${t} is out of bounds for options array of length ${e.length}. Defaulting to first option.`)},[t,e]);const[o,s]=T(t),c=()=>{s(u=>e.length?l?l(u,e):(u+1)%e.length:u)};return a(e[o],c)};function q(n){const{items:t,renderItem:e,filter:l}=n;return t?r.createElement(M,null,t.map((a,o)=>l&&!l(a)?null:e(a,o))):(console.error("ArrayRender: items is null"),null)}function G({source:n,format:t,children:e}){const l=h(()=>{if(n instanceof Date)return n;if(typeof n=="string"||typeof n=="number"){const o=new Date(n);return isNaN(o.getTime())?null:o}return null},[n]),a=h(()=>l?t?t(l):l.toLocaleString():null,[l,t]);return!a||!e?null:r.createElement(r.Fragment,null,e(a))}const K="onChange",Q="value";function U(n){const{defaultValue:t,onBeforeChange:e,trigger:l=K,valuePropName:a=Q,props:o}=n,s=Object.prototype.hasOwnProperty.call(o,a),[c,u]=T(t),d=s?o[a]:c,i=h(()=>o[l],[o,l]),f=H(m=>{const y=typeof m=="function"?m(d):m;e&&e(y,d)===!1||(s||u(y),i&&i(y))},[s,e,d,i]);return[d,f]}function X(n,t){const e=t||new Date,l=e.getFullYear(),a=e.getMonth()+1,o=e.getDate(),s=e.getHours(),c=e.getMinutes(),u=e.getSeconds(),d=e.getMilliseconds(),i=e.getDay(),f=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],m=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],y=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],Y=["January","February","March","April","May","June","July","August","September","October","November","December"],x=m[i],D=f[i],b=a-1,k=Y[b],O=y[b],J={YY:l.toString().slice(2),YYYY:l.toString(),M:a.toString(),MM:a.toString().padStart(2,"0"),MMM:O,MMMM:k,D:o.toString(),DD:o.toString().padStart(2,"0"),d:i.toString(),dd:D,ddd:D,dddd:x,H:s.toString(),HH:s.toString().padStart(2,"0"),h:(s%12).toString(),hh:(s%12).toString().padStart(2,"0"),m:c.toString(),mm:c.toString().padStart(2,"0"),s:u.toString(),ss:u.toString().padStart(2,"0"),SSS:d.toString().padStart(3,"0"),Z:"+08:00",ZZ:"+0800",A:s<12?"AM":"PM",a:s<12?"am":"pm"};return n.replace(/YYYY|YY|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|m{1,2}|s{1,2}|SSS|Z{1,2}|A|a/g,j=>J[j])}class ee{count=0;next(){return this.count++}}export{q as ArrayRender,z as ClassName,ee as Counter,G as DateRender,_ as False,p as If,V as Pipe,$ as Scope,Z as SizeBox,g as Switch,L as Toggle,W as True,B as When,A as childrenLoop,v as cx,X as formatDate,U as useControlled};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wwog/react",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "",
   "keywords": [],
   "author": "wwog",
@@ -17,9 +17,10 @@
   "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"
+    "check": "biome check --write src",
+    "test": "vitest run",
+    "test:types": "tsc --noEmit --skipLibCheck",
+    "all-suites": "pnpm run format && pnpm run check && pnpm run test:types && pnpm run test"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",

package/src/components/ProcessControl/Switch.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { childrenLoop } from "../../utils";
+import { childrenLoop } from "../../utils/reactUtils";
 
 export interface SwitchProps<T> {
   value: T;
@@ -120,5 +120,5 @@ Switch.createTyped = function <T>() {
     Switch: (props: SwitchProps<T>) => React.ReactElement | null;
     Case: (props: SwitchCaseProps<T>) => React.ReactElement;
     Default: (props: SwitchDefaultProps) => React.ReactElement;
-  } 
+  };
 };

package/src/components/ProcessControl/index.ts

@@ -1,4 +1,4 @@
-export * from "./Switch";
-export * from "./If";
-export * from "./When";
-export * from "./Pipe";
+export * from './Switch'
+export * from './If'
+export * from './When'
+export * from './Pipe'

package/src/components/Struct/index.ts

@@ -1,2 +1,2 @@
-export * from "./ArrayRender";
-export * from "./DateRender";
+export * from './ArrayRender'
+export * from './DateRender'

package/src/components/Sundry/ClassName.tsx

@@ -6,7 +6,7 @@ import React, {
   useEffect,
   type HTMLElementType,
 } from "react";
-import { cx, type CxInput } from "../../utils";
+import { cx, type CxInput } from "../../utils/cx";
 
 export interface ClassNameProps {
   className?: {

package/src/components/Sundry/index.ts

@@ -1,4 +1,4 @@
-export * from "./SizeBox";
-export * from "./Scope";
-export * from "./ClassName";
-export * from "./Toggle";
+export * from './SizeBox'
+export * from './Scope'
+export * from './ClassName'
+export * from './Toggle'

package/src/hooks/index.ts

@@ -1 +1 @@
-export * from "./useControlled";
+export * from './useControlled'

package/src/hooks/useControlled.ts

@@ -1,36 +1,36 @@
-import { useCallback, useMemo, useState, type Dispatch } from "react";
+import {type Dispatch, useCallback, useMemo, useState} from 'react'
 
-const DEFAULT_TRIGGER = "onChange";
-const DEFAULT_VALUE_PROP_NAME = "value";
+const DEFAULT_TRIGGER = 'onChange'
+const DEFAULT_VALUE_PROP_NAME = 'value'
 
 export interface UseControlledOptions<T> {
   /**
    * @description - 非受控模式下的默认值,会被受控模式下的值覆盖
    * @description_en - Default value in uncontrolled mode, will be overridden by the value in controlled mode
    */
-  defaultValue: T;
+  defaultValue: T
   /**
    * @description - 值变更前的回调函数，可用于拦截或修改新值
    * @description_en - Callback function before the value changes, can be used to intercept or modify the new value
    */
-  onBeforeChange?: (newValue: T, currentValue: T) => boolean | void;
+  onBeforeChange?: (newValue: T, currentValue: T) => boolean | void
   /**
    * @description - 当值发生变化时触发的回调函数名
    * @description_en - Callback function name triggered when the value changes
    * @default - onChange
    */
-  trigger?: string;
+  trigger?: string
   /**
    * @description - 值的属性名
    * @description_en - Property name of the value
    * @default - value
    */
-  valuePropName?: string;
-  props: Record<string, any>;
+  valuePropName?: string
+  props: Record<string, any>
 }
 
 export function useControlled<T>(
-  options: UseControlledOptions<T>
+  options: UseControlledOptions<T>,
 ): [T, Dispatch<React.SetStateAction<T>>] {
   const {
     defaultValue,
@@ -38,36 +38,31 @@ export function useControlled<T>(
     trigger = DEFAULT_TRIGGER,
     valuePropName = DEFAULT_VALUE_PROP_NAME,
     props,
-  } = options;
-  const isControlled = Object.prototype.hasOwnProperty.call(
-    props,
-    valuePropName
-  );
-  const [internalValue, setInternalValue] = useState<T>(defaultValue);
-  const value = isControlled ? props[valuePropName] : internalValue;
-  const onChange = useMemo(() => props[trigger], [props, trigger]);
+  } = options
+  const isControlled = Object.prototype.hasOwnProperty.call(props, valuePropName)
+  const [internalValue, setInternalValue] = useState<T>(defaultValue)
+  const value = isControlled ? props[valuePropName] : internalValue
+  const onChange = useMemo(() => props[trigger], [props, trigger])
 
   const setValue = useCallback<Dispatch<React.SetStateAction<T>>>(
     (newValue) => {
       const resolvedValue =
-        typeof newValue === "function"
-          ? (newValue as (prev: T) => T)(value)
-          : newValue;
+        typeof newValue === 'function' ? (newValue as (prev: T) => T)(value) : newValue
       if (onBeforeChange) {
-        const shouldProceed = onBeforeChange(resolvedValue, value);
+        const shouldProceed = onBeforeChange(resolvedValue, value)
         if (shouldProceed === false) {
-          return;
+          return
         }
       }
       if (!isControlled) {
-        setInternalValue(resolvedValue);
+        setInternalValue(resolvedValue)
       }
       if (onChange) {
-        onChange(resolvedValue);
+        onChange(resolvedValue)
       }
     },
-    [isControlled, onBeforeChange, trigger, value, onChange]
-  );
+    [isControlled, onBeforeChange, value, onChange],
+  )
 
-  return [value, setValue];
+  return [value, setValue]
 }

package/src/index.ts

@@ -1,5 +1,9 @@
-export * from "./components/ProcessControl";
-export * from "./components/Sundry";
-export * from "./components/Struct";
-export * from "./utils";
-export * from "./hooks";
+export * from './components/ProcessControl'
+export * from './components/Sundry'
+export * from './components/Struct'
+
+export * from './hooks'
+
+export * from './utils/sundry'
+export * from './utils/cx'
+export * from './utils/reactUtils'

package/src/utils/cx.test.ts

@@ -0,0 +1,33 @@
+import {describe, expect, it} from 'vitest'
+import {cx} from './cx'
+
+describe('cx', () => {
+  it('应该正确合并字符串类名', () => {
+    expect(cx('foo', 'bar')).toBe('foo bar')
+    expect(cx('foo', 'bar', 'baz')).toBe('foo bar baz')
+  })
+
+  it('应该过滤掉 falsy 值', () => {
+    expect(cx('foo', null, 'bar', undefined, false)).toBe('foo bar')
+  })
+
+  it('应该正确处理数组', () => {
+    expect(cx(['foo', 'bar'])).toBe('foo bar')
+    expect(cx('baz', ['foo', 'bar'])).toBe('baz foo bar')
+  })
+
+  it('应该正确处理对象', () => {
+    expect(cx({foo: true, bar: false})).toBe('foo')
+    expect(cx({foo: true, bar: true})).toBe('foo bar')
+  })
+
+  it('应该正确处理混合输入', () => {
+    expect(cx('foo', ['bar', 'baz'], {qux: true, quux: false})).toBe('foo bar baz qux')
+  })
+
+  it('应该去除重复的类名', () => {
+    expect(cx('foo', 'foo', 'bar')).toBe('foo bar')
+    expect(cx('foo', ['foo', 'bar'])).toBe('foo bar')
+    expect(cx('foo', {foo: true})).toBe('foo')
+  })
+})

package/src/utils/cx.ts

@@ -0,0 +1,25 @@
+export type CxInput = string | string[] | Record<string, boolean> | undefined | null | false
+
+export function cx(...args: CxInput[]): string {
+  const classes = new Set<string>()
+
+  for (const arg of args) {
+    if (!arg) {
+      continue
+    }
+
+    if (typeof arg === 'string') {
+      classes.add(arg)
+    } else if (Array.isArray(arg)) {
+      arg.forEach((item) => classes.add(item))
+    } else if (typeof arg === 'object') {
+      for (const [key, value] of Object.entries(arg)) {
+        if (value) {
+          classes.add(key)
+        }
+      }
+    }
+  }
+
+  return Array.from(classes).join(' ')
+}

package/src/utils/reactUtils.ts

@@ -0,0 +1,22 @@
+import type 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)
+  }
+}

package/src/utils/sundry.test.ts

@@ -0,0 +1,130 @@
+import {describe, expect, it} from 'vitest'
+import {Counter, formatDate} from './sundry'
+
+describe('formatDate', () => {
+  // 使用一个固定的日期来测试，以避免时间差异导致的测试失败
+  // 2023-04-15 14:30:45.678 星期六
+  const testDate = new Date(2023, 3, 15, 14, 30, 45, 678)
+
+  it('应该正确格式化年份', () => {
+    expect(formatDate('YY', testDate)).toBe('23')
+    expect(formatDate('YYYY', testDate)).toBe('2023')
+  })
+
+  it('应该正确格式化月份', () => {
+    expect(formatDate('M', testDate)).toBe('4')
+    expect(formatDate('MM', testDate)).toBe('04')
+    expect(formatDate('MMM', testDate)).toBe('Apr')
+    expect(formatDate('MMMM', testDate)).toBe('April')
+  })
+
+  it('应该正确格式化日期', () => {
+    expect(formatDate('D', testDate)).toBe('15')
+    expect(formatDate('DD', testDate)).toBe('15')
+  })
+
+  it('应该正确格式化星期', () => {
+    expect(formatDate('d', testDate)).toBe('6')
+    expect(formatDate('dd', testDate)).toBe('Sat')
+    expect(formatDate('ddd', testDate)).toBe('Sat')
+    expect(formatDate('dddd', testDate)).toBe('Saturday')
+  })
+
+  it('应该正确格式化小时', () => {
+    expect(formatDate('H', testDate)).toBe('14')
+    expect(formatDate('HH', testDate)).toBe('14')
+    expect(formatDate('h', testDate)).toBe('2')
+    expect(formatDate('hh', testDate)).toBe('02')
+  })
+
+  it('应该正确格式化分钟和秒', () => {
+    expect(formatDate('m', testDate)).toBe('30')
+    expect(formatDate('mm', testDate)).toBe('30')
+    expect(formatDate('s', testDate)).toBe('45')
+    expect(formatDate('ss', testDate)).toBe('45')
+  })
+
+  it('应该正确格式化毫秒', () => {
+    expect(formatDate('SSS', testDate)).toBe('678')
+  })
+
+  it('应该正确格式化上午/下午', () => {
+    expect(formatDate('A', testDate)).toBe('PM')
+    expect(formatDate('a', testDate)).toBe('pm')
+
+    const morningDate = new Date(2023, 3, 15, 9, 30, 45, 678)
+    expect(formatDate('A', morningDate)).toBe('AM')
+    expect(formatDate('a', morningDate)).toBe('am')
+  })
+
+  it('应该正确组合多种格式', () => {
+    expect(formatDate('YYYY-MM-DD', testDate)).toBe('2023-04-15')
+    expect(formatDate('YYYY/MM/DD HH:mm:ss', testDate)).toBe('2023/04/15 14:30:45')
+    expect(formatDate('YYYY年MM月DD日 HH时mm分ss秒', testDate)).toBe('2023年04月15日 14时30分45秒')
+    expect(formatDate('YY-MM-DD hh:mm:ss A', testDate)).toBe('23-04-15 02:30:45 PM')
+  })
+
+  it('当不传入日期时应该使用当前日期', () => {
+    // 由于测试时间不确定，这里只测试格式是否正确，不测试具体的值
+    const result = formatDate('YYYY-MM-DD')
+    expect(result).toMatch(/^\d{4}-\d{2}-\d{2}$/)
+  })
+})
+
+describe('Counter', () => {
+  it('应该从0开始计数', () => {
+    const counter = new Counter()
+    expect(counter.count).toBe(0)
+  })
+
+  it('next() 方法应该返回当前计数并递增', () => {
+    const counter = new Counter()
+    expect(counter.next()).toBe(0)
+    expect(counter.count).toBe(1)
+    expect(counter.next()).toBe(1)
+    expect(counter.count).toBe(2)
+  })
+
+  it('连续调用 next() 应该正确递增', () => {
+    const counter = new Counter()
+    expect(counter.next()).toBe(0)
+    expect(counter.next()).toBe(1)
+    expect(counter.next()).toBe(2)
+    expect(counter.next()).toBe(3)
+    expect(counter.count).toBe(4)
+  })
+})
+
+/* describe("cx", () => {
+  it("应该正确合并字符串类名", () => {
+    expect(cx("foo", "bar")).toBe("foo bar");
+    expect(cx("foo", "bar", "baz")).toBe("foo bar baz");
+  });
+
+  it("应该过滤掉 falsy 值", () => {
+    expect(cx("foo", null, "bar", undefined, false)).toBe("foo bar");
+  });
+
+  it("应该正确处理数组", () => {
+    expect(cx(["foo", "bar"])).toBe("foo bar");
+    expect(cx("baz", ["foo", "bar"])).toBe("baz foo bar");
+  });
+
+  it("应该正确处理对象", () => {
+    expect(cx({ foo: true, bar: false })).toBe("foo");
+    expect(cx({ foo: true, bar: true })).toBe("foo bar");
+  });
+
+  it("应该正确处理混合输入", () => {
+    expect(cx("foo", ["bar", "baz"], { qux: true, quux: false })).toBe(
+      "foo bar baz qux"
+    );
+  });
+
+  it("应该去除重复的类名", () => {
+    expect(cx("foo", "foo", "bar")).toBe("foo bar");
+    expect(cx("foo", ["foo", "bar"])).toBe("foo bar");
+    expect(cx("foo", { foo: true })).toBe("foo");
+  });
+});
+ */

package/src/utils/sundry.ts

@@ -0,0 +1,130 @@
+/**
+ * @param schema
+ * @example
+ * YY | 18 | Two-digit year
+ * YYYY | 2018 | Four-digit year
+ * M | 1-12 | The month, beginning at 1
+ * MM | 01-12 | The month, 2-digits
+ * MMM | Jan-Dec | The abbreviated month name
+ * MMMM | January-December | The full month name
+ * D | 1-31 | The day of the month
+ * DD | 01-31 | The day of the month, 2-digits
+ * d | 0-6 | The day of the week, with Sunday as 0
+ * dd | Su-Sa | The min name of the day of the week
+ * ddd | Sun-Sat | The short name of the day of the week
+ * dddd | Sunday-Saturday | The name of the day of the week
+ * H | 0-23 | The hour
+ * HH | 00-23 | The hour, 2-digits
+ * h | 1-12 | The hour, 12-hour clock
+ * hh | 01-12 | The hour, 12-hour clock, 2-digits
+ * m | 0-59 | The minute
+ * mm | 00-59 | The minute, 2-digits
+ * s | 0-59 | The second
+ * ss | 00-59 | The second, 2-digits
+ * SSS | 000-999 | The millisecond, 3-digits
+ * Z | +05:00 | The offset from UTC, ±HH:mm
+ * ZZ | +0500 | The offset from UTC, ±HHmm
+ * A | AM | PM
+ * a | am | pm
+ */
+export function formatDate(schema: string, date?: Date): string {
+  const d = date || new Date()
+  const year = d.getFullYear()
+  const month = d.getMonth() + 1
+  const day = d.getDate()
+  const hour = d.getHours()
+  const minute = d.getMinutes()
+  const second = d.getSeconds()
+  const millisecond = d.getMilliseconds()
+  const week = d.getDay()
+  const weekName = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  const weekFullName = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+  ]
+  const monthName = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ]
+  const monthFullName = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ]
+  // 直接使用 week 索引，不进行转换，因为 getDay() 已经返回了正确的星期索引 (0-6)
+  const weekFull = weekFullName[week]!
+  const weekShort = weekName[week]!
+  const monthIndex = month - 1
+  const monthFull = monthFullName[monthIndex]!
+  const monthShort = monthName[monthIndex]!
+  const map: Record<string, string> = {
+    YY: year.toString().slice(2),
+    YYYY: year.toString(),
+    M: month.toString(),
+    MM: month.toString().padStart(2, '0'),
+    MMM: monthShort,
+    MMMM: monthFull,
+    D: day.toString(),
+    DD: day.toString().padStart(2, '0'),
+    d: week.toString(),
+    dd: weekShort,
+    ddd: weekShort,
+    dddd: weekFull,
+    H: hour.toString(),
+    HH: hour.toString().padStart(2, '0'),
+    h: (hour % 12).toString(),
+    hh: (hour % 12).toString().padStart(2, '0'),
+    m: minute.toString(),
+    mm: minute.toString().padStart(2, '0'),
+    s: second.toString(),
+    ss: second.toString().padStart(2, '0'),
+    SSS: millisecond.toString().padStart(3, '0'),
+    Z: '+08:00',
+    ZZ: '+0800',
+    A: hour < 12 ? 'AM' : 'PM',
+    a: hour < 12 ? 'am' : 'pm',
+  }
+
+  return schema.replace(
+    /YYYY|YY|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|m{1,2}|s{1,2}|SSS|Z{1,2}|A|a/g,
+    (match) => {
+      return map[match]!
+    },
+  )
+}
+
+export class Counter {
+  count = 0
+
+  /**
+   * @description 获取下一个计数值,不考虑越界。
+   * @description_en Get the next count value, without considering overflow.
+   */
+  next() {
+    return this.count++
+  }
+}

package/src/utils/index.ts

@@ -1,185 +0,0 @@
-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);
-  }
-}
-
-/**
- * @param schema
- * @example
- * YY | 18 | Two-digit year
- * YYYY | 2018 | Four-digit year
- * M | 1-12 | The month, beginning at 1
- * MM | 01-12 | The month, 2-digits
- * MMM | Jan-Dec | The abbreviated month name
- * MMMM | January-December | The full month name
- * D | 1-31 | The day of the month
- * DD | 01-31 | The day of the month, 2-digits
- * d | 0-6 | The day of the week, with Sunday as 0
- * dd | Su-Sa | The min name of the day of the week
- * ddd | Sun-Sat | The short name of the day of the week
- * dddd | Sunday-Saturday | The name of the day of the week
- * H | 0-23 | The hour
- * HH | 00-23 | The hour, 2-digits
- * h | 1-12 | The hour, 12-hour clock
- * hh | 01-12 | The hour, 12-hour clock, 2-digits
- * m | 0-59 | The minute
- * mm | 00-59 | The minute, 2-digits
- * s | 0-59 | The second
- * ss | 00-59 | The second, 2-digits
- * SSS | 000-999 | The millisecond, 3-digits
- * Z | +05:00 | The offset from UTC, ±HH:mm
- * ZZ | +0500 | The offset from UTC, ±HHmm
- * A | AM | PM
- * a | am | pm
- */
-export function formatDate(schema: string, date?: Date): string {
-  const d = date || new Date();
-  const year = d.getFullYear();
-  const month = d.getMonth() + 1;
-  const day = d.getDate();
-  const hour = d.getHours();
-  const minute = d.getMinutes();
-  const second = d.getSeconds();
-  const millisecond = d.getMilliseconds();
-  const week = d.getDay();
-  const weekName = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  const weekFullName = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
-  const monthName = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
-  const monthFullName = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
-  const weekIndex = week === 0 ? 6 : week - 1;
-  const weekFull = weekFullName[weekIndex]!;
-  const weekShort = weekName[weekIndex]!;
-  const monthIndex = month - 1;
-  const monthFull = monthFullName[monthIndex]!;
-  const monthShort = monthName[monthIndex]!;
-  const map: Record<string, string> = {
-    YY: year.toString().slice(2),
-    YYYY: year.toString(),
-    M: month.toString(),
-    MM: month.toString().padStart(2, "0"),
-    MMM: monthShort,
-    MMMM: monthFull,
-    D: day.toString(),
-    DD: day.toString().padStart(2, "0"),
-    d: week.toString(),
-    dd: weekShort,
-    ddd: weekShort,
-    dddd: weekFull,
-    H: hour.toString(),
-    HH: hour.toString().padStart(2, "0"),
-    h: (hour % 12).toString(),
-    hh: (hour % 12).toString().padStart(2, "0"),
-    m: minute.toString(),
-    mm: minute.toString().padStart(2, "0"),
-    s: second.toString(),
-    ss: second.toString().padStart(2, "0"),
-    SSS: millisecond.toString().padStart(3, "0"),
-    Z: "+08:00",
-    ZZ: "+0800",
-    A: hour < 12 ? "AM" : "PM",
-    a: hour < 12 ? "am" : "pm",
-  };
-
-  return schema.replace(
-    /YYYY|YY|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|m{1,2}|s{1,2}|SSS|Z{1,2}|A|a/g,
-    (match) => {
-      return map[match]!;
-    }
-  );
-}
-
-export class Counter {
-  count = 0;
-
-  /**
-   * @description 获取下一个计数值,不考虑越界。
-   * @description_en Get the next count value, without considering overflow.
-   */
-  next() {
-    return this.count++;
-  }
-}
-
-export type CxInput =
-  | string
-  | string[]
-  | Record<string, boolean>
-  | undefined
-  | null
-  | false;
-
-export function cx(...args: CxInput[]): string {
-  const classes = new Set<string>();
-
-  for (const arg of args) {
-    if (!arg) {
-      continue;
-    }
-
-    if (typeof arg === "string") {
-      classes.add(arg);
-    } else if (Array.isArray(arg)) {
-      arg.forEach((item) => classes.add(item));
-    } else if (typeof arg === "object") {
-      for (const [key, value] of Object.entries(arg)) {
-        if (value) {
-          classes.add(key);
-        }
-      }
-    }
-  }
-
-  return Array.from(classes).join(" ");
-}