Upgrade react and storybook
This commit is contained in:
Josh Perez
GitHub
parent
6476a4fe73
commit
42eb4013d0
244 changed files with 15341 additions and 10249 deletions
|
|
@ -1,5 +0,0 @@
|
|||
// Copyright 2019-2020 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import '@storybook/addon-knobs/register';
|
||||
import '@storybook/addon-actions/register';
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
// Copyright 2019-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { addDecorator, addParameters, configure } from '@storybook/react';
|
||||
import { withKnobs, boolean, optionsKnob } from '@storybook/addon-knobs';
|
||||
import classnames from 'classnames';
|
||||
import * as styles from './styles.scss';
|
||||
import messages from '../_locales/en/messages.json';
|
||||
import { I18n } from '../sticker-creator/util/i18n';
|
||||
import { ThemeType } from '../ts/types/Util';
|
||||
import { ClassyProvider } from '../ts/components/PopperRootContext';
|
||||
import { StorybookThemeContext } from './StorybookThemeContext';
|
||||
|
||||
const optionsConfig = {
|
||||
display: 'inline-radio',
|
||||
};
|
||||
|
||||
const persistKnob = id => knob => {
|
||||
const value = knob(localStorage.getItem(id));
|
||||
localStorage.setItem(id, value);
|
||||
return value;
|
||||
};
|
||||
|
||||
const makeThemeKnob = pane =>
|
||||
persistKnob(`${pane}-pane-theme`)(localValue =>
|
||||
optionsKnob(
|
||||
`${pane} Pane Theme`,
|
||||
{ Light: '', Dark: classnames('dark-theme', styles.darkTheme) },
|
||||
localValue || '',
|
||||
optionsConfig,
|
||||
`${pane} Pane`
|
||||
)
|
||||
);
|
||||
|
||||
const parseThemeString = str => (str === '' ? ThemeType.light : ThemeType.dark);
|
||||
|
||||
const makeModeKnob = pane =>
|
||||
persistKnob(`${pane}-pane-mode`)(localValue =>
|
||||
optionsKnob(
|
||||
`${pane} Pane Mode`,
|
||||
{ Mouse: 'mouse-mode', Keyboard: 'keyboard-mode' },
|
||||
localValue || 'mouse-mode',
|
||||
optionsConfig,
|
||||
`${pane} Pane`
|
||||
)
|
||||
);
|
||||
|
||||
addDecorator(withKnobs({ escapeHTML: false }));
|
||||
|
||||
addDecorator((storyFn /* , context */) => {
|
||||
const contents = storyFn();
|
||||
const firstPaneThemeString = makeThemeKnob('First');
|
||||
const firstPaneTheme = parseThemeString(firstPaneThemeString);
|
||||
const firstPaneMode = makeModeKnob('First');
|
||||
|
||||
const secondPane = persistKnob('second-pane-active')(localValue =>
|
||||
boolean('Second Pane Active', localValue !== 'false', 'Second Pane')
|
||||
);
|
||||
|
||||
const secondPaneThemeString = makeThemeKnob('Second');
|
||||
const secondPaneTheme = parseThemeString(secondPaneThemeString);
|
||||
const secondPaneMode = makeModeKnob('Second');
|
||||
|
||||
// Adding it to the body as well so that we can cover modals and other
|
||||
// components that are rendered outside of this decorator container
|
||||
if (firstPaneThemeString === '') {
|
||||
document.body.classList.remove('dark-theme');
|
||||
} else {
|
||||
document.body.classList.add('dark-theme');
|
||||
}
|
||||
|
||||
if (firstPaneMode === 'mouse-mode') {
|
||||
document.body.classList.remove('keyboard-mode');
|
||||
document.body.classList.add('mouse-mode');
|
||||
} else {
|
||||
document.body.classList.remove('mouse-mode');
|
||||
document.body.classList.add('keyboard-mode');
|
||||
}
|
||||
|
||||
document.body.classList.add('page-is-visible');
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<StorybookThemeContext.Provider value={firstPaneTheme}>
|
||||
<ClassyProvider themes={['dark']}>
|
||||
<div
|
||||
className={classnames(
|
||||
styles.panel,
|
||||
firstPaneThemeString,
|
||||
firstPaneMode
|
||||
)}
|
||||
>
|
||||
{contents}
|
||||
</div>
|
||||
</ClassyProvider>
|
||||
</StorybookThemeContext.Provider>
|
||||
{secondPane ? (
|
||||
<div
|
||||
className={classnames(
|
||||
styles.panel,
|
||||
secondPaneThemeString,
|
||||
secondPaneMode
|
||||
)}
|
||||
>
|
||||
<StorybookThemeContext.Provider value={secondPaneTheme}>
|
||||
{contents}
|
||||
</StorybookThemeContext.Provider>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
// Hack to enable hooks in stories: https://github.com/storybookjs/storybook/issues/5721#issuecomment-473869398
|
||||
addDecorator(Story => <Story />);
|
||||
|
||||
addDecorator(story => <I18n messages={messages}>{story()}</I18n>);
|
||||
|
||||
addParameters({
|
||||
axe: {
|
||||
disabledRules: ['html-has-lang'],
|
||||
},
|
||||
});
|
||||
|
||||
configure(() => {
|
||||
// Load main app stories
|
||||
const tsComponentsContext = require.context(
|
||||
'../ts/components',
|
||||
true,
|
||||
/\.stories.tsx?$/
|
||||
);
|
||||
tsComponentsContext.keys().forEach(f => tsComponentsContext(f));
|
||||
// Load sticker creator stories
|
||||
const stickerCreatorContext = require.context(
|
||||
'../sticker-creator',
|
||||
true,
|
||||
/\.stories\.tsx?$/
|
||||
);
|
||||
stickerCreatorContext.keys().forEach(f => stickerCreatorContext(f));
|
||||
}, module);
|
||||
17
.storybook/main.js
Normal file
17
.storybook/main.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
// Copyright 2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
module.exports = {
|
||||
stories: [
|
||||
'../ts/components/**/*.stories.tsx',
|
||||
'../sticker-creator/**/*.stories.tsx',
|
||||
],
|
||||
addons: [
|
||||
'@storybook/addon-a11y',
|
||||
'@storybook/addon-actions',
|
||||
'@storybook/addon-controls',
|
||||
'@storybook/addon-measure',
|
||||
'@storybook/addon-toolbars',
|
||||
'@storybook/addon-viewport',
|
||||
],
|
||||
};
|
||||
87
.storybook/preview.tsx
Normal file
87
.storybook/preview.tsx
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
// Copyright 2019-2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { withKnobs, boolean, optionsKnob } from '@storybook/addon-knobs';
|
||||
|
||||
import * as styles from './styles.scss';
|
||||
import messages from '../_locales/en/messages.json';
|
||||
import { ClassyProvider } from '../ts/components/PopperRootContext';
|
||||
import { I18n } from '../sticker-creator/util/i18n';
|
||||
import { StorybookThemeContext } from './StorybookThemeContext';
|
||||
import { ThemeType } from '../ts/types/Util';
|
||||
|
||||
export const globalTypes = {
|
||||
mode: {
|
||||
name: 'Mode',
|
||||
description: 'Application mode',
|
||||
defaultValue: 'mouse',
|
||||
toolbar: {
|
||||
dynamicTitle: true,
|
||||
icon: 'circlehollow',
|
||||
items: ['mouse', 'keyboard'],
|
||||
showName: true,
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
name: 'Theme',
|
||||
description: 'Global theme for components',
|
||||
defaultValue: 'light',
|
||||
toolbar: {
|
||||
dynamicTitle: true,
|
||||
icon: 'circlehollow',
|
||||
items: ['light', 'dark'],
|
||||
showName: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const withModeAndThemeProvider = (Story, context) => {
|
||||
const theme =
|
||||
context.globals.theme === 'light' ? ThemeType.light : ThemeType.dark;
|
||||
const mode = context.globals.mode;
|
||||
|
||||
// Adding it to the body as well so that we can cover modals and other
|
||||
// components that are rendered outside of this decorator container
|
||||
if (theme === 'light') {
|
||||
document.body.classList.remove('dark-theme');
|
||||
} else {
|
||||
document.body.classList.add('dark-theme');
|
||||
}
|
||||
|
||||
if (mode === 'mouse') {
|
||||
document.body.classList.remove('keyboard-mode');
|
||||
document.body.classList.add('mouse-mode');
|
||||
} else {
|
||||
document.body.classList.remove('mouse-mode');
|
||||
document.body.classList.add('keyboard-mode');
|
||||
}
|
||||
|
||||
document.body.classList.add('page-is-visible');
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<StorybookThemeContext.Provider value={theme}>
|
||||
<Story {...context} />
|
||||
</StorybookThemeContext.Provider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const withI18n = (Story, context) => (
|
||||
<I18n messages={messages}>
|
||||
<Story {...context} />
|
||||
</I18n>
|
||||
);
|
||||
|
||||
export const decorators = [
|
||||
withModeAndThemeProvider,
|
||||
withI18n,
|
||||
];
|
||||
|
||||
export const parameters = {
|
||||
axe: {
|
||||
disabledRules: ['html-has-lang'],
|
||||
},
|
||||
};
|
||||
|
|
@ -4,19 +4,10 @@
|
|||
@import '../stylesheets/variables';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
width: 100vw;
|
||||
align-items: stretch;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.panel {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright 2019-2020 Signal Messenger, LLC
|
||||
// Copyright 2019-2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
const webpack = require('webpack');
|
||||
|
|
@ -10,11 +10,6 @@ module.exports = ({ config }) => {
|
|||
);
|
||||
|
||||
config.module.rules.unshift(
|
||||
{
|
||||
test: /\.[jt]sx?$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
loaders: [
|
||||
|
|
@ -25,8 +20,6 @@ module.exports = ({ config }) => {
|
|||
}
|
||||
);
|
||||
|
||||
config.resolve.extensions = ['.tsx', '.ts', '.jsx', '.js'];
|
||||
|
||||
config.externals = {
|
||||
net: 'net',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ tests
|
|||
powered-test
|
||||
|
||||
# asset directories
|
||||
docs
|
||||
doc
|
||||
website
|
||||
images
|
||||
|
|
|
|||
58
package.json
58
package.json
|
|
@ -58,7 +58,6 @@
|
|||
"dev:typed-scss": "yarn build:typed-scss -w",
|
||||
"dev:storybook": "cross-env SIGNAL_ENV=storybook start-storybook -p 6006 -s ./",
|
||||
"dev:sass": "yarn sass --watch",
|
||||
"storybook:axe": "build-storybook && axe-storybook",
|
||||
"build": "run-s --print-label generate build:typed-scss build:webpack build:release",
|
||||
"build:acknowledgments": "node scripts/generate-acknowledgments.js",
|
||||
"build:dev": "run-s --print-label generate build:typed-scss build:webpack",
|
||||
|
|
@ -78,7 +77,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "2.9.2",
|
||||
"@react-spring/web": "9.4.1",
|
||||
"@react-spring/web": "9.4.5",
|
||||
"@signalapp/libsignal-client": "0.16.0",
|
||||
"@sindresorhus/is": "0.8.0",
|
||||
"@types/fabric": "4.5.3",
|
||||
|
|
@ -143,19 +142,19 @@
|
|||
"qrcode-generator": "1.4.4",
|
||||
"quill": "1.3.7",
|
||||
"quill-delta": "4.0.1",
|
||||
"react": "16.14.0",
|
||||
"react": "17.0.2",
|
||||
"react-blurhash": "0.1.2",
|
||||
"react-contextmenu": "2.11.0",
|
||||
"react-dom": "16.14.0",
|
||||
"react-dom": "17.0.2",
|
||||
"react-dropzone": "10.1.7",
|
||||
"react-hot-loader": "4.12.11",
|
||||
"react-hot-loader": "4.13.0",
|
||||
"react-measure": "2.3.0",
|
||||
"react-popper": "2.2.5",
|
||||
"react-quill": "2.0.0-beta.2",
|
||||
"react-redux": "7.1.0",
|
||||
"react-popper": "2.3.0",
|
||||
"react-quill": "2.0.0-beta.4",
|
||||
"react-redux": "7.2.8",
|
||||
"react-router-dom": "5.0.1",
|
||||
"react-sortable-hoc": "1.9.1",
|
||||
"react-virtualized": "9.21.0",
|
||||
"react-sortable-hoc": "2.0.0",
|
||||
"react-virtualized": "9.22.3",
|
||||
"read-last-lines": "1.8.0",
|
||||
"redux": "4.1.2",
|
||||
"redux-logger": "3.0.6",
|
||||
|
|
@ -179,21 +178,25 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.14.3",
|
||||
"@babel/plugin-proposal-class-properties": "7.7.4",
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
|
||||
"@babel/plugin-proposal-optional-chaining": "7.13.8",
|
||||
"@babel/plugin-transform-runtime": "7.8.3",
|
||||
"@babel/plugin-transform-typescript": "7.16.1",
|
||||
"@babel/preset-react": "7.7.4",
|
||||
"@babel/preset-typescript": "7.16.0",
|
||||
"@chanzuckerberg/axe-storybook-testing": "3.0.2",
|
||||
"@babel/plugin-proposal-class-properties": "7.17.12",
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator": "7.17.12",
|
||||
"@babel/plugin-proposal-optional-chaining": "7.17.12",
|
||||
"@babel/plugin-transform-runtime": "7.18.2",
|
||||
"@babel/plugin-transform-typescript": "7.18.4",
|
||||
"@babel/preset-react": "7.17.12",
|
||||
"@babel/preset-typescript": "7.17.12",
|
||||
"@electron/fuses": "1.5.0",
|
||||
"@mixer/parallel-prettier": "2.0.1",
|
||||
"@signalapp/mock-server": "1.5.1",
|
||||
"@storybook/addon-actions": "5.1.11",
|
||||
"@storybook/addon-knobs": "5.1.11",
|
||||
"@storybook/addons": "5.1.11",
|
||||
"@storybook/react": "5.1.11",
|
||||
"@storybook/addon-a11y": "6.5.6",
|
||||
"@storybook/addon-actions": "6.5.6",
|
||||
"@storybook/addon-controls": "6.5.6",
|
||||
"@storybook/addon-knobs": "6.4.0",
|
||||
"@storybook/addon-measure": "6.5.6",
|
||||
"@storybook/addon-toolbars": "6.5.6",
|
||||
"@storybook/addon-viewport": "6.5.6",
|
||||
"@storybook/addons": "6.5.6",
|
||||
"@storybook/react": "6.5.6",
|
||||
"@types/backbone": "1.4.5",
|
||||
"@types/better-sqlite3": "7.5.0",
|
||||
"@types/blueimp-load-image": "5.14.1",
|
||||
|
|
@ -229,10 +232,10 @@
|
|||
"@types/pino": "6.3.6",
|
||||
"@types/pino-multi-stream": "5.1.0",
|
||||
"@types/quill": "1.3.10",
|
||||
"@types/react": "16.8.6",
|
||||
"@types/react-dom": "16.8.2",
|
||||
"@types/react": "17.0.45",
|
||||
"@types/react-dom": "17.0.17",
|
||||
"@types/react-measure": "2.0.5",
|
||||
"@types/react-redux": "7.1.2",
|
||||
"@types/react-redux": "7.1.24",
|
||||
"@types/react-router-dom": "4.3.4",
|
||||
"@types/react-sortable-hoc": "0.6.5",
|
||||
"@types/react-virtualized": "9.18.12",
|
||||
|
|
@ -242,9 +245,6 @@
|
|||
"@types/sharp": "0.29.4",
|
||||
"@types/sinon": "10.0.2",
|
||||
"@types/split2": "3.2.1",
|
||||
"@types/storybook__addon-actions": "3.4.3",
|
||||
"@types/storybook__addon-knobs": "5.0.3",
|
||||
"@types/storybook__react": "4.0.2",
|
||||
"@types/terser-webpack-plugin": "5.0.3",
|
||||
"@types/underscore": "1.10.3",
|
||||
"@types/uuid": "3.4.4",
|
||||
|
|
@ -301,6 +301,8 @@
|
|||
},
|
||||
"resolutions": {
|
||||
"@storybook/react/@storybook/core/node-fetch": "2.6.1",
|
||||
"@types/react": "17.0.45",
|
||||
"@types/react-dom": "17.0.17",
|
||||
"dmg-license": "https://registry.yarnpkg.com/nop/-/nop-1.0.0.tgz",
|
||||
"fabric/canvas": "https://registry.yarnpkg.com/nop/-/nop-1.0.0.tgz",
|
||||
"fabric/jsdom": "https://registry.yarnpkg.com/nop/-/nop-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -2,13 +2,16 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
|
||||
import { StoryRow } from '../elements/StoryRow';
|
||||
import { ShareButtons } from './ShareButtons';
|
||||
|
||||
storiesOf('Sticker Creator/components', module).add('ShareButtons', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/components',
|
||||
};
|
||||
|
||||
export const _ShareButtons = (): JSX.Element => {
|
||||
const value = text('value', 'https://signal.org');
|
||||
|
||||
return (
|
||||
|
|
@ -16,4 +19,8 @@ storiesOf('Sticker Creator/components', module).add('ShareButtons', () => {
|
|||
<ShareButtons value={value} />
|
||||
</StoryRow>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
_ShareButtons.story = {
|
||||
name: 'ShareButtons',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,14 +2,17 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { boolean, select, text } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { StoryRow } from '../elements/StoryRow';
|
||||
import { StickerFrame } from './StickerFrame';
|
||||
|
||||
storiesOf('Sticker Creator/components', module).add('StickerFrame', () => {
|
||||
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', [null, 'removable', 'pick-emoji', 'add'], null);
|
||||
|
|
@ -34,4 +37,8 @@ storiesOf('Sticker Creator/components', module).add('StickerFrame', () => {
|
|||
/>
|
||||
</StoryRow>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
_StickerFrame.story = {
|
||||
name: 'StickerFrame',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,24 +2,28 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
|
||||
import { StoryRow } from '../elements/StoryRow';
|
||||
import { StickerPackPreview } from './StickerPackPreview';
|
||||
|
||||
storiesOf('Sticker Creator/components', module).add(
|
||||
'StickerPackPreview',
|
||||
() => {
|
||||
const image = text('image url', '/fixtures/512x515-thumbs-up-lincoln.webp');
|
||||
const title = text('title', 'Sticker pack title');
|
||||
const author = text('author', 'Sticker pack author');
|
||||
const images = React.useMemo(() => Array(39).fill(image), [image]);
|
||||
export default {
|
||||
title: 'Sticker Creator/components',
|
||||
};
|
||||
|
||||
return (
|
||||
<StoryRow top>
|
||||
<StickerPackPreview images={images} title={title} author={author} />
|
||||
</StoryRow>
|
||||
);
|
||||
}
|
||||
);
|
||||
export const _StickerPackPreview = (): JSX.Element => {
|
||||
const image = text('image url', '/fixtures/512x515-thumbs-up-lincoln.webp');
|
||||
const title = text('title', 'Sticker pack title');
|
||||
const author = text('author', 'Sticker pack author');
|
||||
const images = React.useMemo(() => Array(39).fill(image), [image]);
|
||||
|
||||
return (
|
||||
<StoryRow top>
|
||||
<StickerPackPreview images={images} title={title} author={author} />
|
||||
</StoryRow>
|
||||
);
|
||||
};
|
||||
|
||||
_StickerPackPreview.story = {
|
||||
name: 'StickerPackPreview',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,13 +3,16 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import { debounce, dropRight } from 'lodash';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text as textKnob } from '@storybook/addon-knobs';
|
||||
|
||||
import { StoryRow } from '../elements/StoryRow';
|
||||
import { Toaster } from './Toaster';
|
||||
|
||||
storiesOf('Sticker Creator/components', module).add('Toaster', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/components',
|
||||
};
|
||||
|
||||
export const _Toaster = (): JSX.Element => {
|
||||
const inputText = textKnob('Slices', ['error 1', 'error 2'].join('|'));
|
||||
const initialState = React.useMemo(() => inputText.split('|'), [inputText]);
|
||||
const [state, setState] = React.useState(initialState);
|
||||
|
|
@ -33,4 +36,4 @@ storiesOf('Sticker Creator/components', module).add('Toaster', () => {
|
|||
/>
|
||||
</StoryRow>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,14 +2,17 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
|
||||
import { StoryRow } from './StoryRow';
|
||||
import { Button } from './Button';
|
||||
|
||||
storiesOf('Sticker Creator/elements', module).add('Button', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/elements',
|
||||
};
|
||||
|
||||
export const _Button = (): JSX.Element => {
|
||||
const onClick = action('onClick');
|
||||
const child = text('text', 'foo bar');
|
||||
|
||||
|
|
@ -55,4 +58,4 @@ storiesOf('Sticker Creator/elements', module).add('Button', () => {
|
|||
</StoryRow>
|
||||
</>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,14 +2,17 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { StoryRow } from './StoryRow';
|
||||
import { ConfirmDialog } from './ConfirmDialog';
|
||||
|
||||
storiesOf('Sticker Creator/elements', module).add('ConfirmDialog', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/elements',
|
||||
};
|
||||
|
||||
export const _ConfirmDialog = (): JSX.Element => {
|
||||
const title = text('title', 'Foo bar banana baz?');
|
||||
const child = text(
|
||||
'text',
|
||||
|
|
@ -29,4 +32,8 @@ storiesOf('Sticker Creator/elements', module).add('ConfirmDialog', () => {
|
|||
</ConfirmDialog>
|
||||
</StoryRow>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
_ConfirmDialog.story = {
|
||||
name: 'ConfirmDialog',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,13 +2,16 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
|
||||
import { StoryRow } from './StoryRow';
|
||||
import { CopyText } from './CopyText';
|
||||
|
||||
storiesOf('Sticker Creator/elements', module).add('CopyText', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/elements',
|
||||
};
|
||||
|
||||
export const _CopyText = (): JSX.Element => {
|
||||
const label = text('label', 'foo bar');
|
||||
const value = text('value', 'foo bar');
|
||||
|
||||
|
|
@ -17,4 +20,8 @@ storiesOf('Sticker Creator/elements', module).add('CopyText', () => {
|
|||
<CopyText label={label} value={value} />
|
||||
</StoryRow>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
_CopyText.story = {
|
||||
name: 'CopyText',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,11 +2,18 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { DropZone } from './DropZone';
|
||||
|
||||
storiesOf('Sticker Creator/elements', module).add('DropZone', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/elements',
|
||||
};
|
||||
|
||||
export const _DropZone = (): JSX.Element => {
|
||||
return <DropZone label="This is the label" onDrop={action('onDrop')} />;
|
||||
});
|
||||
};
|
||||
|
||||
_DropZone.story = {
|
||||
name: 'DropZone',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,13 +2,16 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
|
||||
import { StoryRow } from './StoryRow';
|
||||
import { LabeledCheckbox } from './LabeledCheckbox';
|
||||
|
||||
storiesOf('Sticker Creator/elements', module).add('Labeled Checkbox', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/elements',
|
||||
};
|
||||
|
||||
export const _LabeledCheckbox = (): JSX.Element => {
|
||||
const child = text('label', 'foo bar');
|
||||
const [checked, setChecked] = React.useState(false);
|
||||
|
||||
|
|
@ -19,4 +22,4 @@ storiesOf('Sticker Creator/elements', module).add('Labeled Checkbox', () => {
|
|||
</LabeledCheckbox>
|
||||
</StoryRow>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,13 +2,16 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
|
||||
import { StoryRow } from './StoryRow';
|
||||
import { LabeledInput } from './LabeledInput';
|
||||
|
||||
storiesOf('Sticker Creator/elements', module).add('LabeledInput', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/elements',
|
||||
};
|
||||
|
||||
export const _LabeledInput = (): JSX.Element => {
|
||||
const child = text('label', 'foo bar');
|
||||
const placeholder = text('placeholder', 'foo bar');
|
||||
const [value, setValue] = React.useState('');
|
||||
|
|
@ -20,4 +23,8 @@ storiesOf('Sticker Creator/elements', module).add('LabeledInput', () => {
|
|||
</LabeledInput>
|
||||
</StoryRow>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
_LabeledInput.story = {
|
||||
name: 'LabeledInput',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,13 +2,16 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { number, text } from '@storybook/addon-knobs';
|
||||
|
||||
import { StoryRow } from './StoryRow';
|
||||
import { MessageBubble } from './MessageBubble';
|
||||
|
||||
storiesOf('Sticker Creator/elements', module).add('MessageBubble', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/elements',
|
||||
};
|
||||
|
||||
export const _MessageBubble = (): JSX.Element => {
|
||||
const child = text('text', 'Foo bar banana baz');
|
||||
const minutesAgo = number('minutesAgo', 3);
|
||||
|
||||
|
|
@ -17,4 +20,8 @@ storiesOf('Sticker Creator/elements', module).add('MessageBubble', () => {
|
|||
<MessageBubble minutesAgo={minutesAgo}>{child}</MessageBubble>
|
||||
</StoryRow>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
_MessageBubble.story = {
|
||||
name: 'MessageBubble',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,13 +2,16 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { number, text } from '@storybook/addon-knobs';
|
||||
|
||||
import { StoryRow } from './StoryRow';
|
||||
import { MessageSticker } from './MessageSticker';
|
||||
|
||||
storiesOf('Sticker Creator/elements', module).add('MessageSticker', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/elements',
|
||||
};
|
||||
|
||||
export const _MessageSticker = (): JSX.Element => {
|
||||
const image = text('image url', '/fixtures/512x515-thumbs-up-lincoln.webp');
|
||||
const minutesAgo = number('minutesAgo', 3);
|
||||
|
||||
|
|
@ -17,4 +20,8 @@ storiesOf('Sticker Creator/elements', module).add('MessageSticker', () => {
|
|||
<MessageSticker image={image} minutesAgo={minutesAgo} />
|
||||
</StoryRow>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
_MessageSticker.story = {
|
||||
name: 'MessageSticker',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,13 +2,16 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
|
||||
import { StoryRow } from './StoryRow';
|
||||
import { PageHeader } from './PageHeader';
|
||||
|
||||
storiesOf('Sticker Creator/elements', module).add('PageHeader', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/elements',
|
||||
};
|
||||
|
||||
export const _PageHeader = (): JSX.Element => {
|
||||
const child = text('text', 'foo bar');
|
||||
|
||||
return (
|
||||
|
|
@ -16,4 +19,8 @@ storiesOf('Sticker Creator/elements', module).add('PageHeader', () => {
|
|||
<PageHeader>{child}</PageHeader>
|
||||
</StoryRow>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
_PageHeader.story = {
|
||||
name: 'PageHeader',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,13 +2,16 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { number } from '@storybook/addon-knobs';
|
||||
|
||||
import { StoryRow } from './StoryRow';
|
||||
import { ProgressBar } from './ProgressBar';
|
||||
|
||||
storiesOf('Sticker Creator/elements', module).add('ProgressBar', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/elements',
|
||||
};
|
||||
|
||||
export const _ProgressBar = (): JSX.Element => {
|
||||
const count = number('count', 5);
|
||||
const total = number('total', 10);
|
||||
|
||||
|
|
@ -17,4 +20,8 @@ storiesOf('Sticker Creator/elements', module).add('ProgressBar', () => {
|
|||
<ProgressBar count={count} total={total} />
|
||||
</StoryRow>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
_ProgressBar.story = {
|
||||
name: 'ProgressBar',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,13 +2,16 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
|
||||
import { StoryRow } from './StoryRow';
|
||||
import { StickerPreview } from './StickerPreview';
|
||||
|
||||
storiesOf('Sticker Creator/elements', module).add('StickerPreview', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/elements',
|
||||
};
|
||||
|
||||
export const _StickerPreview = (): JSX.Element => {
|
||||
const image = text('image url', '/fixtures/512x515-thumbs-up-lincoln.webp');
|
||||
|
||||
return (
|
||||
|
|
@ -16,4 +19,8 @@ storiesOf('Sticker Creator/elements', module).add('StickerPreview', () => {
|
|||
<StickerPreview image={image} />
|
||||
</StoryRow>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
_StickerPreview.story = {
|
||||
name: 'StickerPreview',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,14 +2,17 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { StoryRow } from './StoryRow';
|
||||
import { Toast } from './Toast';
|
||||
|
||||
storiesOf('Sticker Creator/elements', module).add('Toast', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/elements',
|
||||
};
|
||||
|
||||
export const _Toast = (): JSX.Element => {
|
||||
const child = text('text', 'foo bar');
|
||||
|
||||
return (
|
||||
|
|
@ -17,4 +20,4 @@ storiesOf('Sticker Creator/elements', module).add('Toast', () => {
|
|||
<Toast onClick={action('click')}>{child}</Toast>
|
||||
</StoryRow>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,13 +4,16 @@
|
|||
/* eslint-disable no-script-url, jsx-a11y/anchor-is-valid */
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
|
||||
import { StoryRow } from './StoryRow';
|
||||
import { H1, H2, Text } from './Typography';
|
||||
|
||||
storiesOf('Sticker Creator/elements', module).add('Typography', () => {
|
||||
export default {
|
||||
title: 'Sticker Creator/elements',
|
||||
};
|
||||
|
||||
export const Typography = (): JSX.Element => {
|
||||
const child = text('text', 'foo bar');
|
||||
|
||||
return (
|
||||
|
|
@ -36,4 +39,4 @@ storiesOf('Sticker Creator/elements', module).add('Typography', () => {
|
|||
</StoryRow>
|
||||
</>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
|
|
@ -15,25 +14,35 @@ import {
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/AddGroupMemberErrorDialog', module);
|
||||
export default {
|
||||
title: 'Components/AddGroupMemberErrorDialog',
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
i18n,
|
||||
onClose: action('onClose'),
|
||||
};
|
||||
|
||||
story.add('Maximum group size', () => (
|
||||
export const _MaximumGroupSize = (): JSX.Element => (
|
||||
<AddGroupMemberErrorDialog
|
||||
{...defaultProps}
|
||||
mode={AddGroupMemberErrorDialogMode.MaximumGroupSize}
|
||||
maximumNumberOfContacts={123}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Maximum recommended group size', () => (
|
||||
_MaximumGroupSize.story = {
|
||||
name: 'Maximum group size',
|
||||
};
|
||||
|
||||
export const MaximumRecommendedGroupSize = (): JSX.Element => (
|
||||
<AddGroupMemberErrorDialog
|
||||
{...defaultProps}
|
||||
mode={AddGroupMemberErrorDialogMode.RecommendedMaximumGroupSize}
|
||||
recommendedMaximumNumberOfContacts={123}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
MaximumRecommendedGroupSize.story = {
|
||||
name: 'Maximum recommended group size',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
|
|
@ -12,7 +11,9 @@ import { Alert } from './Alert';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/Alert', module);
|
||||
export default {
|
||||
title: 'Components/Alert',
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
i18n,
|
||||
|
|
@ -22,15 +23,19 @@ const defaultProps = {
|
|||
const LOREM_IPSUM =
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.';
|
||||
|
||||
story.add('Title and body are strings', () => (
|
||||
export const TitleAndBodyAreStrings = (): JSX.Element => (
|
||||
<Alert
|
||||
{...defaultProps}
|
||||
title="Hello world"
|
||||
body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus."
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Body is a ReactNode', () => (
|
||||
TitleAndBodyAreStrings.story = {
|
||||
name: 'Title and body are strings',
|
||||
};
|
||||
|
||||
export const BodyIsAReactNode = (): JSX.Element => (
|
||||
<Alert
|
||||
{...defaultProps}
|
||||
title="Hello world"
|
||||
|
|
@ -41,9 +46,13 @@ story.add('Body is a ReactNode', () => (
|
|||
</>
|
||||
}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Long body (without title)', () => (
|
||||
BodyIsAReactNode.story = {
|
||||
name: 'Body is a ReactNode',
|
||||
};
|
||||
|
||||
export const LongBodyWithoutTitle = (): JSX.Element => (
|
||||
<Alert
|
||||
{...defaultProps}
|
||||
body={
|
||||
|
|
@ -55,9 +64,13 @@ story.add('Long body (without title)', () => (
|
|||
</>
|
||||
}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Long body (with title)', () => (
|
||||
LongBodyWithoutTitle.story = {
|
||||
name: 'Long body (without title)',
|
||||
};
|
||||
|
||||
export const LongBodyWithTitle = (): JSX.Element => (
|
||||
<Alert
|
||||
{...defaultProps}
|
||||
title="Hello world"
|
||||
|
|
@ -70,4 +83,8 @@ story.add('Long body (with title)', () => (
|
|||
</>
|
||||
}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
LongBodyWithTitle.story = {
|
||||
name: 'Long body (with title)',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,13 +2,14 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import type { PropsType } from './AnimatedEmojiGalore';
|
||||
import { AnimatedEmojiGalore } from './AnimatedEmojiGalore';
|
||||
|
||||
const story = storiesOf('Components/AnimatedEmojiGalore', module);
|
||||
export default {
|
||||
title: 'Components/AnimatedEmojiGalore',
|
||||
};
|
||||
|
||||
function getDefaultProps(): PropsType {
|
||||
return {
|
||||
|
|
@ -17,4 +18,6 @@ function getDefaultProps(): PropsType {
|
|||
};
|
||||
}
|
||||
|
||||
story.add('Hearts', () => <AnimatedEmojiGalore {...getDefaultProps()} />);
|
||||
export const Hearts = (): JSX.Element => (
|
||||
<AnimatedEmojiGalore {...getDefaultProps()} />
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,27 +1,23 @@
|
|||
// Copyright 2020-2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import type { Meta, Story } from '@storybook/react';
|
||||
import * as React from 'react';
|
||||
import { isBoolean } from 'lodash';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { boolean, select, text } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import type { Props } from './Avatar';
|
||||
import { Avatar, AvatarBlur, AvatarStoryRing } from './Avatar';
|
||||
import { Avatar, AvatarBlur, AvatarSize, AvatarStoryRing } from './Avatar';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
import type { AvatarColorType } from '../types/Colors';
|
||||
import { AvatarColors } from '../types/Colors';
|
||||
import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';
|
||||
import { getFakeBadge } from '../test-both/helpers/getFakeBadge';
|
||||
import { ThemeType } from '../types/Util';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/Avatar', module);
|
||||
|
||||
const colorMap: Record<string, AvatarColorType> = AvatarColors.reduce(
|
||||
(m, color) => ({
|
||||
...m,
|
||||
|
|
@ -35,224 +31,240 @@ const conversationTypeMap: Record<string, Props['conversationType']> = {
|
|||
group: 'group',
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'Components/Avatar',
|
||||
component: Avatar,
|
||||
argTypes: {
|
||||
badge: {
|
||||
control: false,
|
||||
},
|
||||
blur: {
|
||||
control: { type: 'radio' },
|
||||
defaultValue: AvatarBlur.NoBlur,
|
||||
options: {
|
||||
NoBlur: AvatarBlur.NoBlur,
|
||||
BlurPicture: AvatarBlur.BlurPicture,
|
||||
BlurPictureWithClickToView: AvatarBlur.BlurPictureWithClickToView,
|
||||
},
|
||||
},
|
||||
color: {
|
||||
defaultValue: AvatarColors[0],
|
||||
options: colorMap,
|
||||
},
|
||||
conversationType: {
|
||||
control: { type: 'radio' },
|
||||
options: conversationTypeMap,
|
||||
},
|
||||
size: {
|
||||
control: false,
|
||||
},
|
||||
storyRing: {
|
||||
control: { type: 'radio' },
|
||||
options: [undefined, ...Object.values(AvatarStoryRing)],
|
||||
},
|
||||
theme: {
|
||||
control: { type: 'radio' },
|
||||
defaultValue: ThemeType.light,
|
||||
options: ThemeType,
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
acceptedMessageRequest: isBoolean(overrideProps.acceptedMessageRequest)
|
||||
? overrideProps.acceptedMessageRequest
|
||||
: true,
|
||||
avatarPath: text('avatarPath', overrideProps.avatarPath || ''),
|
||||
avatarPath: overrideProps.avatarPath || '',
|
||||
badge: overrideProps.badge,
|
||||
blur: overrideProps.blur,
|
||||
color: select('color', colorMap, overrideProps.color || AvatarColors[0]),
|
||||
conversationType: select(
|
||||
'conversationType',
|
||||
conversationTypeMap,
|
||||
overrideProps.conversationType || 'direct'
|
||||
),
|
||||
blur: overrideProps.blur || AvatarBlur.NoBlur,
|
||||
color: overrideProps.color || AvatarColors[0],
|
||||
conversationType: overrideProps.conversationType || 'direct',
|
||||
i18n,
|
||||
isMe: false,
|
||||
loading: boolean('loading', overrideProps.loading || false),
|
||||
name: text('name', overrideProps.name || ''),
|
||||
noteToSelf: boolean('noteToSelf', overrideProps.noteToSelf || false),
|
||||
loading: Boolean(overrideProps.loading),
|
||||
name: overrideProps.name || '',
|
||||
noteToSelf: Boolean(overrideProps.noteToSelf),
|
||||
onClick: action('onClick'),
|
||||
onClickBadge: action('onClickBadge'),
|
||||
phoneNumber: text('phoneNumber', overrideProps.phoneNumber || ''),
|
||||
searchResult: boolean(
|
||||
'searchResult',
|
||||
typeof overrideProps.searchResult === 'boolean'
|
||||
? overrideProps.searchResult
|
||||
: false
|
||||
),
|
||||
phoneNumber: overrideProps.phoneNumber || '',
|
||||
searchResult: Boolean(overrideProps.searchResult),
|
||||
sharedGroupNames: [],
|
||||
size: 80,
|
||||
title: overrideProps.title || '',
|
||||
theme: overrideProps.theme || ThemeType.light,
|
||||
});
|
||||
|
||||
const sizes: Array<Props['size']> = [112, 96, 80, 52, 32, 28];
|
||||
const sizes = Object.values(AvatarSize).filter(
|
||||
x => typeof x === 'number'
|
||||
) as Array<AvatarSize>;
|
||||
|
||||
story.add('Avatar', () => {
|
||||
const props = createProps({
|
||||
avatarPath: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
|
||||
});
|
||||
const Template: Story<Props> = args => (
|
||||
<>
|
||||
{sizes.map(size => (
|
||||
<Avatar key={size} {...args} size={size} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
const TemplateSingle: Story<Props> = args => (
|
||||
<Avatar {...args} size={AvatarSize.ONE_HUNDRED_TWELVE} />
|
||||
);
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = createProps({
|
||||
avatarPath: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
|
||||
});
|
||||
Default.story = {
|
||||
name: 'Avatar',
|
||||
};
|
||||
|
||||
export const WithBadge = Template.bind({});
|
||||
WithBadge.args = createProps({
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
badge: getFakeBadge(),
|
||||
});
|
||||
WithBadge.story = {
|
||||
name: 'With badge',
|
||||
};
|
||||
|
||||
export const WideImage = Template.bind({});
|
||||
WideImage.args = createProps({
|
||||
avatarPath: '/fixtures/wide.jpg',
|
||||
});
|
||||
WideImage.story = {
|
||||
name: 'Wide image',
|
||||
};
|
||||
|
||||
export const OneWordName = Template.bind({});
|
||||
OneWordName.args = createProps({
|
||||
title: 'John',
|
||||
});
|
||||
OneWordName.story = {
|
||||
name: 'One-word Name',
|
||||
};
|
||||
|
||||
export const TwoWordName = Template.bind({});
|
||||
TwoWordName.args = createProps({
|
||||
title: 'John Smith',
|
||||
});
|
||||
TwoWordName.story = {
|
||||
name: 'Two-word Name',
|
||||
};
|
||||
|
||||
export const WideInitials = Template.bind({});
|
||||
WideInitials.args = createProps({
|
||||
title: 'Walter White',
|
||||
});
|
||||
WideInitials.story = {
|
||||
name: 'Wide initials',
|
||||
};
|
||||
|
||||
export const ThreeWordName = Template.bind({});
|
||||
ThreeWordName.args = createProps({
|
||||
title: 'Walter H. White',
|
||||
});
|
||||
ThreeWordName.story = {
|
||||
name: 'Three-word name',
|
||||
};
|
||||
|
||||
export const NoteToSelf = Template.bind({});
|
||||
NoteToSelf.args = createProps({
|
||||
noteToSelf: true,
|
||||
});
|
||||
NoteToSelf.story = {
|
||||
name: 'Note to Self',
|
||||
};
|
||||
|
||||
export const ContactIcon = Template.bind({});
|
||||
ContactIcon.args = createProps();
|
||||
|
||||
export const GroupIcon = Template.bind({});
|
||||
GroupIcon.args = createProps({
|
||||
conversationType: 'group',
|
||||
});
|
||||
|
||||
story.add('With badge', () => {
|
||||
const Wrapper = () => {
|
||||
const theme = React.useContext(StorybookThemeContext);
|
||||
const props = createProps({
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
badge: getFakeBadge(),
|
||||
theme,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
{sizes.map(size => (
|
||||
<Avatar key={size} {...props} size={size} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return <Wrapper />;
|
||||
export const SearchIcon = Template.bind({});
|
||||
SearchIcon.args = createProps({
|
||||
searchResult: true,
|
||||
});
|
||||
|
||||
story.add('Wide image', () => {
|
||||
const props = createProps({
|
||||
avatarPath: '/fixtures/wide.jpg',
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
});
|
||||
|
||||
story.add('One-word Name', () => {
|
||||
const props = createProps({
|
||||
title: 'John',
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
});
|
||||
|
||||
story.add('Two-word Name', () => {
|
||||
const props = createProps({
|
||||
title: 'John Smith',
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
});
|
||||
|
||||
story.add('Wide initials', () => {
|
||||
const props = createProps({
|
||||
title: 'Walter White',
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
});
|
||||
|
||||
story.add('Three-word name', () => {
|
||||
const props = createProps({
|
||||
title: 'Walter H. White',
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
});
|
||||
|
||||
story.add('Note to Self', () => {
|
||||
const props = createProps({
|
||||
noteToSelf: true,
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
});
|
||||
|
||||
story.add('Contact Icon', () => {
|
||||
export const Colors = (): JSX.Element => {
|
||||
const props = createProps();
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
return (
|
||||
<>
|
||||
{AvatarColors.map(color => (
|
||||
<Avatar key={color} {...props} color={color} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const BrokenColor = Template.bind({});
|
||||
BrokenColor.args = createProps({
|
||||
color: 'nope' as AvatarColorType,
|
||||
});
|
||||
|
||||
story.add('Group Icon', () => {
|
||||
const props = createProps({
|
||||
conversationType: 'group',
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
export const BrokenAvatar = Template.bind({});
|
||||
BrokenAvatar.args = createProps({
|
||||
avatarPath: 'badimage.png',
|
||||
});
|
||||
|
||||
story.add('Search Icon', () => {
|
||||
const props = createProps({
|
||||
searchResult: true,
|
||||
});
|
||||
export const BrokenAvatarForGroup = Template.bind({});
|
||||
BrokenAvatarForGroup.args = createProps({
|
||||
avatarPath: 'badimage.png',
|
||||
conversationType: 'group',
|
||||
});
|
||||
BrokenAvatarForGroup.story = {
|
||||
name: 'Broken Avatar for Group',
|
||||
};
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
export const Loading = Template.bind({});
|
||||
Loading.args = createProps({
|
||||
loading: true,
|
||||
});
|
||||
|
||||
story.add('Colors', () => {
|
||||
const props = createProps();
|
||||
|
||||
return AvatarColors.map(color => (
|
||||
<Avatar key={color} {...props} color={color} />
|
||||
));
|
||||
export const BlurredBasedOnProps = TemplateSingle.bind({});
|
||||
BlurredBasedOnProps.args = createProps({
|
||||
acceptedMessageRequest: false,
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
});
|
||||
BlurredBasedOnProps.story = {
|
||||
name: 'Blurred based on props',
|
||||
};
|
||||
|
||||
story.add('Broken Color', () => {
|
||||
const props = createProps({
|
||||
color: 'nope' as AvatarColorType,
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
export const ForceBlurred = TemplateSingle.bind({});
|
||||
ForceBlurred.args = createProps({
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
blur: AvatarBlur.BlurPicture,
|
||||
});
|
||||
ForceBlurred.story = {
|
||||
name: 'Force-blurred',
|
||||
};
|
||||
|
||||
story.add('Broken Avatar', () => {
|
||||
const props = createProps({
|
||||
avatarPath: 'badimage.png',
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
export const BlurredWithClickToView = TemplateSingle.bind({});
|
||||
BlurredWithClickToView.args = createProps({
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
blur: AvatarBlur.BlurPictureWithClickToView,
|
||||
});
|
||||
BlurredWithClickToView.story = {
|
||||
name: 'Blurred with "click to view"',
|
||||
};
|
||||
|
||||
story.add('Broken Avatar for Group', () => {
|
||||
const props = createProps({
|
||||
avatarPath: 'badimage.png',
|
||||
conversationType: 'group',
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
export const StoryUnread = TemplateSingle.bind({});
|
||||
StoryUnread.args = createProps({
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
storyRing: AvatarStoryRing.Unread,
|
||||
});
|
||||
StoryUnread.story = {
|
||||
name: 'Story: unread',
|
||||
};
|
||||
|
||||
story.add('Loading', () => {
|
||||
const props = createProps({
|
||||
loading: true,
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
export const StoryRead = TemplateSingle.bind({});
|
||||
StoryRead.args = createProps({
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
storyRing: AvatarStoryRing.Read,
|
||||
});
|
||||
|
||||
story.add('Blurred based on props', () => {
|
||||
const props = createProps({
|
||||
acceptedMessageRequest: false,
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
});
|
||||
|
||||
story.add('Force-blurred', () => {
|
||||
const props = createProps({
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
blur: AvatarBlur.BlurPicture,
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
});
|
||||
|
||||
story.add('Blurred with "click to view"', () => {
|
||||
const props = createProps({
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
blur: AvatarBlur.BlurPictureWithClickToView,
|
||||
});
|
||||
|
||||
return <Avatar {...props} size={112} />;
|
||||
});
|
||||
|
||||
story.add('Story: unread', () => (
|
||||
<Avatar
|
||||
{...createProps({
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
})}
|
||||
storyRing={AvatarStoryRing.Unread}
|
||||
size={112}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Story: read', () => (
|
||||
<Avatar
|
||||
{...createProps({
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
})}
|
||||
storyRing={AvatarStoryRing.Read}
|
||||
size={112}
|
||||
/>
|
||||
));
|
||||
StoryRead.story = {
|
||||
name: 'Story: read',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
|
@ -20,14 +19,18 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
selectedColor: overrideProps.selectedColor,
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/AvatarColorPicker', module);
|
||||
export default {
|
||||
title: 'Components/AvatarColorPicker',
|
||||
};
|
||||
|
||||
story.add('Default', () => <AvatarColorPicker {...createProps()} />);
|
||||
export const Default = (): JSX.Element => (
|
||||
<AvatarColorPicker {...createProps()} />
|
||||
);
|
||||
|
||||
story.add('Selected', () => (
|
||||
export const Selected = (): JSX.Element => (
|
||||
<AvatarColorPicker
|
||||
{...createProps({
|
||||
selectedColor: AvatarColors[7],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
|
@ -79,21 +78,32 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
],
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/AvatarEditor', module);
|
||||
export default {
|
||||
title: 'Components/AvatarEditor',
|
||||
};
|
||||
|
||||
story.add('No Avatar (group)', () => (
|
||||
export const NoAvatarGroup = (): JSX.Element => (
|
||||
<AvatarEditor
|
||||
{...createProps({ isGroup: true, userAvatarData: getDefaultAvatars(true) })}
|
||||
/>
|
||||
));
|
||||
story.add('No Avatar (me)', () => (
|
||||
<AvatarEditor {...createProps({ userAvatarData: getDefaultAvatars() })} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Has Avatar', () => (
|
||||
NoAvatarGroup.story = {
|
||||
name: 'No Avatar (group)',
|
||||
};
|
||||
|
||||
export const NoAvatarMe = (): JSX.Element => (
|
||||
<AvatarEditor {...createProps({ userAvatarData: getDefaultAvatars() })} />
|
||||
);
|
||||
|
||||
NoAvatarMe.story = {
|
||||
name: 'No Avatar (me)',
|
||||
};
|
||||
|
||||
export const HasAvatar = (): JSX.Element => (
|
||||
<AvatarEditor
|
||||
{...createProps({
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
|
@ -22,9 +21,11 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
onClose: action('onClose'),
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/AvatarIconEditor', module);
|
||||
export default {
|
||||
title: 'Components/AvatarIconEditor',
|
||||
};
|
||||
|
||||
story.add('Personal Icon', () => (
|
||||
export const PersonalIcon = (): JSX.Element => (
|
||||
<AvatarIconEditor
|
||||
{...createProps({
|
||||
avatarData: createAvatarData({
|
||||
|
|
@ -33,9 +34,9 @@ story.add('Personal Icon', () => (
|
|||
}),
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Group Icon', () => (
|
||||
export const GroupIcon = (): JSX.Element => (
|
||||
<AvatarIconEditor
|
||||
{...createProps({
|
||||
avatarData: createAvatarData({
|
||||
|
|
@ -44,4 +45,4 @@ story.add('Group Icon', () => (
|
|||
}),
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
|
||||
|
|
@ -29,17 +28,19 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
onClose: action('onClose'),
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/AvatarLightbox', module);
|
||||
export default {
|
||||
title: 'Components/AvatarLightbox',
|
||||
};
|
||||
|
||||
story.add('Group', () => (
|
||||
export const Group = (): JSX.Element => (
|
||||
<AvatarLightbox
|
||||
{...createProps({
|
||||
isGroup: true,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Person', () => {
|
||||
export const Person = (): JSX.Element => {
|
||||
const conversation = getDefaultConversation();
|
||||
return (
|
||||
<AvatarLightbox
|
||||
|
|
@ -49,12 +50,12 @@ story.add('Person', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Photo', () => (
|
||||
export const Photo = (): JSX.Element => (
|
||||
<AvatarLightbox
|
||||
{...createProps({
|
||||
avatarPath: '/fixtures/kitten-1-64-64.jpg',
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
|
@ -20,14 +19,26 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
onSave: action('onSave'),
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/AvatarModalButtons', module);
|
||||
export default {
|
||||
title: 'Components/AvatarModalButtons',
|
||||
};
|
||||
|
||||
story.add('Has changes', () => (
|
||||
export const HasChanges = (): JSX.Element => (
|
||||
<AvatarModalButtons
|
||||
{...createProps({
|
||||
hasChanges: true,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('No changes', () => <AvatarModalButtons {...createProps()} />);
|
||||
HasChanges.story = {
|
||||
name: 'Has changes',
|
||||
};
|
||||
|
||||
export const NoChanges = (): JSX.Element => (
|
||||
<AvatarModalButtons {...createProps()} />
|
||||
);
|
||||
|
||||
NoChanges.story = {
|
||||
name: 'No changes',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import * as React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean, select, text } from '@storybook/addon-knobs';
|
||||
|
||||
|
|
@ -59,52 +58,58 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
|
|||
title: text('title', overrideProps.title || ''),
|
||||
});
|
||||
|
||||
const stories = storiesOf('Components/Avatar Popup', module);
|
||||
export default {
|
||||
title: 'Components/Avatar Popup',
|
||||
};
|
||||
|
||||
stories.add('Avatar Only', () => {
|
||||
export const AvatarOnly = (): JSX.Element => {
|
||||
const props = useProps();
|
||||
|
||||
return <AvatarPopup {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Has badge', () => {
|
||||
export const HasBadge = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
badge: getFakeBadge(),
|
||||
title: 'Janet Yellen',
|
||||
});
|
||||
|
||||
return <AvatarPopup {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Title', () => {
|
||||
HasBadge.story = {
|
||||
name: 'Has badge',
|
||||
};
|
||||
|
||||
export const Title = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
title: 'My Great Title',
|
||||
});
|
||||
|
||||
return <AvatarPopup {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Profile Name', () => {
|
||||
export const ProfileName = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
profileName: 'Sam Neill',
|
||||
});
|
||||
|
||||
return <AvatarPopup {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Phone Number', () => {
|
||||
export const PhoneNumber = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
profileName: 'Sam Neill',
|
||||
phoneNumber: '(555) 867-5309',
|
||||
});
|
||||
|
||||
return <AvatarPopup {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Update Available', () => {
|
||||
export const UpdateAvailable = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
hasPendingUpdate: true,
|
||||
});
|
||||
|
||||
return <AvatarPopup {...props} />;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import React from 'react';
|
|||
import { chunk } from 'lodash';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import type { PropsType } from './AvatarPreview';
|
||||
import { AvatarPreview } from './AvatarPreview';
|
||||
|
|
@ -36,27 +35,37 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
style: overrideProps.style,
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/AvatarPreview', module);
|
||||
export default {
|
||||
title: 'Components/AvatarPreview',
|
||||
};
|
||||
|
||||
story.add('No state (personal)', () => (
|
||||
export const NoStatePersonal = (): JSX.Element => (
|
||||
<AvatarPreview
|
||||
{...createProps({
|
||||
avatarColor: AvatarColors[0],
|
||||
conversationTitle: 'Just Testing',
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('No state (group)', () => (
|
||||
NoStatePersonal.story = {
|
||||
name: 'No state (personal)',
|
||||
};
|
||||
|
||||
export const NoStateGroup = (): JSX.Element => (
|
||||
<AvatarPreview
|
||||
{...createProps({
|
||||
avatarColor: AvatarColors[1],
|
||||
isGroup: true,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('No state (group) + upload me', () => (
|
||||
NoStateGroup.story = {
|
||||
name: 'No state (group)',
|
||||
};
|
||||
|
||||
export const NoStateGroupUploadMe = (): JSX.Element => (
|
||||
<AvatarPreview
|
||||
{...createProps({
|
||||
avatarColor: AvatarColors[1],
|
||||
|
|
@ -64,32 +73,52 @@ story.add('No state (group) + upload me', () => (
|
|||
isGroup: true,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('value', () => (
|
||||
NoStateGroupUploadMe.story = {
|
||||
name: 'No state (group) + upload me',
|
||||
};
|
||||
|
||||
export const Value = (): JSX.Element => (
|
||||
<AvatarPreview {...createProps({ avatarValue: TEST_IMAGE })} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('path', () => (
|
||||
Value.story = {
|
||||
name: 'value',
|
||||
};
|
||||
|
||||
export const Path = (): JSX.Element => (
|
||||
<AvatarPreview
|
||||
{...createProps({ avatarPath: '/fixtures/kitten-3-64-64.jpg' })}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('value & path', () => (
|
||||
Path.story = {
|
||||
name: 'path',
|
||||
};
|
||||
|
||||
export const ValuePath = (): JSX.Element => (
|
||||
<AvatarPreview
|
||||
{...createProps({
|
||||
avatarPath: '/fixtures/kitten-3-64-64.jpg',
|
||||
avatarValue: TEST_IMAGE,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('style', () => (
|
||||
ValuePath.story = {
|
||||
name: 'value & path',
|
||||
};
|
||||
|
||||
export const Style = (): JSX.Element => (
|
||||
<AvatarPreview
|
||||
{...createProps({
|
||||
avatarValue: TEST_IMAGE,
|
||||
style: { height: 100, width: 100 },
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
Style.story = {
|
||||
name: 'style',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
|
@ -21,11 +20,13 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
onDone: action('onDone'),
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/AvatarTextEditor', module);
|
||||
export default {
|
||||
title: 'Components/AvatarTextEditor',
|
||||
};
|
||||
|
||||
story.add('Empty', () => <AvatarTextEditor {...createProps()} />);
|
||||
export const Empty = (): JSX.Element => <AvatarTextEditor {...createProps()} />;
|
||||
|
||||
story.add('with Data', () => (
|
||||
export const WithData = (): JSX.Element => (
|
||||
<AvatarTextEditor
|
||||
{...createProps({
|
||||
avatarData: {
|
||||
|
|
@ -35,9 +36,13 @@ story.add('with Data', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('with wide characters', () => (
|
||||
WithData.story = {
|
||||
name: 'with Data',
|
||||
};
|
||||
|
||||
export const WithWideCharacters = (): JSX.Element => (
|
||||
<AvatarTextEditor
|
||||
{...createProps({
|
||||
avatarData: {
|
||||
|
|
@ -47,4 +52,8 @@ story.add('with wide characters', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
WithWideCharacters.story = {
|
||||
name: 'with wide characters',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
|
@ -19,6 +18,10 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
onChange: action('onChange'),
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/AvatarUploadButton', module);
|
||||
export default {
|
||||
title: 'Components/AvatarUploadButton',
|
||||
};
|
||||
|
||||
story.add('Default', () => <AvatarUploadButton {...createProps()} />);
|
||||
export const Default = (): JSX.Element => (
|
||||
<AvatarUploadButton {...createProps()} />
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,23 +2,32 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { BadgeDescription } from './BadgeDescription';
|
||||
|
||||
const story = storiesOf('Components/BadgeDescription', module);
|
||||
export default {
|
||||
title: 'Components/BadgeDescription',
|
||||
};
|
||||
|
||||
story.add('Normal name', () => (
|
||||
export const NormalName = (): JSX.Element => (
|
||||
<BadgeDescription
|
||||
template="{short_name} is here! Hello, {short_name}! {short_name}, I think you're great. This is not replaced: {not_replaced}"
|
||||
firstName="Alice"
|
||||
title="Should not be seen"
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Name with RTL overrides', () => (
|
||||
NormalName.story = {
|
||||
name: 'Normal name',
|
||||
};
|
||||
|
||||
export const NameWithRtlOverrides = (): JSX.Element => (
|
||||
<BadgeDescription
|
||||
template="Hello, {short_name}! {short_name}, I think you're great."
|
||||
title={'Flip-\u202eflop'}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
NameWithRtlOverrides.story = {
|
||||
name: 'Name with RTL overrides',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import type { ComponentProps } from 'react';
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
|
|
@ -15,7 +14,9 @@ import { BadgeDialog } from './BadgeDialog';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/BadgeDialog', module);
|
||||
export default {
|
||||
title: 'Components/BadgeDialog',
|
||||
};
|
||||
|
||||
const defaultProps: ComponentProps<typeof BadgeDialog> = {
|
||||
areWeASubscriber: false,
|
||||
|
|
@ -26,15 +27,23 @@ const defaultProps: ComponentProps<typeof BadgeDialog> = {
|
|||
title: 'Alice Levine',
|
||||
};
|
||||
|
||||
story.add('No badges (closed immediately)', () => (
|
||||
export const NoBadgesClosedImmediately = (): JSX.Element => (
|
||||
<BadgeDialog {...defaultProps} badges={[]} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('One badge', () => (
|
||||
NoBadgesClosedImmediately.story = {
|
||||
name: 'No badges (closed immediately)',
|
||||
};
|
||||
|
||||
export const OneBadge = (): JSX.Element => (
|
||||
<BadgeDialog {...defaultProps} badges={getFakeBadges(1)} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Badge with no image (should be impossible)', () => (
|
||||
OneBadge.story = {
|
||||
name: 'One badge',
|
||||
};
|
||||
|
||||
export const BadgeWithNoImageShouldBeImpossible = (): JSX.Element => (
|
||||
<BadgeDialog
|
||||
{...defaultProps}
|
||||
badges={[
|
||||
|
|
@ -44,9 +53,13 @@ story.add('Badge with no image (should be impossible)', () => (
|
|||
},
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Badge with pending image', () => (
|
||||
BadgeWithNoImageShouldBeImpossible.story = {
|
||||
name: 'Badge with no image (should be impossible)',
|
||||
};
|
||||
|
||||
export const BadgeWithPendingImage = (): JSX.Element => (
|
||||
<BadgeDialog
|
||||
{...defaultProps}
|
||||
badges={[
|
||||
|
|
@ -61,9 +74,13 @@ story.add('Badge with pending image', () => (
|
|||
},
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Badge with only one, low-detail image', () => (
|
||||
BadgeWithPendingImage.story = {
|
||||
name: 'Badge with pending image',
|
||||
};
|
||||
|
||||
export const BadgeWithOnlyOneLowDetailImage = (): JSX.Element => (
|
||||
<BadgeDialog
|
||||
{...defaultProps}
|
||||
badges={[
|
||||
|
|
@ -87,16 +104,32 @@ story.add('Badge with only one, low-detail image', () => (
|
|||
},
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Five badges', () => (
|
||||
BadgeWithOnlyOneLowDetailImage.story = {
|
||||
name: 'Badge with only one, low-detail image',
|
||||
};
|
||||
|
||||
export const FiveBadges = (): JSX.Element => (
|
||||
<BadgeDialog {...defaultProps} badges={getFakeBadges(5)} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Many badges', () => (
|
||||
FiveBadges.story = {
|
||||
name: 'Five badges',
|
||||
};
|
||||
|
||||
export const ManyBadges = (): JSX.Element => (
|
||||
<BadgeDialog {...defaultProps} badges={getFakeBadges(50)} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Many badges, user is a subscriber', () => (
|
||||
ManyBadges.story = {
|
||||
name: 'Many badges',
|
||||
};
|
||||
|
||||
export const ManyBadgesUserIsASubscriber = (): JSX.Element => (
|
||||
<BadgeDialog {...defaultProps} areWeASubscriber badges={getFakeBadges(50)} />
|
||||
));
|
||||
);
|
||||
|
||||
ManyBadgesUserIsASubscriber.story = {
|
||||
name: 'Many badges, user is a subscriber',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
|
@ -27,9 +26,11 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
size: 80,
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/BetterAvatar', module);
|
||||
export default {
|
||||
title: 'Components/BetterAvatar',
|
||||
};
|
||||
|
||||
story.add('Text', () => (
|
||||
export const Text = (): JSX.Element => (
|
||||
<BetterAvatar
|
||||
{...createProps({
|
||||
avatarData: createAvatarData({
|
||||
|
|
@ -38,9 +39,9 @@ story.add('Text', () => (
|
|||
}),
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Personal Icon', () => (
|
||||
export const PersonalIcon = (): JSX.Element => (
|
||||
<BetterAvatar
|
||||
{...createProps({
|
||||
avatarData: createAvatarData({
|
||||
|
|
@ -49,9 +50,9 @@ story.add('Personal Icon', () => (
|
|||
}),
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Group Icon', () => (
|
||||
export const GroupIcon = (): JSX.Element => (
|
||||
<BetterAvatar
|
||||
{...createProps({
|
||||
avatarData: createAvatarData({
|
||||
|
|
@ -60,4 +61,4 @@ story.add('Group Icon', () => (
|
|||
}),
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
|
@ -24,27 +23,29 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
style: overrideProps.style,
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/BetterAvatarBubble', module);
|
||||
export default {
|
||||
title: 'Components/BetterAvatarBubble',
|
||||
};
|
||||
|
||||
story.add('Children', () => (
|
||||
export const Children = (): JSX.Element => (
|
||||
<BetterAvatarBubble
|
||||
{...createProps({
|
||||
children: <div>HI</div>,
|
||||
color: AvatarColors[8],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Selected', () => (
|
||||
export const Selected = (): JSX.Element => (
|
||||
<BetterAvatarBubble
|
||||
{...createProps({
|
||||
color: AvatarColors[1],
|
||||
isSelected: true,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Style', () => (
|
||||
export const Style = (): JSX.Element => (
|
||||
<BetterAvatarBubble
|
||||
{...createProps({
|
||||
style: {
|
||||
|
|
@ -54,4 +55,4 @@ story.add('Style', () => (
|
|||
color: AvatarColors[2],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,14 +2,15 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { Button, ButtonSize, ButtonVariant } from './Button';
|
||||
|
||||
const story = storiesOf('Components/Button', module);
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
};
|
||||
|
||||
story.add('Kitchen sink', () => (
|
||||
export const KitchenSink = (): JSX.Element => (
|
||||
<>
|
||||
{Object.values(ButtonVariant).map(variant => (
|
||||
<React.Fragment key={variant}>
|
||||
|
|
@ -35,18 +36,30 @@ story.add('Kitchen sink', () => (
|
|||
</React.Fragment>
|
||||
))}
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('aria-label', () => (
|
||||
KitchenSink.story = {
|
||||
name: 'Kitchen sink',
|
||||
};
|
||||
|
||||
export const AriaLabel = (): JSX.Element => (
|
||||
<Button
|
||||
aria-label="hello"
|
||||
className="module-ForwardMessageModal__header--back"
|
||||
onClick={action('onClick')}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Custom styles', () => (
|
||||
AriaLabel.story = {
|
||||
name: 'aria-label',
|
||||
};
|
||||
|
||||
export const CustomStyles = (): JSX.Element => (
|
||||
<Button onClick={action('onClick')} style={{ transform: 'rotate(5deg)' }}>
|
||||
Hello world
|
||||
</Button>
|
||||
));
|
||||
);
|
||||
|
||||
CustomStyles.story = {
|
||||
name: 'Custom styles',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean, select, text } from '@storybook/addon-knobs';
|
||||
|
||||
|
|
@ -118,11 +117,13 @@ const createProps = (storyProps: Partial<PropsType> = {}): PropsType => ({
|
|||
toggleSpeakerView: action('toggle-speaker-view'),
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/CallManager', module);
|
||||
export default {
|
||||
title: 'Components/CallManager',
|
||||
};
|
||||
|
||||
story.add('No Call', () => <CallManager {...createProps()} />);
|
||||
export const NoCall = (): JSX.Element => <CallManager {...createProps()} />;
|
||||
|
||||
story.add('Ongoing Direct Call', () => (
|
||||
export const OngoingDirectCall = (): JSX.Element => (
|
||||
<CallManager
|
||||
{...createProps({
|
||||
activeCall: {
|
||||
|
|
@ -136,9 +137,9 @@ story.add('Ongoing Direct Call', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Ongoing Group Call', () => (
|
||||
export const OngoingGroupCall = (): JSX.Element => (
|
||||
<CallManager
|
||||
{...createProps({
|
||||
activeCall: {
|
||||
|
|
@ -156,9 +157,9 @@ story.add('Ongoing Group Call', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Ringing (direct call)', () => (
|
||||
export const RingingDirectCall = (): JSX.Element => (
|
||||
<CallManager
|
||||
{...createProps({
|
||||
incomingCall: {
|
||||
|
|
@ -168,9 +169,13 @@ story.add('Ringing (direct call)', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Ringing (group call)', () => (
|
||||
RingingDirectCall.story = {
|
||||
name: 'Ringing (direct call)',
|
||||
};
|
||||
|
||||
export const RingingGroupCall = (): JSX.Element => (
|
||||
<CallManager
|
||||
{...createProps({
|
||||
incomingCall: {
|
||||
|
|
@ -188,9 +193,13 @@ story.add('Ringing (group call)', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Call Request Needed', () => (
|
||||
RingingGroupCall.story = {
|
||||
name: 'Ringing (group call)',
|
||||
};
|
||||
|
||||
export const CallRequestNeeded = (): JSX.Element => (
|
||||
<CallManager
|
||||
{...createProps({
|
||||
activeCall: {
|
||||
|
|
@ -205,9 +214,9 @@ story.add('Call Request Needed', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Group call - Safety Number Changed', () => (
|
||||
export const GroupCallSafetyNumberChanged = (): JSX.Element => (
|
||||
<CallManager
|
||||
{...createProps({
|
||||
activeCall: {
|
||||
|
|
@ -231,4 +240,8 @@ story.add('Group call - Safety Number Changed', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
GroupCallSafetyNumberChanged.story = {
|
||||
name: 'Group call - Safety Number Changed',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import { times } from 'lodash';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { boolean, select, number } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
|
@ -185,13 +184,15 @@ const createProps = (
|
|||
toggleSpeakerView: action('toggle-speaker-view'),
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/CallScreen', module);
|
||||
export default {
|
||||
title: 'Components/CallScreen',
|
||||
};
|
||||
|
||||
story.add('Default', () => {
|
||||
export const Default = (): JSX.Element => {
|
||||
return <CallScreen {...createProps()} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Pre-Ring', () => {
|
||||
export const PreRing = (): JSX.Element => {
|
||||
return (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
|
|
@ -200,9 +201,13 @@ story.add('Pre-Ring', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Ringing', () => {
|
||||
PreRing.story = {
|
||||
name: 'Pre-Ring',
|
||||
};
|
||||
|
||||
export const _Ringing = (): JSX.Element => {
|
||||
return (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
|
|
@ -211,9 +216,9 @@ story.add('Ringing', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Reconnecting', () => {
|
||||
export const _Reconnecting = (): JSX.Element => {
|
||||
return (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
|
|
@ -222,9 +227,9 @@ story.add('Reconnecting', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Ended', () => {
|
||||
export const _Ended = (): JSX.Element => {
|
||||
return (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
|
|
@ -233,9 +238,9 @@ story.add('Ended', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('hasLocalAudio', () => {
|
||||
export const HasLocalAudio = (): JSX.Element => {
|
||||
return (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
|
|
@ -244,9 +249,13 @@ story.add('hasLocalAudio', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('hasLocalVideo', () => {
|
||||
HasLocalAudio.story = {
|
||||
name: 'hasLocalAudio',
|
||||
};
|
||||
|
||||
export const HasLocalVideo = (): JSX.Element => {
|
||||
return (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
|
|
@ -255,9 +264,13 @@ story.add('hasLocalVideo', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('hasRemoteVideo', () => {
|
||||
HasLocalVideo.story = {
|
||||
name: 'hasLocalVideo',
|
||||
};
|
||||
|
||||
export const HasRemoteVideo = (): JSX.Element => {
|
||||
return (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
|
|
@ -266,9 +279,13 @@ story.add('hasRemoteVideo', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Group call - 1', () => (
|
||||
HasRemoteVideo.story = {
|
||||
name: 'hasRemoteVideo',
|
||||
};
|
||||
|
||||
export const GroupCall1 = (): JSX.Element => (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
callMode: CallMode.Group,
|
||||
|
|
@ -289,7 +306,11 @@ story.add('Group call - 1', () => (
|
|||
],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
GroupCall1.story = {
|
||||
name: 'Group call - 1',
|
||||
};
|
||||
|
||||
// We generate these upfront so that the list is stable when you move the slider.
|
||||
const allRemoteParticipants = times(MAX_PARTICIPANTS).map(index => ({
|
||||
|
|
@ -305,7 +326,7 @@ const allRemoteParticipants = times(MAX_PARTICIPANTS).map(index => ({
|
|||
}),
|
||||
}));
|
||||
|
||||
story.add('Group call - Many', () => {
|
||||
export const GroupCallMany = (): JSX.Element => {
|
||||
return (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
|
|
@ -322,9 +343,13 @@ story.add('Group call - Many', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Group call - reconnecting', () => (
|
||||
GroupCallMany.story = {
|
||||
name: 'Group call - Many',
|
||||
};
|
||||
|
||||
export const GroupCallReconnecting = (): JSX.Element => (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
callMode: CallMode.Group,
|
||||
|
|
@ -346,18 +371,26 @@ story.add('Group call - reconnecting', () => (
|
|||
],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Group call - 0', () => (
|
||||
GroupCallReconnecting.story = {
|
||||
name: 'Group call - reconnecting',
|
||||
};
|
||||
|
||||
export const GroupCall0 = (): JSX.Element => (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
callMode: CallMode.Group,
|
||||
remoteParticipants: [],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Group call - someone is sharing screen', () => (
|
||||
GroupCall0.story = {
|
||||
name: 'Group call - 0',
|
||||
};
|
||||
|
||||
export const GroupCallSomeoneIsSharingScreen = (): JSX.Element => (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
callMode: CallMode.Group,
|
||||
|
|
@ -370,11 +403,14 @@ story.add('Group call - someone is sharing screen', () => (
|
|||
})),
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add(
|
||||
"Group call - someone is sharing screen and you're reconnecting",
|
||||
() => (
|
||||
GroupCallSomeoneIsSharingScreen.story = {
|
||||
name: 'Group call - someone is sharing screen',
|
||||
};
|
||||
|
||||
export const GroupCallSomeoneIsSharingScreenAndYoureReconnecting =
|
||||
(): JSX.Element => (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
callMode: CallMode.Group,
|
||||
|
|
@ -388,5 +424,8 @@ story.add(
|
|||
})),
|
||||
})}
|
||||
/>
|
||||
)
|
||||
);
|
||||
);
|
||||
|
||||
GroupCallSomeoneIsSharingScreenAndYoureReconnecting.story = {
|
||||
name: "Group call - someone is sharing screen and you're reconnecting",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,15 +2,16 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
|
||||
import { CallingAudioIndicator } from './CallingAudioIndicator';
|
||||
import { AUDIO_LEVEL_INTERVAL_MS } from '../calling/constants';
|
||||
|
||||
const story = storiesOf('Components/CallingAudioIndicator', module);
|
||||
export default {
|
||||
title: 'Components/CallingAudioIndicator',
|
||||
};
|
||||
|
||||
story.add('Extreme', () => {
|
||||
export const Extreme = (): JSX.Element => {
|
||||
const [audioLevel, setAudioLevel] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -29,9 +30,9 @@ story.add('Extreme', () => {
|
|||
audioLevel={audioLevel}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Random', () => {
|
||||
export const Random = (): JSX.Element => {
|
||||
const [audioLevel, setAudioLevel] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -50,4 +51,4 @@ story.add('Random', () => {
|
|||
audioLevel={audioLevel}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
|
@ -29,9 +28,11 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
),
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/CallingButton', module);
|
||||
export default {
|
||||
title: 'Components/CallingButton',
|
||||
};
|
||||
|
||||
story.add('Kitchen Sink', () => {
|
||||
export const KitchenSink = (): JSX.Element => {
|
||||
return (
|
||||
<>
|
||||
{Object.keys(CallingButtonType).map(buttonType => (
|
||||
|
|
@ -42,67 +43,71 @@ story.add('Kitchen Sink', () => {
|
|||
))}
|
||||
</>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Audio On', () => {
|
||||
export const AudioOn = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
buttonType: CallingButtonType.AUDIO_ON,
|
||||
});
|
||||
return <CallingButton {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Audio Off', () => {
|
||||
export const AudioOff = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
buttonType: CallingButtonType.AUDIO_OFF,
|
||||
});
|
||||
return <CallingButton {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Audio Disabled', () => {
|
||||
export const AudioDisabled = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
buttonType: CallingButtonType.AUDIO_DISABLED,
|
||||
});
|
||||
return <CallingButton {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Video On', () => {
|
||||
export const VideoOn = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
buttonType: CallingButtonType.VIDEO_ON,
|
||||
});
|
||||
return <CallingButton {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Video Off', () => {
|
||||
export const VideoOff = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
buttonType: CallingButtonType.VIDEO_OFF,
|
||||
});
|
||||
return <CallingButton {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Video Disabled', () => {
|
||||
export const VideoDisabled = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
buttonType: CallingButtonType.VIDEO_DISABLED,
|
||||
});
|
||||
return <CallingButton {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Tooltip right', () => {
|
||||
export const TooltipRight = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
tooltipDirection: TooltipPlacement.Right,
|
||||
});
|
||||
return <CallingButton {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Presenting On', () => {
|
||||
TooltipRight.story = {
|
||||
name: 'Tooltip right',
|
||||
};
|
||||
|
||||
export const PresentingOn = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
buttonType: CallingButtonType.PRESENTING_ON,
|
||||
});
|
||||
return <CallingButton {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Presenting Off', () => {
|
||||
export const PresentingOff = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
buttonType: CallingButtonType.PRESENTING_OFF,
|
||||
});
|
||||
return <CallingButton {...props} />;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import type { Props } from './CallingDeviceSelection';
|
||||
import { CallingDeviceSelection } from './CallingDeviceSelection';
|
||||
|
|
@ -38,13 +37,15 @@ const createProps = ({
|
|||
toggleSettings: action('toggle-settings'),
|
||||
});
|
||||
|
||||
const stories = storiesOf('Components/CallingDeviceSelection', module);
|
||||
export default {
|
||||
title: 'Components/CallingDeviceSelection',
|
||||
};
|
||||
|
||||
stories.add('Default', () => {
|
||||
export const Default = (): JSX.Element => {
|
||||
return <CallingDeviceSelection {...createProps()} />;
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Some Devices', () => {
|
||||
export const SomeDevices = (): JSX.Element => {
|
||||
const availableSpeakers = [
|
||||
{
|
||||
name: 'Default',
|
||||
|
|
@ -71,9 +72,9 @@ stories.add('Some Devices', () => {
|
|||
});
|
||||
|
||||
return <CallingDeviceSelection {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Default Devices', () => {
|
||||
export const DefaultDevices = (): JSX.Element => {
|
||||
const availableSpeakers = [
|
||||
{
|
||||
name: 'default (Headphones)',
|
||||
|
|
@ -102,9 +103,9 @@ stories.add('Default Devices', () => {
|
|||
});
|
||||
|
||||
return <CallingDeviceSelection {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('All Devices', () => {
|
||||
export const AllDevices = (): JSX.Element => {
|
||||
const availableSpeakers = [
|
||||
{
|
||||
name: 'Default',
|
||||
|
|
@ -178,4 +179,4 @@ stories.add('All Devices', () => {
|
|||
});
|
||||
|
||||
return <CallingDeviceSelection {...props} />;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { boolean, number } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
|
@ -31,29 +30,35 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
toggleSettings: () => action('toggle-settings'),
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/CallingHeader', module);
|
||||
export default {
|
||||
title: 'Components/CallingHeader',
|
||||
};
|
||||
|
||||
story.add('Default', () => <CallingHeader {...createProps()} />);
|
||||
export const Default = (): JSX.Element => <CallingHeader {...createProps()} />;
|
||||
|
||||
story.add('Lobby style', () => (
|
||||
export const LobbyStyle = (): JSX.Element => (
|
||||
<CallingHeader
|
||||
{...createProps()}
|
||||
title={undefined}
|
||||
togglePip={undefined}
|
||||
onCancel={action('onClose')}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('With Participants', () => (
|
||||
LobbyStyle.story = {
|
||||
name: 'Lobby style',
|
||||
};
|
||||
|
||||
export const WithParticipants = (): JSX.Element => (
|
||||
<CallingHeader
|
||||
{...createProps({
|
||||
isGroupCall: true,
|
||||
participantCount: 10,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('With Participants (shown)', () => (
|
||||
export const WithParticipantsShown = (): JSX.Element => (
|
||||
<CallingHeader
|
||||
{...createProps({
|
||||
isGroupCall: true,
|
||||
|
|
@ -61,22 +66,30 @@ story.add('With Participants (shown)', () => (
|
|||
showParticipantsList: true,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Long Title', () => (
|
||||
WithParticipantsShown.story = {
|
||||
name: 'With Participants (shown)',
|
||||
};
|
||||
|
||||
export const LongTitle = (): JSX.Element => (
|
||||
<CallingHeader
|
||||
{...createProps({
|
||||
title:
|
||||
'What do I got to, what do I got to do to wake you up? To shake you up, to break the structure up?',
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Title with message', () => (
|
||||
export const TitleWithMessage = (): JSX.Element => (
|
||||
<CallingHeader
|
||||
{...createProps({
|
||||
title: 'Hello world',
|
||||
message: 'Goodbye earth',
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
TitleWithMessage.story = {
|
||||
name: 'Title with message',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import { times } from 'lodash';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
|
@ -90,21 +89,27 @@ const fakePeekedParticipant = (conversationProps: Partial<ConversationType>) =>
|
|||
...conversationProps,
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/CallingLobby', module);
|
||||
export default {
|
||||
title: 'Components/CallingLobby',
|
||||
};
|
||||
|
||||
story.add('Default', () => {
|
||||
export const Default = (): JSX.Element => {
|
||||
const props = createProps();
|
||||
return <CallingLobby {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('No Camera, no avatar', () => {
|
||||
export const NoCameraNoAvatar = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
availableCameras: [],
|
||||
});
|
||||
return <CallingLobby {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('No Camera, local avatar', () => {
|
||||
NoCameraNoAvatar.story = {
|
||||
name: 'No Camera, no avatar',
|
||||
};
|
||||
|
||||
export const NoCameraLocalAvatar = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
availableCameras: [],
|
||||
me: getDefaultConversation({
|
||||
|
|
@ -115,36 +120,52 @@ story.add('No Camera, local avatar', () => {
|
|||
}),
|
||||
});
|
||||
return <CallingLobby {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Local Video', () => {
|
||||
NoCameraLocalAvatar.story = {
|
||||
name: 'No Camera, local avatar',
|
||||
};
|
||||
|
||||
export const LocalVideo = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
hasLocalVideo: true,
|
||||
});
|
||||
return <CallingLobby {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Initially muted', () => {
|
||||
export const InitiallyMuted = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
hasLocalAudio: false,
|
||||
});
|
||||
return <CallingLobby {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Group Call - 0 peeked participants', () => {
|
||||
InitiallyMuted.story = {
|
||||
name: 'Initially muted',
|
||||
};
|
||||
|
||||
export const GroupCall0PeekedParticipants = (): JSX.Element => {
|
||||
const props = createProps({ isGroupCall: true, peekedParticipants: [] });
|
||||
return <CallingLobby {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Group Call - 1 peeked participant', () => {
|
||||
GroupCall0PeekedParticipants.story = {
|
||||
name: 'Group Call - 0 peeked participants',
|
||||
};
|
||||
|
||||
export const GroupCall1PeekedParticipant = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
isGroupCall: true,
|
||||
peekedParticipants: [{ title: 'Sam' }].map(fakePeekedParticipant),
|
||||
});
|
||||
return <CallingLobby {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Group Call - 1 peeked participant (self)', () => {
|
||||
GroupCall1PeekedParticipant.story = {
|
||||
name: 'Group Call - 1 peeked participant',
|
||||
};
|
||||
|
||||
export const GroupCall1PeekedParticipantSelf = (): JSX.Element => {
|
||||
const uuid = UUID.generate().toString();
|
||||
const props = createProps({
|
||||
isGroupCall: true,
|
||||
|
|
@ -155,9 +176,13 @@ story.add('Group Call - 1 peeked participant (self)', () => {
|
|||
peekedParticipants: [fakePeekedParticipant({ title: 'Ash', uuid })],
|
||||
});
|
||||
return <CallingLobby {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Group Call - 4 peeked participants', () => {
|
||||
GroupCall1PeekedParticipantSelf.story = {
|
||||
name: 'Group Call - 1 peeked participant (self)',
|
||||
};
|
||||
|
||||
export const GroupCall4PeekedParticipants = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
isGroupCall: true,
|
||||
peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(title =>
|
||||
|
|
@ -165,9 +190,13 @@ story.add('Group Call - 4 peeked participants', () => {
|
|||
),
|
||||
});
|
||||
return <CallingLobby {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Group Call - 4 peeked participants (participants list)', () => {
|
||||
GroupCall4PeekedParticipants.story = {
|
||||
name: 'Group Call - 4 peeked participants',
|
||||
};
|
||||
|
||||
export const GroupCall4PeekedParticipantsParticipantsList = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
isGroupCall: true,
|
||||
peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(title =>
|
||||
|
|
@ -176,9 +205,13 @@ story.add('Group Call - 4 peeked participants (participants list)', () => {
|
|||
showParticipantsList: true,
|
||||
});
|
||||
return <CallingLobby {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Group Call - call full', () => {
|
||||
GroupCall4PeekedParticipantsParticipantsList.story = {
|
||||
name: 'Group Call - 4 peeked participants (participants list)',
|
||||
};
|
||||
|
||||
export const GroupCallCallFull = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
isGroupCall: true,
|
||||
isCallFull: true,
|
||||
|
|
@ -187,12 +220,20 @@ story.add('Group Call - call full', () => {
|
|||
),
|
||||
});
|
||||
return <CallingLobby {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Group Call - 0 peeked participants, big group', () => {
|
||||
GroupCallCallFull.story = {
|
||||
name: 'Group Call - call full',
|
||||
};
|
||||
|
||||
export const GroupCall0PeekedParticipantsBigGroup = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
isGroupCall: true,
|
||||
groupMembers: times(100, () => getDefaultConversation()),
|
||||
});
|
||||
return <CallingLobby {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
GroupCall0PeekedParticipantsBigGroup.story = {
|
||||
name: 'Group Call - 0 peeked participants, big group',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import { sample } from 'lodash';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import type { PropsType } from './CallingParticipantsList';
|
||||
|
|
@ -44,14 +43,20 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
participants: overrideProps.participants || [],
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/CallingParticipantsList', module);
|
||||
export default {
|
||||
title: 'Components/CallingParticipantsList',
|
||||
};
|
||||
|
||||
story.add('No one', () => {
|
||||
export const NoOne = (): JSX.Element => {
|
||||
const props = createProps();
|
||||
return <CallingParticipantsList {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Solo Call', () => {
|
||||
NoOne.story = {
|
||||
name: 'No one',
|
||||
};
|
||||
|
||||
export const SoloCall = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
participants: [
|
||||
createParticipant({
|
||||
|
|
@ -60,9 +65,9 @@ story.add('Solo Call', () => {
|
|||
],
|
||||
});
|
||||
return <CallingParticipantsList {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Many Participants', () => {
|
||||
export const ManyParticipants = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
participants: [
|
||||
createParticipant({
|
||||
|
|
@ -90,13 +95,13 @@ story.add('Many Participants', () => {
|
|||
],
|
||||
});
|
||||
return <CallingParticipantsList {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Overflow', () => {
|
||||
export const Overflow = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
participants: Array(50)
|
||||
.fill(null)
|
||||
.map(() => createParticipant({ title: 'Kirby' })),
|
||||
});
|
||||
return <CallingParticipantsList {...props} />;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import { times } from 'lodash';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { boolean, select } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
|
@ -77,14 +76,16 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
togglePip: action('toggle-pip'),
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/CallingPip', module);
|
||||
export default {
|
||||
title: 'Components/CallingPip',
|
||||
};
|
||||
|
||||
story.add('Default', () => {
|
||||
export const Default = (): JSX.Element => {
|
||||
const props = createProps({});
|
||||
return <CallingPip {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Contact (with avatar and no video)', () => {
|
||||
export const ContactWithAvatarAndNoVideo = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
activeCall: {
|
||||
...defaultCall,
|
||||
|
|
@ -98,9 +99,13 @@ story.add('Contact (with avatar and no video)', () => {
|
|||
},
|
||||
});
|
||||
return <CallingPip {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Contact (no color)', () => {
|
||||
ContactWithAvatarAndNoVideo.story = {
|
||||
name: 'Contact (with avatar and no video)',
|
||||
};
|
||||
|
||||
export const ContactNoColor = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
activeCall: {
|
||||
...defaultCall,
|
||||
|
|
@ -111,9 +116,13 @@ story.add('Contact (no color)', () => {
|
|||
},
|
||||
});
|
||||
return <CallingPip {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Group Call', () => {
|
||||
ContactNoColor.story = {
|
||||
name: 'Contact (no color)',
|
||||
};
|
||||
|
||||
export const GroupCall = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
activeCall: {
|
||||
...getCommonActiveCallData(),
|
||||
|
|
@ -130,4 +139,4 @@ story.add('Group Call', () => {
|
|||
},
|
||||
});
|
||||
return <CallingPip {...props} />;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import { times, range } from 'lodash';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { times } from 'lodash';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
|
||||
|
|
@ -21,56 +20,234 @@ const getDefaultGroupConversation = () =>
|
|||
});
|
||||
const otherMembers = times(6, () => getDefaultConversation());
|
||||
|
||||
const story = storiesOf('Components/CallingPreCallInfo', module);
|
||||
export default {
|
||||
title: 'Components/CallingPreCallInfo',
|
||||
};
|
||||
|
||||
story.add('Direct conversation', () => (
|
||||
export const DirectConversation = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultConversation()}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
ringMode={RingMode.WillRing}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
times(5, numberOfOtherPeople => {
|
||||
[true, false].forEach(willRing => {
|
||||
story.add(
|
||||
`Group conversation, group has ${numberOfOtherPeople} other member${
|
||||
numberOfOtherPeople === 1 ? '' : 's'
|
||||
}, will ${willRing ? 'ring' : 'notify'}`,
|
||||
() => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers.slice(0, numberOfOtherPeople)}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={[]}
|
||||
ringMode={willRing ? RingMode.WillRing : RingMode.WillNotRing}
|
||||
/>
|
||||
)
|
||||
);
|
||||
});
|
||||
});
|
||||
DirectConversation.story = {
|
||||
name: 'Direct conversation',
|
||||
};
|
||||
|
||||
range(1, 5).forEach(numberOfOtherPeople => {
|
||||
story.add(
|
||||
`Group conversation, ${numberOfOtherPeople} peeked participant${
|
||||
numberOfOtherPeople === 1 ? '' : 's'
|
||||
}`,
|
||||
() => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={otherMembers.slice(0, numberOfOtherPeople)}
|
||||
ringMode={RingMode.WillRing}
|
||||
/>
|
||||
)
|
||||
);
|
||||
});
|
||||
export const Ring0 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers.slice(0, 0)}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={[]}
|
||||
ringMode={RingMode.WillRing}
|
||||
/>
|
||||
);
|
||||
|
||||
story.add('Group conversation, you on an other device', () => {
|
||||
Ring0.story = {
|
||||
name: 'Group call: Will ring 0 people',
|
||||
};
|
||||
|
||||
export const Ring1 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers.slice(0, 1)}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={[]}
|
||||
ringMode={RingMode.WillRing}
|
||||
/>
|
||||
);
|
||||
|
||||
Ring1.story = {
|
||||
name: 'Group call: Will ring 1 person',
|
||||
};
|
||||
|
||||
export const Ring2 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers.slice(0, 2)}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={[]}
|
||||
ringMode={RingMode.WillRing}
|
||||
/>
|
||||
);
|
||||
|
||||
Ring2.story = {
|
||||
name: 'Group call: Will ring 2 people',
|
||||
};
|
||||
|
||||
export const Ring3 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers.slice(0, 3)}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={[]}
|
||||
ringMode={RingMode.WillRing}
|
||||
/>
|
||||
);
|
||||
|
||||
Ring3.story = {
|
||||
name: 'Group call: Will ring 3 people',
|
||||
};
|
||||
|
||||
export const Ring4 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers.slice(0, 4)}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={[]}
|
||||
ringMode={RingMode.WillRing}
|
||||
/>
|
||||
);
|
||||
|
||||
Ring3.story = {
|
||||
name: 'Group call: Will ring 4 people',
|
||||
};
|
||||
|
||||
export const Notify0 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers.slice(0, 0)}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={[]}
|
||||
ringMode={RingMode.WillNotRing}
|
||||
/>
|
||||
);
|
||||
|
||||
Notify0.story = {
|
||||
name: 'Group call: Will notify 0 people',
|
||||
};
|
||||
|
||||
export const Notify1 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers.slice(0, 1)}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={[]}
|
||||
ringMode={RingMode.WillNotRing}
|
||||
/>
|
||||
);
|
||||
|
||||
Notify1.story = {
|
||||
name: 'Group call: Will notify 1 person',
|
||||
};
|
||||
|
||||
export const Notify2 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers.slice(0, 2)}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={[]}
|
||||
ringMode={RingMode.WillNotRing}
|
||||
/>
|
||||
);
|
||||
|
||||
Notify2.story = {
|
||||
name: 'Group call: Will notify 2 people',
|
||||
};
|
||||
|
||||
export const Notify3 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers.slice(0, 3)}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={[]}
|
||||
ringMode={RingMode.WillNotRing}
|
||||
/>
|
||||
);
|
||||
|
||||
Notify3.story = {
|
||||
name: 'Group call: Will notify 3 people',
|
||||
};
|
||||
|
||||
export const Notify4 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers.slice(0, 4)}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={[]}
|
||||
ringMode={RingMode.WillNotRing}
|
||||
/>
|
||||
);
|
||||
|
||||
Notify4.story = {
|
||||
name: 'Group call: Will notify 4 people',
|
||||
};
|
||||
|
||||
export const Peek1 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={otherMembers.slice(0, 1)}
|
||||
ringMode={RingMode.WillRing}
|
||||
/>
|
||||
);
|
||||
|
||||
Peek1.story = {
|
||||
name: 'Group call: 1 participant peeked',
|
||||
};
|
||||
|
||||
export const Peek2 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={otherMembers.slice(0, 2)}
|
||||
ringMode={RingMode.WillRing}
|
||||
/>
|
||||
);
|
||||
|
||||
Peek2.story = {
|
||||
name: 'Group call: 2 participants peeked',
|
||||
};
|
||||
|
||||
export const Peek3 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={otherMembers.slice(0, 3)}
|
||||
ringMode={RingMode.WillRing}
|
||||
/>
|
||||
);
|
||||
|
||||
Peek3.story = {
|
||||
name: 'Group call: 3 participants peeked',
|
||||
};
|
||||
|
||||
export const Peek4 = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers}
|
||||
i18n={i18n}
|
||||
me={getDefaultConversation()}
|
||||
peekedParticipants={otherMembers.slice(0, 4)}
|
||||
ringMode={RingMode.WillRing}
|
||||
/>
|
||||
);
|
||||
|
||||
Peek4.story = {
|
||||
name: 'Group call: 4 participants peeked',
|
||||
};
|
||||
|
||||
export const GroupConversationYouOnAnOtherDevice = (): JSX.Element => {
|
||||
const me = getDefaultConversation();
|
||||
return (
|
||||
<CallingPreCallInfo
|
||||
|
|
@ -82,9 +259,13 @@ story.add('Group conversation, you on an other device', () => {
|
|||
ringMode={RingMode.WillRing}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Group conversation, call is full', () => (
|
||||
GroupConversationYouOnAnOtherDevice.story = {
|
||||
name: 'Group conversation, you on an other device',
|
||||
};
|
||||
|
||||
export const GroupConversationCallIsFull = (): JSX.Element => (
|
||||
<CallingPreCallInfo
|
||||
conversation={getDefaultGroupConversation()}
|
||||
groupMembers={otherMembers}
|
||||
|
|
@ -94,4 +275,8 @@ story.add('Group conversation, call is full', () => (
|
|||
peekedParticipants={otherMembers}
|
||||
ringMode={RingMode.WillRing}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
GroupConversationCallIsFull.story = {
|
||||
name: 'Group conversation, call is full',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import type { PropsType } from './CallingScreenSharingController';
|
||||
|
|
@ -20,13 +19,15 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
presentedSourceName: overrideProps.presentedSourceName || 'Application',
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/CallingScreenSharingController', module);
|
||||
export default {
|
||||
title: 'Components/CallingScreenSharingController',
|
||||
};
|
||||
|
||||
story.add('Controller', () => {
|
||||
export const Controller = (): JSX.Element => {
|
||||
return <CallingScreenSharingController {...createProps()} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Really long app name', () => {
|
||||
export const ReallyLongAppName = (): JSX.Element => {
|
||||
return (
|
||||
<CallingScreenSharingController
|
||||
{...createProps({
|
||||
|
|
@ -35,4 +36,8 @@ story.add('Really long app name', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
ReallyLongAppName.story = {
|
||||
name: 'Really long app name',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import type { PropsType } from './CallingSelectPresentingSourcesModal';
|
||||
|
|
@ -54,11 +53,10 @@ const createProps = (): PropsType => ({
|
|||
setPresenting: action('set-presenting'),
|
||||
});
|
||||
|
||||
const story = storiesOf(
|
||||
'Components/CallingSelectPresentingSourcesModal',
|
||||
module
|
||||
);
|
||||
export default {
|
||||
title: 'Components/CallingSelectPresentingSourcesModal',
|
||||
};
|
||||
|
||||
story.add('Modal', () => {
|
||||
export const Modal = (): JSX.Element => {
|
||||
return <CallingSelectPresentingSourcesModal {...createProps()} />;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,18 +4,19 @@
|
|||
import React, { useState } from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { CaptchaDialog } from './CaptchaDialog';
|
||||
import { Button } from './Button';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
||||
const story = storiesOf('Components/CaptchaDialog', module);
|
||||
export default {
|
||||
title: 'Components/CaptchaDialog',
|
||||
};
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
story.add('CaptchaDialog', () => {
|
||||
export const _CaptchaDialog = (): JSX.Element => {
|
||||
const [isSkipped, setIsSkipped] = useState(false);
|
||||
|
||||
if (isSkipped) {
|
||||
|
|
@ -30,4 +31,8 @@ story.add('CaptchaDialog', () => {
|
|||
onSkip={() => setIsSkipped(true)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
_CaptchaDialog.story = {
|
||||
name: 'CaptchaDialog',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
|
||||
|
|
@ -13,7 +12,9 @@ import { ChatColorPicker } from './ChatColorPicker';
|
|||
import { ConversationColors } from '../types/Colors';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
|
||||
const story = storiesOf('Components/ChatColorPicker', module);
|
||||
export default {
|
||||
title: 'Components/ChatColorPicker',
|
||||
};
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
|
|
@ -40,7 +41,9 @@ const createProps = (): PropsType => ({
|
|||
),
|
||||
});
|
||||
|
||||
story.add('Default', () => <ChatColorPicker {...createProps()} />);
|
||||
export const Default = (): JSX.Element => (
|
||||
<ChatColorPicker {...createProps()} />
|
||||
);
|
||||
|
||||
const CUSTOM_COLORS = {
|
||||
abc: {
|
||||
|
|
@ -59,7 +62,7 @@ const CUSTOM_COLORS = {
|
|||
},
|
||||
};
|
||||
|
||||
story.add('Custom Colors', () => (
|
||||
export const CustomColors = (): JSX.Element => (
|
||||
<ChatColorPicker
|
||||
{...createProps()}
|
||||
customColors={CUSTOM_COLORS}
|
||||
|
|
@ -69,4 +72,4 @@ story.add('Custom Colors', () => (
|
|||
value: SAMPLE_CUSTOM_COLOR,
|
||||
}}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import type { PropsType } from './Checkbox';
|
||||
import { Checkbox } from './Checkbox';
|
||||
|
|
@ -15,14 +14,19 @@ const createProps = (): PropsType => ({
|
|||
onChange: action('onChange'),
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/Checkbox', module);
|
||||
export default {
|
||||
title: 'Components/Checkbox',
|
||||
};
|
||||
|
||||
story.add('Normal', () => <Checkbox {...createProps()} />);
|
||||
export const Normal = (): JSX.Element => <Checkbox {...createProps()} />;
|
||||
export const Checked = (): JSX.Element => (
|
||||
<Checkbox {...createProps()} checked />
|
||||
);
|
||||
|
||||
story.add('Checked', () => <Checkbox {...createProps()} checked />);
|
||||
|
||||
story.add('Description', () => (
|
||||
export const Description = (): JSX.Element => (
|
||||
<Checkbox {...createProps()} description="This is a checkbox" />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Disabled', () => <Checkbox {...createProps()} disabled />);
|
||||
export const Disabled = (): JSX.Element => (
|
||||
<Checkbox {...createProps()} disabled />
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
|
@ -12,8 +11,14 @@ import { ClearingData } from './ClearingData';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/ClearingData', module);
|
||||
export default {
|
||||
title: 'Components/ClearingData',
|
||||
};
|
||||
|
||||
story.add('Clearing data', () => (
|
||||
export const _ClearingData = (): JSX.Element => (
|
||||
<ClearingData deleteAllData={action('deleteAllData')} i18n={i18n} />
|
||||
));
|
||||
);
|
||||
|
||||
_ClearingData.story = {
|
||||
name: 'Clearing data',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// Copyright 2020-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import type { DecoratorFunction } from '@storybook/addons';
|
||||
import * as React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
|
|
@ -21,10 +21,13 @@ import { ConversationColors } from '../types/Colors';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/CompositionArea', module);
|
||||
|
||||
// necessary for the add attachment button to render properly
|
||||
story.addDecorator(storyFn => <div className="file-input">{storyFn()}</div>);
|
||||
export default {
|
||||
title: 'Components/CompositionArea',
|
||||
decorators: [
|
||||
// necessary for the add attachment button to render properly
|
||||
storyFn => <div className="file-input">{storyFn()}</div>,
|
||||
] as Array<DecoratorFunction<JSX.Element>>,
|
||||
};
|
||||
|
||||
const useProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
addAttachment: action('addAttachment'),
|
||||
|
|
@ -115,55 +118,63 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
|
|||
isFetchingUUID: overrideProps.isFetchingUUID || false,
|
||||
});
|
||||
|
||||
story.add('Default', () => {
|
||||
export const Default = (): JSX.Element => {
|
||||
const props = useProps();
|
||||
|
||||
return <CompositionArea {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Starting Text', () => {
|
||||
export const StartingText = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
draftText: "here's some starting text",
|
||||
});
|
||||
|
||||
return <CompositionArea {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Sticker Button', () => {
|
||||
export const StickerButton = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
knownPacks: [{} as any],
|
||||
});
|
||||
|
||||
return <CompositionArea {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Message Request', () => {
|
||||
export const MessageRequest = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
messageRequestsEnabled: true,
|
||||
});
|
||||
|
||||
return <CompositionArea {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('SMS-only fetching UUID', () => {
|
||||
export const SmsOnlyFetchingUuid = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
isSMSOnly: true,
|
||||
isFetchingUUID: true,
|
||||
});
|
||||
|
||||
return <CompositionArea {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('SMS-only', () => {
|
||||
SmsOnlyFetchingUuid.story = {
|
||||
name: 'SMS-only fetching UUID',
|
||||
};
|
||||
|
||||
export const SmsOnly = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
isSMSOnly: true,
|
||||
});
|
||||
|
||||
return <CompositionArea {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Attachments', () => {
|
||||
SmsOnly.story = {
|
||||
name: 'SMS-only',
|
||||
};
|
||||
|
||||
export const Attachments = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
draftAttachments: [
|
||||
fakeDraftAttachment({
|
||||
|
|
@ -174,18 +185,22 @@ story.add('Attachments', () => {
|
|||
});
|
||||
|
||||
return <CompositionArea {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Announcements Only group', () => (
|
||||
export const AnnouncementsOnlyGroup = (): JSX.Element => (
|
||||
<CompositionArea
|
||||
{...useProps({
|
||||
announcementsOnly: true,
|
||||
areWeAdmin: false,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Quote', () => (
|
||||
AnnouncementsOnlyGroup.story = {
|
||||
name: 'Announcements Only group',
|
||||
};
|
||||
|
||||
export const Quote = (): JSX.Element => (
|
||||
<CompositionArea
|
||||
{...useProps({
|
||||
quotedMessageProps: {
|
||||
|
|
@ -199,4 +214,4 @@ story.add('Quote', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import * as React from 'react';
|
|||
|
||||
import 'react-quill/dist/quill.core.css';
|
||||
import { boolean, select } from '@storybook/addon-knobs';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
|
||||
|
|
@ -17,7 +16,9 @@ import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/CompositionInput', module);
|
||||
export default {
|
||||
title: 'Components/CompositionInput',
|
||||
};
|
||||
|
||||
const useProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
i18n,
|
||||
|
|
@ -48,37 +49,37 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
|
|||
theme: React.useContext(StorybookThemeContext),
|
||||
});
|
||||
|
||||
story.add('Default', () => {
|
||||
export const Default = (): JSX.Element => {
|
||||
const props = useProps();
|
||||
|
||||
return <CompositionInput {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Large', () => {
|
||||
export const Large = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
large: true,
|
||||
});
|
||||
|
||||
return <CompositionInput {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Disabled', () => {
|
||||
export const Disabled = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
disabled: true,
|
||||
});
|
||||
|
||||
return <CompositionInput {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Starting Text', () => {
|
||||
export const StartingText = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
draftText: "here's some starting text",
|
||||
});
|
||||
|
||||
return <CompositionInput {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Multiline Text', () => {
|
||||
export const MultilineText = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
draftText: `here's some starting text
|
||||
and more on another line
|
||||
|
|
@ -92,9 +93,9 @@ and we're done`,
|
|||
});
|
||||
|
||||
return <CompositionInput {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Emojis', () => {
|
||||
export const Emojis = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
draftText: `😐😐😐😐😐😐😐
|
||||
😐😐😐😐😐😐😐
|
||||
|
|
@ -104,9 +105,9 @@ story.add('Emojis', () => {
|
|||
});
|
||||
|
||||
return <CompositionInput {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Mentions', () => {
|
||||
export const Mentions = (): JSX.Element => {
|
||||
const props = useProps({
|
||||
sortedGroupMembers: [
|
||||
getDefaultConversation({
|
||||
|
|
@ -128,4 +129,4 @@ story.add('Mentions', () => {
|
|||
});
|
||||
|
||||
return <CompositionInput {...props} />;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
|
@ -19,6 +18,10 @@ const createProps = (): PropsType => ({
|
|||
onDiscard: action('onDiscard'),
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/ConfirmDiscardDialog', module);
|
||||
export default {
|
||||
title: 'Components/ConfirmDiscardDialog',
|
||||
};
|
||||
|
||||
story.add('Default', () => <ConfirmDiscardDialog {...createProps()} />);
|
||||
export const Default = (): JSX.Element => (
|
||||
<ConfirmDiscardDialog {...createProps()} />
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
|
||||
|
|
@ -12,46 +11,58 @@ import enMessages from '../../_locales/en/messages.json';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
storiesOf('Components/ConfirmationDialog', module)
|
||||
.add('ConfirmationDialog', () => {
|
||||
return (
|
||||
<ConfirmationDialog
|
||||
i18n={i18n}
|
||||
onClose={action('onClose')}
|
||||
title={text('Title', 'Foo bar banana baz?')}
|
||||
actions={[
|
||||
{
|
||||
text: 'Negate',
|
||||
style: 'negative',
|
||||
action: action('negative'),
|
||||
},
|
||||
{
|
||||
text: 'Affirm',
|
||||
style: 'affirmative',
|
||||
action: action('affirmative'),
|
||||
},
|
||||
]}
|
||||
>
|
||||
{text('Child text', 'asdf blip')}
|
||||
</ConfirmationDialog>
|
||||
);
|
||||
})
|
||||
.add('Custom cancel text', () => {
|
||||
return (
|
||||
<ConfirmationDialog
|
||||
cancelText="Nah"
|
||||
i18n={i18n}
|
||||
onClose={action('onClose')}
|
||||
title={text('Title', 'Foo bar banana baz?')}
|
||||
actions={[
|
||||
{
|
||||
text: 'Maybe',
|
||||
style: 'affirmative',
|
||||
action: action('affirmative'),
|
||||
},
|
||||
]}
|
||||
>
|
||||
{text('Child text', 'asdf blip')}
|
||||
</ConfirmationDialog>
|
||||
);
|
||||
});
|
||||
export default {
|
||||
title: 'Components/ConfirmationDialog',
|
||||
};
|
||||
|
||||
export const _ConfirmationDialog = (): JSX.Element => {
|
||||
return (
|
||||
<ConfirmationDialog
|
||||
i18n={i18n}
|
||||
onClose={action('onClose')}
|
||||
title={text('Title', 'Foo bar banana baz?')}
|
||||
actions={[
|
||||
{
|
||||
text: 'Negate',
|
||||
style: 'negative',
|
||||
action: action('negative'),
|
||||
},
|
||||
{
|
||||
text: 'Affirm',
|
||||
style: 'affirmative',
|
||||
action: action('affirmative'),
|
||||
},
|
||||
]}
|
||||
>
|
||||
{text('Child text', 'asdf blip')}
|
||||
</ConfirmationDialog>
|
||||
);
|
||||
};
|
||||
|
||||
_ConfirmationDialog.story = {
|
||||
name: 'ConfirmationDialog',
|
||||
};
|
||||
|
||||
export const CustomCancelText = (): JSX.Element => {
|
||||
return (
|
||||
<ConfirmationDialog
|
||||
cancelText="Nah"
|
||||
i18n={i18n}
|
||||
onClose={action('onClose')}
|
||||
title={text('Title', 'Foo bar banana baz?')}
|
||||
actions={[
|
||||
{
|
||||
text: 'Maybe',
|
||||
style: 'affirmative',
|
||||
action: action('affirmative'),
|
||||
},
|
||||
]}
|
||||
>
|
||||
{text('Child text', 'asdf blip')}
|
||||
</ConfirmationDialog>
|
||||
);
|
||||
};
|
||||
|
||||
CustomCancelText.story = {
|
||||
name: 'Custom cancel text',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
import React from 'react';
|
||||
import { times } from 'lodash';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
|
|
@ -17,7 +16,9 @@ import { getDefaultConversation } from '../test-both/helpers/getDefaultConversat
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/Contact Pills', module);
|
||||
export default {
|
||||
title: 'Components/Contact Pills',
|
||||
};
|
||||
|
||||
type ContactType = Omit<ContactPillPropsType, 'i18n' | 'onClickRemove'>;
|
||||
|
||||
|
|
@ -49,23 +50,35 @@ const contactPillProps = (
|
|||
onClickRemove: action('onClickRemove'),
|
||||
});
|
||||
|
||||
story.add('Empty list', () => <ContactPills />);
|
||||
export const EmptyList = (): JSX.Element => <ContactPills />;
|
||||
|
||||
story.add('One contact', () => (
|
||||
EmptyList.story = {
|
||||
name: 'Empty list',
|
||||
};
|
||||
|
||||
export const OneContact = (): JSX.Element => (
|
||||
<ContactPills>
|
||||
<ContactPill {...contactPillProps()} />
|
||||
</ContactPills>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Three contacts', () => (
|
||||
OneContact.story = {
|
||||
name: 'One contact',
|
||||
};
|
||||
|
||||
export const ThreeContacts = (): JSX.Element => (
|
||||
<ContactPills>
|
||||
<ContactPill {...contactPillProps(contacts[0])} />
|
||||
<ContactPill {...contactPillProps(contacts[1])} />
|
||||
<ContactPill {...contactPillProps(contacts[2])} />
|
||||
</ContactPills>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Four contacts, one with a long name', () => (
|
||||
ThreeContacts.story = {
|
||||
name: 'Three contacts',
|
||||
};
|
||||
|
||||
export const FourContactsOneWithALongName = (): JSX.Element => (
|
||||
<ContactPills>
|
||||
<ContactPill {...contactPillProps(contacts[0])} />
|
||||
<ContactPill
|
||||
|
|
@ -78,12 +91,20 @@ story.add('Four contacts, one with a long name', () => (
|
|||
<ContactPill {...contactPillProps(contacts[2])} />
|
||||
<ContactPill {...contactPillProps(contacts[3])} />
|
||||
</ContactPills>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Fifty contacts', () => (
|
||||
FourContactsOneWithALongName.story = {
|
||||
name: 'Four contacts, one with a long name',
|
||||
};
|
||||
|
||||
export const FiftyContacts = (): JSX.Element => (
|
||||
<ContactPills>
|
||||
{contacts.map(contact => (
|
||||
<ContactPill key={contact.id} {...contactPillProps(contact)} />
|
||||
))}
|
||||
</ContactPills>
|
||||
));
|
||||
);
|
||||
|
||||
FiftyContacts.story = {
|
||||
name: 'Fifty contacts',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import type { PropsType } from './ContextMenu';
|
||||
|
|
@ -12,7 +11,9 @@ import { setupI18n } from '../util/setupI18n';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/ContextMenu', module);
|
||||
export default {
|
||||
title: 'Components/ContextMenu',
|
||||
};
|
||||
|
||||
const getDefaultProps = (): PropsType<number> => ({
|
||||
i18n,
|
||||
|
|
@ -32,6 +33,6 @@ const getDefaultProps = (): PropsType<number> => ({
|
|||
],
|
||||
});
|
||||
|
||||
story.add('Default', () => {
|
||||
export const Default = (): JSX.Element => {
|
||||
return <ContextMenu {...getDefaultProps()} />;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
import React, { useContext } from 'react';
|
||||
import { times, omit } from 'lodash';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean, date, select, text } from '@storybook/addon-knobs';
|
||||
|
||||
|
|
@ -24,7 +23,9 @@ import { makeFakeLookupConversationWithoutUuid } from '../test-both/helpers/fake
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/ConversationList', module);
|
||||
export default {
|
||||
title: 'Components/ConversationList',
|
||||
};
|
||||
|
||||
const defaultConversations: Array<ConversationListItemPropsType> = [
|
||||
getDefaultConversation({
|
||||
|
|
@ -96,13 +97,17 @@ const Wrapper = ({
|
|||
);
|
||||
};
|
||||
|
||||
story.add('Archive button', () => (
|
||||
export const _ArchiveButton = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={[{ type: RowType.ArchiveButton, archivedConversationsCount: 123 }]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Contact: note to self', () => (
|
||||
_ArchiveButton.story = {
|
||||
name: 'Archive button',
|
||||
};
|
||||
|
||||
export const ContactNoteToSelf = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
|
|
@ -115,15 +120,23 @@ story.add('Contact: note to self', () => (
|
|||
},
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Contact: direct', () => (
|
||||
ContactNoteToSelf.story = {
|
||||
name: 'Contact: note to self',
|
||||
};
|
||||
|
||||
export const ContactDirect = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={[{ type: RowType.Contact, contact: defaultConversations[0] }]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Contact: direct with short about', () => (
|
||||
ContactDirect.story = {
|
||||
name: 'Contact: direct',
|
||||
};
|
||||
|
||||
export const ContactDirectWithShortAbout = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
|
|
@ -132,9 +145,13 @@ story.add('Contact: direct with short about', () => (
|
|||
},
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Contact: direct with long about', () => (
|
||||
ContactDirectWithShortAbout.story = {
|
||||
name: 'Contact: direct with short about',
|
||||
};
|
||||
|
||||
export const ContactDirectWithLongAbout = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
|
|
@ -147,9 +164,13 @@ story.add('Contact: direct with long about', () => (
|
|||
},
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Contact: group', () => (
|
||||
ContactDirectWithLongAbout.story = {
|
||||
name: 'Contact: direct with long about',
|
||||
};
|
||||
|
||||
export const ContactGroup = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
|
|
@ -158,9 +179,13 @@ story.add('Contact: group', () => (
|
|||
},
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Contact checkboxes', () => (
|
||||
ContactGroup.story = {
|
||||
name: 'Contact: group',
|
||||
};
|
||||
|
||||
export const ContactCheckboxes = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
|
|
@ -183,9 +208,13 @@ story.add('Contact checkboxes', () => (
|
|||
},
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Contact checkboxes: disabled', () => (
|
||||
ContactCheckboxes.story = {
|
||||
name: 'Contact checkboxes',
|
||||
};
|
||||
|
||||
export const ContactCheckboxesDisabled = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
|
|
@ -208,278 +237,351 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
},
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
{
|
||||
const createConversation = (
|
||||
overrideProps: Partial<ConversationListItemPropsType> = {}
|
||||
): ConversationListItemPropsType => ({
|
||||
...overrideProps,
|
||||
acceptedMessageRequest: boolean(
|
||||
'acceptedMessageRequest',
|
||||
overrideProps.acceptedMessageRequest !== undefined
|
||||
? overrideProps.acceptedMessageRequest
|
||||
: true
|
||||
ContactCheckboxesDisabled.story = {
|
||||
name: 'Contact checkboxes: disabled',
|
||||
};
|
||||
|
||||
const createConversation = (
|
||||
overrideProps: Partial<ConversationListItemPropsType> = {}
|
||||
): ConversationListItemPropsType => ({
|
||||
...overrideProps,
|
||||
acceptedMessageRequest: boolean(
|
||||
'acceptedMessageRequest',
|
||||
overrideProps.acceptedMessageRequest !== undefined
|
||||
? overrideProps.acceptedMessageRequest
|
||||
: true
|
||||
),
|
||||
badges: [],
|
||||
isMe: boolean('isMe', overrideProps.isMe || false),
|
||||
avatarPath: text('avatarPath', overrideProps.avatarPath || ''),
|
||||
id: overrideProps.id || '',
|
||||
isSelected: boolean('isSelected', overrideProps.isSelected || false),
|
||||
title: text('title', overrideProps.title || 'Some Person'),
|
||||
name: overrideProps.name || 'Some Person',
|
||||
type: overrideProps.type || 'direct',
|
||||
markedUnread: boolean('markedUnread', overrideProps.markedUnread || false),
|
||||
lastMessage: overrideProps.lastMessage || {
|
||||
text: text('lastMessage.text', 'Hi there!'),
|
||||
status: select(
|
||||
'status',
|
||||
MessageStatuses.reduce((m, s) => ({ ...m, [s]: s }), {}),
|
||||
'read'
|
||||
),
|
||||
badges: [],
|
||||
isMe: boolean('isMe', overrideProps.isMe || false),
|
||||
avatarPath: text('avatarPath', overrideProps.avatarPath || ''),
|
||||
id: overrideProps.id || '',
|
||||
isSelected: boolean('isSelected', overrideProps.isSelected || false),
|
||||
title: text('title', overrideProps.title || 'Some Person'),
|
||||
name: overrideProps.name || 'Some Person',
|
||||
type: overrideProps.type || 'direct',
|
||||
markedUnread: boolean('markedUnread', overrideProps.markedUnread || false),
|
||||
lastMessage: overrideProps.lastMessage || {
|
||||
text: text('lastMessage.text', 'Hi there!'),
|
||||
status: select(
|
||||
'status',
|
||||
MessageStatuses.reduce((m, s) => ({ ...m, [s]: s }), {}),
|
||||
'read'
|
||||
),
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
lastUpdated: date(
|
||||
'lastUpdated',
|
||||
new Date(overrideProps.lastUpdated || Date.now() - 5 * 60 * 1000)
|
||||
),
|
||||
sharedGroupNames: [],
|
||||
});
|
||||
|
||||
const renderConversation = (
|
||||
overrideProps: Partial<ConversationListItemPropsType> = {}
|
||||
) => (
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation(overrideProps),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
export const ConversationName = (): JSX.Element => renderConversation();
|
||||
|
||||
ConversationName.story = {
|
||||
name: 'Conversation: name',
|
||||
};
|
||||
|
||||
export const ConversationNameAndAvatar = (): JSX.Element =>
|
||||
renderConversation({
|
||||
avatarPath: '/fixtures/kitten-1-64-64.jpg',
|
||||
});
|
||||
|
||||
ConversationNameAndAvatar.story = {
|
||||
name: 'Conversation: name and avatar',
|
||||
};
|
||||
|
||||
export const ConversationWithYourself = (): JSX.Element =>
|
||||
renderConversation({
|
||||
lastMessage: {
|
||||
text: 'Just a second',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
lastUpdated: date(
|
||||
'lastUpdated',
|
||||
new Date(overrideProps.lastUpdated || Date.now() - 5 * 60 * 1000)
|
||||
),
|
||||
sharedGroupNames: [],
|
||||
name: 'Myself',
|
||||
title: 'Myself',
|
||||
isMe: true,
|
||||
});
|
||||
|
||||
const renderConversation = (
|
||||
overrideProps: Partial<ConversationListItemPropsType> = {}
|
||||
) => (
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation(overrideProps),
|
||||
ConversationWithYourself.story = {
|
||||
name: 'Conversation: with yourself',
|
||||
};
|
||||
|
||||
export const ConversationsMessageStatuses = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={MessageStatuses.map(status => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: { text: status, status, deletedForEveryone: false },
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
|
||||
ConversationsMessageStatuses.story = {
|
||||
name: 'Conversations: Message Statuses',
|
||||
};
|
||||
|
||||
export const ConversationTypingStatus = (): JSX.Element =>
|
||||
renderConversation({
|
||||
typingContactId: UUID.generate().toString(),
|
||||
});
|
||||
|
||||
ConversationTypingStatus.story = {
|
||||
name: 'Conversation: Typing Status',
|
||||
};
|
||||
|
||||
export const ConversationWithDraft = (): JSX.Element =>
|
||||
renderConversation({
|
||||
shouldShowDraft: true,
|
||||
draftPreview: "I'm in the middle of typing this...",
|
||||
});
|
||||
|
||||
ConversationWithDraft.story = {
|
||||
name: 'Conversation: With draft',
|
||||
};
|
||||
|
||||
export const ConversationDeletedForEveryone = (): JSX.Element =>
|
||||
renderConversation({
|
||||
lastMessage: { deletedForEveryone: true },
|
||||
});
|
||||
|
||||
ConversationDeletedForEveryone.story = {
|
||||
name: 'Conversation: Deleted for everyone',
|
||||
};
|
||||
|
||||
export const ConversationMessageRequest = (): JSX.Element =>
|
||||
renderConversation({
|
||||
acceptedMessageRequest: false,
|
||||
lastMessage: {
|
||||
text: 'A Message',
|
||||
status: 'delivered',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
});
|
||||
|
||||
ConversationMessageRequest.story = {
|
||||
name: 'Conversation: Message Request',
|
||||
};
|
||||
|
||||
export const ConversationsUnreadCount = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={[4, 10, 34, 250].map(unreadCount => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: {
|
||||
text: 'Hey there!',
|
||||
status: 'delivered',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
unreadCount,
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
|
||||
story.add('Conversation: name', () => renderConversation());
|
||||
ConversationsUnreadCount.story = {
|
||||
name: 'Conversations: unread count',
|
||||
};
|
||||
|
||||
story.add('Conversation: name and avatar', () =>
|
||||
renderConversation({
|
||||
avatarPath: '/fixtures/kitten-1-64-64.jpg',
|
||||
})
|
||||
);
|
||||
export const ConversationMarkedUnread = (): JSX.Element =>
|
||||
renderConversation({ markedUnread: true });
|
||||
|
||||
story.add('Conversation: with yourself', () =>
|
||||
renderConversation({
|
||||
lastMessage: {
|
||||
text: 'Just a second',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
name: 'Myself',
|
||||
title: 'Myself',
|
||||
isMe: true,
|
||||
})
|
||||
);
|
||||
ConversationMarkedUnread.story = {
|
||||
name: 'Conversation: marked unread',
|
||||
};
|
||||
|
||||
story.add('Conversations: Message Statuses', () => (
|
||||
<Wrapper
|
||||
rows={MessageStatuses.map(status => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: { text: status, status, deletedForEveryone: false },
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Conversation: Typing Status', () =>
|
||||
renderConversation({
|
||||
typingContactId: UUID.generate().toString(),
|
||||
})
|
||||
);
|
||||
|
||||
story.add('Conversation: With draft', () =>
|
||||
renderConversation({
|
||||
shouldShowDraft: true,
|
||||
draftPreview: "I'm in the middle of typing this...",
|
||||
})
|
||||
);
|
||||
|
||||
story.add('Conversation: Deleted for everyone', () =>
|
||||
renderConversation({
|
||||
lastMessage: { deletedForEveryone: true },
|
||||
})
|
||||
);
|
||||
|
||||
story.add('Conversation: Message Request', () =>
|
||||
renderConversation({
|
||||
acceptedMessageRequest: false,
|
||||
lastMessage: {
|
||||
text: 'A Message',
|
||||
status: 'delivered',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
story.add('Conversations: unread count', () => (
|
||||
<Wrapper
|
||||
rows={[4, 10, 34, 250].map(unreadCount => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: {
|
||||
text: 'Hey there!',
|
||||
status: 'delivered',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
unreadCount,
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Conversation: marked unread', () =>
|
||||
renderConversation({ markedUnread: true })
|
||||
);
|
||||
|
||||
story.add('Conversation: Selected', () =>
|
||||
renderConversation({
|
||||
lastMessage: {
|
||||
text: 'Hey there!',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
isSelected: true,
|
||||
})
|
||||
);
|
||||
|
||||
story.add('Conversation: Emoji in Message', () =>
|
||||
renderConversation({
|
||||
lastMessage: {
|
||||
text: '🔥',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
story.add('Conversation: Link in Message', () =>
|
||||
renderConversation({
|
||||
lastMessage: {
|
||||
text: 'Download at http://signal.org',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
story.add('Conversation: long name', () => {
|
||||
const name =
|
||||
'Long contact name. Esquire. The third. And stuff. And more! And more!';
|
||||
|
||||
return renderConversation({
|
||||
name,
|
||||
title: name,
|
||||
});
|
||||
export const ConversationSelected = (): JSX.Element =>
|
||||
renderConversation({
|
||||
lastMessage: {
|
||||
text: 'Hey there!',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
isSelected: true,
|
||||
});
|
||||
|
||||
story.add('Conversation: Long Message', () => {
|
||||
const messages = [
|
||||
"Long line. This is a really really really long line. Really really long. Because that's just how it is",
|
||||
`Many lines. This is a many-line message.
|
||||
ConversationSelected.story = {
|
||||
name: 'Conversation: Selected',
|
||||
};
|
||||
|
||||
export const ConversationEmojiInMessage = (): JSX.Element =>
|
||||
renderConversation({
|
||||
lastMessage: {
|
||||
text: '🔥',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
});
|
||||
|
||||
ConversationEmojiInMessage.story = {
|
||||
name: 'Conversation: Emoji in Message',
|
||||
};
|
||||
|
||||
export const ConversationLinkInMessage = (): JSX.Element =>
|
||||
renderConversation({
|
||||
lastMessage: {
|
||||
text: 'Download at http://signal.org',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
});
|
||||
|
||||
ConversationLinkInMessage.story = {
|
||||
name: 'Conversation: Link in Message',
|
||||
};
|
||||
|
||||
export const ConversationLongName = (): JSX.Element => {
|
||||
const name =
|
||||
'Long contact name. Esquire. The third. And stuff. And more! And more!';
|
||||
|
||||
return renderConversation({
|
||||
name,
|
||||
title: name,
|
||||
});
|
||||
};
|
||||
|
||||
ConversationLongName.story = {
|
||||
name: 'Conversation: long name',
|
||||
};
|
||||
|
||||
export const ConversationLongMessage = (): JSX.Element => {
|
||||
const messages = [
|
||||
"Long line. This is a really really really long line. Really really long. Because that's just how it is",
|
||||
`Many lines. This is a many-line message.
|
||||
Line 2 is really exciting but it shouldn't be seen.
|
||||
Line three is even better.
|
||||
Line 4, well.`,
|
||||
];
|
||||
];
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
rows={messages.map(messageText => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: {
|
||||
text: messageText,
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
story.add('Conversations: Various Times', () => {
|
||||
const pairs: Array<[number, string]> = [
|
||||
[Date.now() - 5 * 60 * 60 * 1000, 'Five hours ago'],
|
||||
[Date.now() - 24 * 60 * 60 * 1000, 'One day ago'],
|
||||
[Date.now() - 7 * 24 * 60 * 60 * 1000, 'One week ago'],
|
||||
[Date.now() - 365 * 24 * 60 * 60 * 1000, 'One year ago'],
|
||||
];
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
rows={pairs.map(([lastUpdated, messageText]) => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastUpdated,
|
||||
lastMessage: {
|
||||
text: messageText,
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
story.add('Conversation: Missing Date', () => {
|
||||
const row = {
|
||||
type: RowType.Conversation as const,
|
||||
conversation: omit(createConversation(), 'lastUpdated'),
|
||||
};
|
||||
|
||||
return <Wrapper rows={[row]} />;
|
||||
});
|
||||
|
||||
story.add('Conversation: Missing Message', () => {
|
||||
const row = {
|
||||
type: RowType.Conversation as const,
|
||||
conversation: omit(createConversation(), 'lastMessage'),
|
||||
};
|
||||
|
||||
return <Wrapper rows={[row]} />;
|
||||
});
|
||||
|
||||
story.add('Conversation: Missing Text', () =>
|
||||
renderConversation({
|
||||
lastMessage: {
|
||||
text: '',
|
||||
status: 'sent',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
})
|
||||
return (
|
||||
<Wrapper
|
||||
rows={messages.map(messageText => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: {
|
||||
text: messageText,
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
story.add('Conversation: Muted Conversation', () =>
|
||||
renderConversation({
|
||||
muteExpiresAt: Date.now() + 1000 * 60 * 60,
|
||||
})
|
||||
ConversationLongMessage.story = {
|
||||
name: 'Conversation: Long Message',
|
||||
};
|
||||
|
||||
export const ConversationsVariousTimes = (): JSX.Element => {
|
||||
const pairs: Array<[number, string]> = [
|
||||
[Date.now() - 5 * 60 * 60 * 1000, 'Five hours ago'],
|
||||
[Date.now() - 24 * 60 * 60 * 1000, 'One day ago'],
|
||||
[Date.now() - 7 * 24 * 60 * 60 * 1000, 'One week ago'],
|
||||
[Date.now() - 365 * 24 * 60 * 60 * 1000, 'One year ago'],
|
||||
];
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
rows={pairs.map(([lastUpdated, messageText]) => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastUpdated,
|
||||
lastMessage: {
|
||||
text: messageText,
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
story.add('Conversation: At Mention', () =>
|
||||
renderConversation({
|
||||
title: 'The Rebellion',
|
||||
type: 'group',
|
||||
lastMessage: {
|
||||
text: '@Leia Organa I know',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
ConversationsVariousTimes.story = {
|
||||
name: 'Conversations: Various Times',
|
||||
};
|
||||
|
||||
story.add('Headers', () => (
|
||||
export const ConversationMissingDate = (): JSX.Element => {
|
||||
const row = {
|
||||
type: RowType.Conversation as const,
|
||||
conversation: omit(createConversation(), 'lastUpdated'),
|
||||
};
|
||||
|
||||
return <Wrapper rows={[row]} />;
|
||||
};
|
||||
|
||||
ConversationMissingDate.story = {
|
||||
name: 'Conversation: Missing Date',
|
||||
};
|
||||
|
||||
export const ConversationMissingMessage = (): JSX.Element => {
|
||||
const row = {
|
||||
type: RowType.Conversation as const,
|
||||
conversation: omit(createConversation(), 'lastMessage'),
|
||||
};
|
||||
|
||||
return <Wrapper rows={[row]} />;
|
||||
};
|
||||
|
||||
ConversationMissingMessage.story = {
|
||||
name: 'Conversation: Missing Message',
|
||||
};
|
||||
|
||||
export const ConversationMissingText = (): JSX.Element =>
|
||||
renderConversation({
|
||||
lastMessage: {
|
||||
text: '',
|
||||
status: 'sent',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
});
|
||||
|
||||
ConversationMissingText.story = {
|
||||
name: 'Conversation: Missing Text',
|
||||
};
|
||||
|
||||
export const ConversationMutedConversation = (): JSX.Element =>
|
||||
renderConversation({
|
||||
muteExpiresAt: Date.now() + 1000 * 60 * 60,
|
||||
});
|
||||
|
||||
ConversationMutedConversation.story = {
|
||||
name: 'Conversation: Muted Conversation',
|
||||
};
|
||||
|
||||
export const ConversationAtMention = (): JSX.Element =>
|
||||
renderConversation({
|
||||
title: 'The Rebellion',
|
||||
type: 'group',
|
||||
lastMessage: {
|
||||
text: '@Leia Organa I know',
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
});
|
||||
|
||||
ConversationAtMention.story = {
|
||||
name: 'Conversation: At Mention',
|
||||
};
|
||||
|
||||
export const Headers = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
|
|
@ -500,9 +602,9 @@ story.add('Headers', () => (
|
|||
},
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Find by phone number', () => (
|
||||
export const FindByPhoneNumber = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
|
|
@ -538,9 +640,13 @@ story.add('Find by phone number', () => (
|
|||
},
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Find by username', () => (
|
||||
FindByPhoneNumber.story = {
|
||||
name: 'Find by phone number',
|
||||
};
|
||||
|
||||
export const FindByUsername = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
|
|
@ -559,9 +665,13 @@ story.add('Find by username', () => (
|
|||
},
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Search results loading skeleton', () => (
|
||||
FindByUsername.story = {
|
||||
name: 'Find by username',
|
||||
};
|
||||
|
||||
export const SearchResultsLoadingSkeleton = (): JSX.Element => (
|
||||
<Wrapper
|
||||
scrollable={false}
|
||||
rows={[
|
||||
|
|
@ -571,9 +681,13 @@ story.add('Search results loading skeleton', () => (
|
|||
})),
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Kitchen sink', () => (
|
||||
SearchResultsLoadingSkeleton.story = {
|
||||
name: 'Search results loading skeleton',
|
||||
};
|
||||
|
||||
export const KitchenSink = (): JSX.Element => (
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
|
|
@ -638,4 +752,8 @@ story.add('Kitchen sink', () => (
|
|||
},
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
KitchenSink.story = {
|
||||
name: 'Kitchen sink',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,18 +3,19 @@
|
|||
|
||||
import React, { useState } from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { CrashReportDialog } from './CrashReportDialog';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import { sleep } from '../util/sleep';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
||||
const story = storiesOf('Components/CrashReportDialog', module);
|
||||
export default {
|
||||
title: 'Components/CrashReportDialog',
|
||||
};
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
story.add('CrashReportDialog', () => {
|
||||
export const _CrashReportDialog = (): JSX.Element => {
|
||||
const [isPending, setIsPending] = useState(false);
|
||||
|
||||
return (
|
||||
|
|
@ -30,4 +31,8 @@ story.add('CrashReportDialog', () => {
|
|||
eraseCrashReports={action('eraseCrashReports')}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
_CrashReportDialog.story = {
|
||||
name: 'CrashReportDialog',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
|
@ -11,7 +10,9 @@ import type { PropsType } from './CustomColorEditor';
|
|||
import { CustomColorEditor } from './CustomColorEditor';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
|
||||
const story = storiesOf('Components/CustomColorEditor', module);
|
||||
export default {
|
||||
title: 'Components/CustomColorEditor',
|
||||
};
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
|
|
@ -21,4 +22,6 @@ const createProps = (): PropsType => ({
|
|||
onSave: action('onSave'),
|
||||
});
|
||||
|
||||
story.add('Default', () => <CustomColorEditor {...createProps()} />);
|
||||
export const Default = (): JSX.Element => (
|
||||
<CustomColorEditor {...createProps()} />
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
import type { ComponentProps } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
|
@ -12,10 +11,10 @@ import enMessages from '../../_locales/en/messages.json';
|
|||
import { CustomizingPreferredReactionsModal } from './CustomizingPreferredReactionsModal';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
const story = storiesOf(
|
||||
'Components/CustomizingPreferredReactionsModal',
|
||||
module
|
||||
);
|
||||
|
||||
export default {
|
||||
title: 'Components/CustomizingPreferredReactionsModal',
|
||||
};
|
||||
|
||||
const defaultProps: ComponentProps<typeof CustomizingPreferredReactionsModal> =
|
||||
{
|
||||
|
|
@ -38,21 +37,29 @@ const defaultProps: ComponentProps<typeof CustomizingPreferredReactionsModal> =
|
|||
skinTone: 4,
|
||||
};
|
||||
|
||||
story.add('Default', () => (
|
||||
export const Default = (): JSX.Element => (
|
||||
<CustomizingPreferredReactionsModal {...defaultProps} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Draft emoji selected', () => (
|
||||
export const DraftEmojiSelected = (): JSX.Element => (
|
||||
<CustomizingPreferredReactionsModal
|
||||
{...defaultProps}
|
||||
selectedDraftEmojiIndex={4}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Saving', () => (
|
||||
DraftEmojiSelected.story = {
|
||||
name: 'Draft emoji selected',
|
||||
};
|
||||
|
||||
export const Saving = (): JSX.Element => (
|
||||
<CustomizingPreferredReactionsModal {...defaultProps} isSaving />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Had error', () => (
|
||||
export const HadError = (): JSX.Element => (
|
||||
<CustomizingPreferredReactionsModal {...defaultProps} hadSaveError />
|
||||
));
|
||||
);
|
||||
|
||||
HadError.story = {
|
||||
name: 'Had error',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
import type { PropsType } from './DebugLogWindow';
|
||||
|
|
@ -28,6 +27,14 @@ const createProps = (): PropsType => ({
|
|||
},
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/DebugLogWindow', module);
|
||||
export default {
|
||||
title: 'Components/DebugLogWindow',
|
||||
};
|
||||
|
||||
story.add('DebugLogWindow', () => <DebugLogWindow {...createProps()} />);
|
||||
export const _DebugLogWindow = (): JSX.Element => (
|
||||
<DebugLogWindow {...createProps()} />
|
||||
);
|
||||
|
||||
_DebugLogWindow.story = {
|
||||
name: 'DebugLogWindow',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
import { DialogExpiredBuild } from './DialogExpiredBuild';
|
||||
|
|
@ -13,26 +12,29 @@ import { FakeLeftPaneContainer } from '../test-both/helpers/FakeLeftPaneContaine
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
storiesOf('Components/DialogExpiredBuild', module).add(
|
||||
'DialogExpiredBuild',
|
||||
() => {
|
||||
const containerWidthBreakpoint = select(
|
||||
'containerWidthBreakpoint',
|
||||
WidthBreakpoint,
|
||||
WidthBreakpoint.Wide
|
||||
);
|
||||
const hasExpired = boolean('hasExpired', true);
|
||||
export default {
|
||||
title: 'Components/DialogExpiredBuild',
|
||||
};
|
||||
|
||||
return (
|
||||
<FakeLeftPaneContainer
|
||||
export const _DialogExpiredBuild = (): JSX.Element => {
|
||||
const containerWidthBreakpoint = select(
|
||||
'containerWidthBreakpoint',
|
||||
WidthBreakpoint,
|
||||
WidthBreakpoint.Wide
|
||||
);
|
||||
const hasExpired = boolean('hasExpired', true);
|
||||
|
||||
return (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogExpiredBuild
|
||||
containerWidthBreakpoint={containerWidthBreakpoint}
|
||||
>
|
||||
<DialogExpiredBuild
|
||||
containerWidthBreakpoint={containerWidthBreakpoint}
|
||||
hasExpired={hasExpired}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
}
|
||||
);
|
||||
hasExpired={hasExpired}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
};
|
||||
|
||||
_DialogExpiredBuild.story = {
|
||||
name: 'DialogExpiredBuild',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,10 +2,9 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { boolean, select } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import type { PropsType } from './DialogNetworkStatus';
|
||||
import { DialogNetworkStatus } from './DialogNetworkStatus';
|
||||
import { SocketStatus } from '../types/SocketStatus';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
|
|
@ -26,16 +25,12 @@ const defaultProps = {
|
|||
challengeStatus: 'idle' as const,
|
||||
};
|
||||
|
||||
const story = storiesOf('Components/DialogNetworkStatus', module);
|
||||
export default {
|
||||
title: 'Components/DialogNetworkStatus',
|
||||
};
|
||||
|
||||
story.add('Knobs Playground', () => {
|
||||
const containerWidthBreakpoint = select(
|
||||
'containerWidthBreakpoint',
|
||||
WidthBreakpoint,
|
||||
WidthBreakpoint.Wide
|
||||
);
|
||||
const hasNetworkDialog = boolean('hasNetworkDialog', true);
|
||||
const isOnline = boolean('isOnline', true);
|
||||
export const KnobsPlayground = (args: PropsType): JSX.Element => {
|
||||
/*
|
||||
const socketStatus = select(
|
||||
'socketStatus',
|
||||
{
|
||||
|
|
@ -46,61 +41,129 @@ story.add('Knobs Playground', () => {
|
|||
},
|
||||
SocketStatus.CONNECTING
|
||||
);
|
||||
*/
|
||||
|
||||
return (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogNetworkStatus
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={containerWidthBreakpoint}
|
||||
hasNetworkDialog={hasNetworkDialog}
|
||||
isOnline={isOnline}
|
||||
socketStatus={socketStatus}
|
||||
/>
|
||||
<FakeLeftPaneContainer {...args}>
|
||||
<DialogNetworkStatus {...defaultProps} {...args} />
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
});
|
||||
};
|
||||
KnobsPlayground.args = {
|
||||
containerWidthBreakpoint: WidthBreakpoint.Wide,
|
||||
hasNetworkDialog: true,
|
||||
isOnline: true,
|
||||
socketStatus: SocketStatus.CONNECTING,
|
||||
};
|
||||
|
||||
(
|
||||
[
|
||||
['wide', WidthBreakpoint.Wide],
|
||||
['narrow', WidthBreakpoint.Narrow],
|
||||
] as const
|
||||
).forEach(([name, containerWidthBreakpoint]) => {
|
||||
const defaultPropsForBreakpoint = {
|
||||
...defaultProps,
|
||||
containerWidthBreakpoint,
|
||||
};
|
||||
export const ConnectingWide = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
|
||||
<DialogNetworkStatus
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Wide}
|
||||
socketStatus={SocketStatus.CONNECTING}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
story.add(`Connecting (${name} container)`, () => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogNetworkStatus
|
||||
{...defaultPropsForBreakpoint}
|
||||
socketStatus={SocketStatus.CONNECTING}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
));
|
||||
ConnectingWide.story = {
|
||||
name: 'Connecting Wide',
|
||||
};
|
||||
|
||||
story.add(`Closing (${name} container)`, () => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogNetworkStatus
|
||||
{...defaultPropsForBreakpoint}
|
||||
socketStatus={SocketStatus.CLOSING}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
));
|
||||
export const ClosingWide = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
|
||||
<DialogNetworkStatus
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Wide}
|
||||
socketStatus={SocketStatus.CLOSING}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
story.add(`Closed (${name} container)`, () => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogNetworkStatus
|
||||
{...defaultPropsForBreakpoint}
|
||||
socketStatus={SocketStatus.CLOSED}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
));
|
||||
ClosingWide.story = {
|
||||
name: 'Closing Wide',
|
||||
};
|
||||
|
||||
story.add(`Offline (${name} container)`, () => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogNetworkStatus {...defaultPropsForBreakpoint} isOnline={false} />
|
||||
</FakeLeftPaneContainer>
|
||||
));
|
||||
});
|
||||
export const ClosedWide = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
|
||||
<DialogNetworkStatus
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Wide}
|
||||
socketStatus={SocketStatus.CLOSED}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
ClosedWide.story = {
|
||||
name: 'Closed Wide',
|
||||
};
|
||||
|
||||
export const OfflineWide = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
|
||||
<DialogNetworkStatus
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Wide}
|
||||
isOnline={false}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
OfflineWide.story = {
|
||||
name: 'Offline Wide',
|
||||
};
|
||||
|
||||
export const ConnectingNarrow = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
|
||||
<DialogNetworkStatus
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Narrow}
|
||||
socketStatus={SocketStatus.CONNECTING}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
ConnectingNarrow.story = {
|
||||
name: 'Connecting Narrow',
|
||||
};
|
||||
|
||||
export const ClosingNarrow = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
|
||||
<DialogNetworkStatus
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Narrow}
|
||||
socketStatus={SocketStatus.CLOSING}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
ClosingNarrow.story = {
|
||||
name: 'Closing Narrow',
|
||||
};
|
||||
|
||||
export const ClosedNarrow = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
|
||||
<DialogNetworkStatus
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Narrow}
|
||||
socketStatus={SocketStatus.CLOSED}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
ClosedNarrow.story = {
|
||||
name: 'Closed Narrow',
|
||||
};
|
||||
|
||||
export const OfflineNarrow = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
|
||||
<DialogNetworkStatus
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Narrow}
|
||||
isOnline={false}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
OfflineNarrow.story = {
|
||||
name: 'Offline Narrow',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
|
@ -38,23 +37,31 @@ const permutations = [
|
|||
},
|
||||
];
|
||||
|
||||
storiesOf('Components/DialogRelink', module)
|
||||
.add('Knobs Playground', () => {
|
||||
const isRegistrationDone = boolean('isRegistrationDone', false);
|
||||
export default {
|
||||
title: 'Components/DialogRelink',
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogRelink {...defaultProps} isRegistrationDone={isRegistrationDone} />
|
||||
);
|
||||
})
|
||||
.add('Iterations', () => {
|
||||
return permutations.map(({ props, title }) => (
|
||||
<>
|
||||
<h3>{title}</h3>
|
||||
<FakeLeftPaneContainer
|
||||
containerWidthBreakpoint={props.containerWidthBreakpoint}
|
||||
>
|
||||
<DialogRelink {...defaultProps} {...props} />
|
||||
</FakeLeftPaneContainer>
|
||||
</>
|
||||
));
|
||||
});
|
||||
export const KnobsPlayground = (): JSX.Element => {
|
||||
const isRegistrationDone = boolean('isRegistrationDone', false);
|
||||
|
||||
return (
|
||||
<DialogRelink {...defaultProps} isRegistrationDone={isRegistrationDone} />
|
||||
);
|
||||
};
|
||||
|
||||
export const Iterations = (): JSX.Element => {
|
||||
return (
|
||||
<>
|
||||
{permutations.map(({ props, title }) => (
|
||||
<>
|
||||
<h3>{title}</h3>
|
||||
<FakeLeftPaneContainer
|
||||
containerWidthBreakpoint={props.containerWidthBreakpoint}
|
||||
>
|
||||
<DialogRelink {...defaultProps} {...props} />
|
||||
</FakeLeftPaneContainer>
|
||||
</>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { boolean, select } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { DialogUpdate } from './DialogUpdate';
|
||||
|
|
@ -29,9 +28,11 @@ const defaultProps = {
|
|||
version: 'v7.7.7',
|
||||
};
|
||||
|
||||
const story = storiesOf('Components/DialogUpdate', module);
|
||||
export default {
|
||||
title: 'Components/DialogUpdate',
|
||||
};
|
||||
|
||||
story.add('Knobs Playground', () => {
|
||||
export const KnobsPlayground = (): JSX.Element => {
|
||||
const containerWidthBreakpoint = select(
|
||||
'containerWidthBreakpoint',
|
||||
WidthBreakpoint,
|
||||
|
|
@ -53,108 +54,278 @@ story.add('Knobs Playground', () => {
|
|||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
(
|
||||
[
|
||||
['wide', WidthBreakpoint.Wide],
|
||||
['narrow', WidthBreakpoint.Narrow],
|
||||
] as const
|
||||
).forEach(([name, containerWidthBreakpoint]) => {
|
||||
const defaultPropsForBreakpoint = {
|
||||
...defaultProps,
|
||||
containerWidthBreakpoint,
|
||||
};
|
||||
export const UpdateWide = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Wide}
|
||||
dialogType={DialogType.Update}
|
||||
currentVersion="5.24.0"
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
story.add(`Update (${name} container)`, () => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogUpdate
|
||||
{...defaultPropsForBreakpoint}
|
||||
dialogType={DialogType.Update}
|
||||
currentVersion="5.24.0"
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
));
|
||||
UpdateWide.story = {
|
||||
name: 'Update (Wide)',
|
||||
};
|
||||
|
||||
story.add(`Download Ready (${name} container)`, () => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogUpdate
|
||||
{...defaultPropsForBreakpoint}
|
||||
dialogType={DialogType.DownloadReady}
|
||||
downloadSize={30123456}
|
||||
currentVersion="5.24.0"
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
));
|
||||
export const DownloadReadyWide = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Wide}
|
||||
currentVersion="5.24.0"
|
||||
dialogType={DialogType.DownloadReady}
|
||||
downloadSize={30123456}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
story.add(`Full Download Ready (${name} container)`, () => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogUpdate
|
||||
{...defaultPropsForBreakpoint}
|
||||
dialogType={DialogType.FullDownloadReady}
|
||||
downloadSize={300123456}
|
||||
currentVersion="5.24.0"
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
));
|
||||
DownloadReadyWide.story = {
|
||||
name: 'DownloadReady (Wide)',
|
||||
};
|
||||
|
||||
story.add(`Downloading (${name} container)`, () => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogUpdate
|
||||
{...defaultPropsForBreakpoint}
|
||||
dialogType={DialogType.Downloading}
|
||||
currentVersion="5.24.0"
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
));
|
||||
export const FullDownloadReadyWide = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Wide}
|
||||
currentVersion="5.24.0"
|
||||
dialogType={DialogType.FullDownloadReady}
|
||||
downloadSize={300123456}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
story.add(`Cannot Update (${name} container)`, () => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogUpdate
|
||||
{...defaultPropsForBreakpoint}
|
||||
dialogType={DialogType.Cannot_Update}
|
||||
currentVersion="5.24.0"
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
));
|
||||
FullDownloadReadyWide.story = {
|
||||
name: 'FullDownloadReady (Wide)',
|
||||
};
|
||||
|
||||
story.add(`Cannot Update Beta (${name} container)`, () => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogUpdate
|
||||
{...defaultPropsForBreakpoint}
|
||||
dialogType={DialogType.Cannot_Update}
|
||||
currentVersion="5.24.0-beta.1"
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
));
|
||||
export const DownloadingWide = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Wide}
|
||||
currentVersion="5.24.0"
|
||||
dialogType={DialogType.Downloading}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
story.add(`Cannot Update & Require Manual (${name} container)`, () => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogUpdate
|
||||
{...defaultPropsForBreakpoint}
|
||||
dialogType={DialogType.Cannot_Update_Require_Manual}
|
||||
currentVersion="5.24.0"
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
));
|
||||
DownloadingWide.story = {
|
||||
name: 'Downloading (Wide)',
|
||||
};
|
||||
|
||||
story.add(`Cannot Update & Require Manual Beta (${name} container)`, () => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogUpdate
|
||||
{...defaultPropsForBreakpoint}
|
||||
dialogType={DialogType.Cannot_Update_Require_Manual}
|
||||
currentVersion="5.24.0-beta.1"
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
));
|
||||
export const CannotUpdateWide = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Wide}
|
||||
currentVersion="5.24.0"
|
||||
dialogType={DialogType.Cannot_Update}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
story.add(`macOS RO Error (${name} container)`, () => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
|
||||
<DialogUpdate
|
||||
{...defaultPropsForBreakpoint}
|
||||
dialogType={DialogType.MacOS_Read_Only}
|
||||
currentVersion="5.24.0"
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
));
|
||||
});
|
||||
CannotUpdateWide.story = {
|
||||
name: 'Cannot_Update (Wide)',
|
||||
};
|
||||
|
||||
export const CannotUpdateBetaWide = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Wide}
|
||||
currentVersion="5.24.0-beta.1"
|
||||
dialogType={DialogType.Cannot_Update}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
CannotUpdateBetaWide.story = {
|
||||
name: 'Cannot_Update_Beta (Wide)',
|
||||
};
|
||||
|
||||
export const CannotUpdateRequireManualWide = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Wide}
|
||||
currentVersion="5.24.0"
|
||||
dialogType={DialogType.Cannot_Update_Require_Manual}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
CannotUpdateRequireManualWide.story = {
|
||||
name: 'Cannot_Update_Require_Manual (Wide)',
|
||||
};
|
||||
|
||||
export const CannotUpdateRequireManualBetaWide = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Wide}
|
||||
currentVersion="5.24.0-beta.1"
|
||||
dialogType={DialogType.Cannot_Update_Require_Manual}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
CannotUpdateRequireManualBetaWide.story = {
|
||||
name: 'Cannot_Update_Require_Manual_Beta (Wide)',
|
||||
};
|
||||
|
||||
export const MacOSReadOnlyWide = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Wide}
|
||||
currentVersion="5.24.0"
|
||||
dialogType={DialogType.MacOS_Read_Only}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
MacOSReadOnlyWide.story = {
|
||||
name: 'MacOS_Read_Only (Wide)',
|
||||
};
|
||||
|
||||
export const UpdateNarrow = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Narrow}
|
||||
dialogType={DialogType.Update}
|
||||
currentVersion="5.24.0"
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
UpdateNarrow.story = {
|
||||
name: 'Update (Narrow)',
|
||||
};
|
||||
|
||||
export const DownloadReadyNarrow = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Narrow}
|
||||
currentVersion="5.24.0"
|
||||
dialogType={DialogType.DownloadReady}
|
||||
downloadSize={30123456}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
DownloadReadyNarrow.story = {
|
||||
name: 'DownloadReady (Narrow)',
|
||||
};
|
||||
|
||||
export const FullDownloadReadyNarrow = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Narrow}
|
||||
currentVersion="5.24.0"
|
||||
dialogType={DialogType.FullDownloadReady}
|
||||
downloadSize={300123456}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
FullDownloadReadyNarrow.story = {
|
||||
name: 'FullDownloadReady (Narrow)',
|
||||
};
|
||||
|
||||
export const DownloadingNarrow = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Narrow}
|
||||
currentVersion="5.24.0"
|
||||
dialogType={DialogType.Downloading}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
DownloadingNarrow.story = {
|
||||
name: 'Downloading (Narrow)',
|
||||
};
|
||||
|
||||
export const CannotUpdateNarrow = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Narrow}
|
||||
currentVersion="5.24.0"
|
||||
dialogType={DialogType.Cannot_Update}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
CannotUpdateNarrow.story = {
|
||||
name: 'Cannot Update (Narrow)',
|
||||
};
|
||||
|
||||
export const CannotUpdateBetaNarrow = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Narrow}
|
||||
currentVersion="5.24.0-beta.1"
|
||||
dialogType={DialogType.Cannot_Update}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
CannotUpdateBetaNarrow.story = {
|
||||
name: 'Cannot Update Beta (Narrow)',
|
||||
};
|
||||
|
||||
export const CannotUpdateRequireManualNarrow = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Narrow}
|
||||
currentVersion="5.24.0"
|
||||
dialogType={DialogType.Cannot_Update_Require_Manual}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
CannotUpdateRequireManualNarrow.story = {
|
||||
name: 'Cannot_Update_Require_Manual (Narrow)',
|
||||
};
|
||||
|
||||
export const CannotUpdateRequireManualBetaNarrow = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Narrow}
|
||||
currentVersion="5.24.0-beta.1"
|
||||
dialogType={DialogType.Cannot_Update_Require_Manual}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
CannotUpdateRequireManualBetaNarrow.story = {
|
||||
name: 'Cannot_Update_Require_Manual_Beta (Narrow)',
|
||||
};
|
||||
|
||||
export const MacOSReadOnlyNarrow = (): JSX.Element => (
|
||||
<FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
|
||||
<DialogUpdate
|
||||
{...defaultProps}
|
||||
containerWidthBreakpoint={WidthBreakpoint.Narrow}
|
||||
currentVersion="5.24.0"
|
||||
dialogType={DialogType.MacOS_Read_Only}
|
||||
/>
|
||||
</FakeLeftPaneContainer>
|
||||
);
|
||||
|
||||
MacOSReadOnlyNarrow.story = {
|
||||
name: 'MacOS_Read_Only (Narrow)',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { DisappearingTimeDialog } from './DisappearingTimeDialog';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
|
|
@ -11,19 +10,53 @@ import enMessages from '../../_locales/en/messages.json';
|
|||
|
||||
import { EXPIRE_TIMERS } from '../test-both/util/expireTimers';
|
||||
|
||||
const story = storiesOf('Components/DisappearingTimeDialog', module);
|
||||
export default {
|
||||
title: 'Components/DisappearingTimeDialog',
|
||||
};
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
EXPIRE_TIMERS.forEach(({ value, label }) => {
|
||||
story.add(`Initial value: ${label}`, () => {
|
||||
return (
|
||||
<DisappearingTimeDialog
|
||||
i18n={i18n}
|
||||
initialValue={value}
|
||||
onSubmit={action('onSubmit')}
|
||||
onClose={action('onClose')}
|
||||
/>
|
||||
);
|
||||
});
|
||||
});
|
||||
export const Seconds = (): JSX.Element => (
|
||||
<DisappearingTimeDialog
|
||||
i18n={i18n}
|
||||
initialValue={EXPIRE_TIMERS[0].value}
|
||||
onSubmit={action('onSubmit')}
|
||||
onClose={action('onClose')}
|
||||
/>
|
||||
);
|
||||
|
||||
export const Minutes = (): JSX.Element => (
|
||||
<DisappearingTimeDialog
|
||||
i18n={i18n}
|
||||
initialValue={EXPIRE_TIMERS[1].value}
|
||||
onSubmit={action('onSubmit')}
|
||||
onClose={action('onClose')}
|
||||
/>
|
||||
);
|
||||
|
||||
export const Hours = (): JSX.Element => (
|
||||
<DisappearingTimeDialog
|
||||
i18n={i18n}
|
||||
initialValue={EXPIRE_TIMERS[2].value}
|
||||
onSubmit={action('onSubmit')}
|
||||
onClose={action('onClose')}
|
||||
/>
|
||||
);
|
||||
|
||||
export const Days = (): JSX.Element => (
|
||||
<DisappearingTimeDialog
|
||||
i18n={i18n}
|
||||
initialValue={EXPIRE_TIMERS[3].value}
|
||||
onSubmit={action('onSubmit')}
|
||||
onClose={action('onClose')}
|
||||
/>
|
||||
);
|
||||
|
||||
export const Weeks = (): JSX.Element => (
|
||||
<DisappearingTimeDialog
|
||||
i18n={i18n}
|
||||
initialValue={EXPIRE_TIMERS[4].value}
|
||||
onSubmit={action('onSubmit')}
|
||||
onClose={action('onClose')}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,13 +2,14 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { DisappearingTimerSelect } from './DisappearingTimerSelect';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
||||
const story = storiesOf('Components/DisappearingTimerSelect', module);
|
||||
export default {
|
||||
title: 'Components/DisappearingTimerSelect',
|
||||
};
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
|
|
@ -28,10 +29,18 @@ const TimerSelectWrap: React.FC<Props> = ({ initialValue }) => {
|
|||
);
|
||||
};
|
||||
|
||||
story.add('Initial value: 1 day', () => (
|
||||
export const InitialValue1Day = (): JSX.Element => (
|
||||
<TimerSelectWrap initialValue={24 * 3600} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Initial value 3 days (Custom time)', () => (
|
||||
InitialValue1Day.story = {
|
||||
name: 'Initial value: 1 day',
|
||||
};
|
||||
|
||||
export const InitialValue3DaysCustomTime = (): JSX.Element => (
|
||||
<TimerSelectWrap initialValue={3 * 24 * 3600} />
|
||||
));
|
||||
);
|
||||
|
||||
InitialValue3DaysCustomTime.story = {
|
||||
name: 'Initial value 3 days (Custom time)',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
|
@ -22,11 +21,15 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
onClose: action('onClick'),
|
||||
});
|
||||
|
||||
storiesOf('Components/ErrorModal', module).add('Normal', () => {
|
||||
return <ErrorModal {...createProps()} />;
|
||||
});
|
||||
export default {
|
||||
title: 'Components/ErrorModal',
|
||||
};
|
||||
|
||||
storiesOf('Components/ErrorModal', module).add('Custom Strings', () => {
|
||||
export const Normal = (): JSX.Element => {
|
||||
return <ErrorModal {...createProps()} />;
|
||||
};
|
||||
|
||||
export const CustomStrings = (): JSX.Element => {
|
||||
return (
|
||||
<ErrorModal
|
||||
{...createProps({
|
||||
|
|
@ -36,4 +39,4 @@ storiesOf('Components/ErrorModal', module).add('Custom Strings', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import * as React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
|
||||
|
|
@ -30,7 +29,9 @@ const createAttachment = (
|
|||
size: 3433,
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/ForwardMessageModal', module);
|
||||
export default {
|
||||
title: 'Components/ForwardMessageModal',
|
||||
};
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
|
|
@ -64,23 +65,35 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
regionCode: 'US',
|
||||
});
|
||||
|
||||
story.add('Modal', () => {
|
||||
export const Modal = (): JSX.Element => {
|
||||
return <ForwardMessageModal {...useProps()} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('with text', () => {
|
||||
export const WithText = (): JSX.Element => {
|
||||
return <ForwardMessageModal {...useProps({ messageBody: 'sup' })} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('a sticker', () => {
|
||||
WithText.story = {
|
||||
name: 'with text',
|
||||
};
|
||||
|
||||
export const ASticker = (): JSX.Element => {
|
||||
return <ForwardMessageModal {...useProps({ isSticker: true })} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('with a contact', () => {
|
||||
ASticker.story = {
|
||||
name: 'a sticker',
|
||||
};
|
||||
|
||||
export const WithAContact = (): JSX.Element => {
|
||||
return <ForwardMessageModal {...useProps({ hasContact: true })} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('link preview', () => {
|
||||
WithAContact.story = {
|
||||
name: 'with a contact',
|
||||
};
|
||||
|
||||
export const LinkPreview = (): JSX.Element => {
|
||||
return (
|
||||
<ForwardMessageModal
|
||||
{...useProps({
|
||||
|
|
@ -100,9 +113,13 @@ story.add('link preview', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('media attachments', () => {
|
||||
LinkPreview.story = {
|
||||
name: 'link preview',
|
||||
};
|
||||
|
||||
export const MediaAttachments = (): JSX.Element => {
|
||||
return (
|
||||
<ForwardMessageModal
|
||||
{...useProps({
|
||||
|
|
@ -126,9 +143,13 @@ story.add('media attachments', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
story.add('announcement only groups non-admin', () => (
|
||||
MediaAttachments.story = {
|
||||
name: 'media attachments',
|
||||
};
|
||||
|
||||
export const AnnouncementOnlyGroupsNonAdmin = (): JSX.Element => (
|
||||
<ForwardMessageModal
|
||||
{...useProps()}
|
||||
candidateConversations={[
|
||||
|
|
@ -138,4 +159,8 @@ story.add('announcement only groups non-admin', () => (
|
|||
}),
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
AnnouncementOnlyGroupsNonAdmin.story = {
|
||||
name: 'announcement only groups non-admin',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
import type { FC } from 'react';
|
||||
import React from 'react';
|
||||
import { memoize, times } from 'lodash';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { number } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
|
@ -32,7 +31,9 @@ const allRemoteParticipants = times(MAX_PARTICIPANTS).map(index => ({
|
|||
}),
|
||||
}));
|
||||
|
||||
const story = storiesOf('Components/GroupCallOverflowArea', module);
|
||||
export default {
|
||||
title: 'Components/GroupCallOverflowArea',
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
getFrameBuffer: memoize(() => Buffer.alloc(FRAME_BUFFER_SIZE)),
|
||||
|
|
@ -55,31 +56,43 @@ const Container: FC = ({ children }) => (
|
|||
</div>
|
||||
);
|
||||
|
||||
story.add('No overflowed participants', () => (
|
||||
export const NoOverflowedParticipants = (): JSX.Element => (
|
||||
<Container>
|
||||
<GroupCallOverflowArea {...defaultProps} overflowedParticipants={[]} />
|
||||
</Container>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('One overflowed participant', () => (
|
||||
NoOverflowedParticipants.story = {
|
||||
name: 'No overflowed participants',
|
||||
};
|
||||
|
||||
export const OneOverflowedParticipant = (): JSX.Element => (
|
||||
<Container>
|
||||
<GroupCallOverflowArea
|
||||
{...defaultProps}
|
||||
overflowedParticipants={allRemoteParticipants.slice(0, 1)}
|
||||
/>
|
||||
</Container>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Three overflowed participants', () => (
|
||||
OneOverflowedParticipant.story = {
|
||||
name: 'One overflowed participant',
|
||||
};
|
||||
|
||||
export const ThreeOverflowedParticipants = (): JSX.Element => (
|
||||
<Container>
|
||||
<GroupCallOverflowArea
|
||||
{...defaultProps}
|
||||
overflowedParticipants={allRemoteParticipants.slice(0, 3)}
|
||||
/>
|
||||
</Container>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Many overflowed participants', () => (
|
||||
ThreeOverflowedParticipants.story = {
|
||||
name: 'Three overflowed participants',
|
||||
};
|
||||
|
||||
export const ManyOverflowedParticipants = (): JSX.Element => (
|
||||
<Container>
|
||||
<GroupCallOverflowArea
|
||||
{...defaultProps}
|
||||
|
|
@ -94,4 +107,8 @@ story.add('Many overflowed participants', () => (
|
|||
)}
|
||||
/>
|
||||
</Container>
|
||||
));
|
||||
);
|
||||
|
||||
ManyOverflowedParticipants.story = {
|
||||
name: 'Many overflowed participants',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import { memoize, noop } from 'lodash';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
|
||||
import type { PropsType } from './GroupCallRemoteParticipant';
|
||||
|
|
@ -64,9 +63,11 @@ const createProps = (
|
|||
...overrideProps,
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/GroupCallRemoteParticipant', module);
|
||||
export default {
|
||||
title: 'Components/GroupCallRemoteParticipant',
|
||||
};
|
||||
|
||||
story.add('Default', () => (
|
||||
export const Default = (): JSX.Element => (
|
||||
<GroupCallRemoteParticipant
|
||||
{...createProps({
|
||||
isInPip: false,
|
||||
|
|
@ -76,9 +77,9 @@ story.add('Default', () => (
|
|||
width: 120,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Speaking', () => (
|
||||
export const Speaking = (): JSX.Element => (
|
||||
<GroupCallRemoteParticipant
|
||||
{...createProps(
|
||||
{
|
||||
|
|
@ -92,17 +93,21 @@ story.add('Speaking', () => (
|
|||
{ hasRemoteAudio: true }
|
||||
)}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('isInPip', () => (
|
||||
export const IsInPip = (): JSX.Element => (
|
||||
<GroupCallRemoteParticipant
|
||||
{...createProps({
|
||||
isInPip: true,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Blocked', () => (
|
||||
IsInPip.story = {
|
||||
name: 'isInPip',
|
||||
};
|
||||
|
||||
export const Blocked = (): JSX.Element => (
|
||||
<GroupCallRemoteParticipant
|
||||
{...createProps(
|
||||
{
|
||||
|
|
@ -115,4 +120,4 @@ story.add('Blocked', () => (
|
|||
{ isBlocked: true }
|
||||
)}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
||||
|
|
@ -12,7 +10,9 @@ import { GroupDescriptionInput } from './GroupDescriptionInput';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/GroupDescriptionInput', module);
|
||||
export default {
|
||||
title: 'Components/GroupDescriptionInput',
|
||||
};
|
||||
|
||||
const Wrapper = ({
|
||||
disabled,
|
||||
|
|
@ -33,12 +33,12 @@ const Wrapper = ({
|
|||
);
|
||||
};
|
||||
|
||||
story.add('Default', () => <Wrapper />);
|
||||
export const Default = (): JSX.Element => <Wrapper />;
|
||||
|
||||
story.add('Disabled', () => (
|
||||
export const Disabled = (): JSX.Element => (
|
||||
<>
|
||||
<Wrapper disabled />
|
||||
<br />
|
||||
<Wrapper disabled startingValue="Has a value" />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
||||
|
|
@ -12,7 +10,9 @@ import { GroupTitleInput } from './GroupTitleInput';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/GroupTitleInput', module);
|
||||
export default {
|
||||
title: 'Components/GroupTitleInput',
|
||||
};
|
||||
|
||||
const Wrapper = ({
|
||||
disabled,
|
||||
|
|
@ -33,12 +33,12 @@ const Wrapper = ({
|
|||
);
|
||||
};
|
||||
|
||||
story.add('Default', () => <Wrapper />);
|
||||
export const Default = (): JSX.Element => <Wrapper />;
|
||||
|
||||
story.add('Disabled', () => (
|
||||
export const Disabled = (): JSX.Element => (
|
||||
<>
|
||||
<Wrapper disabled />
|
||||
<br />
|
||||
<Wrapper disabled startingValue="Has a value" />
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { isBoolean } from 'lodash';
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
|
@ -57,13 +56,19 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
theme: ThemeType.light,
|
||||
});
|
||||
|
||||
const stories = storiesOf('Components/GroupV1MigrationDialog', module);
|
||||
export default {
|
||||
title: 'Components/GroupV1MigrationDialog',
|
||||
};
|
||||
|
||||
stories.add('Not yet migrated, basic', () => {
|
||||
export const NotYetMigratedBasic = (): JSX.Element => {
|
||||
return <GroupV1MigrationDialog {...createProps()} />;
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Migrated, basic', () => {
|
||||
NotYetMigratedBasic.story = {
|
||||
name: 'Not yet migrated, basic',
|
||||
};
|
||||
|
||||
export const MigratedBasic = (): JSX.Element => {
|
||||
return (
|
||||
<GroupV1MigrationDialog
|
||||
{...createProps({
|
||||
|
|
@ -71,9 +76,13 @@ stories.add('Migrated, basic', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Migrated, you are invited', () => {
|
||||
MigratedBasic.story = {
|
||||
name: 'Migrated, basic',
|
||||
};
|
||||
|
||||
export const MigratedYouAreInvited = (): JSX.Element => {
|
||||
return (
|
||||
<GroupV1MigrationDialog
|
||||
{...createProps({
|
||||
|
|
@ -82,20 +91,29 @@ stories.add('Migrated, you are invited', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Not yet migrated, multiple dropped and invited members', () => {
|
||||
return (
|
||||
<GroupV1MigrationDialog
|
||||
{...createProps({
|
||||
droppedMembers: [contact3, contact1, contact2],
|
||||
invitedMembers: [contact2, contact3, contact1],
|
||||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
MigratedYouAreInvited.story = {
|
||||
name: 'Migrated, you are invited',
|
||||
};
|
||||
|
||||
stories.add('Not yet migrated, no members', () => {
|
||||
export const NotYetMigratedMultipleDroppedAndInvitedMembers =
|
||||
(): JSX.Element => {
|
||||
return (
|
||||
<GroupV1MigrationDialog
|
||||
{...createProps({
|
||||
droppedMembers: [contact3, contact1, contact2],
|
||||
invitedMembers: [contact2, contact3, contact1],
|
||||
})}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
NotYetMigratedMultipleDroppedAndInvitedMembers.story = {
|
||||
name: 'Not yet migrated, multiple dropped and invited members',
|
||||
};
|
||||
|
||||
export const NotYetMigratedNoMembers = (): JSX.Element => {
|
||||
return (
|
||||
<GroupV1MigrationDialog
|
||||
{...createProps({
|
||||
|
|
@ -104,9 +122,13 @@ stories.add('Not yet migrated, no members', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Not yet migrated, just dropped member', () => {
|
||||
NotYetMigratedNoMembers.story = {
|
||||
name: 'Not yet migrated, no members',
|
||||
};
|
||||
|
||||
export const NotYetMigratedJustDroppedMember = (): JSX.Element => {
|
||||
return (
|
||||
<GroupV1MigrationDialog
|
||||
{...createProps({
|
||||
|
|
@ -114,4 +136,8 @@ stories.add('Not yet migrated, just dropped member', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
NotYetMigratedJustDroppedMember.story = {
|
||||
name: 'Not yet migrated, just dropped member',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { boolean, number, text } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
|
@ -27,13 +26,15 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
i18n,
|
||||
});
|
||||
|
||||
const stories = storiesOf('Components/GroupV2JoinDialog', module);
|
||||
export default {
|
||||
title: 'Components/GroupV2JoinDialog',
|
||||
};
|
||||
|
||||
stories.add('Basic', () => {
|
||||
export const Basic = (): JSX.Element => {
|
||||
return <GroupV2JoinDialog {...createProps()} />;
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Approval required', () => {
|
||||
export const ApprovalRequired = (): JSX.Element => {
|
||||
return (
|
||||
<GroupV2JoinDialog
|
||||
{...createProps({
|
||||
|
|
@ -42,9 +43,13 @@ stories.add('Approval required', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('With avatar', () => {
|
||||
ApprovalRequired.story = {
|
||||
name: 'Approval required',
|
||||
};
|
||||
|
||||
export const WithAvatar = (): JSX.Element => {
|
||||
return (
|
||||
<GroupV2JoinDialog
|
||||
{...createProps({
|
||||
|
|
@ -55,9 +60,13 @@ stories.add('With avatar', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('With one member', () => {
|
||||
WithAvatar.story = {
|
||||
name: 'With avatar',
|
||||
};
|
||||
|
||||
export const WithOneMember = (): JSX.Element => {
|
||||
return (
|
||||
<GroupV2JoinDialog
|
||||
{...createProps({
|
||||
|
|
@ -66,9 +75,13 @@ stories.add('With one member', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Avatar loading state', () => {
|
||||
WithOneMember.story = {
|
||||
name: 'With one member',
|
||||
};
|
||||
|
||||
export const AvatarLoadingState = (): JSX.Element => {
|
||||
return (
|
||||
<GroupV2JoinDialog
|
||||
{...createProps({
|
||||
|
|
@ -79,9 +92,13 @@ stories.add('Avatar loading state', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('Full', () => {
|
||||
AvatarLoadingState.story = {
|
||||
name: 'Avatar loading state',
|
||||
};
|
||||
|
||||
export const Full = (): JSX.Element => {
|
||||
return (
|
||||
<GroupV2JoinDialog
|
||||
{...createProps({
|
||||
|
|
@ -94,4 +111,4 @@ stories.add('Full', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,19 +3,25 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { IdenticonSVG } from './IdenticonSVG';
|
||||
import { AvatarColorMap } from '../types/Colors';
|
||||
|
||||
const story = storiesOf('Components/IdenticonSVG', module);
|
||||
export default {
|
||||
title: 'Components/IdenticonSVG',
|
||||
};
|
||||
|
||||
AvatarColorMap.forEach((value, key) =>
|
||||
story.add(key, () => (
|
||||
<IdenticonSVG
|
||||
backgroundColor={value.bg}
|
||||
content="HI"
|
||||
foregroundColor={value.fg}
|
||||
/>
|
||||
))
|
||||
);
|
||||
export const AllColors = (): JSX.Element => {
|
||||
const stories: Array<JSX.Element> = [];
|
||||
|
||||
AvatarColorMap.forEach(value =>
|
||||
stories.push(
|
||||
<IdenticonSVG
|
||||
backgroundColor={value.bg}
|
||||
content="HI"
|
||||
foregroundColor={value.fg}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
return <>{stories}</>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,14 +3,16 @@
|
|||
|
||||
import * as React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
import { InContactsIcon } from './InContactsIcon';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
storiesOf('Components/InContactsIcon', module).add('Default', () => {
|
||||
export default {
|
||||
title: 'Components/InContactsIcon',
|
||||
};
|
||||
|
||||
export const Default = (): JSX.Element => {
|
||||
return <InContactsIcon i18n={i18n} />;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { IncomingCallBar } from './IncomingCallBar';
|
||||
|
|
@ -52,77 +51,114 @@ const groupConversation = getDefaultConversation({
|
|||
type: 'group',
|
||||
});
|
||||
|
||||
storiesOf('Components/IncomingCallBar', module)
|
||||
.add('Incoming direct call (video)', () => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={directConversation}
|
||||
callMode={CallMode.Direct}
|
||||
isVideoCall
|
||||
/>
|
||||
))
|
||||
.add('Incoming direct call (audio)', () => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={directConversation}
|
||||
callMode={CallMode.Direct}
|
||||
isVideoCall={false}
|
||||
/>
|
||||
))
|
||||
.add('Incoming group call (only calling you)', () => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={groupConversation}
|
||||
callMode={CallMode.Group}
|
||||
otherMembersRung={[]}
|
||||
ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
|
||||
/>
|
||||
))
|
||||
.add('Incoming group call (calling you and 1 other)', () => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={groupConversation}
|
||||
callMode={CallMode.Group}
|
||||
otherMembersRung={[{ firstName: 'Morty', title: 'Morty Smith' }]}
|
||||
ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
|
||||
/>
|
||||
))
|
||||
.add('Incoming group call (calling you and 2 others)', () => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={groupConversation}
|
||||
callMode={CallMode.Group}
|
||||
otherMembersRung={[
|
||||
{ firstName: 'Morty', title: 'Morty Smith' },
|
||||
{ firstName: 'Summer', title: 'Summer Smith' },
|
||||
]}
|
||||
ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
|
||||
/>
|
||||
))
|
||||
.add('Incoming group call (calling you and 3 others)', () => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={groupConversation}
|
||||
callMode={CallMode.Group}
|
||||
otherMembersRung={[
|
||||
{ firstName: 'Morty', title: 'Morty Smith' },
|
||||
{ firstName: 'Summer', title: 'Summer Smith' },
|
||||
{ firstName: 'Beth', title: 'Beth Smith' },
|
||||
]}
|
||||
ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
|
||||
/>
|
||||
))
|
||||
.add('Incoming group call (calling you and 4 others)', () => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={groupConversation}
|
||||
callMode={CallMode.Group}
|
||||
otherMembersRung={[
|
||||
{ firstName: 'Morty', title: 'Morty Smith' },
|
||||
{ firstName: 'Summer', title: 'Summer Smith' },
|
||||
{ firstName: 'Beth', title: 'Beth Sanchez' },
|
||||
{ firstName: 'Jerry', title: 'Beth Smith' },
|
||||
]}
|
||||
ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
|
||||
/>
|
||||
));
|
||||
export default {
|
||||
title: 'Components/IncomingCallBar',
|
||||
};
|
||||
|
||||
export const IncomingDirectCallVideo = (): JSX.Element => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={directConversation}
|
||||
callMode={CallMode.Direct}
|
||||
isVideoCall
|
||||
/>
|
||||
);
|
||||
|
||||
IncomingDirectCallVideo.story = {
|
||||
name: 'Incoming direct call (video)',
|
||||
};
|
||||
|
||||
export const IncomingDirectCallAudio = (): JSX.Element => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={directConversation}
|
||||
callMode={CallMode.Direct}
|
||||
isVideoCall={false}
|
||||
/>
|
||||
);
|
||||
|
||||
IncomingDirectCallAudio.story = {
|
||||
name: 'Incoming direct call (audio)',
|
||||
};
|
||||
|
||||
export const IncomingGroupCallOnlyCallingYou = (): JSX.Element => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={groupConversation}
|
||||
callMode={CallMode.Group}
|
||||
otherMembersRung={[]}
|
||||
ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
|
||||
/>
|
||||
);
|
||||
|
||||
IncomingGroupCallOnlyCallingYou.story = {
|
||||
name: 'Incoming group call (only calling you)',
|
||||
};
|
||||
|
||||
export const IncomingGroupCallCallingYouAnd1Other = (): JSX.Element => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={groupConversation}
|
||||
callMode={CallMode.Group}
|
||||
otherMembersRung={[{ firstName: 'Morty', title: 'Morty Smith' }]}
|
||||
ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
|
||||
/>
|
||||
);
|
||||
|
||||
IncomingGroupCallCallingYouAnd1Other.story = {
|
||||
name: 'Incoming group call (calling you and 1 other)',
|
||||
};
|
||||
|
||||
export const IncomingGroupCallCallingYouAnd2Others = (): JSX.Element => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={groupConversation}
|
||||
callMode={CallMode.Group}
|
||||
otherMembersRung={[
|
||||
{ firstName: 'Morty', title: 'Morty Smith' },
|
||||
{ firstName: 'Summer', title: 'Summer Smith' },
|
||||
]}
|
||||
ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
|
||||
/>
|
||||
);
|
||||
|
||||
IncomingGroupCallCallingYouAnd2Others.story = {
|
||||
name: 'Incoming group call (calling you and 2 others)',
|
||||
};
|
||||
|
||||
export const IncomingGroupCallCallingYouAnd3Others = (): JSX.Element => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={groupConversation}
|
||||
callMode={CallMode.Group}
|
||||
otherMembersRung={[
|
||||
{ firstName: 'Morty', title: 'Morty Smith' },
|
||||
{ firstName: 'Summer', title: 'Summer Smith' },
|
||||
{ firstName: 'Beth', title: 'Beth Smith' },
|
||||
]}
|
||||
ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
|
||||
/>
|
||||
);
|
||||
|
||||
IncomingGroupCallCallingYouAnd3Others.story = {
|
||||
name: 'Incoming group call (calling you and 3 others)',
|
||||
};
|
||||
|
||||
export const IncomingGroupCallCallingYouAnd4Others = (): JSX.Element => (
|
||||
<IncomingCallBar
|
||||
{...commonProps}
|
||||
conversation={groupConversation}
|
||||
callMode={CallMode.Group}
|
||||
otherMembersRung={[
|
||||
{ firstName: 'Morty', title: 'Morty Smith' },
|
||||
{ firstName: 'Summer', title: 'Summer Smith' },
|
||||
{ firstName: 'Beth', title: 'Beth Sanchez' },
|
||||
{ firstName: 'Jerry', title: 'Beth Smith' },
|
||||
]}
|
||||
ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
|
||||
/>
|
||||
);
|
||||
|
||||
IncomingGroupCallCallingYouAnd4Others.story = {
|
||||
name: 'Incoming group call (calling you and 4 others)',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
|
@ -14,7 +13,9 @@ import enMessages from '../../_locales/en/messages.json';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const stories = storiesOf('Components/Input', module);
|
||||
export default {
|
||||
title: 'Components/Input',
|
||||
};
|
||||
|
||||
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
||||
disabled: Boolean(overrideProps.disabled),
|
||||
|
|
@ -40,42 +41,58 @@ function Controller(props: PropsType): JSX.Element {
|
|||
return <Input {...props} onChange={setValue} value={value} />;
|
||||
}
|
||||
|
||||
stories.add('Simple', () => <Controller {...createProps()} />);
|
||||
export const Simple = (): JSX.Element => <Controller {...createProps()} />;
|
||||
|
||||
stories.add('hasClearButton', () => (
|
||||
export const HasClearButton = (): JSX.Element => (
|
||||
<Controller
|
||||
{...createProps({
|
||||
hasClearButton: true,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('character count', () => (
|
||||
HasClearButton.story = {
|
||||
name: 'hasClearButton',
|
||||
};
|
||||
|
||||
export const CharacterCount = (): JSX.Element => (
|
||||
<Controller
|
||||
{...createProps({
|
||||
maxLengthCount: 10,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('character count (customizable show)', () => (
|
||||
CharacterCount.story = {
|
||||
name: 'character count',
|
||||
};
|
||||
|
||||
export const CharacterCountCustomizableShow = (): JSX.Element => (
|
||||
<Controller
|
||||
{...createProps({
|
||||
maxLengthCount: 64,
|
||||
whenToShowRemainingCount: 32,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('expandable', () => (
|
||||
CharacterCountCustomizableShow.story = {
|
||||
name: 'character count (customizable show)',
|
||||
};
|
||||
|
||||
export const Expandable = (): JSX.Element => (
|
||||
<Controller
|
||||
{...createProps({
|
||||
expandable: true,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('expandable w/count', () => (
|
||||
Expandable.story = {
|
||||
name: 'expandable',
|
||||
};
|
||||
|
||||
export const ExpandableWCount = (): JSX.Element => (
|
||||
<Controller
|
||||
{...createProps({
|
||||
expandable: true,
|
||||
|
|
@ -84,20 +101,32 @@ stories.add('expandable w/count', () => (
|
|||
whenToShowRemainingCount: 0,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('disabled', () => (
|
||||
ExpandableWCount.story = {
|
||||
name: 'expandable w/count',
|
||||
};
|
||||
|
||||
export const Disabled = (): JSX.Element => (
|
||||
<Controller
|
||||
{...createProps({
|
||||
disabled: true,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('spellcheck disabled', () => (
|
||||
Disabled.story = {
|
||||
name: 'disabled',
|
||||
};
|
||||
|
||||
export const SpellcheckDisabled = (): JSX.Element => (
|
||||
<Controller
|
||||
{...createProps({
|
||||
disableSpellcheck: true,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
SpellcheckDisabled.story = {
|
||||
name: 'spellcheck disabled',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,89 +1,75 @@
|
|||
// Copyright 2020 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import type { Meta, Story } from '@storybook/react';
|
||||
import * as React from 'react';
|
||||
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import type { Props } from './Intl';
|
||||
import { Intl } from './Intl';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
const story = storiesOf('Components/Intl', module);
|
||||
|
||||
export default {
|
||||
title: 'Components/Intl',
|
||||
component: Intl,
|
||||
} as Meta;
|
||||
|
||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
i18n,
|
||||
id: text('id', overrideProps.id || 'deleteAndRestart'),
|
||||
id: overrideProps.id || '',
|
||||
components: overrideProps.components,
|
||||
renderText: overrideProps.renderText,
|
||||
});
|
||||
|
||||
story.add('No Replacements', () => {
|
||||
const props = createProps({
|
||||
id: 'deleteAndRestart',
|
||||
});
|
||||
const Template: Story<Props> = args => <Intl {...args} />;
|
||||
|
||||
return <Intl {...props} />;
|
||||
export const NoReplacements = Template.bind({});
|
||||
NoReplacements.args = createProps({
|
||||
id: 'deleteAndRestart',
|
||||
});
|
||||
|
||||
story.add('Single String Replacement', () => {
|
||||
const props = createProps({
|
||||
id: 'leftTheGroup',
|
||||
components: ['Theodora'],
|
||||
});
|
||||
|
||||
return <Intl {...props} />;
|
||||
export const SingleStringReplacement = Template.bind({});
|
||||
SingleStringReplacement.args = createProps({
|
||||
id: 'leftTheGroup',
|
||||
components: ['Theodora'],
|
||||
});
|
||||
|
||||
story.add('Single Tag Replacement', () => {
|
||||
const props = createProps({
|
||||
id: 'leftTheGroup',
|
||||
components: [
|
||||
<button type="button" key="a-button">
|
||||
Theodora
|
||||
</button>,
|
||||
],
|
||||
});
|
||||
|
||||
return <Intl {...props} />;
|
||||
export const SingleTagReplacement = Template.bind({});
|
||||
SingleTagReplacement.args = createProps({
|
||||
id: 'leftTheGroup',
|
||||
components: [
|
||||
<button type="button" key="a-button">
|
||||
Theodora
|
||||
</button>,
|
||||
],
|
||||
});
|
||||
|
||||
story.add('Multiple String Replacement', () => {
|
||||
const props = createProps({
|
||||
id: 'changedRightAfterVerify',
|
||||
components: {
|
||||
name1: 'Fred',
|
||||
name2: 'The Fredster',
|
||||
},
|
||||
});
|
||||
|
||||
return <Intl {...props} />;
|
||||
export const MultipleStringReplacement = Template.bind({});
|
||||
MultipleStringReplacement.args = createProps({
|
||||
id: 'changedRightAfterVerify',
|
||||
components: {
|
||||
name1: 'Fred',
|
||||
name2: 'The Fredster',
|
||||
},
|
||||
});
|
||||
|
||||
story.add('Multiple Tag Replacement', () => {
|
||||
const props = createProps({
|
||||
id: 'changedRightAfterVerify',
|
||||
components: {
|
||||
name1: <b>Fred</b>,
|
||||
name2: <b>The Fredster</b>,
|
||||
},
|
||||
});
|
||||
|
||||
return <Intl {...props} />;
|
||||
export const MultipleTagReplacement = Template.bind({});
|
||||
MultipleTagReplacement.args = createProps({
|
||||
id: 'changedRightAfterVerify',
|
||||
components: {
|
||||
name1: <b>Fred</b>,
|
||||
name2: <b>The Fredster</b>,
|
||||
},
|
||||
});
|
||||
|
||||
story.add('Custom Render', () => {
|
||||
const props = createProps({
|
||||
id: 'deleteAndRestart',
|
||||
renderText: ({ text: theText, key }) => (
|
||||
<div style={{ backgroundColor: 'purple', color: 'orange' }} key={key}>
|
||||
{theText}
|
||||
</div>
|
||||
),
|
||||
});
|
||||
|
||||
return <Intl {...props} />;
|
||||
export const CustomRender = Template.bind({});
|
||||
CustomRender.args = createProps({
|
||||
id: 'deleteAndRestart',
|
||||
renderText: ({ text: theText, key }) => (
|
||||
<div style={{ backgroundColor: 'purple', color: 'orange' }} key={key}>
|
||||
{theText}
|
||||
</div>
|
||||
),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import * as React from 'react';
|
|||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import type { PropsType } from './LeftPane';
|
||||
import { LeftPane, LeftPaneMode } from './LeftPane';
|
||||
|
|
@ -25,7 +24,9 @@ import {
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/LeftPane', module);
|
||||
export default {
|
||||
title: 'Components/LeftPane',
|
||||
};
|
||||
|
||||
const defaultConversations: Array<ConversationType> = [
|
||||
getDefaultConversation({
|
||||
|
|
@ -200,9 +201,7 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => {
|
|||
};
|
||||
};
|
||||
|
||||
// Inbox stories
|
||||
|
||||
story.add('Inbox: no conversations', () => (
|
||||
export const InboxNoConversations = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -215,9 +214,13 @@ story.add('Inbox: no conversations', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Inbox: only pinned conversations', () => (
|
||||
InboxNoConversations.story = {
|
||||
name: 'Inbox: no conversations',
|
||||
};
|
||||
|
||||
export const InboxOnlyPinnedConversations = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -230,9 +233,13 @@ story.add('Inbox: only pinned conversations', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Inbox: only non-pinned conversations', () => (
|
||||
InboxOnlyPinnedConversations.story = {
|
||||
name: 'Inbox: only pinned conversations',
|
||||
};
|
||||
|
||||
export const InboxOnlyNonPinnedConversations = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -245,9 +252,13 @@ story.add('Inbox: only non-pinned conversations', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Inbox: only archived conversations', () => (
|
||||
InboxOnlyNonPinnedConversations.story = {
|
||||
name: 'Inbox: only non-pinned conversations',
|
||||
};
|
||||
|
||||
export const InboxOnlyArchivedConversations = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -260,9 +271,13 @@ story.add('Inbox: only archived conversations', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Inbox: pinned and archived conversations', () => (
|
||||
InboxOnlyArchivedConversations.story = {
|
||||
name: 'Inbox: only archived conversations',
|
||||
};
|
||||
|
||||
export const InboxPinnedAndArchivedConversations = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -275,9 +290,13 @@ story.add('Inbox: pinned and archived conversations', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Inbox: non-pinned and archived conversations', () => (
|
||||
InboxPinnedAndArchivedConversations.story = {
|
||||
name: 'Inbox: pinned and archived conversations',
|
||||
};
|
||||
|
||||
export const InboxNonPinnedAndArchivedConversations = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -290,9 +309,13 @@ story.add('Inbox: non-pinned and archived conversations', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Inbox: pinned and non-pinned conversations', () => (
|
||||
InboxNonPinnedAndArchivedConversations.story = {
|
||||
name: 'Inbox: non-pinned and archived conversations',
|
||||
};
|
||||
|
||||
export const InboxPinnedAndNonPinnedConversations = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -305,15 +328,21 @@ story.add('Inbox: pinned and non-pinned conversations', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Inbox: pinned, non-pinned, and archived conversations', () => (
|
||||
InboxPinnedAndNonPinnedConversations.story = {
|
||||
name: 'Inbox: pinned and non-pinned conversations',
|
||||
};
|
||||
|
||||
export const InboxPinnedNonPinnedAndArchivedConversations = (): JSX.Element => (
|
||||
<LeftPane {...useProps()} />
|
||||
));
|
||||
);
|
||||
|
||||
// Search stories
|
||||
InboxPinnedNonPinnedAndArchivedConversations.story = {
|
||||
name: 'Inbox: pinned, non-pinned, and archived conversations',
|
||||
};
|
||||
|
||||
story.add('Search: no results when searching everywhere', () => (
|
||||
export const SearchNoResultsWhenSearchingEverywhere = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -326,9 +355,13 @@ story.add('Search: no results when searching everywhere', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Search: no results when searching everywhere (SMS)', () => (
|
||||
SearchNoResultsWhenSearchingEverywhere.story = {
|
||||
name: 'Search: no results when searching everywhere',
|
||||
};
|
||||
|
||||
export const SearchNoResultsWhenSearchingEverywhereSms = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -341,9 +374,13 @@ story.add('Search: no results when searching everywhere (SMS)', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Search: no results when searching in a conversation', () => (
|
||||
SearchNoResultsWhenSearchingEverywhereSms.story = {
|
||||
name: 'Search: no results when searching everywhere (SMS)',
|
||||
};
|
||||
|
||||
export const SearchNoResultsWhenSearchingInAConversation = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -357,9 +394,13 @@ story.add('Search: no results when searching in a conversation', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Search: all results loading', () => (
|
||||
SearchNoResultsWhenSearchingInAConversation.story = {
|
||||
name: 'Search: no results when searching in a conversation',
|
||||
};
|
||||
|
||||
export const SearchAllResultsLoading = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -372,9 +413,13 @@ story.add('Search: all results loading', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Search: some results loading', () => (
|
||||
SearchAllResultsLoading.story = {
|
||||
name: 'Search: all results loading',
|
||||
};
|
||||
|
||||
export const SearchSomeResultsLoading = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -390,27 +435,36 @@ story.add('Search: some results loading', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Search: has conversations and contacts, but not messages', () => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
...defaultSearchProps,
|
||||
mode: LeftPaneMode.Search,
|
||||
conversationResults: {
|
||||
isLoading: false,
|
||||
results: defaultConversations,
|
||||
SearchSomeResultsLoading.story = {
|
||||
name: 'Search: some results loading',
|
||||
};
|
||||
|
||||
export const SearchHasConversationsAndContactsButNotMessages =
|
||||
(): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
...defaultSearchProps,
|
||||
mode: LeftPaneMode.Search,
|
||||
conversationResults: {
|
||||
isLoading: false,
|
||||
results: defaultConversations,
|
||||
},
|
||||
contactResults: { isLoading: false, results: defaultConversations },
|
||||
messageResults: { isLoading: false, results: [] },
|
||||
primarySendsSms: false,
|
||||
},
|
||||
contactResults: { isLoading: false, results: defaultConversations },
|
||||
messageResults: { isLoading: false, results: [] },
|
||||
primarySendsSms: false,
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
||||
story.add('Search: all results', () => (
|
||||
SearchHasConversationsAndContactsButNotMessages.story = {
|
||||
name: 'Search: has conversations and contacts, but not messages',
|
||||
};
|
||||
|
||||
export const SearchAllResults = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -432,11 +486,13 @@ story.add('Search: all results', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
// Archived stories
|
||||
SearchAllResults.story = {
|
||||
name: 'Search: all results',
|
||||
};
|
||||
|
||||
story.add('Archive: no archived conversations', () => (
|
||||
export const ArchiveNoArchivedConversations = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -448,9 +504,13 @@ story.add('Archive: no archived conversations', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Archive: archived conversations', () => (
|
||||
ArchiveNoArchivedConversations.story = {
|
||||
name: 'Archive: no archived conversations',
|
||||
};
|
||||
|
||||
export const ArchiveArchivedConversations = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -462,9 +522,13 @@ story.add('Archive: archived conversations', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Archive: searching a conversation', () => (
|
||||
ArchiveArchivedConversations.story = {
|
||||
name: 'Archive: archived conversations',
|
||||
};
|
||||
|
||||
export const ArchiveSearchingAConversation = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -476,11 +540,13 @@ story.add('Archive: searching a conversation', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
// Compose stories
|
||||
ArchiveSearchingAConversation.story = {
|
||||
name: 'Archive: searching a conversation',
|
||||
};
|
||||
|
||||
story.add('Compose: no results', () => (
|
||||
export const ComposeNoResults = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -494,9 +560,13 @@ story.add('Compose: no results', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Compose: some contacts, no search term', () => (
|
||||
ComposeNoResults.story = {
|
||||
name: 'Compose: no results',
|
||||
};
|
||||
|
||||
export const ComposeSomeContactsNoSearchTerm = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -510,9 +580,13 @@ story.add('Compose: some contacts, no search term', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Compose: some contacts, with a search term', () => (
|
||||
ComposeSomeContactsNoSearchTerm.story = {
|
||||
name: 'Compose: some contacts, no search term',
|
||||
};
|
||||
|
||||
export const ComposeSomeContactsWithASearchTerm = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -526,9 +600,13 @@ story.add('Compose: some contacts, with a search term', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Compose: some groups, no search term', () => (
|
||||
ComposeSomeContactsWithASearchTerm.story = {
|
||||
name: 'Compose: some contacts, with a search term',
|
||||
};
|
||||
|
||||
export const ComposeSomeGroupsNoSearchTerm = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -542,9 +620,13 @@ story.add('Compose: some groups, no search term', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Compose: some groups, with search term', () => (
|
||||
ComposeSomeGroupsNoSearchTerm.story = {
|
||||
name: 'Compose: some groups, no search term',
|
||||
};
|
||||
|
||||
export const ComposeSomeGroupsWithSearchTerm = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -558,9 +640,13 @@ story.add('Compose: some groups, with search term', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Compose: search is valid username', () => (
|
||||
ComposeSomeGroupsWithSearchTerm.story = {
|
||||
name: 'Compose: some groups, with search term',
|
||||
};
|
||||
|
||||
export const ComposeSearchIsValidUsername = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -574,9 +660,13 @@ story.add('Compose: search is valid username', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Compose: search is valid username, fetching username', () => (
|
||||
ComposeSearchIsValidUsername.story = {
|
||||
name: 'Compose: search is valid username',
|
||||
};
|
||||
|
||||
export const ComposeSearchIsValidUsernameFetchingUsername = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -592,25 +682,34 @@ story.add('Compose: search is valid username, fetching username', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Compose: search is valid username, but flag is not enabled', () => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Compose,
|
||||
composeContacts: [],
|
||||
composeGroups: [],
|
||||
isUsernamesEnabled: false,
|
||||
uuidFetchState: {},
|
||||
regionCode: 'US',
|
||||
searchTerm: 'someone',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
ComposeSearchIsValidUsernameFetchingUsername.story = {
|
||||
name: 'Compose: search is valid username, fetching username',
|
||||
};
|
||||
|
||||
story.add('Compose: search is partial phone number', () => (
|
||||
export const ComposeSearchIsValidUsernameButFlagIsNotEnabled =
|
||||
(): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Compose,
|
||||
composeContacts: [],
|
||||
composeGroups: [],
|
||||
isUsernamesEnabled: false,
|
||||
uuidFetchState: {},
|
||||
regionCode: 'US',
|
||||
searchTerm: 'someone',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
||||
ComposeSearchIsValidUsernameButFlagIsNotEnabled.story = {
|
||||
name: 'Compose: search is valid username, but flag is not enabled',
|
||||
};
|
||||
|
||||
export const ComposeSearchIsPartialPhoneNumber = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -624,9 +723,13 @@ story.add('Compose: search is partial phone number', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Compose: search is valid phone number', () => (
|
||||
ComposeSearchIsPartialPhoneNumber.story = {
|
||||
name: 'Compose: search is partial phone number',
|
||||
};
|
||||
|
||||
export const ComposeSearchIsValidPhoneNumber = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -640,11 +743,14 @@ story.add('Compose: search is valid phone number', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add(
|
||||
'Compose: search is valid phone number, fetching phone number',
|
||||
() => (
|
||||
ComposeSearchIsValidPhoneNumber.story = {
|
||||
name: 'Compose: search is valid phone number',
|
||||
};
|
||||
|
||||
export const ComposeSearchIsValidPhoneNumberFetchingPhoneNumber =
|
||||
(): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -660,10 +766,13 @@ story.add(
|
|||
},
|
||||
})}
|
||||
/>
|
||||
)
|
||||
);
|
||||
);
|
||||
|
||||
story.add('Compose: all kinds of results, no search term', () => (
|
||||
ComposeSearchIsValidPhoneNumberFetchingPhoneNumber.story = {
|
||||
name: 'Compose: search is valid phone number, fetching phone number',
|
||||
};
|
||||
|
||||
export const ComposeAllKindsOfResultsNoSearchTerm = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -677,9 +786,13 @@ story.add('Compose: all kinds of results, no search term', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Compose: all kinds of results, with a search term', () => (
|
||||
ComposeAllKindsOfResultsNoSearchTerm.story = {
|
||||
name: 'Compose: all kinds of results, no search term',
|
||||
};
|
||||
|
||||
export const ComposeAllKindsOfResultsWithASearchTerm = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -693,11 +806,13 @@ story.add('Compose: all kinds of results, with a search term', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
// Captcha flow
|
||||
ComposeAllKindsOfResultsWithASearchTerm.story = {
|
||||
name: 'Compose: all kinds of results, with a search term',
|
||||
};
|
||||
|
||||
story.add('Captcha dialog: required', () => (
|
||||
export const CaptchaDialogRequired = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -712,9 +827,13 @@ story.add('Captcha dialog: required', () => (
|
|||
challengeStatus: 'required',
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Captcha dialog: pending', () => (
|
||||
CaptchaDialogRequired.story = {
|
||||
name: 'Captcha dialog: required',
|
||||
};
|
||||
|
||||
export const CaptchaDialogPending = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -729,11 +848,13 @@ story.add('Captcha dialog: pending', () => (
|
|||
challengeStatus: 'pending',
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
// Crash report flow
|
||||
CaptchaDialogPending.story = {
|
||||
name: 'Captcha dialog: pending',
|
||||
};
|
||||
|
||||
story.add('Crash report dialog', () => (
|
||||
export const _CrashReportDialog = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -748,11 +869,13 @@ story.add('Crash report dialog', () => (
|
|||
crashReportCount: 42,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
// Choose Group Members
|
||||
_CrashReportDialog.story = {
|
||||
name: 'Crash report dialog',
|
||||
};
|
||||
|
||||
story.add('Choose Group Members: Partial phone number', () => (
|
||||
export const ChooseGroupMembersPartialPhoneNumber = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -767,9 +890,13 @@ story.add('Choose Group Members: Partial phone number', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Choose Group Members: Valid phone number', () => (
|
||||
ChooseGroupMembersPartialPhoneNumber.story = {
|
||||
name: 'Choose Group Members: Partial phone number',
|
||||
};
|
||||
|
||||
export const ChooseGroupMembersValidPhoneNumber = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -784,11 +911,13 @@ story.add('Choose Group Members: Valid phone number', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
// Set group metadata
|
||||
ChooseGroupMembersValidPhoneNumber.story = {
|
||||
name: 'Choose Group Members: Valid phone number',
|
||||
};
|
||||
|
||||
story.add('Group Metadata: No Timer', () => (
|
||||
export const GroupMetadataNoTimer = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -804,9 +933,13 @@ story.add('Group Metadata: No Timer', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Group Metadata: Regular Timer', () => (
|
||||
GroupMetadataNoTimer.story = {
|
||||
name: 'Group Metadata: No Timer',
|
||||
};
|
||||
|
||||
export const GroupMetadataRegularTimer = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -822,9 +955,13 @@ story.add('Group Metadata: Regular Timer', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Group Metadata: Custom Timer', () => (
|
||||
GroupMetadataRegularTimer.story = {
|
||||
name: 'Group Metadata: Regular Timer',
|
||||
};
|
||||
|
||||
export const GroupMetadataCustomTimer = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -840,9 +977,13 @@ story.add('Group Metadata: Custom Timer', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Searching Conversation', () => (
|
||||
GroupMetadataCustomTimer.story = {
|
||||
name: 'Group Metadata: Custom Timer',
|
||||
};
|
||||
|
||||
export const SearchingConversation = (): JSX.Element => (
|
||||
<LeftPane
|
||||
{...useProps({
|
||||
modeSpecificProps: {
|
||||
|
|
@ -857,4 +998,4 @@ story.add('Searching Conversation', () => (
|
|||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import * as React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { number } from '@storybook/addon-knobs';
|
||||
|
||||
|
|
@ -24,7 +23,9 @@ import { fakeAttachment } from '../test-both/helpers/fakeAttachment';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/Lightbox', module);
|
||||
export default {
|
||||
title: 'Components/Lightbox',
|
||||
};
|
||||
|
||||
type OverridePropsMediaItemType = Partial<MediaItemType> & { caption?: string };
|
||||
|
||||
|
|
@ -62,7 +63,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
selectedIndex: number('selectedIndex', overrideProps.selectedIndex || 0),
|
||||
});
|
||||
|
||||
story.add('Multimedia', () => {
|
||||
export const Multimedia = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
media: [
|
||||
{
|
||||
|
|
@ -119,9 +120,9 @@ story.add('Multimedia', () => {
|
|||
});
|
||||
|
||||
return <Lightbox {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Missing Media', () => {
|
||||
export const MissingMedia = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
media: [
|
||||
{
|
||||
|
|
@ -146,9 +147,9 @@ story.add('Missing Media', () => {
|
|||
});
|
||||
|
||||
return <Lightbox {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Single Image', () => (
|
||||
export const SingleImage = (): JSX.Element => (
|
||||
<Lightbox
|
||||
{...createProps({
|
||||
media: [
|
||||
|
|
@ -158,9 +159,9 @@ story.add('Single Image', () => (
|
|||
],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Image with Caption (normal image)', () => (
|
||||
export const ImageWithCaptionNormalImage = (): JSX.Element => (
|
||||
<Lightbox
|
||||
{...createProps({
|
||||
media: [
|
||||
|
|
@ -172,9 +173,13 @@ story.add('Image with Caption (normal image)', () => (
|
|||
],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Image with Caption (all-white image)', () => (
|
||||
ImageWithCaptionNormalImage.story = {
|
||||
name: 'Image with Caption (normal image)',
|
||||
};
|
||||
|
||||
export const ImageWithCaptionAllWhiteImage = (): JSX.Element => (
|
||||
<Lightbox
|
||||
{...createProps({
|
||||
media: [
|
||||
|
|
@ -186,9 +191,13 @@ story.add('Image with Caption (all-white image)', () => (
|
|||
],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Single Video', () => (
|
||||
ImageWithCaptionAllWhiteImage.story = {
|
||||
name: 'Image with Caption (all-white image)',
|
||||
};
|
||||
|
||||
export const SingleVideo = (): JSX.Element => (
|
||||
<Lightbox
|
||||
{...createProps({
|
||||
media: [
|
||||
|
|
@ -199,9 +208,9 @@ story.add('Single Video', () => (
|
|||
],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Single Video w/caption', () => (
|
||||
export const SingleVideoWCaption = (): JSX.Element => (
|
||||
<Lightbox
|
||||
{...createProps({
|
||||
media: [
|
||||
|
|
@ -214,9 +223,13 @@ story.add('Single Video w/caption', () => (
|
|||
],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Unsupported Image Type', () => (
|
||||
SingleVideoWCaption.story = {
|
||||
name: 'Single Video w/caption',
|
||||
};
|
||||
|
||||
export const UnsupportedImageType = (): JSX.Element => (
|
||||
<Lightbox
|
||||
{...createProps({
|
||||
media: [
|
||||
|
|
@ -227,9 +240,9 @@ story.add('Unsupported Image Type', () => (
|
|||
],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Unsupported Video Type', () => (
|
||||
export const UnsupportedVideoType = (): JSX.Element => (
|
||||
<Lightbox
|
||||
{...createProps({
|
||||
media: [
|
||||
|
|
@ -240,9 +253,9 @@ story.add('Unsupported Video Type', () => (
|
|||
],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Unsupported Content', () => (
|
||||
export const UnsupportedContent = (): JSX.Element => (
|
||||
<Lightbox
|
||||
{...createProps({
|
||||
media: [
|
||||
|
|
@ -253,9 +266,9 @@ story.add('Unsupported Content', () => (
|
|||
],
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Custom children', () => (
|
||||
export const CustomChildren = (): JSX.Element => (
|
||||
<Lightbox {...createProps({})} media={[]}>
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -268,13 +281,17 @@ story.add('Custom children', () => (
|
|||
I am middle child
|
||||
</div>
|
||||
</Lightbox>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Forwarding', () => (
|
||||
CustomChildren.story = {
|
||||
name: 'Custom children',
|
||||
};
|
||||
|
||||
export const Forwarding = (): JSX.Element => (
|
||||
<Lightbox {...createProps({})} onForward={action('onForward')} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Conversation Header', () => (
|
||||
export const ConversationHeader = (): JSX.Element => (
|
||||
<Lightbox
|
||||
{...createProps({})}
|
||||
getConversation={() => ({
|
||||
|
|
@ -296,9 +313,9 @@ story.add('Conversation Header', () => (
|
|||
}),
|
||||
]}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('View Once Video', () => (
|
||||
export const ViewOnceVideo = (): JSX.Element => (
|
||||
<Lightbox
|
||||
{...createProps({
|
||||
isViewOnce: true,
|
||||
|
|
@ -311,4 +328,4 @@ story.add('View Once Video', () => (
|
|||
})}
|
||||
isViewOnce
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
|
@ -14,7 +13,9 @@ import { ThemeType } from '../types/Util';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/MainHeader', module);
|
||||
export default {
|
||||
title: 'Components/MainHeader',
|
||||
};
|
||||
|
||||
const requiredText = (name: string, value: string | undefined) =>
|
||||
text(name, value || '');
|
||||
|
|
@ -41,36 +42,36 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
toggleStoriesView: action('toggleStoriesView'),
|
||||
});
|
||||
|
||||
story.add('Basic', () => {
|
||||
export const Basic = (): JSX.Element => {
|
||||
const props = createProps({});
|
||||
|
||||
return <MainHeader {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Name', () => {
|
||||
export const Name = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
name: 'John Smith',
|
||||
title: 'John Smith',
|
||||
});
|
||||
|
||||
return <MainHeader {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Phone Number', () => {
|
||||
export const PhoneNumber = (): JSX.Element => {
|
||||
const props = createProps({
|
||||
name: 'John Smith',
|
||||
phoneNumber: '+15553004000',
|
||||
});
|
||||
|
||||
return <MainHeader {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Update Available', () => {
|
||||
export const UpdateAvailable = (): JSX.Element => {
|
||||
const props = createProps({ hasPendingUpdate: true });
|
||||
|
||||
return <MainHeader {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Stories', () => (
|
||||
export const Stories = (): JSX.Element => (
|
||||
<MainHeader {...createProps({})} areStoriesEnabled />
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import type { PropsType } from './MediaEditor';
|
||||
|
|
@ -13,7 +12,9 @@ import { Stickers, installedPacks } from '../test-both/helpers/getStickerPacks';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/MediaEditor', module);
|
||||
export default {
|
||||
title: 'Components/MediaEditor',
|
||||
};
|
||||
|
||||
const IMAGE_1 = '/fixtures/nathan-anderson-316188-unsplash.jpg';
|
||||
const IMAGE_2 = '/fixtures/tina-rolf-269345-unsplash.jpg';
|
||||
|
|
@ -31,16 +32,18 @@ const getDefaultProps = (): PropsType => ({
|
|||
recentStickers: [Stickers.wide, Stickers.tall, Stickers.abe],
|
||||
});
|
||||
|
||||
story.add('Extra Large', () => <MediaEditor {...getDefaultProps()} />);
|
||||
export const ExtraLarge = (): JSX.Element => (
|
||||
<MediaEditor {...getDefaultProps()} />
|
||||
);
|
||||
|
||||
story.add('Large', () => (
|
||||
export const Large = (): JSX.Element => (
|
||||
<MediaEditor {...getDefaultProps()} imageSrc={IMAGE_1} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Smol', () => (
|
||||
export const Smol = (): JSX.Element => (
|
||||
<MediaEditor {...getDefaultProps()} imageSrc={IMAGE_3} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Portrait', () => (
|
||||
export const Portrait = (): JSX.Element => (
|
||||
<MediaEditor {...getDefaultProps()} imageSrc={IMAGE_4} />
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
|
||||
|
|
@ -12,7 +11,9 @@ import type { PropsType } from './MediaQualitySelector';
|
|||
import { MediaQualitySelector } from './MediaQualitySelector';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
|
||||
const story = storiesOf('Components/MediaQualitySelector', module);
|
||||
export default {
|
||||
title: 'Components/MediaQualitySelector',
|
||||
};
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
|
|
@ -22,14 +23,14 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
onSelectQuality: action('onSelectQuality'),
|
||||
});
|
||||
|
||||
story.add('Standard Quality', () => (
|
||||
export const StandardQuality = (): JSX.Element => (
|
||||
<MediaQualitySelector {...createProps()} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('High Quality', () => (
|
||||
export const HighQuality = (): JSX.Element => (
|
||||
<MediaQualitySelector
|
||||
{...createProps({
|
||||
isHighQuality: true,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
import React from 'react';
|
||||
import { noop } from 'lodash';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
|
|
@ -14,25 +13,37 @@ import { Modal } from './Modal';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/Modal', module);
|
||||
export default {
|
||||
title: 'Components/Modal',
|
||||
};
|
||||
|
||||
const onClose = action('onClose');
|
||||
|
||||
const LOREM_IPSUM =
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.';
|
||||
|
||||
story.add('Bare bones, short', () => <Modal i18n={i18n}>Hello world!</Modal>);
|
||||
export const BareBonesShort = (): JSX.Element => (
|
||||
<Modal i18n={i18n}>Hello world!</Modal>
|
||||
);
|
||||
|
||||
story.add('Bare bones, long', () => (
|
||||
BareBonesShort.story = {
|
||||
name: 'Bare bones, short',
|
||||
};
|
||||
|
||||
export const BareBonesLong = (): JSX.Element => (
|
||||
<Modal i18n={i18n}>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
</Modal>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Bare bones, long, with button', () => (
|
||||
BareBonesLong.story = {
|
||||
name: 'Bare bones, long',
|
||||
};
|
||||
|
||||
export const BareBonesLongWithButton = (): JSX.Element => (
|
||||
<Modal i18n={i18n}>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
|
|
@ -42,18 +53,26 @@ story.add('Bare bones, long, with button', () => (
|
|||
<Button onClick={noop}>Okay</Button>
|
||||
</Modal.ButtonFooter>
|
||||
</Modal>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Title, X button, body, and button footer', () => (
|
||||
BareBonesLongWithButton.story = {
|
||||
name: 'Bare bones, long, with button',
|
||||
};
|
||||
|
||||
export const TitleXButtonBodyAndButtonFooter = (): JSX.Element => (
|
||||
<Modal i18n={i18n} title="Hello world" onClose={onClose} hasXButton>
|
||||
{LOREM_IPSUM}
|
||||
<Modal.ButtonFooter>
|
||||
<Button onClick={noop}>Okay</Button>
|
||||
</Modal.ButtonFooter>
|
||||
</Modal>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Lots of buttons in the footer', () => (
|
||||
TitleXButtonBodyAndButtonFooter.story = {
|
||||
name: 'Title, X button, body, and button footer',
|
||||
};
|
||||
|
||||
export const LotsOfButtonsInTheFooter = (): JSX.Element => (
|
||||
<Modal i18n={i18n} onClose={onClose}>
|
||||
Hello world!
|
||||
<Modal.ButtonFooter>
|
||||
|
|
@ -70,18 +89,26 @@ story.add('Lots of buttons in the footer', () => (
|
|||
<Button onClick={noop}>Okay</Button>
|
||||
</Modal.ButtonFooter>
|
||||
</Modal>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Long body with title', () => (
|
||||
LotsOfButtonsInTheFooter.story = {
|
||||
name: 'Lots of buttons in the footer',
|
||||
};
|
||||
|
||||
export const LongBodyWithTitle = (): JSX.Element => (
|
||||
<Modal i18n={i18n} title="Hello world" onClose={onClose}>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
</Modal>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Long body with title and button', () => (
|
||||
LongBodyWithTitle.story = {
|
||||
name: 'Long body with title',
|
||||
};
|
||||
|
||||
export const LongBodyWithTitleAndButton = (): JSX.Element => (
|
||||
<Modal i18n={i18n} title="Hello world" onClose={onClose}>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
|
|
@ -91,9 +118,13 @@ story.add('Long body with title and button', () => (
|
|||
<Button onClick={noop}>Okay</Button>
|
||||
</Modal.ButtonFooter>
|
||||
</Modal>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Long body with long title and X button', () => (
|
||||
LongBodyWithTitleAndButton.story = {
|
||||
name: 'Long body with title and button',
|
||||
};
|
||||
|
||||
export const LongBodyWithLongTitleAndXButton = (): JSX.Element => (
|
||||
<Modal
|
||||
i18n={i18n}
|
||||
title={LOREM_IPSUM.slice(0, 104)}
|
||||
|
|
@ -105,9 +136,13 @@ story.add('Long body with long title and X button', () => (
|
|||
<p>{LOREM_IPSUM}</p>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
</Modal>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('With sticky buttons long body', () => (
|
||||
LongBodyWithLongTitleAndXButton.story = {
|
||||
name: 'Long body with long title and X button',
|
||||
};
|
||||
|
||||
export const WithStickyButtonsLongBody = (): JSX.Element => (
|
||||
<Modal hasStickyButtons hasXButton i18n={i18n} onClose={onClose}>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
|
|
@ -118,9 +153,13 @@ story.add('With sticky buttons long body', () => (
|
|||
<Button onClick={noop}>Okay</Button>
|
||||
</Modal.ButtonFooter>
|
||||
</Modal>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('With sticky buttons short body', () => (
|
||||
WithStickyButtonsLongBody.story = {
|
||||
name: 'With sticky buttons long body',
|
||||
};
|
||||
|
||||
export const WithStickyButtonsShortBody = (): JSX.Element => (
|
||||
<Modal hasStickyButtons hasXButton i18n={i18n} onClose={onClose}>
|
||||
<p>{LOREM_IPSUM.slice(0, 140)}</p>
|
||||
<Modal.ButtonFooter>
|
||||
|
|
@ -128,9 +167,13 @@ story.add('With sticky buttons short body', () => (
|
|||
<Button onClick={noop}>Okay</Button>
|
||||
</Modal.ButtonFooter>
|
||||
</Modal>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Sticky footer, Lots of buttons', () => (
|
||||
WithStickyButtonsShortBody.story = {
|
||||
name: 'With sticky buttons short body',
|
||||
};
|
||||
|
||||
export const StickyFooterLotsOfButtons = (): JSX.Element => (
|
||||
<Modal hasStickyButtons i18n={i18n} onClose={onClose} title="OK">
|
||||
<p>{LOREM_IPSUM}</p>
|
||||
<Modal.ButtonFooter>
|
||||
|
|
@ -147,4 +190,8 @@ story.add('Sticky footer, Lots of buttons', () => (
|
|||
<Button onClick={noop}>Okay</Button>
|
||||
</Modal.ButtonFooter>
|
||||
</Modal>
|
||||
));
|
||||
);
|
||||
|
||||
StickyFooterLotsOfButtons.story = {
|
||||
name: 'Sticky footer, Lots of buttons',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { NewlyCreatedGroupInvitedContactsDialog } from './NewlyCreatedGroupInvitedContactsDialog';
|
||||
|
|
@ -20,12 +19,11 @@ const conversations: Array<ConversationType> = [
|
|||
getDefaultConversation({ title: 'Marc Barraca' }),
|
||||
];
|
||||
|
||||
const story = storiesOf(
|
||||
'Components/NewlyCreatedGroupInvitedContactsDialog',
|
||||
module
|
||||
);
|
||||
export default {
|
||||
title: 'Components/NewlyCreatedGroupInvitedContactsDialog',
|
||||
};
|
||||
|
||||
story.add('One contact', () => (
|
||||
export const OneContact = (): JSX.Element => (
|
||||
<NewlyCreatedGroupInvitedContactsDialog
|
||||
contacts={[conversations[0]]}
|
||||
getPreferredBadge={() => undefined}
|
||||
|
|
@ -33,9 +31,13 @@ story.add('One contact', () => (
|
|||
onClose={action('onClose')}
|
||||
theme={ThemeType.light}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Two contacts', () => (
|
||||
OneContact.story = {
|
||||
name: 'One contact',
|
||||
};
|
||||
|
||||
export const TwoContacts = (): JSX.Element => (
|
||||
<NewlyCreatedGroupInvitedContactsDialog
|
||||
contacts={conversations}
|
||||
getPreferredBadge={() => undefined}
|
||||
|
|
@ -43,4 +45,8 @@ story.add('Two contacts', () => (
|
|||
onClose={action('onClose')}
|
||||
theme={ThemeType.light}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
TwoContacts.story = {
|
||||
name: 'Two contacts',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
|
@ -41,17 +40,23 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
i18n,
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/OutgoingGiftBadgeModal', module);
|
||||
export default {
|
||||
title: 'Components/OutgoingGiftBadgeModal',
|
||||
};
|
||||
|
||||
story.add('Normal', () => {
|
||||
export const Normal = (): JSX.Element => {
|
||||
return <OutgoingGiftBadgeModal {...createProps()} />;
|
||||
});
|
||||
};
|
||||
|
||||
story.add('Missing badge', () => {
|
||||
export const MissingBadge = (): JSX.Element => {
|
||||
const props = {
|
||||
...createProps(),
|
||||
getPreferredBadge: () => undefined,
|
||||
};
|
||||
|
||||
return <OutgoingGiftBadgeModal {...props} />;
|
||||
});
|
||||
};
|
||||
|
||||
MissingBadge.story = {
|
||||
name: 'Missing badge',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
import type { PropsType } from './Preferences';
|
||||
|
|
@ -159,18 +158,26 @@ const createProps = (): PropsType => ({
|
|||
i18n,
|
||||
});
|
||||
|
||||
const story = storiesOf('Components/Preferences', module);
|
||||
export default {
|
||||
title: 'Components/Preferences',
|
||||
};
|
||||
|
||||
story.add('Preferences', () => <Preferences {...createProps()} />);
|
||||
export const _Preferences = (): JSX.Element => (
|
||||
<Preferences {...createProps()} />
|
||||
);
|
||||
|
||||
story.add('Blocked 1', () => (
|
||||
export const Blocked1 = (): JSX.Element => (
|
||||
<Preferences {...createProps()} blockedCount={1} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Blocked Many', () => (
|
||||
export const BlockedMany = (): JSX.Element => (
|
||||
<Preferences {...createProps()} blockedCount={55} />
|
||||
));
|
||||
);
|
||||
|
||||
story.add('Custom universalExpireTimer', () => (
|
||||
export const CustomUniversalExpireTimer = (): JSX.Element => (
|
||||
<Preferences {...createProps()} universalExpireTimer={9000} />
|
||||
));
|
||||
);
|
||||
|
||||
CustomUniversalExpireTimer.story = {
|
||||
name: 'Custom universalExpireTimer',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
|
|
@ -20,7 +19,9 @@ import { UsernameSaveState } from '../state/ducks/conversationsEnums';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const stories = storiesOf('Components/ProfileEditor', module);
|
||||
export default {
|
||||
title: 'Components/ProfileEditor',
|
||||
};
|
||||
|
||||
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
||||
aboutEmoji: overrideProps.aboutEmoji,
|
||||
|
|
@ -56,7 +57,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
),
|
||||
});
|
||||
|
||||
stories.add('Full Set', () => {
|
||||
export const FullSet = (): JSX.Element => {
|
||||
const [skinTone, setSkinTone] = useState(0);
|
||||
|
||||
return (
|
||||
|
|
@ -71,43 +72,59 @@ stories.add('Full Set', () => {
|
|||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
stories.add('with Full Name', () => (
|
||||
export const WithFullName = (): JSX.Element => (
|
||||
<ProfileEditor
|
||||
{...createProps({
|
||||
familyName: getLastName(),
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('with Custom About', () => (
|
||||
WithFullName.story = {
|
||||
name: 'with Full Name',
|
||||
};
|
||||
|
||||
export const WithCustomAbout = (): JSX.Element => (
|
||||
<ProfileEditor
|
||||
{...createProps({
|
||||
aboutEmoji: '🙏',
|
||||
aboutText: 'Live. Laugh. Love',
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('with Username flag enabled', () => (
|
||||
WithCustomAbout.story = {
|
||||
name: 'with Custom About',
|
||||
};
|
||||
|
||||
export const WithUsernameFlagEnabled = (): JSX.Element => (
|
||||
<ProfileEditor
|
||||
{...createProps({
|
||||
isUsernameFlagEnabled: true,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('with Username flag enabled and username', () => (
|
||||
WithUsernameFlagEnabled.story = {
|
||||
name: 'with Username flag enabled',
|
||||
};
|
||||
|
||||
export const WithUsernameFlagEnabledAndUsername = (): JSX.Element => (
|
||||
<ProfileEditor
|
||||
{...createProps({
|
||||
isUsernameFlagEnabled: true,
|
||||
username: 'unicorn55',
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Username editing, saving', () => (
|
||||
WithUsernameFlagEnabledAndUsername.story = {
|
||||
name: 'with Username flag enabled and username',
|
||||
};
|
||||
|
||||
export const UsernameEditingSaving = (): JSX.Element => (
|
||||
<ProfileEditor
|
||||
{...createProps({
|
||||
isUsernameFlagEnabled: true,
|
||||
|
|
@ -115,9 +132,13 @@ stories.add('Username editing, saving', () => (
|
|||
username: 'unicorn55',
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Username editing, username taken', () => (
|
||||
UsernameEditingSaving.story = {
|
||||
name: 'Username editing, saving',
|
||||
};
|
||||
|
||||
export const UsernameEditingUsernameTaken = (): JSX.Element => (
|
||||
<ProfileEditor
|
||||
{...createProps({
|
||||
isUsernameFlagEnabled: true,
|
||||
|
|
@ -125,9 +146,13 @@ stories.add('Username editing, username taken', () => (
|
|||
username: 'unicorn55',
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Username editing, username malformed', () => (
|
||||
UsernameEditingUsernameTaken.story = {
|
||||
name: 'Username editing, username taken',
|
||||
};
|
||||
|
||||
export const UsernameEditingUsernameMalformed = (): JSX.Element => (
|
||||
<ProfileEditor
|
||||
{...createProps({
|
||||
isUsernameFlagEnabled: true,
|
||||
|
|
@ -135,9 +160,13 @@ stories.add('Username editing, username malformed', () => (
|
|||
username: 'unicorn55',
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
stories.add('Username editing, general error', () => (
|
||||
UsernameEditingUsernameMalformed.story = {
|
||||
name: 'Username editing, username malformed',
|
||||
};
|
||||
|
||||
export const UsernameEditingGeneralError = (): JSX.Element => (
|
||||
<ProfileEditor
|
||||
{...createProps({
|
||||
isUsernameFlagEnabled: true,
|
||||
|
|
@ -145,4 +174,8 @@ stories.add('Username editing, general error', () => (
|
|||
username: 'unicorn55',
|
||||
})}
|
||||
/>
|
||||
));
|
||||
);
|
||||
|
||||
UsernameEditingGeneralError.story = {
|
||||
name: 'Username editing, general error',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,14 +3,15 @@
|
|||
|
||||
import * as React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import type { PropsType } from './ProgressDialog';
|
||||
import { ProgressDialog } from './ProgressDialog';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
||||
const story = storiesOf('Components/ProgressDialog', module);
|
||||
export default {
|
||||
title: 'Components/ProgressDialog',
|
||||
};
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
|
|
@ -18,8 +19,8 @@ const createProps = (): PropsType => ({
|
|||
i18n,
|
||||
});
|
||||
|
||||
story.add('Normal', () => {
|
||||
export const Normal = (): JSX.Element => {
|
||||
const props = createProps();
|
||||
|
||||
return <ProgressDialog {...props} />;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue