jamesgeorge007 · renjithgr · Jul 17, 2020 · Jul 24, 2020
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../src/**/*.stories.js'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+  ],
+};
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>CSS to X</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700" rel="stylesheet" />
+
+    <style></style>
+</head>
+
+<body></body>
+</html>
diff --git a/package.json b/package.json
@@ -6,11 +6,13 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "ace-builds": "^1.4.12",
     "css-to-react-native": "^3.0.0",
     "node-sass": "^4.13.1",
     "postcss": "^7.0.26",
     "postcss-js": "^2.0.3",
     "react": "^16.12.0",
+    "react-ace": "^9.1.1",
     "react-dom": "^16.12.0",
     "react-scripts": "^3.4.1"
   },
@@ -33,7 +35,9 @@
     "eject": "react-scripts eject",
     "format": "prettier --write tests/**/*.js src/**/*.{js,css,scss} *.md",
     "predeploy": "npm run build",
-    "deploy": "surge --project ./build --domain https://csstox.surge.sh"
+    "deploy": "surge --project ./build --domain https://csstox.surge.sh",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -51,6 +55,11 @@
     ]
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/preset-create-react-app": "^3.1.3",
+    "@storybook/react": "^5.3.19",
     "cypress": "^4.5.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.1",

diff --git a/public/index.html b/public/index.html
@@ -29,7 +29,7 @@
   <body>
 
   	<!-- GitHub Banner workaround -->
-  	<a href="https://github.com/jamesgeorge007/csstox" class="github-corner" aria-label="View source on GitHub" target="_blank" rel="noopener noreferrer"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+<!--  	<a href="https://github.com/jamesgeorge007/csstox" class="github-corner" aria-label="View source on GitHub" target="_blank" rel="noopener noreferrer"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>-->
     <!-- -->
 
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -45,7 +45,6 @@ function App() {
     >
       <div className="wrapper">
         <Header />
-        <Title />
         <Transform />
       </div>
     </Context.Provider>

diff --git a/src/components/code-editor/CodeEditor.js b/src/components/code-editor/CodeEditor.js
@@ -1,6 +1,10 @@
 import React, { useState, useEffect } from "react";
+import AceEditor from "react-ace";
 
 import "./code-editor.scss";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-css";
+import "ace-builds/src-noconflict/theme-github";
 
 const CodeEditor = (props) => {
   const {
@@ -9,6 +13,8 @@ const CodeEditor = (props) => {
     valueChanged,
     readOnly,
     type,
+    title,
+    syntaxMode,
     dataTestId,
   } = props;
   const [value, setValue] = useState(initialValue);
@@ -20,17 +26,34 @@ const CodeEditor = (props) => {
     valueChanged(value);
   };
 
-  const className = type === "input" ? "code code--input" : "code code--output";
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(value).then(
+      function () {
+        console.log("Written to the clipboard");
+      },
+      function () {
+        console.log("Writing to the clipboard failed");
+      }
+    );
+  };
+
+  const uniqueId = type === "input" ? "code--input" : "code--output";
 
   return (
-    <textarea
-      className={className}
-      value={value}
-      readOnly={readOnly}
-      placeholder={placeholder}
-      onChange={(e) => handleChange(e.target.value)}
-      data-testid={dataTestId}
-    />
+    <div className={"editor"} data-testid={dataTestId}>
+      <div className={"editor_title"}>
+        <h2>{title}</h2>
+      </div>
+      <AceEditor
+        mode={syntaxMode}
+        theme="github"
+        placeholder={placeholder}
+        onChange={handleChange}
+        value={value}
+        readOnly={readOnly}
+        name={uniqueId}
+      />
+    </div>
   );
 };
 

diff --git a/src/components/code-editor/code-editor.scss b/src/components/code-editor/code-editor.scss
@@ -1,27 +1,14 @@
-.code {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -o-box-sizing: border-box;
-  box-sizing: border-box;
+.editor {
+  display: flex;
+  flex-direction: column;
 
-  white-space: pre;
-  width: 100%;
-  display: block;
-  padding: 3%;
-  font: 14px/1.5em "Consolas", "Menlo", "Monaco", "Courier New", monospace;
-  font-weight: 550;
-  outline: none;
-  border: none;
-  resize: none;
-  height: 65vh;
-  overflow: scroll;
-  tab-size: 4;
+  .editor_title {
+    padding: 15px;
+    border: 1px solid rgb(228, 231, 235);
+    text-align: left;
+    color: #375eab;
+    font-size: 20px;
+  }
 }
 
-.code--input {
-  background: #ecf2f5;
-}
-
-.code--output {
-  background: #e0ebf5;
-}
+//background: #375eab;
diff --git a/src/components/code-editor/code-editor.stories.js b/src/components/code-editor/code-editor.stories.js
@@ -0,0 +1,14 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import CodeEditor from "./CodeEditor";
+
+storiesOf("Code Editor", module)
+  .add("default", () => {
+    return <CodeEditor />;
+  })
+  .add("with initial value", () => {
+    return <CodeEditor initialValue={"initial value"} />;
+  })
+  .add("read only", () => {
+    return <CodeEditor initialValue={"initial value"} readOnly={true} />;
+  });
diff --git a/src/components/header/Header.js b/src/components/header/Header.js
@@ -8,31 +8,29 @@ const Header = () => {
   const { outputType } = useContext(Context);
 
   return (
-    <header>
-      <div className="header-wrapper">
-        <div>
-          <h1>
-            CSS to &nbsp;
-            <SelectBox />
-          </h1>
-          <br />
-        </div>
-        <div>
-          <p data-testid="header-message">
-            Easily convert CSS text to {outputType} stylesheet objects.
-          </p>
-          <p>
-            &copy; 2020{" "}
-            <a
-              href="https://github.com/jamesgeorge007"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {" "}
-              James George{" "}
-            </a>
-          </p>
-        </div>
+    <header className="header">
+      <div>
+        <h1>
+          CSS to &nbsp;
+          <SelectBox />
+        </h1>
+        <br />
+      </div>
+      <div>
+        <p data-testid="header-message">
+          Easily convert CSS text to {outputType} stylesheet objects.
+        </p>
+        <p>
+          &copy; 2020{" "}
+          <a
+            href="https://github.com/jamesgeorge007"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {" "}
+            James George{" "}
+          </a>
+        </p>
       </div>
     </header>
   );

diff --git a/src/components/header/header.scss b/src/components/header/header.scss
@@ -1,29 +1,26 @@
-header {
+.header {
   padding: 20px;
-}
-
-.header-wrapper {
   display: flex;
 
   div {
     width: 50%;
   }
-}
 
-h1 {
-  font-size: 34px;
-  font-weight: bold;
-  line-height: 1.5em;
-}
+  h1 {
+    font-size: 34px;
+    font-weight: bold;
+    line-height: 1.5em;
+  }
 
-p {
-  font-size: 1.1em;
-  margin-top: 20px;
-  line-height: 1.5em;
+  p {
+    font-size: 1.1em;
+    margin-top: 20px;
+    line-height: 1.5em;
+  }
 }
 
 @media (max-width: 800px) {
-  .header-wrapper {
+  .header {
     flex-direction: column;
 
     div {

diff --git a/src/components/header/header.stories.js b/src/components/header/header.stories.js
@@ -0,0 +1,13 @@
+import React from "react";
+import Header from "./Header";
+import { Context } from "../../App";
+import { storiesOf } from "@storybook/react";
+
+storiesOf("Header", module).add("default", () => {
+  const contextValue = { outputType: "JSS" };
+  return (
+    <Context.Provider value={contextValue}>
+      <Header />
+    </Context.Provider>
+  );
+});
diff --git a/src/components/transform/Transform.js b/src/components/transform/Transform.js
@@ -6,7 +6,10 @@ import CodeEditor from "../code-editor/CodeEditor";
 import { Context } from "../../App";
 
 const Transform = () => {
-  const { inputCss, outputCss, inputCssChanged } = useContext(Context);
+  const { outputType, inputCss, outputCss, inputCssChanged } = useContext(
+    Context
+  );
+  const outputSyntaxMode = outputType === "JSX" ? "css" : "javascript";
 
   return (
     <table>
@@ -16,17 +19,21 @@ const Transform = () => {
             <CodeEditor
               placeholder={inputCss}
               initialValue=""
+              syntaxMode="css"
               valueChanged={inputCssChanged}
               readOnly={false}
               type="input"
+              title="CSS"
               dataTestId="input"
             />
           </td>
           <td style={{ width: "50%" }}>
             <CodeEditor
               type="output"
               initialValue={outputCss}
+              syntaxMode={outputSyntaxMode}
               readOnly={true}
+              title={outputType}
               dataTestId="output"
             />
           </td>