49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
// Copyright 2019-2020 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import * as React from 'react';
|
|
import { boolean, select, text } from '@storybook/addon-knobs';
|
|
import { action } from '@storybook/addon-actions';
|
|
|
|
import { StoryRow } from '../elements/StoryRow';
|
|
import { StickerFrame } from './StickerFrame';
|
|
|
|
import type { EmojiPickDataType } from '../../ts/components/emoji/EmojiPicker';
|
|
|
|
export default {
|
|
title: 'Sticker Creator/components',
|
|
};
|
|
|
|
export const _StickerFrame = (): JSX.Element => {
|
|
const image = text('image url', '/fixtures/512x515-thumbs-up-lincoln.webp');
|
|
const showGuide = boolean('show guide', true);
|
|
const mode = select('mode', ['removable', 'pick-emoji', 'add'], 'add');
|
|
const onRemove = action('onRemove');
|
|
const onDrop = action('onDrop');
|
|
const [skinTone, setSkinTone] = React.useState(0);
|
|
const [emoji, setEmoji] = React.useState<EmojiPickDataType | undefined>(
|
|
undefined
|
|
);
|
|
|
|
return (
|
|
<StoryRow top>
|
|
<StickerFrame
|
|
id="1337"
|
|
emojiData={emoji}
|
|
image={image}
|
|
mode={mode}
|
|
showGuide={showGuide}
|
|
onRemove={onRemove}
|
|
skinTone={skinTone}
|
|
onSetSkinTone={setSkinTone}
|
|
onPickEmoji={e => setEmoji(e.emoji)}
|
|
onDrop={onDrop}
|
|
/>
|
|
</StoryRow>
|
|
);
|
|
};
|
|
|
|
_StickerFrame.story = {
|
|
name: 'StickerFrame',
|
|
};
|