diff --git a/CHANGELOG.md b/CHANGELOG.md index c94a0bd..e01a841 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +# 0.5.0 + +- Storybook 9 support +- Minimum NodeJS version support >= 20.0.0 + # 0.4.3 - Resolve CommonJS/ESM Compatibility issue. diff --git a/packages/qwik-app/.eslintrc.cjs b/packages/qwik-app/.eslintrc.cjs index 32abdc8..b2c4f9b 100644 --- a/packages/qwik-app/.eslintrc.cjs +++ b/packages/qwik-app/.eslintrc.cjs @@ -9,6 +9,7 @@ module.exports = { "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:qwik/recommended", + "plugin:storybook/recommended", ], parser: "@typescript-eslint/parser", parserOptions: { diff --git a/packages/qwik-app/.storybook/main.ts b/packages/qwik-app/.storybook/main.ts index 3a32fa4..e100d2f 100644 --- a/packages/qwik-app/.storybook/main.ts +++ b/packages/qwik-app/.storybook/main.ts @@ -1,17 +1,11 @@ import { StorybookConfig } from "storybook-framework-qwik"; const config: StorybookConfig = { - addons: ["@storybook/addon-essentials", "@storybook/addon-interactions"], + addons: ["@storybook/addon-docs"], stories: ["../src/**/*.docs.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], framework: { name: "storybook-framework-qwik", }, - core: { - renderer: "storybook-framework-qwik", - }, - docs: { - autodocs: "tag", - }, staticDirs: ["../public"], }; export default config; diff --git a/packages/qwik-app/package.json b/packages/qwik-app/package.json index 285f0fd..cb14f8e 100644 --- a/packages/qwik-app/package.json +++ b/packages/qwik-app/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "description": "App with Routing built-in (recommended)", "engines": { - "node": ">=15.0.0" + "node": ">=20.0.0" }, "private": true, "scripts": { @@ -27,24 +27,24 @@ "devDependencies": { "@builder.io/qwik": "1.4.1", "@builder.io/qwik-city": "1.4.1", - "@storybook/addon-a11y": "8.4.1", - "@storybook/addon-essentials": "8.4.1", - "@storybook/addon-interactions": "8.4.1", - "@storybook/builder-vite": "8.4.1", + "@storybook/addon-a11y": "9.1.8", + "@storybook/addon-docs": "9.1.8", + "@storybook/builder-vite": "9.1.8", "@storybook/jest": "0.2.3", - "@storybook/test-runner": "0.19.1", + "@storybook/test-runner": "0.23.0", "@types/eslint": "9.6.1", "@types/node": "22.8.7", "@typescript-eslint/eslint-plugin": "8.12.2", "@typescript-eslint/parser": "8.12.2", "eslint": "8.57.1", "eslint-plugin-qwik": "1.9.1", + "eslint-plugin-storybook": "9.1.8", "node-fetch": "3.3.2", "playwright": "1.48.2", "prettier": "3.3.3", "react": "18.3.1", "react-dom": "18.3.1", - "storybook": "8.4.1", + "storybook": "9.1.8", "storybook-framework-qwik": "workspace:*", "typescript": "5.6.3", "undici": "6.20.1", diff --git a/packages/qwik-app/src/components/button/button.stories.ts b/packages/qwik-app/src/components/button/button.stories.ts index a19cbab..22314a5 100644 --- a/packages/qwik-app/src/components/button/button.stories.ts +++ b/packages/qwik-app/src/components/button/button.stories.ts @@ -1,10 +1,13 @@ import type { Meta, StoryObj } from "storybook-framework-qwik"; import type { ButtonProps } from "./button"; import { Button } from "./button"; +import { $ } from "@builder.io/qwik"; const meta = { title: "Button", - args: {}, + args: { + onClick$: $(() => {}), + }, argTypes: { onClick$: { action: "onClick" }, }, diff --git a/packages/qwik-app/src/components/header/header.docs.mdx b/packages/qwik-app/src/components/header/header.docs.mdx index 1d4ac32..3da4d23 100644 --- a/packages/qwik-app/src/components/header/header.docs.mdx +++ b/packages/qwik-app/src/components/header/header.docs.mdx @@ -1,4 +1,4 @@ -import { Canvas, Meta } from "@storybook/blocks"; +import { Canvas, Meta } from "@storybook/addon-docs/blocks"; import * as HeaderStories from "./header.stories.tsx"; diff --git a/packages/qwik-app/src/components/header/header.tsx b/packages/qwik-app/src/components/header/header.tsx index b60185c..1b92e03 100644 --- a/packages/qwik-app/src/components/header/header.tsx +++ b/packages/qwik-app/src/components/header/header.tsx @@ -20,7 +20,7 @@ export const Header = component$(({ title }: HeaderProps) => { {title ?

{title}

: null} -
Qwik City Location: {JSON.stringify(loc.href)}
+
Qwik City Location: {JSON.stringify(loc.url.href)}