Skip to content

Commit a4689f9

Browse files
BetreeBetree
authored
chore: Project & deps udpate (#1047)
1 parent fd02059 commit a4689f9

30 files changed

+1324
-2236
lines changed

‎components/CollectiveFooter.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { Box, Flex } from '@opencollective/frontend-components/components/Grid';
3+
import { Box, Flex } from './styled-components/Grid';
44
import CollectiveAddress from './CollectiveAddress';
55
import { imagePreview } from '../lib/utils';
6-
import Container from '@opencollective/frontend-components/components/Container';
7-
import StyledLink from '@opencollective/frontend-components/components/StyledLink';
8-
import { P } from '@opencollective/frontend-components/components/Text';
6+
import Container from './styled-components/Container';
7+
import StyledLink from './styled-components/StyledLink';
8+
import { P } from './styled-components/Text';
99

1010
const CollectiveFooter = ({ collective }) => {
1111
return (

‎components/ExpenseInvoice.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ import { chunk, get, max, round, sumBy } from 'lodash';
22
import PropTypes from 'prop-types';
33
import React from 'react';
44
import { FormattedMessage } from 'react-intl';
5-
import { Box, Flex } from '@opencollective/frontend-components/components/Grid';
5+
import { Box, Flex } from './styled-components/Grid';
66
import PageFormat from '../lib/constants/page-format';
77
import { formatCurrency } from '../lib/utils';
88
import AccountName from './AccountName';
99
import CollectiveAddress from './CollectiveAddress';
1010
import ExpenseItemsTable from './ExpenseItemsTable';
11-
import StyledLink from '@opencollective/frontend-components/components/StyledLink';
12-
import { H2, P, Span } from '@opencollective/frontend-components/components/Text';
13-
import Container from '@opencollective/frontend-components/components/Container';
14-
import StyledHr from '@opencollective/frontend-components/components/StyledHr';
11+
import StyledLink from './styled-components/StyledLink';
12+
import { H2, P, Span } from './styled-components/Text';
13+
import Container from './styled-components/Container';
14+
import StyledHr from './styled-components/StyledHr';
1515
import { sumItemsInExpenseCurrency } from '../lib/expenses';
1616

1717
const getPageHeight = (pageFormat) => {

‎components/ExpenseItemsTable.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Tr, Td } from './StyledTable';
44
import { FormattedMessage, FormattedDate } from 'react-intl';
55
import { formatAmount, formatCurrency } from '../lib/utils';
66
import { round, sumBy, uniq } from 'lodash';
7-
import { Span } from '@opencollective/frontend-components/components/Text';
7+
import { Span } from './styled-components/Text';
88
import { getItemAmounts } from '../lib/expenses';
99

1010
const ExpenseItemsTable = ({ items, expense }) => {

‎components/LinkToCollective.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import { FormattedMessage } from 'react-intl';
44
import AccountName from './AccountName';
5-
import StyledLink from '@opencollective/frontend-components/components/StyledLink';
5+
import StyledLink from './styled-components/StyledLink';
66

77
/**
88
* Returns event's parent collective slug. If the parent is not available,

‎components/PrintableGiftCard.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ import { borderRadius, fontSize } from 'styled-system';
77

88
import { ExternalLink } from '@styled-icons/feather/ExternalLink';
99

10-
import { Box, Flex } from '@opencollective/frontend-components/components/Grid';
10+
import { Box, Flex } from './styled-components/Grid';
1111

1212
import opencollectiveLogoUrl from '../public/static/images/opencollective-icon.svg';
1313
import opencollectiveBackground from '../public/static/images/oc-gift-card-front-straightened.png';
1414
import { formatCurrency } from '../lib/utils';
15-
import { P, Span } from '@opencollective/frontend-components/components/Text';
16-
import Container from '@opencollective/frontend-components/components/Container';
17-
import StyledLink from '@opencollective/frontend-components/components/StyledLink';
18-
import StyledHr from '@opencollective/frontend-components/components/StyledHr';
15+
import { P, Span } from './styled-components/Text';
16+
import Container from './styled-components/Container';
17+
import StyledLink from './styled-components/StyledLink';
18+
import StyledHr from './styled-components/StyledHr';
1919

2020
const Card = styled(Box)`
2121
font-family: Helvetica, sans-serif;

‎components/Receipt.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import { FormattedMessage, injectIntl } from 'react-intl';
44
import { get, chunk, sumBy, max, isNil, round, uniqBy } from 'lodash';
5-
import { Box, Flex } from '@opencollective/frontend-components/components/Grid';
5+
import { Box, Flex } from './styled-components/Grid';
66
import moment from 'moment';
77
import QRCode from 'qrcode.react';
88

@@ -24,11 +24,11 @@ import PageFormat from '../lib/constants/page-format';
2424
import CollectiveFooter from './CollectiveFooter';
2525
import CustomIntlDate from './CustomIntlDate';
2626
import AccountName from './AccountName';
27-
import StyledLink from '@opencollective/frontend-components/components/StyledLink';
28-
import { H1, H2, P, Span } from '@opencollective/frontend-components/components/Text';
29-
import Container from '@opencollective/frontend-components/components/Container';
30-
import StyledTag from '@opencollective/frontend-components/components/StyledTag';
31-
import StyledHr from '@opencollective/frontend-components/components/StyledHr';
27+
import StyledLink from './styled-components/StyledLink';
28+
import { H1, H2, P, Span } from './styled-components/Text';
29+
import Container from './styled-components/Container';
30+
import StyledTag from './styled-components/StyledTag';
31+
import StyledHr from './styled-components/StyledHr';
3232
import { EventDescription } from './EventDescription';
3333
import { formatPaymentMethodName } from '../lib/payment-methods';
3434

‎components/styled-components/Container.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import type React from 'react';
2+
import type { CSSProp } from 'styled-components';
3+
import styled from 'styled-components';
4+
import type {
5+
BackgroundProps,
6+
BorderProps,
7+
ColorProps,
8+
FlexboxProps,
9+
LayoutProps,
10+
PositionProps,
11+
ShadowProps,
12+
SizeProps,
13+
SpaceProps,
14+
TypographyProps,
15+
} from 'styled-system';
16+
import { background, border, color, flexbox, layout, position, shadow, size, space, typography } from 'styled-system';
17+
18+
import type {
19+
ClearProps,
20+
CursorProps,
21+
FloatProps,
22+
OverflowProps,
23+
PointerEventsProps,
24+
WhiteSpaceProps,
25+
WordBreakProps,
26+
} from '../../lib/styled-system-custom-properties';
27+
import {
28+
clear,
29+
cursor,
30+
float,
31+
overflow,
32+
pointerEvents,
33+
whiteSpace,
34+
wordBreak,
35+
} from '../../lib/styled-system-custom-properties';
36+
37+
export type ContainerProps = FlexboxProps &
38+
BackgroundProps &
39+
BorderProps &
40+
LayoutProps &
41+
ShadowProps &
42+
ClearProps &
43+
ColorProps &
44+
CursorProps &
45+
FloatProps &
46+
OverflowProps &
47+
PointerEventsProps &
48+
PositionProps &
49+
SpaceProps &
50+
TypographyProps &
51+
WhiteSpaceProps &
52+
SizeProps &
53+
WordBreakProps &
54+
React.HTMLProps<HTMLDivElement> & {
55+
clearfix?: boolean;
56+
css?: CSSProp;
57+
};
58+
59+
const FILTERED_PROPS = new Set(['display', 'width', 'height', 'overflow']);
60+
61+
const Container = styled.div.withConfig({
62+
shouldForwardProp: (prop, validate) => validate(prop) && !FILTERED_PROPS.has(prop),
63+
})<ContainerProps>`
64+
box-sizing: border-box;
65+
66+
${flexbox}
67+
${background}
68+
${border}
69+
${shadow}
70+
${clear}
71+
${color}
72+
${cursor}
73+
${float}
74+
${overflow}
75+
${pointerEvents}
76+
${position}
77+
${layout}
78+
${space}
79+
${size}
80+
${typography}
81+
${whiteSpace}
82+
${wordBreak}
83+
${(props) =>
84+
props.clearfix &&
85+
`
86+
::after {
87+
content: "";
88+
display: table;
89+
clear: both;
90+
}
91+
`}
92+
`;
93+
94+
export default Container;

‎components/styled-components/Grid.ts‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/**
2+
* This file is a copy-paste from https://github.com/rebassjs/grid/blob/master/src/index.js.
3+
* See https://github.com/opencollective/opencollective/issues/2929 for more info.
4+
*/
5+
6+
import propTypes from '@styled-system/prop-types';
7+
import styled from 'styled-components';
8+
import type { ColorProps, FlexboxProps, GridProps, LayoutProps, SpaceProps, TypographyProps } from 'styled-system';
9+
import { border, color, compose, flexbox, grid, layout, space, typography } from 'styled-system';
10+
11+
export const boxProps = compose(space, color, layout, typography, flexbox, grid, border);
12+
13+
type BoxProps = SpaceProps &
14+
ColorProps &
15+
FlexboxProps &
16+
GridProps &
17+
LayoutProps &
18+
TypographyProps & {
19+
gap?: string | number;
20+
css?: string | object;
21+
};
22+
23+
const FILTERED_PROPS = new Set(['display', 'width', 'height']);
24+
25+
export const Box = styled.div.withConfig({
26+
shouldForwardProp: (prop, validate) => validate(prop) && !FILTERED_PROPS.has(prop),
27+
})<BoxProps>(
28+
{
29+
boxSizing: 'border-box',
30+
},
31+
boxProps,
32+
);
33+
34+
Box.displayName = 'Box';
35+
36+
Box.propTypes = {
37+
...propTypes.space,
38+
...propTypes.color,
39+
...propTypes.layout,
40+
...propTypes.typography,
41+
...propTypes.flexbox,
42+
};
43+
44+
export type FlexProps = BoxProps;
45+
46+
export const Flex = styled(Box)<FlexProps>(
47+
(props) => ({
48+
display: 'flex',
49+
gap: props.gap,
50+
}),
51+
compose(space, layout, flexbox),
52+
);
53+
54+
Flex.displayName = 'Flex';
55+
56+
export const Grid = styled.div<BoxProps>(
57+
{
58+
boxSizing: 'border-box',
59+
display: 'grid',
60+
'> div': { 'min-width': 0 },
61+
},
62+
compose(space, grid, layout, flexbox),
63+
);

‎components/styled-components/StyledHr.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import propTypes from '@styled-system/prop-types';
2+
import { themeGet } from '@styled-system/theme-get';
3+
import type React from 'react';
4+
import styled from 'styled-components';
5+
import type { BorderProps, DisplayProps, FlexProps, LayoutProps, ShadowProps, SpaceProps } from 'styled-system';
6+
import { border, display, flex, layout, shadow, space } from 'styled-system';
7+
8+
type StyledHrProps = SpaceProps &
9+
FlexProps &
10+
LayoutProps &
11+
ShadowProps &
12+
BorderProps &
13+
DisplayProps &
14+
React.HTMLProps<HTMLHRElement>;
15+
16+
/**
17+
* An horizontal line. Control the color and size using border properties.
18+
*/
19+
const StyledHr = styled.hr<StyledHrProps>`
20+
border: 0;
21+
border-top: 1px solid ${themeGet('colors.black.400')};
22+
margin: 0;
23+
height: 1px;
24+
25+
${space}
26+
${flex}
27+
${layout}
28+
${shadow}
29+
${border}
30+
${display}
31+
`;
32+
33+
StyledHr.propTypes = {
34+
...propTypes.space,
35+
...propTypes.flex,
36+
...propTypes.layout,
37+
...propTypes.shadow,
38+
...propTypes.border,
39+
...propTypes.display,
40+
};
41+
42+
/** @component */
43+
export default StyledHr;

0 commit comments

Comments
 (0)