@vnejs/uis.react.button-controls 0.1.3 → 0.1.5

package/package.json

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

@@ -0,0 +1,104 @@
+import { useMemo } from "react";
+
+import { VneWrap } from "@vnejs/uis.react";
+
+import { Flex } from "@vnejs/uis.react";
+
+import { ButtonControls } from "./ButtonControls";
+
+export const Common = {
+  args: {
+    vneHeight: 720,
+    count: 3,
+
+    gap: 48,
+
+    width: 1200,
+    height: 600,
+
+    activeIndex: 1,
+    direction: Flex.DIRECTION.ROW,
+    align: Flex.ALIGN.START,
+    justify: Flex.JUSTIFY.CENTER,
+
+    padding: 12,
+    textSize: 48,
+    borderWidth: 6,
+    buttonWidth: 300,
+  },
+};
+
+export default {
+  title: "Base/ButtonControls",
+  render: ({
+    vneHeight,
+    count,
+    // buttonControls
+    activeIndex,
+    // flex
+    gap,
+    direction,
+    align,
+    justify,
+    width,
+    height,
+    // button
+    padding,
+    textSize,
+    borderWidth,
+    buttonWidth,
+  }) => {
+    const buttons = useMemo(
+      () =>
+        [
+          { text: "1280 X 720", onClick: () => alert(1) },
+          { text: "1920 X 1080", onClick: () => alert(2) },
+          { text: "3840 X 2160", onClick: () => alert(3) },
+        ].slice(0, count),
+      [count],
+    );
+
+    const flexProps = useMemo(() => ({ direction, align, justify, width, height, gap }), [direction, align, justify, width, height, gap]);
+
+    const buttonProps = useMemo(() => ({ padding, textSize, borderWidth, width: buttonWidth, isRounded: true }), [buttonWidth, padding, textSize, borderWidth]);
+
+    return (
+      <VneWrap height={vneHeight}>
+        <Flex
+          align={Flex.ALIGN.CENTER}
+          justify={Flex.JUSTIFY.CENTER}
+          height={2160}
+        >
+          <ButtonControls
+            flexProps={flexProps}
+            buttonProps={buttonProps}
+            buttons={buttons}
+            activeIndex={activeIndex}
+          />
+        </Flex>
+      </VneWrap>
+    );
+  },
+  argTypes: {
+    // engine
+    vneHeight: { control: { type: "number", min: 180, max: 2160, step: 45 } },
+    count: { control: { type: "number", min: 1, max: 3, 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 } },
+
+    // Button
+    textSize: { control: { type: "number", min: 24, max: 180, step: 12 } },
+    padding: { control: { type: "number", min: 0, max: 60, step: 12 } },
+    borderWidth: { control: { type: "number", min: 0, max: 12, step: 6 } },
+    buttonWidth: { control: { type: "number", min: 0, max: 1800, step: 60 } },
+
+    // TextControls
+    activeIndex: { control: { type: "number", min: -1, max: 2, step: 1 } },
+  },
+};

package/src/ButtonControls.tsx

@@ -0,0 +1,33 @@
+import { Button, Flex } from "@vnejs/uis.react";
+
+export const ButtonControls = ({
+  buttons = [],
+  activeIndex = -1,
+  buttonIsRounded = true,
+  buttonBorderWidth = 6,
+  buttonPaddingVertical = 12,
+  buttonPaddingHorizontal = 60,
+  flexGap = 24,
+  flexProps = {},
+  buttonProps = {},
+}) => {
+  return (
+    <Flex
+      gap={flexGap}
+      {...flexProps}
+    >
+      {buttons.map((buttonInfo, i) => (
+        <Button
+          key={i}
+          isRounded={buttonIsRounded}
+          borderWidth={buttonBorderWidth}
+          paddingVertical={buttonPaddingVertical}
+          paddingHorizontal={buttonPaddingHorizontal}
+          {...buttonInfo}
+          {...buttonProps}
+          isActive={activeIndex === i}
+        />
+      ))}
+    </Flex>
+  );
+};

package/src/index.ts

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

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