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

Storybook: Basic messages and messages with reactions

Browse source
This commit is contained in:
Ken Powers 2020-02-07 14:07:22 -05:00 committed by GitHub
parent 43b5a9b5a4
commit 38c7fa3da6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 1449 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
.babelrc.js
View file

@ -1,8 +1,15 @@
module.exports = {
presets: ['@babel/preset-react', '@babel/preset-typescript'],
// Detects the type of file being babel'd (either esmodule or commonjs)
sourceType: 'unambiguous',
plugins: [
'react-hot-loader/babel',
'lodash',
'@babel/plugin-proposal-class-properties',
],
// This plugin converts commonjs to esmodules which is required for
// importing commonjs modules from esmodules in storybook. As a part of
// converting to TypeScript we should use esmodules and can eventually
// remove this plugin
process.env.SIGNAL_ENV === 'storybook' && '@babel/transform-runtime',
].filter(Boolean),
};

75
.storybook/config.js
View file

@ -1,27 +1,83 @@
import * as React from 'react';
import { addDecorator, configure } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
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 { ThemedProvider } from '../ts/components/PopperRootContext';
import { ClassyProvider } from '../ts/components/PopperRootContext';
const optionsConfig = {
display: 'inline-radio',
};
const makeThemeKnob = pane =>
optionsKnob(
`${pane} Pane Theme`,
{ Light: '', Dark: classnames('dark-theme', styles.darkTheme) },
'',
optionsConfig,
`${pane} Pane`
);
const makeDeviceThemeKnob = pane =>
optionsKnob(
`${pane} Pane Device Theme`,
{ Android: '', iOS: 'ios-theme' },
'',
optionsConfig,
`${pane} Pane`
);
const makeModeKnob = pane =>
optionsKnob(
`${pane} Pane Mode`,
{ Mouse: 'mouse-mode', Keyboard: 'keyboard-mode' },
'mouse-mode',
optionsConfig,
`${pane} Pane`
);
addDecorator(withKnobs);
addDecorator((storyFn /* , context */) => {
const contents = storyFn();
const firstPaneTheme = makeThemeKnob('First');
const firstPaneDeviceTheme = makeDeviceThemeKnob('First');
const firstPaneMode = makeModeKnob('First');
const secondPane = boolean('Second Pane Active', false, 'Second Pane');
const secondPaneTheme = makeThemeKnob('Second');
const secondPaneDeviceTheme = makeDeviceThemeKnob('Second');
const secondPaneMode = makeModeKnob('Second');
return (
<div className={styles.container}>
<div className={styles.panel}>{contents}</div>
<ThemedProvider themes={['dark']}>
<ClassyProvider themes={['dark']}>
<div
className={classnames(styles.darkTheme, styles.panel, 'dark-theme')}
className={classnames(
styles.panel,
firstPaneTheme,
firstPaneDeviceTheme,
firstPaneMode
)}
>
{contents}
</div>
</ThemedProvider>
</ClassyProvider>
{secondPane ? (
<div
className={classnames(
styles.panel,
secondPaneTheme,
secondPaneDeviceTheme,
secondPaneMode
)}
>
{contents}
</div>
) : null}
</div>
);
});
@ -39,4 +95,11 @@ configure(() => {
/\.stories\.tsx?$/
);
stickerCreatorContext.keys().forEach(f => stickerCreatorContext(f));
// Load main app stories
const tsComponentsContext = require.context(
'../ts/components',
true,
/\.stories.tsx?$/
);
tsComponentsContext.keys().forEach(f => tsComponentsContext(f));
}, module);

2
.storybook/preview-head.html
View file

@ -1,2 +1,2 @@
<!-- prettier-ignore -->
<link rel="stylesheet" href="../stylesheets/manifest_bridge.css" />
<link rel="stylesheet" href="../stylesheets/manifest.css" />

11
.storybook/styles.scss
View file

@ -1,3 +1,5 @@
@import '../stylesheets/variables';
.container {
display: flex;
flex-direction: row;
@ -9,13 +11,12 @@
.panel {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 16px;
height: 100%;
overflow: auto;
}
.dark-theme {
background-color: #17191d;
background-color: $color-gray-95;
color: $color-gray-05;
}

3
.storybook/webpack.config.js
View file

@ -6,8 +6,9 @@ module.exports = ({ config }) => {
config.module.rules.unshift(
{
test: /\.tsx?$/,
test: /\.[jt]sx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.scss$/,

3
package.json
View file

@ -46,7 +46,7 @@
"dev:grunt": "yarn grunt dev",
"dev:webpack": "NODE_ENV=development webpack-dev-server --hot",
"dev:typed-scss": "yarn build:typed-scss -w",
"dev:storybook": "start-storybook -p 6006 -s ./",
"dev:storybook": "SIGNAL_ENV=storybook start-storybook -p 6006 -s ./",
"build": "run-s --print-label build:grunt build:typed-scss build:webpack build:release",
"build:dev": "run-s --print-label build:grunt build:typed-scss build:webpack",
"build:grunt": "yarn grunt",
@ -148,6 +148,7 @@
"devDependencies": {
"@babel/core": "7.7.7",
"@babel/plugin-proposal-class-properties": "7.7.4",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-react": "7.7.4",
"@babel/preset-typescript": "7.7.7",
"@storybook/addon-actions": "5.1.11",

7
styleguide.config.js
View file

@ -10,36 +10,43 @@ module.exports = {
name: 'Components',
description: '',
components: 'ts/components/[^_]*.tsx',
ignore: ['**/*.stories.*'],
},
{
name: 'Conversation',
description: 'Everything necessary to render a conversation',
components: 'ts/components/conversation/[^_]*.tsx',
ignore: ['**/*.stories.*'],
},
{
name: 'Emoji',
description: 'All components related to emojis',
components: 'ts/components/emoji/[^_]*.tsx',
ignore: ['**/*.stories.*'],
},
{
name: 'Media Gallery',
description: 'Display media and documents in a conversation',
components: 'ts/components/conversation/media-gallery/[^_]*.tsx',
ignore: ['**/*.stories.*'],
},
{
name: 'Stickers',
description: 'All components related to stickers',
components: 'ts/components/stickers/[^_]*.tsx',
ignore: ['**/*.stories.*'],
},
{
name: 'Utility',
description: 'Utility components used across the application',
components: 'ts/components/utility/[^_]*.tsx',
ignore: ['**/*.stories.*'],
},
{
name: 'Test',
description: 'Components only used for testing',
components: 'ts/styleguide/**/*.tsx',
ignore: ['**/*.stories.*'],
},
],
context: {

4
stylesheets/_modules.scss
View file

@ -6724,7 +6724,9 @@ button.module-image__border-overlay:focus {
}
.module-emoji {
display: block;
display: flex;
justify-content: center;
align-items: center;
color: transparent;
font-family: auto;

18
ts/components/PopperRootContext.tsx
View file

@ -1,12 +1,12 @@
import * as React from 'react';
const makeApi = (themes?: Array<string>) => ({
const makeApi = (classes?: Array<string>) => ({
createRoot: () => {
const div = document.createElement('div');
if (themes) {
themes.forEach(theme => {
div.classList.add(`${theme}-theme`);
if (classes) {
classes.forEach(theme => {
div.classList.add(theme);
});
}
@ -21,16 +21,16 @@ const makeApi = (themes?: Array<string>) => ({
export const PopperRootContext = React.createContext(makeApi());
export type ThemedProviderProps = {
themes?: Array<string>;
export type ClassyProviderProps = {
classes?: Array<string>;
children?: React.ReactChildren;
};
export const ThemedProvider: React.FunctionComponent<ThemedProviderProps> = ({
themes,
export const ClassyProvider: React.FunctionComponent<ClassyProviderProps> = ({
classes,
children,
}) => {
const api = React.useMemo(() => makeApi(themes), [themes]);
const api = React.useMemo(() => makeApi(classes), [classes]);
return (
<PopperRootContext.Provider value={api}>

1302
ts/components/conversation/Message.stories.tsx Normal file
View file

File diff suppressed because it is too large Load diff

14
ts/components/conversation/Message.tsx
View file

@ -65,9 +65,9 @@ export type PropsData = {
conversationId: string;
text?: string;
textPending?: boolean;
isSticker: boolean;
isSelected: boolean;
isSelectedCounter: number;
isSticker?: boolean;
isSelected?: boolean;
isSelectedCounter?: number;
interactionMode: 'mouse' | 'keyboard';
direction: 'incoming' | 'outgoing';
timestamp: number;
@ -94,7 +94,7 @@ export type PropsData = {
};
previews: Array<LinkPreviewType>;
authorAvatarPath?: string;
isExpired: boolean;
isExpired?: boolean;
isTapToView?: boolean;
isTapToViewExpired?: boolean;
@ -107,7 +107,7 @@ export type PropsData = {
selectedReaction?: string;
};
type PropsHousekeeping = {
export type PropsHousekeeping = {
i18n: LocalizerType;
disableMenu?: boolean;
disableScroll?: boolean;
@ -158,8 +158,8 @@ interface State {
expired: boolean;
imageBroken: boolean;
isSelected: boolean;
prevSelectedCounter: number;
isSelected?: boolean;
prevSelectedCounter?: number;
pickedReaction?: string;
reactionViewerRoot: HTMLDivElement | null;

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

@ -101,7 +101,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
return (
<div {...rest} ref={ref} className="module-reaction-viewer">
<header className="module-reaction-viewer__header">
{...renderedEmojis
{renderedEmojis
.filter(e => e === 'all' || Boolean(grouped[e]))
.map((cat, index) => {
const re = grouped[cat] || reactions;

1
tsconfig.json
View file

@ -33,6 +33,7 @@
// Module Resolution Options
"moduleResolution": "node", // Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
"resolveJsonModule": true,
// "baseUrl": "./", // Base directory to resolve non-absolute module names.
// "paths": {}, // A series of entries which re-map imports to lookup locations relative to the 'baseUrl'.
// "rootDirs": [], // List of root folders whose combined content represents the structure of the project at runtime.

31
yarn.lock
View file

@ -226,6 +226,13 @@
dependencies:
"@babel/types" "^7.0.0"
"@babel/helper-module-imports@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
integrity sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==
dependencies:
"@babel/types" "^7.8.3"
"@babel/helper-module-transforms@^7.1.0", "@babel/helper-module-transforms@^7.4.4":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.5.5.tgz#f84ff8a09038dcbca1fd4355661a500937165b4a"
@ -257,6 +264,11 @@
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
"@babel/helper-plugin-utils@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
"@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
@ -811,6 +823,16 @@
resolve "^1.8.1"
semver "^5.5.1"
"@babel/plugin-transform-runtime@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.8.3.tgz#c0153bc0a5375ebc1f1591cb7eea223adea9f169"
integrity sha512-/vqUt5Yh+cgPZXXjmaG9NT8aVfThKk7G4OqkVhrXqwsC5soMn/qTCxs36rZ2QFhpfTJcjw4SNDIZ4RUb8OL4jQ==
dependencies:
"@babel/helper-module-imports" "^7.8.3"
"@babel/helper-plugin-utils" "^7.8.3"
resolve "^1.8.1"
semver "^5.5.1"
"@babel/plugin-transform-shorthand-properties@^7.2.0":
version "7.2.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.2.0.tgz#6333aee2f8d6ee7e28615457298934a3b46198f0"
@ -1071,6 +1093,15 @@
lodash "^4.17.13"
to-fast-properties "^2.0.0"
"@babel/types@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
integrity sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==
dependencies:
esutils "^2.0.2"
lodash "^4.17.13"
to-fast-properties "^2.0.0"
"@develar/schema-utils@~2.1.0":
version "2.1.0"
resolved "https://registry.yarnpkg.com/@develar/schema-utils/-/schema-utils-2.1.0.tgz#eceb1695bfbed6f6bb84666d5d3abe5e1fd54e17"