storybookjs · shilman · Oct 12, 2023 · May 1, 2023 · May 1, 2023 · May 1, 2023
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -17,7 +17,7 @@ executors:
         default: 'small'
     working_directory: /tmp/storybook
     docker:
-      - image: cimg/node:16.20.0
+      - image: cimg/node:18.18.0
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -30,7 +30,7 @@ executors:
         default: 'small'
     working_directory: /tmp/storybook
     docker:
-      - image: cimg/node:16.20.0-browsers
+      - image: cimg/node:18.18.0-browsers
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>

diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml
@@ -21,7 +21,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version-file: '.nvmrc'
       - uses: actions/checkout@v3
         with:
           ref: main

diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml
@@ -21,7 +21,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version-file: '.nvmrc'
       - uses: actions/checkout@v3
         with:
           ref: next

diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml
@@ -9,19 +9,18 @@ on:
 
 jobs:
   build:
-    name: Core Unit Tests node-${{ matrix.node_version }}, ${{ matrix.os }}
+    name: Core Unit Tests, ${{ matrix.os }}
     strategy:
       fail-fast: false
       matrix:
         os: [windows-latest]
-        node_version: [16]
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v3
-      - name: Set node version to ${{ matrix.node_version }}
+      - name: Set node version
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node_version }}
+          node-version-file: '.nvmrc'
       - name: install and compile
         run: yarn task --task compile --start-from=auto --no-link
       - name: test

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-16.20
+18.18
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,11 @@
+## 7.5.0-alpha.6
+
+- Angular: Introduce argsToTemplate for property and event Bindings - [#24434](https://github.com/storybookjs/storybook/pull/24434), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Controls: Fix select / multiselect when value contains multiple spaces - [#22334](https://github.com/storybookjs/storybook/pull/22334), thanks [@oxcened](https://github.com/oxcened)!
+- Next.js: Support rename font import - [#24406](https://github.com/storybookjs/storybook/pull/24406), thanks [@yoshi2no](https://github.com/yoshi2no)!
+- UI: Update ScrollArea with radix - [#24413](https://github.com/storybookjs/storybook/pull/24413), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- Web-components: Add Lit3 support - [#24437](https://github.com/storybookjs/storybook/pull/24437), thanks [@shilman](https://github.com/shilman)!
+
 ## 7.5.0-alpha.5
 
 - Angular: Add CLI options (debugWebpack, webpackStatsJson, and more) - [#24388](https://github.com/storybookjs/storybook/pull/24388), thanks [@yannbf](https://github.com/yannbf)!

diff --git a/CONTRIBUTING/RELEASING.md b/CONTRIBUTING/RELEASING.md
@@ -124,11 +124,11 @@ A few key points to note in this flow:
 
 Patch releases are created by [cherry-picking](https://www.atlassian.com/git/tutorials/cherry-pick) any merged, unreleased pull requests that have the "**patch:yes**" label applied to the `next` branch. The merge commit of said pull requests are cherry-picked.
 
-Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike non-patch-release preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`.
+Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike non-patch release preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`.
 
 The preparation workflow sequentially cherry-picks each patch pull request to its branch. If this cherry-picking fails due to conflicts or other reasons, it is ignored and the next pull request is processed. All failing cherry-picks are listed in the release pull request's description, for the Releaser to manually cherry-pick during the release process. This problem occurs more often when `main` and `next` diverge, i.e. the longer it has been since a stable major/minor release.
 
-Similar to the non-patch-release flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-<CURRENT-STABLE-VERSION>`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`.
+Similar to the non-patch release flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-<CURRENT-STABLE-VERSION>`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`.
 
 Here is an example of a workflow where a feature and two bug fixes have been merged to `next`. Only the bug fixes have the "**patch:yes**" label, so only those two go into the new `7.0.19` release. Note that it is the merge commits to `next` that are cherry-picked, not the commits on the bugfix branches.
 
@@ -173,7 +173,7 @@ gitGraph
 > **Note**
 > Workflow: [`prepare-non-patch-release.yml`](../.github/workflows/prepare-non-patch-release.yml)
 
-Non-patch-releases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`.
+Non-patch releases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`.
 
 The default versioning strategy is to increase the current prerelease number, as described in [Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13). If there is no prerelease number (i.e., we just released a new stable minor/major version), it will add one to a patch bump, so it would go from `7.2.0` to `7.2.1-0` by default.
 
@@ -215,7 +215,7 @@ gitGraph
 > **Note**
 > Workflow: [`publish.yml`](../.github/workflows/publish.yml)
 
-When either a non-patch-release or a patch release branch is merged into `latest-release` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks:
+When either a non-patch release or a patch release branch is merged into `latest-release` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks:
 
 1. Bump versions of all packages according to the plan from the prepared PRs
 2. Install dependencies and build all packages.
@@ -306,7 +306,7 @@ The workflows can be triggered here:
 
 Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - Non-patch Releases](#non-patch-releases). When triggering the non-patch workflow manually, you can optionally add inputs:
 
-![Screenshot of triggering the non-patch-release workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png)
+![Screenshot of triggering the non-patch release workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png)
 
 See [Versioning Scenarios](#versioning-scenarios) for a description of each version bump scenario, how to activate it and what it does, and [Which combination of inputs creates the version bump I need?](#which-combination-of-inputs-creates-the-version-bump-i-need) for a detailed description of the workflow inputs.
 
@@ -376,7 +376,7 @@ Before you start you should make sure that your working tree is clean and the re
     4. `git add ./CHANGELOG.md`
     5. `git commit -m "Update CHANGELOG.md for v<NEXT_VERSION>"`
     6. `git push origin`
-19. (If non-patch-release) Sync `versions/next.json` from `next` to `main`
+19. (If non-patch release) Sync `versions/next.json` from `next` to `main`
     1. `git checkout main`
     2. `git pull`
     3. `git checkout origin/next ./docs/versions/next.json`

diff --git a/code/addons/controls/template/stories/basics.stories.ts b/code/addons/controls/template/stories/basics.stories.ts
@@ -26,8 +26,8 @@ export default {
       control: { type: 'radio', options: ['a', 'b', 'c'], labels: ['alpha', 'beta', 'gamma'] },
     },
     inlineRadio: { control: { type: 'inline-radio', options: ['a', 'b', 'c'] } },
-    select: { control: { type: 'select', options: ['a', 'b', 'c'] } },
-    multiSelect: { control: { type: 'multi-select', options: ['a', 'b', 'c'] } },
+    select: { control: 'select', options: ['a', 'b', 'c', 'double  space'] },
+    multiSelect: { control: { type: 'multi-select' }, options: ['a', 'b', 'c', 'double  space'] },
     range: { control: 'range' },
     rangeCustom: { control: { type: 'range', min: 0, max: 1000, step: 100 } },
     text: { control: 'text' },

diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
@@ -91,7 +91,7 @@
     "@devtools-ds/object-inspector": "^1.1.2",
     "@storybook/jest": "next",
     "@storybook/testing-library": "next",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "formik": "^2.2.9",
     "typescript": "~4.9.3"
   },

diff --git a/code/addons/storyshots-puppeteer/README.md b/code/addons/storyshots-puppeteer/README.md
@@ -19,7 +19,7 @@ When running Puppeteer tests for your stories, you have two options:
 - Have a storybook running (ie. accessible via http(s), for instance using `npm run storybook`)
 - Have a static build of the storybook (for instance, using `npm run build-storybook`)
 
-Then you will need to reference the storybook URL (`file://...` if local, `http(s)://...` if served)
+Then you will need to reference the storybook URL (`http(s)://...`)
 
 ## _puppeteerTest_
 
@@ -72,21 +72,6 @@ initStoryshots({
 
 The above config will use _<https://my-specific-domain.com:9010>_ for tests. You can also use query parameters in your URL (e.g. for setting a different background for your storyshots, if you use `@storybook/addon-backgrounds`).
 
-You may also use a local static build of storybook if you do not want to run the webpack dev-server:
-
-```js
-import initStoryshots from '@storybook/addon-storyshots';
-import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
-
-initStoryshots({
-  suite: 'Puppeteer storyshots',
-  test: puppeteerTest({
-    storybookUrl: 'file:///path/to/my/storybook-static',
-    // storybookUrl: 'file://${path.resolve(__dirname, '../storybook-static')}'
-  }),
-});
-```
-
 ### Specifying options to _goto()_ (Puppeteer API)
 
 You might use `getGotoOptions` to specify options when the storybook is navigating to a story (using the `goto` method). Will be passed to [Puppeteer .goto() fn](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options)

diff --git a/code/addons/themes/README.md b/code/addons/themes/README.md
@@ -2,7 +2,7 @@
 
 Storybook Addon Themes can be used which between multiple themes for components inside the preview in [Storybook](https://storybook.js.org).
 
-![React Storybook Screenshot](https://user-images.githubusercontent.com/42671/98158421-dada2300-1ea8-11eb-8619-af1e7018e1ec.png)
+![React Storybook Screenshot](https://user-images.githubusercontent.com/18172605/274302488-77a39112-cdbe-4d16-9966-0d8e9e7e3399.gif)
 
 ## Usage
 

diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
@@ -114,6 +114,6 @@
     "unsupportedFrameworks": [
       "react-native"
     ],
-    "icon": ""
+    "icon": "https://user-images.githubusercontent.com/18172605/264114587-e4b32190-a9b7-4afa-b739-c873fc0498a6.png"
   }
 }
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
@@ -62,7 +62,7 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "glob": "^10.0.0",
     "rollup": "^3.20.1",
     "slash": "^5.0.0",

diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
@@ -66,7 +66,7 @@
     "@storybook/preview": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@swc/core": "^1.3.82",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "@types/semver": "^7.3.4",
     "babel-loader": "^9.0.0",
     "babel-plugin-named-exports-order": "^0.0.2",

diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts
@@ -70,4 +70,31 @@ test.describe('addon-controls', () => {
     const label = await sbPage.panelContent().locator('textarea[name=label]').inputValue();
     await expect(label).toEqual('Hello world');
   });
+
+  test('should set select option when value contains double spaces', async ({ page }) => {
+    await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`);
+
+    const sbPage = new SbPage(page);
+    await sbPage.waitUntilLoaded();
+    await sbPage.viewAddonPanel('Controls');
+    await sbPage.panelContent().locator('#control-select').selectOption('double  space');
+
+    await expect(sbPage.panelContent().locator('#control-select')).toHaveValue('double  space');
+    await expect(page).toHaveURL(/.*select:double\+\+space.*/);
+  });
+
+  test('should set multiselect option when value contains double spaces', async ({ page }) => {
+    await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`);
+
+    const sbPage = new SbPage(page);
+    await sbPage.waitUntilLoaded();
+    await sbPage.viewAddonPanel('Controls');
+    await sbPage.panelContent().locator('#control-multiSelect').selectOption('double  space');
+
+    await expect(sbPage.panelContent().locator('#control-multiSelect')).toHaveValue(
+      'double  space'
+    );
+
+    await expect(page).toHaveURL(/.*multiSelect\[0]:double\+\+space.*/);
+  });
 });
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
@@ -51,7 +51,7 @@
     "@storybook/preview-api": "workspace:*",
     "@storybook/telemetry": "workspace:*",
     "@storybook/types": "workspace:*",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
     "@types/semver": "^7.3.4",

diff --git a/code/frameworks/angular/src/client/argsToTemplate.test.ts b/code/frameworks/angular/src/client/argsToTemplate.test.ts
@@ -0,0 +1,102 @@
+import { argsToTemplate, ArgsToTemplateOptions } from './argsToTemplate'; // adjust path
+
+describe('argsToTemplate', () => {
+  it('should correctly convert args to template string and exclude undefined values', () => {
+    const args: Record<string, any> = {
+      prop1: 'value1',
+      prop2: undefined,
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {};
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+  });
+
+  it('should include properties from include option', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      include: ['prop1', 'prop3'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+  });
+
+  it('should include non-undefined properties from include option', () => {
+    const args: Record<string, any> = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: undefined,
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      include: ['prop1', 'prop3'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1"');
+  });
+
+  it('should exclude properties from exclude option', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      exclude: ['prop2'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+  });
+
+  it('should exclude properties from exclude option and undefined properties', () => {
+    const args: Record<string, any> = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: undefined,
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      exclude: ['prop2'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1"');
+  });
+
+  it('should prioritize include over exclude when both options are given', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      include: ['prop1', 'prop2'],
+      exclude: ['prop2', 'prop3'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
+  });
+
+  it('should work when neither include nor exclude options are given', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {};
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
+  });
+
+  it('should bind events correctly when value is a function', () => {
+    const args = { event1: () => {}, event2: () => {} };
+    const result = argsToTemplate(args, {});
+    expect(result).toEqual('(event1)="event1($event)" (event2)="event2($event)"');
+  });
+
+  it('should mix properties and events correctly', () => {
+    const args = { input: 'Value1', event1: () => {} };
+    const result = argsToTemplate(args, {});
+    expect(result).toEqual('[input]="input" (event1)="event1($event)"');
+  });
+});