docs(soba): update storybook config

Author: nartc

libs/soba/.storybook/main.ts

@@ -1,45 +1,11 @@
 import { StorybookConfig } from '@storybook/angular';
-import { StorybookConfigVite } from '@storybook/builder-vite';
-import { UserConfig } from 'vite';
 
-const config: StorybookConfig & StorybookConfigVite = {
-    stories: ['../**/*.mdx', '../**/*.stories.@(js|ts)'],
-    addons: ['@storybook/addon-essentials', 'storybook-addon-deep-controls', '@chromatic-com/storybook'],
-
-    async viteFinal(config: UserConfig) {
-		// Merge custom configuration into the default config
-		const { mergeConfig } = await import('vite');
-		const { default: angular } = await import('@analogjs/vite-plugin-angular');
-		const { nxViteTsPaths } = await import('@nx/vite/plugins/nx-tsconfig-paths.plugin');
-
-		return mergeConfig(config, {
-			// Add dependencies to pre-optimization
-			optimizeDeps: {
-				include: [
-					'@storybook/angular',
-					'@storybook/angular/dist/client',
-					'@angular/compiler',
-					'@mdx-js/react',
-					'@storybook/blocks',
-					'tslib',
-				],
-			},
-			plugins: [angular({ jit: true, tsconfig: './.storybook/tsconfig.json' }), nxViteTsPaths()],
-		});
-	},
-
-    staticDirs: ['./public', './public/cube'],
-
-    framework: {
-		name: '@storybook/angular',
-		options: {
-          builder: {
-            viteConfigPath: undefined
-          }
-        },
-	},
-
-    docs: {}
+const config: StorybookConfig = {
+	stories: ['../**/*.mdx', '../**/*.stories.@(js|ts)'],
+	addons: ['@storybook/addon-essentials', 'storybook-addon-deep-controls', '@chromatic-com/storybook'],
+	staticDirs: ['./public', './public/cube'],
+	framework: '@storybook/angular',
+	docs: {},
 };
 
 export default config;

libs/soba/.storybook/preview.ts

@@ -9,5 +9,5 @@ export default {
 			page: DocumentationTemplate,
 		},
 	},
-	tags: ['autodocs', 'autodocs'],
+	tags: ['autodocs'],
 } as Preview;

libs/soba/project.json

@@ -30,22 +30,26 @@
 			"outputs": ["{options.outputFile}"]
 		},
 		"storybook": {
-			"executor": "nx:run-commands",
+			"executor": "@storybook/angular:start-storybook",
 			"options": {
-				"cwd": "libs/soba",
-				"command": "storybook dev --port 4400"
+				"port": 4400,
+				"compodoc": false,
+				"configDir": "libs/soba/.storybook",
+				"browserTarget": "soba:build:development"
 			}
 		},
 		"build-storybook": {
-			"executor": "nx:run-commands",
+			"executor": "@storybook/angular:build-storybook",
 			"outputs": ["{options.outputDir}"],
 			"options": {
-				"cwd": "libs/soba",
-				"command": "storybook build --output-dir ../../dist/storybook/soba"
+				"compodoc": false,
+				"configDir": "libs/soba/.storybook",
+				"outputDir": "dist/storybook/soba",
+				"browserTarget": "soba:build:production"
 			},
 			"configurations": {
 				"ci": {
-					"command": "storybook build --output-dir ../../dist/storybook/soba --quiet"
+					"quiet": true
 				}
 			}
 		},

libs/soba/src/staging/accumulative-shadows.stories.ts

@@ -10,7 +10,7 @@ import {
 	NgtsRandomizedLights,
 } from 'angular-three-soba/staging';
 import { CanvasTexture, MeshStandardMaterial, RepeatWrapping, UVMapping } from 'three';
-import { FlakesTexture } from 'three/examples/jsm/textures/FlakesTexture';
+import { FlakesTexture } from 'three/examples/jsm/textures/FlakesTexture.js';
 import { color, makeDecorators, makeStoryObject } from '../setup-canvas';
 
 @Component({