ADD: added old style for primary buttons, added styleguidist stuff and wrappers

Author: Aaronkala

package.json

@@ -26,7 +26,8 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
-    "deploy": "firebase deploy"
+    "deploy": "firebase deploy",
+    "styleguide": "npx styleguidist server"
   },
   "browserslist": [
     ">0.2%",

src/components/grid/grid.js

@@ -9,6 +9,7 @@ import {
   space,
   gridArea,
   display,
+  gridAutoFlow,
 } from 'styled-system';
 
 const Grid = styled.div`
@@ -19,6 +20,7 @@ const Grid = styled.div`
     ${gridAutoColumns}
     ${gridTemplateRows}
     ${gridTemplateColumns}
+    ${gridAutoFlow}
     ${space}
     ${gridArea}
     ${display}

src/components/skillBlock/readme.md

@@ -0,0 +1,3 @@
+```js
+<Block variant="primary">Skill</Block>
+```

src/components/skillBlock/skillBlock.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from 'rebass';
 
-const Block = ({ children, skill = null, active }) => {
+const Block = props => {
   // builds a custom link :sweat-smile:
-  let name = skill || children;
+  let name = props.skill || props.children;
   const link = `/portfolio/${encodeURI(name.toLowerCase().replace(' ', '-'))}`;
   return (
-    <Button as={Link} to={link} active={active}>
-      {children}
+    <Button as={Link} to={link} {...props}>
+      {props.children}
     </Button>
   );
 };

src/components/wrapper/wrapper.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import createBrowserHistory from 'history/createBrowserHistory';
+import ThemeWrapper from '../../styles/themeWrapper';
+
+const history = createBrowserHistory();
+
+export default ({ children }) => (
+  <ThemeWrapper>
+    <Router history={history}>{children}</Router>
+  </ThemeWrapper>
+);

src/index.js

@@ -1,29 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ThemeProvider } from 'styled-components';
-import { Router, Route, Switch } from 'react-router-dom';
-import createBrowserHistory from 'history/createBrowserHistory';
+import { Route, Switch } from 'react-router-dom';
 
 import Home from './pages/home';
 import Portfolio from './pages/portfolio';
-import theme from './styles/theme';
-import GlobalStyles from './styles/globalStyles';
-
-const history = createBrowserHistory();
+import Wrapper from './components/wrapper/wrapper';
 
 function App() {
   return (
     <div className="App">
-      <GlobalStyles />
-      <ThemeProvider theme={theme}>
-        <Router history={history}>
-          <Switch>
-            <Route exact path="/" component={Home} />
-            <Route exact path="/portfolio" component={Portfolio} />
-            <Route path="/portfolio/:filter" component={Portfolio} />
-          </Switch>
-        </Router>
-      </ThemeProvider>
+      <Wrapper>
+        <Switch>
+          <Route exact path="/" component={Home} />
+          <Route exact path="/portfolio" component={Portfolio} />
+          <Route path="/portfolio/:filter" component={Portfolio} />
+        </Switch>
+      </Wrapper>
     </div>
   );
 }

src/pages/home/skills.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
+import { Box } from 'rebass';
 import Block from '../../components/skillBlock/skillBlock';
 import skillData from '../../static/data/skills.json';
 
 export default () => {
+  // TODO: Change skills mapping to a reducer
+  // BODY: It can be a reducer or a for loop. So that we don't need to loop them 2 times on each render
   const programming_skills = skillData.filter(
     skill => skill.type === 'Programming',
   );
@@ -13,29 +16,29 @@ export default () => {
       <h2>Expertise</h2>
       <Group>
         <h3>Programming</h3>
-        <List>
+        {/* TODO: move skill lists to separate file */}
+        <Box flex>
           {programming_skills.map(skill => (
-            <Block key={skill.name}>{skill.name}</Block>
+            <Block mr="3" mb="3" variant="primary" key={skill.name}>
+              {skill.name}
+            </Block>
           ))}
-        </List>
+        </Box>
       </Group>
       <Group>
         <h3>Design</h3>
-        <List>
+        <Box>
           {design_skills.map(skill => (
-            <Block key={skill.name}>{skill.name}</Block>
+            <Block mr="3" mb="3" variant="primary" key={skill.name}>
+              {skill.name}
+            </Block>
           ))}
-        </List>
+        </Box>
       </Group>
     </div>
   );
 };
 
-const List = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`;
-
 const Group = styled.div`
   margin-bottom: 1em;
 `;

src/styles/theme.js

@@ -48,8 +48,22 @@ const theme = {
   space: [0, 4, 8, 16, 32, 64, 128, 256],
   buttons: {
     primary: {
+      display: 'inline-block',
+      padding: '0.5em 1em',
+      width: 'max-content',
+      border: 'medium none',
+      outline: 'currentcolor none medium',
+      transition: 'all 0.1s ease 0s',
+      cursor: 'pointer',
+      boxShadow: `${color.secondary} 4px 4px 0px 0px`,
+      borderRadius: 0,
       color: color.text,
       backgroundColor: color.primary,
+      '&:hover, &:active': {
+        boxShadow: 'rgb(96, 76, 141) 4px 4px 0px 0px',
+        backgroundColor: 'rgb(106, 217, 121)',
+        transform: 'scale(1.2)',
+      },
     },
     outline: {
       color: color.primary,

src/styles/themeWrapper.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import theme from './theme';
+import GlobalStyles from './globalStyles';
+import { ThemeProvider } from 'styled-components';
+
+export default ({ children }) => (
+  <ThemeProvider theme={theme}>
+    <React.Fragment>
+      <GlobalStyles />
+      {children}
+    </React.Fragment>
+  </ThemeProvider>
+);

styleguide.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 
 module.exports = {
   styleguideComponents: {
-    Wrapper: path.join(__dirname, 'src/styleguidist/wrapper'),
+    Wrapper: path.join(__dirname, 'src/components/wrapper/wrapper'),
   },
   skipComponentsWithoutExample: true,
 };