@watcha-authentic/react-slider 0.0.1 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 @edge-effect#dark1451
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# @watcha-authentic/react-slider
+
+[![npm version](https://img.shields.io/npm/v/@watcha-authentic/react-slider)](https://www.npmjs.com/package/@watcha-authentic/react-slider)
+
+리액트기반 슬라이더 컴포넌트입니다. 드래그/스와이프, 키보드 네비게이션을 지원하며 무한 루프 슬라이더를 제공합니다.
+
+## 피어 종속성
+
+이 패키지는 다음 패키지들을 피어 종속성으로 요구합니다.
+
+```bash
+pnpm add react@>=18.0.0 react-dom@>=18.0.0
+```
+
+## 설치
+
+```bash
+pnpm add @watcha-authentic/react-slider react@>=18.0.0 react-dom@>=18.0.0
+```
+
+## 사용 예
+
+### 기본 사용
+
+```tsx
+import { Slider } from "@watcha-authentic/react-slider";
+import "@watcha-authentic/react-slider/style.css";
+
+const items = [
+  { id: 1, title: "Item 1" },
+  { id: 2, title: "Item 2" },
+  { id: 3, title: "Item 3" },
+];
+
+function App() {
+  return (
+    <Slider
+      items={items}
+      onItemKey={(item) => item.id}
+      onCreateItemView={(item) => <div>{item.title}</div>}
+      onIndexChange={(newIndex) => console.log("Index changed:", newIndex)}
+    />
+  );
+}
+```
+
+### 스타일 import
+
+CSS 스타일을 import하여 사용할 수 있습니다:
+
+```tsx
+import "@watcha-authentic/react-slider/style.css";
+```
+
+### Context 사용
+
+```tsx
+import {
+  Slider,
+  SliderContextProvider,
+  useSliderContext,
+} from "@watcha-authentic/react-slider";
+
+function CustomNavigation() {
+  const { currentIndex, goToIndex } = useSliderContext();
+
+  return (
+    <div>
+      <button onClick={() => goToIndex(currentIndex - 1)}>Previous</button>
+      <span>Current: {currentIndex}</span>
+      <button onClick={() => goToIndex(currentIndex + 1)}>Next</button>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <SliderContextProvider>
+      <Slider items={items} onItemKey={(item) => item.id} onCreateItemView={(item) => <div>{item.title}</div>} />
+      <CustomNavigation />
+    </SliderContextProvider>
+  );
+}
+```

package/dist/cjs/component/context/slider-context-provider.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SliderItemContextProvider", {
+    enumerable: true,
+    get: function() {
+        return SliderItemContextProvider;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _slidercontext = require("./slider-context");
+const SliderItemContextProvider = ({ children, immediate, isFocused, itemIndex, slideTriggerEvent, transition })=>{
+    const value = {
+        immediate,
+        isFocused,
+        itemIndex,
+        slideTriggerEvent,
+        transition
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_slidercontext.SliderItemContext.Provider, {
+        value: value,
+        children: children
+    });
+};

package/dist/cjs/component/context/slider-context.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SliderItemContext", {
+    enumerable: true,
+    get: function() {
+        return SliderItemContext;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const SliderItemContext = /*#__PURE__*/ _react.default.createContext(null);

package/dist/cjs/component/hook/use-slider-context.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSliderContext", {
+    enumerable: true,
+    get: function() {
+        return useSliderContext;
+    }
+});
+const _reacteventcallback = require("@watcha-authentic/react-event-callback");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _slidercontext = require("../context/slider-context");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const useSliderContext = (callbacks)=>{
+    const context = _react.default.useContext(_slidercontext.SliderItemContext);
+    if (!context) {
+        throw new Error("useSliderContext must be used within SliderItemContextProvider");
+    }
+    const stableOnBlur = (0, _reacteventcallback.useEventCallback)(callbacks.onBlur);
+    const stableOnFocus = (0, _reacteventcallback.useEventCallback)(callbacks.onFocus);
+    const stableOnInitialState = (0, _reacteventcallback.useEventCallback)(callbacks.onInitialState);
+    const stableOnTransitionChange = (0, _reacteventcallback.useEventCallback)(callbacks.onTransitionChange);
+    const prevFocusedRef = (0, _react.useRef)(null);
+    /**
+   * - 초기 마운트 또는 상태 변경시 콜백 호출
+   */ (0, _react.useLayoutEffect)(()=>{
+        const isInitialMount = prevFocusedRef.current === null;
+        if (prevFocusedRef.current !== context.isFocused) {
+            if (isInitialMount) {
+                // 초기 마운트 시 onInitialState 호출
+                stableOnInitialState(context.isFocused);
+            } else {
+                // 상태 변경 시 onBlur/onFocus 호출
+                if (context.isFocused) {
+                    stableOnFocus(context.slideTriggerEvent === "swipe");
+                } else {
+                    stableOnBlur();
+                }
+            }
+            prevFocusedRef.current = context.isFocused;
+        }
+    }, [
+        context.isFocused,
+        context.slideTriggerEvent,
+        stableOnBlur,
+        stableOnFocus,
+        stableOnInitialState
+    ]);
+    /**
+   * - transition 값 변경 시 콜백 호출
+   */ (0, _react.useLayoutEffect)(()=>{
+        stableOnTransitionChange(context.transition, context.immediate);
+    }, [
+        context.transition,
+        context.immediate,
+        stableOnTransitionChange
+    ]);
+};