Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 86b59f0

Browse files
nartcnartc
authored
Merge pull request #47 from brandonroberts/build-vite-storybook
build: migrate soba Storybook to Vite
2 parents 18b9a9e + 82dffc4 commit 86b59f0

File tree

6 files changed

+398
-150
lines changed

6 files changed

+398
-150
lines changed

‎libs/soba/.storybook/main.ts

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,45 @@
1-
import type { StorybookConfig } from '@storybook/angular';
2-
import { resolve } from 'node:path';
3-
4-
const config: StorybookConfig = {
5-
stories: ['../**/*.mdx', '../**/*.stories.@(js|ts)'],
6-
addons: [
7-
'@storybook/addon-essentials',
8-
'storybook-addon-deep-controls',
9-
'@chromatic-com/storybook'
10-
],
11-
12-
webpackFinal: async (config) => {
13-
config.module?.rules?.push({
14-
test: /\.(glsl|vs|fs|vert|frag)$/,
15-
exclude: /node_modules/,
16-
use: ['raw-loader', 'glslify-loader'],
17-
include: resolve(__dirname, '../'),
1+
import { StorybookConfig } from '@storybook/angular';
2+
import { StorybookConfigVite } from '@storybook/builder-vite';
3+
import { UserConfig } from 'vite';
4+
5+
const config: StorybookConfig & StorybookConfigVite = {
6+
stories: ['../**/*.mdx', '../**/*.stories.@(js|ts)'],
7+
addons: ['@storybook/addon-essentials', 'storybook-addon-deep-controls', '@chromatic-com/storybook'],
8+
core: {
9+
builder: {
10+
name: '@storybook/builder-vite',
11+
options: {
12+
viteConfigPath: undefined,
13+
},
14+
},
15+
},
16+
async viteFinal(config: UserConfig) {
17+
// Merge custom configuration into the default config
18+
const { mergeConfig } = await import('vite');
19+
const { default: angular } = await import('@analogjs/vite-plugin-angular');
20+
const { nxViteTsPaths } = await import('@nx/vite/plugins/nx-tsconfig-paths.plugin');
21+
22+
return mergeConfig(config, {
23+
// Add dependencies to pre-optimization
24+
optimizeDeps: {
25+
include: [
26+
'@storybook/angular',
27+
'@storybook/angular/dist/client',
28+
'@angular/compiler',
29+
'@mdx-js/react',
30+
'@storybook/blocks',
31+
'tslib',
32+
],
33+
},
34+
plugins: [angular({ jit: true, tsconfig: './.storybook/tsconfig.json' }), nxViteTsPaths()],
1835
});
19-
20-
return config;
2136
},
22-
23-
staticDirs: ['./public', './public/cube'],
24-
25-
framework: {
37+
staticDirs: ['./public', './public/cube'],
38+
framework: {
2639
name: '@storybook/angular',
2740
options: {},
2841
},
29-
30-
docs: {}
42+
docs: {},
3143
};
3244

3345
export default config;
34-
35-
// To customize your webpack configuration you can use the webpackFinal field.
36-
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
37-
// and https://nx.dev/recipes/storybook/custom-builder-configs

‎libs/soba/project.json

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -42,31 +42,22 @@
4242
"outputs": ["{options.outputFile}"]
4343
},
4444
"storybook": {
45-
"executor": "@storybook/angular:start-storybook",
45+
"executor": "nx:run-commands",
4646
"options": {
47-
"port": 4400,
48-
"configDir": "libs/soba/.storybook",
49-
"browserTarget": "soba:build-storybook",
50-
"compodoc": false
51-
},
52-
"configurations": {
53-
"ci": {
54-
"quiet": true
55-
}
47+
"cwd": "libs/soba",
48+
"command": "storybook dev --port 4400"
5649
}
5750
},
5851
"build-storybook": {
59-
"executor": "@storybook/angular:build-storybook",
52+
"executor": "nx:run-commands",
6053
"outputs": ["{options.outputDir}"],
6154
"options": {
62-
"outputDir": "dist/storybook/soba",
63-
"configDir": "libs/soba/.storybook",
64-
"browserTarget": "soba:build-storybook",
65-
"compodoc": false
55+
"cwd": "libs/soba",
56+
"command": "storybook build --output-dir ../../dist/storybook/soba"
6657
},
6758
"configurations": {
6859
"ci": {
69-
"quiet": true
60+
"command": "storybook build --output-dir ../../dist/storybook/soba --quiet"
7061
}
7162
}
7263
},

‎libs/soba/src/abstractions/text-3d.stories.ts

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,42 @@
11
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
22
import { Meta } from '@storybook/angular';
33
import { NgtsText3D } from 'angular-three-soba/abstractions';
4-
import { NgtsCenter } from 'angular-three-soba/staging';
4+
import { NgtsCenter, NgtsFloat } from 'angular-three-soba/staging';
55
import { makeDecorators, makeStoryFunction } from '../setup-canvas';
66

7+
@Component({
8+
standalone: true,
9+
template: `
10+
<ngts-center>
11+
<ngts-float>
12+
<ngts-text-3d
13+
text="hello
14+
world"
15+
font="helvetiker_regular.typeface.json"
16+
[options]="{
17+
curveSegments: 32,
18+
bevelEnabled: true,
19+
bevelSize: 0.04,
20+
bevelThickness: 0.1,
21+
height: 0.5,
22+
lineHeight: 0.5,
23+
letterSpacing: -0.06,
24+
size: 1.5,
25+
}"
26+
>
27+
<ngt-mesh-normal-material />
28+
</ngts-text-3d>
29+
</ngts-float>
30+
</ngts-center>
31+
32+
<ngt-axes-helper [scale]="2" />
33+
`,
34+
imports: [NgtsCenter, NgtsText3D, NgtsFloat],
35+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
36+
changeDetection: ChangeDetectionStrategy.OnPush,
37+
})
38+
class FloatText3DStory {}
39+
740
@Component({
841
standalone: true,
942
template: `
@@ -43,3 +76,7 @@ export default {
4376
export const Default = makeStoryFunction(DefaultText3DStory, {
4477
camera: { position: [-1.5, 1.5, 3.5] },
4578
});
79+
80+
export const Float = makeStoryFunction(FloatText3DStory, {
81+
camera: { position: [-1.5, 1.5, 3.5] },
82+
});

‎libs/soba/vite.config.mts renamed to ‎libs/soba/vitest.config.ts

File renamed without changes.

‎package.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
},
1111
"private": true,
1212
"devDependencies": {
13-
"@analogjs/platform": "^1.7.1",
14-
"@analogjs/vite-plugin-angular": "^1.7.1",
15-
"@analogjs/vitest-angular": "^1.7.1",
13+
"@analogjs/platform": "1.8.0-beta.2",
14+
"@analogjs/vite-plugin-angular": "1.8.0-beta.2",
15+
"@analogjs/vitest-angular": "1.8.0-beta.2",
1616
"@angular-devkit/build-angular": "18.2.0",
1717
"@angular-devkit/core": "18.2.0",
1818
"@angular-devkit/schematics": "18.2.0",
@@ -46,6 +46,7 @@
4646
"@storybook/addon-essentials": "8.2.9",
4747
"@storybook/addon-interactions": "8.2.9",
4848
"@storybook/angular": "8.2.9",
49+
"@storybook/builder-vite": "8.2.9",
4950
"@storybook/core-server": "8.2.9",
5051
"@storybook/manager-api": "^8.2.9",
5152
"@storybook/test": "8.2.9",
@@ -101,8 +102,8 @@
101102
"vitest-webgl-canvas-mock": "^1.1.0"
102103
},
103104
"dependencies": {
104-
"@analogjs/content": "^1.7.1",
105-
"@analogjs/router": "^1.7.1",
105+
"@analogjs/content": "1.8.0-beta.2",
106+
"@analogjs/router": "1.8.0-beta.2",
106107
"@angular/animations": "18.2.0",
107108
"@angular/common": "18.2.0",
108109
"@angular/compiler": "18.2.0",

0 commit comments

Comments
 (0)