@vnejs/uis.react.page-selector 0.1.2 → 0.1.4

package/package.json

@@ -1,32 +1,26 @@
 {
   "name": "@vnejs/uis.react.page-selector",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "node ../../scripts/build-package.mjs",
-    "publish:major:plugin": "npm run publish:major",
-    "publish:minor:plugin": "npm run publish:minor",
-    "publish:patch:plugin": "npm run publish:patch",
-    "publish:major": "npm run build && npm version major && npm publish --access public",
-    "publish:minor": "npm run build && npm version minor && npm publish --access public",
-    "publish:patch": "npm run build && npm version patch && npm publish --access public"
+    "build": "npx @vnejs/monorepo package",
+    "publish:major:uis:react": "npm run publish:major",
+    "publish:minor:uis:react": "npm run publish:minor",
+    "publish:patch:uis:react": "npm run publish:patch",
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "peerDependencies": {
-    "@bem-react/classname": "1.5.12",
-    "@vnejs/uis.utils": "~0.1.0",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "@vnejs/uis.react": "~0.1.0"
+    "@vnejs/uis.utils": "~0.1.0"
   },
   "devDependencies": {
-    "@vnejs/uis.react": "~0.1.0",
-    "typescript": "^5.7.3",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4"
+    "@vnejs/uis.react": "~0.1.0"
   },
   "files": [
     "dist",
-    "package.json"
+    "src",
+    "tsconfig.json"
   ]
 }

package/src/PageSelector.stories.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+
+import { renderWithVneWrap, VneWrap } from "@vnejs/uis.react";
+
+import { PageSelector } from "@vnejs/uis.react";
+
+export const Common = {
+  args: {
+    ...VneWrap.DEFAULT_ARGS,
+
+    gap: 120,
+    size: 60,
+    pagesCount: 20,
+    itemWidth: 480,
+  },
+};
+
+export default {
+  title: "Base/PageSelector",
+  render: renderWithVneWrap(({ valuePostfix, ...args }) => {
+    const [page, setPage] = useState(0);
+
+    return (
+      <PageSelector
+        {...args}
+        page={page}
+        onNextPage={() => setPage(page + 1)}
+        onPrevPage={() => setPage(page - 1)}
+      />
+    );
+  }),
+  argTypes: {
+    // engine
+    ...VneWrap.ARGS,
+
+    gap: { control: { type: "number", min: 12, max: 240, step: 12 } },
+
+    size: { control: { type: "number", min: 12, max: 156, step: 12 } },
+
+    pagesCount: { control: { type: "number", min: 10, max: 300, step: 5 } },
+    itemWidth: { control: { type: "number", min: 120, max: 780, step: 12 } },
+  },
+};

package/src/PageSelector.tsx

@@ -0,0 +1,68 @@
+import { useCallback, useMemo } from "react";
+
+import { getVneLength } from "@vnejs/uis.utils";
+
+import { Text, Flex } from "@vnejs/uis.react";
+
+const LINE_ARGS = { x1: "3", y1: "24", x2: "60", y2: "60" };
+const LINE_ARGS_1 = { ...LINE_ARGS, y1: "24" };
+const LINE_ARGS_2 = { ...LINE_ARGS, y1: "96" };
+
+const renderArrow = (style, angle, shift, onClick) => (
+  <svg
+    width="60"
+    height="60"
+    viewBox="0 0 60 120"
+    xmlns="http://www.w3.org/2000/Text"
+    fill="none"
+    stroke="white"
+    strokeWidth="6"
+    strokeLinecap="round"
+    style={style}
+    onClick={onClick}
+  >
+    <g transform={`rotate(${angle} ${shift} 60)`}>
+      <line {...LINE_ARGS_1} />
+      <line {...LINE_ARGS_2} />
+    </g>
+  </svg>
+);
+
+export const PageSelector = ({ page, pagesCount, pagesMinCount, gap = 120, size = 60, transition = 300, itemWidth = 720, onNextPage, onPrevPage }) => {
+  const styleArrow = useMemo(() => {
+    const result: Record<string, any> = {};
+
+    if (size) result.height = getVneLength(size);
+    if (itemWidth) result.width = getVneLength(itemWidth);
+    if (transition) result.transition = `${transition}ms`;
+
+    return result;
+  }, [size, itemWidth, transition]);
+
+  const showArrowLeft = page > pagesMinCount;
+  const showArrowRight = page < pagesCount;
+
+  const styleArrowLeft = useMemo(() => ({ ...styleArrow, opacity: showArrowLeft ? 1 : 0 }), [styleArrow, showArrowLeft]);
+  const styleArrowRight = useMemo(() => ({ ...styleArrow, opacity: showArrowRight ? 1 : 0 }), [styleArrow, showArrowRight]);
+
+  const onPrevPageHandler = useCallback(() => showArrowLeft && onPrevPage && onPrevPage(), [onPrevPage, showArrowLeft]);
+  const onNextPageHandler = useCallback(() => showArrowRight && onNextPage && onNextPage(), [onNextPage, showArrowRight]);
+
+  return (
+    <Flex
+      align={Flex.ALIGN.CENTER}
+      justify={Flex.JUSTIFY.CENTER}
+      direction={Flex.DIRECTION.ROW}
+      gap={gap}
+    >
+      {renderArrow(styleArrowLeft, 180, 30, onPrevPageHandler)}
+      <Text
+        width={itemWidth}
+        size={size}
+        text={`${page} / ${pagesCount}`}
+        align={Text.ALIGNS.CENTER}
+      />
+      {renderArrow(styleArrowRight, 0, 60, onNextPageHandler)}
+    </Flex>
+  );
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./PageSelector";

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.react.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "../../../globals.d.ts",
+    "../../../peer-modules.d.ts"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "src/**/*.stories.tsx"
+  ]
+}