Upgrade react and storybook
This commit is contained in:
Josh Perez
GitHub
parent
6476a4fe73
commit
42eb4013d0
244 changed files with 15341 additions and 10249 deletions
|
|
@ -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)',
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue