Skip to content

Commit

Permalink
Merge branch 'next' into module-mocking-docs
Browse files Browse the repository at this point in the history
  • Loading branch information
kylegach authored May 6, 2024
2 parents dfa82ab + 6a6da24 commit 2a0d245
Show file tree
Hide file tree
Showing 231 changed files with 11,686 additions and 3,232 deletions.
12 changes: 6 additions & 6 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ jobs:
yarn docs:prettier:check
build:
executor:
class: large
class: xlarge
name: sb_node_16_classic
steps:
- git-shallow-clone/checkout_advanced:
Expand Down Expand Up @@ -768,30 +768,30 @@ workflows:
requires:
- build
- create-sandboxes:
parallelism: 35
parallelism: 37
requires:
- build
# - smoke-test-sandboxes: # disabled for now
# requires:
# - create-sandboxes
- build-sandboxes:
parallelism: 35
parallelism: 37
requires:
- create-sandboxes
- chromatic-sandboxes:
parallelism: 32
parallelism: 34
requires:
- build-sandboxes
- e2e-production:
parallelism: 30
parallelism: 32
requires:
- build-sandboxes
- e2e-dev:
parallelism: 2
requires:
- create-sandboxes
- test-runner-production:
parallelism: 30
parallelism: 32
requires:
- build-sandboxes
- test-portable-stories:
Expand Down
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## 8.0.10

- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!

## 8.0.9

- Addon-docs: Fix MDX compilation when using `@vitejs/plugin-react-swc` with plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!
Expand Down
30 changes: 30 additions & 0 deletions CHANGELOG.prerelease.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,33 @@
## 8.1.0-alpha.8

- Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560!
- Addon-docs: Fix MDX compilation with `@vitejs/plugin-react-swc` and plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!
- Automigration: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!
- Blocks: Add `of` prop to `Subtitle` - [#22552](https://github.com/storybookjs/storybook/pull/22552), thanks @joaonunomota!
- Blocks: Add `of` prop to `Title` - [#23728](https://github.com/storybookjs/storybook/pull/23728), thanks @Sidnioulz!
- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!
- Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic!
- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!
- Controls: Add UI to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic!
- Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday!
- Core: Ensure that simultaneous onStoriesChanged don't clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday!
- Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold!
- Core: Implement file formatter - [#26809](https://github.com/storybookjs/storybook/pull/26809), thanks @valentinpalkovic!
- Core: Save from controls - [#26827](https://github.com/storybookjs/storybook/pull/26827), thanks @ndelangen!
- Dependencies: Upgrade @storybook/csf to 0.1.5 - [#26958](https://github.com/storybookjs/storybook/pull/26958), thanks @Cherry!
- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!
- Docs: Fix providerImportSource extension - [#26868](https://github.com/storybookjs/storybook/pull/26868), thanks @bashmish!
- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!
- Next.js: Support v14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!
- Portable Stories: Warn when rendering stories without cleaning up first - [#27008](https://github.com/storybookjs/storybook/pull/27008), thanks @JReinhold!
- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!
- Test: Support module mocking with conditional subpath imports in `package.json` - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!
- UI: Fix not re-rendering tabs on state change - [#26899](https://github.com/storybookjs/storybook/pull/26899), thanks @lifeiscontent!
- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!
- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!

## 8.1.0-alpha.7

- CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!
Expand Down
4 changes: 2 additions & 2 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -3859,7 +3859,7 @@ export default {
We are replacing `@storybook/addon-knobs` with `@storybook/addon-controls`.
- [Rationale & discussion](https://github.com/storybookjs/storybook/discussions/15060)
- [Migration notes](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#how-do-i-migrate-from-addon-knobs)
- [Migration notes](https://github.com/storybookjs/storybook/blob/next/code/addons/controls/README.md#how-do-i-migrate-from-addon-knobs)
#### Deprecated scoped blocks imports
Expand Down Expand Up @@ -5088,7 +5088,7 @@ SB 5.1.0 added [support for project root `babel.config.js` files](https://github
### React native server
Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared to 4.1 (we didn't ship a version of RN in 5.0 due to timing constraints). Storybook for RN consists of an an UI for browsing stories on-device or in a simulator, and an optional webserver which can also be used to browse stories and web addons.
Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared to 4.1 (we didn't ship a version of RN in 5.0 due to timing constraints). Storybook for RN consists of an UI for browsing stories on-device or in a simulator, and an optional webserver which can also be used to browse stories and web addons.
5.1 refactors both pieces:
Expand Down
2 changes: 1 addition & 1 deletion code/addons/a11y/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "8.1.0-alpha.7",
"version": "8.1.0-alpha.8",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/actions/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "8.1.0-alpha.7",
"version": "8.1.0-alpha.8",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
Expand Down
3 changes: 3 additions & 0 deletions code/addons/actions/template/stories/spies.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ const meta = {
export default meta;

export const ShowSpyOnInActions = {
parameters: {
chromatic: { disable: true },
},
beforeEach() {
console.log('second');
},
Expand Down
2 changes: 1 addition & 1 deletion code/addons/backgrounds/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "8.1.0-alpha.7",
"version": "8.1.0-alpha.8",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
Expand Down
4 changes: 3 additions & 1 deletion code/addons/controls/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
"version": "8.1.0-alpha.7",
"version": "8.1.0-alpha.8",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
Expand Down Expand Up @@ -52,13 +52,15 @@
},
"dependencies": {
"@storybook/blocks": "workspace:*",
"dequal": "^2.0.2",
"lodash": "^4.17.21",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@storybook/client-logger": "workspace:*",
"@storybook/components": "workspace:*",
"@storybook/core-common": "workspace:*",
"@storybook/icons": "^1.2.5",
"@storybook/manager-api": "workspace:*",
"@storybook/node-logger": "workspace:*",
"@storybook/preview-api": "workspace:*",
Expand Down
67 changes: 50 additions & 17 deletions code/addons/controls/src/ControlsPanel.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { FC } from 'react';
import React, { useEffect, useState } from 'react';
import { dequal as deepEqual } from 'dequal';
import React, { useEffect, useMemo, useState } from 'react';
import { global } from '@storybook/global';
import {
useArgs,
useGlobals,
Expand All @@ -8,19 +9,41 @@ import {
useStorybookState,
} from '@storybook/manager-api';
import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks';

import { styled } from '@storybook/theming';
import type { ArgTypes } from '@storybook/types';

import { PARAM_KEY } from './constants';
import { SaveStory } from './SaveStory';

// Remove undefined values (top-level only)
const clean = (obj: { [key: string]: any }) =>
Object.entries(obj).reduce(
(acc, [key, value]) => (value !== undefined ? Object.assign(acc, { [key]: value }) : acc),
{} as typeof obj
);

const AddonWrapper = styled.div({
display: 'grid',
gridTemplateRows: '1fr 39px',
height: '100%',
maxHeight: '100vh',
overflowY: 'auto',
});

interface ControlsParameters {
sort?: SortType;
expanded?: boolean;
presetColors?: PresetColor[];
}

export const ControlsPanel: FC = () => {
interface ControlsPanelProps {
saveStory: () => Promise<unknown>;
createStory: (storyName: string) => Promise<unknown>;
}

export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) => {
const [isLoading, setIsLoading] = useState(true);
const [args, updateArgs, resetArgs] = useArgs();
const [args, updateArgs, resetArgs, initialArgs] = useArgs();
const [globals] = useGlobals();
const rows = useArgTypes();
const { expanded, sort, presetColors } = useParameter<ControlsParameters>(PARAM_KEY, {});
Expand All @@ -42,18 +65,28 @@ export const ControlsPanel: FC = () => {
return acc;
}, {} as ArgTypes);

const hasUpdatedArgs = useMemo(
() => !!args && !!initialArgs && !deepEqual(clean(args), clean(initialArgs)),
[args, initialArgs]
);

return (
<ArgsTable
key={path} // resets state when switching stories
compact={!expanded && hasControls}
rows={withPresetColors}
args={args}
globals={globals}
updateArgs={updateArgs}
resetArgs={resetArgs}
inAddonPanel
sort={sort}
isLoading={isLoading}
/>
<AddonWrapper>
<ArgsTable
key={path} // resets state when switching stories
compact={!expanded && hasControls}
rows={withPresetColors}
args={args}
globals={globals}
updateArgs={updateArgs}
resetArgs={resetArgs}
inAddonPanel
sort={sort}
isLoading={isLoading}
/>
{hasControls && hasUpdatedArgs && global.CONFIG_TYPE === 'DEVELOPMENT' && (
<SaveStory {...{ resetArgs, saveStory, createStory }} />
)}
</AddonWrapper>
);
};
59 changes: 59 additions & 0 deletions code/addons/controls/src/SaveStory.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import type { Meta, StoryObj } from '@storybook/react';

import { SaveStory } from './SaveStory';
import { expect, fireEvent, fn, userEvent, within } from '@storybook/test';

const meta = {
component: SaveStory,
args: {
saveStory: fn((...args) => Promise.resolve(action('saveStory')(...args))),
createStory: fn((...args) => Promise.resolve(action('createStory')(...args))),
resetArgs: fn(action('resetArgs')),
},
parameters: {
layout: 'fullscreen',
},
decorators: [
(Story) => (
<div style={{ minHeight: '100vh' }}>
<Story />
</div>
),
],
} satisfies Meta<typeof SaveStory>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {};

export const Creating = {
play: async ({ canvasElement }) => {
const createButton = await within(canvasElement).findByRole('button', { name: /Create/i });
await fireEvent.click(createButton);
await new Promise((resolve) => setTimeout(resolve, 300));
},
} satisfies Story;

export const Created: Story = {
play: async (context) => {
await Creating.play(context);

const dialog = await within(document.body).findByRole('dialog');
const input = await within(dialog).findByRole('textbox');
await userEvent.type(input, 'MyNewStory');

fireEvent.submit(dialog.getElementsByTagName('form')[0]);
await expect(context.args.createStory).toHaveBeenCalledWith('MyNewStory');
},
};

export const CreatingFailed: Story = {
args: {
// eslint-disable-next-line local-rules/no-uncategorized-errors
createStory: fn((...args) => Promise.reject<any>(new Error('Story already exists.'))),
},
play: Created.play,
};
Loading

0 comments on commit 2a0d245

Please sign in to comment.