{text}
7 | ); 8 | 9 | export default Heading; 10 | -------------------------------------------------------------------------------- /src/modules/Activity/domain/activity.ts: -------------------------------------------------------------------------------- 1 | import { CardActivity } from 'modules/Activity/domain/card-activity'; 2 | 3 | export interface Activity { 4 | date: number; 5 | memberCreator: any; 6 | type: CardActivity; 7 | data: any; 8 | } 9 | -------------------------------------------------------------------------------- /src/components/shared/Badge/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import Badge from '.'; 2 | 3 | export default { title: 'Atomos/Badge', component: Badge }; 4 | 5 | export const basic = () => ( 6 |
12 | {image}
13 |
16 | );
17 |
--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
1 | {
2 | "alias": "easyflow.live",
3 | "version": 2,
4 | "build": {
5 | "env": {
6 | "REACT_APP_API_KEY": "@app_api_key",
7 | "REACT_APP_AUTH_DOMAIN": "@app_auth_domain",
8 | "REACT_APP_DATABASE_URL": "@app_database_url",
9 | "REACT_APP_PROJECT_ID": "@app_project_id",
10 | "REACT_APP_STORAGE_BUCKET": "@app_storage_bucket",
11 | "REACT_APP_MESSAGING_SENDER_ID": "@app_messaging_sender_id",
12 | "REACT_APP_ID": "@app_id",
13 | "PORT": "3000"
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/hooks/use-emitter.ts:
--------------------------------------------------------------------------------
1 | import { DependencyList, useEffect } from 'react';
2 |
3 | import { emitter, EmitterTypes } from 'libs/emitter';
4 |
5 | export function useEmitter{message}
14 | {button} 15 |-
13 | {tags &&
14 | tags.map((tag: string, index: number) => (
15 |
-
16 |
17 |
18 | ))}
19 |
15 | {tags.map((t, index) => (
16 |
25 | )
26 | );
27 |
28 | export default BadgeTags;
29 |
--------------------------------------------------------------------------------
/src/components/shared/Spinner.tsx:
--------------------------------------------------------------------------------
1 | import { FaSpinner } from 'react-icons/fa';
2 | import styled, { keyframes } from 'styled-components';
3 |
4 | const rotate = keyframes`
5 | from {
6 | transform: rotate(0deg);
7 | }
8 |
9 | to {
10 | transform: rotate(360deg);
11 | }
12 | `;
13 |
14 | const AnimatedSpinner = styled.span`
15 | animation: ${rotate} 2s linear infinite;
16 | `;
17 |
18 | interface SpinnerProps {
19 | size?: string;
20 | color?: string;
21 | className?: string;
22 | }
23 |
24 | export const Spinner = ({
25 | className,
26 | size = '18',
27 | color = '#fff',
28 | }: SpinnerProps) => (
29 |
16 |
26 | );
27 | };
28 |
29 | export default ToastUndo;
30 |
--------------------------------------------------------------------------------
/src/modules/Card/components/CardModal/CardOptionAssignToMe.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react-lite';
2 | import { FaUser } from 'react-icons/fa';
3 |
4 | import { useAssign } from 'modules/Card/hooks/use-assign';
5 | import CardDocument from 'modules/Card/data/card.doc';
6 | import CardOptionButton from './CardOptionButton';
7 |
8 | interface Props {
9 | card: CardDocument;
10 | listId: string;
11 | }
12 |
13 | const CardOptionAssignToMe = observer(({ card, listId }: Props) => {
14 | const toggleAssignment = useAssign(card, listId);
15 |
16 | return (
17 | 17 | {title}{' '} 18 | 24 |
25 |
19 |
21 | Toggle assignment
22 |
12 |
5 |
24 | );
25 |
26 | export default Header;
27 |
--------------------------------------------------------------------------------
/src/modules/Card/data/card.doc.ts:
--------------------------------------------------------------------------------
1 | import { Document } from 'firestorter';
2 | import firebase from 'firebase/app';
3 | import 'firebase/firestore';
4 |
5 | import UserDocument from 'documents/user.doc';
6 | import ListDocument from 'documents/list.doc';
7 | import ColorDocument from 'documents/color.doc';
8 |
9 | export interface Card {
10 | id: string;
11 | title?: string;
12 | text: string;
13 | index: number;
14 | color: string;
15 | colorRef: ColorDocument['ref'];
16 | date: string | Date;
17 | completed: boolean;
18 | assignee: UserDocument['ref'][];
19 | tags: string[];
20 | createdAt: number;
21 | listBefore: ListDocument['ref'];
22 | listAfter: ListDocument['ref'];
23 | }
24 |
25 | export default class CardDocument extends Document
9 |
23 |
10 |
22 |
11 |
21 |
12 |
20 |
13 |
14 |
15 | easyflow
16 |
17 |
18 |
19 | -
18 | {Children.map(children, child => {
19 | if (!isValidElement(child)) return;
20 |
21 | return child;
22 | })}
23 |
16 | {colors.map(color => (
17 | onClick({ ...color.data, ref: color.ref })}
23 | />
24 | ))}
25 |
26 | ) : null;
27 | };
28 |
29 | export default observer(CardOptionColors);
30 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "experimentalDecorators": true,
5 | "target": "esnext",
6 | "module": "esnext",
7 | "jsx": "preserve",
8 | "allowJs": true,
9 | "moduleResolution": "node",
10 | "allowSyntheticDefaultImports": true,
11 | "noUnusedLocals": true,
12 | "noUnusedParameters": true,
13 | "emitDecoratorMetadata": true,
14 | "removeComments": false,
15 | "preserveConstEnums": true,
16 | "resolveJsonModule": true,
17 | "sourceMap": true,
18 | "skipLibCheck": true,
19 | "baseUrl": "./src",
20 | "lib": ["dom", "es2016"],
21 | "strict": false,
22 | "forceConsistentCasingInFileNames": true,
23 | "noEmit": true,
24 | "esModuleInterop": true,
25 | "isolatedModules": true
26 | },
27 | "exclude": ["node_modules"],
28 | "include": [
29 | "next-env.d.ts",
30 | "src/**/*.ts",
31 | "src/**/*.tsx",
32 | "src/pages/**/*.ts",
33 | "src/pages/**/*.tsx"
34 | ]
35 | }
36 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2.0",
3 | "configurations": [
4 | {
5 | "type": "chrome",
6 | "request": "launch",
7 | "name": "Next: Chrome",
8 | "url": "http://localhost:3000",
9 | "webRoot": "${workspaceFolder}"
10 | },
11 | {
12 | "type": "node",
13 | "request": "launch",
14 | "name": "Next: Node",
15 | "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
16 | "runtimeArgs": [
17 | ],
18 | "env": {
19 | "NODE_OPTIONS": "--inspect"
20 | },
21 | "port": 9229,
22 | "console": "internalConsole"
23 | }
24 | ],
25 | "compounds": [
26 | {
27 | "name": "Next: Full",
28 | "configurations": [
29 | "Next: Node",
30 | "Next: Chrome"
31 | ]
32 | }
33 | ]
34 | }
--------------------------------------------------------------------------------
/src/hooks/use-thin-display.ts:
--------------------------------------------------------------------------------
1 | import { useLayoutEffect, useState, useEffect } from 'react';
2 | import ResizeObserver from 'resize-observer-polyfill';
3 |
4 | const useResizeObserver = (element, callback) => {
5 | useLayoutEffect(() => {
6 | if (!element || !element.current) {
7 | return;
8 | }
9 |
10 | let resizeObserver = new ResizeObserver(() => callback());
11 | resizeObserver.observe(element.current);
12 |
13 | return () => {
14 | if (!resizeObserver) {
15 | return;
16 | }
17 |
18 | resizeObserver.disconnect();
19 | resizeObserver = null;
20 | };
21 | }, [element, callback]);
22 | };
23 |
24 | export const useThinDisplay = () => {
25 | const [isThin, setIsThin] = useState(false);
26 |
27 | useResizeObserver({ current: window.document.scrollingElement }, () =>
28 | setIsThin(window.innerWidth < 550)
29 | );
30 |
31 | useEffect(() => {
32 | setIsThin(window.innerWidth < 550);
33 | }, []);
34 |
35 | return isThin;
36 | };
37 |
--------------------------------------------------------------------------------
/src/components/shared/PopupMenu/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled from 'styled-components';
3 |
4 | import PopupMenu, { PopupProvider } from '.';
5 |
6 | const Overlay = styled.div`
7 | width: 100%;
8 | height: 100%;
9 | position: absolute;
10 | top: 0;
11 | left: 0;
12 | background-color: rgba(0, 0, 0, 0.4);
13 | `;
14 |
15 | const Centered = styled.div`
16 | display: flex;
17 | justify-content: center;
18 | align-items: center;
19 | width: 100%;
20 | position: relative;
21 | height: 100vh;
22 | `;
23 |
24 | export default { title: 'Molecules/PopupMenu', component: PopupMenu };
25 |
26 | export const basicDialog = () => (
27 | Feature
37 |
18 | {board.actions.isLoading ? (
19 | <>
20 |
34 | );
35 | };
36 |
37 | export default observer(Activities);
38 |
--------------------------------------------------------------------------------
/src/documents/list.doc.ts:
--------------------------------------------------------------------------------
1 | import { Document, Collection } from 'firestorter';
2 |
3 | import CardDocument from 'modules/Card/data/card.doc';
4 | import UserDocument from 'documents/user.doc';
5 |
6 | export interface List {
7 | title: string;
8 | index: number;
9 | uid: string;
10 | color: string;
11 | owner: UserDocument['ref'];
12 | public: boolean;
13 | tags: string[];
14 | users: UserDocument['ref'][];
15 | cardsLimit: number;
16 | }
17 |
18 | export default class ListDocument extends Document- {
19 | private _cards: Collection
34 |
38 | );
39 | };
40 |
41 | export default observer(CardBasic);
42 |
--------------------------------------------------------------------------------
/src/components/shared/BadgeDueDate.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react-lite';
3 | import { MdAlarm } from 'react-icons/md';
4 |
5 | import { Badge, Checkbox } from 'components/shared';
6 | import { useDueDate } from 'hooks/use-due-date';
7 |
8 | interface BadgeDueDateProps {
9 | date: any;
10 | completed?: boolean;
11 | id: string;
12 | showCheckbox?: boolean;
13 | onComplete: (completed: boolean) => void;
14 | }
15 |
16 | const BadgeDueDate: React.FC{children}
35 |
36 | {renderBadges && renderBadges()}
37 |
33 |
36 | {title}
37 |
45 | x
46 |
47 |
48 | );
49 | };
50 |
51 | export default memo(Tag);
52 |
--------------------------------------------------------------------------------
/src/components/shared/UserMenu.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Menu, { MenuItem, Button } from './Menu';
4 | import { useSession } from 'hooks/use-session';
5 |
6 | interface UserMenuProps {
7 | trigger: React.ReactChild;
8 | userName: string;
9 | userEmail: string;
10 | }
11 |
12 | const UserName = ({ name }: { name: string }) => (
13 | {name}
14 | );
15 | const UserEmail = ({ email }: { email: string }) => (
16 | {email}
17 | );
18 |
19 | const UserMenu = ({ trigger, userName, userEmail }: UserMenuProps) => {
20 | const { logout } = useSession();
21 |
22 | return (
23 |