feat: v2 (#1)

BREAKING: Upgrade to styled-components v4

.babelrc

@@ -15,7 +15,6 @@
   },
   "plugins": [
     "@babel/plugin-proposal-export-default-from",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-object-rest-spread"
+    "@babel/plugin-proposal-class-properties"
   ]
 }

README.md

@@ -1,10 +1,20 @@
 <div align="center">
-  <h1>Refractal</h1>
+  <h1>⚛️ Molekule</h1>
   <p>The last React component library you'll ever need</p>
 
 
-  [![Build Status](https://travis-ci.org/sappira-inc/refractal.svg?branch=master)](https://travis-ci.org/sappira-inc/refractal)
-  [![codecov](https://codecov.io/gh/sappira-inc/refractal/branch/master/graph/badge.svg)](https://codecov.io/gh/sappira-inc/refractal)
+  [![Build Status](https://travis-ci.org/sappira-inc/molekule.svg?branch=master)](https://travis-ci.org/sappira-inc/molekule)
+  [![codecov](https://codecov.io/gh/sappira-inc/molekule/branch/master/graph/badge.svg)](https://codecov.io/gh/sappira-inc/molekule)
   [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-:D-blue.svg?style="flats")](https://conventionalcommits.org)
 </div>
 
+
+## Contributing
+
+Check out the [projects](https://github.com/sappira-inc/refractal/projects) to see if there are any outstanding components to be developed.
+
+```sh
+$ git clone [email protected]:sappira-inc/refractal.git
+$ npm install
+$ npm run docs
+```

docs/intro.mdx

@@ -0,0 +1,8 @@
+---
+name: Introduction
+route: /
+---
+
+# Welcome to Molekule
+
+Molekule is a React UI kit built on styled-components and styled-system.

docs/theme.mdx

@@ -6,7 +6,7 @@ order: 1
 
 # Theming
 
-Refractal comes with a default theme. You can override any of these configurations by passing a `theme` object to `<ThemeProvider />`
+Molekule comes with a default theme. You can override any of these configurations by passing a `theme` object to `<ThemeProvider />`
 
 ```js
 {

docs/wrapper.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-
 import { ThemeProvider } from '../src';
 
 class App extends Component {

doczrc.js

@@ -1,13 +1,33 @@
 export default {
-  base: process.env.NODE_ENV === 'production' ? '/refractal' : '',
-  title: 'Refractal',
+  base: process.env.NODE_ENV === 'production' ? '/molekule' : '',
+  title: 'Molekule',
   dest: './dist',
   description: 'React UI Framework based on styled-components and styled-system',
   port: 1234,
   wrapper: 'docs/wrapper.js',
   propsParser: true,
-  modifyBundlerConfig: config => {
-    config.optimization = {
+  menu: [['Introduction'], ['Guides', ['Theming']], ['Components', ['Grid']]],
+  htmlContext: {
+    head: {
+      links: [
+        {
+          rel: 'stylesheet',
+          href: 'https://codemirror.net/theme/dracula.css',
+        },
+        {
+          rel: 'stylesheet',
+          href: 'https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css',
+        },
+      ],
+    },
+  },
+  themeConfig: {
+    mode: 'dark',
+    codemirrorTheme: 'dracula',
+  },
+  modifyBundlerConfig: config => ({
+    ...config,
+    optimization: {
       runtimeChunk: true,
       nodeEnv: 'production',
       namedModules: true,
@@ -17,7 +37,6 @@ export default {
         name: 'vendors',
       },
       minimize: false,
-    };
-    return config;
-  },
+    },
+  }),
 };