Username Link QR Code
This commit is contained in:
parent
68dfc46185
commit
e1d2dbd8ff
50 changed files with 2187 additions and 120 deletions
104
ts/components/UsernameLinkModalBody.stories.tsx
Normal file
104
ts/components/UsernameLinkModalBody.stories.tsx
Normal file
|
@ -0,0 +1,104 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import type { Meta, Story } from '@storybook/react';
|
||||
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
import { UsernameLinkState } from '../state/ducks/usernameEnums';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import { SignalService as Proto } from '../protobuf';
|
||||
|
||||
import type { PropsType } from './UsernameLinkModalBody';
|
||||
import { UsernameLinkModalBody } from './UsernameLinkModalBody';
|
||||
import { Modal } from './Modal';
|
||||
|
||||
const ColorEnum = Proto.AccountRecord.UsernameLink.Color;
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
export default {
|
||||
component: UsernameLinkModalBody,
|
||||
title: 'Components/UsernameLinkModalBody',
|
||||
argTypes: {
|
||||
i18n: {
|
||||
defaultValue: i18n,
|
||||
},
|
||||
link: {
|
||||
control: { type: 'text' },
|
||||
defaultValue:
|
||||
'https://signal.me#eu/n-AJkmmykrFB7j6UODGndSycxcMdp_v6ppRp9rFu5Ad39q_9Ngi_k9-TARWfT43t',
|
||||
},
|
||||
username: {
|
||||
control: { type: 'text' },
|
||||
defaultValue: 'alice.12',
|
||||
},
|
||||
usernameLinkState: {
|
||||
control: { type: 'select' },
|
||||
defaultValue: UsernameLinkState.Ready,
|
||||
options: [UsernameLinkState.Ready, UsernameLinkState.Updating],
|
||||
},
|
||||
colorId: {
|
||||
control: { type: 'select' },
|
||||
defaultValue: ColorEnum.BLUE,
|
||||
mapping: {
|
||||
blue: ColorEnum.BLUE,
|
||||
white: ColorEnum.WHITE,
|
||||
grey: ColorEnum.GREY,
|
||||
olive: ColorEnum.OLIVE,
|
||||
green: ColorEnum.GREEN,
|
||||
orange: ColorEnum.ORANGE,
|
||||
pink: ColorEnum.PINK,
|
||||
purple: ColorEnum.PURPLE,
|
||||
},
|
||||
},
|
||||
showToast: { action: true },
|
||||
resetUsernameLink: { action: true },
|
||||
setUsernameLinkColor: { action: true },
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
type ArgsType = PropsType;
|
||||
|
||||
// eslint-disable-next-line react/function-component-definition
|
||||
const Template: Story<ArgsType> = args => {
|
||||
const [attachment, setAttachment] = useState<string | undefined>();
|
||||
const saveAttachment = useCallback(({ data }: { data?: Uint8Array }) => {
|
||||
if (!data) {
|
||||
setAttachment(undefined);
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = new Blob([data], {
|
||||
type: 'image/png',
|
||||
});
|
||||
|
||||
setAttachment(oldURL => {
|
||||
if (oldURL) {
|
||||
URL.revokeObjectURL(oldURL);
|
||||
}
|
||||
return URL.createObjectURL(blob);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal modalName="story" i18n={i18n} hasXButton>
|
||||
<UsernameLinkModalBody {...args} saveAttachment={saveAttachment} />
|
||||
</Modal>
|
||||
{attachment && <img src={attachment} alt="printable qr code" />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const Normal = Template.bind({});
|
||||
Normal.args = {};
|
||||
Normal.story = {
|
||||
name: 'normal',
|
||||
};
|
||||
|
||||
export const NoLink = Template.bind({});
|
||||
NoLink.args = { link: '' };
|
||||
NoLink.story = {
|
||||
name: 'normal',
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue