From 13f4c66500b2dec1554ace2e37a206c17668c68d Mon Sep 17 00:00:00 2001 From: lonyele Date: Tue, 8 Mar 2022 00:56:47 +0900 Subject: [PATCH 01/15] fix: show appropriate values by length --- addons/interactions/src/components/MethodCall.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/interactions/src/components/MethodCall.tsx b/addons/interactions/src/components/MethodCall.tsx index 724bf3963e2..8a91ba9c455 100644 --- a/addons/interactions/src/components/MethodCall.tsx +++ b/addons/interactions/src/components/MethodCall.tsx @@ -206,7 +206,7 @@ export const ObjectNode = ({ value, nested = false }: { value: object; nested?: } const nodelist = interleave( Object.entries(value) - .slice(0, 1) + .slice(0, 2) .map(([k, v]) => ( {k}: From 1d594ddc820c9b43029d01901c11287e973e6659 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Valentin=20Palkovi=C4=8D?= Date: Tue, 12 Apr 2022 09:51:53 +0200 Subject: [PATCH 02/15] Fix webpack 5 with babelModeV7 in svelte environment --- app/svelte/src/server/framework-preset-svelte.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/app/svelte/src/server/framework-preset-svelte.ts b/app/svelte/src/server/framework-preset-svelte.ts index d3e10fbf749..c3cf144bc72 100644 --- a/app/svelte/src/server/framework-preset-svelte.ts +++ b/app/svelte/src/server/framework-preset-svelte.ts @@ -1,6 +1,7 @@ import { findDistEsm } from '@storybook/core-common'; import type { Options, StorybookConfig } from '@storybook/core-common'; import type { Configuration } from 'webpack'; +import type { TransformOptions } from '@babel/core'; export async function webpack(config: Configuration, options: Options): Promise { const { preprocess = undefined, loader = {} } = await options.presets.apply( @@ -33,6 +34,14 @@ export async function webpack(config: Configuration, options: Options): Promise< }; } +export async function babelDefault(config: TransformOptions): Promise { + return { + ...config, + presets: [...(config?.presets || [])], + plugins: [...(config?.plugins || [])], + }; +} + export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; From b4a16f5d820c8f57f787629dca95ca293c4f9fb8 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 13 Apr 2022 18:17:58 +0200 Subject: [PATCH 03/15] feat(addon-interactions): add object inspector --- addons/interactions/package.json | 1 + .../src/components/MatcherResult.tsx | 8 +- .../src/components/MethodCall.tsx | 35 ++++- yarn.lock | 123 +++++++++++++++++- 4 files changed, 158 insertions(+), 9 deletions(-) diff --git a/addons/interactions/package.json b/addons/interactions/package.json index 4feea57e35b..1d61cd1ec45 100644 --- a/addons/interactions/package.json +++ b/addons/interactions/package.json @@ -41,6 +41,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { + "@devtools-ds/object-inspector": "^1.1.2", "@storybook/addons": "6.5.0-alpha.45", "@storybook/api": "6.5.0-alpha.45", "@storybook/components": "6.5.0-alpha.45", diff --git a/addons/interactions/src/components/MatcherResult.tsx b/addons/interactions/src/components/MatcherResult.tsx index ba75519f627..cf52a920ae4 100644 --- a/addons/interactions/src/components/MatcherResult.tsx +++ b/addons/interactions/src/components/MatcherResult.tsx @@ -29,15 +29,17 @@ const StyledReceived = styled.span(({ theme }) => ({ export const Received = ({ value, parsed }: { value: any; parsed?: boolean }) => parsed ? ( - + ) : ( {value} ); export const Expected = ({ value, parsed }: { value: any; parsed?: boolean }) => { if (parsed) { - if (typeof value === 'string' && value.startsWith('called with')) return <>{value}; - return ; + if (typeof value === 'string' && value.startsWith('called with')) { + return <>{value}; + } + return ; } return {value}; }; diff --git a/addons/interactions/src/components/MethodCall.tsx b/addons/interactions/src/components/MethodCall.tsx index 8a91ba9c455..adb0000eaf5 100644 --- a/addons/interactions/src/components/MethodCall.tsx +++ b/addons/interactions/src/components/MethodCall.tsx @@ -1,3 +1,4 @@ +import { ObjectInspector } from '@devtools-ds/object-inspector'; import { Call, CallRef, ElementRef } from '@storybook/instrumenter'; import { useTheme } from '@storybook/theming'; import React, { Fragment, ReactElement } from 'react'; @@ -91,11 +92,17 @@ const interleave = (nodes: ReactElement[], separator: ReactElement) => export const Node = ({ value, nested, + showObjectInspector, callsById, ...props }: { value: any; nested?: boolean; + /** + * Shows an object inspector instead of just printing the object. + * Only available for Objects + */ + showObjectInspector?: boolean; callsById?: Map; [props: string]: any; }) => { @@ -131,7 +138,7 @@ export const Node = ({ value.constructor?.name !== 'Object': return ; case Object.prototype.toString.call(value) === '[object Object]': - return ; + return ; default: return ; } @@ -199,14 +206,36 @@ export const ArrayNode = ({ value, nested = false }: { value: any[]; nested?: bo ); }; -export const ObjectNode = ({ value, nested = false }: { value: object; nested?: boolean }) => { +export const ObjectNode = ({ + showInspector, + value, + nested = false, +}: { + showInspector?: boolean; + value: object; + nested?: boolean; +}) => { const colors = useThemeColors(); + + if (showInspector) { + return ( + <> + + + ); + } + if (nested) { return {'{…}'}; } const nodelist = interleave( Object.entries(value) - .slice(0, 2) + .slice(0, 1) .map(([k, v]) => ( {k}: diff --git a/yarn.lock b/yarn.lock index 191b6313ba9..f23f2735777 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2440,6 +2440,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:7.7.2": + version: 7.7.2 + resolution: "@babel/runtime@npm:7.7.2" + dependencies: + regenerator-runtime: ^0.13.2 + checksum: a1bab397bf1ae0117a7ac1fb67885833368b065425960ed7e5d8856efad5fc46765ae27d82d3d6ede2ade35c901d56745e1ae8ad75b36ca309a9dfd0fca5a712 + languageName: node + linkType: hard + "@babel/runtime@npm:7.9.0": version: 7.9.0 resolution: "@babel/runtime@npm:7.9.0" @@ -2458,6 +2467,24 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.11.2": + version: 7.17.9 + resolution: "@babel/runtime@npm:7.17.9" + dependencies: + regenerator-runtime: ^0.13.4 + checksum: 758ce8855a75408555ed9d196c82c86350257765095a5d3e05df35875d1b0cd42223c6f62356f000b1e1efe8e345d6312c60ae98e8727a2a49909a656f0fd805 + languageName: node + linkType: hard + +"@babel/runtime@npm:~7.5.4": + version: 7.5.5 + resolution: "@babel/runtime@npm:7.5.5" + dependencies: + regenerator-runtime: ^0.13.2 + checksum: ee5789200681462dc668ce4a0720914b16b872b4f71b79931a343fd4114154a3ec64e7e93ec38f634b7e3f54767005883402af86d60eb5172e897cae275ef8da + languageName: node + linkType: hard + "@babel/template@npm:7.12.7": version: 7.12.7 resolution: "@babel/template@npm:7.12.7" @@ -2726,6 +2753,72 @@ __metadata: languageName: node linkType: hard +"@design-systems/utils@npm:2.12.0": + version: 2.12.0 + resolution: "@design-systems/utils@npm:2.12.0" + dependencies: + "@babel/runtime": ^7.11.2 + clsx: ^1.0.4 + focus-lock: ^0.8.0 + react-merge-refs: ^1.0.0 + peerDependencies: + "@types/react": "*" + react: ">= 16.8.6" + react-dom: ">= 16.8.6" + checksum: 1b729cd9817ac08d8c18245f9fb0e8a6dd1511602b9d0c1b82f137be60642a5649497fd6c7b938770f2666c90bfc172c86fa575867da570165ae63db898d2029 + languageName: node + linkType: hard + +"@devtools-ds/object-inspector@npm:^1.1.2": + version: 1.1.2 + resolution: "@devtools-ds/object-inspector@npm:1.1.2" + dependencies: + "@babel/runtime": 7.7.2 + "@devtools-ds/object-parser": ^1.1.2 + "@devtools-ds/themes": ^1.1.2 + "@devtools-ds/tree": ^1.1.2 + clsx: 1.1.0 + peerDependencies: + react: ">= 16.8.6" + checksum: b8b0ab7d7ba3860cf11db1c6871efb681b989f05ee5163aebfeb746142ccf9b00d5f1c3d5c26d2c249f3aab86c0864de09eedbcb8f182e218dc5045cbb8c117d + languageName: node + linkType: hard + +"@devtools-ds/object-parser@npm:^1.1.2": + version: 1.1.2 + resolution: "@devtools-ds/object-parser@npm:1.1.2" + dependencies: + "@babel/runtime": ~7.5.4 + checksum: fc644e372cd0c9ae7ed47a10599b354d9a49305334fa318a3955c954fde29f85b6e8501135f2586344231b90b28f48fc9d0189a3ddd36f2737b06c88a26d7c66 + languageName: node + linkType: hard + +"@devtools-ds/themes@npm:^1.1.2": + version: 1.1.2 + resolution: "@devtools-ds/themes@npm:1.1.2" + dependencies: + "@babel/runtime": ~7.5.4 + "@design-systems/utils": 2.12.0 + clsx: 1.1.0 + peerDependencies: + react: ">= 16.8.6" + checksum: 95206f5d9ad1d46863a17a1d377e24cb6516e4cc4da6ac5e839977e4e9de69047de7d294b3ce1c46bf617cd9c867e4b4a78d2eeb1c4c9e537c3938122338477b + languageName: node + linkType: hard + +"@devtools-ds/tree@npm:^1.1.2": + version: 1.1.2 + resolution: "@devtools-ds/tree@npm:1.1.2" + dependencies: + "@babel/runtime": 7.7.2 + "@devtools-ds/themes": ^1.1.2 + clsx: 1.1.0 + peerDependencies: + react: ">= 16.8.6" + checksum: b43223a91baf8390e02c97b86015d1854b752e99036ac108cb2fc8eb4e3cd8230d10f975d3d675c5dde32a7ab508c309f4676376f294cc1c59a0bb50c48d153b + languageName: node + linkType: hard + "@discoveryjs/json-ext@npm:0.5.2": version: 0.5.2 resolution: "@discoveryjs/json-ext@npm:0.5.2" @@ -6570,6 +6663,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-interactions@workspace:addons/interactions" dependencies: + "@devtools-ds/object-inspector": ^1.1.2 "@storybook/addons": 6.5.0-alpha.45 "@storybook/api": 6.5.0-alpha.45 "@storybook/components": 6.5.0-alpha.45 @@ -16821,7 +16915,14 @@ __metadata: languageName: node linkType: hard -"clsx@npm:^1.1.1": +"clsx@npm:1.1.0": + version: 1.1.0 + resolution: "clsx@npm:1.1.0" + checksum: 7a3478c7757fd031ddc6a12c5e65eb29559df6ae7c89a52a89d177af130834eb914b1b80318a806cae43b3063d0b9cf70c8cbfedc2f60160e299d3b14cbeb400 + languageName: node + linkType: hard + +"clsx@npm:^1.0.4, clsx@npm:^1.1.1": version: 1.1.1 resolution: "clsx@npm:1.1.1" checksum: 5c34e1d5623e3dce0dbf22eedd4f3cc7cd0dee6b1b1ef3ad49d042c9d86372a1dc7788c2ca3213ec08e65ad0e91572ae7cb77183a478c9977bd5327e8f43ffe5 @@ -23135,6 +23236,15 @@ __metadata: languageName: node linkType: hard +"focus-lock@npm:^0.8.0": + version: 0.8.1 + resolution: "focus-lock@npm:0.8.1" + dependencies: + tslib: ^1.9.3 + checksum: 8e1a1b23834003e3b27af79e16f75650fc382fc6458b35bc53cb0c5929b61b69c75caa3db5e9e0bbf260064fd14af3f1d96cbb7db5470eca90ad8fd5a873226a + languageName: node + linkType: hard + "follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.10.0, follow-redirects@npm:^1.14.0": version: 1.14.9 resolution: "follow-redirects@npm:1.14.9" @@ -38043,6 +38153,13 @@ __metadata: languageName: node linkType: hard +"react-merge-refs@npm:^1.0.0": + version: 1.1.0 + resolution: "react-merge-refs@npm:1.1.0" + checksum: afb937156d834a058e5021535a63fd8a35984365c38b613478c31186da920b3b469e38b0b161a2075fbf5db7118fb8e96bb8a52a563f271d8f8f166fe8ffe2a4 + languageName: node + linkType: hard + "react-modal@npm:^3.11.2": version: 3.14.4 resolution: "react-modal@npm:3.14.4" @@ -38900,7 +39017,7 @@ __metadata: languageName: node linkType: hard -"regenerator-runtime@npm:^0.13.3, regenerator-runtime@npm:^0.13.4, regenerator-runtime@npm:^0.13.7": +"regenerator-runtime@npm:^0.13.2, regenerator-runtime@npm:^0.13.3, regenerator-runtime@npm:^0.13.4, regenerator-runtime@npm:^0.13.7": version: 0.13.9 resolution: "regenerator-runtime@npm:0.13.9" checksum: b0f26612204f061a84064d2f3361629eae09993939112b9ffc3680bb369ecd125764d6654eace9ef11b36b44282ee52b988dda946ea52d372e7599a30eea73ee @@ -44189,7 +44306,7 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^1.10.0, tslib@npm:^1.8.0, tslib@npm:^1.8.1, tslib@npm:^1.9.0": +"tslib@npm:^1.10.0, tslib@npm:^1.8.0, tslib@npm:^1.8.1, tslib@npm:^1.9.0, tslib@npm:^1.9.3": version: 1.14.1 resolution: "tslib@npm:1.14.1" checksum: 69ae09c49eea644bc5ebe1bca4fa4cc2c82b7b3e02f43b84bd891504edf66dbc6b2ec0eef31a957042de2269139e4acff911e6d186a258fb14069cd7f6febce2 From 35fffd86a75ba78791026269b6c8ec27fe1f9087 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 14 Apr 2022 10:24:26 +0200 Subject: [PATCH 04/15] fix(addon-interactions): respect dark mode in object inspector --- addons/interactions/src/components/MethodCall.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/addons/interactions/src/components/MethodCall.tsx b/addons/interactions/src/components/MethodCall.tsx index adb0000eaf5..50da47c1f61 100644 --- a/addons/interactions/src/components/MethodCall.tsx +++ b/addons/interactions/src/components/MethodCall.tsx @@ -215,6 +215,7 @@ export const ObjectNode = ({ value: object; nested?: boolean; }) => { + const isDarkMode = useTheme().base === 'dark'; const colors = useThemeColors(); if (showInspector) { @@ -224,7 +225,7 @@ export const ObjectNode = ({ id="interactions-object-inspector" data={value} includePrototypes={false} - colorScheme={colors.base === 'dark' ? 'dark' : 'light'} + colorScheme={isDarkMode ? 'dark' : 'light'} /> ); From c13f5911407e2e3ed78e176661f25afb80bbc657 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 14 Apr 2022 10:29:55 +0200 Subject: [PATCH 05/15] chore(storybook): add object inspector examples to MethodCall --- .../src/components/MethodCall.stories.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/addons/interactions/src/components/MethodCall.stories.tsx b/addons/interactions/src/components/MethodCall.stories.tsx index a2d09b71d6c..feda43c8ff5 100644 --- a/addons/interactions/src/components/MethodCall.stories.tsx +++ b/addons/interactions/src/components/MethodCall.stories.tsx @@ -42,7 +42,20 @@ export const Args = () => ( i)} /> - + + + 123, + asyncFn: async () => 'hello', + }} + showObjectInspector + /> From 82599bc06b7a3d6d964f50ab54bf5f2cc239386a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 15 Apr 2022 18:20:38 +0200 Subject: [PATCH 06/15] fix(addon-interactions): redo object keys length --- addons/interactions/src/components/MethodCall.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/interactions/src/components/MethodCall.tsx b/addons/interactions/src/components/MethodCall.tsx index 50da47c1f61..10a3bf2c0f4 100644 --- a/addons/interactions/src/components/MethodCall.tsx +++ b/addons/interactions/src/components/MethodCall.tsx @@ -236,7 +236,7 @@ export const ObjectNode = ({ } const nodelist = interleave( Object.entries(value) - .slice(0, 1) + .slice(0, 2) .map(([k, v]) => ( {k}: From 10caa770b9663133e26ec5f5046633ba3c4252a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=8Dtalo=20Teixeira?= Date: Sat, 16 Apr 2022 16:34:20 +0200 Subject: [PATCH 07/15] feat: add interactions to preact cli template --- cypress/generated/addon-interactions.spec.ts | 4 + lib/cli/src/frameworks/preact/Header.jsx | 7 +- .../src/frameworks/preact/Header.stories.jsx | 8 +- lib/cli/src/frameworks/preact/Page.jsx | 125 +++++++++--------- .../src/frameworks/preact/Page.stories.jsx | 21 +-- lib/cli/src/generators/baseGenerator.ts | 2 +- 6 files changed, 92 insertions(+), 75 deletions(-) diff --git a/cypress/generated/addon-interactions.spec.ts b/cypress/generated/addon-interactions.spec.ts index a0eb03697f3..1d2ff7b81f1 100644 --- a/cypress/generated/addon-interactions.spec.ts +++ b/cypress/generated/addon-interactions.spec.ts @@ -34,4 +34,8 @@ describe('addon-interactions', () => { onlyOn('vite_react', () => { it('should have interactions', test); }); + + onlyOn('preact', () => { + it('should have interactions', test); + }); }); diff --git a/lib/cli/src/frameworks/preact/Header.jsx b/lib/cli/src/frameworks/preact/Header.jsx index f425ec15286..06580039741 100644 --- a/lib/cli/src/frameworks/preact/Header.jsx +++ b/lib/cli/src/frameworks/preact/Header.jsx @@ -29,7 +29,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
{user ? ( -