chore: bump to storybook v8

.storybook/bulmil-theme.js → .storybook/bulmil-theme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 
 export const bulmilTheme = create({
   base: 'light',
@@ -33,6 +33,6 @@ export const bulmilTheme = create({
   inputBorderRadius: 4,
 
   brandTitle: 'Bulmil',
-  brandUrl: 'https://bulmil.netlify.com',
+  brandUrl: 'https://bulmil.vercel.app',
   // brandImage: ''
 });

.storybook/main.ts

@@ -0,0 +1,27 @@
+import { StorybookConfig } from '@storybook/web-components-vite';
+import { externalFileWatch } from './plugins/externalFileWatch';
+
+const config: StorybookConfig = {
+  stories: ['../packages/core/src/**/*.mdx', '../packages/core/src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y',],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  staticDirs: [{ from: '../packages/core/www/build/', to: '/build' }],
+  async viteFinal(config) {
+    return {
+      ...config,
+      assetsInclude: [...(config.assetsInclude as [] ?? []), '/build/bulmil.esm.js', '/build/bulmil.css'],
+      plugins: [...(config.plugins ?? []), externalFileWatch(['./dist/**/*.js'])],
+    };
+  },
+};
+
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import { bulmilTheme } from './bulmil-theme';
+
+addons.setConfig({
+  theme: bulmilTheme,
+});

.storybook/plugins/externalFileWatch.ts

@@ -0,0 +1,32 @@
+import colors from 'picocolors';
+import chokidar from 'chokidar';
+
+/**
+ * Small plugin that watches for file changes and informs Vite to reload
+ * once the change has been made.
+ *
+ * @param watchedFiles - List of files or directories to watch - use mask
+ */
+export const externalFileWatch = (watchFilesMask: readonly string[]) => ({
+  name: 'internal-live-reload',
+
+  configureServer({ ws, config }) {
+    /**
+     * Inform Vite server that a change has happened and trigger a full reload
+     *
+     * @param path - Path where the change has happened
+     */
+    const fileChanged = (path: string) => {
+      console.info(`${colors.magenta(`File changed`)} ${colors.gray(path)}`);
+      ws.send({ type: 'full-reload', path });
+    };
+
+    /**
+     * Chokidar is already used by Vite for watching we will just add new paths to watch
+     */
+    chokidar
+      .watch(watchFilesMask, { cwd: config.root, ignoreInitial: true, ...config })
+      .on('change', fileChanged)
+      .on('add', fileChanged);
+  },
+});

.storybook/preview.ts

@@ -0,0 +1,12 @@
+// Replace your-framework with the framework you are using (e.g., react, vue3)
+import { Preview } from '@storybook/web-components';
+
+const preview: Preview = {
+  parameters: {
+    docs: {
+      inlineStories: false
+    },
+  },
+};
+
+export default preview;

examples/angular/package.json

@@ -8,26 +8,26 @@
     "serve": "ng serve"
   },
   "dependencies": {
-    "@angular/animations": "15.2.0",
-    "@angular/common": "15.2.0",
-    "@angular/compiler": "15.2.0",
-    "@angular/core": "15.2.0",
-    "@angular/forms": "15.2.0",
-    "@angular/platform-browser": "15.2.0",
-    "@angular/platform-browser-dynamic": "15.2.0",
-    "@angular/router": "15.2.0",
+    "@angular/animations": "15.2.10",
+    "@angular/common": "15.2.10",
+    "@angular/compiler": "15.2.10",
+    "@angular/core": "15.2.10",
+    "@angular/forms": "15.2.10",
+    "@angular/platform-browser": "15.2.10",
+    "@angular/platform-browser-dynamic": "15.2.10",
+    "@angular/router": "15.2.10",
     "@bulmil/angular": "0.56.0",
     "@bulmil/core": "0.56.0",
     "rxjs": "7.8.0",
     "tslib": "2.5.0",
     "zone.js": "0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "15.2.0",
-    "@angular/cli": "15.2.0",
-    "@angular/compiler-cli": "15.2.0",
+    "@angular-devkit/build-angular": "15.2.11",
+    "@angular/cli": "15.2.11",
+    "@angular/compiler-cli": "15.2.10",
     "@types/jest": "27.5.2",
-    "@types/node": "18.14.2",
+    "@types/node": "20.12.7",
     "codelyzer": "6.0.2",
     "jest-diff": "28.1.3",
     "pretty-format": "29.4.3",

package.json

@@ -6,41 +6,38 @@
   ],
   "scripts": {
     "build": "turbo run build --filter=@bulmil/core --filter=@bulmil/angular --filter=@bulmil/react --filter=@bulmil/svelte --filter=@bulmil/vue",
-    "build:storybook": "build-storybook -c .storybook -s packages/core/www -o storybook/",
+    "build:storybook": "storybook build -o storybook/",
     "release:stable": "yarn build && yarn run test && lerna publish --no-commit-hooks --dist-tag latest",
     "release:next": "yarn build && yarn run test && lerna publish prepatch --no-commit-hooks --dist-tag next",
     "watch": "node --max_old_space_size=4096 ./node_modules/.bin/stencil build --watch --recursive --serve --config ./packages/core/stencil.config.ts",
-    "storybook.run": "start-storybook -p 9006 -s packages/core/www",
+    "storybook.run": "storybook dev -p 6006",
     "storybook": "npm-run-all --parallel watch storybook.run",
     "test": "yarn build && turbo run test --filter=@bulmil/core --filter=@bulmil/angular --filter=@bulmil/react --filter=@bulmil/svelte --filter=@bulmil/vue",
     "prepublishOnly": "yarn build"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.4.4",
-    "@commitlint/config-conventional": "17.4.4",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/addon-centered": "5.3.21",
-    "@storybook/addon-docs": "6.5.16",
-    "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-viewport": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/html": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/theming": "6.5.16",
-    "@storybook/web-components": "6.5.16",
-    "@types/node": "18.14.2",
-    "babel-loader": "8.3.0",
+    "@commitlint/cli": "19.2.2",
+    "@commitlint/config-conventional": "19.2.2",
+    "@storybook/addon-a11y": "8.0.8",
+    "@storybook/addon-essentials": "8.0.8",
+    "@storybook/addon-links": "8.0.8",
+    "@storybook/blocks": "8.0.8",
+    "@storybook/test": "8.0.8",
+    "@storybook/web-components": "8.0.8",
+    "@storybook/web-components-vite": "8.0.8",
+    "@types/node": "20.12.7",
+    "chokidar": "3.6.0",
     "husky": "8.0.3",
     "lerna": "6.5.1",
+    "lit": "3.1.3",
     "lit-html": "2.6.1",
-    "node-polyfill-webpack-plugin": "2.0.1",
     "npm-run-all": "4.1.5",
-    "storybook-addon-turbo-build": "1.1.0",
-    "ts-loader": "9.4.2",
-    "turbo": "1.9.3",
-    "typescript": "5.2.2",
-    "webpack": "5.75.0"
+    "picocolors": "1.0.0",
+    "storybook": "8.0.8",
+    "turbo": "1.13.2",
+    "typescript": "5.4.5",
+    "unfetch": "4.2.0",
+    "vite": "5.2.9"
   },
   "packageManager": "[email protected]"
 }

packages/angular/package.json

@@ -28,10 +28,10 @@
     "rxjs": "7.5.2"
   },
   "devDependencies": {
-    "@angular/common": "15.2.0",
-    "@angular/compiler": "15.2.0",
-    "@angular/compiler-cli": "15.2.0",
-    "@angular/core": "15.2.0",
+    "@angular/common": "15.2.10",
+    "@angular/compiler": "15.2.10",
+    "@angular/compiler-cli": "15.2.10",
+    "@angular/core": "15.2.10",
     "ng-packagr": "15.2.2",
     "rimraf": "4.1.2",
     "rxjs": "7.8.0",

packages/core/package.json

@@ -75,7 +75,7 @@
     "@stencil/vue-output-target": "0.8.7",
     "@types/autoprefixer": "10.2.0",
     "@types/jest": "27.5.2",
-    "@types/node": "18.14.2",
+    "@types/node": "20.12.7",
     "@types/puppeteer": "5.4.7",
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",