Merge remote-tracking branch 'origin/next' into valentin/migrate-vers…

…ion-to-use-workspace-syntax

.github/workflows/canary-release-pr.yml

@@ -78,7 +78,7 @@ jobs:
         id: version
         working-directory: scripts
         run: |
-          yarn release:version --release-type prerelease --pre-id canary-${{ inputs.pr }}-${{ steps.info.outputs.timestamp }}-${{ steps.info.outputs.shortSha }} --verbose
+          yarn release:version --exact 0.0.0-pr-${{ inputs.pr }}-sha-${{ steps.info.outputs.shortSha }} --verbose
 
       - name: Publish v${{ steps.version.outputs.next-version }}
         env:

CONTRIBUTING/RELEASING.md

@@ -410,14 +410,10 @@ gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<P
 
 When the release succeeds, it will update the "Canary release" section of the pull request with information about the release and how to use it (see example [here](https://github.com/storybookjs/storybook/pull/23508)). If it fails, it will create a comment on the pull request, tagging the triggering actor to let them know that it failed (see example [here](https://github.com/storybookjs/storybook/pull/23508#issuecomment-1642850467)).
 
-The canary release will have the following version format: `<CURRENT_VERSION>-canary-<PR_NUMBER>-<TIMESTAMP>-<COMMIT_SHA>.0`, e.g., `7.1.1-canary-23508-1689802571-5ec8c1c3.0`.
-
-- The current version has no actual meaning but softly indicates which version the pull request is based on (e.g., a pull request based on v7.1.0 will get released as a canary version of v7.1.1).
-- The timestamp ensures that any subsequent releases are always considered newer.
-- The commit hash indicates which exact code has been released.
+The canary release will have the following version format: `0.0.0-pr-<PR_NUMBER>-sha-<COMMIT_SHA>`, e.g., `0.0.0-pr-23508-5ec8c1c3`. Using v0.0.0 ensures that no user will accidentally get the canary release when using a canary with prereleases, eg. `^7.2.0-alpha.0`
 
 > ** Note **
-> All canary releases are released under the same "canary" dist tag. This means you'll technically be able to install it with `npm install @storybook/cli@canary`. However, this doesn't make sense, as releases from subsequent pull requests will overwrite that tag quickly. Therefore you should always install the specific version string, e.g., `npm install @storybook/cli@7.1.1-canary-23508-1689802571-5ec8c1c3.0.
+> All canary releases are released under the same "canary" dist tag. This means you'll technically be able to install it with `npm install @storybook/cli@canary`. However, this doesn't make sense, as releases from subsequent pull requests will overwrite that tag quickly. Therefore you should always install the specific version string, e.g., `npm install @storybook/cli@0.0.0-pr-23508-sha-5ec8c1c3`.
 
 <details>
   <summary>Isn't there a simpler/smarter way to do this?</summary>

code/addons/interactions/src/components/MatcherResult.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import React from 'react';
 import { styled, typography } from '@storybook/theming';
 import { Node } from './MethodCall';

code/addons/interactions/src/components/MethodCall.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import { ObjectInspector } from '@devtools-ds/object-inspector';
 import type { Call, CallRef, ElementRef } from '@storybook/instrumenter';
 import { useTheme } from '@storybook/theming';

code/frameworks/nextjs/package.json

@@ -58,6 +58,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@babel/core": "^7.22.9",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
@@ -97,7 +98,6 @@
     "tsconfig-paths-webpack-plugin": "^4.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
     "@babel/types": "^7.22.5",
     "@types/babel__core": "^7",
     "@types/babel__plugin-transform-runtime": "^7",
@@ -107,17 +107,13 @@
     "webpack": "^5.65.0"
   },
   "peerDependencies": {
-    "@babel/core": "^7.22.0",
     "@next/font": "^13.0.0",
     "next": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "webpack": "^5.0.0"
   },
   "peerDependenciesMeta": {
-    "@babel/core": {
-      "optional": true
-    },
     "@next/font": {
       "optional": true
     },

code/ui/blocks/src/controls/Range.tsx

@@ -220,7 +220,7 @@ export const RangeControl: FC<RangeProps> = ({
         {...{ name, value, min, max, step, onFocus, onBlur }}
       />
       <RangeCurrentAndMaxLabel numberOFDecimalsPlaces={numberOFDecimalsPlaces} max={max}>
-        {`${hasValue ? value.toFixed(numberOFDecimalsPlaces) : '--'}`} / {max}
+        {hasValue ? value.toFixed(numberOFDecimalsPlaces) : '--'} / {max}
       </RangeCurrentAndMaxLabel>
     </RangeWrapper>
   );

code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx

@@ -391,7 +391,7 @@ export class JsonArray extends Component<JsonArrayProps, JsonArrayState> {
           {data.map((item, index) => (
             <JsonNode
               key={index}
-              name={`${index}`}
+              name={index.toString()}
               data={item}
               keyPath={keyPath}
               deep={nextDeep}