React setup (#57)

.gitignore

@@ -72,4 +72,33 @@ node_modules/
 .Spotlight-V100
 .Trashes
 ehthumbs.db
-Thumbs.db
+Thumbs.db
+
+# REACT #
+
+# dependencies
+app/node_modules
+app/.pnp
+app.pnp.js
+
+# testing
+app/coverage
+
+# production
+app/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+app/.DS_Store
+app/.env.local
+app/.env.development.local
+app/.env.test.local
+app/.env.production.local
+
+app/npm-debug.log*
+app/storybook/*

README.md

@@ -1,67 +1,77 @@
 # cbf-community-website
+
 ### This is the repository for the Coding Black Females community website
-----------------------------
+
+- For the React site readme, click [here](/app/README.md)
+
+---
 
 ## To test your changes to the website before raising a PR (Pull Request)
 
 ## Prerequisites
-  - Node.js (including NPM) - learn more about Node.js [`here`](https://nodejs.org/)
+
+- Node.js (including NPM) - learn more about Node.js [`here`](https://nodejs.org/)
 
 ## Node.js installation
+
 ### How do i know if i have nodeJS installed
 
-In your command line terminal (e.g. iTerm or Terminal), TYPE: 
+In your command line terminal (e.g. iTerm or Terminal), TYPE:
 
- `node -v`
+`node -v`
 
 This should tell you which Node.js version you have installed. ✅
 
-If not, please install it to continue. There are various ways to install Node.js 
+If not, please install it to continue. There are various ways to install Node.js
 
-----------------------------
+---
 
 ### How to install Node.js
 
 The simplest way is to download Node.js pre-built installer [`here`](https://nodejs.org/en/download/)
 
-
 ### Alternatively, you can install from the command line terminal using Homebrew
-If you use [`Homebrew`](https://brew.sh/) for example, TYPE: 
 
- `brew install node`
+If you use [`Homebrew`](https://brew.sh/) for example, TYPE:
+
+`brew install node`
 
 In any case, please choose whichever method suits you.
 
-----------------------------
+---
+
 ## How to get these files on your computer so you can work on it locally
+
 If you have not already done so ...
-Git clone this repo e.g. TYPE: 
+Git clone this repo e.g. TYPE:
 
- `git clone https://github.com/CodingBlackFemales/cbf-community-website.git`
+`git clone https://github.com/CodingBlackFemales/cbf-community-website.git`
 
 more info on this from here: [`Git-Basics-Getting-a-Git-Repository`](https://git-scm.com/book/en/v2/Git-Basics-Getting-a-Git-Repository)
 
-----------------------------
+---
+
 ## Steps to run to CBF community website locally
-Now for the fun bit 😅 - launching 🚀  the webserver locally 💻 
-
+
+Now for the fun bit 😅 - launching 🚀 the webserver locally 💻
+
 In the command line do the following, TYPE:
-
-* `cd cbf-community-website` - to go into the CBF Community Website project folder
 
-* `cd functions` - to go into the [`functions/`](https://github.com/CodingBlackFemales/cbf-community-website/blob/master/functions/) folder
+- `cd cbf-community-website` - to go into the CBF Community Website project folder
 
-* [`npm install`](https://docs.npmjs.com/cli/install) - to install all the required node modules from [`package.json`](https://github.com/CodingBlackFemales/cbf-community-website/blob/master/functions/package.json)
-
-* `npm run local` or `node index.js` - this will launch the website locally
+- `cd functions` - to go into the [`functions/`](https://github.com/CodingBlackFemales/cbf-community-website/blob/master/functions/) folder
+
+- [`npm install`](https://docs.npmjs.com/cli/install) - to install all the required node modules from [`package.json`](https://github.com/CodingBlackFemales/cbf-community-website/blob/master/functions/package.json)
+- `npm run local` or `node index.js` - this will launch the website locally
 
 If all went well 🤞🏿 you can now view your local version of cbf community website here:
- 
+
 ## http://localhost:3000 🎊
 
 #### If you have any problems or suggestions let us know so we can update this README
 
-### That's it! Happy coding black females 
+### That's it! Happy coding black females
+
 # 👩🏿‍💻
 
 ## Credits

app/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["babel-plugin-styled-components"]
+}

app/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

app/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 80,
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

app/.storybook/ThemeWrapper.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import theme from '../src/theme';
+
+export default function themeWrapper(storyFn) {
+  return <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>;
+}

app/.storybook/addons.js

@@ -0,0 +1,5 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-links/register';
+
+// More at https://storybook.js.org/addons/

app/.storybook/config.js

@@ -0,0 +1,13 @@
+import { addDecorator, configure } from '@storybook/react';
+import '../src/index.css';
+
+import ThemeWrapper from './ThemeWrapper';
+addDecorator(ThemeWrapper);
+
+const req = require.context('../src', true, /\.stories\.jsx$/);
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

app/.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../src/**/*.stories.jsx'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+  ],
+};