feat(soba): migrate sky and refactor stories

Chau Tran · Chau Tran · commit 307cd41a6fd9 · 2023-05-12T09:57:37.000-05:00
diff --git a/libs/soba/src/abstractions/billboard.stories.ts b/libs/soba/src/abstractions/billboard.stories.ts
@@ -1,10 +1,10 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { Meta, moduleMetadata } from '@storybook/angular';
 import { NgtArgs } from 'angular-three';
 import { NgtsBillboard, NgtsText } from 'angular-three-soba/abstractions';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { BoxGeometry, ConeGeometry, PlaneGeometry } from 'three';
-import { makeRenderFunction, StorybookSetup } from '../setup-canvas';
+import { makeStoryObject, StorybookSetup } from '../setup-canvas';
 
 @Component({
     selector: 'BillboardCone',
@@ -138,17 +138,13 @@ export default {
     decorators: [moduleMetadata({ imports: [StorybookSetup] })],
 } as Meta;
 
-const canvasOptions = {
-    camera: { position: [0, 0, 10] },
-    controls: false,
-};
+const canvasOptions = { camera: { position: [0, 0, 10] }, controls: false };
 
-export const Default: StoryObj = {
-    render: makeRenderFunction(DefaultBillboardStory, canvasOptions),
-    args: { follow: true, lockX: false, lockY: false, lockZ: false },
-};
-
-export const Text: StoryObj = {
-    render: makeRenderFunction(TextBillboardStory, canvasOptions),
-    args: { follow: true, lockX: false, lockY: false, lockZ: false },
-};
+export const Default = makeStoryObject(DefaultBillboardStory, {
+    canvasOptions,
+    argsOptions: { follow: true, lockX: false, lockY: false, lockZ: false },
+});
+export const Text = makeStoryObject(TextBillboardStory, {
+    canvasOptions,
+    argsOptions: { follow: true, lockX: false, lockY: false, lockZ: false },
+});
diff --git a/libs/soba/src/abstractions/line.stories.ts b/libs/soba/src/abstractions/line.stories.ts
@@ -1,5 +1,5 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { Meta, moduleMetadata } from '@storybook/angular';
 import {
     NgtsCatmullRomLine,
     NgtsCubicBezierLine,
@@ -9,7 +9,7 @@ import {
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import * as THREE from 'three';
 import { GeometryUtils } from 'three-stdlib';
-import { makeRenderFunction, StorybookSetup } from '../setup-canvas';
+import { color, makeStoryObject, number, select, StorybookSetup } from '../setup-canvas';
 
 const points = GeometryUtils.hilbert3D(new THREE.Vector3(0), 5).map((p) => [p.x, p.y, p.z]) as [
     number,
@@ -186,30 +186,39 @@ export default {
 
 const canvasOptions = { camera: { position: [0, 0, 17] }, controls: false };
 
-export const Default: StoryObj = {
-    render: makeRenderFunction(DefaultLineStory, canvasOptions),
-    args: { color: 'red', dashed: false, lineWidth: 3 },
-};
-
-export const VertexColors: StoryObj = {
-    render: makeRenderFunction(VertexColorsLineStory, canvasOptions),
-    args: { color: 'red', dashed: false, lineWidth: 3 },
-};
-
-export const CubicBezierLine: StoryObj = {
-    render: makeRenderFunction(CubicBezierLineStory, canvasOptions),
-    args: { ...defaultCubicBezier, color: 'red', lineWidth: 3, dashed: false },
-};
-
-export const QuadraticBezierLine: StoryObj = {
-    render: makeRenderFunction(QuadraticBezierLineStory, canvasOptions),
-    args: { ...defaultQuadraticBezier, color: 'red', lineWidth: 3, dashed: false },
-};
-
-export const CatmullRomLine: StoryObj = {
-    render: makeRenderFunction(CatmullRomLineStory, canvasOptions),
-    args: { ...defaultCatmullRom, color: 'red', lineWidth: 3, dashed: false },
-    argTypes: {
-        curveType: { options: ['centripetal', 'chordal', 'catmullrom'], control: { type: 'select' } },
+export const Default = makeStoryObject(DefaultLineStory, {
+    canvasOptions,
+    argsOptions: { color: color('red'), dashed: false, lineWidth: number(3, { range: true, max: 10, step: 0.5 }) },
+});
+export const VertexColors = makeStoryObject(VertexColorsLineStory, {
+    canvasOptions,
+    argsOptions: { dashed: false, lineWidth: number(3, { range: true, max: 10, step: 0.5 }) },
+});
+export const CubicBezierLine = makeStoryObject(CubicBezierLineStory, {
+    canvasOptions,
+    argsOptions: {
+        ...defaultCubicBezier,
+        color: color('red'),
+        dashed: false,
+        lineWidth: number(3, { range: true, max: 10, step: 0.5 }),
     },
-};
+});
+export const QuadraticBezierLine = makeStoryObject(QuadraticBezierLineStory, {
+    canvasOptions,
+    argsOptions: {
+        ...defaultQuadraticBezier,
+        color: color('red'),
+        dashed: false,
+        lineWidth: number(3, { range: true, max: 10, step: 0.5 }),
+    },
+});
+export const CatmullRomLine = makeStoryObject(CatmullRomLineStory, {
+    canvasOptions,
+    argsOptions: {
+        ...defaultCatmullRom,
+        color: color('red'),
+        dashed: false,
+        lineWidth: number(3, { range: true, max: 10, step: 0.5 }),
+        curveType: select(defaultCatmullRom.curveType, { options: ['centripetal', 'chordal', 'catmullrom'] }),
+    },
+});
diff --git a/libs/soba/src/abstractions/text-3d.stories.ts b/libs/soba/src/abstractions/text-3d.stories.ts
@@ -1,8 +1,8 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { Meta, moduleMetadata } from '@storybook/angular';
 import { NgtsText3D } from 'angular-three-soba/abstractions';
 import { NgtsCenter, NgtsFloat } from 'angular-three-soba/staging';
-import { makeRenderFunction, StorybookSetup } from '../setup-canvas';
+import { makeStoryObject, StorybookSetup } from '../setup-canvas';
 
 @Component({
     standalone: true,
@@ -32,7 +32,7 @@ export default {
     decorators: [moduleMetadata({ imports: [StorybookSetup] })],
 } as Meta;
 
-export const Default: StoryObj = {
-    render: makeRenderFunction(DefaultText3DStory, { camera: { position: [0, 0, 10] } }),
-    args: { text: 'Angular Three' },
-};
+export const Default = makeStoryObject(DefaultText3DStory, {
+    canvasOptions: { camera: { position: [0, 0, 10] } },
+    argsOptions: { text: 'Angular Three' },
+});
diff --git a/libs/soba/src/abstractions/text.stories.ts b/libs/soba/src/abstractions/text.stories.ts
@@ -1,8 +1,8 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { Meta, moduleMetadata } from '@storybook/angular';
 import { NgtsText } from 'angular-three-soba/abstractions';
 import { DoubleSide } from 'three';
-import { makeRenderFunction, StorybookSetup, turn } from '../setup-canvas';
+import { color, makeStoryObject, StorybookSetup, turn } from '../setup-canvas';
 
 @Component({
     standalone: true,
@@ -180,34 +180,23 @@ EXCEPTEUR SINT OCCAECAT CUPIDATAT NON PROIDENT, SUNT IN CULPA QUI OFFICIA DESERU
 
 const canvasOptions = { camera: { position: [0, 0, 200] } };
 
-export const Default: StoryObj = {
-    render: makeRenderFunction(DefaultTextStory, canvasOptions),
-    args: { text: defaultText, color: '#ec2d2d' },
-};
-
-export const Outline: StoryObj = {
-    render: makeRenderFunction(OutlineTextStory, canvasOptions),
-    args: { text: defaultText },
-};
-
-export const Stroke: StoryObj = {
-    render: makeRenderFunction(StrokeTextStory, canvasOptions),
-    args: { text: defaultText },
-};
-
-export const Shadow: StoryObj = {
-    render: makeRenderFunction(ShadowTextStory, canvasOptions),
-    args: { text: defaultText },
-};
-
-export const LTR: StoryObj = {
-    render: makeRenderFunction(LTRTextStory, canvasOptions),
-    args: {
+export const Default = makeStoryObject(DefaultTextStory, {
+    canvasOptions,
+    argsOptions: { text: defaultText, color: color('#ec2d2d') },
+});
+export const Outline = makeStoryObject(OutlineTextStory, { canvasOptions, argsOptions: { text: defaultText } });
+export const Stroke = makeStoryObject(StrokeTextStory, { canvasOptions, argsOptions: { text: defaultText } });
+export const Shadow = makeStoryObject(ShadowTextStory, { canvasOptions, argsOptions: { text: defaultText } });
+export const LTR = makeStoryObject(LTRTextStory, {
+    canvasOptions,
+    argsOptions: {
         text: `يولد جميع الناس أحرارًا متساوين في الكرامة والحقوق. وقد وهبوا عقلاً وضميرًا وعليهم أن يعامل بعضهم بعضًا بروح الإخاء.`,
     },
-};
-
-export const CustomMaterial: StoryObj = {
-    render: makeRenderFunction(CustomMaterialTextStory, canvasOptions),
-    args: { text: defaultText, color: 'turquoise' },
-};
+});
+export const CustomMaterial = makeStoryObject(CustomMaterialTextStory, {
+    canvasOptions,
+    argsOptions: {
+        text: defaultText,
+        color: color('turquoise'),
+    },
+});
diff --git a/libs/soba/src/performance/adaptive.stories.ts b/libs/soba/src/performance/adaptive.stories.ts
@@ -1,13 +1,13 @@
 import { NgIf } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, Component, Signal } from '@angular/core';
-import { Meta, StoryFn, moduleMetadata } from '@storybook/angular';
+import { Meta, moduleMetadata } from '@storybook/angular';
 import { NgtArgs } from 'angular-three';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { injectNgtsGLTFLoader } from 'angular-three-soba/loaders';
 import { NgtsAdaptiveDpr, NgtsAdaptiveEvents } from 'angular-three-soba/performance';
 import type { Material, Mesh } from 'three';
 import type { GLTF } from 'three-stdlib/loaders/GLTFLoader';
-import { StorybookSetup, makeRenderFunction } from '../setup-canvas';
+import { StorybookSetup, makeStoryFunction } from '../setup-canvas';
 
 interface ArcherGLTF extends GLTF {
     materials: { material_0: Material };
@@ -73,7 +73,7 @@ export default {
     decorators: [moduleMetadata({ imports: [StorybookSetup] })],
 } as Meta;
 
-export const Default: StoryFn = makeRenderFunction(DefaultAdaptiveStory, {
+export const Default = makeStoryFunction(DefaultAdaptiveStory, {
     camera: { position: [0, 0, 30], fov: 50 },
     controls: false,
     lights: false,
diff --git a/libs/soba/src/performance/detailed.stories.ts b/libs/soba/src/performance/detailed.stories.ts
@@ -3,7 +3,7 @@ import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { NgtArgs } from 'angular-three';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { NgtsDetailed } from 'angular-three-soba/performance';
-import { makeRenderFunction, StorybookSetup } from '../setup-canvas';
+import { makeStoryFunction, StorybookSetup } from '../setup-canvas';
 
 @Component({
     standalone: true,
@@ -36,7 +36,7 @@ export default {
     decorators: [moduleMetadata({ imports: [StorybookSetup] })],
 } as Meta;
 
-export const Default: StoryFn = makeRenderFunction(DefaultDetailedStory, {
+export const Default: StoryFn = makeStoryFunction(DefaultDetailedStory, {
     controls: false,
     camera: { position: [0, 0, 100] },
 });
diff --git a/libs/soba/src/setup-canvas.ts b/libs/soba/src/setup-canvas.ts
@@ -208,19 +208,58 @@ export function makeCanvasOptions(options: DeepPartial<CanvasOptions> = {}) {
     return mergedOptions;
 }
 
-export function makeRenderFunction(story: Type<unknown>, canvasOptions: DeepPartial<CanvasOptions> = {}) {
+export function makeStoryFunction(story: Type<unknown>, canvasOptions: DeepPartial<CanvasOptions> = {}) {
     return (args: Args) => {
         return {
-            props: {
-                options: makeCanvasOptions(canvasOptions),
-                inputs: args || {},
-                story,
-            },
+            props: { options: makeCanvasOptions(canvasOptions), inputs: args || {}, story },
             template: `<storybook-setup  [story]="story" [inputs]="inputs" [options]="options" />`,
         };
     };
 }
 
+export function makeStoryObject(
+    story: Type<unknown>,
+    {
+        canvasOptions = {},
+        argsOptions = {},
+    }: {
+        canvasOptions?: DeepPartial<CanvasOptions>;
+        argsOptions?: Record<string, any | { defaultValue: any; control: { control: any } }>;
+    } = {}
+) {
+    const render = makeStoryFunction(story, canvasOptions);
+    const args: Record<string, any> = {};
+    const argTypes: Record<string, any> = {};
+
+    for (const [argKey, argOption] of Object.entries(argsOptions)) {
+        if (argOption['defaultValue']) {
+            args[argKey] = argOption.defaultValue;
+            argTypes[argKey] = argOption.control;
+        } else {
+            args[argKey] = argOption;
+        }
+    }
+
+    return { render, args, argTypes };
+}
+
+export function number(
+    defaultValue: number,
+    options: { min?: number; max?: number; step?: number; range?: true } = {}
+) {
+    if (Object.keys(options).length === 0) return defaultValue;
+    const { range, ...rest } = options;
+    return { defaultValue, control: { control: { type: range ? 'range' : 'number', ...rest } } };
+}
+
+export function color(defaultValue: string, { presetColors = [] }: { presetColors?: THREE.ColorKeyword[] } = {}) {
+    return { defaultValue, control: { control: { type: 'color', presetColors } } };
+}
+
+export function select(defaultValue: string | string[], { multi, options }: { options: string[]; multi?: true }) {
+    return { defaultValue, control: { control: multi ? 'multi-select' : 'select', options } };
+}
+
 export function turn(object: THREE.Object3D) {
     object.rotation.y += 0.01;
 }
diff --git a/libs/soba/src/staging/cloud.stories.ts b/libs/soba/src/staging/cloud.stories.ts
@@ -1,8 +1,8 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { Meta, moduleMetadata } from '@storybook/angular';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { NgtsCloud } from 'angular-three-soba/staging';
-import { makeRenderFunction, StorybookSetup } from '../setup-canvas';
+import { makeStoryFunction, StorybookSetup } from '../setup-canvas';
 
 @Component({
     standalone: true,
@@ -24,7 +24,7 @@ export default {
     decorators: [moduleMetadata({ imports: [StorybookSetup] })],
 } as Meta;
 
-export const Default: StoryFn = makeRenderFunction(DefaultCloudStory, {
+export const Default = makeStoryFunction(DefaultCloudStory, {
     camera: { position: [0, 0, 10] },
     controls: false,
 });
diff --git a/libs/soba/src/staging/contact-shadows.stories.ts b/libs/soba/src/staging/contact-shadows.stories.ts
@@ -1,8 +1,8 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
-import { Meta, moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
+import { Meta, moduleMetadata } from '@storybook/angular';
 import { NgtArgs, type NgtBeforeRenderEvent } from 'angular-three';
 import { NgtsContactShadows } from 'angular-three-soba/staging';
-import { makeRenderFunction, StorybookSetup } from '../setup-canvas';
+import { makeStoryFunction, makeStoryObject, StorybookSetup } from '../setup-canvas';
 
 @Component({
     standalone: true,
@@ -41,8 +41,7 @@ export default {
     decorators: [moduleMetadata({ imports: [StorybookSetup] })],
 } as Meta;
 
-export const Default: StoryFn = makeRenderFunction(DefaultContactShadowsStory);
-export const Colorized: StoryObj = {
-    render: makeRenderFunction(DefaultContactShadowsStory),
-    args: { colorized: true },
-};
+export const Default = makeStoryFunction(DefaultContactShadowsStory);
+export const Colorized = makeStoryObject(DefaultContactShadowsStory, {
+    argsOptions: { colorized: true },
+});
diff --git a/libs/soba/src/staging/sky.stories.ts b/libs/soba/src/staging/sky.stories.ts
diff --git a/libs/soba/staging/src/index.ts b/libs/soba/staging/src/index.ts
diff --git a/libs/soba/staging/src/sky/sky.ts b/libs/soba/staging/src/sky/sky.ts
