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

@ -3,7 +3,6 @@
import * as React from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { SafetyNumberChangeDialog } from './SafetyNumberChangeDialog';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
@ -52,111 +51,122 @@ const contactWithNothing = getDefaultConversation({
const useTheme = () => React.useContext(StorybookThemeContext);
storiesOf('Components/SafetyNumberChangeDialog', module)
.add('Single Contact Dialog', () => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
contacts={[contactWithAllData]}
getPreferredBadge={() => undefined}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
renderSafetyNumber={() => {
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
})
.add('Different Confirmation Text', () => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
confirmText="You are awesome"
contacts={[contactWithAllData]}
getPreferredBadge={() => undefined}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
renderSafetyNumber={() => {
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
})
.add('Multi Contact Dialog', () => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
contacts={[
contactWithAllData,
contactWithJustProfile,
contactWithJustNumber,
contactWithNothing,
]}
getPreferredBadge={() => undefined}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
renderSafetyNumber={() => {
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
})
.add('Multiple contacts, all with badges', () => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
contacts={[
contactWithAllData,
contactWithJustProfile,
contactWithJustNumber,
contactWithNothing,
]}
getPreferredBadge={() => getFakeBadge()}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
renderSafetyNumber={() => {
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
})
.add('Scroll Dialog', () => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
contacts={[
contactWithAllData,
contactWithJustProfile,
contactWithJustNumber,
contactWithNothing,
contactWithAllData,
contactWithAllData,
contactWithAllData,
contactWithAllData,
contactWithAllData,
contactWithAllData,
]}
getPreferredBadge={() => undefined}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
renderSafetyNumber={() => {
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
});
export default {
title: 'Components/SafetyNumberChangeDialog',
};
export const SingleContactDialog = (): JSX.Element => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
contacts={[contactWithAllData]}
getPreferredBadge={() => undefined}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
renderSafetyNumber={() => {
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
};
export const DifferentConfirmationText = (): JSX.Element => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
confirmText="You are awesome"
contacts={[contactWithAllData]}
getPreferredBadge={() => undefined}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
renderSafetyNumber={() => {
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
};
export const MultiContactDialog = (): JSX.Element => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
contacts={[
contactWithAllData,
contactWithJustProfile,
contactWithJustNumber,
contactWithNothing,
]}
getPreferredBadge={() => undefined}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
renderSafetyNumber={() => {
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
};
export const MultipleContactsAllWithBadges = (): JSX.Element => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
contacts={[
contactWithAllData,
contactWithJustProfile,
contactWithJustNumber,
contactWithNothing,
]}
getPreferredBadge={() => getFakeBadge()}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
renderSafetyNumber={() => {
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
};
MultipleContactsAllWithBadges.story = {
name: 'Multiple contacts, all with badges',
};
export const ScrollDialog = (): JSX.Element => {
const theme = useTheme();
return (
<SafetyNumberChangeDialog
contacts={[
contactWithAllData,
contactWithJustProfile,
contactWithJustNumber,
contactWithNothing,
contactWithAllData,
contactWithAllData,
contactWithAllData,
contactWithAllData,
contactWithAllData,
contactWithAllData,
]}
getPreferredBadge={() => undefined}
i18n={i18n}
onCancel={action('cancel')}
onConfirm={action('confirm')}
renderSafetyNumber={() => {
action('renderSafetyNumber');
return <div>This is a mock Safety Number View</div>;
}}
theme={theme}
/>
);
};