Messy commit

package.json

@@ -94,7 +94,7 @@
     "node_modules/**",
     "**/node_modules",
     "coverage/",
-    "**/.cache",
+    ".cache/**",
     "**/public"
   ],
   "browserslist": [

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "React mini",
+  "name": "React mini projects",
   "icons": [
     {
       "src": "favicon.ico",

scripts/get-pages.js

@@ -1,29 +1,29 @@
-const fs = require("fs");
-const path = require("path");
-const { getCwd } = require("./utils");
+const fs = require('fs')
+const path = require('path')
+const { getCwd } = require('./utils')
 
 function init(directories) {
-  const pageImport = [];
-  const pageExport = [];
+  const pageImport = []
+  const pageExport = []
 
   directories.forEach(e => {
-    pageImport.push(`import ${e} from '../pages/${e}';`);
-    pageExport.push(`\t${e}: ${e},`);
-  });
+    pageImport.push(`import ${e} from '../pages/${e}';`)
+    pageExport.push(`\t${e}: ${e},`)
+  })
 
   const writeToFile = [
     "// this file is created by './scripts/get-pages.js' and used in App.js\n",
-    pageImport.join("\n"),
-    "\nconst pages = {",
-    pageExport.join("\n"),
-    "}\n",
-    "export default pages\n"
+    pageImport.join('\n'),
+    '\nconst pages = {',
+    pageExport.join('\n'),
+    '}\n',
+    'export default pages\n',
   ].join('\n')
 
-  fs.writeFileSync(path.join(__dirname, "../", "src/data/pages.js"), writeToFile);
+  fs.writeFileSync(path.join(__dirname, '../', 'src/data/pages.js'), writeToFile)
 }
 
-const [, , ...args] = process.argv;
-const directories = getCwd(args[0]).dirs;
+const [, , ...args] = process.argv
+const directories = getCwd(args[0]).dirs
 
-init(directories);
+init(directories)

scripts/utils.js

@@ -1,20 +1,20 @@
-const fs = require("fs");
-const path = require("path");
+const fs = require('fs')
+const path = require('path')
 
-exports.getCwd = function(filePath = ".") {
-  const $path = path.join(process.cwd(), String(filePath));
+exports.getCwd = function (filePath = '.') {
+  const $path = path.join(process.cwd(), String(filePath))
 
   const types = {
     path: path.resolve($path),
     files: [],
-    dirs: []
-  };
+    dirs: [],
+  }
 
   fs.readdirSync($path).forEach(e => {
-    const stats = fs.statSync(path.join($path, e));
-    if (stats.isDirectory()) types.dirs.push(e);
-    if (stats.isFile()) types.files.push(e);
-  });
+    const stats = fs.statSync(path.join($path, e))
+    if (stats.isDirectory()) types.dirs.push(e)
+    if (stats.isFile()) types.files.push(e)
+  })
 
-  return types;
-};
+  return types
+}

src/components/Component.js

@@ -1,18 +1,19 @@
-import React from "react";
-import { grab } from "../utils";
+import React from 'react'
+import { grabFirst as grab, stringMethods as $s } from '../utils'
 
 export const Component = props => {
-  const { m, my, mx, mt, mr, mb, ml, p, py, px, pt, pr, pb, pl, ...props2 } = props;
+  const { m, my, mx, mt, mr, mb, ml, p, py, px, pt, pr, pb, pl, padding, margin, ...props2 } = props
 
   const {
-    component: Component = props.as || "div",
+    component: Component = props.as || 'div',
     as,
     children,
-    padding,
-    margin,
     style,
+    theme,
+    color,
+    className,
     ...attr
-  } = props2;
+  } = props2
 
   const spacing = {
     marginTop: grab(mt, my, m, margin),
@@ -22,14 +23,14 @@ export const Component = props => {
     paddingTop: grab(pt, py, p, padding),
     paddingRight: grab(pr, px, p, padding),
     paddingBottom: grab(pb, py, p, padding),
-    paddingLeft: grab(pl, px, p, padding)
-  };
+    paddingLeft: grab(pl, px, p, padding),
+  }
 
   return (
-    <Component {...attr} style={{ ...spacing, ...style }}>
+    <Component className={$s.list(color, theme, className)} {...attr} style={{ ...spacing, ...style }}>
       {children}
     </Component>
-  );
-};
+  )
+}
 
-export default Component;
+export default Component

src/components/Container.js

@@ -1,5 +1,5 @@
-import React from "react";
-import styled from "styled-components";
+import React from 'react'
+import styled from 'styled-components'
 
 const Container = styled.div`
   display: flex;
@@ -19,8 +19,8 @@ const Container = styled.div`
   & nav {
     flex-grow: 1;
   }
-`;
+`
 
 export default function ({children, ...attr}) {
-  return <Container {...attr}>{children}</Container>;
+  return <Container {...attr}>{children}</Container>
 }