Folder restructuring

.babelrc

@@ -1,3 +1,7 @@
 {
-  "presets": ["react", "env"]
+  "presets": ["react", "env"],
+  "plugins": [
+    "styled-jsx/babel",
+    "transform-class-properties"
+  ]
 }

.github/contributing.md

@@ -9,21 +9,7 @@
 
 ## Commit Message
 
-Given that this is a monorepo it is important, for visual clarity in Git History, to preface your commit message with the project that it affects.
-
-#### Bad:
-
-```
-Add React
-```
-
-#### Good:
-
-```
-BLKN: Add React
-```
-
-Please also refer to https://chris.beams.io/posts/git-commit/ for how to write commit messages.
+Please see https://chris.beams.io/posts/git-commit/ for information on how to write commit messages.
 
 ## Commit History
 
@@ -32,7 +18,7 @@ We are using merges in this project without squashing. Please pay attention that
 #### Bad:
 
 ```
-- BLKN: Add React
+- Add React
 - add react-dom
 - fix deps
 - another fix
@@ -42,6 +28,6 @@ We are using merges in this project without squashing. Please pay attention that
 #### Good:
 
 ```
-- BLKN: add React & React-Dom
-- BLKN: resolve peer dependencies of React
+- add React & React-Dom
+- resolve peer dependencies of React
 ```

icons/bin/build.js → config/build.js

@@ -9,31 +9,33 @@ const SVGO = require("svgo");
 const glob = require("glob");
 const svg2png = require("svg2png");
 
-const files = glob.sync("**/*.svg");
+const files = glob.sync("src/icons/**/*.svg");
 const names = files.map(inputFileName => {
-  const outputBaseName = path
-    .basename(inputFileName)
-    .replace(/( \(custom\))?\.svg$/, "")
-    .replace(/^ icn-/, "");
-  const functionName = capitalize(camelcase(outputBaseName));
-  const outputFileName = `${outputBaseName}.jsx`;
+  const functionName = capitalize(
+    camelcase(
+      path
+        .basename(inputFileName)
+        .replace(/( \(custom\))?\.svg$/, "")
+        .replace(/^ icn-/, ""),
+    ),
+  );
+  const outputJsxFileName = `${functionName}.jsx`;
 
   return {
     inputFileName,
-    outputBaseName,
-    outputFileName,
+    outputJsxFileName,
     functionName,
   };
 });
 
-const jsxPath = path.join(__dirname, "..", "jsx");
+const jsxPath = path.join(__dirname, "..", "src", "icons");
 mkdirp(jsxPath);
-const pngPath = path.join(__dirname, "..", "png");
+const pngPath = path.join(__dirname, "..", "src", "icons", "png");
 mkdirp(pngPath);
-const relativePngPath = pngPath.substring(path.join(__dirname, "..", "..").length);
+const relativePngPath = pngPath.substring(path.join(__dirname, "..").length);
 const svgo = new SVGO();
 
-names.forEach(async ({ inputFileName, outputBaseName, outputFileName, functionName }) => {
+names.forEach(async ({ inputFileName, outputJsxFileName, functionName }) => {
   const dom = await JSDOM.fromFile(inputFileName);
   const shapes = dom.window.document.querySelector("defs").innerHTML;
 
@@ -47,33 +49,30 @@ names.forEach(async ({ inputFileName, outputBaseName, outputFileName, functionNa
   const optimizedSvg = optimizationResult.data;
 
   const component = `/* eslint-disable */
-import * as React from "react";
-
-export default function ${functionName}(props) {
-  return (
-    ${optimizedSvg.replace(/<svg(\s[^>]*)>/, "<svg$1 {...props}>")}
-  );
-}
+    import * as React from "react";
+ 
+    export default function ${functionName}(props) {
+      return (
+        ${optimizedSvg.replace(/<svg(\s[^>]*)>/, "<svg$1 {...props}>")}
+      );
+    }
 `;
 
-  fs.writeFileSync(path.join(jsxPath, outputFileName), component);
+  fs.writeFileSync(path.join(jsxPath, outputJsxFileName), component);
 
   const png = await svg2png(optimizedSvg);
-  fs.writeFileSync(path.join(pngPath, `${outputBaseName}.png`), png);
+  fs.writeFileSync(path.join(pngPath, `${functionName}.png`), png);
 });
 
 const index = names
-  .map(
-    ({ outputBaseName, functionName }) =>
-      `export { default as ${functionName} } from "./${outputBaseName}";\n`,
-  )
+  .map(({ functionName }) => `export { default as ${functionName} } from "./${functionName}";\n`)
   .join("");
 fs.writeFileSync(path.join(jsxPath, "index.js"), index);
 
 const iconsIndex = names
   .map(
-    ({ outputBaseName, functionName }) =>
-      `- ![${functionName}](${relativePngPath}/${outputBaseName}.png?raw=true) ${functionName}\n`,
+    ({ functionName }) =>
+      `- ![${functionName}](${relativePngPath}/${functionName}.png?raw=true) ${functionName}\n`,
   )
   .join("");
-fs.writeFileSync(path.join(__dirname, "..", "icons.md"), iconsIndex);
+fs.writeFileSync(path.join(__dirname, "..", "src", "icons", "icons.md"), iconsIndex);