Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Convert ModalConfirmation stories to csf format #7415

Merged
merged 3 commits into from
Nov 17, 2023
Merged

refactor: Convert ModalConfirmation stories to csf format #7415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f904a46
Converted Modal Confirmation story
brianacnguyen Oct 8, 2023
2f9fc87
Converted ModalMandatory story
brianacnguyen Oct 8, 2023
da859d1
Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…
brianacnguyen Nov 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ module.exports = {
stories: [
'../app/component-library/components/Cards/Card/**/*.stories.?(ts|tsx|js|jsx)',
'../app/component-library/components/Banners/Banner/variants/BannerAlert/**/*.stories.?(ts|tsx|js|jsx)',
'../app/component-library/components/Modals/**/*.stories.?(ts|tsx|js|jsx)',
'../app/component-library/components/Sheet/**/*.stories.?(ts|tsx|js|jsx)',
'../app/component-library/components/Avatars/**/*.stories.?(ts|tsx|js|jsx)',
'../app/component-library/components/BottomSheets/**/*.stories.?(ts|tsx|js|jsx)',
Expand Down
9 changes: 9 additions & 0 deletions .storybook/storybook.requires.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,13 @@ global.STORIES = [
importPathMatcher:
"^\\.[\\\\/](?:app\\/component-library\\/components\\/Banners\\/Banner\\/variants\\/BannerAlert(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
},
{
titlePrefix: "",
directory: "./app/component-library/components/Modals",
files: "**/*.stories.?(ts|tsx|js|jsx)",
importPathMatcher:
"^\\.[\\\\/](?:app\\/component-library\\/components\\/Modals(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
},
{
titlePrefix: "",
directory: "./app/component-library/components/Sheet",
Expand Down Expand Up @@ -148,6 +155,8 @@ const getStories = () => {
return {
"./app/component-library/components/Cards/Card/Card.stories.tsx": require("../app/component-library/components/Cards/Card/Card.stories.tsx"),
"./app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.stories.tsx": require("../app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.stories.tsx"),
"./app/component-library/components/Modals/ModalConfirmation/ModalConfirmation.stories.tsx": require("../app/component-library/components/Modals/ModalConfirmation/ModalConfirmation.stories.tsx"),
"./app/component-library/components/Modals/ModalMandatory/ModalMandatory.stories.tsx": require("../app/component-library/components/Modals/ModalMandatory/ModalMandatory.stories.tsx"),
"./app/component-library/components/Sheet/SheetBottom/SheetBottom.stories.tsx": require("../app/component-library/components/Sheet/SheetBottom/SheetBottom.stories.tsx"),
"./app/component-library/components/Sheet/SheetHeader/SheetHeader.stories.tsx": require("../app/component-library/components/Sheet/SheetHeader/SheetHeader.stories.tsx"),
"./app/component-library/components/Avatars/Avatar/Avatar.stories.tsx": require("../app/component-library/components/Avatars/Avatar/Avatar.stories.tsx"),
Expand Down
27 changes: 26 additions & 1 deletion app/component-library/components/Modals/ModalConfirmation/ModalConfirmation.constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,34 @@
/* eslint-disable no-console */
/* eslint-disable import/prefer-default-export */

// Internal dependencies.
import {
ModalConfirmationRoute,
ModalConfirmationProps,
} from './ModalConfirmation.types';

export const MODAL_CONFIRMATION_NORMAL_BUTTON_ID =
'modal-confirmation-normal-button';

export const MODAL_CONFIRMATION_DANGER_BUTTON_ID =
'modal-confirmation-danger-button';

// Sample consts
const SAMPLE_MODALCONFIRMATION_ROUTE_PROPS: ModalConfirmationRoute = {
params: {
title: 'Sample ModalConfirmation Title',
description: 'Sample ModalConfirmation description',
onConfirm: () => {
console.log('Modal Confirmation clicked');
},
onCancel: () => {
console.log('Modal Confirmation cancelled');
},
cancelLabel: 'ModalConfirmation Cancel',
confirmLabel: 'ModalConfirmation Label',
isDanger: false,
},
};

export const SAMPLE_MODALCONFIRMATION_PROPS: ModalConfirmationProps = {
route: SAMPLE_MODALCONFIRMATION_ROUTE_PROPS,
};
78 changes: 47 additions & 31 deletions app/component-library/components/Modals/ModalConfirmation/ModalConfirmation.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,52 @@
/* eslint-disable no-console, react-native/no-inline-styles */

// Third party dependencies.
/* eslint-disable react/display-name */
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { boolean, text } from '@storybook/addon-knobs';

// Internal dependencies.
import ModalConfirmation from './ModalConfirmation';

storiesOf('Component Library / ModalConfirmation', module).add(
'Default',
() => {
const groupId = 'Props';
const isDanger = boolean('isDanger', false, groupId);
const titleSelector = text('route.params.title', 'Title!', groupId);
const descriptionSelector = text(
'route.params.description',
'Here is a long description. Here is a long description. Here is a long description. Here is a long description.',
groupId,
);
import { default as ModalConfirmationComponent } from './ModalConfirmation';
import { SAMPLE_MODALCONFIRMATION_PROPS } from './ModalConfirmation.constants';

return (
<ModalConfirmation
route={{
params: {
onConfirm: () => null,
isDanger,
title: titleSelector,
description: descriptionSelector,
},
}}
/>
);
const ModalConfirmationMeta = {
title: 'Component Library / Modals',
component: ModalConfirmationComponent,
argTypes: {
title: {
control: { type: 'text' },
defaultValue: SAMPLE_MODALCONFIRMATION_PROPS.route.params.title,
},
description: {
control: { type: 'text' },
defaultValue: SAMPLE_MODALCONFIRMATION_PROPS.route.params.description,
},
cancelLabel: {
control: { type: 'text' },
defaultValue: SAMPLE_MODALCONFIRMATION_PROPS.route.params.cancelLabel,
},
confirmLabel: {
control: { type: 'text' },
defaultValue: SAMPLE_MODALCONFIRMATION_PROPS.route.params.confirmLabel,
},
isDanger: {
control: { type: 'boolean' },
defaultValue: SAMPLE_MODALCONFIRMATION_PROPS.route.params.isDanger,
},
},
);
};
export default ModalConfirmationMeta;

export const ModalConfirmation = {
render: (args: {
title: string;
description: string;
onConfirm?: (() => void) | undefined;
onCancel?: (() => void) | undefined;
cancelLabel?: string | undefined;
confirmLabel?: string | undefined;
isDanger?: boolean | undefined;
}) => (
<ModalConfirmationComponent
route={{
params: { ...args },
}}
/>
),
};
30 changes: 30 additions & 0 deletions app/component-library/components/Modals/ModalMandatory/ModalMandatory.constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,32 @@
/* eslint-disable no-console */
// Internal dependencies.
import {
MandatoryModalParams,
MandatoryModalProps,
} from './ModalMandatory.types';

export const WEBVIEW_SCROLL_END_EVENT = 'end';
export const WEBVIEW_SCROLL_NOT_END_EVENT = '!end';

// Sample consts
const SAMPLE_MODALMANDATORY_PARAMS_PROPS: MandatoryModalParams = {
params: {
body: {
source: 'WebView',
uri: 'https://consensys.net/terms-of-use/',
},
headerTitle: 'Sample ModalMandatory headerTitle',
onAccept: () => {
console.log('ModalMandatory Accepted');
},
footerHelpText: 'Sample ModalMandatory footerHelpText',
buttonText: 'ModalMandatory buttonText',
checkboxText: 'ModalMandatory checkboxText',
onRender: () => {
console.log('ModalMandatory rendered');
},
},
};
export const SAMPLE_MODALMANDATORY_PROPS: MandatoryModalProps = {
route: SAMPLE_MODALMANDATORY_PARAMS_PROPS,
};
81 changes: 40 additions & 41 deletions app/component-library/components/Modals/ModalMandatory/ModalMandatory.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,51 @@
/* eslint-disable no-console, react-native/no-inline-styles */

// Third party dependencies.
/* eslint-disable react/display-name */
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { text } from '@storybook/addon-knobs';

// Internal dependencies.
import ModalMandatory from './ModalMandatory';
import { default as ModalMandatoryComponent } from './ModalMandatory';
import { SAMPLE_MODALMANDATORY_PROPS } from './ModalMandatory.constants';

storiesOf('Component Library / ModalMandatory', module).add('Default', () => {
const groupId = 'Props';
const ModalMandatoryMeta = {
title: 'Component Library / Modals',
component: ModalMandatoryComponent,
argTypes: {
headerTitle: {
control: { type: 'text' },
defaultValue: SAMPLE_MODALMANDATORY_PROPS.route.params.headerTitle,
},
footerHelpText: {
control: { type: 'text' },
defaultValue: SAMPLE_MODALMANDATORY_PROPS.route.params.footerHelpText,
},
buttonText: {
control: { type: 'text' },
defaultValue: SAMPLE_MODALMANDATORY_PROPS.route.params.buttonText,
},
checkboxText: {
control: { type: 'text' },
defaultValue: SAMPLE_MODALMANDATORY_PROPS.route.params.checkboxText,
},
},
};
export default ModalMandatoryMeta;

const buttonTextSelector = text(
'route.params.buttonText',
'Accept!',
groupId,
);
const checkboxTextSelector = text(
'route.params.checkboxText',
'This is the reason why you need to check the box',
groupId,
);
const headerTitleSelector = text(
'route.params.headerTitle',
'Example of Title',
groupId,
);
const footerHelpTextSelector = text(
'route.params.footerHelpText',
'You can write a reminder here',
groupId,
);
export const ModalMandatory = {
render: (args: {
headerTitle: string;
footerHelpText: string;

return (
<ModalMandatory
buttonText: string;
checkboxText: string;
}) => (
<ModalMandatoryComponent
route={{
params: {
buttonText: buttonTextSelector,
checkboxText: checkboxTextSelector,
headerTitle: headerTitleSelector,
onAccept: () => null,
footerHelpText: footerHelpTextSelector,
body: {
source: 'WebView',
uri: 'https://consensys.net/terms-of-use/',
},
body: SAMPLE_MODALMANDATORY_PROPS.route.params.body,
onAccept: SAMPLE_MODALMANDATORY_PROPS.route.params.onAccept,
onRender: SAMPLE_MODALMANDATORY_PROPS.route.params.onRender,
...args,
},
}}
/>
);
});
),
};
2 changes: 1 addition & 1 deletion app/component-library/components/Modals/ModalMandatory/ModalMandatory.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ interface BodyNode {

type Body = BodyWebView | BodyNode;

interface MandatoryModalParams {
export interface MandatoryModalParams {
params: {
/**
* Optional Body, can be a customized componente or a uri for a webview
Expand Down
Loading