@vnejs/uis.react.sprite 0.1.3 → 0.1.4

package/package.json

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

@@ -0,0 +1,93 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { renderWithVneWrap, DEFAULT_ARGS, ARGS } from "@vnejs/uis.react";
+
+import { Sprite } from "@vnejs/uis.react";
+
+export const Common = {
+  args: {
+    ...DEFAULT_ARGS,
+
+    transition: 500,
+
+    isPose1: false,
+    isPose2: false,
+  },
+};
+
+const BOX_PROPS = { top: "100%", left: "50%", scale: 1, translateX: -50, translateY: -100, transition: 0 };
+const SPRITE_PREFIX = "./speaker/original-4k/co";
+
+export default {
+  title: "Base/Sprite/Change",
+  render: renderWithVneWrap(({ isPose1, isPose2, transition }) => {
+    const [spriteTransition, setSpriteTransition] = useState(0);
+    const [spriteType, setSpriteType] = useState(1);
+
+    const setNewSpriteType = useCallback(
+      (cond, transition, newType) => {
+        if (!cond) return;
+
+        setSpriteTransition(0);
+
+        requestAnimationFrame(() => {
+          setSpriteTransition(transition);
+          setSpriteType(newType);
+          setTimeout(() => setSpriteTransition(0), transition);
+        });
+      },
+      [setSpriteTransition, setSpriteType],
+    );
+
+    useEffect(() => setNewSpriteType(isPose1, transition, 1), [isPose1, transition, setNewSpriteType]);
+    useEffect(() => setNewSpriteType(isPose2, transition, 2), [isPose2, transition, setNewSpriteType]);
+
+    const [spritePose, spriteWear, spriteHair, spriteEmotion] = useMemo(() => {
+      if (spriteType === 1) return ["default", "laboratory_suit", "normal", "default"];
+      return ["hand_on_shoulder_spead_legs", "medical_shirt", "wild_hair", "anger"];
+    }, [spriteType]);
+
+    const parts = useMemo(
+      () => [
+        { src: `${SPRITE_PREFIX}/${spritePose}/hair_back/${spriteHair}.png` },
+        { src: `${SPRITE_PREFIX}/${spritePose}/index.png` },
+        {
+          src: [
+            { url: `${SPRITE_PREFIX}/${spritePose}/eyes/${spriteEmotion}/opened.png`, duration: 3000, randomDuration: 1000, transition: 500 },
+            { url: `${SPRITE_PREFIX}/${spritePose}/eyes/${spriteEmotion}/closed.png`, duration: 100, randomDuration: 50, transition: 200 },
+            { url: `${SPRITE_PREFIX}/${spritePose}/eyes/${spriteEmotion}/opened.png`, duration: 500, randomDuration: 500, transition: 500 },
+            { url: `${SPRITE_PREFIX}/${spritePose}/eyes/${spriteEmotion}/closed.png`, duration: 100, randomDuration: 50, transition: 200 },
+          ],
+          isSwitchDisabled: false,
+        },
+        { src: `${SPRITE_PREFIX}/${spritePose}/hair_front/${spriteHair}.png` },
+        {
+          src: [
+            { url: `${SPRITE_PREFIX}/${spritePose}/mouth/${spriteEmotion}/closed.png`, duration: 100, transition: 200 },
+            { url: `${SPRITE_PREFIX}/${spritePose}/mouth/${spriteEmotion}/opened.png`, duration: 100, transition: 200 },
+          ],
+          isSwitchDisabled: true,
+        },
+        { src: `${SPRITE_PREFIX}/${spritePose}/wear/${spriteWear}.png` },
+      ],
+      [spritePose, spriteWear, spriteHair, spriteEmotion],
+    );
+    const indexSrc = useMemo(() => `${SPRITE_PREFIX}/${spritePose}/index.png`, [spritePose]);
+
+    const partsProps = useMemo(() => ({ transition: spriteTransition }), [spriteTransition]);
+
+    return (
+      <Sprite
+        boxProps={BOX_PROPS}
+        partsProps={partsProps}
+        parts={parts}
+        indexSrc={indexSrc}
+      />
+    );
+  }),
+  argTypes: {
+    ...ARGS,
+
+    transition: { control: { type: "number", min: 0, max: 1000, step: 50 } },
+  },
+};

package/src/Sprite.default.stories.tsx

@@ -0,0 +1,112 @@
+import { useMemo } from "react";
+
+import { renderWithVneWrap, ARGS, DEFAULT_ARGS } from "@vnejs/uis.react";
+
+import { Sprite } from "@vnejs/uis.react";
+
+export const Common = {
+  args: {
+    ...DEFAULT_ARGS,
+
+    spritePose: "default",
+    spriteWear: "laboratory_suit",
+    spriteHair: "normal",
+    spriteIsBlinking: false,
+    spriteIsSpeaking: false,
+
+    boxTransition: 0,
+    partsTransition: 0,
+
+    top: 100,
+    left: 50,
+    scale: 1,
+    translateX: -50,
+    translateY: -100,
+  },
+};
+
+export default {
+  title: "Base/Sprite/Default",
+  render: renderWithVneWrap(
+    ({
+      translateX,
+      translateY,
+      top,
+      left,
+      scale,
+      boxTransition,
+      partsTransition,
+
+      spriteIsBlinking,
+      spriteIsSpeaking,
+      spritePose,
+      spriteHair,
+      spriteWear,
+    }) => {
+      const parts = useMemo(
+        () => [
+          { src: `./speaker/original-4k/co/${spritePose}/hair_back/${spriteHair}.png` },
+          { src: `./speaker/original-4k/co/${spritePose}/index.png` },
+          {
+            src: [
+              { url: `./speaker/original-4k/co/${spritePose}/eyes/default/opened.png`, duration: 3000, randomDuration: 1000, transition: 300 },
+              { url: `./speaker/original-4k/co/${spritePose}/eyes/default/closed.png`, duration: 100, randomDuration: 0, transition: 100 },
+              { url: `./speaker/original-4k/co/${spritePose}/eyes/default/opened.png`, duration: 500, randomDuration: 500, transition: 300 },
+              { url: `./speaker/original-4k/co/${spritePose}/eyes/default/closed.png`, duration: 100, randomDuration: 0, transition: 100 },
+            ],
+            isSwitchDisabled: !spriteIsBlinking,
+          },
+          { src: `./speaker/original-4k/co/${spritePose}/hair_front/${spriteHair}.png` },
+          {
+            src: [
+              { url: `./speaker/original-4k/co/${spritePose}/mouth/default/closed.png`, duration: 100, transition: 200 },
+              { url: `./speaker/original-4k/co/${spritePose}/mouth/default/opened.png`, duration: 100, transition: 200 },
+            ],
+            isSwitchDisabled: !spriteIsSpeaking,
+          },
+          { src: `./speaker/original-4k/co/${spritePose}/wear/${spriteWear}.png` },
+        ],
+        [spriteIsBlinking, spriteIsSpeaking, spritePose, spriteWear, spriteHair],
+      );
+      const indexSrc = useMemo(() => `./speaker/original-4k/co/${spritePose}/index.png`, [spritePose]);
+
+      const boxProps = useMemo(
+        () => ({ top: `${top}%`, left: `${left}%`, scale, translateX, translateY, transition: boxTransition }),
+        [top, left, scale, translateX, translateY, boxTransition],
+      );
+
+      const partsProps = useMemo(() => ({ transition: partsTransition }), [partsTransition]);
+
+      return (
+        <Sprite
+          boxProps={boxProps}
+          partsProps={partsProps}
+          parts={parts}
+          indexSrc={indexSrc}
+        />
+      );
+    },
+  ),
+  argTypes: {
+    // engine
+    ...ARGS,
+
+    spritePose: {
+      control: { type: "select" },
+      options: ["default", "hand_on_shoulder_spead_legs", "head_to_shoulders"],
+    },
+    spriteWear: { control: { type: "select" }, options: ["laboratory_suit", "costume", "medical_shirt"] },
+    spriteHair: { control: { type: "select" }, options: ["normal", "wild_hair"] },
+
+    // Sprite
+    partsTransition: { control: { type: "number", min: 0, max: 1000, step: 50 } },
+
+    // PositionBox
+    boxTransition: { control: { type: "number", min: 0, max: 1000, step: 50 } },
+    top: { control: { type: "number", min: 0, max: 100, step: 5 } },
+    left: { control: { type: "number", min: 0, max: 100, step: 5 } },
+    scale: { control: { type: "number", min: 0.1, max: 2, step: 0.1 } },
+    translateX: { control: { type: "number", min: -100, max: 100, step: 1 } },
+    translateY: { control: { type: "number", min: -100, max: 100, step: 1 } },
+  },
+};

package/src/Sprite.move.stories.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { renderWithVneWrap, VneWrap } from "@vnejs/uis.react";
+
+import { Sprite } from "@vnejs/uis.react";
+
+const LEFT_X = 480 * 2;
+const RIGHT_X = 480 * 6;
+
+export const Common = {
+  args: {
+    ...VneWrap.DEFAULT_ARGS,
+
+    transition: 500,
+
+    isHideRight: false,
+    isShowLeft: false,
+    isPose: false,
+  },
+};
+
+export default {
+  title: "Base/Sprite/Move",
+  render: renderWithVneWrap(({ isHideRight, isShowLeft, isPose, transition }) => {
+    const [boxTransition, setBoxTransition] = useState(0);
+    const [boxOpacity, setBoxOpacity] = useState(1);
+    const [boxTranslateXShift, setBoxTranslateXShift] = useState(0);
+
+    const [boxX, setBoxX] = useState(LEFT_X);
+
+    useEffect(() => {
+      if (!isHideRight) return;
+
+      setBoxTransition(0);
+      setBoxTranslateXShift(0);
+      setBoxOpacity(1);
+
+      requestAnimationFrame(() => {
+        setBoxTransition(transition);
+        setBoxTranslateXShift(25);
+        setBoxOpacity(0);
+
+        setTimeout(() => {
+          setBoxTransition(0);
+        }, transition);
+      });
+    }, [isHideRight, transition]);
+
+    useEffect(() => {
+      if (!isShowLeft) return;
+
+      setBoxTransition(0);
+      setBoxTranslateXShift(-25);
+      setBoxOpacity(0);
+
+      requestAnimationFrame(() => {
+        setBoxTransition(transition);
+        setBoxTranslateXShift(0);
+        setBoxOpacity(1);
+
+        setTimeout(() => {
+          setBoxTransition(0);
+        }, transition);
+      });
+    }, [isShowLeft, transition]);
+
+    const spritePose = useMemo(() => (isPose ? "default" : "hand_on_shoulder_spead_legs"), [isPose]);
+
+    useEffect(() => setBoxX(isPose ? LEFT_X : RIGHT_X), [isPose]);
+
+    const parts = useMemo(
+      () => [
+        { src: `./speaker/original-4k/co/${spritePose}/hair_back/normal.png` },
+        { src: `./speaker/original-4k/co/${spritePose}/index.png` },
+        {
+          src: [
+            { url: `./speaker/original-4k/co/${spritePose}/eyes/default/opened.png`, duration: 3000, randomDuration: 1000, transition: 300 },
+            { url: `./speaker/original-4k/co/${spritePose}/eyes/default/closed.png`, duration: 100, randomDuration: 0, transition: 100 },
+            { url: `./speaker/original-4k/co/${spritePose}/eyes/default/opened.png`, duration: 500, randomDuration: 500, transition: 300 },
+            { url: `./speaker/original-4k/co/${spritePose}/eyes/default/closed.png`, duration: 100, randomDuration: 0, transition: 100 },
+          ],
+          isSwitchDisabled: false,
+        },
+        { src: `./speaker/original-4k/co/${spritePose}/hair_front/normal.png` },
+        {
+          src: [
+            { url: `./speaker/original-4k/co/${spritePose}/mouth/default/closed.png`, duration: 100, transition: 200 },
+            { url: `./speaker/original-4k/co/${spritePose}/mouth/default/opened.png`, duration: 100, transition: 200 },
+          ],
+          isSwitchDisabled: true,
+        },
+        { src: `./speaker/original-4k/co/${spritePose}/wear/medical_shirt.png` },
+      ],
+      [spritePose],
+    );
+    const indexSrc = useMemo(() => `./speaker/original-4k/co/${spritePose}/index.png`, [spritePose]);
+
+    const boxProps = useMemo(
+      () => ({
+        top: 2160,
+        left: boxX,
+        scale: 1,
+        translateX: -50 + boxTranslateXShift,
+        translateY: -100,
+        transition: boxTransition,
+        opacity: boxOpacity,
+      }),
+      [boxTransition, boxTranslateXShift, boxOpacity, boxX],
+    );
+
+    return (
+      <Sprite
+        boxProps={boxProps}
+        parts={parts}
+        indexSrc={indexSrc}
+      />
+    );
+  }),
+  argTypes: {
+    // engine
+    ...VneWrap.ARGS,
+
+    transition: { control: { type: "number", min: 0, max: 1000, step: 50 } },
+  },
+};

package/src/Sprite.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+import { Image, PositionBox } from "@vnejs/uis.react";
+
+const POSE_STYLE: Record<string, any> = { opacity: 0, visibility: "hidden" };
+
+export const Sprite = ({ parts = [], indexSrc = "", boxProps = {}, partsProps = {}, transition = null, transitionBox = null }) => {
+  const realBoxProps = useMemo(() => {
+    const result: Record<string, any> = { ...boxProps };
+
+    if (transitionBox !== null) result.transition = transitionBox;
+
+    return result;
+  }, [boxProps, transitionBox]);
+
+  return (
+    <PositionBox {...realBoxProps}>
+      {parts.map((props, i) => (
+        <Image
+          key={i}
+          {...props}
+          {...partsProps}
+          transition={transition}
+        />
+      ))}
+      <img
+        src={indexSrc}
+        style={POSE_STYLE}
+      />
+    </PositionBox>
+  );
+};

package/src/index.ts

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

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