Skip to content

Commit 7350c43

Browse files
hosmelqhosmelq
committed
update deps and replace SC/Rebass with Emotion/Chakra
1 parent 3c9d2e6 commit 7350c43

File tree

15 files changed

+3088
-2711
lines changed

15 files changed

+3088
-2711
lines changed

‎package.json‎

Lines changed: 18 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,23 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@fortawesome/fontawesome-svg-core": "1.2.18",
7-
"@fortawesome/free-regular-svg-icons": "5.8.2",
8-
"@fortawesome/free-solid-svg-icons": "5.8.2",
9-
"@fortawesome/react-fontawesome": "0.1.4",
10-
"date-fns": "2.0.0-alpha.27",
11-
"gh-pages": "2.0.1",
12-
"husky": "2.3.0",
13-
"lint-staged": "8.1.7",
14-
"moment": "2.24.0",
15-
"prettier": "1.17.1",
16-
"react": "16.8.6",
17-
"react-dom": "16.8.6",
18-
"react-scripts": "3.0.1",
19-
"rebass": "3.1.0",
20-
"sanitize.css": "9.0.0",
21-
"styled-components": "4.2.0"
6+
"@chakra-ui/core": "0.5.2",
7+
"@emotion/core": "10.0.27",
8+
"@emotion/styled": "10.0.27",
9+
"@fortawesome/fontawesome-svg-core": "1.2.27",
10+
"@fortawesome/free-regular-svg-icons": "5.12.1",
11+
"@fortawesome/free-solid-svg-icons": "5.12.1",
12+
"@fortawesome/react-fontawesome": "0.1.8",
13+
"date-fns": "2.9.0",
14+
"emotion-theming": "10.0.27",
15+
"gh-pages": "2.2.0",
16+
"husky": "4.2.2",
17+
"lint-staged": "10.0.7",
18+
"prettier": "1.19.1",
19+
"react": "16.12.0",
20+
"react-dom": "16.12.0",
21+
"react-loops": "1.3.0",
22+
"react-scripts": "3.3.1"
2223
},
2324
"scripts": {
2425
"build": "react-scripts build",
@@ -29,23 +30,7 @@
2930
"test": "react-scripts test"
3031
},
3132
"eslintConfig": {
32-
"extends": "react-app",
33-
"rules": {
34-
"no-restricted-imports": [
35-
"error",
36-
{
37-
"paths": [
38-
{
39-
"name": "styled-components",
40-
"message": "Please import from styled-components/macro."
41-
}
42-
],
43-
"patterns": [
44-
"!styled-components/macro"
45-
]
46-
}
47-
]
48-
}
33+
"extends": "react-app"
4934
},
5035
"browserslist": [
5136
">0.2%",

‎src/App.js‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,31 @@
11
import React from 'react';
2-
import {Box} from 'rebass';
3-
import styled from 'styled-components';
4-
5-
import Feed from './components/Feed';
2+
import {Box, CSSReset, ThemeProvider} from '@chakra-ui/core';
63

74
import Events from './components/Events';
5+
import Feed from './components/Feed';
86
import Footer from './components/Footer';
97
import Header from './components/Header';
108
import Welcome from './components/Welcome';
119
import OrgMembersDisplay from './components/Members';
1210
import Talks from './components/Talks';
1311

14-
const PostWrap = styled.div`
15-
margin: 0 auto;
16-
max-width: 948px;
17-
`;
18-
1912
function App() {
2013
return (
21-
<>
14+
<ThemeProvider>
15+
<CSSReset />
2216
<Header />
2317
<Welcome />
2418
<Box bg="#eff1f5">
25-
{/* Members list */}
2619
<OrgMembersDisplay orgName="js-ni" />
2720

2821
<Box m="0 auto" px={[3, 4, 0]} py={5}>
29-
<PostWrap>
30-
<Feed />
31-
</PostWrap>
22+
<Feed />
3223
</Box>
3324
</Box>
3425
<Talks />
3526
<Events />
3627
<Footer />
37-
</>
28+
</ThemeProvider>
3829
);
3930
}
4031

‎src/components/EventCard/index.js‎

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,60 @@
11
import {format, parseISO} from 'date-fns';
22
import esLocale from 'date-fns/locale/es';
33
import React from 'react';
4-
import {Box, Card, Heading, Image, Link, Text} from 'rebass';
4+
import {Box, Heading, Text} from '@chakra-ui/core';
55
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
66

77
function buildStaticMapUrl(lat, lng) {
88
return `https://maps.googleapis.com/maps/api/staticmap?center=${lat},${lng}&zoom=16&size=580x300&markers=color:red%7Clabel:%7C12.136062922753,-86.266359686852&key=AIzaSyC5YSkpeBuJyiBp0BnkWBW6Es3CQPymD84`;
99
}
1010

11-
function EventCard(props) {
11+
export default function EventCard(props) {
1212
let {place} = props;
1313
let {location} = place;
1414
let {latitude, longitude} = location;
1515

1616
return (
17-
<Card bg="white" borderRadius={4} css={{overflow: 'hidden'}}>
18-
<Image alt={props.name} src={buildStaticMapUrl(latitude, longitude)} />
19-
<Box color="#777" p={3} css={{lineHeight: '24px'}}>
20-
<Heading fontSize={3}>
21-
<Link
17+
<Box bg="white" rounded={4} overflow="hidden">
18+
<img alt={props.name} src={buildStaticMapUrl(latitude, longitude)} />
19+
<Box color="#777" p={3}>
20+
<Heading as="h3" size="md">
21+
<Box
22+
as="a"
2223
color="#4183c4"
2324
href={`https://www.facebook.com/events/${props.id}`}
2425
>
2526
{props.name}
26-
</Link>
27+
</Box>
2728
</Heading>
2829

29-
<Text mt={2} css={{textTransform: 'capitalize'}}>
30-
<FontAwesomeIcon fixedWidth icon={['far', 'calendar-alt']} />
31-
{format(parseISO(props.start_time), 'MMMM d, y', {locale: esLocale})}
32-
</Text>
33-
<Text>
34-
<FontAwesomeIcon fixedWidth icon={['far', 'clock']} />
35-
{format(parseISO(props.start_time), 'hh:mm a')} -{' '}
36-
{format(parseISO(props.end_time), 'hh:mm a')}
37-
</Text>
38-
<Text>
39-
<Link
40-
color="#777"
41-
href={`https://www.google.com/maps/@${latitude},${longitude},17z`}
42-
>
43-
<FontAwesomeIcon fixedWidth icon={['far', 'map']} />
44-
{place.name}
45-
</Link>
46-
</Text>
47-
<Text>
48-
<FontAwesomeIcon fixedWidth icon={['fas', 'globe-americas']} />
49-
{location.city}, {location.country}
50-
</Text>
30+
<Box color="gray.600">
31+
<Text mt={2}>
32+
<FontAwesomeIcon fixedWidth icon={['far', 'calendar-alt']} />
33+
{format(parseISO(props.start_time), 'MMMM d, y', {
34+
locale: esLocale,
35+
})}
36+
</Text>
37+
<Text>
38+
<FontAwesomeIcon fixedWidth icon={['far', 'clock']} />
39+
{format(parseISO(props.start_time), 'hh:mm a')} -{' '}
40+
{format(parseISO(props.end_time), 'hh:mm a')}
41+
</Text>
42+
<Text>
43+
<Box
44+
as="a"
45+
color="gray.600"
46+
href={`https://www.google.com/maps/@${latitude},${longitude},17z`}
47+
>
48+
<FontAwesomeIcon fixedWidth icon={['far', 'map']} />
49+
{place.name}
50+
</Box>
51+
</Text>
52+
<Text>
53+
<FontAwesomeIcon fixedWidth icon={['fas', 'globe-americas']} />
54+
{location.city}, {location.country}
55+
</Text>
56+
</Box>
5157
</Box>
52-
</Card>
58+
</Box>
5359
);
5460
}
55-
56-
export default EventCard;

‎src/components/Events/index.js‎

Lines changed: 18 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,32 @@
11
import React from 'react';
2-
import {Box, Heading} from 'rebass';
3-
import styled from 'styled-components/macro';
2+
import {For} from 'react-loops';
3+
import {Box, Grid, Heading} from '@chakra-ui/core';
44

55
import bgImage from './event.jpg';
66
import events from './events.json';
77
import EventCard from '../EventCard';
88

9-
const Container = styled.div`
10-
position: relative;
11-
12-
background-attachment: fixed;
13-
background-image: url(${bgImage});
14-
background-repeat: no-repeat;
15-
background-size: cover;
16-
17-
&:before {
18-
content: '';
19-
20-
bottom: 0;
21-
left: 0;
22-
position: absolute;
23-
right: 0;
24-
top: 0;
25-
26-
background-color: rgba(44, 62, 80, 0.9);
27-
}
28-
`;
29-
30-
function Events() {
9+
export default function Events() {
3110
return (
32-
<Container>
33-
<Box
34-
css={{maxWidth: '948px', position: 'relative'}}
35-
m="0 auto"
36-
px={[3, 4, 0]}
37-
py={5}
38-
width={[null]}
39-
>
40-
<Heading color="white" fontSize={28} fontWeight="normal">
11+
<Box
12+
backgroundAttachment="fixed"
13+
backgroundImage={`linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), url(${bgImage})`}
14+
backgroundRepeat="no-repeat"
15+
backgroundSize="cover"
16+
>
17+
<Box m="0 auto" maxWidth={948} px={[3, 4, 4, 0]} py={[4, 8]}>
18+
<Heading color="white" size="lg">
4119
Eventos
4220
</Heading>
4321

44-
<Box
45-
mt={3}
46-
css={{
47-
display: 'grid',
48-
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
49-
gridGap: '20px',
50-
}}
22+
<Grid
23+
gap={4}
24+
mt={4}
25+
templateColumns="repeat(auto-fill, minmax(280px, 1fr))"
5126
>
52-
{events.map(event => (
53-
<EventCard key={event.id} {...event} />
54-
))}
55-
</Box>
27+
<For of={events} as={event => <EventCard {...event} />} />
28+
</Grid>
5629
</Box>
57-
</Container>
30+
</Box>
5831
);
5932
}
60-
61-
export default Events;

‎src/components/Feed/effects.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const usePosts = function usePosts(RSSUrl) {
3939
// Each post has post content and description as HTML source.
4040
// This function has to provide a representation of these
4141
// values into their plain text conterpart.
42-
data.items = data.items.map(({content, description, ...rest}) => {
42+
const posts = data.items.map(({content, description, ...rest}) => {
4343
return {
4444
contentPlain: htmlToText(content),
4545
descriptionPlain: htmlToText(description),
@@ -49,7 +49,7 @@ export const usePosts = function usePosts(RSSUrl) {
4949
};
5050
});
5151

52-
setPosts(data.items);
52+
setPosts(posts);
5353
setLoading(false);
5454
});
5555
}, [RSSUrl]);

0 commit comments

Comments
 (0)