Skip to content

Commit 917d7fc

Browse files
committed
Merge branch 'next' into chalkless
2 parents d955219 + 8a95c27 commit 917d7fc

File tree

476 files changed

+3971
-1931
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

476 files changed

+3971
-1931
lines changed

.git-blame-ignore-revs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
34e364a0ca1d93555d36a7367d78e8e229493de8
22
c0896915fb7fb9a8dd416b9aebca17abd909d1c1
33
a41c227037e7e7249b8b376f838f4f8bcc3e3e59
4-
13c46e6c0b7f3dd8cf4ba42d1cfd6714f4777d54
4+
13c46e6c0b7f3dd8cf4ba42d1cfd6714f4777d54
5+
0a4522a3f84773f39daec4820c49b8a92e9f9d11

.github/workflows/scorecards.yml

Lines changed: 0 additions & 72 deletions
This file was deleted.

CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
## 8.2.7
2+
3+
- CPC: Fix type usage in renderers - [#28745](https://github.com/storybookjs/storybook/pull/28745), thanks @ndelangen!
4+
- Core: Introduce run over play in portable stories, and revert back play changes of 8.2 - [#28764](https://github.com/storybookjs/storybook/pull/28764), thanks @kasperpeulen!
5+
16
## 8.2.6
27

38
- CPC: Fix missing exports for addon-kit - [#28691](https://github.com/storybookjs/storybook/pull/28691), thanks @ndelangen!

CHANGELOG.prerelease.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
## 8.3.0-alpha.4
2+
3+
- CSF: Allow overridding globals at the story level - [#26654](https://github.com/storybookjs/storybook/pull/26654), thanks @tmeasday!
4+
- Core: Introduce run over play in portable stories, and revert back play changes of 8.2 - [#28764](https://github.com/storybookjs/storybook/pull/28764), thanks @kasperpeulen!
5+
- Core: Split Storybook CLI - [#28519](https://github.com/storybookjs/storybook/pull/28519), thanks @kasperpeulen!
6+
- Fix: Invariant failed: Expected package.json#version to be defined in the "undefined" package - [#28752](https://github.com/storybookjs/storybook/pull/28752), thanks @abcdmku!
7+
- Next.js: Make RSC portable-stories compatible - [#28756](https://github.com/storybookjs/storybook/pull/28756), thanks @valentinpalkovic!
8+
- UI: Fix collapse/expand all functionality - [#28582](https://github.com/storybookjs/storybook/pull/28582), thanks @filipemelo2002!
9+
110
## 8.3.0-alpha.3
211

312
- Angular: Fix Angular template error for props with a circular reference - [#28498](https://github.com/storybookjs/storybook/pull/28498), thanks @Marklb!

MIGRATION.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -444,7 +444,7 @@ Starting in 8.2 `preview.js` `globals` are deprecated and have been renamed to `
444444
// .storybook/preview.js
445445
export default {
446446
- globals: [ a: 1, b: 2 ],
447-
+ initiaGlobals: [ a: 1, b: 2 ],
447+
+ initialGlobals: [ a: 1, b: 2 ],
448448
}
449449
```
450450

code/.storybook/main.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,10 @@ const config: StorybookConfig = {
6868
directory: '../addons/toolbars/template/stories',
6969
titlePrefix: 'addons/toolbars',
7070
},
71+
{
72+
directory: '../addons/themes/template/stories',
73+
titlePrefix: 'addons/themes',
74+
},
7175
{
7276
directory: '../addons/onboarding/src',
7377
titlePrefix: 'addons/onboarding',
@@ -83,6 +87,7 @@ const config: StorybookConfig = {
8387
],
8488
addons: [
8589
'@storybook/addon-links',
90+
'@storybook/addon-themes',
8691
'@storybook/addon-essentials',
8792
'@storybook/addon-interactions',
8893
'@storybook/addon-storysource',
@@ -119,7 +124,6 @@ const config: StorybookConfig = {
119124
},
120125
features: {
121126
viewportStoryGlobals: true,
122-
themesStoryGlobals: true,
123127
backgroundsStoryGlobals: true,
124128
},
125129
viteFinal: (viteConfig, { configType }) =>

code/.storybook/preview.tsx

Lines changed: 80 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,17 @@ import {
1212
} from 'storybook/internal/theming';
1313
import { useArgs, DocsContext as DocsContextProps } from 'storybook/internal/preview-api';
1414
import type { PreviewWeb } from 'storybook/internal/preview-api';
15-
import type { ReactRenderer } from '@storybook/react';
15+
import type { ReactRenderer, Decorator } from '@storybook/react';
1616
import type { Channel } from 'storybook/internal/channels';
1717

1818
import { DocsContext } from '@storybook/blocks';
19+
import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
1920

2021
import { DocsPageWrapper } from '../lib/blocks/src/components';
2122

2223
const { document } = global;
2324

24-
const ThemeBlock = styled.div<{ side: 'left' | 'right' }>(
25+
const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>(
2526
{
2627
position: 'absolute',
2728
top: 0,
@@ -31,8 +32,10 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right' }>(
3132
height: '100vh',
3233
bottom: 0,
3334
overflow: 'auto',
34-
padding: 10,
3535
},
36+
({ layout }) => ({
37+
padding: layout === 'fullscreen' ? 0 : '1rem',
38+
}),
3639
({ theme }) => ({
3740
background: theme.background.content,
3841
color: theme.color.defaultText,
@@ -49,14 +52,17 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right' }>(
4952
}
5053
);
5154

52-
const ThemeStack = styled.div(
55+
const ThemeStack = styled.div<{ layout: string }>(
5356
{
5457
position: 'relative',
55-
minHeight: 'calc(50vh - 15px)',
58+
flex: 1,
5659
},
5760
({ theme }) => ({
5861
background: theme.background.content,
5962
color: theme.color.defaultText,
63+
}),
64+
({ layout }) => ({
65+
padding: layout === 'fullscreen' ? 0 : '1rem',
6066
})
6167
);
6268

@@ -80,6 +86,25 @@ const PlayFnNotice = styled.div(
8086
})
8187
);
8288

89+
const StackContainer = ({ children, layout }) => (
90+
<div
91+
style={{
92+
height: '100%',
93+
display: 'flex',
94+
flexDirection: 'column',
95+
// margin: layout === 'fullscreen' ? 0 : '-1rem',
96+
}}
97+
>
98+
<style dangerouslySetInnerHTML={{ __html: 'html, body, #storybook-root { height: 100%; }' }} />
99+
{layout === 'fullscreen' ? null : (
100+
<style
101+
dangerouslySetInnerHTML={{ __html: 'html, body { padding: 0!important; margin: 0; }' }}
102+
/>
103+
)}
104+
{children}
105+
</div>
106+
);
107+
83108
const ThemedSetRoot = () => {
84109
const theme = useTheme();
85110

@@ -159,10 +184,20 @@ export const decorators = [
159184
/**
160185
* This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar
161186
*/
162-
(StoryFn, { globals, parameters, playFunction, args }) => {
163-
const defaultTheme =
164-
isChromatic() && !playFunction && args.autoplay !== true ? 'stacked' : 'light';
165-
const theme = globals.theme || parameters.theme || defaultTheme;
187+
(StoryFn, { globals, playFunction, args, storyGlobals, parameters }) => {
188+
let theme = globals.sb_theme;
189+
let showPlayFnNotice = false;
190+
191+
// this makes the decorator be out of 'phase' with the actually selected theme in the toolbar
192+
// but this is acceptable, I guess
193+
// we need to ensure only a single rendering in chromatic
194+
// a more 'correct' approach would be to set a specific theme global on every story that has a playFunction
195+
if (playFunction && args.autoplay !== false && !(theme === 'light' || theme === 'dark')) {
196+
theme = 'light';
197+
showPlayFnNotice = true;
198+
} else if (isChromatic() && !storyGlobals.sb_theme && !playFunction) {
199+
theme = 'stacked';
200+
}
166201

167202
switch (theme) {
168203
case 'side-by-side': {
@@ -172,12 +207,12 @@ export const decorators = [
172207
<Global styles={createReset} />
173208
</ThemeProvider>
174209
<ThemeProvider theme={convert(themes.light)}>
175-
<ThemeBlock side="left" data-side="left">
210+
<ThemeBlock side="left" data-side="left" layout={parameters.layout}>
176211
<StoryFn />
177212
</ThemeBlock>
178213
</ThemeProvider>
179214
<ThemeProvider theme={convert(themes.dark)}>
180-
<ThemeBlock side="right" data-side="right">
215+
<ThemeBlock side="right" data-side="right" layout={parameters.layout}>
181216
<StoryFn />
182217
</ThemeBlock>
183218
</ThemeProvider>
@@ -190,16 +225,18 @@ export const decorators = [
190225
<ThemeProvider theme={convert(themes.light)}>
191226
<Global styles={createReset} />
192227
</ThemeProvider>
193-
<ThemeProvider theme={convert(themes.light)}>
194-
<ThemeStack data-side="left">
195-
<StoryFn />
196-
</ThemeStack>
197-
</ThemeProvider>
198-
<ThemeProvider theme={convert(themes.dark)}>
199-
<ThemeStack data-side="right">
200-
<StoryFn />
201-
</ThemeStack>
202-
</ThemeProvider>
228+
<StackContainer layout={parameters.layout}>
229+
<ThemeProvider theme={convert(themes.light)}>
230+
<ThemeStack data-side="left" layout={parameters.layout}>
231+
<StoryFn />
232+
</ThemeStack>
233+
</ThemeProvider>
234+
<ThemeProvider theme={convert(themes.dark)}>
235+
<ThemeStack data-side="right" layout={parameters.layout}>
236+
<StoryFn />
237+
</ThemeStack>
238+
</ThemeProvider>
239+
</StackContainer>
203240
</Fragment>
204241
);
205242
}
@@ -209,7 +246,7 @@ export const decorators = [
209246
<ThemeProvider theme={convert(themes[theme])}>
210247
<Global styles={createReset} />
211248
<ThemedSetRoot />
212-
{!parameters.theme && isChromatic() && playFunction && (
249+
{showPlayFnNotice && (
213250
<>
214251
<PlayFnNotice>
215252
<span>
@@ -233,7 +270,7 @@ export const decorators = [
233270
*
234271
* If parameters.withRawArg is not set, this decorator will do nothing
235272
*/
236-
(StoryFn, { parameters, args, hooks }) => {
273+
(StoryFn, { parameters, args }) => {
237274
const [, updateArgs] = useArgs();
238275
if (!parameters.withRawArg) {
239276
return <StoryFn />;
@@ -246,6 +283,7 @@ export const decorators = [
246283
...args,
247284
onChange: (newValue) => {
248285
updateArgs({ [parameters.withRawArg]: newValue });
286+
// @ts-expect-error onChange is not a valid arg
249287
args.onChange?.(newValue);
250288
},
251289
}}
@@ -257,7 +295,7 @@ export const decorators = [
257295
</>
258296
);
259297
},
260-
];
298+
] satisfies Decorator[];
261299

262300
export const parameters = {
263301
options: {
@@ -295,4 +333,22 @@ export const parameters = {
295333
'slategray',
296334
],
297335
},
336+
viewport: {
337+
options: MINIMAL_VIEWPORTS,
338+
},
339+
themes: {
340+
disable: true,
341+
},
342+
backgrounds: {
343+
options: {
344+
light: { name: 'light', value: '#edecec' },
345+
dark: { name: 'dark', value: '#262424' },
346+
blue: { name: 'blue', value: '#1b1a2c' },
347+
},
348+
grid: {
349+
cellSize: 15,
350+
cellAmount: 10,
351+
opacity: 0.4,
352+
},
353+
},
298354
};

code/addons/a11y/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@storybook/addon-a11y",
3-
"version": "8.3.0-alpha.3",
3+
"version": "8.3.0-alpha.4",
44
"description": "Test component compliance with web accessibility standards",
55
"keywords": [
66
"a11y",

code/addons/actions/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@storybook/addon-actions",
3-
"version": "8.3.0-alpha.3",
3+
"version": "8.3.0-alpha.4",
44
"description": "Get UI feedback when an action is performed on an interactive element",
55
"keywords": [
66
"storybook",

code/addons/backgrounds/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@storybook/addon-backgrounds",
3-
"version": "8.3.0-alpha.3",
3+
"version": "8.3.0-alpha.4",
44
"description": "Switch backgrounds to view components in different settings",
55
"keywords": [
66
"addon",
@@ -80,7 +80,7 @@
8080
"./src/manager.tsx"
8181
],
8282
"previewEntries": [
83-
"./src/preview.tsx"
83+
"./src/preview.ts"
8484
]
8585
},
8686
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",

0 commit comments

Comments
 (0)