mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Migrate Image to Storybook

Browse source
This commit is contained in:
Chris Svenningsen 2020-08-26 11:06:48 -07:00 committed by Josh Perez
parent db7aa6223f
commit 7098c8b393
4 changed files with 189 additions and 469 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

468
ts/components/conversation/Image.md
View file

@ -1,468 +0,0 @@
### Various sizes
```jsx
<util.ConversationContext theme={util.theme}>
<Image
height="200"
width="199"
url={util.pngObjectUrl}
attachment={{}}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
url={util.pngObjectUrl}
attachment={{}}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
url={util.pngObjectUrl}
attachment={{}}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
url={util.pngObjectUrl}
attachment={{ pending: true }}
i18n={util.i18n}
/>
</util.ConversationContext>
```
### Various curved corners
```jsx
<util.ConversationContext theme={util.theme}>
<Image
height="149"
width="149"
curveTopLeft
url={util.pngObjectUrl}
attachment={{}}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
curveTopRight
url={util.pngObjectUrl}
attachment={{}}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
curveBottomLeft
url={util.pngObjectUrl}
attachment={{}}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
curveBottomRight
url={util.pngObjectUrl}
attachment={{}}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
curveBottomRight
url={util.pngObjectUrl}
attachment={{ pending: true }}
i18n={util.i18n}
/>
</util.ConversationContext>
```
### With bottom overlay
```jsx
<util.ConversationContext theme={util.theme}>
<Image
height="149"
width="149"
bottomOverlay
url={util.pngObjectUrl}
attachment={{}}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
bottomOverlay
curveBottomRight
url={util.pngObjectUrl}
attachment={{}}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
bottomOverlay
curveBottomLeft
url={util.pngObjectUrl}
attachment={{}}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
bottomOverlay
curveBottomLeft
url={util.pngObjectUrl}
attachment={{ pending: true }}
i18n={util.i18n}
/>
</util.ConversationContext>
```
### With play icon
```jsx
<util.ConversationContext theme={util.theme}>
<Image
height="200"
width="199"
playIconOverlay
url={util.pngObjectUrl}
attachment={{}}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
playIconOverlay
url={util.pngObjectUrl}
attachment={{}}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
playIconOverlay
url={util.pngObjectUrl}
attachment={{}}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
playIconOverlay
url={util.pngObjectUrl}
attachment={{ pending: true }}
i18n={util.i18n}
/>
</util.ConversationContext>
```
### With dark overlay and text
```jsx
<util.ConversationContext theme={util.theme}>
<div>
<Image
height="200"
width="199"
darkOverlay
attachment={{}}
url={util.pngObjectUrl}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
darkOverlay
attachment={{}}
url={util.pngObjectUrl}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
darkOverlay
attachment={{}}
url={util.pngObjectUrl}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
darkOverlay
attachment={{ pending: true }}
url={util.pngObjectUrl}
i18n={util.i18n}
/>
</div>
<hr />
<div>
<Image
height="200"
width="199"
darkOverlay
attachment={{}}
overlayText="+3"
url={util.pngObjectUrl}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
darkOverlay
attachment={{}}
overlayText="+3"
url={util.pngObjectUrl}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
darkOverlay
attachment={{}}
overlayText="+3"
url={util.pngObjectUrl}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
darkOverlay
attachment={{ pending: true }}
overlayText="+3"
url={util.pngObjectUrl}
i18n={util.i18n}
/>
</div>
</util.ConversationContext>
```
### With caption
```jsx
<util.ConversationContext theme={util.theme}>
<div>
<Image
height="200"
width="199"
attachment={{ caption: 'dogs playing' }}
url={util.pngObjectUrl}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
attachment={{ caption: 'dogs playing' }}
url={util.pngObjectUrl}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
attachment={{ caption: 'dogs playing' }}
url={util.pngObjectUrl}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
attachment={{ caption: 'dogs playing', pending: true }}
url={util.pngObjectUrl}
i18n={util.i18n}
/>
</div>
<hr />
<div>
<Image
height="200"
width="199"
attachment={{ caption: 'dogs playing' }}
darkOverlay
overlayText="+3"
url={util.pngObjectUrl}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
attachment={{ caption: 'dogs playing' }}
darkOverlay
overlayText="+3"
url={util.pngObjectUrl}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
attachment={{ caption: 'dogs playing' }}
darkOverlay
overlayText="+3"
url={util.pngObjectUrl}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
attachment={{ caption: 'dogs playing', pending: true }}
darkOverlay
overlayText="+3"
url={util.pngObjectUrl}
i18n={util.i18n}
/>
</div>
</util.ConversationContext>
```
### With top-right X and soft corners
```jsx
<util.ConversationContext theme={util.theme}>
<div>
<Image
height="200"
width="199"
attachment={{}}
closeButton={true}
onClick={() => console.log('onClick')}
onClickClose={attachment => console.log('onClickClose', attachment)}
softCorners={true}
url={util.gifObjectUrl}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
attachment={{}}
closeButton={true}
onClick={() => console.log('onClick')}
onClickClose={attachment => console.log('onClickClose', attachment)}
softCorners={true}
url={util.gifObjectUrl}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
attachment={{}}
closeButton={true}
onClick={() => console.log('onClick')}
onClickClose={attachment => console.log('onClickClose', attachment)}
softCorners={true}
url={util.gifObjectUrl}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
attachment={{ pending: true }}
closeButton={true}
onClick={() => console.log('onClick')}
onClickClose={attachment => console.log('onClickClose', attachment)}
softCorners={true}
url={util.gifObjectUrl}
i18n={util.i18n}
/>
</div>
<br />
<div>
<Image
height="200"
width="199"
attachment={{}}
closeButton={true}
attachment={{ caption: 'dogs playing' }}
onClick={() => console.log('onClick')}
onClickClose={attachment => console.log('onClickClose', attachment)}
softCorners={true}
url={util.gifObjectUrl}
i18n={util.i18n}
/>
<Image
height="149"
width="149"
attachment={{}}
closeButton={true}
attachment={{ caption: 'dogs playing' }}
onClick={() => console.log('onClick')}
onClickClose={attachment => console.log('onClickClose', attachment)}
softCorners={true}
url={util.gifObjectUrl}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
closeButton={true}
attachment={{ caption: 'dogs playing' }}
onClick={() => console.log('onClick')}
onClickClose={attachment => console.log('onClickClose', attachment)}
softCorners={true}
url={util.gifObjectUrl}
i18n={util.i18n}
/>
<Image
height="99"
width="99"
closeButton={true}
attachment={{ caption: 'dogs playing', pending: true }}
onClick={() => console.log('onClick')}
onClickClose={attachment => console.log('onClickClose', attachment)}
softCorners={true}
url={util.gifObjectUrl}
i18n={util.i18n}
/>
</div>
</util.ConversationContext>
```
### No border, no background
```jsx
<util.ConversationContext theme={util.theme}>
<div style={{ padding: '10px', backgroundColor: 'lightgrey' }}>
<div>
<Image
height="512"
width="512"
noBorder={true}
noBackground={true}
attachment={{}}
onClick={() => console.log('onClick')}
onClickClose={attachment => console.log('onClickClose', attachment)}
url={util.squareStickerObjectUrl}
i18n={util.i18n}
/>
</div>
<div>
<Image
height="256"
width="256"
noBorder={true}
noBackground={true}
attachment={{}}
onClick={() => console.log('onClick')}
onClickClose={attachment => console.log('onClickClose', attachment)}
url={util.squareStickerObjectUrl}
i18n={util.i18n}
/>
</div>
<div>
<Image
height="128"
width="128"
noBorder={true}
noBackground={true}
attachment={{}}
onClick={() => console.log('onClick')}
onClickClose={attachment => console.log('onClickClose', attachment)}
url={util.squareStickerObjectUrl}
i18n={util.i18n}
/>
</div>
</div>
</util.ConversationContext>
```

187
ts/components/conversation/Image.stories.tsx Normal file
View file

@ -0,0 +1,187 @@
import * as React from 'react';
import { action } from '@storybook/addon-actions';
import { boolean, number, text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import { pngUrl } from '../../storybook/Fixtures';
import { Image, Props } from './Image';
import { IMAGE_PNG } from '../../types/MIME';
// @ts-ignore
import { setup as setupI18n } from '../../../js/modules/i18n';
// @ts-ignore
import enMessages from '../../../_locales/en/messages.json';
const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/Image', module);
// tslint:disable-next-line:cyclomatic-complexity
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
alt: text('alt', overrideProps.alt || ''),
attachment: overrideProps.attachment || {
contentType: IMAGE_PNG,
fileName: 'sax.png',
url: pngUrl,
},
blurHash: text('blurHash', overrideProps.blurHash || ''),
bottomOverlay: boolean('bottomOverlay', overrideProps.bottomOverlay || false),
closeButton: boolean('closeButton', overrideProps.closeButton || false),
curveBottomLeft: boolean(
'curveBottomLeft',
overrideProps.curveBottomLeft || false
),
curveBottomRight: boolean(
'curveBottomRight',
overrideProps.curveBottomRight || false
),
curveTopLeft: boolean('curveTopLeft', overrideProps.curveTopLeft || false),
curveTopRight: boolean('curveTopRight', overrideProps.curveTopRight || false),
darkOverlay: boolean('darkOverlay', overrideProps.darkOverlay || false),
height: number('height', overrideProps.height || 100),
i18n,
noBackground: boolean('noBackground', overrideProps.noBackground || false),
noBorder: boolean('noBorder', overrideProps.noBorder || false),
onClick: action('onClick'),
onClickClose: action('onClickClose'),
onError: action('onError'),
overlayText: text('overlayText', overrideProps.overlayText || ''),
playIconOverlay: boolean(
'playIconOverlay',
overrideProps.playIconOverlay || false
),
smallCurveTopLeft: boolean(
'smallCurveTopLeft',
overrideProps.smallCurveTopLeft || false
),
softCorners: boolean('softCorners', overrideProps.softCorners || false),
tabIndex: number('tabIndex', overrideProps.tabIndex || 0),
url: text('url', overrideProps.url || pngUrl),
width: number('width', overrideProps.width || 100),
});
story.add('URL with Height/Width', () => {
const props = createProps();
return <Image {...props} />;
});
story.add('Caption', () => {
const defaultProps = createProps();
const props = {
...defaultProps,
attachment: {
...defaultProps.attachment,
caption: '<Saxophone Pun>',
},
};
return <Image {...props} />;
});
story.add('Play Icon', () => {
const props = createProps({
playIconOverlay: true,
});
return <Image {...props} />;
});
story.add('Close Button', () => {
const props = createProps({
closeButton: true,
});
return <Image {...props} />;
});
story.add('No Border or Background', () => {
const props = createProps({
attachment: {
contentType: IMAGE_PNG,
fileName: 'sax.png',
url: pngUrl,
},
noBackground: true,
noBorder: true,
url: pngUrl,
});
return (
<div style={{ backgroundColor: '#999' }}>
<Image {...props} />
</div>
);
});
story.add('Pending', () => {
const props = createProps();
props.attachment.pending = true;
return <Image {...props} />;
});
story.add('Curved Corners', () => {
const props = createProps({
curveBottomLeft: true,
curveBottomRight: true,
curveTopLeft: true,
curveTopRight: true,
});
return <Image {...props} />;
});
story.add('Small Curve Top Left', () => {
const props = createProps({
smallCurveTopLeft: true,
});
return <Image {...props} />;
});
story.add('Soft Corners', () => {
const props = createProps({
softCorners: true,
});
return <Image {...props} />;
});
story.add('Bottom Overlay', () => {
const props = createProps({
bottomOverlay: true,
});
return <Image {...props} />;
});
story.add('Full Overlay with Text', () => {
const props = createProps({
darkOverlay: true,
overlayText: 'Honk!',
});
return <Image {...props} />;
});
story.add('Blurhash', () => {
const defaultProps = createProps();
const props = {
...defaultProps,
blurHash: 'thisisafakeblurhashthatwasmadeup',
url: undefined as any,
};
return <Image {...props} />;
});
story.add('Missing Image', () => {
const defaultProps = createProps();
const props = {
...defaultProps,
attachment: undefined as any,
url: undefined as any,
};
return <Image {...props} />;
});

2
ts/components/conversation/Image.tsx
View file

@ -6,7 +6,7 @@ import { Spinner } from '../Spinner';
import { LocalizerType } from '../../types/Util'; import { LocalizerType } from '../../types/Util';
import { AttachmentType } from '../../types/Attachment'; import { AttachmentType } from '../../types/Attachment';
interface Props { export interface Props {
alt: string; alt: string;
attachment: AttachmentType; attachment: AttachmentType;
url: string; url: string;

1
ts/types/MIME.ts
View file

@ -6,6 +6,7 @@ export const AUDIO_AAC = 'audio/aac' as MIMEType;
export const AUDIO_MP3 = 'audio/mp3' as MIMEType; export const AUDIO_MP3 = 'audio/mp3' as MIMEType;
export const IMAGE_GIF = 'image/gif' as MIMEType; export const IMAGE_GIF = 'image/gif' as MIMEType;
export const IMAGE_JPEG = 'image/jpeg' as MIMEType; export const IMAGE_JPEG = 'image/jpeg' as MIMEType;
export const IMAGE_PNG = 'image/png' as MIMEType;
export const IMAGE_WEBP = 'image/webp' as MIMEType; export const IMAGE_WEBP = 'image/webp' as MIMEType;
export const VIDEO_MP4 = 'video/mp4' as MIMEType; export const VIDEO_MP4 = 'video/mp4' as MIMEType;
export const VIDEO_QUICKTIME = 'video/quicktime' as MIMEType; export const VIDEO_QUICKTIME = 'video/quicktime' as MIMEType;