chore: integrate with sb

Author: MrKou47

.eslintrc.js

@@ -1,6 +1,10 @@
 module.exports = {
   parser: "@typescript-eslint/parser", // Eslint TypeScript Parser
-  extends: ["prettier/@typescript-eslint", "plugin:prettier/recommended"],
+  extends: [
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended"
+  ],
   plugins: ["@typescript-eslint"],
   parserOptions: {
     ecmaVersion: 2019,

.gitignore

@@ -25,4 +25,6 @@ stats.html
 tsconfig.tsbuildinfo
 oasis-npm
 api
-miniprogram.js
+miniprogram.js
+*storybook.log
+storybook-static

.storybook/decorators/withCanvas.ts

@@ -0,0 +1,59 @@
+import { WebGLEngine, type WebGLEngineConfiguration } from "@galacean/engine";
+import { makeDecorator, useEffect } from 'storybook/preview-api';
+
+export interface CanvasOptions {
+  width?: number;
+  height?: number;
+  engineOptions?: Omit<WebGLEngineConfiguration, 'canvas'>
+}
+
+export const withCanvas = makeDecorator({
+  name: 'withCanvas',
+  parameterName: 'canvas',
+  wrapper: (storyFn, context, { parameters = {} }) => {
+    const container = document.createElement('div');
+    container.style.width = '100vw';
+    container.style.height = '100vh';
+    container.style.position = 'relative';
+    container.style.overflow = 'hidden';
+    
+    const canvas = document.createElement('canvas');
+    canvas.id = 'canvas';
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    container.appendChild(canvas);
+    
+    const canvasOptions = context.parameters.canvas || {};
+    
+    const enginePromise = WebGLEngine.create({ 
+      canvas: canvas, 
+      graphicDeviceOptions: {
+        
+      },
+      ...(canvasOptions.engineOptions || {}) 
+    });
+    
+    context.getEngine = () => {
+      return enginePromise;
+    };
+    
+    useEffect(() => {
+      return () => {
+        enginePromise.then(engine => {
+          engine.destroy();
+        });
+      };
+    }, []);
+    
+    const story = storyFn(context);
+    if (typeof story === 'string') {
+      const div = document.createElement('div');
+      div.innerHTML = story;
+      container.appendChild(div);
+    } else if (story instanceof HTMLElement) {
+      container.appendChild(story);
+    }
+    
+    return container;
+  }
+});

.storybook/main.ts

@@ -0,0 +1,28 @@
+
+
+import { join, dirname } from "path";
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+
+/** @type { import('@storybook/html-vite').StorybookConfig } */
+const config = {
+  "stories": [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials")
+  ],
+  "framework": {
+    "name": getAbsolutePath('@storybook/html-vite'),
+    "options": {}
+  },
+  "core": {
+    "disableTelemetry": true
+  }
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,23 @@
+import { withCanvas } from './decorators/withCanvas';
+
+/** @type { import('@storybook/html-vite').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    // Default canvas options
+    canvas: {
+      engineOptions: {
+        // Default engine options here
+      }
+    },
+    layout: 'fullscreen',
+  },
+  decorators: [withCanvas]
+};
+
+export default preview;

package.json

@@ -21,15 +21,21 @@
     "build": "rollup -c",
     "b:all": "pnpm run b:types && cross-env BUILD_TYPE=ALL rollup -c",
     "clean": "pnpm -r exec rm -rf dist && pnpm -r exec rm -rf types",
-    "release": "bumpp -r"
+    "release": "bumpp -r",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@galacean/engine": "^1.5.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-inject": "^5.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
+    "@storybook/addon-essentials": "9.0.0-alpha.12",
+    "@storybook/addon-links": "^9.0.11",
+    "@storybook/html-vite": "^9.0.11",
     "@swc/core": "^1.3.49",
     "@swc/helpers": "^0.5.0",
     "@types/chai": "^4.3.3",
@@ -46,6 +52,7 @@
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-storybook": "^9.0.11",
     "floss": "^5.0.1",
     "husky": "^8.0.3",
     "lint-staged": "^10.5.4",
@@ -58,6 +65,7 @@
     "rollup-plugin-modify": "^3.0.0",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-swc3": "^0.8.0",
+    "storybook": "^9.0.11",
     "ts-node": "^10",
     "typescript": "^4.8.3"
   },

stories/BasicScene.stories.ts

@@ -0,0 +1,39 @@
+import { Camera, Entity, MeshRenderer, PrimitiveMesh } from "@galacean/engine";
+
+export default {
+  title: 'Basic Scene',
+  parameters: {
+    canvas: {
+      engineOptions: {
+        // Custom engine options for this story
+      }
+    }
+  }
+};
+
+export const BasicCube = {
+  render: async (args, context) => {
+    // Get the engine using the convenient getEngine function
+    const engine = await context.getEngine();
+    
+    const scene = engine.sceneManager.activeScene;
+    const rootEntity = scene.createRootEntity();
+    
+    // Create camera
+    const cameraEntity = rootEntity.createChild("camera");
+    cameraEntity.transform.setPosition(0, 0, 5);
+    const camera = cameraEntity.addComponent(Camera);
+    camera.enableFrustumCulling = true;
+    
+    // Create cube
+    const cubeEntity = rootEntity.createChild("cube");
+    const renderer = cubeEntity.addComponent(MeshRenderer);
+    renderer.mesh = PrimitiveMesh.createCuboid(engine, 1, 1, 1);
+    
+    // Auto-rotate cube
+    engine.run();
+    
+    // Return empty div as the canvas is already in the container
+    return document.createElement('div');
+  }
+};

stories/Gizmo.stories.ts

@@ -0,0 +1,115 @@
+
+import {
+  Camera,
+  MeshRenderer,
+  PrimitiveMesh,
+  Vector3,
+  WebGLEngine,
+  DirectLight,
+  BlinnPhongMaterial,
+  Color,
+  Layer
+} from "@galacean/engine";
+import { Gizmo, Group, State } from "../packages/gizmo/src";
+
+export default {
+  title: 'Toolkit/Gizmo',
+  parameters: {
+    canvas: {
+      engineOptions: {
+        alpha: true,
+        antialias: true
+      }
+    }
+  },
+  argTypes: {
+    gizmoState: {
+      control: { type: 'select' },
+      options: ['translate', 'rotate', 'scale', 'all'],
+      mapping: {
+        'translate': State.translate,
+        'rotate': State.rotate,
+        'scale': State.scale,
+        'all': State.all
+      },
+      defaultValue: 'translate'
+    },
+    gizmoSize: {
+      control: { type: 'range', min: 0, max: 2, step: 0.1 },
+      defaultValue: 0.8
+    }
+  }
+};
+
+export const GizmoDemo = {
+  args: {
+    gizmoState: "translate",
+    gizmoSize: 0.8
+  },
+  render:async (args, context) => {
+    const engine: WebGLEngine = await context.getEngine();
+
+    engine.canvas.resizeByClientSize(window.devicePixelRatio)
+    
+    const scene = engine.sceneManager.activeScene;
+    const rootEntity = scene.createRootEntity("root");
+
+    const cameraEntity = rootEntity.createChild("camera");
+    cameraEntity.transform.setPosition(0, 2, 5);
+    cameraEntity.transform.lookAt(new Vector3(0, 0, 0));
+    const camera = cameraEntity.addComponent(Camera);
+    camera.enableFrustumCulling = true;
+    
+    const lightEntity = rootEntity.createChild("light");
+    lightEntity.transform.setPosition(1, 3, 2);
+    lightEntity.transform.lookAt(new Vector3(0, 0, 0));
+    const light = lightEntity.addComponent(DirectLight);
+    light.color = new Color(1, 1, 1, 1).toLinear(new Color());
+    
+    const cubeEntity = rootEntity.createChild("cube");
+    const renderer = cubeEntity.addComponent(MeshRenderer);
+    cubeEntity.layer = Layer.Layer22;
+    renderer.mesh = PrimitiveMesh.createCuboid(engine, 1, 1, 1);
+    
+    const material = new BlinnPhongMaterial(engine);
+    material.baseColor = new Color(0.7, 0.3, 0.3, 1.0).toLinear(new Color());
+    renderer.setMaterial(material);
+    
+    const group = new Group();
+
+    
+    const gizmoEntity = rootEntity.createChild("editor-gizmo");
+    gizmoEntity.layer = Layer.Layer31;
+
+    const gizmo = gizmoEntity.addComponent(Gizmo);
+
+    gizmo.init(camera, group);
+
+    group.addEntity(cubeEntity)
+    gizmo.state = args.gizmoState;
+    gizmo.size = args.gizmoSize;
+
+    engine.on("gizmo-move-start", (axis) => {
+      console.log(`Gizmo move started on axis: ${axis}`);
+    });
+    
+    engine.on("gizmo-move-end", () => {
+      console.log("Gizmo move ended");
+    });
+    
+    const updateGizmo = () => {
+      gizmo.state = args.gizmoState;
+      gizmo.size = args.gizmoSize;
+    };
+    
+    context.watch = (newArgs) => {
+      args = newArgs;
+      updateGizmo();
+    };
+    
+    engine.run();
+    
+    return document.createElement('div');
+  }
+};
+