@king26/wk-react-tools 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './react';
+export * from './zustand';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./react"), exports);
+__exportStar(require("./zustand"), exports);
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,4CAA0B"}

package/dist/react/forEach.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { ReactNode } from "react";
+interface ForEachProps<T = unknown> {
+    of: T[];
+    children: (item: T, index: number) => ReactNode;
+    default?: ReactNode;
+    keyExtractor?: (item: T, index: number) => string | number;
+}
+export declare function ForEach<T = unknown>({ of: items, children: render, default: defaultChild, keyExtractor, }: ForEachProps<T>): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+export declare function forEachExample(): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=forEach.d.ts.map

package/dist/react/forEach.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forEach.d.ts","sourceRoot":"","sources":["../../src/react/forEach.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,UAAU,YAAY,CAAC,CAAC,GAAG,OAAO;IAChC,EAAE,EAAE,CAAC,EAAE,CAAC;IACR,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;CAC5D;AAED,wBAAgB,OAAO,CAAC,CAAC,GAAG,OAAO,EAAE,EACnC,EAAE,EAAE,KAAK,EACT,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,YAAY,EACrB,YAAkC,GACnC,EAAE,YAAY,CAAC,CAAC,CAAC,0GAcjB;AAED,wBAAgB,cAAc,4CAY7B"}

package/dist/react/forEach.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForEach = ForEach;
+exports.forEachExample = forEachExample;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+function ForEach({ of: items, children: render, default: defaultChild, keyExtractor = (_, index) => index, }) {
+    if (!Array.isArray(items) || items.length === 0) {
+        return defaultChild ?? null;
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: render(item, index) }, keyExtractor(item, index)))) }));
+}
+function forEachExample() {
+    const items = ["Apple", "Banana", "Cherry"];
+    return ((0, jsx_runtime_1.jsx)(ForEach, { of: items, default: (0, jsx_runtime_1.jsx)("div", { children: "No items" }), children: (item, index) => ((0, jsx_runtime_1.jsxs)("div", { children: [index + 1, ". ", item] }, item)) }));
+}
+//# sourceMappingURL=forEach.js.map

package/dist/react/forEach.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forEach.js","sourceRoot":"","sources":["../../src/react/forEach.tsx"],"names":[],"mappings":";;;;;AAUA,0BAmBC;AAED,wCAYC;;AA3CD,kDAA0B;AAU1B,SAAgB,OAAO,CAAc,EACnC,EAAE,EAAE,KAAK,EACT,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,YAAY,EACrB,YAAY,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAClB;IAChB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAChD,OAAO,YAAY,IAAI,IAAI,CAAC;IAC9B,CAAC;IAED,OAAO,CACL,2DACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,uBAAC,eAAK,CAAC,QAAQ,cACZ,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IADD,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAE7B,CAClB,CAAC,GACD,CACJ,CAAC;AACJ,CAAC;AAED,SAAgB,cAAc;IAC5B,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAE5C,OAAO,CACL,uBAAC,OAAO,IAAC,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,uDAAmB,YAC7C,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChB,4CACG,KAAK,GAAG,CAAC,QAAI,IAAI,KADV,IAAI,CAER,CACP,GACO,CACX,CAAC;AACJ,CAAC"}

package/dist/react/index.d.ts

@@ -0,0 +1,3 @@
+export { Switch, Case } from './switch';
+export { ForEach } from './forEach';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/react/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForEach = exports.Case = exports.Switch = void 0;
+var switch_1 = require("./switch");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return switch_1.Switch; } });
+Object.defineProperty(exports, "Case", { enumerable: true, get: function () { return switch_1.Case; } });
+var forEach_1 = require("./forEach");
+Object.defineProperty(exports, "ForEach", { enumerable: true, get: function () { return forEach_1.ForEach; } });
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.tsx"],"names":[],"mappings":";;;AAAA,mCAAwC;AAA/B,gGAAA,MAAM,OAAA;AAAE,8FAAA,IAAI,OAAA;AACrB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}

package/dist/react/switch.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+declare const CASE_TYPE: unique symbol;
+interface SwitchProps {
+    condition: unknown;
+    children: ReactNode;
+    default?: ReactNode;
+}
+interface CaseProps {
+    when: unknown;
+    children: ReactNode;
+}
+interface CaseComponent extends React.FC<CaseProps> {
+    type: typeof CASE_TYPE;
+}
+export declare const Case: CaseComponent;
+export declare function Switch({ condition, children, default: defaultChild }: SwitchProps): React.ReactNode;
+export declare function example(): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=switch.d.ts.map

package/dist/react/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/react/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,QAAA,MAAM,SAAS,eAA6B,CAAC;AAE7C,UAAU,WAAW;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,SAAS;IACf,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,aAAc,SAAQ,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC;IAC/C,IAAI,EAAE,OAAO,SAAS,CAAC;CAC1B;AAED,eAAO,MAAM,IAAI,EAAE,aAA0C,CAAC;AAG9D,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,WAAW,mBAiBjF;AAED,wBAAgB,OAAO,4CAatB"}

package/dist/react/switch.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Case = void 0;
+exports.Switch = Switch;
+exports.example = example;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const CASE_TYPE = Symbol.for('@switch/case');
+const Case = ({ children }) => children;
+exports.Case = Case;
+exports.Case.type = CASE_TYPE;
+function Switch({ condition, children, default: defaultChild }) {
+    const childrenArray = react_1.default.Children.toArray(children);
+    const matchedCase = childrenArray.find((child) => {
+        if (!react_1.default.isValidElement(child))
+            return false;
+        const elementType = child.type;
+        if (elementType.type !== CASE_TYPE)
+            return false;
+        const caseValue = child.props.when;
+        return caseValue === condition;
+    });
+    if (matchedCase) {
+        return matchedCase.props.children;
+    }
+    return defaultChild ?? null;
+}
+function example() {
+    const value = 5;
+    return ((0, jsx_runtime_1.jsxs)(Switch, { condition: value, default: (0, jsx_runtime_1.jsx)("div", { children: "Default case" }), children: [(0, jsx_runtime_1.jsx)(exports.Case, { when: 5, children: (0, jsx_runtime_1.jsx)("div", { children: "Case 1" }) }), (0, jsx_runtime_1.jsx)(exports.Case, { when: 4, children: (0, jsx_runtime_1.jsx)("div", { children: "Case 2" }) })] }));
+}
+//# sourceMappingURL=switch.js.map

package/dist/react/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/react/switch.tsx"],"names":[],"mappings":";;;;;;AAuBA,wBAiBC;AAED,0BAaC;;AAvDD,kDAA0B;AAG1B,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;AAiBtC,MAAM,IAAI,GAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC;AAAjD,QAAA,IAAI,QAA6C;AAC9D,YAAI,CAAC,IAAI,GAAG,SAAS,CAAC;AAEtB,SAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAe;IAC9E,MAAM,aAAa,GAAG,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEvD,MAAM,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;QAC7C,IAAI,CAAC,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QAC/C,MAAM,WAAW,GAAG,KAAK,CAAC,IAAqB,CAAC;QAChD,IAAI,WAAW,CAAC,IAAI,KAAK,SAAS;YAAE,OAAO,KAAK,CAAC;QAEjD,MAAM,SAAS,GAAI,KAAuC,CAAC,KAAK,CAAC,IAAI,CAAC;QACtE,OAAO,SAAS,KAAK,SAAS,CAAC;IACnC,CAAC,CAA8C,CAAC;IAEhD,IAAI,WAAW,EAAE,CAAC;QACd,OAAO,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC;IACtC,CAAC;IAED,OAAO,YAAY,IAAI,IAAI,CAAC;AAChC,CAAC;AAED,SAAgB,OAAO;IACnB,MAAM,KAAK,GAAG,CAAC,CAAC;IAEhB,OAAO,CACH,wBAAC,MAAM,IAAC,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,2DAAuB,aACtD,uBAAC,YAAI,IAAC,IAAI,EAAE,CAAC,YACT,qDAAiB,GACd,EACP,uBAAC,YAAI,IAAC,IAAI,EAAE,CAAC,YACT,qDAAiB,GACd,IACF,CACZ,CAAC;AACN,CAAC"}

package/dist/zustand/index.d.ts

@@ -0,0 +1,24 @@
+import type { StateCreator } from 'zustand';
+import type { DevtoolsOptions, PersistOptions, PersistStorage } from 'zustand/middleware';
+export declare function createBox<T extends object>(config: {
+    name: string;
+    storeCreator: StateCreator<T, [['zustand/immer', never]], [], T>;
+    /**
+     * Persist 配置
+     * - 如果为 false，则跳过持久化
+     * - 如果为字符串 'localStorage' 或 'sessionStorage'，则使用对应的存储
+     * - 如果为对象，则使用完整的 persist 配置
+     *   - storage 可以是 'localStorage' | 'sessionStorage' 或自定义的 PersistStorage 实现
+     *   - partialize 的返回类型会自动推断为 PersistedState，无需手动指定第二个泛型参数
+     */
+    persist?: false | 'localStorage' | 'sessionStorage' | (Omit<PersistOptions<T, unknown>, 'name' | 'storage'> & {
+        storage?: 'localStorage' | 'sessionStorage' | PersistStorage<any>;
+    });
+    /**
+     * Devtools 配置
+     * 如果为 false，则禁用 devtools
+     * 如果为对象，则使用完整的 devtools 配置(name 会自动设置)
+     */
+    devtools?: boolean | Omit<DevtoolsOptions, 'name'>;
+}): import("zustand").UseBoundStore<import("zustand").StoreApi<T>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/zustand/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/zustand/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,KAAK,EACV,eAAe,EACf,cAAc,EACd,cAAc,EACf,MAAM,oBAAoB,CAAA;AA+G3B,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE;IAClD,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAA;IAChE;;;;;;;OAOG;IACH,OAAO,CAAC,EACJ,KAAK,GACL,cAAc,GACd,gBAAgB,GAChB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,GAAG;QACtD,OAAO,CAAC,EAAE,cAAc,GAAG,gBAAgB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAA;KAClE,CAAC,CAAA;IACN;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;CACnD,kEA6DA"}

package/dist/zustand/index.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createBox = createBox;
+const middleware_1 = require("zustand/middleware");
+const immer_1 = require("zustand/middleware/immer");
+const react_1 = require("zustand/react");
+// 辅助函数:生成 storage key
+function generateStorageKey(name) {
+    return name
+        .replace(/([A-Z])/g, '-$1')
+        .toLowerCase()
+        .replace(/^-/, '')
+        .concat('-storage');
+}
+// 辅助函数:创建 storage
+function createStorage(storageType) {
+    if (typeof storageType === 'string') {
+        return (0, middleware_1.createJSONStorage)(() => storageType === 'localStorage' ? localStorage : sessionStorage);
+    }
+    if (storageType) {
+        return storageType;
+    }
+    // 默认使用 sessionStorage
+    return (0, middleware_1.createJSONStorage)(() => sessionStorage);
+}
+function createBox(config) {
+    const { name, storeCreator, persist: persistConfig, devtools: devtoolsConfig = true, } = config;
+    // 自动生成 storage key
+    const storageKey = generateStorageKey(name);
+    // 创建基础 store(应用 immer)
+    const baseStore = (0, immer_1.immer)(storeCreator);
+    // 应用 persist(如果启用)
+    // 注意:使用 any 是因为中间件组合会导致复杂的类型，这是 zustand 的类型系统限制
+    let storeWithPersist = baseStore;
+    if (persistConfig !== false && persistConfig !== undefined) {
+        let persistOptions;
+        if (typeof persistConfig === 'string') {
+            // 简化配置:使用字符串指定存储类型
+            const persistStorage = createStorage(persistConfig);
+            persistOptions = {
+                name: storageKey,
+                storage: persistStorage,
+            };
+        }
+        else {
+            // 完整配置:处理 storage 选项
+            const { storage, ...restOptions } = persistConfig;
+            const persistStorage = createStorage(storage);
+            // 构建完整的 persist 配置
+            persistOptions = {
+                name: storageKey,
+                storage: persistStorage,
+                ...restOptions,
+            };
+        }
+        storeWithPersist = (0, middleware_1.persist)(baseStore, persistOptions);
+    }
+    // 应用 devtools(如果启用)
+    let finalStore = storeWithPersist;
+    if (devtoolsConfig !== false) {
+        const devtoolsOptions = {
+            name,
+            enabled: true,
+            ...(typeof devtoolsConfig === 'object' && devtoolsConfig),
+        };
+        finalStore = (0, middleware_1.devtools)(storeWithPersist, devtoolsOptions);
+    }
+    return (0, react_1.create)()(finalStore);
+}
+//# sourceMappingURL=index.js.map

package/dist/zustand/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/zustand/index.ts"],"names":[],"mappings":";;AAuHA,8BAqFC;AA5MD,mDAAyE;AACzE,oDAAgD;AAChD,yCAAsC;AAwFtC,sBAAsB;AACtB,SAAS,kBAAkB,CAAC,IAAY;IACtC,OAAO,IAAI;SACR,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC;SAC1B,WAAW,EAAE;SACb,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;SACjB,MAAM,CAAC,UAAU,CAAC,CAAA;AACvB,CAAC;AAED,kBAAkB;AAClB,SAAS,aAAa,CACpB,WAIa;IAEb,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE,CAAC;QACpC,OAAO,IAAA,8BAAiB,EAAC,GAAG,EAAE,CAC5B,WAAW,KAAK,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAC1C,CAAA;IACxB,CAAC;IACD,IAAI,WAAW,EAAE,CAAC;QAChB,OAAO,WAAW,CAAA;IACpB,CAAC;IACD,sBAAsB;IACtB,OAAO,IAAA,8BAAiB,EAAC,GAAG,EAAE,CAAC,cAAc,CAAsB,CAAA;AACrE,CAAC;AAED,SAAgB,SAAS,CAAmB,MAwB3C;IACC,MAAM,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,cAAc,GAAG,IAAI,GAChC,GAAG,MAAM,CAAA;IAEV,mBAAmB;IACnB,MAAM,UAAU,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAE3C,uBAAuB;IACvB,MAAM,SAAS,GAAG,IAAA,aAAK,EAAI,YAAY,CAAC,CAAA;IAExC,mBAAmB;IACnB,gDAAgD;IAChD,IAAI,gBAAgB,GAAQ,SAAS,CAAA;IACrC,IAAI,aAAa,KAAK,KAAK,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;QAI3D,IAAI,cAAyD,CAAA;QAE7D,IAAI,OAAO,aAAa,KAAK,QAAQ,EAAE,CAAC;YACtC,mBAAmB;YACnB,MAAM,cAAc,GAClB,aAAa,CAAyB,aAAa,CAAC,CAAA;YACtD,cAAc,GAAG;gBACf,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,cAAc;aACxB,CAAA;QACH,CAAC;aAAM,CAAC;YACN,qBAAqB;YACrB,MAAM,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE,GAAG,aAAa,CAAA;YACjD,MAAM,cAAc,GAAG,aAAa,CAClC,OAAc,CACf,CAAA;YAED,mBAAmB;YACnB,cAAc,GAAG;gBACf,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,cAAc;gBACvB,GAAG,WAAW;aAC8B,CAAA;QAChD,CAAC;QAED,gBAAgB,GAAG,IAAA,oBAAO,EAAC,SAAS,EAAE,cAAc,CAAC,CAAA;IACvD,CAAC;IAED,oBAAoB;IACpB,IAAI,UAAU,GAAQ,gBAAgB,CAAA;IACtC,IAAI,cAAc,KAAK,KAAK,EAAE,CAAC;QAC7B,MAAM,eAAe,GAAoB;YACvC,IAAI;YACJ,OAAO,EAAE,IAAI;YACb,GAAG,CAAC,OAAO,cAAc,KAAK,QAAQ,IAAI,cAAc,CAAC;SAC1D,CAAA;QACD,UAAU,GAAG,IAAA,qBAAQ,EAAC,gBAAgB,EAAE,eAAe,CAAC,CAAA;IAC1D,CAAC;IAED,OAAO,IAAA,cAAM,GAAK,CAAC,UAAU,CAAC,CAAA;AAChC,CAAC"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@king26/wk-react-tools",
+  "version": "1.0.0",
+  "description": "React 简化工具包",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.js",
+      "types": "./dist/react/index.d.ts"
+    },
+    "./zustand": {
+      "import": "./dist/zustand/index.js",
+      "require": "./dist/zustand/index.js",
+      "types": "./dist/zustand/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "tools",
+    "zustand",
+    "switch"
+  ],
+  "author": "zwking",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "zustand": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './react';
+export * from './zustand';

package/src/react/forEach.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+interface ForEachProps<T = unknown> {
+  of: T[];
+  children: (item: T, index: number) => ReactNode;
+  default?: ReactNode;
+  keyExtractor?: (item: T, index: number) => string | number;
+}
+
+export function ForEach<T = unknown>({
+  of: items,
+  children: render,
+  default: defaultChild,
+  keyExtractor = (_, index) => index,
+}: ForEachProps<T>) {
+  if (!Array.isArray(items) || items.length === 0) {
+    return defaultChild ?? null;
+  }
+
+  return (
+    <>
+      {items.map((item, index) => (
+        <React.Fragment key={keyExtractor(item, index)}>
+          {render(item, index)}
+        </React.Fragment>
+      ))}
+    </>
+  );
+}
+
+export function forEachExample() {
+  const items = ["Apple", "Banana", "Cherry"];
+
+  return (
+    <ForEach of={items} default={<div>No items</div>}>
+      {(item, index) => (
+        <div key={item}>
+          {index + 1}. {item}
+        </div>
+      )}
+    </ForEach>
+  );
+}

package/src/react/index.tsx

@@ -0,0 +1,2 @@
+export { Switch, Case } from './switch';
+export { ForEach } from './forEach';

package/src/react/switch.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import type {ReactNode} from 'react';
+
+const CASE_TYPE = Symbol.for('@switch/case');
+
+interface SwitchProps {
+    condition: unknown;
+    children: ReactNode;
+    default?: ReactNode;
+}
+
+interface CaseProps {
+    when: unknown;
+    children: ReactNode;
+}
+
+interface CaseComponent extends React.FC<CaseProps> {
+    type: typeof CASE_TYPE;
+}
+
+export const Case: CaseComponent = ({ children }) => children;
+Case.type = CASE_TYPE;
+
+export function Switch({ condition, children, default: defaultChild }: SwitchProps) {
+    const childrenArray = React.Children.toArray(children);
+    
+    const matchedCase = childrenArray.find((child) => {
+        if (!React.isValidElement(child)) return false;
+        const elementType = child.type as CaseComponent;
+        if (elementType.type !== CASE_TYPE) return false;
+        
+        const caseValue = (child as React.ReactElement<CaseProps>).props.when;
+        return caseValue === condition;
+    }) as React.ReactElement<CaseProps> | undefined;
+
+    if (matchedCase) {
+        return matchedCase.props.children;
+    }
+
+    return defaultChild ?? null;
+}
+
+export function example() {
+    const value = 5;
+    
+    return (
+        <Switch condition={value} default={<div>Default case</div>}>
+            <Case when={5}>
+                <div>Case 1</div>
+            </Case>
+            <Case when={4}>
+                <div>Case 2</div>
+            </Case>
+        </Switch>
+    );
+}

package/src/zustand/index.ts

@@ -0,0 +1,205 @@
+import { createJSONStorage, devtools, persist } from 'zustand/middleware'
+import { immer } from 'zustand/middleware/immer'
+import { create } from 'zustand/react'
+import type { StateCreator } from 'zustand'
+import type {
+  DevtoolsOptions,
+  PersistOptions,
+  PersistStorage,
+} from 'zustand/middleware'
+
+/**
+ * 约定大于配置的 Store 创建函数
+ * 自动应用 immer、persist、devtools 中间件
+ *
+ * @example
+ * // 基础用法 - 只需提供 store 名称和初始状态
+ * const useStore = createBox<UserStore>({
+ *   name: 'UserStore',
+ *   storeCreator: (set, get) => ({
+ *     name: '',
+ *     setName: (name: string) => set({ name }),
+ *   }),
+ * })
+ *
+ * @example
+ * // 简化配置 - 使用字符串指定存储类型
+ * const useStore = createBox<UserStore>({
+ *   name: 'UserStore',
+ *   storeCreator: (set, get) => ({
+ *     name: '',
+ *     setName: (name: string) => set({ name }),
+ *   }),
+ *   persist: 'localStorage', // 或 'sessionStorage' (默认)
+ * })
+ *
+ * @example
+ * // 完整配置 - 支持所有 persist 和 devtools 选项
+ * const useStore = createBox<UserStore>({
+ *   name: 'UserStore',
+ *   storeCreator: (set, get) => ({
+ *     name: '',
+ *     setName: (name: string) => set({ name }),
+ *   }),
+ *   persist: {
+ *     storage: 'localStorage',
+ *     partialize: (state) => ({ name: state.name }),
+ *     version: 1,
+ *     migrate: (persistedState, version) => ({ ...persistedState, version }),
+ *   },
+ *   devtools: {
+ *     enabled: true,
+ *     anonymousActionType: 'anonymous',
+ *   },
+ * })
+ *
+ * @example
+ * // 自定义存储 - 使用自定义的 PersistStorage 实现
+ * const customStorage: PersistStorage<UserStore> = {
+ *   getItem: (name) => {
+ *     // 自定义获取逻辑
+ *     const str = localStorage.getItem(name)
+ *     return str ? JSON.parse(str) : null
+ *   },
+ *   setItem: (name, value) => {
+ *     // 自定义存储逻辑
+ *     localStorage.setItem(name, JSON.stringify(value))
+ *   },
+ *   removeItem: (name) => {
+ *     localStorage.removeItem(name)
+ *   },
+ * }
+ * const useStore = createBox<UserStore>({
+ *   name: 'UserStore',
+ *   storeCreator: (set, get) => ({
+ *     name: '',
+ *     setName: (name: string) => set({ name }),
+ *   }),
+ *   persist: {
+ *     storage: customStorage, // 使用自定义存储
+ *   },
+ * })
+ */
+// 辅助类型:从 persist 配置中提取 PersistedState
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type ExtractPersistedState<T, P> = P extends {
+  partialize: (state: T) => infer PS
+}
+  ? PS
+  : T
+
+// 辅助函数:生成 storage key
+function generateStorageKey(name: string): string {
+  return name
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase()
+    .replace(/^-/, '')
+    .concat('-storage')
+}
+
+// 辅助函数:创建 storage
+function createStorage<T>(
+  storageType:
+    | 'localStorage'
+    | 'sessionStorage'
+    | PersistStorage<T>
+    | undefined,
+): PersistStorage<T> {
+  if (typeof storageType === 'string') {
+    return createJSONStorage(() =>
+      storageType === 'localStorage' ? localStorage : sessionStorage,
+    ) as PersistStorage<T>
+  }
+  if (storageType) {
+    return storageType
+  }
+  // 默认使用 sessionStorage
+  return createJSONStorage(() => sessionStorage) as PersistStorage<T>
+}
+
+export function createBox<T extends object>(config: {
+  name: string
+  storeCreator: StateCreator<T, [['zustand/immer', never]], [], T>
+  /**
+   * Persist 配置
+   * - 如果为 false，则跳过持久化
+   * - 如果为字符串 'localStorage' 或 'sessionStorage'，则使用对应的存储
+   * - 如果为对象，则使用完整的 persist 配置
+   *   - storage 可以是 'localStorage' | 'sessionStorage' 或自定义的 PersistStorage 实现
+   *   - partialize 的返回类型会自动推断为 PersistedState，无需手动指定第二个泛型参数
+   */
+  persist?:
+    | false
+    | 'localStorage'
+    | 'sessionStorage'
+    | (Omit<PersistOptions<T, unknown>, 'name' | 'storage'> & {
+        storage?: 'localStorage' | 'sessionStorage' | PersistStorage<any>
+      })
+  /**
+   * Devtools 配置
+   * 如果为 false，则禁用 devtools
+   * 如果为对象，则使用完整的 devtools 配置(name 会自动设置)
+   */
+  devtools?: boolean | Omit<DevtoolsOptions, 'name'>
+}) {
+  const {
+    name,
+    storeCreator,
+    persist: persistConfig,
+    devtools: devtoolsConfig = true,
+  } = config
+
+  // 自动生成 storage key
+  const storageKey = generateStorageKey(name)
+
+  // 创建基础 store(应用 immer)
+  const baseStore = immer<T>(storeCreator)
+
+  // 应用 persist(如果启用)
+  // 注意:使用 any 是因为中间件组合会导致复杂的类型，这是 zustand 的类型系统限制
+  let storeWithPersist: any = baseStore
+  if (persistConfig !== false && persistConfig !== undefined) {
+    // 从配置中推断 PersistedState
+    type InferredPersistedState = ExtractPersistedState<T, typeof persistConfig>
+
+    let persistOptions: PersistOptions<T, InferredPersistedState>
+
+    if (typeof persistConfig === 'string') {
+      // 简化配置:使用字符串指定存储类型
+      const persistStorage =
+        createStorage<InferredPersistedState>(persistConfig)
+      persistOptions = {
+        name: storageKey,
+        storage: persistStorage,
+      }
+    } else {
+      // 完整配置:处理 storage 选项
+      const { storage, ...restOptions } = persistConfig
+      const persistStorage = createStorage<InferredPersistedState>(
+        storage as any,
+      )
+
+      // 构建完整的 persist 配置
+      persistOptions = {
+        name: storageKey,
+        storage: persistStorage,
+        ...restOptions,
+      } as PersistOptions<T, InferredPersistedState>
+    }
+
+    storeWithPersist = persist(baseStore, persistOptions)
+  }
+
+  // 应用 devtools(如果启用)
+  let finalStore: any = storeWithPersist
+  if (devtoolsConfig !== false) {
+    const devtoolsOptions: DevtoolsOptions = {
+      name,
+      enabled: true,
+      ...(typeof devtoolsConfig === 'object' && devtoolsConfig),
+    }
+    finalStore = devtools(storeWithPersist, devtoolsOptions)
+  }
+
+  return create<T>()(finalStore)
+}