From b602670f8cda8d33b080d57eed9bd1a93ad66a4d Mon Sep 17 00:00:00 2001
From: Subh <skund2@sapient.com>
Date: Fri, 16 Nov 2018 19:22:34 +0530
Subject: [PATCH 1/3] feat: adding ability to have hyphenated classnames

---
 README.md                      | 12 ++++++++++++
 package.json                   |  2 +-
 src/components/doc.jsx         |  9 ++++++---
 src/components/es6-preview.jsx |  7 +++++--
 src/components/playground.jsx  | 23 +++++++++++++++--------
 src/components/preview.jsx     |  9 ++++++---
 src/utils/string.js            |  3 +++
 7 files changed, 48 insertions(+), 17 deletions(-)
 create mode 100644 src/utils/string.js

diff --git a/README.md b/README.md
index 3ff586d..e96c373 100644
--- a/README.md
+++ b/README.md
@@ -156,6 +156,18 @@ var ComponentExample = React.createClass({
 React.render(<ComponentExample/>, mountNode);
 ```
 
+### hyphenatedClassNames
+_React.PropTypes.bool_
+
+Defaults to false. If set to false, allows return the classnames of the component wrapper and rest of them as hyphenated.
+You can use this option to have the classnames as hyphenated.
+
+```js
+  <Playground
+    hyphenatedClassNames={true}
+  />
+```
+
 ### Comparison to [react-live](https://github.com/FormidableLabs/react-live)
 
 There are multiple options when it comes to live, editable React component environments. Formidable actually has **two** first class projects to help you out: [`component-playground`](https://github.com/FormidableLabs/component-playground) and [`react-live`](https://github.com/FormidableLabs/react-live). Let's briefly look at the libraries, use cases, and factors that might help in deciding which is right for you.
diff --git a/package.json b/package.json
index c61320a..fb2772b 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "build-es": "npm run clean-es && babel src --out-dir es",
     "clean": "npm run clean-lib && npm run clean-dist && npm run clean-es",
     "build": "npm run build-lib && npm run build-dist && npm run build-es",
-    "server-dev": "webpack-dev-server --port 3000 --config demo/webpack.config.dev.js --content-base demo",
+    "server-dev": "webpack-dev-server --port 4000 --config demo/webpack.config.dev.js --content-base demo",
     "server-hot": "webpack-dev-server --port 3000 --config demo/webpack.config.hot.js --hot --content-base demo",
     "server-test": "webpack-dev-server --port 3001 --config webpack.config.test.js",
     "dev": "npm run server-dev & npm run server-test",
diff --git a/src/components/doc.jsx b/src/components/doc.jsx
index 17d8893..27858e3 100644
--- a/src/components/doc.jsx
+++ b/src/components/doc.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import { getHyphenatedClassNames } from '../utils/string';
 
 const propTypesArray = [{
   key: "array",
@@ -65,7 +66,8 @@ class Doc extends Component {
   static propTypes = {
     componentClass: PropTypes.func,
     ignore: PropTypes.array,
-    propDescriptionMap: PropTypes.object
+    propDescriptionMap: PropTypes.object,
+    hyphenatedClassNames: PropTypes.bool
   };
 
   render() {
@@ -74,7 +76,8 @@ class Doc extends Component {
     const {
       componentClass,
       ignore,
-      propDescriptionMap
+      propDescriptionMap,
+      hyphenatedClassNames = false
     } = this.props;
     for (const propName in componentClass.propTypes) {
       if (ignore.indexOf(propName)) {
@@ -87,7 +90,7 @@ class Doc extends Component {
     }
 
     return (
-      <div className="playgroundDocs">
+      <div className={getHyphenatedClassNames("playgroundDocs", hyphenatedClassNames)}>
         <ul>
           {
             propTypes.map((propObj) => (
diff --git a/src/components/es6-preview.jsx b/src/components/es6-preview.jsx
index 37c20dc..179523d 100644
--- a/src/components/es6-preview.jsx
+++ b/src/components/es6-preview.jsx
@@ -3,6 +3,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { render, unmountComponentAtNode } from "react-dom";
 import { transform } from "babel-standalone";
+import { getHyphenatedClassNames } from '../utils/string';
 
 const getType = function (el) {
   let t = typeof el;
@@ -84,7 +85,8 @@ class EsPreview extends Component {
 
   static propTypes = {
     code: PropTypes.string.isRequired,
-    scope: PropTypes.object.isRequired
+    scope: PropTypes.object.isRequired,
+    hyphenatedClassNames: PropTypes.bool
   };
 
   _compileCode = () => {
@@ -108,6 +110,7 @@ class EsPreview extends Component {
 
   _executeCode = () => {
     const mountNode = this.mount;
+    const { hyphenatedClassNames = false } = this.props;
 
     try {
       unmountComponentAtNode(mountNode);
@@ -155,7 +158,7 @@ class EsPreview extends Component {
     } catch (err) {
       this._setTimeout(() => {
         render(
-          <div className="playgroundError">{err.toString()}</div>,
+          <div className={getHyphenatedClassNames("playgroundError", hyphenatedClassNames)}>{err.toString()}</div>,
           mountNode
         );
       }, 500);
diff --git a/src/components/playground.jsx b/src/components/playground.jsx
index 438761f..aefa913 100644
--- a/src/components/playground.jsx
+++ b/src/components/playground.jsx
@@ -6,6 +6,7 @@ import Editor from "./editor";
 import Preview from "./preview";
 import EsPreview from "./es6-preview";
 import Doc from "./doc";
+import { getHyphenatedClassNames } from '../utils/string';
 
 // TODO: refactor to remove componentWillReceiveProps
 // eslint-disable-next-line react/no-deprecated
@@ -30,7 +31,8 @@ class ReactPlayground extends Component {
     es6Console: PropTypes.bool,
     context: PropTypes.object,
     initiallyExpanded: PropTypes.bool,
-    previewComponent: PropTypes.node
+    previewComponent: PropTypes.node,
+    hyphenatedClassNames: PropTypes.node
   };
 
   state = {
@@ -72,20 +74,23 @@ class ReactPlayground extends Component {
       propDescriptionMap,
       scope,
       selectedLines,
-      theme } = this.props;
+      theme,
+      hyphenatedClassNames = false
+    } = this.props;
 
     return (
-      <div className={`playground${collapsableCode ? " collapsableCode" : ""}`}>
+      <div className={collapsableCode ? getHyphenatedClassNames("playground collapsableCode", hyphenatedClassNames) : "playground"}>
         {
           docClass ?
             <Doc
               componentClass={docClass}
               propDescriptionMap={propDescriptionMap}
+              hyphenatedClassNames={hyphenatedClassNames}
             /> : null
         }
-        <div className={`playgroundCode${expandedCode ? " expandedCode" : ""}`}>
+        <div className={expandedCode ? getHyphenatedClassNames("playgroundCode expandedCode", hyphenatedClassNames) : getHyphenatedClassNames("playgroundCode", hyphenatedClassNames)}>
           <Editor
-            className="playgroundStage"
+            className={getHyphenatedClassNames("playgroundStage", hyphenatedClassNames)}
             codeText={codeText}
             external={external}
             onChange={this._handleCodeChange}
@@ -95,18 +100,19 @@ class ReactPlayground extends Component {
         </div>
         {
           collapsableCode ?
-            <div className="playgroundToggleCodeBar">
-              <span className="playgroundToggleCodeLink" onClick={this._toggleCode}>
+            <div className={getHyphenatedClassNames("playgroundToggleCodeBar", hyphenatedClassNames)}>
+              <span className={getHyphenatedClassNames("playgroundToggleCodeLink", hyphenatedClassNames)} onClick={this._toggleCode}>
                 {expandedCode ? "collapse" : "expand"}
               </span>
             </div> : null
         }
-        <div className="playgroundPreview">
+        <div className={getHyphenatedClassNames("playgroundPreview", hyphenatedClassNames)}>
           {
             es6Console ?
               <EsPreview
                 code={code}
                 scope={scope}
+                hyphenatedClassNames={hyphenatedClassNames}
               /> :
               <Preview
                 context={context}
@@ -114,6 +120,7 @@ class ReactPlayground extends Component {
                 scope={scope}
                 noRender={noRender}
                 previewComponent={previewComponent}
+                hyphenatedClassNames={hyphenatedClassNames}
               />
           }
         </div>
diff --git a/src/components/preview.jsx b/src/components/preview.jsx
index ffbb1ea..6412b24 100644
--- a/src/components/preview.jsx
+++ b/src/components/preview.jsx
@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { render } from "react-dom";
 import ReactDOMServer from "react-dom/server";
 import { transform } from "babel-standalone";
+import { getHyphenatedClassNames } from '../utils/string';
 
 class Preview extends Component {
 
@@ -16,7 +17,8 @@ class Preview extends Component {
     scope: PropTypes.object.isRequired,
     previewComponent: PropTypes.node,
     noRender: PropTypes.bool,
-    context: PropTypes.object
+    context: PropTypes.object,
+    hyphenatedClassNames: PropTypes.bool
   };
 
   state = {
@@ -112,12 +114,13 @@ class Preview extends Component {
 
   render() {
     const { error } = this.state;
+    const { hyphenatedClassNames = false } = this.props;
     return (
       <div>
         {error !== null ?
-          <div className="playgroundError">{error}</div> :
+          <div className={getHyphenatedClassNames("playgroundError", hyphenatedClassNames)}>{error}</div> :
           null}
-        <div ref={(c) => { this.mount = c; }} className="previewArea"/>
+        <div ref={(c) => { this.mount = c; }} className={getHyphenatedClassNames("previewArea", hyphenatedClassNames)} />
       </div>
     );
   }
diff --git a/src/utils/string.js b/src/utils/string.js
new file mode 100644
index 0000000..36078d4
--- /dev/null
+++ b/src/utils/string.js
@@ -0,0 +1,3 @@
+export function getHyphenatedClassNames(className, flag) {
+  return flag ? className.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : className;
+}
\ No newline at end of file

From 18e0c1215d45f32dccb04d99d31560e3cc21d2db Mon Sep 17 00:00:00 2001
From: Subh <skund2@sapient.com>
Date: Fri, 16 Nov 2018 19:56:11 +0530
Subject: [PATCH 2/3] fix: eslint fix

---
 src/components/doc.jsx         |  2 +-
 src/components/es6-preview.jsx |  8 ++++++--
 src/components/playground.jsx  | 25 ++++++++++++++++++++-----
 src/components/preview.jsx     | 16 ++++++++++++----
 src/utils/string.js            |  6 +++---
 5 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/src/components/doc.jsx b/src/components/doc.jsx
index 27858e3..f720718 100644
--- a/src/components/doc.jsx
+++ b/src/components/doc.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { getHyphenatedClassNames } from '../utils/string';
+import { getHyphenatedClassNames } from "../utils/string";
 
 const propTypesArray = [{
   key: "array",
diff --git a/src/components/es6-preview.jsx b/src/components/es6-preview.jsx
index 179523d..efdd219 100644
--- a/src/components/es6-preview.jsx
+++ b/src/components/es6-preview.jsx
@@ -3,7 +3,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { render, unmountComponentAtNode } from "react-dom";
 import { transform } from "babel-standalone";
-import { getHyphenatedClassNames } from '../utils/string';
+import { getHyphenatedClassNames } from "../utils/string";
 
 const getType = function (el) {
   let t = typeof el;
@@ -158,7 +158,11 @@ class EsPreview extends Component {
     } catch (err) {
       this._setTimeout(() => {
         render(
-          <div className={getHyphenatedClassNames("playgroundError", hyphenatedClassNames)}>{err.toString()}</div>,
+          <div
+            className={getHyphenatedClassNames("playgroundError", hyphenatedClassNames)}
+          >
+            {err.toString()}
+          </div>,
           mountNode
         );
       }, 500);
diff --git a/src/components/playground.jsx b/src/components/playground.jsx
index aefa913..bef486d 100644
--- a/src/components/playground.jsx
+++ b/src/components/playground.jsx
@@ -6,7 +6,7 @@ import Editor from "./editor";
 import Preview from "./preview";
 import EsPreview from "./es6-preview";
 import Doc from "./doc";
-import { getHyphenatedClassNames } from '../utils/string';
+import { getHyphenatedClassNames } from "../utils/string";
 
 // TODO: refactor to remove componentWillReceiveProps
 // eslint-disable-next-line react/no-deprecated
@@ -79,7 +79,11 @@ class ReactPlayground extends Component {
     } = this.props;
 
     return (
-      <div className={collapsableCode ? getHyphenatedClassNames("playground collapsableCode", hyphenatedClassNames) : "playground"}>
+      <div
+        className={collapsableCode ?
+          getHyphenatedClassNames("playground collapsableCode", hyphenatedClassNames)
+          : "playground"}
+      >
         {
           docClass ?
             <Doc
@@ -88,7 +92,11 @@ class ReactPlayground extends Component {
               hyphenatedClassNames={hyphenatedClassNames}
             /> : null
         }
-        <div className={expandedCode ? getHyphenatedClassNames("playgroundCode expandedCode", hyphenatedClassNames) : getHyphenatedClassNames("playgroundCode", hyphenatedClassNames)}>
+        <div
+          className={expandedCode ?
+            getHyphenatedClassNames("playgroundCode expandedCode", hyphenatedClassNames)
+            : getHyphenatedClassNames("playgroundCode", hyphenatedClassNames)}
+        >
           <Editor
             className={getHyphenatedClassNames("playgroundStage", hyphenatedClassNames)}
             codeText={codeText}
@@ -100,8 +108,15 @@ class ReactPlayground extends Component {
         </div>
         {
           collapsableCode ?
-            <div className={getHyphenatedClassNames("playgroundToggleCodeBar", hyphenatedClassNames)}>
-              <span className={getHyphenatedClassNames("playgroundToggleCodeLink", hyphenatedClassNames)} onClick={this._toggleCode}>
+            <div
+              className={getHyphenatedClassNames("playgroundToggleCodeBar", hyphenatedClassNames)}
+            >
+              <span
+                className={
+                  getHyphenatedClassNames("playgroundToggleCodeLink", hyphenatedClassNames)
+                }
+                onClick={this._toggleCode}
+              >
                 {expandedCode ? "collapse" : "expand"}
               </span>
             </div> : null
diff --git a/src/components/preview.jsx b/src/components/preview.jsx
index 6412b24..44fbf5f 100644
--- a/src/components/preview.jsx
+++ b/src/components/preview.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { render } from "react-dom";
 import ReactDOMServer from "react-dom/server";
 import { transform } from "babel-standalone";
-import { getHyphenatedClassNames } from '../utils/string';
+import { getHyphenatedClassNames } from "../utils/string";
 
 class Preview extends Component {
 
@@ -118,9 +118,17 @@ class Preview extends Component {
     return (
       <div>
         {error !== null ?
-          <div className={getHyphenatedClassNames("playgroundError", hyphenatedClassNames)}>{error}</div> :
-          null}
-        <div ref={(c) => { this.mount = c; }} className={getHyphenatedClassNames("previewArea", hyphenatedClassNames)} />
+          <div
+            className={getHyphenatedClassNames("playgroundError", hyphenatedClassNames)}
+          >
+            {error}
+          </div> :
+          null
+        }
+        <div
+          ref={(c) => { this.mount = c; }}
+          className={getHyphenatedClassNames("previewArea", hyphenatedClassNames)}
+        />
       </div>
     );
   }
diff --git a/src/utils/string.js b/src/utils/string.js
index 36078d4..104bc12 100644
--- a/src/utils/string.js
+++ b/src/utils/string.js
@@ -1,3 +1,3 @@
-export function getHyphenatedClassNames(className, flag) {
-  return flag ? className.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : className;
-}
\ No newline at end of file
+export const getHyphenatedClassNames = (className, flag) => {
+  return flag ? className.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase() : className;
+};

From 336cfaa439ff4499a499bb025507b76d751982ee Mon Sep 17 00:00:00 2001
From: Subh <skund2@sapient.com>
Date: Sat, 17 Nov 2018 11:58:45 +0530
Subject: [PATCH 3/3] fix: reverting unment changes

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fb2772b..c61320a 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "build-es": "npm run clean-es && babel src --out-dir es",
     "clean": "npm run clean-lib && npm run clean-dist && npm run clean-es",
     "build": "npm run build-lib && npm run build-dist && npm run build-es",
-    "server-dev": "webpack-dev-server --port 4000 --config demo/webpack.config.dev.js --content-base demo",
+    "server-dev": "webpack-dev-server --port 3000 --config demo/webpack.config.dev.js --content-base demo",
     "server-hot": "webpack-dev-server --port 3000 --config demo/webpack.config.hot.js --hot --content-base demo",
     "server-test": "webpack-dev-server --port 3001 --config webpack.config.test.js",
     "dev": "npm run server-dev & npm run server-test",