Skip to content

Commit

Permalink
Merge pull request #26752 from storybookjs/version-non-patch-from-8.1…
Browse files Browse the repository at this point in the history
….0-alpha.6

Release: Prerelease 8.1.0-alpha.7
  • Loading branch information
vanessayuenn authored Apr 11, 2024
2 parents 97fc299 + 7e29280 commit fcf86f3
Show file tree
Hide file tree
Showing 84 changed files with 1,282 additions and 363 deletions.
2 changes: 1 addition & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -596,7 +596,7 @@ jobs:
at: .
- run:
name: Install dependencies
command: yarn install
command: yarn install --no-immutable
working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
- run:
name: Run Jest tests
Expand Down
7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
## 8.0.6

- CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!
- Next.js: Fix next/font usage on Windows machines - [#26700](https://github.com/storybookjs/storybook/pull/26700), thanks @valentinpalkovic!
- Next.js: Support path aliases when no base url is set - [#26651](https://github.com/storybookjs/storybook/pull/26651), thanks @yannbf!
- Webpack: Fix sourcemap generation in webpack react-docgen-loader - [#26676](https://github.com/storybookjs/storybook/pull/26676), thanks @valentinpalkovic!

## 8.0.5

- Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!
Expand Down
9 changes: 9 additions & 0 deletions CHANGELOG.prerelease.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
## 8.1.0-alpha.7

- CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!
- CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!
- Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic!
- Test: Make spies reactive so that they can be logged by addon-actions - [#26740](https://github.com/storybookjs/storybook/pull/26740), thanks @kasperpeulen!
- Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!
- Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!

## 8.1.0-alpha.6

- CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!
Expand Down
3 changes: 2 additions & 1 deletion code/.eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,5 @@ ember-output
!.eslintrc.js
!.eslintrc-markdown.js
!.storybook
lib/core-common/templates/base-preview-head.html
lib/core-common/templates/base-preview-head.html
lib/core-server/src/utils/__search-files-tests__
38 changes: 14 additions & 24 deletions code/addons/actions/src/loaders.ts
Original file line number Diff line number Diff line change
@@ -1,36 +1,26 @@
/* eslint-disable no-underscore-dangle */
import type { LoaderFunction } from '@storybook/types';
import { global } from '@storybook/global';
import type { onMockCall as onMockCallType } from '@storybook/test';
import { action } from './runtime';

export const tinySpyInternalState = Symbol.for('tinyspy:spy');
let subscribed = false;

const attachActionsToFunctionMocks: LoaderFunction = (context) => {
const logActionsWhenMockCalled: LoaderFunction = (context) => {
const {
args,
parameters: { actions },
} = context;
if (actions?.disable) return;

Object.entries(args)
.filter(
([, value]) =>
typeof value === 'function' && '_isMockFunction' in value && value._isMockFunction
)
.forEach(([key, value]) => {
// See this discussion for context:
// https://github.com/vitest-dev/vitest/pull/5352
const previous =
value.getMockImplementation() ??
(tinySpyInternalState in value ? value[tinySpyInternalState]?.getOriginal() : undefined);
if (previous?._actionAttached !== true && previous?.isAction !== true) {
const implementation = (...params: unknown[]) => {
action(key)(...params);
return previous?.(...params);
};
implementation._actionAttached = true;
value.mockImplementation(implementation);
}
});
if (
!subscribed &&
'__STORYBOOK_TEST_ON_MOCK_CALL__' in global &&
typeof global.__STORYBOOK_TEST_ON_MOCK_CALL__ === 'function'
) {
const onMockCall = global.__STORYBOOK_TEST_ON_MOCK_CALL__ as typeof onMockCallType;
onMockCall((mock, args) => action(mock.getMockName())(args));
subscribed = true;
}
};

export const loaders: LoaderFunction[] = [attachActionsToFunctionMocks];
export const loaders: LoaderFunction[] = [logActionsWhenMockCalled];
24 changes: 24 additions & 0 deletions code/addons/actions/template/stories/spies.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { global as globalThis } from '@storybook/global';
import { spyOn } from '@storybook/test';

export default {
component: globalThis.Components.Button,
loaders() {
spyOn(console, 'log').mockName('console.log');
},
args: {
label: 'Button',
},
parameters: {
chromatic: { disable: true },
},
};

export const ShowSpyOnInActions = {
args: {
onClick: () => {
console.log('first');
console.log('second');
},
},
};
2 changes: 1 addition & 1 deletion code/addons/gfm/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@ The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Story
> This addon will likely be removed in a future version.
It's recommended you read this document and follow its instructions instead:
https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm
https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly

Once you've made the necessary changes, you can remove the addon from your package.json and storybook config.
42 changes: 0 additions & 42 deletions code/addons/interactions/src/preview.test.ts

This file was deleted.

53 changes: 1 addition & 52 deletions code/addons/interactions/src/preview.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
import type {
ArgsEnhancer,
PlayFunction,
PlayFunctionContext,
Renderer,
StepLabel,
} from '@storybook/types';
import { fn, isMockFunction } from '@storybook/test';
import type { PlayFunction, PlayFunctionContext, StepLabel } from '@storybook/types';
import { instrument } from '@storybook/instrumenter';

export const { step: runStep } = instrument(
Expand All @@ -16,50 +9,6 @@ export const { step: runStep } = instrument(
{ intercept: true }
);

export const traverseArgs = (value: unknown, depth = 0, key?: string): unknown => {
// Make sure to not get in infinite loops with self referencing args
if (depth > 5) return value;
if (value == null) return value;
if (isMockFunction(value)) {
// Makes sure we get the arg name in the interactions panel
if (key) value.mockName(key);
return value;
}

// wrap explicit actions in a spy
if (
typeof value === 'function' &&
'isAction' in value &&
value.isAction &&
!('implicit' in value && value.implicit)
) {
const mock = fn(value as any);
if (key) mock.mockName(key);
return mock;
}

if (Array.isArray(value)) {
depth++;
return value.map((item) => traverseArgs(item, depth));
}

if (typeof value === 'object' && value.constructor === Object) {
depth++;
for (const [k, v] of Object.entries(value)) {
if (Object.getOwnPropertyDescriptor(value, k).writable) {
// We have to mutate the original object for this to survive HMR.
(value as Record<string, unknown>)[k] = traverseArgs(v, depth, k);
}
}
return value;
}
return value;
};

const wrapActionsInSpyFns: ArgsEnhancer<Renderer> = ({ initialArgs }) => traverseArgs(initialArgs);

export const argsEnhancers = [wrapActionsInSpyFns];

export const parameters = {
throwPlayFunctionExceptions: false,
};
2 changes: 1 addition & 1 deletion code/builders/builder-webpack5/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
"util": "^0.12.4",
"util-deprecate": "^1.0.2",
"webpack": "5",
"webpack-dev-middleware": "^6.1.1",
"webpack-dev-middleware": "^6.1.2",
"webpack-hot-middleware": "^2.25.1",
"webpack-virtual-modules": "^0.5.0"
},
Expand Down
22 changes: 22 additions & 0 deletions code/e2e-tests/addon-actions.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,26 @@ test.describe('addon-actions', () => {
});
await expect(logItem).toBeVisible();
});

test('should show spies', async ({ page }) => {
test.skip(
templateName.includes('svelte') && templateName.includes('prerelease'),
'Svelte 5 prerelase does not support automatic actions with our current example components yet'
);
await page.goto(storybookUrl);
const sbPage = new SbPage(page);
sbPage.waitUntilLoaded();

await sbPage.navigateToStory('addons/actions/spies', 'show-spy-on-in-actions');

const root = sbPage.previewRoot();
const button = root.locator('button', { hasText: 'Button' });
await button.click();

await sbPage.viewAddonPanel('Actions');
const logItem = await page.locator('#storybook-panel-root #panel-tab-content', {
hasText: 'console.log',
});
await expect(logItem).toBeVisible();
});
});
17 changes: 13 additions & 4 deletions code/lib/cli/src/add.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,12 @@ const checkInstalled = (addonName: string, main: any) => {

const isCoreAddon = (addonName: string) => Object.hasOwn(versions, addonName);

type CLIOptions = {
packageManager?: PackageManagerName;
configDir?: string;
skipPostinstall: boolean;
};

/**
* Install the given addon package and add it to main.js
*
Expand All @@ -61,15 +67,18 @@ const isCoreAddon = (addonName: string) => Object.hasOwn(versions, addonName);
*/
export async function add(
addon: string,
options: { packageManager: PackageManagerName; skipPostinstall: boolean },
{ packageManager: pkgMgr, skipPostinstall, configDir: userSpecifiedConfigDir }: CLIOptions,
logger = console
) {
const { packageManager: pkgMgr } = options;
const [addonName, inputVersion] = getVersionSpecifier(addon);

const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
const packageJson = await packageManager.retrievePackageJson();
const { mainConfig, configDir } = getStorybookInfo(packageJson);
const { mainConfig, configDir: inferredConfigDir } = getStorybookInfo(
packageJson,
userSpecifiedConfigDir
);
const configDir = userSpecifiedConfigDir || inferredConfigDir || '.storybook';

if (typeof configDir === 'undefined') {
throw new Error(dedent`
Expand Down Expand Up @@ -119,7 +128,7 @@ export async function add(
main.appendValueToArray(['addons'], addonName);
await writeConfig(main);

if (!options.skipPostinstall && isCoreAddon(addonName)) {
if (!skipPostinstall && isCoreAddon(addonName)) {
await postinstallAddon(addonName, { packageManager: packageManager.type });
}
}
Expand Down
2 changes: 2 additions & 0 deletions code/lib/cli/src/automigrate/fixes/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { removeJestTestingLibrary } from './remove-jest-testing-library';
import { addonsAPI } from './addons-api';
import { mdx1to3 } from './mdx-1-to-3';
import { addonPostCSS } from './addon-postcss';
import { vta } from './vta';
import { upgradeStorybookRelatedDependencies } from './upgrade-storybook-related-dependencies';

export * from '../types';
Expand Down Expand Up @@ -58,6 +59,7 @@ export const allFixes: Fix[] = [
webpack5CompilerSetup,
mdx1to3,
upgradeStorybookRelatedDependencies,
vta,
];

export const initFixes: Fix[] = [eslintPlugin];
61 changes: 61 additions & 0 deletions code/lib/cli/src/automigrate/fixes/vta.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { describe, expect, it } from 'vitest';
import type { StorybookConfig } from '@storybook/types';
import { vta } from './vta';

const check = async ({
packageManager,
main: mainConfig,
storybookVersion = '7.0.0',
}: {
packageManager: any;
main: Partial<StorybookConfig> & Record<string, unknown>;
storybookVersion?: string;
}) => {
return vta.check({
packageManager,
configDir: '',
mainConfig: mainConfig as any,
storybookVersion,
});
};

describe('no-ops', () => {
it('with addon setup', async () => {
await expect(
check({
packageManager: {},
main: {
addons: ['@chromatic-com/storybook'],
},
})
).resolves.toBeFalsy();
});
it('with addon setup with options', async () => {
await expect(
check({
packageManager: {},
main: {
addons: [
{
name: '@chromatic-com/storybook',
options: {},
},
],
},
})
).resolves.toBeFalsy();
});
});

describe('continue', () => {
it('no addons', async () => {
await expect(
check({
packageManager: {},
main: {
stories: ['**/*.stories.mdx'],
},
})
).resolves.toBeTruthy();
});
});
Loading

0 comments on commit fcf86f3

Please sign in to comment.