Upgrade storybook to 8

This commit is contained in:
Fedor Indutny 2024-07-08 11:23:27 -07:00 committed by GitHub
parent 92f25e8a75
commit c68aac7401
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 4665 additions and 8269 deletions

View file

@ -8,7 +8,9 @@ const config: StorybookConfig = {
typescript: {
reactDocgen: false,
},
stories: ['../ts/components/**/*.stories.tsx'],
addons: [
'@storybook/addon-a11y',
'@storybook/addon-actions',
@ -17,15 +19,19 @@ const config: StorybookConfig = {
'@storybook/addon-toolbars',
'@storybook/addon-viewport',
'@storybook/addon-jest',
// This must be imported last.
'@storybook/addon-interactions',
'@storybook/addon-webpack5-compiler-swc',
],
framework: '@storybook/react-webpack5',
core: {},
features: {
storyStoreV7: true,
core: {
disableTelemetry: true,
},
features: {},
staticDirs: [
{ from: '../fonts', to: 'fonts' },
{ from: '../images', to: 'images' },
@ -35,6 +41,7 @@ const config: StorybookConfig = {
to: 'node_modules/emoji-datasource-apple/img',
},
],
webpackFinal(config) {
config.cache = {
type: 'filesystem',
@ -97,6 +104,8 @@ const config: StorybookConfig = {
return config;
},
docs: {},
};
export default config;

View file

@ -198,3 +198,4 @@ export const parameters = {
disabledRules: ['html-has-lang'],
},
};
export const tags = [];

View file

@ -776,6 +776,10 @@ Signal Desktop makes use of the following open source projects.
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
## @storybook/preview-api
License: MIT
## @types/fabric
MIT License

9590
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -106,6 +106,7 @@
"@signalapp/libsignal-client": "0.51.1",
"@signalapp/ringrtc": "2.44.2",
"@signalapp/windows-dummy-keystroke": "1.0.0",
"@storybook/preview-api": "8.1.11",
"@types/fabric": "4.5.3",
"backbone": "1.4.0",
"blob-util": "2.0.2",
@ -211,23 +212,22 @@
"@indutny/rezip-electron": "1.3.1",
"@mixer/parallel-prettier": "2.0.3",
"@signalapp/mock-server": "6.6.0",
"@storybook/addon-a11y": "7.4.5",
"@storybook/addon-actions": "7.4.5",
"@storybook/addon-controls": "7.4.5",
"@storybook/addon-interactions": "7.4.5",
"@storybook/addon-jest": "7.4.5",
"@storybook/addon-measure": "7.4.5",
"@storybook/addon-toolbars": "7.4.5",
"@storybook/addon-viewport": "7.4.5",
"@storybook/addons": "7.4.5",
"@storybook/jest": "0.2.2",
"@storybook/react": "7.4.5",
"@storybook/react-webpack5": "7.4.5",
"@storybook/addon-a11y": "8.1.11",
"@storybook/addon-actions": "8.1.11",
"@storybook/addon-controls": "8.1.11",
"@storybook/addon-interactions": "8.1.11",
"@storybook/addon-jest": "8.1.11",
"@storybook/addon-measure": "8.1.11",
"@storybook/addon-toolbars": "8.1.11",
"@storybook/addon-viewport": "8.1.11",
"@storybook/addon-webpack5-compiler-swc": "1.0.4",
"@storybook/react": "8.1.11",
"@storybook/react-webpack5": "8.1.11",
"@storybook/test": "8.1.11",
"@storybook/test-runner": "0.19.0",
"@storybook/testing-library": "0.2.2",
"@types/backbone": "1.4.16",
"@types/blueimp-load-image": "5.14.1",
"@types/chai": "4.2.18",
"@types/chai": "4.3.16",
"@types/chai-as-promised": "7.1.4",
"@types/classnames": "2.2.3",
"@types/config": "0.0.39",
@ -280,7 +280,7 @@
"babel-loader": "9.1.3",
"babel-plugin-lodash": "3.3.4",
"casual": "1.6.2",
"chai": "4.3.4",
"chai": "4.4.1",
"chai-as-promised": "7.1.1",
"chalk": "4.1.2",
"chokidar-cli": "3.0.0",
@ -325,7 +325,7 @@
"sass": "1.49.7",
"sass-loader": "10.2.0",
"sinon": "11.1.1",
"storybook": "7.6.20",
"storybook": "8.1.11",
"style-loader": "1.0.0",
"stylelint": "15.4.0",
"stylelint-config-css-modules": "4.2.0",

View file

@ -1,13 +0,0 @@
diff --git a/node_modules/@storybook/manager-api/dist/index.d.ts b/node_modules/@storybook/manager-api/dist/index.d.ts
index 7afb86e..a15b801 100644
--- a/node_modules/@storybook/manager-api/dist/index.d.ts
+++ b/node_modules/@storybook/manager-api/dist/index.d.ts
@@ -822,7 +822,7 @@ declare class ManagerProvider extends Component<ManagerProviderProps, State> {
static getDerivedStateFromProps(props: ManagerProviderProps, state: State): State;
shouldComponentUpdate(nextProps: ManagerProviderProps, nextState: State): boolean;
initModules: () => void;
- render(): React.JSX.Element;
+ render(): JSX.Element;
}
interface ManagerConsumerProps<P = unknown> {
filter?: (combo: Combo) => P;

View file

@ -1,22 +0,0 @@
diff --git a/node_modules/@storybook/router/dist/index.d.ts b/node_modules/@storybook/router/dist/index.d.ts
index ed699f7..71f48eb 100644
--- a/node_modules/@storybook/router/dist/index.d.ts
+++ b/node_modules/@storybook/router/dist/index.d.ts
@@ -335,7 +335,7 @@ declare const useNavigate: () => (to: To | number, { plain, ...options }?: any)
* A component that will navigate to a new location/path when clicked
*/
declare const Link: {
- ({ to, children, ...rest }: LinkProps): React__default.JSX.Element;
+ ({ to, children, ...rest }: LinkProps): JSX.Element;
displayName: string;
};
/**
@@ -343,7 +343,7 @@ declare const Link: {
* and will be called whenever it changes when it changes
*/
declare const Location: {
- ({ children }: LocationProps): React__default.JSX.Element;
+ ({ children }: LocationProps): JSX.Element;
displayName: string;
};
/**

View file

@ -1,35 +0,0 @@
diff --git a/node_modules/@types/jest/index.d.ts b/node_modules/@types/jest/index.d.ts
index b37b188..1908c0c 100755
--- a/node_modules/@types/jest/index.d.ts
+++ b/node_modules/@types/jest/index.d.ts
@@ -30,18 +30,18 @@
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// Minimum TypeScript Version: 4.3
-declare var beforeAll: jest.Lifecycle;
-declare var beforeEach: jest.Lifecycle;
-declare var afterAll: jest.Lifecycle;
-declare var afterEach: jest.Lifecycle;
-declare var describe: jest.Describe;
-declare var fdescribe: jest.Describe;
-declare var xdescribe: jest.Describe;
-declare var it: jest.It;
-declare var fit: jest.It;
-declare var xit: jest.It;
-declare var test: jest.It;
-declare var xtest: jest.It;
+// declare var beforeAll: jest.Lifecycle;
+// declare var beforeEach: jest.Lifecycle;
+// declare var afterAll: jest.Lifecycle;
+// declare var afterEach: jest.Lifecycle;
+// declare var describe: jest.Describe;
+// declare var fdescribe: jest.Describe;
+// declare var xdescribe: jest.Describe;
+// declare var it: jest.It;
+// declare var fit: jest.It;
+// declare var xit: jest.It;
+// declare var test: jest.It;
+// declare var xtest: jest.It;
declare const expect: jest.Expect;

File diff suppressed because it is too large Load diff

View file

@ -4,9 +4,8 @@
import type { Meta, StoryFn } from '@storybook/react';
import * as React from 'react';
import { action } from '@storybook/addon-actions';
import { expect, jest } from '@storybook/jest';
import { isBoolean } from 'lodash';
import { within, userEvent } from '@storybook/testing-library';
import { expect, fn, within, userEvent } from '@storybook/test';
import type { AvatarColorType } from '../types/Colors';
import type { Props } from './Avatar';
import enMessages from '../../_locales/en/messages.json';
@ -19,19 +18,6 @@ import { setupI18n } from '../util/setupI18n';
const i18n = setupI18n('en', enMessages);
const colorMap: Record<string, AvatarColorType> = AvatarColors.reduce(
(m, color) => ({
...m,
[color]: color,
}),
{}
);
const conversationTypeMap: Record<string, Props['conversationType']> = {
direct: 'direct',
group: 'group',
};
export default {
title: 'Components/Avatar',
component: Avatar,
@ -41,19 +27,19 @@ export default {
},
blur: {
control: { type: 'radio' },
options: {
Undefined: undefined,
NoBlur: AvatarBlur.NoBlur,
BlurPicture: AvatarBlur.BlurPicture,
BlurPictureWithClickToView: AvatarBlur.BlurPictureWithClickToView,
},
options: [
undefined,
AvatarBlur.NoBlur,
AvatarBlur.BlurPicture,
AvatarBlur.BlurPictureWithClickToView,
],
},
color: {
options: colorMap,
options: AvatarColors,
},
conversationType: {
control: { type: 'radio' },
options: conversationTypeMap,
options: ['direct', 'group'],
},
size: {
control: false,
@ -64,7 +50,7 @@ export default {
},
theme: {
control: { type: 'radio' },
options: ThemeType,
options: [ThemeType.light, ThemeType.dark],
},
},
args: {
@ -88,7 +74,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
isMe: false,
loading: Boolean(overrideProps.loading),
noteToSelf: Boolean(overrideProps.noteToSelf),
onClick: jest.fn(action('onClick')),
onClick: fn(action('onClick')),
onClickBadge: action('onClickBadge'),
phoneNumber: overrideProps.phoneNumber || '',
searchResult: Boolean(overrideProps.searchResult),

View file

@ -36,25 +36,20 @@ export default {
},
state: {
control: { type: 'radio' },
options: {
Open: State.Open,
Closed: State.Closed,
Reserving: State.Reserving,
Confirming: State.Confirming,
},
options: [State.Open, State.Closed, State.Reserving, State.Confirming],
},
error: {
control: { type: 'radio' },
options: {
None: undefined,
NotEnoughCharacters: UsernameReservationError.NotEnoughCharacters,
TooManyCharacters: UsernameReservationError.TooManyCharacters,
CheckStartingCharacter: UsernameReservationError.CheckStartingCharacter,
CheckCharacters: UsernameReservationError.CheckCharacters,
UsernameNotAvailable: UsernameReservationError.UsernameNotAvailable,
General: UsernameReservationError.General,
TooManyAttempts: UsernameReservationError.TooManyAttempts,
},
options: [
undefined,
UsernameReservationError.NotEnoughCharacters,
UsernameReservationError.TooManyCharacters,
UsernameReservationError.CheckStartingCharacter,
UsernameReservationError.CheckCharacters,
UsernameReservationError.UsernameNotAvailable,
UsernameReservationError.General,
UsernameReservationError.TooManyAttempts,
],
},
reservation: {
type: { name: 'string', required: false },

View file

@ -10,8 +10,8 @@ export default {
title: 'Components/LeftPaneBanner',
component: LeftPaneBanner,
argTypes: {
actionText: { control: { type: 'string' } },
children: { control: { type: 'string' } },
actionText: { control: { type: 'text' } },
children: { control: { type: 'text' } },
},
args: {
actionText: 'Fix now',

View file

@ -4,9 +4,8 @@
import type { Meta, ReactRenderer, StoryFn } from '@storybook/react';
import type { PlayFunction } from '@storybook/csf';
import React from 'react';
import { expect, jest } from '@storybook/jest';
import { v4 as uuid } from 'uuid';
import { within, userEvent } from '@storybook/testing-library';
import { expect, fn, within, userEvent } from '@storybook/test';
import { action } from '@storybook/addon-actions';
import type { PropsType } from './MyStories';
@ -31,10 +30,10 @@ export default {
},
args: {
i18n,
onBack: jest.fn(action('onBack')),
onBack: fn(action('onBack')),
onDelete: action('onDelete'),
onForward: jest.fn(action('onForward')),
onSave: jest.fn(action('onSave')),
onForward: fn(action('onForward')),
onSave: fn(action('onSave')),
hasViewReceiptSetting: false,
renderToastManager: () => <i />,
queueStoryDownload: action('queueStoryDownload'),

View file

@ -4,8 +4,7 @@
import type { Meta, ReactRenderer, StoryFn } from '@storybook/react';
import type { PlayFunction } from '@storybook/csf';
import React from 'react';
import { expect, jest } from '@storybook/jest';
import { within, userEvent } from '@storybook/testing-library';
import { expect, fn, within, userEvent } from '@storybook/test';
import { action } from '@storybook/addon-actions';
import type { PropsType } from './MyStoryButton';
@ -26,8 +25,8 @@ export default {
i18n,
me: getDefaultConversation(),
myStories: [getFakeMyStory()],
onAddStory: jest.fn(action('onAddStory')),
onClick: jest.fn(action('onClick')),
onAddStory: fn(action('onAddStory')),
onClick: fn(action('onClick')),
queueStoryDownload: action('queueStoryDownload'),
showToast: action('showToast'),
},

View file

@ -28,11 +28,11 @@ export default {
argTypes: {
usernameEditState: {
control: { type: 'radio' },
options: {
Editing: UsernameEditState.Editing,
ConfirmingDelete: UsernameEditState.ConfirmingDelete,
Deleting: UsernameEditState.Deleting,
},
options: [
UsernameEditState.Editing,
UsernameEditState.ConfirmingDelete,
UsernameEditState.Deleting,
],
},
usernameCorrupted: {
control: 'boolean',

View file

@ -2,10 +2,9 @@
// SPDX-License-Identifier: AGPL-3.0-only
import type { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import React, { useState } from 'react';
import { v4 as generateUuid } from 'uuid';
import { useArgs } from '@storybook/addons';
import { action } from '@storybook/addon-actions';
import type { PropsType } from './StoryViewsNRepliesModal';
import * as durations from '../util/durations';
@ -149,16 +148,17 @@ function getViewsAndReplies() {
// eslint-disable-next-line react/function-component-definition
const Template: StoryFn<PropsType> = args => {
const [, updateArgs] = useArgs();
const [viewTarget, setViewTarget] = useState(args.viewTarget);
function onChangeViewTarget(viewTarget: StoryViewTargetType) {
args.onChangeViewTarget(viewTarget);
updateArgs({ viewTarget });
function onChangeViewTarget(newViewTarget: StoryViewTargetType) {
args.onChangeViewTarget(newViewTarget);
setViewTarget(newViewTarget);
}
return (
<StoryViewsNRepliesModal
{...args}
viewTarget={viewTarget}
onChangeViewTarget={onChangeViewTarget}
/>
);

View file

@ -12,8 +12,8 @@ export default {
component: Toast,
argTypes: {
autoDismissDisabled: { control: { type: 'boolean' } },
className: { control: { type: 'string' } },
children: { control: { type: 'string' } },
className: { control: { type: 'text' } },
children: { control: { type: 'text' } },
timeout: argPresets({
'1s': 1000,
'30s': 30_000,

View file

@ -207,11 +207,11 @@ export default {
component: ToastManager,
argTypes: {
toastType: {
options: ToastType,
options: [...Object.values(ToastType)],
control: { type: 'select' },
},
megaphoneType: {
options: MegaphoneType,
options: [...Object.values(MegaphoneType)],
control: { type: 'select' },
},
},

View file

@ -35,19 +35,19 @@ export default {
title: 'Components/Conversation/Quote',
argTypes: {
isFromMe: {
control: { type: 'checkbox' },
control: { type: 'boolean' },
},
isGiftBadge: {
control: { type: 'checkbox' },
control: { type: 'boolean' },
},
isIncoming: {
control: { type: 'checkbox' },
control: { type: 'boolean' },
},
isViewOnce: {
control: { type: 'checkbox' },
control: { type: 'boolean' },
},
referencedMessageNotFound: {
control: { type: 'checkbox' },
control: { type: 'boolean' },
},
},
args: {

View file

@ -27,12 +27,7 @@ export default {
argTypes: {
count: {
control: { type: 'radio' },
options: {
None: undefined,
Some: 5,
Plenty: 85,
'Please Stop': 1000,
},
options: [undefined, 5, 85, 1000],
},
},
} satisfies Meta<ScrollDownButtonPropsType>;

View file

@ -156,11 +156,11 @@ describe('<Timeline> utilities', () => {
'sending',
];
for (const status of statuses) {
const sameStatusNewer = {
const sameStatusNewer: MaybeMessageTimelineItemType = {
...defaultNewer,
data: { ...defaultNewer.data, status },
};
const current = {
const current: MaybeMessageTimelineItemType = {
...defaultCurrent,
data: { ...defaultCurrent.data, status },
};

File diff suppressed because it is too large Load diff