@vnejs/uis.react.smooth-text 0.1.3 → 0.1.4

package/dist/SmoothText.d.ts

@@ -1,4 +1,3 @@
-import "./SmoothText.styl";
 export declare const SmoothText: ({ tokens, color, size, className, width, height, opacity, font, transition, charDelay, tokensVisibleForce, isForce, isCentered, isNotRender, isNoScrollBar, scrollBarTextSize, }: {
     tokens?: any[];
     color?: string;

package/dist/SmoothText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmoothText.d.ts","sourceRoot":"","sources":["../src/SmoothText.tsx"],"names":[],"mappings":"AAQA,OAAO,mBAAmB,CAAC;AAM3B,eAAO,MAAM,UAAU,GAAI;;;;;;;;;;;;;;;;;CAiB1B,4CAgEA,CAAC"}
+{"version":3,"file":"SmoothText.d.ts","sourceRoot":"","sources":["../src/SmoothText.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,UAAU,GAAI;;;;;;;;;;;;;;;;;CAiB1B,4CAgEA,CAAC"}

package/dist/SmoothText.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
-import { cn, getVneLength } from "@vnejs/uis.utils";
+import { getVneLength } from "@vnejs/uis.utils";
 import { Char, Scrollbar } from "@vnejs/uis.react";
 import { useSmoothTextCharsVisibleHook } from "./hooks/chars.hook";
-import "./SmoothText.styl";
-const b = cn("SmoothText");
+import { b } from "./SmoothText.styles.js";
 const EMPTY_ARRAY = [];
 export const SmoothText = ({ tokens = [], color = "", size = 60, className = "", width = 0, height = 0, opacity = null, font = "", transition = null, charDelay = 20, tokensVisibleForce = null, isForce = false, isCentered = false, isNotRender = false, isNoScrollBar = false, scrollBarTextSize = null, }) => {
     const style = useMemo(() => {

package/dist/SmoothText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmoothText.js","sourceRoot":"","sources":["../src/SmoothText.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SmoothText.js","sourceRoot":"","sources":["../src/SmoothText.tsx"],"names":[],"mappings":"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"}

package/dist/SmoothText.styles.d.ts

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

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

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

package/dist/SmoothText.styles.js

@@ -0,0 +1,18 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+export const b = cn("SmoothText");
+const CSS = `
+${sel(b("chars"))} {
+  width: 100%;
+  height: 100%;
+}
+
+${sel(b({ isCentered: true }))} ${sel(b("chars"))} {
+  text-align: center;
+}
+
+${sel(b({ isNoScrollBar: true }))} {
+  display: inline-block;
+}
+`;
+injectStyles(CSS);
+//# sourceMappingURL=SmoothText.styles.js.map

package/dist/SmoothText.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmoothText.styles.js","sourceRoot":"","sources":["../src/SmoothText.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;AAElC,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;;;;;EAKf,GAAG,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;;;;EAI/C,GAAG,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;;;CAGhC,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}

package/package.json

@@ -1,32 +1,26 @@
 {
   "name": "@vnejs/uis.react.smooth-text",
-  "version": "0.1.3",
+  "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": "^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/SmoothText.stories.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { renderWithVneWrap, DEFAULT_ARGS, ARGS } from "@vnejs/uis.react";
+
+import { SmoothText } from "./SmoothText";
+
+export const Common = {
+  args: {
+    ...DEFAULT_ARGS,
+
+    text: "In a loose sense the edge of the criterion the general features and possibilities of the existing network the final phase and cannot be developed under such circumstances.",
+
+    size: 48,
+
+    charDelay: 10,
+
+    width: 900,
+    height: 180,
+
+    isForce: false,
+  },
+};
+
+const onTextFinished = () => console.log("finish");
+const onTextStarted = () => console.log("start");
+
+export default {
+  title: "Base/SmoothText",
+  render: renderWithVneWrap(({ text, ...args }) => {
+    const tokens = useMemo(() => [...text].map((char) => ({ token: char })), [text]);
+
+    return (
+      <SmoothText
+        {...args}
+        color="white"
+        tokens={tokens}
+        onTextFinished={onTextFinished}
+        onTextStarted={onTextStarted}
+      />
+    );
+  }),
+  argTypes: {
+    // engine
+    ...ARGS,
+
+    // Text
+    size: { control: { type: "number", min: 24, max: 180, step: 6 } },
+
+    // SmoothText
+    charDelay: { control: { type: "number", min: 0, max: 64, step: 2 } },
+    width: { control: { type: "number", min: 1200, max: 2400, step: 30 } },
+    height: { control: { type: "number", min: 120, max: 600, step: 30 } },
+  },
+};

package/src/SmoothText.styles.ts

@@ -0,0 +1,20 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("SmoothText");
+
+const CSS = `
+${sel(b("chars"))} {
+  width: 100%;
+  height: 100%;
+}
+
+${sel(b({ isCentered: true }))} ${sel(b("chars"))} {
+  text-align: center;
+}
+
+${sel(b({ isNoScrollBar: true }))} {
+  display: inline-block;
+}
+`;
+
+injectStyles(CSS);

package/src/SmoothText.tsx

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { getVneLength } from "@vnejs/uis.utils";
+
+import { Char, Scrollbar } from "@vnejs/uis.react";
+
+import { useSmoothTextCharsVisibleHook } from "./hooks/chars.hook";
+
+import { b } from "./SmoothText.styles.js";
+
+const EMPTY_ARRAY = [];
+
+export const SmoothText = ({
+  tokens = [],
+  color = "",
+  size = 60,
+  className = "",
+  width = 0,
+  height = 0,
+  opacity = null,
+  font = "",
+  transition = null,
+  charDelay = 20,
+  tokensVisibleForce = null,
+  isForce = false,
+  isCentered = false,
+  isNotRender = false,
+  isNoScrollBar = false,
+  scrollBarTextSize = null,
+}) => {
+  const style = useMemo(() => {
+    const result: Record<string, any> = {};
+
+    if (font) result.fontFamily = font;
+    if (color) result.color = color;
+
+    if (size) {
+      result.fontSize = `round(down, calc(${getVneLength(size)} * var(--vne-text-size-multiplicator, 1)), 1px)`;
+      result.lineHeight = `round(down, calc(${getVneLength(1.25 * size)} * var(--vne-text-size-multiplicator, 1)), 1px)`;
+    }
+
+    if (transition !== null) result.transition = transition && !isForce ? `${transition}ms` : "none";
+
+    if (opacity) result.opacity = opacity;
+
+    return result;
+  }, [font, color, size, transition, opacity, isForce]);
+
+  const tokensVisible = useSmoothTextCharsVisibleHook(tokens, charDelay, tokensVisibleForce);
+
+  const renderChar = useCallback(
+    (tokenInfo, i) => (
+      <Char
+        key={`${tokenInfo.token}:${i}`}
+        token={tokenInfo.token}
+        marks={tokenInfo.marks}
+        isVisible={i < tokensVisible}
+        isForce={isForce || tokensVisible === 0}
+      />
+    ),
+    [tokensVisible],
+  );
+
+  if (isNotRender) return null;
+
+  if (isNoScrollBar) {
+    return (
+      <div className={b({ isNoScrollBar: true }, [className])}>
+        <div
+          className={b("chars")}
+          style={style}
+        >
+          {tokens.map(renderChar)}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Scrollbar
+      className={b({ isCentered }, [className])}
+      width={width}
+      height={height}
+      textSize={scrollBarTextSize}
+    >
+      <div
+        className={b("chars")}
+        style={style}
+      >
+        {tokens.map(renderChar)}
+      </div>
+    </Scrollbar>
+  );
+};

package/src/hooks/chars.hook.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+export const useSmoothTextCharsVisibleHook = (tokens, charDelay, tokensVisibleForce) => {
+  const [tokensVisible, setTokensVisible] = useState(0);
+
+  useEffect(() => {
+    if (tokensVisibleForce === null) setTokensVisible(0);
+  }, [tokens, charDelay]);
+
+  useEffect(() => {
+    if (tokensVisibleForce !== null) setTokensVisible(tokensVisibleForce);
+  }, [tokensVisibleForce]);
+
+  useEffect(() => {
+    if (tokensVisibleForce !== null || tokensVisible >= tokens.length) return;
+
+    const tm = setTimeout(() => setTokensVisible(tokensVisible + 1), charDelay);
+
+    return () => clearTimeout(tm);
+  }, [tokens, tokensVisible, charDelay, tokensVisibleForce]);
+
+  return tokensVisible;
+};

package/src/index.ts

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

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/SmoothText.styl

@@ -1,10 +0,0 @@
-.SmoothText
-    &-chars
-        width: 100%
-        height: 100%
-
-    &_isCentered &-chars
-        text-align: center
-
-    &_isNoScrollBar
-        display: inline-block