@messenger-box/platform-browser 10.0.3-alpha.17 → 10.0.3-alpha.171

package/src/widgets/users/avatars/avatars.scss

@@ -1,64 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-.Avatars {
-    display: inline-flex;
-    flex-flow: nowrap;
-    align-items: center;
-    justify-content: center;
-
-    &.Avatars___xxs {
-        --offset: -4px;
-        --border-width: 1px;
-    }
-
-    &.Avatars___xs {
-        --offset: -5px;
-        --border-width: 1px;
-    }
-
-    &.Avatars___sm {
-        --offset: -5px;
-        --border-width: 1px;
-    }
-
-    &.Avatars___md {
-        --offset: -6px;
-        --border-width: 1.5px;
-    }
-
-    &.Avatars___lg {
-        --offset: -7px;
-        --border-width: 2px;
-    }
-
-    &.Avatars___xl {
-        --offset: -10px;
-        --border-width: 2px;
-    }
-
-    &.Avatars___xxl {
-        --offset: -26px;
-        --border-width: 5px;
-    }
-
-    .Avatar {
-        border: var(--border-width) solid rgba(var(--center-channel-bg-rgb), 1);
-
-        &:not(:first-child) {
-            margin-left: var(--offset);
-        }
-
-        &:hover,
-        &:focus {
-            z-index: 1;
-            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.08));
-        }
-
-        &.Avatar-plain {
-            &[data-content^='+']::before {
-                text-indent: -4%;
-            }
-        }
-    }
-}

package/src/widgets/users/avatars/avatars.test.tsx

@@ -1,184 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import * as React from 'react';
-
-// import {mount} from 'enzyme';
-
-// jest.mock('mattermost-redux/actions/users', () => {
-//     return {
-//         ...jest.requireActual('mattermost-redux/actions/users'),
-//         getMissingProfilesByIds: jest.fn((ids) => {
-//             return {
-//                 type: 'MOCK_GET_MISSING_PROFILES_BY_IDS',
-//                 data: ids,
-//             };
-//         }),
-//     };
-// });
-
-// import {mockStore} from 'tests/test_store';
-
-// import SimpleTooltip from 'components/widgets/simple_tooltip';
-
-// import Avatar from '../avatar';
-
-// import Avatars from './avatars';
-
-// describe('components/widgets/users/Avatars', () => {
-//     const state = {
-//         entities: {
-//             general: {
-//                 config: {},
-//             },
-//             users: {
-//                 currentUserId: 'uid',
-//                 profiles: {
-//                     1: {
-//                         id: '1',
-//                         username: 'first.last1',
-//                         nickname: 'nickname1',
-//                         first_name: 'First1',
-//                         last_name: 'Last1',
-//                         last_picture_update: '1620680333191',
-
-//                     },
-//                     2: {
-//                         id: '2',
-//                         username: 'first.last2',
-//                         nickname: 'nickname2',
-//                         first_name: 'First2',
-//                         last_name: 'Last2',
-//                         last_picture_update: '1620680333191',
-//                     },
-//                     3: {
-//                         id: '3',
-//                         username: 'first.last3',
-//                         nickname: 'nickname3',
-//                         first_name: 'First3',
-//                         last_name: 'Last3',
-//                         last_picture_update: '1620680333191',
-//                     },
-//                     4: {
-//                         id: '4',
-//                         username: 'first.last4',
-//                         nickname: 'nickname4',
-//                         first_name: 'First4',
-//                         last_name: 'Last4',
-//                         last_picture_update: '1620680333191',
-//                     },
-//                     5: {
-//                         id: '5',
-//                         username: 'first.last5',
-//                         nickname: 'nickname5',
-//                         first_name: 'First5',
-//                         last_name: 'Last5',
-//                         last_picture_update: '1620680333191',
-//                     },
-//                 },
-//             },
-//             teams: {
-//                 currentTeamId: 'tid',
-//             },
-//             preferences: {
-//                 myPreferences: {},
-//             },
-//         },
-//     };
-
-//     test('should support userIds', () => {
-//         const {mountOptions} = mockStore(state);
-//         const wrapper = mount(
-//             <Avatars
-//                 size='xl'
-//                 userIds={[
-//                     '1',
-//                     '2',
-//                     '3',
-//                 ]}
-//             />,
-//             mountOptions,
-//         );
-//         expect(wrapper).toMatchSnapshot();
-//         expect(wrapper.find(Avatar).find({url: '/api/v4/users/1/image?_=1620680333191'}).exists()).toBe(true);
-//         expect(wrapper.find(Avatar).find({url: '/api/v4/users/2/image?_=1620680333191'}).exists()).toBe(true);
-//         expect(wrapper.find(Avatar).find({url: '/api/v4/users/3/image?_=1620680333191'}).exists()).toBe(true);
-//         expect(wrapper.find(Avatar).length).toBe(3);
-//     });
-
-//     test('should properly count overflow', () => {
-//         const {mountOptions} = mockStore(state);
-
-//         const wrapper = mount(
-//             <Avatars
-//                 size='xl'
-//                 userIds={[
-//                     '1',
-//                     '2',
-//                     '3',
-//                     '4',
-//                     '5',
-//                 ]}
-//             />,
-//             mountOptions,
-//         );
-
-//         expect(wrapper).toMatchSnapshot();
-//         expect(wrapper.find(Avatar).find({url: '/api/v4/users/1/image?_=1620680333191'}).exists()).toBe(true);
-//         expect(wrapper.find(Avatar).find({url: '/api/v4/users/2/image?_=1620680333191'}).exists()).toBe(true);
-//         expect(wrapper.find(Avatar).find({url: '/api/v4/users/3/image?_=1620680333191'}).exists()).toBe(true);
-//         expect(wrapper.find(Avatar).find({url: '/api/v4/users/4/image?_=1620680333191'}).exists()).toBe(false);
-//         expect(wrapper.find(Avatar).find({url: '/api/v4/users/5/image?_=1620680333191'}).exists()).toBe(false);
-
-//         expect(wrapper.find(Avatar).find({text: '+2'}).exists()).toBe(true);
-//     });
-
-//     test('should not duplicate displayed users in overflow tooltip', () => {
-//         const {mountOptions} = mockStore(state);
-
-//         const wrapper = mount(
-//             <Avatars
-//                 size='xl'
-//                 userIds={[
-//                     '1',
-//                     '2',
-//                     '3',
-//                     '4',
-//                     '5',
-//                 ]}
-//             />,
-//             mountOptions,
-//         );
-
-//         expect(wrapper.find(SimpleTooltip).find({id: 'names-overflow'}).prop('content')).toBe('first.last4, first.last5');
-//     });
-
-//     test('should fetch missing users', () => {
-//         const {store, mountOptions} = mockStore(state);
-
-//         const wrapper = mount(
-//             <Avatars
-//                 size='xl'
-//                 userIds={[
-//                     '1',
-//                     '6',
-//                     '7',
-//                     '2',
-//                     '8',
-//                     '9',
-//                 ]}
-//             />,
-//             mountOptions,
-//         );
-
-//         expect(wrapper).toMatchSnapshot();
-//         expect(store.getActions()).toEqual([
-//             {type: 'MOCK_GET_MISSING_PROFILES_BY_IDS', data: ['1', '6', '7', '2', '8', '9']},
-//         ]);
-
-//         expect(wrapper.find(Avatar).find({url: '/api/v4/users/1/image?_=1620680333191'}).exists()).toBe(true);
-//         expect(wrapper.find(Avatar).find({url: '/api/v4/users/6/image?_=0'}).exists()).toBe(true);
-//         expect(wrapper.find(Avatar).find({url: '/api/v4/users/7/image?_=0'}).exists()).toBe(true);
-//         expect(wrapper.find(SimpleTooltip).find({id: 'names-overflow'}).prop('content')).toBe('first.last2, Someone, Someone');
-//     });
-// });

package/src/widgets/users/avatars/avatars.tsx

@@ -1,146 +0,0 @@
-// @ts-nocheck
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, { memo, ComponentProps, CSSProperties, useMemo, useEffect } from 'react';
-import { useIntl } from 'react-intl';
-import { useSelector, useDispatch } from 'react-redux';
-import tinycolor from 'tinycolor2';
-
-import { $ID } from '../../../packages/types/utilities';
-// import { UserProfile } from 'mattermost-redux/types/users';
-// import { getUser as selectUser, makeDisplayNameGetter } from 'mattermost-redux/selectors/entities/users';
-// import { getTheme } from 'mattermost-redux/selectors/entities/preferences';
-
-// import { GlobalState } from 'types/store';
-
-import { t } from '../../../utils/i18n';
-import { imageURLForUser } from '../../../utils/utils';
-
-import SimpleTooltip, { useSynchronizedImmediate } from '../../../widgets/simple_tooltip';
-import Avatar from '../../../widgets/users/avatar';
-
-// import './avatars.scss';
-// import {getMissingProfilesByIds} from 'mattermost-redux/actions/users';
-
-type Props = {
-    userIds: Array<$ID<any>>;
-    totalUsers?: number;
-    breakAt?: number;
-    size?: ComponentProps<typeof Avatar>['size'];
-    fetchMissingUsers?: boolean;
-};
-
-const OTHERS_DISPLAY_LIMIT = 99;
-
-function countMeta<T>(
-    items: T[],
-    total = items.length,
-): [T[], T[], { overflowUnnamedCount: number; nonDisplayCount: number }] {
-    const breakAt = Math.max(items.length, total) > 4 ? 3 : 4;
-
-    const displayItems = items.slice(0, breakAt);
-    const overflowItems = items.slice(breakAt);
-
-    const overflowUnnamedCount = Math.max(total - displayItems.length - overflowItems.length, 0);
-    const nonDisplayCount = overflowItems.length + overflowUnnamedCount;
-
-    return [displayItems, overflowItems, { overflowUnnamedCount, nonDisplayCount }];
-}
-
-// const displayNameGetter = makeDisplayNameGetter();
-
-function UserAvatar({
-    userId,
-    overlayProps,
-    ...props
-}: {
-    userId: $ID<any>;
-    overlayProps: Partial<ComponentProps<typeof SimpleTooltip>>;
-} & ComponentProps<typeof Avatar>) {
-    // const user = useSelector((state: GlobalState) => selectUser(state, userId)) as UserProfile | undefined;
-    // const name = useSelector((state: GlobalState) => displayNameGetter(state, true)(user));
-
-    return (
-        <SimpleTooltip id={`name-${userId}`} content={() => <h1>name</h1>} {...overlayProps}>
-            <Avatar tabIndex={0} {...props} />
-        </SimpleTooltip>
-    );
-}
-
-function Avatars({ size, userIds, totalUsers, fetchMissingUsers = true }: Props) {
-    const { formatMessage } = useIntl();
-    const dispatch = useDispatch();
-    const [overlayProps, setImmediate] = useSynchronizedImmediate();
-    const [displayUserIds, overflowUserIds, { overflowUnnamedCount, nonDisplayCount }] = countMeta(userIds, totalUsers);
-    // const overflowNames = useSelector((state: GlobalState) => {
-    //     return overflowUserIds.map((userId) => displayNameGetter(state, true)(selectUser(state, userId))).join(', ');
-    // });
-
-    // const { centerChannelBg, centerChannelColor } = useSelector(getTheme);
-    // const avatarStyle: CSSProperties = useMemo(
-    //     () => ({
-    //         background: tinycolor.mix(centerChannelBg, centerChannelColor, 8).toRgbString(),
-    //     }),
-    //     [centerChannelBg, centerChannelColor],
-    // );
-
-    // useEffect(() => {
-    //     if (fetchMissingUsers) {
-    //         dispatch(getMissingProfilesByIds(userIds));
-    //     }
-    // }, [fetchMissingUsers, userIds]);
-
-    return (
-        <div className={`Avatars Avatars___${size}`} onMouseLeave={() => setImmediate(false)}>
-            {displayUserIds.map((id) => (
-                <UserAvatar
-                    // style={avatarStyle}
-                    key={id}
-                    userId={id}
-                    size={size}
-                    tabIndex={0}
-                    overlayProps={overlayProps}
-                />
-            ))}
-            {Boolean(nonDisplayCount) && (
-                <SimpleTooltip
-                    id={'names-overflow'}
-                    {...overlayProps}
-                    content={
-                        overflowUserIds.length
-                            ? formatMessage(
-                                  {
-                                      id: t('avatars.overflowUsers'),
-                                      defaultMessage:
-                                          '{overflowUnnamedCount, plural, =0 {{names}} =1 {{names} and one other} other {{names} and # others}}',
-                                  },
-                                  {
-                                      overflowUnnamedCount,
-                                    //   names: overflowNames,
-                                  },
-                              )
-                            : formatMessage(
-                                  {
-                                      id: t('avatars.overflowUnnamedOnly'),
-                                      defaultMessage: '{overflowUnnamedCount, plural, =1 {one other} other {# others}}',
-                                  },
-                                  { overflowUnnamedCount },
-                              )
-                    }
-                >
-                    <Avatar
-                        // style={avatarStyle}
-                        size={size}
-                        tabIndex={0}
-                        text={
-                            nonDisplayCount > OTHERS_DISPLAY_LIMIT ? `${OTHERS_DISPLAY_LIMIT}+` : `+${nonDisplayCount}`
-                        }
-                    />
-                </SimpleTooltip>
-            )}
-        </div>
-    );
-}
-
-export default memo(Avatars);

package/src/widgets/users/avatars/index.ts

@@ -1,4 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-export {default} from './avatars';

package/src/widgets/users/users.stories.tsx

@@ -1,37 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import React, {ComponentProps} from 'react';
-
-// import {storiesOf} from '@storybook/react';
-// import {withKnobs, text} from '@storybook/addon-knobs';
-
-// import StoryGrid from 'storybook/story_grid';
-// import StoryBox from 'storybook/story_box';
-
-// import Avatar from './avatar';
-
-// storiesOf('Widgets/Users Info', module).
-//     addDecorator(withKnobs).
-//     add('avatar, per size', () => {
-//         const sizes: Array<ComponentProps<typeof Avatar>['size']> = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
-//         const url = text('Image url', './api/v4/users/1/image?_=0');
-//         const username = text('Username', 'jesus.espino');
-//         return (
-//             <StoryGrid>
-//                 {sizes.map((size) => (
-//                     <StoryBox
-//                         key={size}
-//                         label={`size: ${size}`}
-//                     >
-
-//                         <Avatar
-//                             size={size}
-//                             username={username}
-//                             url={url}
-//                         />
-//                     </StoryBox>
-//                 ))}
-//             </StoryGrid>
-//         );
-//     });

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "lib",
-    "declarationDir": "lib",
-    "declaration": true,
-    "declarationMap": true,
-    "skipLibCheck": true,
-    "types": ["@types/node", "@types/jest", "../../../typings"]
-  },
-  "exclude": ["../../../node_modules", "node_modules", "lib", "dist", "webpack.config.js", "rollup.config.mjs"],
-  "include": ["src", "./typings/*.d.ts", "type.d.ts"]
-}

package/webpack.config.js

@@ -1,58 +0,0 @@
-const nodeExternals = require('webpack-node-externals');
-const webpack = require('webpack');
-const path = require('path');
-const fs = require('fs');
-
-const webpackOpts = {
-    mode: 'development',
-    entry: './src/index.tsx',
-    target: 'node',
-    output: {
-        path: path.join(__dirname, 'lib'),
-        filename: 'index.js',
-        libraryTarget: 'commonjs2',
-    },
-    node: {
-        __dirname: false,
-    },
-    resolve: {
-        extensions: ['.ts', '.tsx', '.graphql', '.gql'],
-    },
-    plugins: [
-        new webpack.LoaderOptionsPlugin({
-            options: {
-                test: /\.tsx?$/,
-                ts: {
-                    compiler: 'typescript',
-                    configFile: 'tsconfig.json',
-                },
-                tslint: {
-                    emitErrors: true,
-                    failOnHint: true,
-                },
-            },
-        }),
-    ],
-    devtool: 'source-map',
-    module: {
-        rules: [
-            {
-                test: /\.tsx?$/,
-                use: 'ts-loader',
-            },
-            {
-                test: /\.graphql?/,
-                exclude: /node_modules/,
-                use: 'raw-loader',
-            },
-            {
-                test: /\.(gql)$/,
-                exclude: /node_modules/,
-                use: ['graphql-tag/loader'],
-            },
-        ],
-    },
-    externals: [nodeExternals({ modulesDir: '../../../node_modules' }), nodeExternals()],
-};
-
-module.exports = webpackOpts;