@vnejs/uis.react.text 0.1.3 → 0.1.5

package/dist/Text.d.ts

@@ -1,4 +1,3 @@
-import "./Text.styl";
 export declare const Text: {
     ({ isActive, isSelected, isHoverable, isDisabled, isCurrent, isNotRender, isInlineBlock, text, textPrefix, color, colorPrefix, size, className, padding, width, marginTop, marginRight, font, whiteSpace, align, weight, weightPrefix, opacity, transition, onClick, value, }: {
         isActive?: boolean;

package/dist/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAIrB,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EhB,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EhB,CAAC"}

package/dist/Text.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
-import { cn, getVneLength } from "@vnejs/uis.utils";
-import "./Text.styl";
-const b = cn("Text");
+import { getVneLength } from "@vnejs/uis.utils";
+import { b } from "./Text.styles.js";
 export const Text = ({ isActive = false, isSelected = false, isHoverable = false, isDisabled = false, isCurrent = false, isNotRender = false, isInlineBlock = false, text = "", textPrefix = "", color = "", colorPrefix = "", size = 96, className = "", padding = 0, width = 0, marginTop = 0, marginRight = 0, font = "", whiteSpace = "", align = "", weight = null, weightPrefix = null, opacity = null, transition = 300, onClick, value, }) => {
     const style = useMemo(() => {
         const result = {};

package/dist/Text.js.map

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

package/dist/Text.styles.d.ts

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

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

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

package/dist/Text.styles.js

@@ -0,0 +1,52 @@
+import { cn, getVneLength, injectStyles, sel } from "@vnejs/uis.utils";
+export const b = cn("Text");
+const CSS = `
+${sel(b())} {
+  --vne-text-color-disabled: var(--vne-color-disabled, rgba(255, 255, 255, 30%));
+  --vne-text-color-primary: var(--vne-color-primary, rgba(255, 255, 255, 60%));
+  --vne-text-color-selected: var(--vne-color-selected, rgba(255, 255, 255, 75%));
+  --vne-text-color-active: var(--vne-color-active, rgba(255, 255, 255, 90%));
+  display: block;
+  user-select: none;
+  font-weight: 400;
+  color: var(--vne-text-color-primary);
+}
+
+${sel(b({ isDisabled: true }))} {
+  color: var(--vne-text-color-disabled);
+}
+
+${sel(b({ isSelected: true }))} {
+  color: var(--vne-text-color-selected);
+  font-weight: bold;
+  text-shadow: 0 0 ${getVneLength(12)} rgba(255, 255, 255, 90%);
+}
+
+${sel(b({ isActive: true }))} {
+  color: var(--vne-text-color-active);
+}
+
+${sel(b({ isCurrent: true }))} {
+  text-decoration: underline;
+}
+
+${sel(b({ isHoverable: true }))}[vne-cursor-target],
+.TextHoverParent[vne-cursor-target] ${sel(b())},
+.TextHoverSibling[vne-cursor-target] ~ ${sel(b())} {
+  color: var(--vne-text-color-active);
+}
+
+${sel(b({ align: "center" }))} {
+  text-align: center;
+}
+
+${sel(b({ align: "right" }))} {
+  text-align: right;
+}
+
+${sel(b({ isInlineBlock: true }))} {
+  display: inline-block;
+}
+`;
+injectStyles(CSS);
+//# sourceMappingURL=Text.styles.js.map

package/dist/Text.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.styles.js","sourceRoot":"","sources":["../src/Text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC;AAE5B,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;;;;EAWR,GAAG,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;;;;EAI5B,GAAG,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;;;qBAGT,YAAY,CAAC,EAAE,CAAC;;;EAGnC,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;;;;EAI1B,GAAG,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;;;;EAI3B,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;sCACO,GAAG,CAAC,CAAC,EAAE,CAAC;yCACL,GAAG,CAAC,CAAC,EAAE,CAAC;;;;EAI/C,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;;;;EAI3B,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;;;;EAI1B,GAAG,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;;;CAGhC,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}

package/package.json

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

@@ -0,0 +1,41 @@
+import { renderWithVneWrap, VneWrap } from "@vnejs/uis.react";
+
+import { Text, Flex } from "@vnejs/uis.react";
+
+export const Common = {
+  args: {
+    ...VneWrap.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.",
+    whiteSpace: Text.WHITESPACES.WRAP,
+    size: 48,
+    font: "Arial",
+
+    isSelected: false,
+    isActive: false,
+    isDisabled: false,
+  },
+};
+
+export default {
+  title: "Primitives/Text",
+  render: renderWithVneWrap(({ ...args }) => (
+    <Flex
+      align={Flex.ALIGN.CENTER}
+      justify={Flex.JUSTIFY.CENTER}
+      direction={Flex.DIRECTION.COLUMN}
+      height={2160}
+    >
+      <Text {...args} />
+    </Flex>
+  )),
+  argTypes: {
+    // engine
+    ...VneWrap.ARGS,
+
+    // Text
+    size: { control: { type: "number", min: 24, max: 180, step: 6 } },
+    whiteSpace: { control: { type: "select" }, options: Object.values(Text.WHITESPACES) },
+    font: { control: { type: "select" }, options: ["Times New Roman", "Arial", "monospace"] },
+  },
+};

package/src/Text.styles.ts

@@ -0,0 +1,54 @@
+import { cn, getVneLength, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("Text");
+
+const CSS = `
+${sel(b())} {
+  --vne-text-color-disabled: var(--vne-color-disabled, rgba(255, 255, 255, 30%));
+  --vne-text-color-primary: var(--vne-color-primary, rgba(255, 255, 255, 60%));
+  --vne-text-color-selected: var(--vne-color-selected, rgba(255, 255, 255, 75%));
+  --vne-text-color-active: var(--vne-color-active, rgba(255, 255, 255, 90%));
+  display: block;
+  user-select: none;
+  font-weight: 400;
+  color: var(--vne-text-color-primary);
+}
+
+${sel(b({ isDisabled: true }))} {
+  color: var(--vne-text-color-disabled);
+}
+
+${sel(b({ isSelected: true }))} {
+  color: var(--vne-text-color-selected);
+  font-weight: bold;
+  text-shadow: 0 0 ${getVneLength(12)} rgba(255, 255, 255, 90%);
+}
+
+${sel(b({ isActive: true }))} {
+  color: var(--vne-text-color-active);
+}
+
+${sel(b({ isCurrent: true }))} {
+  text-decoration: underline;
+}
+
+${sel(b({ isHoverable: true }))}[vne-cursor-target],
+.TextHoverParent[vne-cursor-target] ${sel(b())},
+.TextHoverSibling[vne-cursor-target] ~ ${sel(b())} {
+  color: var(--vne-text-color-active);
+}
+
+${sel(b({ align: "center" }))} {
+  text-align: center;
+}
+
+${sel(b({ align: "right" }))} {
+  text-align: right;
+}
+
+${sel(b({ isInlineBlock: true }))} {
+  display: inline-block;
+}
+`;
+
+injectStyles(CSS);

package/src/Text.tsx

@@ -0,0 +1,87 @@
+import { useCallback, useMemo } from "react";
+
+import { getVneLength } from "@vnejs/uis.utils";
+
+import { b } from "./Text.styles.js";
+
+export const Text = ({
+  isActive = false,
+  isSelected = false,
+  isHoverable = false,
+  isDisabled = false,
+  isCurrent = false,
+  isNotRender = false,
+  isInlineBlock = false,
+  text = "",
+  textPrefix = "",
+  color = "",
+  colorPrefix = "",
+  size = 96,
+  className = "",
+  padding = 0,
+  width = 0,
+  marginTop = 0,
+  marginRight = 0,
+  font = "",
+  whiteSpace = "",
+  align = "",
+  weight = null,
+  weightPrefix = null,
+  opacity = null,
+  transition = 300,
+  onClick,
+  value,
+}) => {
+  const style = useMemo(() => {
+    const result: Record<string, any> = {};
+
+    if (font) result.fontFamily = font;
+    if (color) result.color = color;
+    if (weight) result.fontWeight = weight;
+    if (whiteSpace) result.whiteSpace = whiteSpace;
+    if (transition !== null) result.transition = transition ? `${transition}ms` : "none";
+    if (opacity !== null) result.opacity = opacity;
+
+    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 (padding) result.padding = getVneLength(padding);
+    if (width) result.width = getVneLength(width);
+    if (marginTop) result.marginTop = getVneLength(marginTop);
+    if (marginRight) result.marginRight = getVneLength(marginRight);
+
+    return result;
+  }, [font, color, whiteSpace, size, weight, padding, marginTop, opacity, width, transition]);
+
+  const stylePrefix = useMemo(() => {
+    const result: Record<string, any> = {};
+
+    if (colorPrefix) result.color = colorPrefix;
+    if (weightPrefix) result.fontWeight = weightPrefix;
+
+    return result;
+  }, [colorPrefix, weightPrefix]);
+
+  const onClickHandler = useCallback(() => !isDisabled && onClick && onClick(value), [value, onClick, isDisabled]);
+
+  const isRealHovered = useMemo(() => isHoverable && !isDisabled, [isHoverable, isDisabled]);
+
+  if (isNotRender) return null;
+
+  return (
+    <div
+      className={b({ isActive, isHoverable: isRealHovered, isSelected, isDisabled, isCurrent, isInlineBlock, align }, [className])}
+      style={style}
+      onClick={onClickHandler}
+      vne-cursor-type={isRealHovered ? "pointer" : ""}
+    >
+      {textPrefix && <span style={stylePrefix}>{textPrefix}</span>}
+      {text}
+    </div>
+  );
+};
+
+Text.WHITESPACES = { WRAP: "wrap", NOWRAP: "nowrap" };
+Text.ALIGNS = { LEFT: "left", CENTER: "center", RIGHT: "right" };
+Text.WEIGHT = { BOLD: "bold", NORMAL: "normal", BOLDER: "bolder", LIGHTER: "lighter" };

package/src/index.ts

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

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

@@ -1,40 +0,0 @@
-.Text
-    --vne-text-color-disabled: var(--vne-color-disabled, rgba(255, 255, 255, 30%));
-    --vne-text-color-primary: var(--vne-color-primary, rgba(255, 255, 255, 60%));
-    --vne-text-color-selected: var(--vne-color-selected, rgba(255, 255, 255, 75%));
-    --vne-text-color-active: var(--vne-color-active, rgba(255, 255, 255, 90%));
-
-    display: block
-    user-select: none
-    font-weight: 400
-
-    color: var(--vne-text-color-primary)
-
-    &_isDisabled
-      color: var(--vne-text-color-disabled);
-
-    &_isSelected
-      color: var(--vne-text-color-selected);
-
-    &_isActive
-      color: var(--vne-text-color-active);
-
-    &_isCurrent
-      text-decoration: underline
-
-    &_isSelected
-      font-weight: bold
-      text-shadow: 0 0 s('round(down, min(calc(12 * 100vw / 3840), calc(12 * 100vh / 2160)), 1px)') rgba(255, 255, 255, 90%)
-
-    &_isHoverable[vne-cursor-target],
-    .TextHoverParent[vne-cursor-target] &,
-    .TextHoverSibling[vne-cursor-target] ~ &
-      color: var(--vne-text-color-active);
-
-    &_align_center
-      text-align: center
-    &_align_right
-      text-align: right
-
-    &_isInlineBlock
-      display: inline-block