jy-headless 0.3.6 → 0.3.11

package/package.json

@@ -1,52 +1,25 @@
 {
   "name": "jy-headless",
-  "version": "0.3.6",
+  "version": "0.3.11",
   "description": "A lightweight and customizable headless UI library for React components",
-  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "repository": "https://github.com/yCZwIqY/jy-headless",
-  "main": "./cjs/index.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
+  "scripts": {
+    "build": " rollup -c",
+    "build-publish": "pnpm run build && node setupPackage.mjs && cd dist && npm publish",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
-      "import": "./index.js",
-      "require": "./cjs/index.js",
-      "types": "./index.d.ts"
-    },
-    "./cjs": {
-      "import": "./cjs/index.js",
-      "require": "./cjs/cjs/index.js",
-      "types": "./cjs/index.d.ts"
-    },
-    "./useDebounce": {
-      "import": "./hooks/useDebounce.js",
-      "require": "./cjs/hooks/useDebounce.js",
-      "types": "./hooks/useDebounce.d.ts"
-    },
-    "./usePortal": {
-      "import": "./hooks/usePortal.js",
-      "require": "./cjs/hooks/usePortal.js",
-      "types": "./hooks/usePortal.d.ts"
-    },
-    "./useThrottle": {
-      "import": "./hooks/useThrottle.js",
-      "require": "./cjs/hooks/useThrottle.js",
-      "types": "./hooks/useThrottle.d.ts"
-    },
-    "./index": {
-      "import": "./index.js",
-      "require": "./cjs/index.js",
-      "types": "./index.d.ts"
-    },
-    "./Popover": {
-      "import": "./Popover/Popover.js",
-      "require": "./cjs/Popover/Popover.js",
-      "types": "./Popover/Popover.d.ts"
-    },
-    "./Tooltip": {
-      "import": "./Tooltip/Tooltip.js",
-      "require": "./cjs/Tooltip/Tooltip.js",
-      "types": "./Tooltip/Tooltip.d.ts"
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "keywords": [
@@ -56,5 +29,53 @@
     "ui-library",
     "tailwind",
     "storybook"
-  ]
-}
+  ],
+  "author": "",
+  "license": "MIT",
+  "type": "module",
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.7",
+    "@babel/preset-react": "^7.26.3",
+    "@chromatic-com/storybook": "3.2.4",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@storybook/addon-essentials": "^8.5.1",
+    "@storybook/addon-interactions": "^8.5.1",
+    "@storybook/addon-onboarding": "^8.5.1",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/blocks": "^8.5.1",
+    "@storybook/react": "^8.5.1",
+    "@storybook/react-vite": "^8.5.1",
+    "@storybook/test": "^8.5.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "babel-jest": "^29.7.0",
+    "chromatic": "^11.25.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.5.1",
+    "prettier": "^3.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rollup": "^4.31.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "storybook": "^8.5.1",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.7.3"
+  },
+  "dependencies": {
+    "@testing-library/user-event": "^14.6.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.8.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}

package/Popover/Popover.d.ts

@@ -1,2 +0,0 @@
-import { HoverProps } from './Popover.type';
-export declare const Popover: ({ children, direction, popover, domNode, rootId, key }: HoverProps) => import("react/jsx-runtime").JSX.Element;

package/Popover/Popover.js

@@ -1,75 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useLayoutEffect } from 'react';
-import { createPortal } from 'react-dom';
-
-const Popover = ({ children, direction, popover, domNode, rootId, key }) => {
-    const [visible, setVisible] = useState(false);
-    const [position, setPosition] = useState({ top: 0, left: 0 });
-    const rootDom = domNode ?? document.getElementById(rootId ?? 'root');
-    const targetRef = useRef(null);
-    const popoverRef = useRef(null);
-    const getPopoverPosition = useCallback((targetRect, popoverRect) => {
-        let top = 0;
-        let left = 0;
-        switch (direction) {
-            case 'top-left':
-                top = targetRect.top - popoverRect.height;
-                left = targetRect.left;
-                break;
-            case 'top-center':
-            case 'top':
-                top = targetRect.top - popoverRect.height;
-                left = targetRect.left + (targetRect.width - popoverRect.width) / 2;
-                break;
-            case 'top-right':
-                top = targetRect.top - popoverRect.height;
-                left = targetRect.right - popoverRect.width;
-                break;
-            case 'left':
-                top = targetRect.top + (targetRect.height - popoverRect.height) / 2;
-                left = targetRect.left - popoverRect.width;
-                break;
-            case 'right':
-                top = targetRect.top + (targetRect.height - popoverRect.height) / 2;
-                left = targetRect.right;
-                break;
-            case 'bottom-left':
-                top = targetRect.bottom;
-                left = targetRect.left;
-                break;
-            case 'bottom-center':
-            case 'bottom':
-                top = targetRect.bottom;
-                left = targetRect.left + (targetRect.width - popoverRect.width) / 2;
-                break;
-            case 'bottom-right':
-                top = targetRect.bottom;
-                left = targetRect.right - popoverRect.width;
-                break;
-        }
-        return { top, left };
-    }, [direction]);
-    const handleMouseEnter = () => {
-        setVisible(true);
-    };
-    const handleMouseLeave = () => {
-        setVisible(false);
-    };
-    useLayoutEffect(() => {
-        if (visible && targetRef.current && popoverRef.current) {
-            const targetRect = targetRef.current.getBoundingClientRect();
-            const popoverRect = popoverRef.current.getBoundingClientRect();
-            const { top, left } = getPopoverPosition(targetRect, popoverRect);
-            setPosition({ top: top + window.scrollY, left: left + window.scrollX });
-        }
-    }, [visible, popover, getPopoverPosition]);
-    return (jsxs("span", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: targetRef, children: [children, rootDom &&
-                visible &&
-                createPortal(jsx("span", { ref: popoverRef, style: {
-                        position: 'absolute',
-                        top: `${position.top}px`,
-                        left: `${position.left}px`,
-                    }, children: popover }), rootDom, key)] }));
-};
-
-export { Popover };

package/Popover/Popover.type.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-export interface HoverProps {
-    children: ReactNode;
-    popover: ReactNode;
-    direction: 'top-left' | 'top-center' | 'top' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-center' | 'bottom-right';
-    rootId?: string;
-    domNode?: Element;
-    key?: string;
-}

package/Popover/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Popover';
-export * from './Popover.type';

package/cjs/Popover/Popover.d.ts

@@ -1,2 +0,0 @@
-import { HoverProps } from './Popover.type';
-export declare const Popover: ({ children, direction, popover, domNode, rootId, key }: HoverProps) => import("react/jsx-runtime").JSX.Element;

package/cjs/Popover/Popover.js

@@ -1,77 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var reactDom = require('react-dom');
-
-const Popover = ({ children, direction, popover, domNode, rootId, key }) => {
-    const [visible, setVisible] = react.useState(false);
-    const [position, setPosition] = react.useState({ top: 0, left: 0 });
-    const rootDom = domNode ?? document.getElementById(rootId ?? 'root');
-    const targetRef = react.useRef(null);
-    const popoverRef = react.useRef(null);
-    const getPopoverPosition = react.useCallback((targetRect, popoverRect) => {
-        let top = 0;
-        let left = 0;
-        switch (direction) {
-            case 'top-left':
-                top = targetRect.top - popoverRect.height;
-                left = targetRect.left;
-                break;
-            case 'top-center':
-            case 'top':
-                top = targetRect.top - popoverRect.height;
-                left = targetRect.left + (targetRect.width - popoverRect.width) / 2;
-                break;
-            case 'top-right':
-                top = targetRect.top - popoverRect.height;
-                left = targetRect.right - popoverRect.width;
-                break;
-            case 'left':
-                top = targetRect.top + (targetRect.height - popoverRect.height) / 2;
-                left = targetRect.left - popoverRect.width;
-                break;
-            case 'right':
-                top = targetRect.top + (targetRect.height - popoverRect.height) / 2;
-                left = targetRect.right;
-                break;
-            case 'bottom-left':
-                top = targetRect.bottom;
-                left = targetRect.left;
-                break;
-            case 'bottom-center':
-            case 'bottom':
-                top = targetRect.bottom;
-                left = targetRect.left + (targetRect.width - popoverRect.width) / 2;
-                break;
-            case 'bottom-right':
-                top = targetRect.bottom;
-                left = targetRect.right - popoverRect.width;
-                break;
-        }
-        return { top, left };
-    }, [direction]);
-    const handleMouseEnter = () => {
-        setVisible(true);
-    };
-    const handleMouseLeave = () => {
-        setVisible(false);
-    };
-    react.useLayoutEffect(() => {
-        if (visible && targetRef.current && popoverRef.current) {
-            const targetRect = targetRef.current.getBoundingClientRect();
-            const popoverRect = popoverRef.current.getBoundingClientRect();
-            const { top, left } = getPopoverPosition(targetRect, popoverRect);
-            setPosition({ top: top + window.scrollY, left: left + window.scrollX });
-        }
-    }, [visible, popover, getPopoverPosition]);
-    return (jsxRuntime.jsxs("span", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: targetRef, children: [children, rootDom &&
-                visible &&
-                reactDom.createPortal(jsxRuntime.jsx("span", { ref: popoverRef, style: {
-                        position: 'absolute',
-                        top: `${position.top}px`,
-                        left: `${position.left}px`,
-                    }, children: popover }), rootDom, key)] }));
-};
-
-exports.Popover = Popover;

package/cjs/Popover/Popover.type.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-export interface HoverProps {
-    children: ReactNode;
-    popover: ReactNode;
-    direction: 'top-left' | 'top-center' | 'top' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-center' | 'bottom-right';
-    rootId?: string;
-    domNode?: Element;
-    key?: string;
-}

package/cjs/Popover/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Popover';
-export * from './Popover.type';

package/cjs/index.d.ts

@@ -1,4 +0,0 @@
-export * from './hooks';
-export * from './Tooltip';
-export * from './Input/TextInput';
-export * from './Input/NumberInput';

package/index.d.ts

@@ -1,4 +0,0 @@
-export * from './hooks';
-export * from './Tooltip';
-export * from './Input/TextInput';
-export * from './Input/NumberInput';

package/version.txt

@@ -1 +0,0 @@
-0.3.6