Migrate StickerButton, StickerManager, StickerPicker to storybook
This commit is contained in:
Sidney Keese
Josh Perez
parent
7098c8b393
commit
5aac427017
7 changed files with 416 additions and 1120 deletions
|
|
@ -1,495 +0,0 @@
|
|||
#### Default
|
||||
|
||||
```jsx
|
||||
const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
cover: sticker1,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker2,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker3,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<div
|
||||
style={{
|
||||
height: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={[]}
|
||||
installedPacks={packs}
|
||||
blessedPacks={[]}
|
||||
knownPacks={[]}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[abeSticker, sticker1, sticker2, sticker3]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### No Installed Packs
|
||||
|
||||
When there are no installed packs the button should call the `onClickAddPack`
|
||||
callback.
|
||||
|
||||
```jsx
|
||||
const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
cover: sticker1,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker2,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker3,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<div
|
||||
style={{
|
||||
height: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={packs}
|
||||
installedPacks={[]}
|
||||
blessedPacks={[]}
|
||||
knownPacks={[]}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[abeSticker, sticker1, sticker2, sticker3]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Just known packs
|
||||
|
||||
Even with just known packs, the button should render.
|
||||
|
||||
```jsx
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
cover: sticker1,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={[]}
|
||||
installedPacks={[]}
|
||||
knownPacks={packs}
|
||||
blessedPacks={[]}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[]}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Just blessed packs
|
||||
|
||||
Even with just blessed packs, the button should render.
|
||||
|
||||
```jsx
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
cover: sticker1,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={[]}
|
||||
installedPacks={[]}
|
||||
blessedPacks={packs}
|
||||
knownPacks={[]}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[]}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### No packs at all
|
||||
|
||||
When there are no advertised packs and no installed packs the button should not render anything.
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={[]}
|
||||
installedPacks={[]}
|
||||
blessedPacks={[]}
|
||||
knownPacks={[]}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[]}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Installed Pack Tooltip
|
||||
|
||||
When a pack is installed there should be a tooltip saying as such.
|
||||
|
||||
```jsx
|
||||
const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
title: 'Abe',
|
||||
cover: abeSticker,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...abeSticker, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker1,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker2,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'qux',
|
||||
cover: sticker3,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<div
|
||||
style={{
|
||||
height: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={[]}
|
||||
installedPacks={packs}
|
||||
blessedPacks={[]}
|
||||
knownPacks={[]}
|
||||
installedPack={packs[0]}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Installed Pack Tooltip (Wide Sticker)
|
||||
|
||||
When a pack is installed there should be a tooltip saying as such and the sticker should appear in its original aspect ratio.
|
||||
|
||||
```jsx
|
||||
const landscapeGreenSticker = {
|
||||
id: 4,
|
||||
url: util.landscapeGreenObjectUrl,
|
||||
packId: 'green',
|
||||
};
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
title: 'Green',
|
||||
cover: landscapeGreenSticker,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...landscapeGreenSticker, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker1,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker2,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'qux',
|
||||
cover: sticker3,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<div
|
||||
style={{
|
||||
height: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={[]}
|
||||
installedPacks={packs}
|
||||
blessedPacks={[]}
|
||||
knownPacks={[]}
|
||||
installedPack={packs[0]}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Installed Pack Tooltip (Tall Sticker)
|
||||
|
||||
When a pack is installed there should be a tooltip saying as such and the sticker should appear in its original aspect ratio.
|
||||
|
||||
```jsx
|
||||
const portraitTealSticker = {
|
||||
id: 4,
|
||||
url: util.portraitTealObjectUrl,
|
||||
packId: 'teal',
|
||||
};
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
title: 'Teal',
|
||||
cover: portraitTealSticker,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...portraitTealSticker, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker1,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker2,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'qux',
|
||||
cover: sticker3,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<div
|
||||
style={{
|
||||
height: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={[]}
|
||||
installedPacks={packs}
|
||||
blessedPacks={[]}
|
||||
knownPacks={[]}
|
||||
installedPack={packs[0]}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### New Installation Splash Tooltip
|
||||
|
||||
When the application is updated or freshly installed there should be a tooltip
|
||||
showing the user the sticker button.
|
||||
|
||||
```jsx
|
||||
const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
title: 'Abe',
|
||||
cover: abeSticker,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...abeSticker, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker1,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker2,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'qux',
|
||||
cover: sticker3,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<div
|
||||
style={{
|
||||
height: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<StickerButton
|
||||
i18n={util.i18n}
|
||||
receivedPacks={[]}
|
||||
installedPacks={packs}
|
||||
blessedPacks={[]}
|
||||
knownPacks={[]}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
recentStickers={[]}
|
||||
showIntroduction
|
||||
clearShowIntroduction={() => console.log('clearShowIntroduction')}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
153
ts/components/stickers/StickerButton.stories.tsx
Normal file
153
ts/components/stickers/StickerButton.stories.tsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
|
||||
// @ts-ignore
|
||||
import { setup as setupI18n } from '../../../js/modules/i18n';
|
||||
|
||||
// @ts-ignore
|
||||
import enMessages from '../../../_locales/en/messages.json';
|
||||
|
||||
import { Props, StickerButton } from './StickerButton';
|
||||
import {
|
||||
createPack,
|
||||
sticker1,
|
||||
sticker2,
|
||||
tallSticker,
|
||||
wideSticker,
|
||||
} from './StickerPicker.stories';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/Stickers/StickerButton', module);
|
||||
|
||||
story.addDecorator(storyFn => (
|
||||
<div
|
||||
style={{
|
||||
height: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'flex-end',
|
||||
}}
|
||||
>
|
||||
{storyFn()}
|
||||
</div>
|
||||
));
|
||||
|
||||
const receivedPacks = [
|
||||
createPack({ id: 'received-pack-1', status: 'downloaded' }, sticker1),
|
||||
createPack({ id: 'received-pack-2', status: 'downloaded' }, sticker2),
|
||||
];
|
||||
|
||||
const installedPacks = [
|
||||
createPack({ id: 'installed-pack-1', status: 'installed' }, sticker1),
|
||||
createPack({ id: 'installed-pack-2', status: 'installed' }, sticker2),
|
||||
];
|
||||
|
||||
const blessedPacks = [
|
||||
createPack(
|
||||
{ id: 'blessed-pack-1', status: 'downloaded', isBlessed: true },
|
||||
sticker1
|
||||
),
|
||||
createPack(
|
||||
{ id: 'blessed-pack-2', status: 'downloaded', isBlessed: true },
|
||||
sticker2
|
||||
),
|
||||
];
|
||||
|
||||
const knownPacks = [
|
||||
createPack({ id: 'known-pack-1', status: 'known' }, sticker1),
|
||||
createPack({ id: 'known-pack-2', status: 'known' }, sticker2),
|
||||
];
|
||||
|
||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
blessedPacks: overrideProps.blessedPacks || [],
|
||||
clearInstalledStickerPack: action('clearInstalledStickerPack'),
|
||||
clearShowIntroduction: action('clearShowIntroduction'),
|
||||
clearShowPickerHint: action('clearShowPickerHint'),
|
||||
i18n,
|
||||
installedPack: overrideProps.installedPack,
|
||||
installedPacks: overrideProps.installedPacks || [],
|
||||
knownPacks: overrideProps.knownPacks || [],
|
||||
onClickAddPack: action('onClickAddPack'),
|
||||
onPickSticker: action('onPickSticker'),
|
||||
receivedPacks: overrideProps.receivedPacks || [],
|
||||
recentStickers: [],
|
||||
showIntroduction: boolean(
|
||||
'showIntroduction',
|
||||
overrideProps.showIntroduction || false
|
||||
),
|
||||
showPickerHint: boolean('showPickerHint', false),
|
||||
});
|
||||
|
||||
story.add('Only Installed', () => {
|
||||
const props = createProps({ installedPacks });
|
||||
|
||||
return <StickerButton {...props} />;
|
||||
});
|
||||
|
||||
story.add('Only Received', () => {
|
||||
const props = createProps({ receivedPacks });
|
||||
|
||||
return <StickerButton {...props} />;
|
||||
});
|
||||
|
||||
story.add('Only Known', () => {
|
||||
const props = createProps({ knownPacks });
|
||||
|
||||
return <StickerButton {...props} />;
|
||||
});
|
||||
|
||||
story.add('Only Blessed', () => {
|
||||
const props = createProps({ blessedPacks });
|
||||
|
||||
return <StickerButton {...props} />;
|
||||
});
|
||||
|
||||
story.add('No Packs', () => {
|
||||
const props = createProps();
|
||||
|
||||
return <StickerButton {...props} />;
|
||||
});
|
||||
|
||||
story.add('Installed Pack Tooltip', () => {
|
||||
const props = createProps({
|
||||
installedPacks,
|
||||
installedPack: installedPacks[0],
|
||||
});
|
||||
|
||||
return <StickerButton {...props} />;
|
||||
});
|
||||
|
||||
story.add('Installed Pack Tooltip (Wide)', () => {
|
||||
const installedPack = createPack({ id: 'installed-pack-wide' }, wideSticker);
|
||||
|
||||
const props = createProps({
|
||||
installedPacks: [installedPack],
|
||||
installedPack,
|
||||
});
|
||||
|
||||
return <StickerButton {...props} />;
|
||||
});
|
||||
|
||||
story.add('Installed Pack Tooltip (Tall)', () => {
|
||||
const installedPack = createPack({ id: 'installed-pack-tall' }, tallSticker);
|
||||
|
||||
const props = createProps({
|
||||
installedPacks: [installedPack],
|
||||
installedPack,
|
||||
});
|
||||
|
||||
return <StickerButton {...props} />;
|
||||
});
|
||||
|
||||
story.add('New Install Tooltip', () => {
|
||||
const props = createProps({
|
||||
installedPacks,
|
||||
showIntroduction: true,
|
||||
});
|
||||
|
||||
return <StickerButton {...props} />;
|
||||
});
|
||||
|
|
@ -1,260 +0,0 @@
|
|||
#### Default
|
||||
|
||||
```jsx
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
const wideSticker = {
|
||||
id: 4,
|
||||
url: util.landscapeGreenObjectUrl,
|
||||
packId: 'wide',
|
||||
};
|
||||
const tallSticker = { id: 4, url: util.portraitTealObjectUrl, packId: 'tall' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
cover: sticker1,
|
||||
title: 'Foo',
|
||||
author: 'Foo McBarrington',
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker2,
|
||||
title: 'Baz',
|
||||
author: 'Foo McBarrington (Official)',
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker3,
|
||||
title: 'Third',
|
||||
author: 'Foo McBarrington',
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
{
|
||||
id: 'wide',
|
||||
cover: wideSticker,
|
||||
title: 'Wide',
|
||||
author: 'Wide',
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...wideSticker, id })),
|
||||
},
|
||||
{
|
||||
id: 'tall',
|
||||
cover: tallSticker,
|
||||
title: 'Tall',
|
||||
author: 'Tall',
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...tallSticker, id })),
|
||||
},
|
||||
];
|
||||
|
||||
const receivedPacks = packs.map(p => ({ ...p, status: 'downloaded' }));
|
||||
const installedPacks = packs.map(p => ({ ...p, status: 'installed' }));
|
||||
const blessedPacks = packs.map(p => ({
|
||||
...p,
|
||||
status: 'downloaded',
|
||||
isBlessed: true,
|
||||
}));
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerManager
|
||||
i18n={util.i18n}
|
||||
installedPacks={installedPacks}
|
||||
receivedPacks={receivedPacks}
|
||||
blessedPacks={blessedPacks}
|
||||
installStickerPack={id => console.log('installStickerPack', id)}
|
||||
uninstallStickerPack={id => console.log('uninstallStickerPack', id)}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Only installed packs
|
||||
|
||||
```jsx
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
cover: sticker1,
|
||||
title: 'Foo',
|
||||
author: 'Foo McBarrington',
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker2,
|
||||
title: 'Baz',
|
||||
author: 'Foo McBarrington',
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker3,
|
||||
title: 'Baz',
|
||||
author: 'Foo McBarrington',
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
];
|
||||
|
||||
const installedPacks = packs.map(p => ({ ...p, status: 'installed' }));
|
||||
const noPacks = [];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerManager
|
||||
i18n={util.i18n}
|
||||
installedPacks={installedPacks}
|
||||
receivedPacks={noPacks}
|
||||
blessedPacks={noPacks}
|
||||
installStickerPack={id => console.log('installStickerPack', id)}
|
||||
uninstallStickerPack={id => console.log('uninstallStickerPack', id)}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Only received packs
|
||||
|
||||
```jsx
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
cover: sticker1,
|
||||
title: 'Foo',
|
||||
author: 'Foo McBarrington',
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker2,
|
||||
title: 'Baz',
|
||||
author: 'Foo McBarrington',
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker3,
|
||||
title: 'Baz',
|
||||
author: 'Foo McBarrington',
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
];
|
||||
|
||||
const receivedPacks = packs.map(p => ({ ...p, status: 'installed' }));
|
||||
const noPacks = [];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerManager
|
||||
i18n={util.i18n}
|
||||
installedPacks={noPacks}
|
||||
receivedPacks={receivedPacks}
|
||||
blessedPacks={noPacks}
|
||||
installStickerPack={id => console.log('installStickerPack', id)}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Just installed and 'known'
|
||||
|
||||
```jsx
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const installedPacks = [
|
||||
{
|
||||
id: 'foo',
|
||||
cover: sticker1,
|
||||
title: 'Foo',
|
||||
status: 'installed',
|
||||
author: 'Foo McBarrington',
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
];
|
||||
|
||||
const knownPacks = [
|
||||
{
|
||||
id: 'foo',
|
||||
key: 'key1',
|
||||
stickers: [],
|
||||
state: 'known',
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
key: 'key2',
|
||||
stickers: [],
|
||||
state: 'known',
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
key: 'key3',
|
||||
stickers: [],
|
||||
state: 'known',
|
||||
},
|
||||
];
|
||||
|
||||
const noPacks = [];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerManager
|
||||
i18n={util.i18n}
|
||||
installedPacks={installedPacks}
|
||||
receivedPacks={noPacks}
|
||||
blessedPacks={noPacks}
|
||||
knownPacks={knownPacks}
|
||||
installStickerPack={id => console.log('installStickerPack', id)}
|
||||
downloadStickerPack={(packId, packKey, options) =>
|
||||
console.log('downloadStickerPack', { packId, packKey, options })
|
||||
}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### No packs at All
|
||||
|
||||
```jsx
|
||||
const noPacks = [];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<div style={{ height: '500px' }}>
|
||||
<StickerManager
|
||||
i18n={util.i18n}
|
||||
installedPacks={noPacks}
|
||||
receivedPacks={noPacks}
|
||||
blessedPacks={noPacks}
|
||||
installStickerPack={id => console.log('installStickerPack', id)}
|
||||
uninstallStickerPack={id => console.log('uninstallStickerPack', id)}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
83
ts/components/stickers/StickerManager.stories.tsx
Normal file
83
ts/components/stickers/StickerManager.stories.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
// @ts-ignore
|
||||
import { setup as setupI18n } from '../../../js/modules/i18n';
|
||||
|
||||
// @ts-ignore
|
||||
import enMessages from '../../../_locales/en/messages.json';
|
||||
|
||||
import { Props, StickerManager } from './StickerManager';
|
||||
import { createPack, sticker1, sticker2 } from './StickerPicker.stories';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/Stickers/StickerManager', module);
|
||||
|
||||
const receivedPacks = [
|
||||
createPack({ id: 'received-pack-1', status: 'downloaded' }, sticker1),
|
||||
createPack({ id: 'received-pack-2', status: 'downloaded' }, sticker2),
|
||||
];
|
||||
|
||||
const installedPacks = [
|
||||
createPack({ id: 'installed-pack-1', status: 'installed' }, sticker1),
|
||||
createPack({ id: 'installed-pack-2', status: 'installed' }, sticker2),
|
||||
];
|
||||
|
||||
const blessedPacks = [
|
||||
createPack(
|
||||
{ id: 'blessed-pack-1', status: 'downloaded', isBlessed: true },
|
||||
sticker1
|
||||
),
|
||||
createPack(
|
||||
{ id: 'blessed-pack-2', status: 'downloaded', isBlessed: true },
|
||||
sticker2
|
||||
),
|
||||
];
|
||||
|
||||
const knownPacks = [
|
||||
createPack({ id: 'known-pack-1', status: 'known' }, sticker1),
|
||||
createPack({ id: 'known-pack-2', status: 'known' }, sticker2),
|
||||
];
|
||||
|
||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
blessedPacks: overrideProps.blessedPacks || [],
|
||||
downloadStickerPack: action('downloadStickerPack'),
|
||||
i18n,
|
||||
installStickerPack: action('installStickerPack'),
|
||||
installedPacks: overrideProps.installedPacks || [],
|
||||
knownPacks: overrideProps.knownPacks || [],
|
||||
receivedPacks: overrideProps.receivedPacks || [],
|
||||
uninstallStickerPack: action('uninstallStickerPack'),
|
||||
});
|
||||
|
||||
story.add('Full', () => {
|
||||
const props = createProps({ installedPacks, receivedPacks, blessedPacks });
|
||||
|
||||
return <StickerManager {...props} />;
|
||||
});
|
||||
|
||||
story.add('Installed Packs', () => {
|
||||
const props = createProps({ installedPacks });
|
||||
|
||||
return <StickerManager {...props} />;
|
||||
});
|
||||
|
||||
story.add('Received Packs', () => {
|
||||
const props = createProps({ receivedPacks });
|
||||
|
||||
return <StickerManager {...props} />;
|
||||
});
|
||||
|
||||
story.add('Installed + Known Packs', () => {
|
||||
const props = createProps({ installedPacks, knownPacks });
|
||||
|
||||
return <StickerManager {...props} />;
|
||||
});
|
||||
|
||||
story.add('Empty', () => {
|
||||
const props = createProps();
|
||||
|
||||
return <StickerManager {...props} />;
|
||||
});
|
||||
|
|
@ -1,351 +0,0 @@
|
|||
#### Default
|
||||
|
||||
```jsx
|
||||
const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
const wideSticker = {
|
||||
id: 4,
|
||||
url: util.landscapeGreenObjectUrl,
|
||||
packId: 'wide',
|
||||
};
|
||||
const tallSticker = { id: 4, url: util.portraitTealObjectUrl, packId: 'tall' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'tall',
|
||||
cover: tallSticker,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...tallSticker, id })),
|
||||
},
|
||||
{
|
||||
id: 'wide',
|
||||
cover: wideSticker,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...wideSticker, id })),
|
||||
},
|
||||
{
|
||||
id: 'foo',
|
||||
cover: sticker1,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker2,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker3,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
{
|
||||
id: 'qux',
|
||||
cover: sticker2,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'quux',
|
||||
cover: sticker3,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'corge',
|
||||
cover: sticker2,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'grault',
|
||||
cover: sticker1,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'garply',
|
||||
cover: sticker2,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'waldo',
|
||||
cover: sticker3,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
{
|
||||
id: 'fred',
|
||||
cover: sticker2,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'plugh',
|
||||
cover: sticker1,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'xyzzy',
|
||||
cover: sticker2,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'thud',
|
||||
cover: abeSticker,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...abeSticker, id })),
|
||||
},
|
||||
{
|
||||
id: 'banana',
|
||||
cover: sticker2,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'apple',
|
||||
cover: sticker1,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'strawberry',
|
||||
cover: sticker2,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'tombrady',
|
||||
cover: abeSticker,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...abeSticker, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerPicker
|
||||
i18n={util.i18n}
|
||||
packs={packs}
|
||||
recentStickers={[
|
||||
abeSticker,
|
||||
sticker1,
|
||||
sticker2,
|
||||
sticker3,
|
||||
tallSticker,
|
||||
wideSticker,
|
||||
{ ...sticker2, id: 9999 },
|
||||
]}
|
||||
onClose={() => console.log('onClose')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### No Recently Used Stickers
|
||||
|
||||
The sticker picker defaults to the first pack when there are no recent stickers.
|
||||
|
||||
```jsx
|
||||
const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
|
||||
const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
|
||||
const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
|
||||
|
||||
const packs = [
|
||||
{
|
||||
id: 'foo',
|
||||
cover: sticker1,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker1, id })),
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
cover: sticker2,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker2, id })),
|
||||
},
|
||||
{
|
||||
id: 'baz',
|
||||
cover: sticker3,
|
||||
stickerCount: 101,
|
||||
stickers: Array(101)
|
||||
.fill(0)
|
||||
.map((n, id) => ({ ...sticker3, id })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerPicker
|
||||
i18n={util.i18n}
|
||||
packs={packs}
|
||||
recentStickers={[]}
|
||||
onClose={() => console.log('onClose')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Empty
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerPicker
|
||||
i18n={util.i18n}
|
||||
packs={[]}
|
||||
recentStickers={[]}
|
||||
onClose={() => console.log('onClose')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Pending Download
|
||||
|
||||
```jsx
|
||||
const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const packs = [
|
||||
{
|
||||
id: 'tombrady',
|
||||
status: 'pending',
|
||||
cover: abeSticker,
|
||||
stickerCount: 30,
|
||||
stickers: [abeSticker],
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerPicker
|
||||
i18n={util.i18n}
|
||||
packs={packs}
|
||||
recentStickers={[]}
|
||||
onClose={() => console.log('onClose')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Picker Hint
|
||||
|
||||
```jsx
|
||||
const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const packs = [
|
||||
{
|
||||
id: 'tombrady',
|
||||
cover: abeSticker,
|
||||
stickerCount: 100,
|
||||
stickers: Array(100)
|
||||
.fill(0)
|
||||
.map((_el, i) => ({ ...abeSticker, id: i })),
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerPicker
|
||||
i18n={util.i18n}
|
||||
packs={packs}
|
||||
recentStickers={[]}
|
||||
onClose={() => console.log('onClose')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
showPickerHint={true}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
#### Pack With Error
|
||||
|
||||
```jsx
|
||||
const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
|
||||
const packs = [
|
||||
{
|
||||
id: 'tombrady',
|
||||
status: 'error',
|
||||
cover: abeSticker,
|
||||
stickerCount: 3,
|
||||
stickers: [],
|
||||
},
|
||||
{
|
||||
id: 'foo',
|
||||
status: 'error',
|
||||
cover: abeSticker,
|
||||
stickerCount: 3,
|
||||
stickers: [abeSticker],
|
||||
},
|
||||
];
|
||||
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StickerPicker
|
||||
i18n={util.i18n}
|
||||
packs={packs}
|
||||
recentStickers={[]}
|
||||
onClose={() => console.log('onClose')}
|
||||
onClickAddPack={() => console.log('onClickAddPack')}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
console.log('onPickSticker', { packId, stickerId })
|
||||
}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
167
ts/components/stickers/StickerPicker.stories.tsx
Normal file
167
ts/components/stickers/StickerPicker.stories.tsx
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
import * as React from 'react';
|
||||
import { sample } from 'lodash';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
|
||||
// @ts-ignore
|
||||
import { setup as setupI18n } from '../../../js/modules/i18n';
|
||||
|
||||
// @ts-ignore
|
||||
import enMessages from '../../../_locales/en/messages.json';
|
||||
|
||||
import { Props, StickerPicker } from './StickerPicker';
|
||||
import { StickerPackType, StickerType } from '../../state/ducks/stickers';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/Stickers/StickerPicker', module);
|
||||
|
||||
export const sticker1: StickerType = {
|
||||
id: 1,
|
||||
url: '/fixtures/kitten-1-64-64.jpg',
|
||||
packId: 'foo',
|
||||
emoji: '',
|
||||
};
|
||||
|
||||
export const sticker2: StickerType = {
|
||||
id: 2,
|
||||
url: '/fixtures/kitten-2-64-64.jpg',
|
||||
packId: 'bar',
|
||||
emoji: '',
|
||||
};
|
||||
|
||||
export const sticker3: StickerType = {
|
||||
id: 3,
|
||||
url: '/fixtures/kitten-3-64-64.jpg',
|
||||
packId: 'baz',
|
||||
emoji: '',
|
||||
};
|
||||
|
||||
export const abeSticker: StickerType = {
|
||||
id: 4,
|
||||
url: '/fixtures/512x515-thumbs-up-lincoln.webp',
|
||||
packId: 'abe',
|
||||
emoji: '',
|
||||
};
|
||||
|
||||
export const wideSticker: StickerType = {
|
||||
id: 5,
|
||||
url: '/fixtures/1000x50-green.jpeg',
|
||||
packId: 'wide',
|
||||
emoji: '',
|
||||
};
|
||||
|
||||
export const tallSticker: StickerType = {
|
||||
id: 6,
|
||||
url: '/fixtures/50x1000-teal.jpeg',
|
||||
packId: 'tall',
|
||||
emoji: '',
|
||||
};
|
||||
|
||||
const choosableStickers = [sticker1, sticker2, sticker3, abeSticker];
|
||||
|
||||
export const createPack = (
|
||||
props: Partial<StickerPackType>,
|
||||
sticker?: StickerType
|
||||
): StickerPackType => ({
|
||||
id: '',
|
||||
title: props.id ? `${props.id} title` : 'title',
|
||||
key: '',
|
||||
author: '',
|
||||
isBlessed: false,
|
||||
lastUsed: 0,
|
||||
status: 'known',
|
||||
cover: sticker,
|
||||
stickerCount: 101,
|
||||
stickers: sticker
|
||||
? Array(101)
|
||||
.fill(0)
|
||||
.map((_, id) => ({ ...sticker, id }))
|
||||
: [],
|
||||
...props,
|
||||
});
|
||||
|
||||
const packs = [
|
||||
createPack({ id: 'tall' }, tallSticker),
|
||||
createPack({ id: 'wide' }, wideSticker),
|
||||
...Array(20)
|
||||
.fill(0)
|
||||
.map((_, n) =>
|
||||
createPack({ id: `pack-${n}` }, sample(choosableStickers) as StickerType)
|
||||
),
|
||||
];
|
||||
|
||||
const recentStickers = [
|
||||
abeSticker,
|
||||
sticker1,
|
||||
sticker2,
|
||||
sticker3,
|
||||
tallSticker,
|
||||
wideSticker,
|
||||
{ ...sticker2, id: 9999 },
|
||||
];
|
||||
|
||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
i18n,
|
||||
onClickAddPack: action('onClickAddPack'),
|
||||
onClose: action('onClose'),
|
||||
onPickSticker: action('onPickSticker'),
|
||||
packs: overrideProps.packs || [],
|
||||
recentStickers: overrideProps.recentStickers || [],
|
||||
showPickerHint: boolean(
|
||||
'showPickerHint',
|
||||
overrideProps.showPickerHint || false
|
||||
),
|
||||
});
|
||||
|
||||
story.add('Full', () => {
|
||||
const props = createProps({ packs, recentStickers });
|
||||
|
||||
return <StickerPicker {...props} />;
|
||||
});
|
||||
|
||||
story.add('Picker Hint', () => {
|
||||
const props = createProps({ packs, recentStickers, showPickerHint: true });
|
||||
|
||||
return <StickerPicker {...props} />;
|
||||
});
|
||||
|
||||
story.add('No Recent Stickers', () => {
|
||||
const props = createProps({ packs });
|
||||
|
||||
return <StickerPicker {...props} />;
|
||||
});
|
||||
|
||||
story.add('Empty', () => {
|
||||
const props = createProps();
|
||||
|
||||
return <StickerPicker {...props} />;
|
||||
});
|
||||
|
||||
story.add('Pending Download', () => {
|
||||
const pack = createPack(
|
||||
{ status: 'pending', stickers: [abeSticker] },
|
||||
abeSticker
|
||||
);
|
||||
const props = createProps({ packs: [pack] });
|
||||
|
||||
return <StickerPicker {...props} />;
|
||||
});
|
||||
|
||||
story.add('Error', () => {
|
||||
const pack = createPack(
|
||||
{ status: 'error', stickers: [abeSticker] },
|
||||
abeSticker
|
||||
);
|
||||
const props = createProps({ packs: [pack] });
|
||||
|
||||
return <StickerPicker {...props} />;
|
||||
});
|
||||
|
||||
story.add('No Cover', () => {
|
||||
const pack = createPack({ status: 'error', stickers: [abeSticker] });
|
||||
const props = createProps({ packs: [pack] });
|
||||
|
||||
return <StickerPicker {...props} />;
|
||||
});
|
||||
|
|
@ -27,6 +27,17 @@ export type StickerDBType = {
|
|||
readonly path: string;
|
||||
};
|
||||
|
||||
export const StickerPackStatuses = [
|
||||
'known',
|
||||
'ephemeral',
|
||||
'downloaded',
|
||||
'installed',
|
||||
'pending',
|
||||
'error',
|
||||
] as const;
|
||||
|
||||
export type StickerPackStatus = typeof StickerPackStatuses[number];
|
||||
|
||||
export type StickerPackDBType = {
|
||||
readonly id: string;
|
||||
readonly key: string;
|
||||
|
|
@ -38,13 +49,7 @@ export type StickerPackDBType = {
|
|||
readonly downloadAttempts: number;
|
||||
readonly installedAt: number | null;
|
||||
readonly lastUsed: number;
|
||||
readonly status:
|
||||
| 'known'
|
||||
| 'ephemeral'
|
||||
| 'downloaded'
|
||||
| 'installed'
|
||||
| 'pending'
|
||||
| 'error';
|
||||
readonly status: StickerPackStatus;
|
||||
readonly stickerCount: number;
|
||||
readonly stickers: Dictionary<StickerDBType>;
|
||||
readonly title: string;
|
||||
|
|
@ -80,13 +85,7 @@ export type StickerPackType = {
|
|||
readonly cover?: StickerType;
|
||||
readonly lastUsed: number;
|
||||
readonly attemptedStatus?: 'downloaded' | 'installed' | 'ephemeral';
|
||||
readonly status:
|
||||
| 'known'
|
||||
| 'ephemeral'
|
||||
| 'downloaded'
|
||||
| 'installed'
|
||||
| 'pending'
|
||||
| 'error';
|
||||
readonly status: StickerPackStatus;
|
||||
readonly stickers: Array<StickerType>;
|
||||
readonly stickerCount: number;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue