jy-headless 0.2.28 → 0.2.30

package/cjs/index.d.ts

@@ -1,6 +1,6 @@
-export { default as Button } from './buttons';
-export { default as Input } from './inputs';
-export { default as Dropdown } from './selectors';
+export * from './buttons';
+export * from './inputs';
+export * from './selectors';
 export * from './types';
 export * from './utils';
 export * from './hooks';

package/cjs/index.js

@@ -1,15 +1,19 @@
 'use strict';
 
-var Button = require('./buttons/Button/Button.js');
-var Input = require('./inputs/Input/Input.js');
-var Dropdown = require('./selectors/Dropdown/Dropdown.js');
+require('react/jsx-runtime');
 require('react');
+var Input = require('./inputs/Input/Input.js');
+var ImageInput = require('./inputs/ImageInput/ImageInput.js');
+require('./selectors/Dropdown/Dropdown.js');
 var useDropdown = require('./hooks/useDropdown.js');
 
+function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, default: e }); }
+
+var Input__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Input);
+
 
 
-exports.Button = Button;
-exports.Input = Input;
-exports.Dropdown = Dropdown;
+exports.Input = Input__namespace;
+exports.ImageInputContext = ImageInput.ImageInputContext;
 exports.DropdownContext = useDropdown.DropdownContext;
 exports.useDropdownContext = useDropdown.useDropdownContext;

package/cjs/inputs/ImageInput/ImageInput.d.ts

@@ -0,0 +1,7 @@
+import { ImageAttribute, ImageInputContextData, ImageInputProps, LabelAttribute } from '../../types';
+export declare const ImageInputContext: import("react").Context<ImageInputContextData | null>;
+declare const ImageInput: (({ accepts, id, value, draggable, onChange, children, ...props }: ImageInputProps) => import("react/jsx-runtime").JSX.Element) & {
+    Preview: ({ src: defaultSrc, ...props }: ImageAttribute) => import("react/jsx-runtime").JSX.Element;
+    Uploader: ({ children, ...props }: LabelAttribute) => import("react/jsx-runtime").JSX.Element;
+};
+export default ImageInput;

package/cjs/inputs/ImageInput/ImageInput.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const ImageInputContext = react.createContext(null);
+const getAccepts = (accepts) => {
+    return accepts && accepts.length > 0 ? accepts.map((it) => `image/${it}`).join() : 'image/*';
+};
+const ImageInputRoot = ({ accepts, id, value, draggable = false, onChange, children, ...props }) => {
+    const [previewUrl, setPreviewUrl] = react.useState('');
+    const [dragOver, setDragOver] = react.useState(false);
+    const inputId = [id, 'image-input'].join('-');
+    react.useEffect(() => {
+        if (!value)
+            setPreviewUrl('');
+    }, [value]);
+    const setImagePreview = (file) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            setPreviewUrl(e.target.result);
+        };
+        reader.readAsDataURL(file);
+    };
+    const onImageChange = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        setImagePreview(file);
+        onChange?.(file);
+    };
+    const onDrop = (e) => {
+        if (!draggable)
+            return;
+        e.preventDefault();
+        setDragOver(false);
+        const file = e.dataTransfer.files?.[0];
+        if (file && file.type.startsWith('image/')) {
+            setImagePreview(file);
+            onChange?.(file);
+        }
+    };
+    const onDragOver = (e) => {
+        if (!draggable)
+            return;
+        e.preventDefault();
+        setDragOver(true);
+    };
+    const onDragLeave = () => setDragOver(false);
+    return (jsxRuntime.jsxs("span", { ...props, onDrop: onDrop, onDragOver: onDragOver, onDragEnter: onDragOver, onDragLeave: onDragLeave, children: [jsxRuntime.jsx("input", { "data-testid": inputId, id: inputId, type: 'file', accept: getAccepts(accepts ?? []), onChange: onImageChange, style: { display: 'none' } }), jsxRuntime.jsx(ImageInputContext.Provider, { value: { id: inputId, previewUrl, dragOver }, children: children })] }));
+};
+const ImageInputUploader = ({ children, ...props }) => {
+    const context = react.useContext(ImageInputContext);
+    if (!context) {
+        throw new Error('ImageInput.* 컴포넌트는 ImageInput 내에서만 사용해야 합니다.');
+    }
+    const { id } = context;
+    return (jsxRuntime.jsx("label", { htmlFor: id ?? '', ...props, children: children }));
+};
+const ImageInputPreview = ({ src: defaultSrc, ...props }) => {
+    const context = react.useContext(ImageInputContext);
+    if (!context) {
+        throw new Error('ImageInput.* 컴포넌트는 ImageInput 내에서만 사용해야 합니다.');
+    }
+    const { previewUrl } = context;
+    return jsxRuntime.jsx("img", { ...props, src: previewUrl ?? defaultSrc ?? '' });
+};
+Object.assign(ImageInputRoot, {
+    Preview: ImageInputPreview,
+    Uploader: ImageInputUploader,
+});
+
+exports.ImageInputContext = ImageInputContext;

package/cjs/inputs/index.d.ts

@@ -1 +1,2 @@
-export { default } from './Input/Input';
+export * as Input from './Input/Input';
+export * from './ImageInput/ImageInput';

package/cjs/selectors/Dropdown/Dropdown.js

@@ -45,11 +45,9 @@ const DropdownOption = ({ children, value, ...props }) => {
     const { select } = useDropdown.useDropdownContext();
     return (jsxRuntime.jsx("div", { role: "option", onClick: () => select(value), ...props, children: children }));
 };
-const Dropdown = Object.assign(DropdownRoot, {
+Object.assign(DropdownRoot, {
     Button: DropdownButton,
     Options: DropdownOptions,
     Option: DropdownOption,
     Viewer: DropdownViewer,
 });
-
-module.exports = Dropdown;

package/cjs/types/common/index.d.ts

@@ -1,7 +1,11 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ImgHTMLAttributes } from 'react';
 export interface DivAttribute<T> extends HTMLAttributes<HTMLDivElement> {
     value?: T;
 }
 export interface SpanAttribute<T> extends HTMLAttributes<HTMLSpanElement> {
     value?: T;
 }
+export interface LabelAttribute extends HTMLAttributes<HTMLLabelElement> {
+}
+export interface ImageAttribute extends ImgHTMLAttributes<HTMLImageElement> {
+}

package/cjs/types/inputs/index.d.ts

@@ -7,3 +7,15 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     useThrottle?: boolean;
     timeout?: number;
 }
+export interface ImageInputContextData {
+    id?: string;
+    previewUrl?: string;
+    dragOver?: boolean;
+}
+export type ImageType = 'jpeg' | 'png' | 'gif' | 'svg' | 'bmp' | 'webp' | 'heic' | 'heif' | 'tiff' | 'x-icon' | 'vn';
+export interface ImageInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    accepts?: ImageType[];
+    draggable?: boolean;
+    onChange?: (file: File) => void;
+    value?: File;
+}

package/index.d.ts

@@ -1,6 +1,6 @@
-export { default as Button } from './buttons';
-export { default as Input } from './inputs';
-export { default as Dropdown } from './selectors';
+export * from './buttons';
+export * from './inputs';
+export * from './selectors';
 export * from './types';
 export * from './utils';
 export * from './hooks';

package/index.js

@@ -1,5 +1,7 @@
-export { default as Button } from './buttons/Button/Button.js';
-export { default as Input } from './inputs/Input/Input.js';
-export { default as Dropdown } from './selectors/Dropdown/Dropdown.js';
+import 'react/jsx-runtime';
 import 'react';
+import * as Input from './inputs/Input/Input.js';
+export { Input };
+export { ImageInputContext } from './inputs/ImageInput/ImageInput.js';
+import './selectors/Dropdown/Dropdown.js';
 export { DropdownContext, useDropdownContext } from './hooks/useDropdown.js';

package/inputs/ImageInput/ImageInput.d.ts

@@ -0,0 +1,7 @@
+import { ImageAttribute, ImageInputContextData, ImageInputProps, LabelAttribute } from '../../types';
+export declare const ImageInputContext: import("react").Context<ImageInputContextData | null>;
+declare const ImageInput: (({ accepts, id, value, draggable, onChange, children, ...props }: ImageInputProps) => import("react/jsx-runtime").JSX.Element) & {
+    Preview: ({ src: defaultSrc, ...props }: ImageAttribute) => import("react/jsx-runtime").JSX.Element;
+    Uploader: ({ children, ...props }: LabelAttribute) => import("react/jsx-runtime").JSX.Element;
+};
+export default ImageInput;

package/inputs/ImageInput/ImageInput.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useContext } from 'react';
+
+const ImageInputContext = createContext(null);
+const getAccepts = (accepts) => {
+    return accepts && accepts.length > 0 ? accepts.map((it) => `image/${it}`).join() : 'image/*';
+};
+const ImageInputRoot = ({ accepts, id, value, draggable = false, onChange, children, ...props }) => {
+    const [previewUrl, setPreviewUrl] = useState('');
+    const [dragOver, setDragOver] = useState(false);
+    const inputId = [id, 'image-input'].join('-');
+    useEffect(() => {
+        if (!value)
+            setPreviewUrl('');
+    }, [value]);
+    const setImagePreview = (file) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            setPreviewUrl(e.target.result);
+        };
+        reader.readAsDataURL(file);
+    };
+    const onImageChange = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        setImagePreview(file);
+        onChange?.(file);
+    };
+    const onDrop = (e) => {
+        if (!draggable)
+            return;
+        e.preventDefault();
+        setDragOver(false);
+        const file = e.dataTransfer.files?.[0];
+        if (file && file.type.startsWith('image/')) {
+            setImagePreview(file);
+            onChange?.(file);
+        }
+    };
+    const onDragOver = (e) => {
+        if (!draggable)
+            return;
+        e.preventDefault();
+        setDragOver(true);
+    };
+    const onDragLeave = () => setDragOver(false);
+    return (jsxs("span", { ...props, onDrop: onDrop, onDragOver: onDragOver, onDragEnter: onDragOver, onDragLeave: onDragLeave, children: [jsx("input", { "data-testid": inputId, id: inputId, type: 'file', accept: getAccepts(accepts ?? []), onChange: onImageChange, style: { display: 'none' } }), jsx(ImageInputContext.Provider, { value: { id: inputId, previewUrl, dragOver }, children: children })] }));
+};
+const ImageInputUploader = ({ children, ...props }) => {
+    const context = useContext(ImageInputContext);
+    if (!context) {
+        throw new Error('ImageInput.* 컴포넌트는 ImageInput 내에서만 사용해야 합니다.');
+    }
+    const { id } = context;
+    return (jsx("label", { htmlFor: id ?? '', ...props, children: children }));
+};
+const ImageInputPreview = ({ src: defaultSrc, ...props }) => {
+    const context = useContext(ImageInputContext);
+    if (!context) {
+        throw new Error('ImageInput.* 컴포넌트는 ImageInput 내에서만 사용해야 합니다.');
+    }
+    const { previewUrl } = context;
+    return jsx("img", { ...props, src: previewUrl ?? defaultSrc ?? '' });
+};
+Object.assign(ImageInputRoot, {
+    Preview: ImageInputPreview,
+    Uploader: ImageInputUploader,
+});
+
+export { ImageInputContext };

package/inputs/index.d.ts

@@ -1 +1,2 @@
-export { default } from './Input/Input';
+export * as Input from './Input/Input';
+export * from './ImageInput/ImageInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jy-headless",
-  "version": "0.2.28",
+  "version": "0.2.30",
   "description": "A lightweight and customizable headless UI library for React components",
   "license": "MIT",
   "repository": "https://github.com/yCZwIqY/jy-headless",
@@ -13,21 +13,11 @@
       "require": "./cjs/index.js",
       "types": "./index.d.ts"
     },
-    "./Button": {
-      "import": "./cjs/buttons/Button/Button.js",
-      "require": "./cjs/cjs/buttons/Button/Button.js",
-      "types": "./cjs/buttons/Button/Button.d.ts"
-    },
     "./cjs": {
       "import": "./cjs/index.js",
       "require": "./cjs/cjs/index.js",
       "types": "./cjs/index.d.ts"
     },
-    "./useDebouncing": {
-      "import": "./hooks/useDebouncing.js",
-      "require": "./cjs/hooks/useDebouncing.js",
-      "types": "./hooks/useDebouncing.d.ts"
-    },
     "./useDropdown": {
       "import": "./hooks/useDropdown.js",
       "require": "./cjs/hooks/useDropdown.js",
@@ -43,6 +33,11 @@
       "require": "./cjs/index.js",
       "types": "./index.d.ts"
     },
+    "./ImageInput": {
+      "import": "./inputs/ImageInput/ImageInput.js",
+      "require": "./cjs/inputs/ImageInput/ImageInput.js",
+      "types": "./inputs/ImageInput/ImageInput.d.ts"
+    },
     "./Input": {
       "import": "./inputs/Input/Input.js",
       "require": "./cjs/inputs/Input/Input.js",

package/selectors/Dropdown/Dropdown.js

@@ -43,11 +43,9 @@ const DropdownOption = ({ children, value, ...props }) => {
     const { select } = useDropdownContext();
     return (jsx("div", { role: "option", onClick: () => select(value), ...props, children: children }));
 };
-const Dropdown = Object.assign(DropdownRoot, {
+Object.assign(DropdownRoot, {
     Button: DropdownButton,
     Options: DropdownOptions,
     Option: DropdownOption,
     Viewer: DropdownViewer,
 });
-
-export { Dropdown as default };

package/types/common/index.d.ts

@@ -1,7 +1,11 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ImgHTMLAttributes } from 'react';
 export interface DivAttribute<T> extends HTMLAttributes<HTMLDivElement> {
     value?: T;
 }
 export interface SpanAttribute<T> extends HTMLAttributes<HTMLSpanElement> {
     value?: T;
 }
+export interface LabelAttribute extends HTMLAttributes<HTMLLabelElement> {
+}
+export interface ImageAttribute extends ImgHTMLAttributes<HTMLImageElement> {
+}

package/types/inputs/index.d.ts

@@ -7,3 +7,15 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     useThrottle?: boolean;
     timeout?: number;
 }
+export interface ImageInputContextData {
+    id?: string;
+    previewUrl?: string;
+    dragOver?: boolean;
+}
+export type ImageType = 'jpeg' | 'png' | 'gif' | 'svg' | 'bmp' | 'webp' | 'heic' | 'heif' | 'tiff' | 'x-icon' | 'vn';
+export interface ImageInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    accepts?: ImageType[];
+    draggable?: boolean;
+    onChange?: (file: File) => void;
+    value?: File;
+}

package/version.txt

@@ -1 +1 @@
-0.2.28
+0.2.30

package/buttons/Button/Button.js

@@ -1,9 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import useDebouncing from '../../hooks/useDebouncing.js';
-
-const Button = ({ onClick, loading = false, readOnly = false, disabled = false, useDebounce = false, timeout = 300, children, ...props }) => {
-    const handleClick = onClick && useDebounce ? useDebouncing(onClick, timeout || 300) : onClick;
-    return (jsx("button", { onClick: handleClick, disabled: disabled || loading || readOnly, ...props, children: children }));
-};
-
-export { Button as default };

package/cjs/buttons/Button/Button.js

@@ -1,11 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var useDebouncing = require('../../hooks/useDebouncing.js');
-
-const Button = ({ onClick, loading = false, readOnly = false, disabled = false, useDebounce = false, timeout = 300, children, ...props }) => {
-    const handleClick = onClick && useDebounce ? useDebouncing(onClick, timeout || 300) : onClick;
-    return (jsxRuntime.jsx("button", { onClick: handleClick, disabled: disabled || loading || readOnly, ...props, children: children }));
-};
-
-module.exports = Button;

package/cjs/hooks/useDebouncing.js

@@ -1,16 +0,0 @@
-'use strict';
-
-var react = require('react');
-
-const useDebouncing = (callback, delay) => {
-    const timer = react.useRef(null);
-    return react.useCallback(() => {
-        if (timer.current)
-            clearTimeout(timer.current);
-        timer.current = setTimeout(() => {
-            callback();
-        }, delay);
-    }, [callback, delay]);
-};
-
-module.exports = useDebouncing;

package/cjs/selectors/Dropdown/DropdownDefaultTrigger.d.ts

@@ -1,4 +0,0 @@
-declare const DropdownDefaultTrigger: ({ value }: {
-    value: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export default DropdownDefaultTrigger;

package/hooks/useDebouncing.js

@@ -1,14 +0,0 @@
-import { useRef, useCallback } from 'react';
-
-const useDebouncing = (callback, delay) => {
-    const timer = useRef(null);
-    return useCallback(() => {
-        if (timer.current)
-            clearTimeout(timer.current);
-        timer.current = setTimeout(() => {
-            callback();
-        }, delay);
-    }, [callback, delay]);
-};
-
-export { useDebouncing as default };

package/selectors/Dropdown/DropdownDefaultTrigger.d.ts

@@ -1,4 +0,0 @@
-declare const DropdownDefaultTrigger: ({ value }: {
-    value: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export default DropdownDefaultTrigger;