4 |
5 | ## Monorepo
6 |
7 | - [Plugin](./packages/plugin/README.md)
8 | - [Web-Client](./packages/web/README.md)
9 | - [Server](./packages/server/README.md)
10 |
11 | ## Development
12 |
13 | You can simple start or build all packages
14 |
15 | ```bash
16 | # start
17 | yarn start:server && yarn start:plugin && yarn start:web
18 | # build
19 | yarn build:server && yarn build:plugin && yarn build:web
20 | ```
21 |
22 | ## Description
23 |
24 | This is the monorepo of Figma-Chat. Inside the `packages` folder you will find all projects.
25 |
26 | ### Sound
27 |
28 | Thanks to [https://notificationsounds.com/notification-sounds/when-604](https://notificationsounds.com/notification-sounds/when-604)
29 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "figma-chat",
3 | "version": "5.0.1",
4 | "description": "",
5 | "private": true,
6 | "scripts": {
7 | "build": "yarn build:plugin && yarn build:web && yarn build:server",
8 | "start:plugin": "yarn workspace plugin start",
9 | "start:web": "yarn workspace web start",
10 | "start:server": "yarn workspace server dev",
11 | "build:plugin": "yarn workspace plugin build",
12 | "build:web": "yarn workspace web build",
13 | "build:server": "yarn workspace server build",
14 | "lint": "yarn workspace plugin lint && yarn workspace web lint && yarn workspace shared lint && yarn workspace server lint",
15 | "version": "npx conventional-changelog-cli -p karma -i CHANGELOG.md -s -r 0 && git add ."
16 | },
17 | "author": "Philip Stapelfeldt navigate(to)}
24 | className={match ? `${className} active` : className}
25 | >
26 | {children}
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/packages/shared/src/components/GiphyGrid.tsx:
--------------------------------------------------------------------------------
1 | import { GiphyFetch } from '@giphy/js-fetch-api';
2 | import { Grid } from '@giphy/react-components';
3 | import { observer } from 'mobx-react-lite';
4 | import React, { FunctionComponent, useMemo, useRef } from 'react';
5 | import styled from 'styled-components';
6 |
7 | import { GiphyLogo } from '@fc/shared/assets/GiphyLogo';
8 |
9 | import { GiphyCloseIcon } from '../assets/icons/GiphyCloseIcon';
10 | import { useSocket } from '../utils/SocketProvider';
11 | import { useOnClickOutside } from '../utils/hooks/use-on-outside-click';
12 |
13 | const gf = new GiphyFetch('omj1iPoq5H5GTi2Xjz2E9NFCcVqGLuPZ');
14 |
15 | interface GiphyGridProps {
16 | store: any;
17 | setTextMessage: (text: string) => void;
18 | textMessage: string;
19 | }
20 |
21 | export const GiphyGrid: FunctionComponent
43 |
45 | {searchTerm}
46 | props.setTextMessage('')}>
47 |
49 | {
67 | const message = {
68 | giphy: gif.id,
69 | external: !props.store.addMessage,
70 | };
71 |
72 | if (socket) {
73 | if (props.store.addMessage) {
74 | props.store.addMessage({ message }, socket);
75 | } else {
76 | props.store.addLocalMessage({ message }, socket);
77 | }
78 | }
79 |
80 | props.setTextMessage('');
81 | }}
82 | />
83 | )}
84 | />
85 |
86 |
87 | ) : null;
88 | }
89 | );
90 |
91 | const GridWrapper = styled.div`
92 | overflow: auto;
93 | padding-bottom: 9px;
94 | `;
95 |
96 | const Empty = styled.div`
97 | overflow: auto;
98 | position: absolute;
99 | left: 50%;
100 | top: 50%;
101 | transform: translate(-50%, -50%);
102 | font-size: 15px;
103 | `;
104 |
105 | const GiphyHeader = styled.div`
106 | display: flex;
107 | padding: 0 0 12px;
108 | align-items: center;
109 | .logo {
110 | margin-left: 5px;
111 | svg {
112 | width: 70px;
113 | height: 15px;
114 | }
115 | }
116 | .searchterm {
117 | color: #4c4c4c;
118 | margin-left: 6px;
119 | }
120 | .close {
121 | margin-left: auto;
122 | cursor: pointer;
123 | }
124 | `;
125 |
126 | const Giphy = styled.div`
127 | position: absolute;
128 | z-index: 15;
129 | bottom: 54px;
130 | transform: translateX(-50%);
131 | left: 50%;
132 | color: #fff;
133 | display: grid;
134 | grid-template-rows: 36px 1fr;
135 | width: 315px;
136 | height: 250px;
137 | background-color: #000;
138 | border-radius: 14px;
139 | padding: 9px 9px 0;
140 | .overlay {
141 | position: absolute;
142 | left: 0;
143 | top: 0;
144 | right: 0;
145 | bottom: 0;
146 | cursor: pointer;
147 | transition: all 0.3s;
148 | &:hover {
149 | background-color: rgba(0, 0, 0, 0.4);
150 | }
151 | }
152 | `;
153 |
--------------------------------------------------------------------------------
/packages/shared/src/components/Messages.tsx:
--------------------------------------------------------------------------------
1 | import { toJS } from 'mobx';
2 | import { observer } from 'mobx-react-lite';
3 | import React, { FunctionComponent, useEffect } from 'react';
4 | import styled, { css } from 'styled-components';
5 |
6 | import Message from '../components/Message';
7 | import { MAX_MESSAGES } from '../utils/constants';
8 | import { MessageData } from '../utils/interfaces';
9 |
10 | interface Props {
11 | chatState: any;
12 | onClickSelection?: (selection: any) => void;
13 | isWeb?: boolean;
14 | store: any;
15 | removeMessage: (messageId: string) => void;
16 | }
17 |
18 | export const Messages: FunctionComponent = observer((props) => {
19 | const showMessageSeperator = (messageIndex = 0) => {
20 | return (
21 | (messageIndex + 1) % MAX_MESSAGES === 0 &&
22 | messageIndex + 1 !== props.chatState.filteredMessages.length
23 | );
24 | };
25 |
26 | useEffect(() => {
27 | if (props.store.messagesRef.current) {
28 | const onWheel = () => {
29 | let isLoadingMore = false;
30 | const { current } = toJS(props.store.messagesRef);
31 | let prevScroll = 0;
32 |
33 | if (
34 | current &&
35 | current.scrollTop < 40 &&
36 | !isLoadingMore &&
37 | props.chatState.filteredMessages.length !==
38 | props.store.messages.length
39 | ) {
40 | prevScroll = current.scrollHeight;
41 | isLoadingMore = true;
42 |
43 | if (
44 | props.chatState.filteredMessages.length + MAX_MESSAGES >=
45 | props.store.messages.length
46 | ) {
47 | props.chatState.setMessagesToShow(props.store.messages.length);
48 | } else {
49 | props.chatState.setMessagesToShow(
50 | props.chatState.messagesToShow + MAX_MESSAGES
51 | );
52 | }
53 |
54 | current.scrollTop = current.scrollHeight - prevScroll;
55 | isLoadingMore = false;
56 | }
57 |
58 | if (current) {
59 | props.store.disableAutoScroll(
60 | current.scrollHeight - (current.scrollTop + current.clientHeight) >
61 | 0
62 | );
63 | }
64 | };
65 |
66 | props.store.messagesRef.current.addEventListener('wheel', onWheel);
67 | }
68 | }, [props.store.messagesRef]);
69 |
70 | return (
71 |
72 |
73 | {props.chatState.filteredMessages.map(
74 | (data: MessageData, i: number) => (
75 |
76 | {showMessageSeperator(i) && (
77 |
78 | older messages
79 |
80 | )}
81 |
88 | )
89 | )}
90 |
91 |
92 | );
93 | });
94 |
95 | const Wrapper = styled.div<{ isWeb?: boolean }>`
96 | position: relative;
97 | width: 100%;
98 | overflow-x: hidden;
99 | overflow-y: auto;
100 | display: grid;
101 | ${(p) =>
102 | p.isWeb
103 | ? css`
104 | height: calc(500px - 56px);
105 | max-height: 100%;
106 | @media (min-width: 450px) {
107 | height: calc(500px - 56px);
108 | }
109 | @media (max-width: 450px) {
110 | height: calc(100vh - 106px);
111 | width: 100%;
112 | width: 100%;
113 | }
114 | `
115 | : ''}
116 | `;
117 |
118 | const ScrollWrapper = styled.div<{$isDevMode: boolean}>`
119 | padding: 9px 9px 0;
120 | width: 100%;
121 | align-self: end;
122 | &::after {
123 | content: '';
124 | transition: opacity 0.3s;
125 | opacity: 1;
126 | position: fixed;
127 | bottom: ${(p) => p.$isDevMode ? 60 : 30};
128 | left: 14px;
129 | right: 14px;
130 | background: transparent;
131 | height: 14px;
132 | pointer-events: none;
133 | box-shadow: 0 3px 10px 14px ${(p) => p.theme.backgroundColor};
134 | border-radius: 0;
135 | }
136 | `;
137 |
138 | const MessageSeperator = styled.div`
139 | border-width: 1px 0 0 0;
140 | border-color: ${(p) => p.theme.secondaryBackgroundColor};
141 | border-style: solid;
142 | margin: 5px 0 17px;
143 | text-align: center;
144 | position: relative;
145 | span {
146 | position: absolute;
147 | top: -8px;
148 | left: 50%;
149 | color: ${(p) => p.theme.secondaryBackgroundColor};
150 | background-color: ${(p) => p.theme.backgroundColor};
151 | padding: 0 14px;
152 | transform: translateX(-50%);
153 | font-size: 10px;
154 | text-transform: uppercase;
155 | }
156 | `;
157 |
--------------------------------------------------------------------------------
/packages/shared/src/components/Notification.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react-lite';
2 | import React, { useEffect, useState } from 'react';
3 | import styled from 'styled-components';
4 |
5 | import { NotificationParams } from '../utils/interfaces';
6 |
7 | const Notification = (
8 | props: NotificationParams & {
9 | deleteNotification: (id: number) => any;
10 | }
11 | ) => {
12 | const [tm, setTm] = useState();
13 | const hideNotification = () => props.deleteNotification(props.id);
14 |
15 | useEffect(() => {
16 | setTm(setTimeout(hideNotification, 3000));
17 |
18 | return () => clearTimeout(tm);
19 | }, []);
20 |
21 | let typeClass = '';
22 |
23 | if (props.type === 'success') {
24 | typeClass = 'success';
25 | } else if (props.type === 'error') {
26 | typeClass = 'error';
27 | }
28 |
29 | return (
30 |
31 | {props.text}
32 |
33 | );
34 | };
35 |
36 | const NotificationContainer = styled.div`
37 | cursor: pointer;
38 | padding: 5px 10px;
39 | border-radius: 5px;
40 | height: auto;
41 | margin-bottom: 5px;
42 | background-color: ${(p) => p.theme.tooltipBackgroundColor};
43 | color: ${(p) => p.theme.fontColorInverse};
44 | span {
45 | color: ${(p) => p.theme.fontColorInverse};
46 | font-size: 12px;
47 | }
48 | `;
49 |
50 | export default observer(Notification);
51 |
--------------------------------------------------------------------------------
/packages/shared/src/components/Notifications.tsx:
--------------------------------------------------------------------------------
1 | // store
2 | import { observer } from 'mobx-react-lite';
3 | import React, { FunctionComponent, useEffect, useState } from 'react';
4 | import { useLocation } from 'react-router-dom';
5 | import styled from 'styled-components';
6 |
7 | import { NotificationParams } from '@fc/shared/utils/interfaces';
8 |
9 | import Notification from './Notification';
10 |
11 | interface Props {
12 | notifications: NotificationParams[];
13 | deleteNotification: (id: number) => void;
14 | }
15 |
16 | const Notifications: FunctionComponent = (props: Props) => {
17 | const location = useLocation();
18 | const [isRoot, setIsRoot] = useState(true);
19 |
20 | useEffect(() => {
21 | setIsRoot(location.pathname === '/');
22 | }, [location]);
23 |
24 | if (props.notifications.length === 0) return null;
25 |
26 | return (
27 |
28 | {props.notifications.map((data: NotificationParams, key) => (
29 | props.deleteNotification(data.id)}
33 | />
34 | ))}
35 |
36 | );
37 | };
38 |
39 | const NotificationsContainer = styled.div<{ $isRoot: boolean }>`
40 | display: flex;
41 | flex-direction: column-reverse;
42 | position: absolute;
43 | top: 0;
44 | z-index: 11;
45 | padding: 11px;
46 | width: 100%;
47 | align-items: center;
48 | `;
49 |
50 | export default observer(Notifications);
51 |
--------------------------------------------------------------------------------
/packages/shared/src/components/Tooltip.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
2 | import { usePopper } from 'react-popper';
3 | import styled, { css } from 'styled-components';
4 |
5 | interface Props {
6 | handler?: any;
7 | hover?: boolean;
8 | shadow?: boolean;
9 | children: any;
10 | style?: any;
11 | offsetHorizontal?: number;
12 | placement?: 'top' | 'bottom';
13 | }
14 |
15 | export const RefTooltip = React.forwardRef((props, ref: any) => {
16 | const [isOpen, setIsOpen] = useState(false);
17 | const [popperElement, setPopperElement] = useState();
18 | const [arrowElement, setArrowElement] = useState();
19 |
20 | const { styles, attributes } = usePopper(
21 | props.handler.current,
22 | popperElement,
23 | {
24 | placement: props.placement || 'top',
25 | strategy: 'fixed',
26 | modifiers: [
27 | {
28 | name: 'arrow',
29 | options: {
30 | element: arrowElement,
31 | },
32 | },
33 | {
34 | name: 'offset',
35 | options: {
36 | offset: [0, props.hover ? 7 : 14],
37 | },
38 | },
39 | {
40 | name: 'preventOverflow',
41 | options: {
42 | padding: props.offsetHorizontal || 14,
43 | },
44 | },
45 | ],
46 | }
47 | );
48 |
49 | const wrapperRef = useRef(null);
50 |
51 | useImperativeHandle(ref, () => ({
52 | show: () => setIsOpen(true),
53 | hide: () => setIsOpen(false),
54 | }));
55 |
56 | return (
57 | ((props, ref) => {
78 | const [isOpen, setIsOpen] = useState(false);
79 | const { handler: HandlerComp } = props;
80 |
81 | const wrapperRef = useRef(null);
82 | const handlerRef = useRef(null);
83 |
84 | const [popperElement, setPopperElement] = useState();
85 | const [arrowElement, setArrowElement] = useState();
86 |
87 | const { styles, attributes } = usePopper(handlerRef.current, popperElement, {
88 | placement: props.placement || 'top',
89 | strategy: 'fixed',
90 | modifiers: [
91 | {
92 | name: 'arrow',
93 | options: {
94 | element: arrowElement,
95 | },
96 | },
97 | {
98 | name: 'offset',
99 | options: {
100 | offset: [0, props.hover ? 7 : 14],
101 | },
102 | },
103 | {
104 | name: 'preventOverflow',
105 | options: {
106 | padding: props.offsetHorizontal || 14,
107 | },
108 | },
109 | ],
110 | });
111 |
112 | useImperativeHandle(ref, () => ({
113 | hide: () => setIsOpen(false),
114 | }));
115 |
116 | useEffect(() => {
117 | if (!props.hover) {
118 | const handleClick = (event: any) => {
119 | if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
120 | setIsOpen(false);
121 | }
122 | };
123 |
124 | document.addEventListener('mousedown', handleClick);
125 | return () => document.removeEventListener('mousedown', handleClick);
126 | }
127 | }, [wrapperRef]);
128 |
129 | return (
130 | = (props) => {
21 | const navigate = useNavigate();
22 |
23 | return (
24 |
25 |
50 | navigate('/')}>
51 |
53 |
54 |
55 | );
56 | };
57 |
58 | const Wrapper = styled.div`
59 | display: grid;
60 | grid-template-rows: auto 1fr 35px;
61 | width: 100vw;
62 | padding: 9px;
63 | height: 100%;
64 |
65 | h5 {
66 | color: #a2adc0;
67 | font-weight: normal;
68 | margin: 0 0 10px;
69 | font-size: 10px;
70 | }
71 | .users {
72 | overflow-y: auto;
73 | .user {
74 | padding: 4px 0;
75 | font-size: 14px;
76 | font-weight: bold;
77 | display: flex;
78 | align-items: center;
79 | .name {
80 | color: ${(p) => p.theme.fontColor};
81 | &.empty {
82 | font-weight: normal;
83 | font-style: italic;
84 | }
85 | p {
86 | color: #999;
87 | font-size: 10px;
88 | margin: 2px 0 0 0;
89 | font-weight: 400;
90 | }
91 | }
92 | .color {
93 | background-size: cover;
94 | border-radius: 100%;
95 | width: 41px;
96 | height: 41px;
97 | margin-right: 17px;
98 | font-size: 22px;
99 | text-align: center;
100 | line-height: 43px;
101 | }
102 | }
103 | }
104 | `;
105 |
106 | const Tile = styled.div<{ name: string }>`
107 | width: 24px;
108 | height: 24px;
109 | display: flex;
110 | justify-content: center;
111 | align-items: center;
112 | background-color: ${(p) => p.theme.chatbarSecondaryBackground};
113 | border-radius: 100%;
114 | cursor: pointer;
115 | svg {
116 | transform: scale(0.8);
117 |
118 | path {
119 | fill: ${({ theme }) => theme.thirdFontColor};
120 | }
121 | }
122 | `;
123 |
124 | const ShortcutTiles = styled.div`
125 | background-color: ${(p) => p.theme.secondaryBackgroundColor};
126 | padding: 6px;
127 | border-radius: 94px;
128 | justify-self: start;
129 | `;
130 |
131 | export default UserList;
132 |
--------------------------------------------------------------------------------
/packages/shared/src/utils/SocketProvider.tsx:
--------------------------------------------------------------------------------
1 | import React, { FunctionComponent } from 'react';
2 | import { Socket } from 'socket.io-client';
3 |
4 | interface Props {
5 | socket: Socket | null;
6 | children: any;
7 | }
8 |
9 | const SocketContext = React.createContext(null);
10 |
11 | export const SocketProvider: FunctionComponent = (props) => (
12 |
13 | {props.children}
14 |
15 | );
16 |
17 | export const useSocket = (): Socket | null => {
18 | const socket = React.useContext(SocketContext);
19 |
20 | if (socket === undefined) {
21 | throw new Error('useSocket must be used within a SocketProvider.');
22 | }
23 |
24 | return socket;
25 | };
26 |
27 | export const withSocketContext = (Component: any) => (props: any) =>
28 | (
29 |
30 | {(socket) =>
32 | );
33 |
--------------------------------------------------------------------------------
/packages/shared/src/utils/constants.ts:
--------------------------------------------------------------------------------
1 | export const MAX_MESSAGES = 25;
2 | export const DEFAULT_SERVER_URL = 'https://figma-chat.ph1p.dev/';
3 | export enum EColors {
4 | '#4F4F4F' = 'gray',
5 | '#493AC6' = 'blue',
6 | '#00B5CE' = 'lightblue',
7 | '#907CFF' = 'purple',
8 | '#1BC47D' = 'green',
9 | '#FFC8B9' = 'skintone',
10 | '#EF596F' = 'red',
11 | '#F0C75F' = 'yellow',
12 | '#F3846B' = 'orange',
13 | '#87BBB7' = 'forest',
14 | }
15 |
--------------------------------------------------------------------------------
/packages/shared/src/utils/helpers.ts:
--------------------------------------------------------------------------------
1 | export const isOnlyEmoji = (str: string) =>
2 | str
3 | ? str.replace(
4 | /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g,
5 | ''
6 | ) === ''
7 | : '';
8 |
9 | export const generateString = (length: number = 40): string => {
10 | const chars =
11 | 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
12 |
13 | let text = '';
14 | for (let i = 0; i < length; i++) {
15 | text += chars.charAt(Math.floor(Math.random() * chars.length));
16 | }
17 |
18 | return text;
19 | };
20 |
--------------------------------------------------------------------------------
/packages/shared/src/utils/hooks/use-on-outside-click.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export const useOnClickOutside = (ref: any, handler: any) => {
4 | useEffect(() => {
5 | const listener = (event: any) => {
6 | if (!ref.current || ref.current.contains(event.target)) {
7 | return;
8 | }
9 | handler(event);
10 | };
11 | document.addEventListener('mousedown', listener);
12 | document.addEventListener('touchstart', listener);
13 | return () => {
14 | document.removeEventListener('mousedown', listener);
15 | document.removeEventListener('touchstart', listener);
16 | };
17 | }, [ref, handler]);
18 | };
19 |
--------------------------------------------------------------------------------
/packages/shared/src/utils/interfaces.ts:
--------------------------------------------------------------------------------
1 | import { EColors } from './constants';
2 |
3 | export enum ConnectionEnum {
4 | NONE = 'NONE',
5 | CONNECTED = 'CONNECTED',
6 | ERROR = 'ERROR',
7 | CONNECTING = 'CONNECTING',
8 | }
9 |
10 | export interface CurrentUser {
11 | color: keyof typeof EColors;
12 | id: string;
13 | name?: string;
14 | photoUrl?: string;
15 | avatar?: string;
16 | sessionId?: string;
17 | }
18 |
19 | export interface NotificationParams {
20 | id: number;
21 | text: string;
22 | type: string;
23 | }
24 |
25 | export interface MessageData {
26 | id: string;
27 | message: {
28 | date?: string | Date;
29 | text: string;
30 | giphy?: string;
31 | external?: any;
32 | selection?: {
33 | nodes?: string[];
34 | page?: {
35 | name?: string;
36 | };
37 | };
38 | };
39 | user: CurrentUser;
40 | }
41 |
42 | export interface StoreSettings {
43 | url: string;
44 | enableNotificationTooltip: boolean;
45 | enableNotificationSound: boolean;
46 | isDarkTheme: boolean;
47 | }
48 |
--------------------------------------------------------------------------------
/packages/shared/src/utils/theme.ts:
--------------------------------------------------------------------------------
1 | export const darkTheme = {
2 | fontColor: '#fff',
3 | secondaryFontColor: '#615e73',
4 | thirdFontColor: '#7989a0',
5 | fontColorInverse: '#000',
6 | backgroundColor: '#0D0B1C',
7 | secondaryBackgroundColor: '#1F2538',
8 | thirdBackgroundColor: '#171b29',
9 | backgroundColorInverse: '#E7E7E7',
10 | scrollbarColor: '#434e71',
11 | borderColor: '#272D36',
12 | tooltipBackgroundColor: '#fff',
13 | placeholder: '#626E81',
14 | brighterInputFont: '#6E6D77',
15 | tooltipShadow: 'rgba(0, 0, 0, 0.61)',
16 | chatbarSecondaryBackground: '#3a4567',
17 | inputColor: '#fff',
18 | };
19 |
20 | export const lightTheme = {
21 | fontColor: '#000',
22 | secondaryFontColor: '#cecece',
23 | thirdFontColor: '#717D92',
24 | fontColorInverse: '#fff',
25 | backgroundColor: '#fff',
26 | secondaryBackgroundColor: '#eceff4',
27 | thirdBackgroundColor: '#e4e9f1',
28 | backgroundColorInverse: '#383168',
29 | scrollbarColor: '#cfcfd0',
30 | borderColor: '#e4e4e4',
31 | tooltipBackgroundColor: '#1e1940',
32 | placeholder: '#a2adc0',
33 | brighterInputFont: '#B4BFD0',
34 | tooltipShadow: 'rgba(30, 25, 64, 0.34)',
35 | chatbarSecondaryBackground: '#D5DAE0',
36 | inputColor: '#717D92',
37 | };
38 |
--------------------------------------------------------------------------------
/packages/shared/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "target": "es5",
5 | "lib": ["dom", "dom.iterable", "esnext"],
6 | "allowJs": true,
7 | "skipLibCheck": true,
8 | "esModuleInterop": true,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "module": "esnext",
14 | "moduleResolution": "node",
15 | "resolveJsonModule": true,
16 | "isolatedModules": true,
17 | "noEmit": true,
18 | "jsx": "react-jsx"
19 | },
20 | "include": ["src"]
21 | }
22 |
--------------------------------------------------------------------------------
/packages/shared/types/files.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.mp3' {
2 | const src: string;
3 | export default src;
4 | }
5 |
--------------------------------------------------------------------------------
/packages/shared/types/styled.d.ts:
--------------------------------------------------------------------------------
1 | // styled.d.t.s
2 |
3 | import 'styled-components';
4 |
5 | declare module 'styled-components' {
6 | export interface DefaultTheme {
7 | fontColor: string;
8 | secondaryFontColor: string;
9 | thirdFontColor: string;
10 | fontColorInverse: string;
11 | backgroundColor: string;
12 | secondaryBackgroundColor: string;
13 | thirdBackgroundColor: string;
14 | backgroundColorInverse: string;
15 | scrollbarColor: string;
16 | borderColor: string;
17 | tooltipBackgroundColor: string;
18 | placeholder: string;
19 | brighterInputFont: string;
20 | tooltipShadow: string;
21 | chatbarSecondaryBackground: string;
22 | inputColor: string;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/web/.env:
--------------------------------------------------------------------------------
1 | SKIP_PREFLIGHT_CHECK=true
--------------------------------------------------------------------------------
/packages/web/README.md:
--------------------------------------------------------------------------------
1 | # Figma Chat Web-Client
2 |
3 | This package includes the Figma Chat web client. You can find the main instance here https://figma-chat.vercel.app/.
4 |
5 | ## But Why?
6 |
7 | Quite simple. People who don't have rights to edit your Figma file can't run plugins.
8 |
9 | ## How to use?
10 |
11 | Open the plugin inside your file and go to settings. Send https://figma-chat.vercel.app/ to the person you want to chat with and copy the "Auth-String" for them. This serves as a password, so don't give it to anyone else.
12 | **Only people can enter a room if at least one person in the figma file is online.**
13 |
14 | 
15 |
--------------------------------------------------------------------------------
/packages/web/config/env.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 | const paths = require('./paths');
6 |
7 | // Make sure that including paths.js after env.js will read .env variables.
8 | delete require.cache[require.resolve('./paths')];
9 |
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 | throw new Error(
13 | 'The NODE_ENV environment variable is required but was not specified.'
14 | );
15 | }
16 |
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | const dotenvFiles = [
19 | `${paths.dotenv}.${NODE_ENV}.local`,
20 | // Don't include `.env.local` for `test` environment
21 | // since normally you expect tests to produce the same
22 | // results for everyone
23 | NODE_ENV !== 'test' && `${paths.dotenv}.local`,
24 | `${paths.dotenv}.${NODE_ENV}`,
25 | paths.dotenv,
26 | ].filter(Boolean);
27 |
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set. Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 | if (fs.existsSync(dotenvFile)) {
35 | require('dotenv-expand').expand(
36 | require('dotenv').config({
37 | path: dotenvFile,
38 | })
39 | );
40 | }
41 | });
42 |
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 | .split(path.delimiter)
55 | .filter(folder => folder && !path.isAbsolute(folder))
56 | .map(folder => path.resolve(appDirectory, folder))
57 | .join(path.delimiter);
58 |
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 |
63 | function getClientEnvironment(publicUrl) {
64 | const raw = Object.keys(process.env)
65 | .filter(key => REACT_APP.test(key))
66 | .reduce(
67 | (env, key) => {
68 | env[key] = process.env[key];
69 | return env;
70 | },
71 | {
72 | // Useful for determining whether we’re running in production mode.
73 | // Most importantly, it switches React into the correct mode.
74 | NODE_ENV: process.env.NODE_ENV || 'development',
75 | // Useful for resolving the correct path to static assets in `public`.
76 | // For example, 
.
77 | // This should only be used as an escape hatch. Normally you would put
78 | // images into the `src` and `import` them in code to get their paths.
79 | PUBLIC_URL: publicUrl,
80 | // We support configuring the sockjs pathname during development.
81 | // These settings let a developer run multiple simultaneous projects.
82 | // They are used as the connection `hostname`, `pathname` and `port`
83 | // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
84 | // and `sockPort` options in webpack-dev-server.
85 | WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
86 | WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
87 | WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
88 | // Whether or not react-refresh is enabled.
89 | // It is defined here so it is available in the webpackHotDevClient.
90 | FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
91 | }
92 | );
93 | // Stringify all values so we can feed into webpack DefinePlugin
94 | const stringified = {
95 | 'process.env': Object.keys(raw).reduce((env, key) => {
96 | env[key] = JSON.stringify(raw[key]);
97 | return env;
98 | }, {}),
99 | };
100 |
101 | return { raw, stringified };
102 | }
103 |
104 | module.exports = getClientEnvironment;
105 |
--------------------------------------------------------------------------------
/packages/web/config/getHttpsConfig.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 | const crypto = require('crypto');
6 | const chalk = require('react-dev-utils/chalk');
7 | const paths = require('./paths');
8 |
9 | // Ensure the certificate and key provided are valid and if not
10 | // throw an easy to debug error
11 | function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
12 | let encrypted;
13 | try {
14 | // publicEncrypt will throw an error with an invalid cert
15 | encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
16 | } catch (err) {
17 | throw new Error(
18 | `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
19 | );
20 | }
21 |
22 | try {
23 | // privateDecrypt will throw an error with an invalid key
24 | crypto.privateDecrypt(key, encrypted);
25 | } catch (err) {
26 | throw new Error(
27 | `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
28 | err.message
29 | }`
30 | );
31 | }
32 | }
33 |
34 | // Read file and throw an error if it doesn't exist
35 | function readEnvFile(file, type) {
36 | if (!fs.existsSync(file)) {
37 | throw new Error(
38 | `You specified ${chalk.cyan(
39 | type
40 | )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
41 | );
42 | }
43 | return fs.readFileSync(file);
44 | }
45 |
46 | // Get the https config
47 | // Return cert files if provided in env, otherwise just true or false
48 | function getHttpsConfig() {
49 | const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
50 | const isHttps = HTTPS === 'true';
51 |
52 | if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
53 | const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
54 | const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
55 | const config = {
56 | cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
57 | key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
58 | };
59 |
60 | validateKeyAndCerts({ ...config, keyFile, crtFile });
61 | return config;
62 | }
63 | return isHttps;
64 | }
65 |
66 | module.exports = getHttpsConfig;
67 |
--------------------------------------------------------------------------------
/packages/web/config/modules.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 | const paths = require('./paths');
6 | const chalk = require('react-dev-utils/chalk');
7 | const resolve = require('resolve');
8 |
9 | /**
10 | * Get additional module paths based on the baseUrl of a compilerOptions object.
11 | *
12 | * @param {Object} options
13 | */
14 | function getAdditionalModulePaths(options = {}) {
15 | const baseUrl = options.baseUrl;
16 |
17 | if (!baseUrl) {
18 | return '';
19 | }
20 |
21 | const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
22 |
23 | // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
24 | // the default behavior.
25 | if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
26 | return null;
27 | }
28 |
29 | // Allow the user set the `baseUrl` to `appSrc`.
30 | if (path.relative(paths.appSrc, baseUrlResolved) === '') {
31 | return [paths.appSrc];
32 | }
33 |
34 | // If the path is equal to the root directory we ignore it here.
35 | // We don't want to allow importing from the root directly as source files are
36 | // not transpiled outside of `src`. We do allow importing them with the
37 | // absolute path (e.g. `src/Components/Button.js`) but we set that up with
38 | // an alias.
39 | if (path.relative(paths.appPath, baseUrlResolved) === '') {
40 | return null;
41 | }
42 |
43 | // Otherwise, throw an error.
44 | throw new Error(
45 | chalk.red.bold(
46 | "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
47 | ' Create React App does not support other values at this time.'
48 | )
49 | );
50 | }
51 |
52 | /**
53 | * Get webpack aliases based on the baseUrl of a compilerOptions object.
54 | *
55 | * @param {*} options
56 | */
57 | function getWebpackAliases(options = {}) {
58 | const baseUrl = options.baseUrl;
59 |
60 | if (!baseUrl) {
61 | return {};
62 | }
63 |
64 | const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
65 |
66 | if (path.relative(paths.appPath, baseUrlResolved) === '') {
67 | return {
68 | src: paths.appSrc,
69 | };
70 | }
71 | }
72 |
73 | /**
74 | * Get jest aliases based on the baseUrl of a compilerOptions object.
75 | *
76 | * @param {*} options
77 | */
78 | function getJestAliases(options = {}) {
79 | const baseUrl = options.baseUrl;
80 |
81 | if (!baseUrl) {
82 | return {};
83 | }
84 |
85 | const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
86 |
87 | if (path.relative(paths.appPath, baseUrlResolved) === '') {
88 | return {
89 | '^src/(.*)$': '/src/$1',
90 | };
91 | }
92 | }
93 |
94 | function getModules() {
95 | // Check if TypeScript is setup
96 | const hasTsConfig = fs.existsSync(paths.appTsConfig);
97 | const hasJsConfig = fs.existsSync(paths.appJsConfig);
98 |
99 | if (hasTsConfig && hasJsConfig) {
100 | throw new Error(
101 | 'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
102 | );
103 | }
104 |
105 | let config;
106 |
107 | // If there's a tsconfig.json we assume it's a
108 | // TypeScript project and set up the config
109 | // based on tsconfig.json
110 | if (hasTsConfig) {
111 | const ts = require(resolve.sync('typescript', {
112 | basedir: paths.appNodeModules,
113 | }));
114 | config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
115 | // Otherwise we'll check if there is jsconfig.json
116 | // for non TS projects.
117 | } else if (hasJsConfig) {
118 | config = require(paths.appJsConfig);
119 | }
120 |
121 | config = config || {};
122 | const options = config.compilerOptions || {};
123 |
124 | const additionalModulePaths = getAdditionalModulePaths(options);
125 |
126 | return {
127 | additionalModulePaths: additionalModulePaths,
128 | webpackAliases: getWebpackAliases(options),
129 | jestAliases: getJestAliases(options),
130 | hasTsConfig,
131 | };
132 | }
133 |
134 | module.exports = getModules();
135 |
--------------------------------------------------------------------------------
/packages/web/config/paths.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 | const fs = require('fs');
5 | const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
6 |
7 | // Make sure any symlinks in the project folder are resolved:
8 | // https://github.com/facebook/create-react-app/issues/637
9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 |
12 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
13 | // "public path" at which the app is served.
14 | // webpack needs to know it to put the right
58 | {isOpen && (
59 |
67 |
68 | {props.children}
69 |
70 |
72 | )}
73 |
74 | );
75 | });
76 |
77 | export default React.forwardRef
131 |
148 |
149 | {props.children}
150 |
151 |
153 | )}
154 |
155 | );
156 | });
157 |
158 | const TooltipContent = styled.div<{ hover?: boolean }>`
159 | padding: ${(p) => (p.hover ? '5px 10px' : '15px')};
160 | position: relative;
161 | z-index: 1;
162 | font-weight: normal;
163 | `;
164 |
165 | const Arrow = styled.div`
166 | position: absolute;
167 | width: 21px;
168 | height: 21px;
169 | pointer-events: none;
170 | &::before {
171 | content: '';
172 | position: absolute;
173 | width: 21px;
174 | height: 21px;
175 | background-color: ${(p) => p.theme.tooltipBackgroundColor};
176 | transform: rotate(45deg);
177 | top: 0px;
178 | left: 0px;
179 | border-radius: 4px;
180 | z-index: -1;
181 | }
182 | `;
183 |
184 | const Tooltip = styled.div<{
185 | hover?: boolean;
186 | isOpen?: boolean;
187 | shadow?: boolean;
188 | }>`
189 | position: fixed;
190 | background-color: ${(p) => p.theme.tooltipBackgroundColor};
191 | border-radius: ${(p) => (p.hover ? 6 : 20)}px;
192 | visibility: ${(p) => (p.isOpen ? 'visible' : 'hidden')};
193 | pointer-events: ${(p) => (p.isOpen ? 'all' : 'none')};
194 | z-index: 4;
195 | color: ${(p) => p.theme.fontColorInverse};
196 |
197 | ${(p) =>
198 | p.shadow
199 | ? css`
200 | box-shadow: 0px 24px 34px ${({ theme }) => theme.tooltipShadow};
201 | `
202 | : ''}
203 |
204 | &-enter {
205 | opacity: 0;
206 | }
207 | &-enter-active {
208 | opacity: 1;
209 | transition: opacity 200ms ease-in, transform 200ms ease-in;
210 | }
211 | &-exit {
212 | opacity: 1;
213 | }
214 | &-exit-active {
215 | opacity: 0;
216 | transition: opacity 200ms ease-in, transform 200ms ease-in;
217 | }
218 |
219 | &[data-popper-placement^='top'] {
220 | ${Arrow} {
221 | bottom: ${(p) => (p.hover ? -1 : -4)}px;
222 | }
223 | }
224 | &[data-popper-placement^='bottom'] {
225 | ${Arrow} {
226 | top: ${(p) => (p.hover ? -1 : -4)}px;
227 | }
228 | }
229 | &.place-left {
230 | &::after {
231 | margin-top: -10px;
232 | }
233 | }
234 | `;
235 |
--------------------------------------------------------------------------------
/packages/shared/src/components/UserList.tsx:
--------------------------------------------------------------------------------
1 | import React, { FunctionComponent } from 'react';
2 | import { useNavigate } from 'react-router';
3 | import styled from 'styled-components';
4 |
5 | import BackIcon from '@fc/shared/assets/icons/BackIcon';
6 |
7 | import { CurrentUser } from '../utils/interfaces';
8 |
9 | interface Props {
10 | users: {
11 | id: string;
12 | name: string;
13 | avatar: string;
14 | color: string;
15 | photoUrl: string;
16 | }[];
17 | user: CurrentUser;
18 | }
19 |
20 | const UserList: FunctionComponent !props.hover && setIsOpen(!isOpen)}
133 | onMouseEnter={() => props.hover && setIsOpen(!isOpen)}
134 | onMouseLeave={() => props.hover && setIsOpen(!isOpen)}
135 | >
136 |
138 |
139 | {isOpen && (
140 | Active Users
26 |
27 | {props.users.map((user, i) => {
28 | return (
29 |
49 |
30 |
46 | );
47 | })}
48 |
39 | {user.avatar}
40 |
41 |
42 | {user.name || 'Anon'}
43 | {user.id === props.user.id &&
45 | you
} 44 |
15 |
--------------------------------------------------------------------------------
/packages/web/config/env.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 | const paths = require('./paths');
6 |
7 | // Make sure that including paths.js after env.js will read .env variables.
8 | delete require.cache[require.resolve('./paths')];
9 |
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 | throw new Error(
13 | 'The NODE_ENV environment variable is required but was not specified.'
14 | );
15 | }
16 |
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | const dotenvFiles = [
19 | `${paths.dotenv}.${NODE_ENV}.local`,
20 | // Don't include `.env.local` for `test` environment
21 | // since normally you expect tests to produce the same
22 | // results for everyone
23 | NODE_ENV !== 'test' && `${paths.dotenv}.local`,
24 | `${paths.dotenv}.${NODE_ENV}`,
25 | paths.dotenv,
26 | ].filter(Boolean);
27 |
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set. Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 | if (fs.existsSync(dotenvFile)) {
35 | require('dotenv-expand').expand(
36 | require('dotenv').config({
37 | path: dotenvFile,
38 | })
39 | );
40 | }
41 | });
42 |
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 | .split(path.delimiter)
55 | .filter(folder => folder && !path.isAbsolute(folder))
56 | .map(folder => path.resolve(appDirectory, folder))
57 | .join(path.delimiter);
58 |
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 |
63 | function getClientEnvironment(publicUrl) {
64 | const raw = Object.keys(process.env)
65 | .filter(key => REACT_APP.test(key))
66 | .reduce(
67 | (env, key) => {
68 | env[key] = process.env[key];
69 | return env;
70 | },
71 | {
72 | // Useful for determining whether we’re running in production mode.
73 | // Most importantly, it switches React into the correct mode.
74 | NODE_ENV: process.env.NODE_ENV || 'development',
75 | // Useful for resolving the correct path to static assets in `public`.
76 | // For example,