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

package/package.json

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

@@ -0,0 +1,79 @@
+import { useMemo, useState } from "react";
+
+import { renderWithVneWrap, VneWrap } from "@vnejs/uis.react";
+
+import { Flex } from "@vnejs/uis.react";
+
+import { TextControls } from "./TextControls";
+
+export const Common = {
+  args: {
+    ...VneWrap.DEFAULT_ARGS,
+
+    textsCount: 8,
+
+    gap: 96,
+    textSize: 48,
+
+    width: 600,
+    height: 600,
+
+    direction: Flex.DIRECTION.ROW,
+    align: Flex.ALIGN.START,
+    justify: Flex.JUSTIFY.CENTER,
+
+    withWrap: false,
+  },
+};
+
+const BUTTONS = ["STORY", "AUTO", "SKIP", "HIDE", "SAVE", "LOAD", "SETTINGS", "MENU"];
+
+export default {
+  title: "Base/TextControls",
+  render: renderWithVneWrap(
+    ({ textsCount, textSize, gap, withWrap, direction, align, justify, width, height }) => {
+      const textProps = useMemo(() => ({ size: textSize }), [textSize]);
+      const flexProps = useMemo(() => ({ direction, align, justify, width, height, gap, withWrap }), [direction, align, justify, width, height, gap, withWrap]);
+
+      const [selectedIndex, setSelectedIndex] = useState(0);
+
+      const texts = useMemo(
+        () => BUTTONS.map((text, i) => ({ text, onClick: () => setSelectedIndex(i) })).slice(0, textsCount),
+        [textsCount, setSelectedIndex],
+      );
+
+      return (
+        <Flex
+          align={Flex.ALIGN.CENTER}
+          justify={Flex.JUSTIFY.CENTER}
+          height={2160}
+        >
+          <TextControls
+            texts={texts}
+            textProps={textProps}
+            flexProps={flexProps}
+            selectedIndex={selectedIndex}
+          />
+        </Flex>
+      );
+    },
+    { flexCentered: true },
+  ),
+  argTypes: {
+    // engine
+    ...VneWrap.ARGS,
+
+    textsCount: { control: { type: "number", min: 1, max: 8, step: 1 } },
+
+    // Flex
+    gap: { control: { type: "number", min: 0, max: 144, step: 12 } },
+    direction: { control: { type: "select" }, options: Object.values(Flex.DIRECTION) },
+    align: { control: { type: "select" }, options: Object.values(Flex.ALIGN) },
+    justify: { control: { type: "select" }, options: Object.values(Flex.JUSTIFY) },
+    width: { control: { type: "number", min: 0, max: 1800, step: 60 } },
+    height: { control: { type: "number", min: 0, max: 1800, step: 60 } },
+
+    // Text
+    textSize: { control: { type: "number", min: 24, max: 180, step: 12 } },
+  },
+};

package/src/TextControls.tsx

@@ -0,0 +1,76 @@
+import { useCallback } from "react";
+
+import { Text, Flex, Scrollbar } from "@vnejs/uis.react";
+
+export const TextControls = ({
+  texts = [],
+  selectedIndex = -1,
+  textProps = {},
+  flexProps = {},
+  textSize = 60,
+  textWidth = null,
+  textAlign = null,
+  textMarginTop = null,
+  flexGap = 60,
+  flexGapVertical = 0,
+  flexGapHorizontal = 0,
+  flexDirection = Flex.DIRECTION.ROW,
+  flexAlign = null,
+  flexJustify = null,
+  flexWithWrap = null,
+  wrapWidth = null,
+  wrapHeight = null,
+  wrapClassName,
+  withScrollbar = false,
+  scrollbarWrapRef = null,
+  onClick,
+  value,
+}) => {
+  const renderTexts = useCallback(
+    () =>
+      texts.map((textInfo, i) => (
+        <Text
+          key={i}
+          size={textSize}
+          width={textWidth}
+          align={textAlign}
+          onClick={onClick}
+          isSelected={selectedIndex === i}
+          isCurrent={value !== undefined && value === textInfo?.value}
+          isHoverable={true}
+          marginTop={i === 0 ? null : textMarginTop}
+          {...textProps}
+          {...textInfo}
+        />
+      )),
+    [texts, textProps, selectedIndex, onClick, value],
+  );
+
+  return withScrollbar ? (
+    <Scrollbar
+      className={wrapClassName}
+      width={wrapWidth}
+      height={wrapHeight}
+      scrollTo={selectedIndex}
+      wrapRef={scrollbarWrapRef}
+    >
+      {renderTexts()}
+    </Scrollbar>
+  ) : (
+    <Flex
+      className={wrapClassName}
+      gap={flexGap}
+      gapHorizontal={flexGapHorizontal}
+      gapVertical={flexGapVertical}
+      align={flexAlign}
+      justify={flexJustify}
+      direction={flexDirection}
+      withWrap={flexWithWrap}
+      width={wrapWidth}
+      height={wrapHeight}
+      {...flexProps}
+    >
+      {renderTexts()}
+    </Flex>
+  );
+};

package/src/index.ts

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

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