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

Upgrade Storybook

Browse source 
Co-authored-by: Scott Nonnenberg <scott@signal.org>
This commit is contained in:
Jamie Kyle 2023-10-11 12:06:43 -07:00 • committed by GitHub
parent 8c966dfbd8
commit 502ea174ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
328 changed files with 10863 additions and 12432 deletions
Download patch file Download diff file Expand all files Collapse all files

568
ts/components/conversation/ImageGrid.stories.tsx
View file

@ -2,10 +2,8 @@
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import { action } from '@storybook/addon-actions';
import { boolean, number } from '@storybook/addon-knobs';
import type { Meta } from '@storybook/react';
import type { Props } from './ImageGrid';
import { ImageGrid } from './ImageGrid';
import {
@ -25,44 +23,14 @@ const i18n = setupI18n('en', enMessages);
export default {
title: 'Components/Conversation/ImageGrid',
};
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
attachments: overrideProps.attachments || [
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
],
bottomOverlay: boolean('bottomOverlay', overrideProps.bottomOverlay || false),
direction: overrideProps.direction || 'incoming',
i18n,
isSticker: boolean('isSticker', overrideProps.isSticker || false),
onClick: action('onClick'),
onError: action('onError'),
stickerSize: number('stickerSize', overrideProps.stickerSize || 0),
tabIndex: number('tabIndex', overrideProps.tabIndex || 0),
withContentAbove: boolean(
'withContentAbove',
overrideProps.withContentAbove || false
),
withContentBelow: boolean(
'withContentBelow',
overrideProps.withContentBelow || false
),
});
export function OneImage(): JSX.Element {
const props = createProps();
return <ImageGrid {...props} />;
}
export function TwoImages(): JSX.Element {
const props = createProps({
argTypes: {
bottomOverlay: { control: { type: 'boolean' } },
isSticker: { control: { type: 'boolean' } },
stickerSize: { control: { type: 'number' } },
withContentAbove: { control: { type: 'boolean' } },
withContentBelow: { control: { type: 'boolean' } },
},
args: {
attachments: [
fakeAttachment({
contentType: IMAGE_PNG,
@ -71,267 +39,285 @@ export function TwoImages(): JSX.Element {
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
],
});
return <ImageGrid {...props} />;
}
export function ThreeImages(): JSX.Element {
const props = createProps({
attachments: [
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
],
});
bottomOverlay: false,
direction: 'incoming',
i18n,
isSticker: false,
onClick: action('onClick'),
onError: action('onError'),
stickerSize: 0,
tabIndex: 0,
withContentAbove: false,
withContentBelow: false,
},
} satisfies Meta<Props>;
return <ImageGrid {...props} />;
export function OneImage(args: Props): JSX.Element {
return <ImageGrid {...args} />;
}
export function FourImages(): JSX.Element {
const props = createProps({
attachments: [
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
],
});
return <ImageGrid {...props} />;
}
export function FiveImages(): JSX.Element {
const props = createProps({
attachments: [
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
],
});
return <ImageGrid {...props} />;
}
export const _6Images = (): JSX.Element => {
const props = createProps({
attachments: [
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
],
});
return <ImageGrid {...props} />;
};
_6Images.story = {
name: '6+ Images',
};
export function MixedContentTypes(): JSX.Element {
const props = createProps({
attachments: [
fakeAttachment({
contentType: VIDEO_MP4,
fileName: 'pixabay-Soap-Bubble-7141.mp4',
height: 112,
screenshot: {
height: 112,
width: 112,
url: '/fixtures/kitten-4-112-112.jpg',
export function TwoImages(args: Props): JSX.Element {
return (
<ImageGrid
{...args}
attachments={[
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
path: 'originalpath',
},
url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
width: 112,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: stringToMIMEType('text/plain'),
fileName: 'lorem-ipsum.txt',
url: '/fixtures/lorem-ipsum.txt',
}),
fakeAttachment({
contentType: AUDIO_MP3,
fileName: 'incompetech-com-Agnus-Dei-X.mp3',
url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
}),
],
});
return <ImageGrid {...props} />;
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
]}
/>
);
}
export function Sticker(): JSX.Element {
const props = createProps({
attachments: [
fakeAttachment({
contentType: IMAGE_WEBP,
fileName: 'sticker.webp',
height: 512,
url: squareStickerUrl,
width: 512,
}),
],
isSticker: true,
stickerSize: 128,
});
return <ImageGrid {...props} />;
export function ThreeImages(args: Props): JSX.Element {
return (
<ImageGrid
{...args}
attachments={[
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
]}
/>
);
}
export function ContentAboveAndBelow(): JSX.Element {
const props = createProps({
withContentAbove: true,
withContentBelow: true,
});
return <ImageGrid {...props} />;
export function FourImages(args: Props): JSX.Element {
return (
<ImageGrid
{...args}
attachments={[
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
]}
/>
);
}
ContentAboveAndBelow.story = {
name: 'Content Above and Below',
export function FiveImages(args: Props): JSX.Element {
return (
<ImageGrid
{...args}
attachments={[
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
]}
/>
);
}
export const _6Images = (args: Props): JSX.Element => {
return (
<ImageGrid
{...args}
attachments={[
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_JPEG,
fileName: 'tina-rolf-269345-unsplash.jpg',
height: 1680,
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
width: 3000,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
]}
/>
);
};
export function BottomOverlay(): JSX.Element {
const props = createProps({
bottomOverlay: true,
});
return <ImageGrid {...props} />;
export function MixedContentTypes(args: Props): JSX.Element {
return (
<ImageGrid
{...args}
attachments={[
fakeAttachment({
contentType: VIDEO_MP4,
fileName: 'pixabay-Soap-Bubble-7141.mp4',
height: 112,
screenshot: {
height: 112,
width: 112,
url: '/fixtures/kitten-4-112-112.jpg',
contentType: IMAGE_JPEG,
path: 'originalpath',
},
url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
width: 112,
}),
fakeAttachment({
contentType: IMAGE_PNG,
fileName: 'sax.png',
height: 1200,
url: pngUrl,
width: 800,
}),
fakeAttachment({
contentType: stringToMIMEType('text/plain'),
fileName: 'lorem-ipsum.txt',
url: '/fixtures/lorem-ipsum.txt',
}),
fakeAttachment({
contentType: AUDIO_MP3,
fileName: 'incompetech-com-Agnus-Dei-X.mp3',
url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
}),
]}
/>
);
}
export function Sticker(args: Props): JSX.Element {
return (
<ImageGrid
{...args}
attachments={[
fakeAttachment({
contentType: IMAGE_WEBP,
fileName: 'sticker.webp',
height: 512,
url: squareStickerUrl,
width: 512,
}),
]}
isSticker
stickerSize={128}
/>
);
}
export function ContentAboveAndBelow(args: Props): JSX.Element {
return <ImageGrid {...args} withContentAbove withContentBelow />;
}
export function BottomOverlay(args: Props): JSX.Element {
return <ImageGrid {...args} bottomOverlay />;
}