@vnejs/uis.react.char 0.1.2 → 0.1.4

package/dist/Char.d.ts

@@ -1,4 +1,3 @@
-import "./Char.styl";
 export declare const Char: ({ token, marks, isVisible, isForce }?: {
     token?: string;
     marks?: any[];

package/dist/Char.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Char.d.ts","sourceRoot":"","sources":["../src/Char.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAarB,eAAO,MAAM,IAAI,GAAI;;;;;CAAmE,4CAgCvF,CAAC"}
+{"version":3,"file":"Char.d.ts","sourceRoot":"","sources":["../src/Char.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,IAAI,GAAI;;;;;CAAmE,4CAoCvF,CAAC"}

package/dist/Char.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { cn } from "@bem-react/classname";
-import "./Char.styl";
-const b = cn("Char");
+import { b } from "./Char.styles.js";
 const MARKS_PREFIXES = { COLOR: "color:", WEIGHT: "weight:", OPACITY: "opacity:", ANIMATION: "animation:", ZOOM: "zoom:" };
 const MARKS_PREFIXES_VALUES = Object.values(MARKS_PREFIXES);
 const reduceMark = (prefix) => (acc, mark) => {

package/dist/Char.js.map

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

package/dist/Char.styles.d.ts

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

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

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

package/dist/Char.styles.js

@@ -0,0 +1,72 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+export const b = cn("Char");
+const CSS = `
+@keyframes shake {
+  0% {
+    top: -0.25vh;
+    left: 0;
+  }
+  25% {
+    top: 0;
+    left: -0.25vw;
+  }
+  50% {
+    top: 0.25vh;
+    left: 0;
+  }
+  75% {
+    top: 0;
+    left: 0.25vw;
+  }
+  100% {
+    top: -0.25vh;
+    left: 0;
+  }
+}
+
+@keyframes gradientExample {
+  0% {
+    color: #40e0d0;
+  }
+  50% {
+    color: #ff8c00;
+  }
+  100% {
+    color: #40e0d0;
+  }
+}
+
+${sel(b())} {
+  --vne-char-visible-opacity: 1;
+  display: inline;
+  opacity: 0;
+  transition: inherit;
+  position: relative;
+}
+
+${sel(b({ b: true }))} {
+  font-weight: bold;
+}
+
+${sel(b({ lt: true }))} {
+  text-decoration: line-through;
+}
+
+${sel(b({ ul: true }))} {
+  text-decoration: underline;
+}
+
+${sel(b({ i: true }))} {
+  font-style: italic;
+}
+
+${sel(b({ isVisible: true }))} {
+  opacity: var(--vne-char-visible-opacity);
+}
+
+${sel(b({ isForce: true }))} {
+  transition: none;
+}
+`;
+injectStyles(CSS);
+//# sourceMappingURL=Char.styles.js.map

package/dist/Char.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Char.styles.js","sourceRoot":"","sources":["../src/Char.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC;AAE5B,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;EAQR,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;;;;EAInB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;;;;EAIpB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;;;;EAIpB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;;;;EAInB,GAAG,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;;;;EAI3B,GAAG,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;;;CAG1B,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}

package/package.json

@@ -1,31 +1,26 @@
 {
   "name": "@vnejs/uis.react.char",
-  "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.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/Char.stories.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+
+import { VneWrap } from "@vnejs/uis.react";
+
+import { Flex, Char } from "@vnejs/uis.react";
+
+export const Common = {
+  args: {
+    vneHeight: 720,
+
+    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,
+
+    isForce: false,
+  },
+};
+
+export default {
+  title: "Primitives/Char",
+  render: ({ vneHeight, text, size, isForce, charDelay }) => {
+    const [tokensVisible, setTokensVisible] = useState(0);
+
+    useEffect(() => void setTokensVisible(0), [text, charDelay]);
+    useEffect(() => {
+      if (tokensVisible > text.length) return;
+      if (isForce) return void setTokensVisible(99999999999);
+
+      const tm = setTimeout(() => void setTokensVisible(tokensVisible + 1), charDelay);
+
+      return () => clearTimeout(tm);
+    }, [text, tokensVisible, isForce, charDelay]);
+
+    return (
+      <VneWrap height={vneHeight}>
+        <Flex
+          align={Flex.ALIGN.CENTER}
+          justify={Flex.JUSTIFY.CENTER}
+          height={2160}
+        >
+          <span style={{ fontSize: size, color: "white" }}>
+            {[...text].map((token, i) => (
+              <Char
+                key={i}
+                token={token}
+                isForce={isForce}
+                isVisible={i < tokensVisible}
+              />
+            ))}
+          </span>
+        </Flex>
+      </VneWrap>
+    );
+  },
+  argTypes: {
+    // engine
+    vneHeight: { control: { type: "number", min: 180, max: 2160, step: 45 } },
+
+    // Text
+    size: { control: { type: "number", min: 24, max: 180, step: 6 } },
+
+    charDelay: { control: { type: "number", min: 0, max: 64, step: 2 } },
+  },
+};

package/src/Char.styles.ts

@@ -0,0 +1,74 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("Char");
+
+const CSS = `
+@keyframes shake {
+  0% {
+    top: -0.25vh;
+    left: 0;
+  }
+  25% {
+    top: 0;
+    left: -0.25vw;
+  }
+  50% {
+    top: 0.25vh;
+    left: 0;
+  }
+  75% {
+    top: 0;
+    left: 0.25vw;
+  }
+  100% {
+    top: -0.25vh;
+    left: 0;
+  }
+}
+
+@keyframes gradientExample {
+  0% {
+    color: #40e0d0;
+  }
+  50% {
+    color: #ff8c00;
+  }
+  100% {
+    color: #40e0d0;
+  }
+}
+
+${sel(b())} {
+  --vne-char-visible-opacity: 1;
+  display: inline;
+  opacity: 0;
+  transition: inherit;
+  position: relative;
+}
+
+${sel(b({ b: true }))} {
+  font-weight: bold;
+}
+
+${sel(b({ lt: true }))} {
+  text-decoration: line-through;
+}
+
+${sel(b({ ul: true }))} {
+  text-decoration: underline;
+}
+
+${sel(b({ i: true }))} {
+  font-style: italic;
+}
+
+${sel(b({ isVisible: true }))} {
+  opacity: var(--vne-char-visible-opacity);
+}
+
+${sel(b({ isForce: true }))} {
+  transition: none;
+}
+`;
+
+injectStyles(CSS);

package/src/Char.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from "react";
+
+import { b } from "./Char.styles.js";
+
+const MARKS_PREFIXES = { COLOR: "color:", WEIGHT: "weight:", OPACITY: "opacity:", ANIMATION: "animation:", ZOOM: "zoom:" };
+const MARKS_PREFIXES_VALUES = Object.values(MARKS_PREFIXES);
+
+const reduceMark = (prefix: string) => (acc: string[], mark: string) => {
+  if (mark.startsWith(prefix)) acc.push(mark.slice(prefix.length));
+
+  return acc;
+};
+
+export const Char = ({ token = "", marks = [], isVisible = false, isForce = false } = {}) => {
+  const marksZoom = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.ZOOM), [] as string[]), [marks]);
+  const marksColor = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.COLOR), [] as string[]), [marks]);
+  const marksWeight = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.WEIGHT), [] as string[]), [marks]);
+  const marksOpacity = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.OPACITY), [] as string[]), [marks]);
+  const marksAnimation = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.ANIMATION), [] as string[]), [marks]);
+
+  const style = useMemo(() => {
+    const result: Record<string, string | number> = {};
+
+    if (marksZoom.length) result.zoom = marksZoom[marksZoom.length - 1];
+    if (marksColor.length) result.color = marksColor[marksColor.length - 1];
+    if (marksWeight.length) result.fontWeight = marksWeight[marksWeight.length - 1];
+    if (marksOpacity.length) result["--vne-char-visible-opacity"] = marksOpacity[marksOpacity.length - 1];
+    if (marksAnimation.length) result.animation = marksAnimation[marksAnimation.length - 1];
+
+    return result;
+  }, [marksZoom, marksColor, marksWeight, marksOpacity, marksAnimation]);
+
+  const otherMarks = useMemo(
+    () =>
+      marks.reduce<Record<string, boolean>>(
+        (acc, mark) => (MARKS_PREFIXES_VALUES.some((prefix) => mark.startsWith(prefix)) ? acc : { ...acc, [mark]: true }),
+        {},
+      ),
+    [marks],
+  );
+
+  return (
+    <div
+      className={b({ isVisible, isForce, ...otherMarks })}
+      style={style}
+    >
+      {token}
+    </div>
+  );
+};

package/src/index.ts

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

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

@@ -1,52 +0,0 @@
-shakeShift = 0.25
-
-@keyframes shake
-    0%
-        top: shakeShift * -1vh
-        left: 0
-    25%
-        top: 0px
-        left: shakeShift * -1vw
-    50%
-        top: shakeShift * 1vh
-        left: 0px
-    75%
-        top: 0px
-        left: shakeShift * 1vw
-    100%
-        top: shakeShift * -1vh
-        left: 0
-
-@keyframes gradientExample
-    0%
-        color: #40E0D0
-    50%
-        color: #FF8C00
-    100%
-        color: #40E0D0
-
-.Char
-    --vne-char-visible-opacity: 1
-
-    display: inline
-
-    opacity: 0
-    
-    transition: inherit
-
-    position: relative
-
-    &_b
-        font-weight: bold
-    &_lt
-        text-decoration: line-through
-    &_ul
-        text-decoration: underline
-    &_i
-        font-style: italic
-
-    &_isVisible
-        opacity: var(--vne-char-visible-opacity)
-
-    &_isForce
-        transition: none