@watcha-authentic/react-slider 0.0.1 → 0.1.1

package/dist/type/component/view/slider.d.ts

@@ -0,0 +1,85 @@
+import type { CSSProperties } from "react";
+import type { SlideTriggerEvent } from "../../script/type/slider-types";
+type SliderProps<ItemType> = {
+    itemProps?: React.HTMLAttributes<HTMLLIElement>;
+    wrapProps?: React.HTMLAttributes<HTMLUListElement>;
+    contentProps?: React.HTMLAttributes<HTMLDivElement>;
+    items: Array<ItemType>;
+    onCreateItemView: (item: ItemType, index: number) => React.ReactNode;
+    onItemKey: (item: ItemType) => React.Key;
+    /**
+     * - 높이, 드래그 임계값 등의 사이즈 관련 값을 추정하는 방식을 선택 합니다. 기본값은 false 입니다.
+     * - true: 모든 자식요소로부터 추정합니다. 가장 큰 사이즈값이 선택 됩니다.
+     * - false: 첫번째 자식요소의 사이즈를 사용합니다.
+     */
+    estimateSizeFromEveryElements?: boolean;
+    /**
+     * - item 간 거리입니다.
+     * - 기본값은 0 입니다.
+     */
+    gap?: number;
+    /**
+     * - 슬라이드 애니메이션 지속 시간(milliseconds)입니다.
+     * - 기본값은 500 입니다.
+     */
+    animationDuration?: number;
+    /**
+     * - 슬라이드 애니메이션 타이밍 함수입니다.
+     * - 기본값은 "ease" 입니다.
+     */
+    animationTimingFunction?: CSSProperties["transitionTimingFunction"];
+    /**
+     * - 초기 인덱스입니다.
+     * - 기본값은 0 입니다.
+     */
+    defaultIndex?: number;
+    /**
+     * - currentIndex 입니다. 이 값이 변경되면 애니메이션이 동작 될 수 있습니다.
+     * - 기본값은 defaultIndex 입니다.
+     */
+    index?: number;
+    /**
+     * - 중앙 기준 좌우로 보여줄 요소 개수입니다.
+     * - 예: 1이면 좌1 + 중앙1 + 우1 = 3개, 2이면 좌2 + 중앙1 + 우2 = 5개
+     * - 기본값은 1 입니다.
+     */
+    visibleCount?: number;
+    /**
+     * - 인덱스 변경 시 호출되는 콜백입니다.
+     * - cause: 슬라이드 원인 ('swipe': 키보드 네비게이션, 'drag': 드래그/스와이프, undefined: 외부 prop 변경)
+     */
+    onIndexChange?: (newIndex: number, cause: SlideTriggerEvent) => void;
+    /**
+     * - 드래그 기능 활성화 여부입니다.
+     * - 기본값은 true 입니다.
+     */
+    enableDrag?: boolean;
+    onDraggingNow?: (isDragging: boolean) => void;
+};
+/**
+ * # 루프 슬라이더 컴포넌트
+ *
+ * ## Element 구조
+ * - wrap: 슬라이더를 감싸는 요소
+ * - item: 슬라이더 하위의 아이템 요소
+ * - content: 슬라이더 아이템 내부의 컨텐츠 요소 (높이영향)
+ *
+ * ## 아이템 복제 로직
+ * 아이템 개수가 부족하면 자동으로 복제하여 자연스러운 루프를 구현합니다.
+ *
+ * ### 최소 필요 개수 (visibleCount=1 기준): 5개
+ * - 좌측 (visibleCount + 1) = 2개 (보이는 1개 + 대기 1개)
+ * - 중앙 = 1개
+ * - 우측 (visibleCount + 1) = 2개 (보이는 1개 + 대기 1개)
+ *
+ * ### 아이템 갯수에 따른 복제 동작
+ * - 5개 이상: 복제 없음, 원본 그대로(x1)
+ * - 4개: 8개로 복제(x2)
+ * - 3개: 6개로 복제(x2)
+ * - 2개: 6개로 복제(x3)
+ * - 1개: 5개로 복제(x5)
+ */
+export declare const Slider: <ItemType = unknown>(props: SliderProps<ItemType> & {
+    ref?: React.ForwardedRef<HTMLUListElement>;
+}) => React.ReactElement;
+export {};

package/dist/type/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./component/context/slider-context";
+export * from "./component/context/slider-context-provider";
+export * from "./component/hook/use-slider-context";
+export * from "./component/view/slider";
+export * from "./script/type/slider-types";

package/dist/type/script/type/slider-types.d.ts

@@ -0,0 +1,4 @@
+/**
+ * - 슬라이드시 이벤트 트리거 종류
+ */
+export type SlideTriggerEvent = "drag" | "swipe";

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@watcha-authentic/react-slider",
-  "keywords": [],
-  "version": "0.0.1",
-  "homepage": "https://github.com/frograms/bistro-house#readme",
+  "description": "리액트기반 슬라이더 컴포넌트",
+  "keywords": [
+    "react",
+    "slider",
+    "swiper"
+  ],
+  "version": "0.1.1",
+  "homepage": "https://github.com/frograms/bistro-house/tree/master/packages/react-slider#readme",
   "author": {
     "name": "@watcha-authentic#web-dev-group",
     "email": "web-dev-group@watcha.com",
@@ -20,7 +25,63 @@
     "access": "public"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo Test skipped...",
+    "validate": "tsc && npm run lint && npm run build",
+    "lint": "eslint .",
+    "build:cjs": "swc src --out-dir ./dist/cjs --config-file swc-cjs.json --ignore '**/*.d.ts' --strip-leading-paths",
+    "build:esm": "swc src --out-dir ./dist/esm --config-file swc-esm.json --ignore '**/*.d.ts' --strip-leading-paths",
+    "build:type": "tsc --outDir ./dist/type --project ./tsconfig.type.json",
+    "build": "rm -rf ./dist && concurrently -n CJS,ESM,TYPE 'pnpm build:cjs' 'pnpm build:esm' 'pnpm build:type' && pnpm post-build",
+    "post-build": "bash ./project-attachment/post-build.sh"
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/type/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/type/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@watcha-authentic/react-a11y": "^0.1.0",
+    "@watcha-authentic/react-event-callback": "^0.1.0",
+    "@watcha-authentic/react-motion": "^0.1.0"
+  },
+  "devDependencies": {
+    "@swc/cli": "^0.7.9",
+    "@swc/core": "^1.15.7",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.50.0",
+    "@typescript-eslint/parser": "^8.50.0",
+    "@watcha-authentic/eslint-config": "^0.1.0",
+    "chokidar": "^4.0.1",
+    "chokidar-cli": "^3.0.0",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.39.2",
+    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "jiti": "^2.6.1",
+    "postcss": "^8.4.0",
+    "postcss-cli": "^11.0.0",
+    "postcss-load-config": "^6.0.0",
+    "cssnano": "^7.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "~5.9.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "license": "MIT"
-}
+}