Skip to content

Commit

Permalink
Merge pull request #3 from anuraghazra/refactor
Browse files Browse the repository at this point in the history
feat(*): major update / refactor.
  • Loading branch information
anuraghazra authored Mar 22, 2020
2 parents e5594bd + f0517cf commit 2f1e603
Show file tree
Hide file tree
Showing 151 changed files with 10,162 additions and 5,496 deletions.
7 changes: 7 additions & 0 deletions .env.EXAMPLE
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
NODE_ENV=development
DB_CONNECT_ATLAS=mongodb_connection_url
TOKEN_SECRET=secret
GOOGLE_CLIENT_ID=google_client_id
GOOGLE_CLIENT_SECRET=google_secret
SENDGRID_API_KEY=sendgrid_api_key
EXPIRATION_TIME=30
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,4 @@ before_script:
script:
- set -e
- npm run test
- npm run ci:run
- npm run test:e2e:ci
4 changes: 2 additions & 2 deletions client/cypress/integration/dashboard.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ describe('Test Dashboard', () => {
cy.findByText(/Cypres testing/i, { selector: 'h3' })
.click()
.wait(500)
.get('.label__header>svg').click()
.get('.dropdown__items')
.findByTestId('label_dropdown').click()
.get('.label__dropdown--content')
.findAllByText(/feature/i).first().click()
.findByText(/update labels/i).click()
})
Expand Down
12 changes: 6 additions & 6 deletions client/cypress/integration/signup.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@ describe('Should Check Signup', () => {
.focus()
.clear()
.type('fakepassword123{enter}')
cy.findByText(/Username \/ Email Already Exsist/i)
cy.findByPlaceholderText(/example@gmail.com/i)
.clear()
.type('[email protected]')
.findByText(/signup/i)
.click();
// cy.findByText(/Username \/ Email Already Exsist/i)
// cy.findByPlaceholderText(/[email protected]/i)
// .clear()
// .type('[email protected]')
// .findByText(/signup/i)
// .click();
cy.findByText(/Please Select An Image/i)
})
})
7,618 changes: 4,391 additions & 3,227 deletions client/package-lock.json

Large diffs are not rendered by default.

22 changes: 19 additions & 3 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,31 @@
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.26",
"@fortawesome/free-solid-svg-icons": "^5.12.0",
"@fortawesome/fontawesome-svg-core": "^1.2.27",
"@fortawesome/free-brands-svg-icons": "^5.12.1",
"@fortawesome/free-solid-svg-icons": "^5.12.1",
"@fortawesome/react-fontawesome": "^0.1.8",
"@testing-library/jest-dom": "^4.2.4",
"@types/jest": "^24.9.1",
"@types/lodash": "^4.14.149",
"@types/node": "^12.12.22",
"@types/normalizr": "^2.0.18",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"@types/react-fontawesome": "^1.6.4",
"@types/react-mentions": "^3.3.0",
"@types/react-redux": "^7.1.5",
"@types/react-router-dom": "^5.1.3",
"@types/react-syntax-highlighter": "^11.0.4",
"@types/react-tabs": "^2.3.1",
"@types/socket.io-client": "^1.4.32",
"@types/styled-components": "^4.4.1",
"@types/yup": "^0.26.27",
"axios": "^0.19.0",
"json-api-normalizer": "^0.4.16",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.15",
"normalizr": "^3.6.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-dropdown": "^1.6.4",
Expand All @@ -29,13 +37,16 @@
"react-markdown": "^4.3.1",
"react-masonry-css": "^1.0.14",
"react-mentions": "^3.3.1",
"react-modal": "^3.11.1",
"react-notify-toast": "^0.5.1",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"react-scripts": "^3.3.0",
"react-syntax-highlighter": "^12.2.1",
"react-tabs": "^3.1.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"socket.io-client": "^2.3.0",
"styled-components": "^5.0.0",
"typescript": "^3.7.4",
"yup": "^0.28.0"
Expand All @@ -45,6 +56,7 @@
"test:e2e:run": "start-server-and-test start http://localhost:3000 cy:run",
"cy:open": "cypress open",
"cy:run": "cypress run",
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
Expand All @@ -70,11 +82,15 @@
"@testing-library/cypress": "^5.0.2",
"@testing-library/dom": "^6.11.0",
"@testing-library/react": "^9.4.0",
"@testing-library/react-hooks": "^3.2.1",
"@testing-library/user-event": "^7.2.1",
"@types/testing-library__cypress": "^5.0.1",
"@types/testing-library__react": "^9.1.2",
"axios-mock-adapter": "^1.17.0",
"cypress": "^3.8.2",
"mutation-observer": "^1.0.3",
"react-test-renderer": "^16.13.0",
"source-map-explorer": "^2.3.1",
"start-server-and-test": "^1.10.6",
"webpack": "^4.41.5"
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,25 @@ interface AvatarProps {
[x: string]: any;
}

const StyledAvatar = styled.img<AvatarProps>`
width: ${p => p.width || '150px'};
height: ${p => p.height || '150px'};
border: ${p => p.theme.border};
border-radius: 100%;
object-fit: cover;
margin: 0px;
`;
const AvatarImage = styled.img(p => ({
width: p.width || 150,
height: p.height || 150,
border: p.theme.border,
borderRadius: '100%',
objectFit: 'cover',
margin: 0
}));

const Avatar: React.FC<AvatarProps> = ({
export const Avatar: React.FC<AvatarProps> = ({
username,
size,
width,
height,
...props
}) => {
return (
<Link to={`/profiles/${username}`}>
<StyledAvatar
<Link style={{ lineHeight: 0 }} to={`/profiles/${username}`}>
<AvatarImage
src={`/api/user/${username}/avatar/raw?size=${size}`}
width={width}
height={height}
Expand All @@ -37,5 +37,4 @@ const Avatar: React.FC<AvatarProps> = ({
</Link>
);
};

export default Avatar;
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@ import styled, { css } from 'styled-components/macro';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

interface StyledButtonProps {
variant?: 'primary' | 'secondary' | 'danger' | 'success';
size?: 'small' | 'medium';
width?: string;
success?: boolean;
danger?: boolean;
size?: 'sm' | 'md';
}

interface ButtonProps extends StyledButtonProps {
Expand All @@ -16,45 +15,31 @@ interface ButtonProps extends StyledButtonProps {
[x: string]: any;
}

export const ButtonGroup = styled.div`
> button {
margin-right: 10px;
}
`;
const button_sizes: any = {
small: css`
padding: 8px 10px;
font-size: 12px;
`,
medium: css`
padding: 10px 15px;
font-size: 12px;
`
};

// prettier-ignore
const StyledButton = styled.button<StyledButtonProps & React.HTMLAttributes<HTMLDivElement>>`
background-color: ${p => p.theme.colors.brand.primary};
color: ${p => p.theme.colors.common.white};
${p => p.success && css`
background-color: ${p => p.theme.colors.common.greenlight};
color: ${p => p.theme.colors.common.green};
`}
${p => p.danger && css`
background-color: ${p => p.theme.colors.common.redlight};
color: ${p => p.theme.colors.common.red};
`}
type IStyledButton = StyledButtonProps & React.HTMLAttributes<HTMLDivElement>;

const StyledButton = styled.button<IStyledButton>`
width: ${p => p.width};
height: fit-content;
margin: 10px 0;
padding: 10px 15px;
border: none;
border-radius: 50px;
padding: 10px 15px;
margin: 10px 0;
cursor: pointer;
transition: 0.2s;
line-height: 1;
font-size: 14px;
${p => p.size === 'sm' && css`
padding: 10px 15px;
font-size: 12px;
`}
${p => p.size === 'md' && css`
padding: 10px 15px;
font-size: 12px;
`}
transition: 0.2s;
cursor: pointer;
&:hover {
transform: scale(1.05);
Expand All @@ -64,17 +49,32 @@ const StyledButton = styled.button<StyledButtonProps & React.HTMLAttributes<HTML
&:disabled {
opacity: 0.8;
}
${p => (p.theme.variants as any)[p.variant as string]}
${p => button_sizes[p.size as string]};
@media screen and (${p => p.theme.media.mobile}) {
padding: 10px 25px;
}
`;

const Button: React.FC<ButtonProps> = ({
export const Button: React.FC<ButtonProps> = ({
variant = 'primary',
size,
width,
icon,
children,
type,
isLoading,
...props
}) => (
<StyledButton {...props} size={size} disabled={isLoading} width={width}>
<StyledButton
{...props}
variant={variant}
size={size}
disabled={isLoading}
width={width}
>
{icon && (
<FontAwesomeIcon
data-testid="icon"
Expand All @@ -86,4 +86,17 @@ const Button: React.FC<ButtonProps> = ({
</StyledButton>
);

export const ButtonGroup = styled.div<{ float?: string }>`
float: ${p => p.float || 'initial'};
> button {
margin-right: 10px !important;
}
@media screen and (${p => p.theme.media.mobile}) {
> button {
float: right;
}
}
`;

export default Button;
42 changes: 42 additions & 0 deletions client/src/@bug-ui/CircleIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react';
import styled from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

type variant = 'primary' | 'success' | 'danger' | 'secondary';
interface StyledCircleProps {
variant: variant;
size?: string | undefined;
}
export const StyledCircleIcon = styled.div<StyledCircleProps>`
font-size: 14px;
border-radius: 50px;
min-width: ${p => p.size || '40px'};
min-height: ${p => p.size || '40px'};
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
${p => (p.theme.variants as any)[p.variant as string]}
`;

interface CircleIconProps {
variant?: variant;
icon: any;
size?: string;
[x: string]: any;
}
export const CircleIcon: React.FC<CircleIconProps> = ({
icon,
variant = 'secondary',
size,
...props
}) => {
return (
<StyledCircleIcon size={size} variant={variant} {...props}>
<FontAwesomeIcon icon={icon} />
</StyledCircleIcon>
);
};

export default CircleIcon;
Loading

0 comments on commit 2f1e603

Please sign in to comment.