Upgrade storybook to 8
This commit is contained in:
parent
92f25e8a75
commit
c68aac7401
22 changed files with 4665 additions and 8269 deletions
|
@ -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;
|
||||
|
|
|
@ -198,3 +198,4 @@ export const parameters = {
|
|||
disabledRules: ['html-has-lang'],
|
||||
},
|
||||
};
|
||||
export const tags = [];
|
||||
|
|
|
@ -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
9590
package-lock.json
generated
File diff suppressed because it is too large
Load diff
32
package.json
32
package.json
|
@ -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",
|
||||
|
|
|
@ -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;
|
|
@ -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;
|
||||
};
|
||||
/**
|
|
@ -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;
|
||||
|
1962
patches/@vitest+expect+1.6.0.patch
Normal file
1962
patches/@vitest+expect+1.6.0.patch
Normal file
File diff suppressed because it is too large
Load diff
|
@ -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),
|
||||
|
|
|
@ -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 },
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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'),
|
||||
|
|
|
@ -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'),
|
||||
},
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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' },
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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>;
|
||||
|
|
|
@ -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
Loading…
Add table
Add a link
Reference in a new issue