@vnejs/uis.react.scroll-content 0.1.3 → 0.1.5

package/dist/ScrollContent.d.ts

@@ -1,4 +1,3 @@
-import "./ScrollContent.styl";
 export declare const ScrollContent: ({ className, children, shouldScroll, waitCommonDelay, waitStartDelay, waitEndDelay, duration, onFinish }: {
     className?: string;
     children: any;

package/dist/ScrollContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollContent.d.ts","sourceRoot":"","sources":["../src/ScrollContent.tsx"],"names":[],"mappings":"AAIA,OAAO,sBAAsB,CAAC;AAI9B,eAAO,MAAM,aAAa,GAAI;;;;;;;;;CAA6G,4CA2D1I,CAAC"}
+{"version":3,"file":"ScrollContent.d.ts","sourceRoot":"","sources":["../src/ScrollContent.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,GAAI;;;;;;;;;CAA6G,4CA2D1I,CAAC"}

package/dist/ScrollContent.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from "react";
-import { cn } from "@bem-react/classname";
-import "./ScrollContent.styl";
-const b = cn("ScrollContent");
+import { b } from "./ScrollContent.styles.js";
 export const ScrollContent = ({ className = "", children, shouldScroll, waitCommonDelay, waitStartDelay, waitEndDelay, duration, onFinish }) => {
     const contentRef = useRef(null);
     const closeTimeout = useRef(0);

package/dist/ScrollContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollContent.js","sourceRoot":"","sources":["../src/ScrollContent.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScrollContent.js","sourceRoot":"","sources":["../src/ScrollContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,CAAC,EAAE,MAAM,2BAA2B,CAAC;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7I,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,YAAY,GAAG,MAAM,CAAM,CAAC,CAAC,CAAC;IACpC,MAAM,aAAa,GAAG,MAAM,CAAM,CAAC,CAAC,CAAC;IAErC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE9E,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;QACvB,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,GAAG,QAAQ,CAAC;QAC1D,UAAU,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC;QAE5C,IAAI,KAAK,IAAI,CAAC;YAAE,OAAO,KAAK,EAAE,CAAC;QAE/B,aAAa,CAAC,OAAO,GAAG,qBAAqB,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAC3F,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,aAAa;QAEb,IAAI,CAAC,YAAY;YAAE,OAAO;QAE1B,UAAU,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC;QAEjC,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE;YACzB,MAAM,OAAO,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;YAErC,aAAa,CAAC,OAAO,GAAG,qBAAqB,CAAC,GAAG,EAAE,CACjD,aAAa,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,YAAY,EAAE,GAAG,EAAE;gBAC7F,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;gBACnC,YAAY,CAAC,OAAO,GAAG,UAAU,CAAC,eAAe,EAAE,cAAc,GAAG,YAAY,CAAC,CAAC;YACpF,CAAC,CAAC,CACH,CAAC;QACJ,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC,CAAC;QAErC,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAEjF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY;YAAE,OAAO;QAEzB,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE;YACzB,oBAAoB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC5C,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC,EAAE,eAAe,CAAC,CAAC;QAEpB,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,cACE,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,EAC7B,GAAG,EAAE,UAAU,YAEd,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/ScrollContent.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const b: (...args: any[]) => string;
+//# sourceMappingURL=ScrollContent.styles.d.ts.map

package/dist/ScrollContent.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollContent.styles.d.ts","sourceRoot":"","sources":["../src/ScrollContent.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC,4BAAsB,CAAC"}

package/dist/ScrollContent.styles.js

@@ -0,0 +1,13 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+export const b = cn("ScrollContent");
+const CSS = `
+${sel(b())} {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+`;
+injectStyles(CSS);
+//# sourceMappingURL=ScrollContent.styles.js.map

package/dist/ScrollContent.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollContent.styles.js","sourceRoot":"","sources":["../src/ScrollContent.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC;AAErC,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;CAOT,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}

package/package.json

@@ -1,31 +1,26 @@
 {
   "name": "@vnejs/uis.react.scroll-content",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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.utils": "~0.1.0"
   },
   "devDependencies": {
-    "@vnejs/uis.react": "~0.1.0",
-    "typescript": "^6.0.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/ScrollContent.stories.tsx

@@ -0,0 +1,52 @@
+import { renderWithVneWrap, DEFAULT_ARGS, ARGS } from "@vnejs/uis.react";
+
+import { Text, ScrollContent, Flex } from "@vnejs/uis.react";
+
+export const Common = {
+  args: {
+    ...DEFAULT_ARGS,
+    textCount: 18,
+
+    shouldScroll: true,
+    waitCommonDelay: 1000,
+    waitStartDelay: 500,
+    waitEndDelay: 2000,
+    duration: 10000,
+  },
+};
+
+export default {
+  title: "Primitives/ScrollContent",
+  render: renderWithVneWrap(({ textCount, ...args }) => (
+    <ScrollContent
+      {...args}
+      onFinish={() => console.log("finished")}
+    >
+      <Flex
+        direction={Flex.DIRECTION.COLUMN}
+        gap={96}
+      >
+        {Array.from({ length: textCount }, (_, index) => index).map((i) => (
+          <Text
+            key={i}
+            size={96}
+            align={Text.ALIGNS.CENTER}
+            text={`text text ${i} text text`}
+          />
+        ))}
+      </Flex>
+    </ScrollContent>
+  )),
+  argTypes: {
+    // engine
+    ...ARGS,
+
+    // text
+    textCount: { control: { type: "number", min: 12, max: 36, step: 1 } },
+
+    waitCommonDelay: { control: { type: "number", min: 100, max: 2000, step: 100 } },
+    waitStartDelay: { control: { type: "number", min: 100, max: 2000, step: 100 } },
+    waitEndDelay: { control: { type: "number", min: 100, max: 2000, step: 100 } },
+    duration: { control: { type: "number", min: 100, max: 15000, step: 100 } },
+  },
+};

package/src/ScrollContent.styles.ts

@@ -0,0 +1,15 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("ScrollContent");
+
+const CSS = `
+${sel(b())} {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+`;
+
+injectStyles(CSS);

package/src/ScrollContent.tsx

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useRef } from "react";
+
+import { b } from "./ScrollContent.styles.js";
+
+export const ScrollContent = ({ className = "", children, shouldScroll, waitCommonDelay, waitStartDelay, waitEndDelay, duration, onFinish }) => {
+  const contentRef = useRef(null);
+  const closeTimeout = useRef<any>(0);
+  const scrollRequest = useRef<any>(0);
+
+  const onFinishHandler = useCallback(() => onFinish && onFinish(), [onFinish]);
+
+  const scrollContent = useCallback(
+    (tsStart, path, onEnd) => {
+      const ratio = (new Date().getTime() - tsStart) / duration;
+      contentRef.current.scrollTop = path * ratio;
+
+      if (ratio >= 1) return onEnd();
+
+      scrollRequest.current = requestAnimationFrame(() => scrollContent(tsStart, path, onEnd));
+    },
+    [duration],
+  );
+
+  useEffect(() => {
+    // показываем
+
+    if (!shouldScroll) return;
+
+    contentRef.current.scrollTop = 0;
+
+    const tm = setTimeout(() => {
+      const tsStart = new Date().getTime();
+
+      scrollRequest.current = requestAnimationFrame(() =>
+        scrollContent(tsStart, contentRef.current.scrollHeight - contentRef.current.clientHeight, () => {
+          clearTimeout(closeTimeout.current);
+          closeTimeout.current = setTimeout(onFinishHandler, waitStartDelay + waitEndDelay);
+        }),
+      );
+    }, waitCommonDelay + waitStartDelay);
+
+    return () => clearTimeout(tm);
+  }, [shouldScroll, waitCommonDelay, waitStartDelay, waitEndDelay, scrollContent]);
+
+  useEffect(() => {
+    if (shouldScroll) return;
+
+    const tm = setTimeout(() => {
+      cancelAnimationFrame(scrollRequest.current);
+      clearTimeout(closeTimeout.current);
+    }, waitCommonDelay);
+
+    return () => clearTimeout(tm);
+  }, [shouldScroll, waitCommonDelay]);
+
+  return (
+    <div
+      className={b({}, [className])}
+      ref={contentRef}
+    >
+      {children}
+    </div>
+  );
+};

package/src/index.ts

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

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"
+  ]
+}

package/dist/ScrollContent.styl

@@ -1,8 +0,0 @@
-.ScrollContent
-  display: block
-  position: relative
-
-  width: 100%
-  height: 100%
-
-  overflow: hidden