remove rebass and update deps

Author: hosmelq

package.json

@@ -22,16 +22,16 @@
   },
   "homepage": "https://github.com/js-ni/js-ni-medium-posts#readme",
   "dependencies": {
-    "ky": "0.4.1",
-    "rebass": "3.0.0-9"
+    "@nerdify/styled-system-primitives": "0.1.0",
+    "ky": "0.11.0"
   },
   "devDependencies": {
-    "microbundle": "0.7.0"
+    "microbundle": "0.11.0"
   },
   "peerDependencies": {
-    "react": "^16.7.0-alpha.0",
-    "react-dom": "^16.7.0-alpha.0",
-    "styled-components": "^4.0.2"
+    "@emotion/styled": "^10.0.11",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
   },
   "publishConfig": {
     "access": "public"

src/components/Article/index.js

@@ -1,21 +1,20 @@
 import React from 'react';
-import {Card, Heading, Link, Text} from 'rebass';
+import {Box, Heading, Text} from '@nerdify/styled-system-primitives';
 
-function Article(props) {
+function Article({article}) {
   return (
-    <Card
+    <Box
       as="article"
       bg="white"
-      borderRadius={4}
-      boxShadow="0px 4px 6px rgba(0, 0, 0, 0.1)"
       p={20}
+      style={{borderRadius: 4, boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)'}}
     >
-      <Link color="#222" href={props.url}>
-        <Heading as="h3" children={props.title} fontWeight="normal" mb="4px" />
-      </Link>
-      <Text as="time" color="#aaa" children={props.createdAt} />
-      <Text children={props.subtitle} color="#888" mt={16} />
-    </Card>
+      <Text as="a" color="#222" href={article.url}>
+        <Heading as="h3" children={article.title} fontSize={24} mb="4px" />
+      </Text>
+      <Text as="time" color="#aaa" children={article.createdAt} />
+      <Text children={article.subtitle} color="#888" mt={16} />
+    </Box>
   );
 }
 

src/components/Feed/index.js

@@ -1,26 +1,28 @@
 import ky from 'ky';
 import React, {useEffect, useState} from 'react';
-import {Box, Flex, Heading, Text} from 'rebass';
+import {Box, Heading, Text} from '@nerdify/styled-system-primitives';
 
 import Article from '../Article';
 
-let API_ENDPOINT = 'https://js-ni-blog-api.herokuapp.com';
+const API_ENDPOINT = 'https://js-ni-blog-api.herokuapp.com';
 
 function Feed() {
-  let [loading, setLoading] = useState(true);
-  let [posts, setPosts] = useState([]);
-
-  useEffect(async () => {
-    let data = await ky(API_ENDPOINT).json();
-
-    setPosts(data);
-    setLoading(false);
+  const [loading, setLoading] = useState(true);
+  const [posts, setPosts] = useState([]);
+
+  useEffect(() => {
+    ky(API_ENDPOINT)
+      .json()
+      .then(data => {
+        setPosts(data);
+        setLoading(false);
+      });
   }, []);
 
   return (
     <React.Fragment>
-      <Flex alignItems="flex-end" justifyContent="space-between">
-        <Heading fontSize={28} fontWeight="normal">
+      <Box alignItems="flex-end" display="flex" justifyContent="space-between">
+        <Heading fontSize={32} fontWeight="normal">
           Blog
         </Heading>
         <Text
@@ -30,16 +32,16 @@ function Feed() {
         >
           Ver más artículos
         </Text>
-      </Flex>
+      </Box>
 
       {loading ? (
-        <Text fontSize={16} mt={15}>
+        <Text fontSize={16} mt={16}>
           Cargando publicaciones...
         </Text>
       ) : (
         posts.map(post => (
           <Box key={post.url} mt={16}>
-            <Article {...post} />
+            <Article article={post} />
           </Box>
         ))
       )}