mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Upgrade Storybook

Browse source 
Co-authored-by: Scott Nonnenberg <scott@signal.org>
This commit is contained in:
Jamie Kyle 2023-10-11 12:06:43 -07:00 • committed by GitHub
parent 8c966dfbd8
commit 502ea174ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
328 changed files with 10863 additions and 12432 deletions
Download patch file Download diff file Expand all files Collapse all files

7
ts/components/installScreen/InstallScreenChoosingDeviceNameStep.stories.tsx
View file

@ -2,19 +2,18 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import type { Meta } from '@storybook/react';
import { setupI18n } from '../../util/setupI18n';
import enMessages from '../../../_locales/en/messages.json';
import type { PropsType } from './InstallScreenChoosingDeviceNameStep';
import { InstallScreenChoosingDeviceNameStep } from './InstallScreenChoosingDeviceNameStep';
const i18n = setupI18n('en', enMessages);
export default {
title: 'Components/InstallScreen/InstallScreenChoosingDeviceNameStep',
};
} satisfies Meta<PropsType>;
function Wrapper() {
const [deviceName, setDeviceName] = useState<string>('Default value');

2
ts/components/installScreen/InstallScreenChoosingDeviceNameStep.tsx
View file

@ -16,7 +16,7 @@ import { InstallScreenSignalLogo } from './InstallScreenSignalLogo';
// DESKTOP-2844.
export const MAX_DEVICE_NAME_LENGTH = 50;
type PropsType = {
export type PropsType = {
deviceName: string;
i18n: LocalizerType;
onSubmit: () => void;

27
ts/components/installScreen/InstallScreenErrorStep.stories.tsx
View file

@ -2,19 +2,18 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { action } from '@storybook/addon-actions';
import type { Meta } from '@storybook/react';
import { setupI18n } from '../../util/setupI18n';
import enMessages from '../../../_locales/en/messages.json';
import type { Props } from './InstallScreenErrorStep';
import { InstallScreenErrorStep, InstallError } from './InstallScreenErrorStep';
const i18n = setupI18n('en', enMessages);
export default {
title: 'Components/InstallScreen/InstallScreenErrorStep',
};
} satisfies Meta<Props>;
const defaultProps = {
i18n,
@ -29,26 +28,14 @@ export const _TooManyDevices = (): JSX.Element => (
/>
);
_TooManyDevices.story = {
name: 'Too many devices',
};
export const _TooOld = (): JSX.Element => (
<InstallScreenErrorStep {...defaultProps} error={InstallError.TooOld} />
);
_TooOld.story = {
name: 'Too old',
};
export const __TooOld = (): JSX.Element => (
<InstallScreenErrorStep {...defaultProps} error={InstallError.TooOld} />
);
__TooOld.story = {
name: 'Too old',
};
export const _ConnectionFailed = (): JSX.Element => (
<InstallScreenErrorStep
{...defaultProps}
@ -56,14 +43,6 @@ export const _ConnectionFailed = (): JSX.Element => (
/>
);
_ConnectionFailed.story = {
name: 'Connection failed',
};
export const _UnknownError = (): JSX.Element => (
<InstallScreenErrorStep {...defaultProps} error={InstallError.UnknownError} />
);
_UnknownError.story = {
name: 'Unknown error',
};

14
ts/components/installScreen/InstallScreenErrorStep.tsx
View file

@ -19,17 +19,19 @@ export enum InstallError {
QRCodeFailed,
}
export type Props = Readonly<{
error: InstallError;
i18n: LocalizerType;
quit: () => unknown;
tryAgain: () => unknown;
}>;
export function InstallScreenErrorStep({
error,
i18n,
quit,
tryAgain,
}: Readonly<{
error: InstallError;
i18n: LocalizerType;
quit: () => unknown;
tryAgain: () => unknown;
}>): ReactElement {
}: Props): ReactElement {
let errorMessage: string;
let buttonText = i18n('icu:installTryAgain');
let onClickButton = () => tryAgain();

6
ts/components/installScreen/InstallScreenLinkInProgress.stories.tsx
View file

@ -2,17 +2,17 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import type { Meta } from '@storybook/react';
import { setupI18n } from '../../util/setupI18n';
import enMessages from '../../../_locales/en/messages.json';
import type { Props } from './InstallScreenLinkInProgressStep';
import { InstallScreenLinkInProgressStep } from './InstallScreenLinkInProgressStep';
const i18n = setupI18n('en', enMessages);
export default {
title: 'Components/InstallScreen/InstallScreenLinkInProgressStep',
};
} satisfies Meta<Props>;
export function Default(): JSX.Element {
return <InstallScreenLinkInProgressStep i18n={i18n} />;

6
ts/components/installScreen/InstallScreenLinkInProgressStep.tsx
View file

@ -10,9 +10,9 @@ import { Spinner } from '../Spinner';
import { TitlebarDragArea } from '../TitlebarDragArea';
import { InstallScreenSignalLogo } from './InstallScreenSignalLogo';
export function InstallScreenLinkInProgressStep({
i18n,
}: Readonly<{ i18n: LocalizerType }>): ReactElement {
export type Props = Readonly<{ i18n: LocalizerType }>;
export function InstallScreenLinkInProgressStep({ i18n }: Props): ReactElement {
return (
<div className="module-InstallScreenLinkInProgressStep">
<TitlebarDragArea />

99
ts/components/installScreen/InstallScreenQrCodeNotScannedStep.stories.tsx
View file

@ -3,13 +3,13 @@
import React, { useEffect, useState } from 'react';
import { action } from '@storybook/addon-actions';
import type { Meta, StoryFn } from '@storybook/react';
import { setupI18n } from '../../util/setupI18n';
import { DialogType } from '../../types/Dialogs';
import enMessages from '../../../_locales/en/messages.json';
import type { Loadable } from '../../util/loadable';
import { LoadingState } from '../../util/loadable';
import type { PropsType } from './InstallScreenQrCodeNotScannedStep';
import { InstallScreenQrCodeNotScannedStep } from './InstallScreenQrCodeNotScannedStep';
const i18n = setupI18n('en', enMessages);
@ -32,7 +32,7 @@ const DEFAULT_UPDATES = {
export default {
title: 'Components/InstallScreen/InstallScreenQrCodeNotScannedStep',
argTypes: {},
};
} satisfies Meta<PropsType>;
function Simulation({ finalResult }: { finalResult: Loadable<string> }) {
const [provisioningUrl, setProvisioningUrl] = useState<Loadable<string>>({
@ -77,10 +77,6 @@ export function QrCodeLoading(): JSX.Element {
);
}
QrCodeLoading.story = {
name: 'QR code loading',
};
export function QrCodeFailedToLoad(): JSX.Element {
return (
<InstallScreenQrCodeNotScannedStep
@ -98,10 +94,6 @@ export function QrCodeFailedToLoad(): JSX.Element {
);
}
QrCodeFailedToLoad.story = {
name: 'QR code failed to load',
};
export function QrCodeLoaded(): JSX.Element {
return (
<InstallScreenQrCodeNotScannedStep
@ -116,18 +108,10 @@ export function QrCodeLoaded(): JSX.Element {
);
}
QrCodeLoaded.story = {
name: 'QR code loaded',
};
export function SimulatedLoading(): JSX.Element {
return <Simulation finalResult={LOADED_URL} />;
}
SimulatedLoading.story = {
name: 'Simulated loading',
};
export function SimulatedFailure(): JSX.Element {
return (
<Simulation
@ -139,46 +123,43 @@ export function SimulatedFailure(): JSX.Element {
);
}
SimulatedFailure.story = {
name: 'Simulated failure',
};
export const WithUpdateKnobs: StoryFn<PropsType & { dialogType: DialogType }> =
// eslint-disable-next-line react/function-component-definition
function WithUpdateKnobs({
dialogType,
currentVersion,
}: {
dialogType: DialogType;
currentVersion: string;
}): JSX.Element {
return (
<InstallScreenQrCodeNotScannedStep
i18n={i18n}
provisioningUrl={LOADED_URL}
hasExpired
updates={{
...DEFAULT_UPDATES,
dialogType,
}}
OS="macOS"
startUpdate={action('startUpdate')}
currentVersion={currentVersion}
retryGetQrCode={action('retryGetQrCode')}
/>
);
};
export function WithUpdateKnobs({
dialogType,
currentVersion,
}: {
dialogType: DialogType;
currentVersion: string;
}): JSX.Element {
return (
<InstallScreenQrCodeNotScannedStep
i18n={i18n}
provisioningUrl={LOADED_URL}
hasExpired
updates={{
...DEFAULT_UPDATES,
dialogType,
}}
OS="macOS"
startUpdate={action('startUpdate')}
currentVersion={currentVersion}
retryGetQrCode={action('retryGetQrCode')}
/>
);
}
WithUpdateKnobs.story = {
name: 'With Update Knobs',
argTypes: {
dialogType: {
control: { type: 'select' },
defaultValue: DialogType.AutoUpdate,
options: Object.values(DialogType),
},
currentVersion: {
control: { type: 'select' },
defaultValue: 'v6.0.0',
options: ['v6.0.0', 'v6.1.0-beta.1'],
},
WithUpdateKnobs.argTypes = {
dialogType: {
control: { type: 'select' },
options: Object.values(DialogType),
},
currentVersion: {
control: { type: 'select' },
options: ['v6.0.0', 'v6.1.0-beta.1'],
},
};
WithUpdateKnobs.args = {
dialogType: DialogType.AutoUpdate,
currentVersion: 'v6.0.0',
};

2
ts/components/installScreen/InstallScreenQrCodeNotScannedStep.tsx
View file

@ -23,7 +23,7 @@ import { Environment, getEnvironment } from '../../environment';
// We can't always use destructuring assignment because of the complexity of this props
// type.
type PropsType = Readonly<{
export type PropsType = Readonly<{
i18n: LocalizerType;
provisioningUrl: Loadable<string>;
hasExpired?: boolean;