@xwadex/fesd-next 0.3.4-4.1 → 0.3.4-7.0

package/dist/components/TestComponent.d.ts

@@ -0,0 +1,4 @@
+export interface PropsTypes {
+}
+declare const TestComponent: React.FC<PropsTypes>;
+export default TestComponent;

package/dist/components/TestComponent.js

@@ -0,0 +1,10 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useCookies } from "../hooks/index.js";
+const TestComponent = () => {
+    const cookie = useCookies();
+    console.log(cookie);
+    return (_jsx(_Fragment, { children: "TestComponent content" }));
+};
+TestComponent.displayName = "TestComponent";
+export default TestComponent;

package/dist/components/index.d.ts

@@ -1,5 +1,2 @@
-export * from "./dragResize";
-export * from "./dragSortable";
-export * from "./accordions";
-export * from "./resizables";
-export * from "./scrollAreas";
+export declare const test = "wade";
+export { default as TestComponent } from "./TestComponent";

package/dist/components/index.js

@@ -1,7 +1,2 @@
-// dev components
-export * from "./dragResize";
-export * from "./dragSortable";
-// shadcn Components
-export * from "./accordions";
-export * from "./resizables";
-export * from "./scrollAreas";
+export const test = "wade";
+export { default as TestComponent } from "./TestComponent";

package/dist/hooks/index.d.ts

@@ -3,5 +3,6 @@ export * from "./useDebounceValue";
 export * from "./useCookies";
 export * from "./useDragResize";
 export * from "./useAsyncFetcher";
-export * from "./useCollapse";
 export * from "./useMounted";
+export * from "./useEffectOne";
+export * from "./useEffectLeave";

package/dist/hooks/index.js

@@ -3,5 +3,6 @@ export * from "./useDebounceValue";
 export * from "./useCookies";
 export * from "./useDragResize";
 export * from "./useAsyncFetcher";
-export * from "./useCollapse";
 export * from "./useMounted";
+export * from "./useEffectOne";
+export * from "./useEffectLeave";

package/dist/hooks/useAnchors.d.ts

@@ -0,0 +1,51 @@
+import { Easing } from "motion/react";
+export interface PropsTypes {
+}
+export interface AnchorActionsOptions {
+    anchor?: string;
+    container: string;
+    offseters?: string | string[];
+    direction?: "horizontal" | "vertical";
+    duration?: number;
+    offset?: number;
+    delay?: number;
+    ease?: Easing | Easing[] | undefined;
+    onScroll?: () => void;
+    onScrolling?: (value: number) => void;
+    onScrolled?: () => void;
+}
+export declare function useAnchors(): {
+    registerAnchors: typeof registerAnchors;
+    registerContainers: typeof registerContainers;
+    registerOffseters: typeof registerOffseters;
+    getStores: () => AnchorsStores;
+    removeAnchor: (name: string) => void;
+    removeOffseter: (name: string) => void;
+    removeContainer: (name: string) => void;
+    scrollToAnchor: ({ anchor: anchorName, container: containerName, ...options }: AnchorActionsOptions) => void;
+};
+export declare function registerAnchors(name: string): {
+    ref: (node: HTMLDivElement | null) => void;
+    "data-anchor": string;
+};
+export declare function registerOffseters(name: string): {
+    ref: (node: HTMLDivElement | null) => void;
+    "data-anchor-offseter": string;
+};
+export declare function registerContainers(name: string): {
+    ref: (node: HTMLDivElement | null) => void;
+    "data-anchor-container": string;
+};
+export type AnchorsStores = {
+    anchors: Map<string, HTMLElement | null>;
+    containers: Map<string, HTMLElement | null>;
+    offseters: Map<string, HTMLElement | null>;
+};
+export declare const useAnchorsStores: import("zustand").UseBoundStore<import("zustand").StoreApi<AnchorsStores>>;
+export declare const getAnchorsStores: () => AnchorsStores;
+export declare const addAnchor: (name: string, anchorNode: HTMLElement | null) => void;
+export declare const removeAnchor: (name: string) => void;
+export declare const addContainer: (name: string, containerNode: HTMLElement | null) => void;
+export declare const removeContainer: (name: string) => void;
+export declare const addOffseter: (name: string, containerNode: HTMLElement | null) => void;
+export declare const removeOffseter: (name: string) => void;

package/dist/hooks/useAnchors.js

@@ -0,0 +1,121 @@
+"use client";
+import { useCallback, useMemo, useRef } from "react";
+import { animate, useMotionValue } from "motion/react";
+import { create } from "zustand";
+export function useAnchors() {
+    const motionValue = useMotionValue(0);
+    const controlsRef = useRef(null);
+    const scrollToAnchor = useCallback(({ anchor: anchorName, container: containerName, ...options }) => {
+        const { offseters, direction = "vertical", duration = 0.5, offset = 0, delay = 0, ease = [0.215, 0.61, 0.355, 1.0], onScroll, onScrolling, onScrolled, } = options;
+        if (!anchorName || !containerName)
+            return;
+        const stores = getAnchorsStores();
+        if (!stores?.anchors || !stores?.containers)
+            return;
+        const anchorDom = stores.anchors.get(anchorName);
+        const containerDom = stores.containers.get(containerName);
+        if (!anchorDom || !containerDom)
+            return;
+        const { top: targetTop } = anchorDom.getBoundingClientRect();
+        const { top: containerTop } = containerDom.getBoundingClientRect();
+        const containerScrollTop = Math.round(containerDom.scrollTop);
+        const scrollOffset = Math.round(targetTop - containerTop + containerScrollTop);
+        if (scrollOffset == containerScrollTop)
+            return;
+        if (controlsRef.current)
+            controlsRef.current?.stop();
+        // console.log("scrollOffset", scrollOffset);
+        // console.log("containerScrollTop", containerScrollTop);
+        // console.log(scrollOffset == containerScrollTop);
+        motionValue.set(containerScrollTop);
+        controlsRef.current = animate(motionValue, scrollOffset, {
+            duration: 0.5,
+            delay: 5,
+            ease: [0.215, 0.61, 0.355, 1.0],
+            onPlay: onScroll,
+            onComplete: onScrolled,
+            onUpdate: (value) => {
+                containerDom.scrollTop = value;
+                onScrolling?.(value);
+            },
+        });
+    }, [motionValue]);
+    const returnsMemo = useMemo(() => ({
+        registerAnchors,
+        registerContainers,
+        registerOffseters,
+        getStores: getAnchorsStores,
+        removeAnchor: removeAnchor,
+        removeOffseter: removeOffseter,
+        removeContainer: removeContainer,
+        scrollToAnchor
+    }), [scrollToAnchor]);
+    return returnsMemo;
+}
+export function registerAnchors(name) {
+    const register = (node) => {
+        if (node)
+            addAnchor(name, node);
+        else
+            removeAnchor(name);
+    };
+    return {
+        ref: register,
+        "data-anchor": name
+    };
+}
+export function registerOffseters(name) {
+    const register = (node) => {
+        if (node)
+            addOffseter(name, node);
+        else
+            removeOffseter(name);
+    };
+    return {
+        ref: register,
+        "data-anchor-offseter": name
+    };
+}
+export function registerContainers(name) {
+    const register = (node) => {
+        if (node)
+            addContainer(name, node);
+        else
+            removeContainer(name);
+    };
+    return {
+        ref: register,
+        "data-anchor-container": name
+    };
+}
+const anchorsStores = {
+    anchors: new Map(),
+    containers: new Map(),
+    offseters: new Map(),
+};
+export const useAnchorsStores = create()(() => anchorsStores);
+export const getAnchorsStores = () => useAnchorsStores.getState();
+export const addAnchor = (name, anchorNode) => useAnchorsStores.setState(stores => {
+    stores.anchors?.set(name, anchorNode);
+    return { anchors: stores.anchors };
+});
+export const removeAnchor = (name) => useAnchorsStores.setState(stores => {
+    stores.anchors?.delete(name);
+    return { anchors: stores.anchors };
+});
+export const addContainer = (name, containerNode) => useAnchorsStores.setState(stores => {
+    stores.containers?.set(name, containerNode);
+    return { containers: stores.containers };
+});
+export const removeContainer = (name) => useAnchorsStores.setState(stores => {
+    stores.containers?.delete(name);
+    return { containers: stores.containers };
+});
+export const addOffseter = (name, containerNode) => useAnchorsStores.setState(stores => {
+    stores.offseters?.set(name, containerNode);
+    return { offseters: stores.offseters };
+});
+export const removeOffseter = (name) => useAnchorsStores.setState(stores => {
+    stores.offseters?.delete(name);
+    return { offseters: stores.offseters };
+});

package/dist/hooks/useAsyncFetcher.d.ts

@@ -1,10 +1,11 @@
-export interface ReturnDatasTypes {
+type ReturnDatasTypes = {
     fetcher: (payload: PayloadTypes) => Promise<any>;
     cancel: () => void;
     pending: boolean;
-}
-export interface PayloadTypes {
+};
+interface PayloadTypes {
     url: string | URL | globalThis.Request;
     options?: RequestInit;
 }
 export declare function useAsyncFetcher(): ReturnDatasTypes;
+export {};

package/dist/hooks/useCookies.d.ts

@@ -1,6 +1,6 @@
 export declare function useCookies(): {
     setCookies: (name: string, value: string, days?: number) => void;
     getCookies: (name: string) => string | null;
-    updateCookies: (name: string, value: string, days?: number) => false | void;
+    updateCookies: (name: string, value: string, days?: number) => void;
     deleteCookies: (name: string) => void;
 };

package/dist/hooks/useCookies.js

@@ -1,24 +1,19 @@
 "use client";
-//wade 2024.12.06
+import Cookies from 'js-cookie';
+// wade 2024.12.06 (js-cookie 版本)
 export function useCookies() {
     const setCookies = (name, value, days = 7) => {
-        const date = new Date();
-        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
-        const expires = `expires=${date.toUTCString()}`;
-        document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=/`;
+        Cookies.set(name, value, { expires: days, path: "/" });
     };
     const getCookies = (name) => {
-        const cookies = document.cookie.split("; ");
-        for (const cookie of cookies) {
-            const [key, value] = cookie.split("=");
-            if (key === name)
-                return decodeURIComponent(value);
-        }
-        return null; // 如果找不到，返回 null
+        return Cookies.get(name) ?? null;
+    };
+    const updateCookies = (name, value, days = 7) => {
+        if (getCookies(name) !== null)
+            setCookies(name, value, days);
     };
-    const updateCookies = (name, value, days = 7) => getCookies(name) !== null && setCookies(name, value, days);
     const deleteCookies = (name) => {
-        document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
+        Cookies.remove(name, { path: "/" });
     };
     return { setCookies, getCookies, updateCookies, deleteCookies };
 }

package/dist/hooks/useDragResize.d.ts

@@ -2,11 +2,13 @@ export interface ResizeTypes {
     width?: number | string;
     height?: number | string;
 }
-export interface DragResizePropsTypes {
+export interface DragResizeProps {
     active?: boolean;
-    direction?: "width" | "height";
+    direction?: "horizontal" | "vertical";
     minWidth?: number;
     maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
     onInit?: (size: ResizeTypes) => void;
     onResizeStart?: (size: ResizeTypes) => void;
     onResizing?: (size: ResizeTypes) => void;
@@ -15,5 +17,6 @@ export interface DragResizePropsTypes {
 export type DragResizeTypes = {
     dragRef: React.RefObject<HTMLDivElement | null>;
     resizeRef: React.RefObject<HTMLDivElement | null>;
+    resize?: ResizeTypes;
 };
-export declare function useDragResize({ active, direction, minWidth, maxWidth, onInit, onResizeStart, onResizing, onResizeEnd }: DragResizePropsTypes): DragResizeTypes;
+export declare function useDragResize({ active, direction, minWidth, maxWidth, minHeight, maxHeight, onInit, onResizeStart, onResizing, onResizeEnd }: DragResizeProps): DragResizeTypes;

package/dist/hooks/useDragResize.js

@@ -1,9 +1,10 @@
 "use client";
 //wade 2024.12.06
-import { useEffect, useRef } from "react";
-export function useDragResize({ active = true, direction = "width", minWidth = 300, maxWidth = 500, onInit, onResizeStart, onResizing, onResizeEnd }) {
+import { useEffect, useRef, useState } from "react";
+export function useDragResize({ active = true, direction = "horizontal", minWidth, maxWidth, minHeight, maxHeight, onInit, onResizeStart, onResizing, onResizeEnd }) {
     const dragRef = useRef(null);
     const resizeRef = useRef(null);
+    const [resize, setResize] = useState({ width: 0, height: 0 });
     const getResizeSizeValue = () => {
         if (!resizeRef.current)
             return;
@@ -18,10 +19,18 @@ export function useDragResize({ active = true, direction = "width", minWidth = 3
         const rect = resizeRef.current.getBoundingClientRect();
         const resizeWidth = clientX - rect.left;
         const resizeHeight = clientY - rect.top;
-        if (resizeWidth <= minWidth || resizeWidth >= maxWidth)
-            return;
-        resizeRef.current.style.width = resizeWidth + "px";
-        return { width: resizeWidth };
+        if (direction == "horizontal"
+            && (minWidth && resizeWidth >= minWidth)
+            && (maxWidth && resizeWidth <= maxWidth)) {
+            resizeRef.current.style.width = resizeWidth + "px";
+            return { width: resizeWidth, height: undefined };
+        }
+        if (direction == "vertical"
+            && (minHeight && resizeWidth >= minHeight)
+            && (maxHeight && resizeWidth <= maxHeight)) {
+            resizeRef.current.style.height = resizeHeight + "px";
+            return { width: undefined, height: resizeHeight };
+        }
     };
     const onInitCallback = () => {
         const resizeValue = getResizeSizeValue();
@@ -33,7 +42,10 @@ export function useDragResize({ active = true, direction = "width", minWidth = 3
     };
     const onMouseMove = (e) => {
         const resizeValue = setResizeValue(e.clientX, e.clientY);
-        resizeValue && onResizing?.(resizeValue);
+        if (!resizeValue)
+            return;
+        setResize(() => ({ ...resizeValue }));
+        onResizing?.(resizeValue);
     };
     const onMouseUp = () => {
         const resizeValue = getResizeSizeValue();
@@ -59,5 +71,5 @@ export function useDragResize({ active = true, direction = "width", minWidth = 3
             removeEventListeners();
         };
     }, [active]);
-    return { dragRef, resizeRef };
+    return { dragRef, resizeRef, resize };
 }

package/dist/hooks/useEffectLeave.d.ts

@@ -0,0 +1 @@
+export declare function useEffectLeave(callback: () => void): void;

package/dist/hooks/useEffectLeave.js

@@ -0,0 +1,12 @@
+"use client";
+import { useEffect, useRef } from "react";
+export function useEffectLeave(callback) {
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+    useEffect(() => {
+        return () => {
+            callbackRef.current?.();
+            callbackRef.current = null;
+        };
+    }, []);
+}

package/dist/hooks/useEffectOne.d.ts

@@ -0,0 +1 @@
+export declare function useEffectOne(callback: () => void): void;

package/dist/hooks/useEffectOne.js

@@ -0,0 +1,12 @@
+"use client";
+import { useEffect, useRef } from "react";
+export function useEffectOne(callback) {
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+    useEffect(() => {
+        callbackRef.current?.();
+        return () => {
+            callbackRef.current = null;
+        };
+    }, []);
+}

package/dist/hooks/useIsMobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/hooks/useIsMobile.js

@@ -0,0 +1,16 @@
+"use client";
+import { useEffect, useState } from "react";
+const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = useState(undefined);
+    useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener("change", onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener("change", onChange);
+    }, []);
+    return !!isMobile;
+}

package/dist/hooks/useLocations.d.ts

@@ -0,0 +1,13 @@
+interface LocationState {
+    hash: string;
+    host: string;
+    hostname: string;
+    href: string;
+    origin: string;
+    pathname: string;
+    port: string;
+    protocol: string;
+    search: string;
+}
+export declare function useLocations(): LocationState;
+export {};

package/dist/hooks/useLocations.js

@@ -0,0 +1,25 @@
+"use client";
+import { useEffect, useState } from "react";
+;
+export function useLocations() {
+    const [locations, setLocations] = useState({
+        hash: "",
+        host: "",
+        hostname: "",
+        href: "",
+        origin: "",
+        pathname: "",
+        port: "",
+        protocol: "",
+        search: "",
+    });
+    const getLocationValue = () => {
+        setLocations({ ...window.location });
+    };
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        getLocationValue();
+    }, []);
+    return locations;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xwadex/fesd-next",
-	"version": "0.3.44.1",
+	"version": "0.3.47.0",
 	"private": false,
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -24,12 +24,6 @@
 		"./types": {
 			"import": "./dist/types/index.js",
 			"types": "./dist/types/index.d.ts"
-		},
-		"./styles": {
-			"default": "./dist/styles/defaults.css"
-		},
-		"./styles/*": {
-			"default": "./dist/styles/*"
 		}
 	},
 	"files": [
@@ -37,7 +31,7 @@
 	],
 	"scripts": {
 		"clean": "rm -rf dist",
-		"build": "npm run clean && tsc --project tsconfig.json && tsc-alias && node copy-scss.js"
+		"build": "npm run clean && tsc --project tsconfig.json && tsc-alias"
 	},
 	"peerDependencies": {
 		"react": ">=18",

package/dist/components/accordions/accordion.d.ts

@@ -1,10 +0,0 @@
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import type { ShadcnBaseProps } from "../../types/index.js";
-type PropsType = ShadcnBaseProps<typeof AccordionPrimitive.Root> & {
-    as?: React.ElementType;
-};
-declare const Accordion: {
-    (props: PropsType): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export default Accordion;

package/dist/components/accordions/accordion.js

@@ -1,10 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-const Accordion = (props) => {
-    const { as, children, ...restProps } = props;
-    const Component = as || "div";
-    return (_jsx(AccordionPrimitive.Root, { asChild: true, "data-slot": "accordion", ...restProps, children: _jsx(Component, { children: children }) }));
-};
-Accordion.displayName = "Accordion";
-export default Accordion;

package/dist/components/accordions/accordionContent.d.ts

@@ -1,11 +0,0 @@
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import type { ShadcnBaseProps } from "../../types/index.js";
-type PropsType = ShadcnBaseProps<typeof AccordionPrimitive.Content> & {
-    as?: React.ElementType;
-    ref?: React.Ref<Element>;
-};
-declare const AccordionContent: {
-    (props: PropsType): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export default AccordionContent;

package/dist/components/accordions/accordionContent.js

@@ -1,20 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { useMounted } from "../../hooks/index.js";
-import { cn } from "../../utils/index.js";
-import { useImperativeHandle, useRef } from "react";
-const AccordionContent = (props) => {
-    const { as, ref, className, children, ...restProps } = props;
-    const Component = as || "div";
-    const insideRef = useRef(null);
-    useImperativeHandle(ref, () => insideRef.current);
-    const { isMounded } = useMounted();
-    return (_jsx(AccordionPrimitive.Content, { asChild: true, "data-slot": "accordion-content", ...restProps, children: _jsx(Component, { ref: insideRef, className: cn(`
-					overflow-hidden
-					text-sm`, isMounded && `
-					data-[state=closed]:animate-accordion-up2
-					data-[state=open]:animate-accordion-down2`, className), children: children }) }));
-};
-AccordionContent.displayName = "AccordionContent";
-export default AccordionContent;

package/dist/components/accordions/accordionItem.d.ts

@@ -1,11 +0,0 @@
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import type { ShadcnBaseProps } from "../../types/index.js";
-type PropsType = ShadcnBaseProps<typeof AccordionPrimitive.Item> & {
-    as?: React.ElementType;
-    ref?: React.Ref<Element>;
-};
-declare const AccordionItem: {
-    (props: PropsType): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export default AccordionItem;

package/dist/components/accordions/accordionItem.js

@@ -1,14 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { cn } from "../../utils/index.js";
-import { useImperativeHandle, useRef } from "react";
-const AccordionItem = (props) => {
-    const { as, ref, className, children, ...restProps } = props;
-    const Component = as || "div";
-    const insideRef = useRef(null);
-    useImperativeHandle(ref, () => insideRef.current);
-    return (_jsx(AccordionPrimitive.Item, { asChild: true, "data-slot": "accordion-item", ...restProps, children: _jsx(Component, { ref: insideRef, className: cn(className), children: children }) }));
-};
-AccordionItem.displayName = "AccordionItem";
-export default AccordionItem;

package/dist/components/accordions/accordionTrigger.d.ts

@@ -1,11 +0,0 @@
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import type { ShadcnBaseProps } from "../../types/index.js";
-type PropsType = ShadcnBaseProps<typeof AccordionPrimitive.Trigger> & {
-    as?: React.ElementType;
-    ref?: React.Ref<Element>;
-};
-declare const AccordionTrigger: {
-    (props: PropsType): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export default AccordionTrigger;