Upgrade react and storybook

This commit is contained in:
Josh Perez 2022-06-06 20:48:02 -04:00 committed by GitHub
parent 6476a4fe73
commit 42eb4013d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
244 changed files with 15341 additions and 10249 deletions

View file

@ -2,7 +2,6 @@
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean, select } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { DialogUpdate } from './DialogUpdate';
@ -29,9 +28,11 @@ const defaultProps = {
version: 'v7.7.7',
};
const story = storiesOf('Components/DialogUpdate', module);
export default {
title: 'Components/DialogUpdate',
};
story.add('Knobs Playground', () => {
export const KnobsPlayground = (): JSX.Element => {
const containerWidthBreakpoint = select(
'containerWidthBreakpoint',
WidthBreakpoint,
@ -53,108 +54,278 @@ story.add('Knobs Playground', () => {
/>
</FakeLeftPaneContainer>
);
});
};
(
[
['wide', WidthBreakpoint.Wide],
['narrow', WidthBreakpoint.Narrow],
] as const
).forEach(([name, containerWidthBreakpoint]) => {
const defaultPropsForBreakpoint = {
...defaultProps,
containerWidthBreakpoint,
};
export const UpdateWide = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Wide}
dialogType={DialogType.Update}
currentVersion="5.24.0"
/>
</FakeLeftPaneContainer>
);
story.add(`Update (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.Update}
currentVersion="5.24.0"
/>
</FakeLeftPaneContainer>
));
UpdateWide.story = {
name: 'Update (Wide)',
};
story.add(`Download Ready (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.DownloadReady}
downloadSize={30123456}
currentVersion="5.24.0"
/>
</FakeLeftPaneContainer>
));
export const DownloadReadyWide = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Wide}
currentVersion="5.24.0"
dialogType={DialogType.DownloadReady}
downloadSize={30123456}
/>
</FakeLeftPaneContainer>
);
story.add(`Full Download Ready (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.FullDownloadReady}
downloadSize={300123456}
currentVersion="5.24.0"
/>
</FakeLeftPaneContainer>
));
DownloadReadyWide.story = {
name: 'DownloadReady (Wide)',
};
story.add(`Downloading (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.Downloading}
currentVersion="5.24.0"
/>
</FakeLeftPaneContainer>
));
export const FullDownloadReadyWide = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Wide}
currentVersion="5.24.0"
dialogType={DialogType.FullDownloadReady}
downloadSize={300123456}
/>
</FakeLeftPaneContainer>
);
story.add(`Cannot Update (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.Cannot_Update}
currentVersion="5.24.0"
/>
</FakeLeftPaneContainer>
));
FullDownloadReadyWide.story = {
name: 'FullDownloadReady (Wide)',
};
story.add(`Cannot Update Beta (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.Cannot_Update}
currentVersion="5.24.0-beta.1"
/>
</FakeLeftPaneContainer>
));
export const DownloadingWide = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Wide}
currentVersion="5.24.0"
dialogType={DialogType.Downloading}
/>
</FakeLeftPaneContainer>
);
story.add(`Cannot Update & Require Manual (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.Cannot_Update_Require_Manual}
currentVersion="5.24.0"
/>
</FakeLeftPaneContainer>
));
DownloadingWide.story = {
name: 'Downloading (Wide)',
};
story.add(`Cannot Update & Require Manual Beta (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.Cannot_Update_Require_Manual}
currentVersion="5.24.0-beta.1"
/>
</FakeLeftPaneContainer>
));
export const CannotUpdateWide = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Wide}
currentVersion="5.24.0"
dialogType={DialogType.Cannot_Update}
/>
</FakeLeftPaneContainer>
);
story.add(`macOS RO Error (${name} container)`, () => (
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
<DialogUpdate
{...defaultPropsForBreakpoint}
dialogType={DialogType.MacOS_Read_Only}
currentVersion="5.24.0"
/>
</FakeLeftPaneContainer>
));
});
CannotUpdateWide.story = {
name: 'Cannot_Update (Wide)',
};
export const CannotUpdateBetaWide = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Wide}
currentVersion="5.24.0-beta.1"
dialogType={DialogType.Cannot_Update}
/>
</FakeLeftPaneContainer>
);
CannotUpdateBetaWide.story = {
name: 'Cannot_Update_Beta (Wide)',
};
export const CannotUpdateRequireManualWide = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Wide}
currentVersion="5.24.0"
dialogType={DialogType.Cannot_Update_Require_Manual}
/>
</FakeLeftPaneContainer>
);
CannotUpdateRequireManualWide.story = {
name: 'Cannot_Update_Require_Manual (Wide)',
};
export const CannotUpdateRequireManualBetaWide = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Wide}
currentVersion="5.24.0-beta.1"
dialogType={DialogType.Cannot_Update_Require_Manual}
/>
</FakeLeftPaneContainer>
);
CannotUpdateRequireManualBetaWide.story = {
name: 'Cannot_Update_Require_Manual_Beta (Wide)',
};
export const MacOSReadOnlyWide = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Wide}
currentVersion="5.24.0"
dialogType={DialogType.MacOS_Read_Only}
/>
</FakeLeftPaneContainer>
);
MacOSReadOnlyWide.story = {
name: 'MacOS_Read_Only (Wide)',
};
export const UpdateNarrow = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Narrow}
dialogType={DialogType.Update}
currentVersion="5.24.0"
/>
</FakeLeftPaneContainer>
);
UpdateNarrow.story = {
name: 'Update (Narrow)',
};
export const DownloadReadyNarrow = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Narrow}
currentVersion="5.24.0"
dialogType={DialogType.DownloadReady}
downloadSize={30123456}
/>
</FakeLeftPaneContainer>
);
DownloadReadyNarrow.story = {
name: 'DownloadReady (Narrow)',
};
export const FullDownloadReadyNarrow = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Narrow}
currentVersion="5.24.0"
dialogType={DialogType.FullDownloadReady}
downloadSize={300123456}
/>
</FakeLeftPaneContainer>
);
FullDownloadReadyNarrow.story = {
name: 'FullDownloadReady (Narrow)',
};
export const DownloadingNarrow = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Narrow}
currentVersion="5.24.0"
dialogType={DialogType.Downloading}
/>
</FakeLeftPaneContainer>
);
DownloadingNarrow.story = {
name: 'Downloading (Narrow)',
};
export const CannotUpdateNarrow = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Narrow}
currentVersion="5.24.0"
dialogType={DialogType.Cannot_Update}
/>
</FakeLeftPaneContainer>
);
CannotUpdateNarrow.story = {
name: 'Cannot Update (Narrow)',
};
export const CannotUpdateBetaNarrow = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Narrow}
currentVersion="5.24.0-beta.1"
dialogType={DialogType.Cannot_Update}
/>
</FakeLeftPaneContainer>
);
CannotUpdateBetaNarrow.story = {
name: 'Cannot Update Beta (Narrow)',
};
export const CannotUpdateRequireManualNarrow = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Narrow}
currentVersion="5.24.0"
dialogType={DialogType.Cannot_Update_Require_Manual}
/>
</FakeLeftPaneContainer>
);
CannotUpdateRequireManualNarrow.story = {
name: 'Cannot_Update_Require_Manual (Narrow)',
};
export const CannotUpdateRequireManualBetaNarrow = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Narrow}
currentVersion="5.24.0-beta.1"
dialogType={DialogType.Cannot_Update_Require_Manual}
/>
</FakeLeftPaneContainer>
);
CannotUpdateRequireManualBetaNarrow.story = {
name: 'Cannot_Update_Require_Manual_Beta (Narrow)',
};
export const MacOSReadOnlyNarrow = (): JSX.Element => (
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
<DialogUpdate
{...defaultProps}
containerWidthBreakpoint={WidthBreakpoint.Narrow}
currentVersion="5.24.0"
dialogType={DialogType.MacOS_Read_Only}
/>
</FakeLeftPaneContainer>
);
MacOSReadOnlyNarrow.story = {
name: 'MacOS_Read_Only (Narrow)',
};