@vnejs/uis.react.char 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/Char.d.ts +0 -1
  2. package/dist/Char.d.ts.map +1 -1
  3. package/dist/Char.js +1 -3
  4. package/dist/Char.js.map +1 -1
  5. package/dist/Char.styles.d.ts +2 -0
  6. package/dist/Char.styles.d.ts.map +1 -0
  7. package/dist/Char.styles.js +72 -0
  8. package/dist/Char.styles.js.map +1 -0
  9. package/package.json +12 -17
  10. package/src/Char.stories.tsx +66 -0
  11. package/src/Char.styles.ts +74 -0
  12. package/src/Char.tsx +50 -0
  13. package/src/index.ts +1 -0
  14. package/tsconfig.json +18 -0
  15. package/dist/Char.styl +0 -52
package/dist/Char.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import "./Char.styl";
2
1
  export declare const Char: ({ token, marks, isVisible, isForce }?: {
3
2
  token?: string;
4
3
  marks?: any[];
package/dist/Char.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,8 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useMemo } from "react";
3
- import { cn } from "@bem-react/classname";
4
- import "./Char.styl";
5
- const b = cn("Char");
3
+ import { b } from "./Char.styles.js";
6
4
  const MARKS_PREFIXES = { COLOR: "color:", WEIGHT: "weight:", OPACITY: "opacity:", ANIMATION: "animation:", ZOOM: "zoom:" };
7
5
  const MARKS_PREFIXES_VALUES = Object.values(MARKS_PREFIXES);
8
6
  const reduceMark = (prefix) => (acc, mark) => {
package/dist/Char.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Char.js","sourceRoot":"","sources":["../src/Char.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Char.js","sourceRoot":"","sources":["../src/Char.tsx"],"names":[],"mappings":"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"}
package/dist/Char.styles.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const b: (...args: any[]) => string;
2
+ //# sourceMappingURL=Char.styles.d.ts.map
package/dist/Char.styles.d.ts.map ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,72 @@
1
+ import { cn, injectStyles, sel } from "@vnejs/uis.utils";
2
+ export const b = cn("Char");
3
+ const CSS = `
4
+ @keyframes shake {
5
+ 0% {
6
+ top: -0.25vh;
7
+ left: 0;
8
+ }
9
+ 25% {
10
+ top: 0;
11
+ left: -0.25vw;
12
+ }
13
+ 50% {
14
+ top: 0.25vh;
15
+ left: 0;
16
+ }
17
+ 75% {
18
+ top: 0;
19
+ left: 0.25vw;
20
+ }
21
+ 100% {
22
+ top: -0.25vh;
23
+ left: 0;
24
+ }
25
+ }
26
+
27
+ @keyframes gradientExample {
28
+ 0% {
29
+ color: #40e0d0;
30
+ }
31
+ 50% {
32
+ color: #ff8c00;
33
+ }
34
+ 100% {
35
+ color: #40e0d0;
36
+ }
37
+ }
38
+
39
+ ${sel(b())} {
40
+ --vne-char-visible-opacity: 1;
41
+ display: inline;
42
+ opacity: 0;
43
+ transition: inherit;
44
+ position: relative;
45
+ }
46
+
47
+ ${sel(b({ b: true }))} {
48
+ font-weight: bold;
49
+ }
50
+
51
+ ${sel(b({ lt: true }))} {
52
+ text-decoration: line-through;
53
+ }
54
+
55
+ ${sel(b({ ul: true }))} {
56
+ text-decoration: underline;
57
+ }
58
+
59
+ ${sel(b({ i: true }))} {
60
+ font-style: italic;
61
+ }
62
+
63
+ ${sel(b({ isVisible: true }))} {
64
+ opacity: var(--vne-char-visible-opacity);
65
+ }
66
+
67
+ ${sel(b({ isForce: true }))} {
68
+ transition: none;
69
+ }
70
+ `;
71
+ injectStyles(CSS);
72
+ //# sourceMappingURL=Char.styles.js.map
package/dist/Char.styles.js.map ADDED
@@ -0,0 +1 @@
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 CHANGED
@@ -1,31 +1,26 @@
1
1
  {
2
2
  "name": "@vnejs/uis.react.char",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
7
- "build": "node ../../scripts/build-package.mjs",
8
- "publish:major:plugin": "npm run publish:major",
9
- "publish:minor:plugin": "npm run publish:minor",
10
- "publish:patch:plugin": "npm run publish:patch",
11
- "publish:major": "npm run build && npm version major && npm publish --access public",
12
- "publish:minor": "npm run build && npm version minor && npm publish --access public",
13
- "publish:patch": "npm run build && npm version patch && npm publish --access public"
7
+ "build": "npx @vnejs/monorepo package",
8
+ "publish:major:uis:react": "npm run publish:major",
9
+ "publish:minor:uis:react": "npm run publish:minor",
10
+ "publish:patch:uis:react": "npm run publish:patch",
11
+ "publish:major": "npx @vnejs/monorepo publish major --access public",
12
+ "publish:minor": "npx @vnejs/monorepo publish minor --access public",
13
+ "publish:patch": "npx @vnejs/monorepo publish patch --access public"
14
14
  },
15
15
  "peerDependencies": {
16
- "@bem-react/classname": "1.5.12",
17
- "@vnejs/uis.utils": "~0.1.0",
18
- "react": "19.2.4",
19
- "react-dom": "19.2.4"
16
+ "@vnejs/uis.utils": "~0.1.0"
20
17
  },
21
18
  "devDependencies": {
22
- "@vnejs/uis.react": "~0.1.0",
23
- "typescript": "^5.7.3",
24
- "@types/react": "^19.0.10",
25
- "@types/react-dom": "^19.0.4"
19
+ "@vnejs/uis.react": "~0.1.0"
26
20
  },
27
21
  "files": [
28
22
  "dist",
29
- "package.json"
23
+ "src",
24
+ "tsconfig.json"
30
25
  ]
31
26
  }
package/src/Char.stories.tsx ADDED
@@ -0,0 +1,66 @@
1
+ import { useEffect, useState } from "react";
2
+
3
+ import { VneWrap } from "@vnejs/uis.react";
4
+
5
+ import { Flex, Char } from "@vnejs/uis.react";
6
+
7
+ export const Common = {
8
+ args: {
9
+ vneHeight: 720,
10
+
11
+ 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.",
12
+
13
+ size: 48,
14
+
15
+ charDelay: 10,
16
+
17
+ isForce: false,
18
+ },
19
+ };
20
+
21
+ export default {
22
+ title: "Primitives/Char",
23
+ render: ({ vneHeight, text, size, isForce, charDelay }) => {
24
+ const [tokensVisible, setTokensVisible] = useState(0);
25
+
26
+ useEffect(() => void setTokensVisible(0), [text, charDelay]);
27
+ useEffect(() => {
28
+ if (tokensVisible > text.length) return;
29
+ if (isForce) return void setTokensVisible(99999999999);
30
+
31
+ const tm = setTimeout(() => void setTokensVisible(tokensVisible + 1), charDelay);
32
+
33
+ return () => clearTimeout(tm);
34
+ }, [text, tokensVisible, isForce, charDelay]);
35
+
36
+ return (
37
+ <VneWrap height={vneHeight}>
38
+ <Flex
39
+ align={Flex.ALIGN.CENTER}
40
+ justify={Flex.JUSTIFY.CENTER}
41
+ height={2160}
42
+ >
43
+ <span style={{ fontSize: size, color: "white" }}>
44
+ {[...text].map((token, i) => (
45
+ <Char
46
+ key={i}
47
+ token={token}
48
+ isForce={isForce}
49
+ isVisible={i < tokensVisible}
50
+ />
51
+ ))}
52
+ </span>
53
+ </Flex>
54
+ </VneWrap>
55
+ );
56
+ },
57
+ argTypes: {
58
+ // engine
59
+ vneHeight: { control: { type: "number", min: 180, max: 2160, step: 45 } },
60
+
61
+ // Text
62
+ size: { control: { type: "number", min: 24, max: 180, step: 6 } },
63
+
64
+ charDelay: { control: { type: "number", min: 0, max: 64, step: 2 } },
65
+ },
66
+ };
package/src/Char.styles.ts ADDED
@@ -0,0 +1,74 @@
1
+ import { cn, injectStyles, sel } from "@vnejs/uis.utils";
2
+
3
+ export const b = cn("Char");
4
+
5
+ const CSS = `
6
+ @keyframes shake {
7
+ 0% {
8
+ top: -0.25vh;
9
+ left: 0;
10
+ }
11
+ 25% {
12
+ top: 0;
13
+ left: -0.25vw;
14
+ }
15
+ 50% {
16
+ top: 0.25vh;
17
+ left: 0;
18
+ }
19
+ 75% {
20
+ top: 0;
21
+ left: 0.25vw;
22
+ }
23
+ 100% {
24
+ top: -0.25vh;
25
+ left: 0;
26
+ }
27
+ }
28
+
29
+ @keyframes gradientExample {
30
+ 0% {
31
+ color: #40e0d0;
32
+ }
33
+ 50% {
34
+ color: #ff8c00;
35
+ }
36
+ 100% {
37
+ color: #40e0d0;
38
+ }
39
+ }
40
+
41
+ ${sel(b())} {
42
+ --vne-char-visible-opacity: 1;
43
+ display: inline;
44
+ opacity: 0;
45
+ transition: inherit;
46
+ position: relative;
47
+ }
48
+
49
+ ${sel(b({ b: true }))} {
50
+ font-weight: bold;
51
+ }
52
+
53
+ ${sel(b({ lt: true }))} {
54
+ text-decoration: line-through;
55
+ }
56
+
57
+ ${sel(b({ ul: true }))} {
58
+ text-decoration: underline;
59
+ }
60
+
61
+ ${sel(b({ i: true }))} {
62
+ font-style: italic;
63
+ }
64
+
65
+ ${sel(b({ isVisible: true }))} {
66
+ opacity: var(--vne-char-visible-opacity);
67
+ }
68
+
69
+ ${sel(b({ isForce: true }))} {
70
+ transition: none;
71
+ }
72
+ `;
73
+
74
+ injectStyles(CSS);
package/src/Char.tsx ADDED
@@ -0,0 +1,50 @@
1
+ import { useMemo } from "react";
2
+
3
+ import { b } from "./Char.styles.js";
4
+
5
+ const MARKS_PREFIXES = { COLOR: "color:", WEIGHT: "weight:", OPACITY: "opacity:", ANIMATION: "animation:", ZOOM: "zoom:" };
6
+ const MARKS_PREFIXES_VALUES = Object.values(MARKS_PREFIXES);
7
+
8
+ const reduceMark = (prefix: string) => (acc: string[], mark: string) => {
9
+ if (mark.startsWith(prefix)) acc.push(mark.slice(prefix.length));
10
+
11
+ return acc;
12
+ };
13
+
14
+ export const Char = ({ token = "", marks = [], isVisible = false, isForce = false } = {}) => {
15
+ const marksZoom = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.ZOOM), [] as string[]), [marks]);
16
+ const marksColor = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.COLOR), [] as string[]), [marks]);
17
+ const marksWeight = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.WEIGHT), [] as string[]), [marks]);
18
+ const marksOpacity = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.OPACITY), [] as string[]), [marks]);
19
+ const marksAnimation = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.ANIMATION), [] as string[]), [marks]);
20
+
21
+ const style = useMemo(() => {
22
+ const result: Record<string, string | number> = {};
23
+
24
+ if (marksZoom.length) result.zoom = marksZoom[marksZoom.length - 1];
25
+ if (marksColor.length) result.color = marksColor[marksColor.length - 1];
26
+ if (marksWeight.length) result.fontWeight = marksWeight[marksWeight.length - 1];
27
+ if (marksOpacity.length) result["--vne-char-visible-opacity"] = marksOpacity[marksOpacity.length - 1];
28
+ if (marksAnimation.length) result.animation = marksAnimation[marksAnimation.length - 1];
29
+
30
+ return result;
31
+ }, [marksZoom, marksColor, marksWeight, marksOpacity, marksAnimation]);
32
+
33
+ const otherMarks = useMemo(
34
+ () =>
35
+ marks.reduce<Record<string, boolean>>(
36
+ (acc, mark) => (MARKS_PREFIXES_VALUES.some((prefix) => mark.startsWith(prefix)) ? acc : { ...acc, [mark]: true }),
37
+ {},
38
+ ),
39
+ [marks],
40
+ );
41
+
42
+ return (
43
+ <div
44
+ className={b({ isVisible, isForce, ...otherMarks })}
45
+ style={style}
46
+ >
47
+ {token}
48
+ </div>
49
+ );
50
+ };
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./Char";
package/tsconfig.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "extends": "../../../tsconfig.react.base.json",
3
+ "compilerOptions": {
4
+ "outDir": "dist",
5
+ "rootDir": "src"
6
+ },
7
+ "include": [
8
+ "src/**/*.ts",
9
+ "src/**/*.tsx",
10
+ "../../../globals.d.ts",
11
+ "../../../peer-modules.d.ts"
12
+ ],
13
+ "exclude": [
14
+ "dist",
15
+ "node_modules",
16
+ "src/**/*.stories.tsx"
17
+ ]
18
+ }
package/dist/Char.styl DELETED
@@ -1,52 +0,0 @@
1
- shakeShift = 0.25
2
-
3
- @keyframes shake
4
- 0%
5
- top: shakeShift * -1vh
6
- left: 0
7
- 25%
8
- top: 0px
9
- left: shakeShift * -1vw
10
- 50%
11
- top: shakeShift * 1vh
12
- left: 0px
13
- 75%
14
- top: 0px
15
- left: shakeShift * 1vw
16
- 100%
17
- top: shakeShift * -1vh
18
- left: 0
19
-
20
- @keyframes gradientExample
21
- 0%
22
- color: #40E0D0
23
- 50%
24
- color: #FF8C00
25
- 100%
26
- color: #40E0D0
27
-
28
- .Char
29
- --vne-char-visible-opacity: 1
30
-
31
- display: inline
32
-
33
- opacity: 0
34
-
35
- transition: inherit
36
-
37
- position: relative
38
-
39
- &_b
40
- font-weight: bold
41
- &_lt
42
- text-decoration: line-through
43
- &_ul
44
- text-decoration: underline
45
- &_i
46
- font-style: italic
47
-
48
- &_isVisible
49
- opacity: var(--vne-char-visible-opacity)
50
-
51
- &_isForce
52
- transition: none