@vnejs/uis.react.range-with-text 0.1.3 → 0.1.4

package/package.json

@@ -1,32 +1,26 @@
 {
   "name": "@vnejs/uis.react.range-with-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/RangeWithText.stories.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+
+import { renderWithVneWrap, VneWrap } from "@vnejs/uis.react";
+
+import { RangeWithText } from "@vnejs/uis.react";
+
+export const Common = {
+  args: {
+    ...VneWrap.DEFAULT_ARGS,
+
+    gap: 120,
+    isSelected: false,
+
+    textWidth: 240,
+    textSize: 72,
+    rangeWidth: 1200,
+    rangeHeight: 48,
+    valuePostfix: "x",
+  },
+};
+
+const VALUE_INFO = {
+  ["%"]: { defaultValue: 50, min: 0, max: 100, step: 1 },
+  ["ms"]: { defaultValue: 500, min: 0, max: 2000, step: 20 },
+  ["s"]: { defaultValue: 0.5, min: 0, max: 1.5, step: 0.05 },
+  ["x"]: { defaultValue: 1, min: 0.5, max: 1.5, step: 0.05 },
+};
+
+export default {
+  title: "Base/RangeWithText",
+  render: renderWithVneWrap(({ valuePostfix, ...args }) => {
+    const [value, setValue] = useState(0);
+
+    useEffect(() => setValue(VALUE_INFO[valuePostfix].defaultValue), [valuePostfix, setValue]);
+
+    return (
+      <RangeWithText
+        value={value}
+        valuePostfix={valuePostfix}
+        onChange={setValue}
+        {...args}
+        {...VALUE_INFO[valuePostfix]}
+      />
+    );
+  }),
+  argTypes: {
+    // engine
+    ...VneWrap.ARGS,
+
+    gap: { control: { type: "number", min: 12, max: 240, step: 12 } },
+
+    textWidth: { control: { type: "number", min: 360, max: 2400, step: 60 } },
+    textSize: { control: { type: "number", min: 36, max: 120, step: 12 } },
+    rangeWidth: { control: { type: "number", min: 600, max: 1800, step: 60 } },
+    rangeHeight: { control: { type: "number", min: 24, max: 120, step: 12 } },
+
+    valuePostfix: { control: { type: "select" }, options: Object.keys(VALUE_INFO) },
+  },
+};

package/src/RangeWithText.tsx

@@ -0,0 +1,49 @@
+import { useMemo } from "react";
+
+import { Text, Flex, Range } from "@vnejs/uis.react";
+
+export const RangeWithText = ({
+  isSelected = false,
+  gap = 120,
+  textSize = 72,
+  textWidth = 240,
+  rangeWidth = 1200,
+  rangeHeight = 48,
+  min,
+  max,
+  step,
+  value,
+  valuePostfix = "",
+  valueMap = null,
+  onChange,
+}) => {
+  const valueText = useMemo(() => (valueMap ? valueMap(value) : value), [valueMap, value]);
+
+  return (
+    <Flex
+      align={Flex.ALIGN.CENTER}
+      justify={Flex.JUSTIFY.CENTER}
+      direction={Flex.DIRECTION.ROW}
+      gap={gap}
+    >
+      <Range
+        className="TextHoverSibling"
+        isSelected={isSelected}
+        width={rangeWidth}
+        height={rangeHeight}
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={onChange}
+      />
+      <Text
+        text={`${valueText}${valuePostfix}`}
+        width={textWidth}
+        isSelected={isSelected}
+        size={textSize}
+        align={Text.ALIGNS.RIGHT}
+      />
+    </Flex>
+  );
+};

package/src/index.ts

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

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