initial scaffolding and working draft

Author: jacobsfletch

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf
+max_line_length = null

.eslintrc.js

@@ -0,0 +1,41 @@
+module.exports = {
+  parser: "babel-eslint",
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: 'airbnb',
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+    dataLayer: 'readonly',
+    Munchkin: 'readonly'
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+  ],
+  rules: {
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "no-console": 0,
+    "camelcase": 0,
+    "arrow-body-style": 0,
+    "jsx-a11y/anchor-is-valid": ["error", {
+      "aspects": ["invalidHref", "preferButton"]
+    }],
+    "jsx-a11y/click-events-have-key-events": 0,
+    "react/no-array-index-key": 0,
+    "max-len": 0,
+    "react/no-danger": 0,
+    "react/no-did-update-set-state": 0,
+    "object-curly-newline": 0,
+    "import/prefer-default-export": 0,
+    "no-throw-literal": 0,
+  },
+};

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+.DS_Store

README.md

@@ -0,0 +1,49 @@
+# React CSS Grid
+
+## Source Code
+
+### Abstract
+
+This project leverages React's Context API as well as the newly instituted CSS Grid Layout specification in a way that allows for an elegantly abstracted horizontal column system, complete with nested-column support.
+
+### Component Composition
+
+```javascript
+  <GridProvider numberOfColumns={14} gutterSize={'10px' || 'columnWidth'}>
+    <Row>
+      <Column span={4}>
+        <Row>
+          <Column span={2} />
+          <Column span={2} />
+        </Row>
+      </Column>
+      <Column span={10} />
+    </Row>
+  </GridProvider>
+```
+
+### Component Documentation
+
+The source components in their raw form are found in the `src` directory. These are all batch exported from the top-level `index.js` so that they can be easily accessed via import.
+
+[Grid Row](/src/Row/README.md)
+[Grid Column](/src/Column/README.md)
+[Grid Provider](/src/GridProvider/README.md)
+
+## Environment
+
+### Distribution
+
+The entrypoint for the production bundle is `/dist/build.bundle.js`, as defined in `package.json`. Importing this project will return that bundle.
+
+### Compilation and Transpilation
+
+Generating this production bundle is defined in `webpack.production.config.js`, one of two custom webpack configurations defined at the top of this repo. It simply processes all of the `.js` files within the `src` directory through the `babel-loader` transpiler and into the `dist` directory.
+
+  - tldr: `npm run build`.
+
+### Development
+
+The other webpack configuration is `webpack.development.config.js` which does a few things differently -- compilation happens from the `demo` directory as opposed to the `src` directory. It then will spin up `webpack-dev-server`, which serves a compiled and transpiled build _in memory_, with hot-reloading enabled.
+
+  - tldr: `npm run dev`.

demo/App.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Row, Column, GridProvider } from '../src';
+
+// Testing may include:
+// - Changing the `gutterSize` from "columnWidth" to a static dimension, i.e. 10px
+// - Changing the numberOfColumns to various integers and adjusting the `span` props as necessary
+
+const App = () => {
+  return (
+    <GridProvider numberOfColumns={14} gutterSize="10px">
+      <Row>
+        <Column span={4} style={{ backgroundColor: 'lightpink' }}>
+          <Row>
+            <Column span={2} style={{ backgroundColor: 'rgba(0, 0, 0, .15)' }}>
+              <p>Nested Column</p>
+            </Column>
+            <Column span={2} style={{ backgroundColor: 'rgba(0, 0, 0, .15)'  }}>
+              <p>Nested Column</p>
+            </Column>
+          </Row>
+        </Column>
+        <Column span={10} style={{ backgroundColor: 'lightpink' }}>
+          <p>Column</p>
+        </Column>
+      </Row>
+    </GridProvider>
+  )
+}
+
+export default App;

demo/index.html

@@ -0,0 +1,7 @@
+<html>
+  <head></head>
+  <body>
+    <noscript>Enable JavaScript</noscript>
+    <div id="root"></div>
+  </body>
+</html>

demo/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { render } from 'react-dom';
+import App from './app.js';
+
+render(<App />, document.getElementById('root'));