Full refactor (#1)

* Added snapguidist generated folder to git ignore list

* Chore: Updated project deps

* Chore: Added dot files for npm, yarn and editorconfig

* Feat: Added snapguidist config module

* Feat: Updated example to use the new config module

* Chore: fixed project deps

* Tests: Updated test to support the new deps of the project

* Chore: Updated example deps

* Chore: Updated react-styleguidist to master until a new  version is released

* Refactor: Moved files in more specialized directories

* Chore: updated build script to pre-create folders to avoid cssnano errors

* Chore: Added git hooks support with opt-cli options to let developers in control

* Tests: Fixed test to support new folder structure

* Refactor: Improved scaffold and added support for styleguidist server hook

* Chore: updated styleguidist deps to play nice with yarn

* Chore: Updated to latest release of react-styleguisit (4.5.0)

* Chore: Added .opt-in and .opt-out files to git's ignore list

* Refactor: Moved 'style.css' back to src/dist folder

* Chore: Removed unnecessary dependency to mkdirp

* Chore: Fixed a wrong expression in 'prepush' command

* Refactor: Changed and improved naming of several files and folders

* Refactor: Updated modules consumed by react-styleguidist to use commonJS exports and imports

* Refactor: Improved snapguidist webapck config to work in a real environment

* Style: eslint fixes

* Chore: added comma-dangle rule to eslint

* Chore: added babel-preset-stage-0 and cross-env modules

* Refactor: Updated example to work properly both standalone and as snapguidist dev environment

* Chore: Updated project to use src as main source and to run the example in dev mode

* Chore: Removed build process and related dependencies

* Refactor: Removed need of an environment variable to run DEV mode

* Refactor: Improved example to expose 2 different styleguide config files for dev and normal mode

* Chore: Updated start command for DEV mode to use the new example configuration file

* Chore: Removed cross-env dependency

* Chore: Moved Express from deps to dev-deps

* Chore: Removed babel-cli dependency

* Refactor: All snapguidist endpoints now are under 'snapguidist' path

* Docs: Updated project's readme

* Chore: Bumped project version to 1.0.0

* Docs: Fixed some texts

* Refactor: Minor tweaks to clean up the project

* Docs: Updated project's readme with Michele's suggestions

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig helps developers define and maintain
+# consistent coding styles between different editors and IDEs.
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false
+indent_style = space
+indent_size = 2

.eslintrc

@@ -8,6 +8,13 @@
 
   "rules": {
     "semi": [2, "never"],
+    "comma-dangle": ["error", {
+      "arrays": "always-multiline",
+      "objects": "always-multiline",
+      "imports": "always-multiline",
+      "exports": "always-multiline",
+      "functions": "never"
+    }],
     "react/jsx-filename-extension": [2, { "extensions": [".js"] }],
     "import/no-extraneous-dependencies": [2, { "devDependencies": ["example/**/*", "test/**/*"] }]
   }

.gitignore

@@ -1,2 +1,5 @@
-dist
+.opt.in
+.opt-out
+.snapguidist
 node_modules
+npm-debug.log

.npmrc

@@ -0,0 +1 @@
+save-exact=true

.yarnrc

@@ -0,0 +1 @@
+save-prefix false

README.md

@@ -1,4 +1,4 @@
-[![Build Status](https://travis-ci.org/MicheleBertoli/snapguidist.svg?branch=master)](https://travis-ci.org/MicheleBertoli/snapguidist)
+[![npm version](https://badge.fury.io/js/snapguidist.svg)](https://badge.fury.io/js/snapguidist) [![Build Status](https://travis-ci.org/MicheleBertoli/snapguidist.svg?branch=master)](https://travis-ci.org/MicheleBertoli/snapguidist)
 
 # Snapguidist
 Snapshot testing for [React Styleguidist](https://github.com/styleguidist/react-styleguidist).
@@ -9,36 +9,67 @@ Snapshot testing for [React Styleguidist](https://github.com/styleguidist/react-
 
 # Getting Started
 
-:warning: This package is a proof of concept.
-
-However, if you are brave enough and want to give it a try, follow these steps:
+To add `snapguidist` to your `react-styleguidist` configuration, follow these steps:
 
 1. install the package using yarn or npm:
 
   ```bash
   yarn add --dev snapguidist
   ```
 
-2. add the script to the `package.json`:
+2. enhance the webpack configuration in `styleguide.config.js`:
 
-  ```json
-    "scripts": {
-      "snapguidist": "snapguidist"
-    }
-  ```
+    ```javascript
+    const path = require('path')
+    const snapguidist = require('snapguidist')
 
-3. add the webpack configuration to the `styleguide.config.js`:
+    module.exports = snapguidist({
+      title: 'Snapguidist Styleguide',
 
-  ```javascript
-    if (env === 'development') {
-      webpackConfig.module.loaders.push({
-        test: /\.css$/,
-        include: path.resolve(__dirname, 'node_modules/snapguidist'),
-        loaders: ['style', 'css'],
-      })
-      webpackConfig.entry.push('snapguidist/dist/styles.css')
+      components: 'src/components/**/[A-Z]*.js',
+
+      updateWebpackConfig(webpackConfig) {
+        const sourceFolder = path.resolve(__dirname, 'src')
+
+        webpackConfig.module.loaders.push({
+          test: /\.jsx?$/,
+          include: sourceFolder,
+          loader: 'babel',
+        })
+
+        return webpackConfig
+      },
+    })
+    ```
+
+## Caveats
+
+This is the first release of `snapguidist`, should you experience any issue please let us know.
+
+The package overrides a few `rsg` components from `react-styleguidist`:
+
+ * `rsg-components/Playground/PlaygroundRenderer`
+ * `rsg-components/Preview`
+
+Therefore, you won't be able to override them again in your project.
+
+We are working with [@sapegin](https://github.com/sapegin/) (the author of `react-styleguist`) to find a solution.
+
+# Example
+
+To run the example, install the dependencies and start it:
+
+```bash
+cd example
+yarn install
+yarn start
+```
+
+# Development
+
+If you want contribute to `snapguidist`, please start the example from the root folder to enable the *hot-reload*:
+
+```bash
+yarn start
+```
 
-      webpackConfig.resolve.alias['rsg-components/Playground/PlaygroundRenderer'] = 'snapguidist/dist/PlaygroundRenderer'
-      webpackConfig.resolve.alias['rsg-components/Preview'] = 'snapguidist/dist/Preview'
-    }
-  ```

example/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

example/.eslintrc

@@ -7,6 +7,8 @@
       "imports": "always-multiline",
       "exports": "always-multiline",
       "functions": "never"
-    }]
+    }],
+    "import/no-dynamic-require": 0,
+    "import/newline-after-import": 0
   }
 }

example/package.json

@@ -3,14 +3,13 @@
   "version": "0.1.0",
   "license": "MIT",
   "scripts": {
-    "styleguide-server": "styleguidist server"
+    "start": "styleguidist server"
   },
   "devDependencies": {
-    "babel-core": "^6.20.0",
-    "babel-loader": "^6.2.10",
-    "react": "^15.4.1",
-    "react-dom": "^15.4.1",
-    "react-styleguidist": "^4.4.1",
-    "webpack": "^1.14.0"
+    "react": "15.4.1",
+    "react-dom": "15.4.1",
+    "react-styleguidist": "4.5.0",
+    "snapguidist": "1.0.0",
+    "webpack": "1.14.0"
   }
 }

example/styleguide.config.dev.js

@@ -0,0 +1,21 @@
+const path = require('path')
+const snapguidist = require(path.join(__dirname, '..', 'src', 'index'))
+
+module.exports = snapguidist({
+  title: '[dev] Snapguidist Styleguide',
+
+  components: 'src/components/**/[A-Z]*.js',
+
+  updateWebpackConfig(webpackConfig) {
+    webpackConfig.devtool = 'source-map'
+
+    const sourceFolder = path.resolve(__dirname, 'src')
+    webpackConfig.module.loaders.push({
+      test: /\.jsx?$/,
+      include: sourceFolder,
+      loader: 'babel',
+    })
+
+    return webpackConfig
+  },
+})

example/styleguide.config.js

@@ -1,38 +1,19 @@
 const path = require('path')
+const snapguidist = require('snapguidist')
 
-module.exports = {
-  title: 'My Great Style Guide',
+module.exports = snapguidist({
+  title: 'Snapguidist Styleguide',
 
-  components: './src/**/*.js',
+  components: 'src/components/**/[A-Z]*.js',
 
   updateWebpackConfig(webpackConfig) {
-    webpackConfig.module.loaders.push(
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        loader: 'babel',
-        query: {
-          presets: [
-            'babel-preset-es2015',
-            'babel-preset-react',
-          ].map(require.resolve),
-        },
-      },
-      {
-        test: /\.css$/,
-        exclude: /node_modules/,
-        loaders: ['style', 'css'],
-      }
-    )
-
-    webpackConfig.resolve.modulesDirectories = ['./example/node_modules', './node_modules']
-
-    webpackConfig.entry.push(path.join(__dirname, '../src/client/styles.css'))
-
-    webpackConfig.resolve.alias['rsg-components/Playground/PlaygroundRenderer'] = path.join(__dirname, '../src/client/PlaygroundRenderer')
-    webpackConfig.resolve.alias['rsg-components/Preview'] = path.join(__dirname, '../src/client/Preview')
+    const sourceFolder = path.resolve(__dirname, 'src')
+    webpackConfig.module.loaders.push({
+      test: /\.jsx?$/,
+      include: sourceFolder,
+      loader: 'babel',
+    })
 
     return webpackConfig
   },
-
-}
+})