create landing page, config, mockman and readme

README.md

@@ -1,3 +1,8 @@
+<p align="center">
+  <a href="https://github.com/neogcamp/mockman" rel="noopener" target="_blank"><img src="https://github.com/neogcamp/mockman/tree/main/src/assets/Mockman.png" width="120" height="120" align="center"/></a>
+
+</p>
+
 <h1 align="center"><b>MockmanJS</b></h1>
 <p align="center">
 <a href="https://badge.fury.io/js/mockman-js"><img src="https://badge.fury.io/js/mockman-js.svg" alt="npm version" height="18"></a>
@@ -57,7 +62,7 @@ yarn add mockman-js
 
 ## **🛠️ Usage**
 
-### Import the component in your App
+### **Import the component in your App**
 
 ```jsx
 /*
@@ -77,7 +82,7 @@ function MockAPI() {
 export default MockAPI;
 ```
 
-### Import Styles
+### **Import Styles**
 
 In your `index.html`, add the following:
 
@@ -90,6 +95,16 @@ In your `index.html`, add the following:
 
 You can always override the default styles by defining your custom css.
 
+### **Color Scheme**
+
+Mockman currently supports `colorScheme` prop to define color scheme to Mockman component.
+
+The `colorScheme` prop currently accepts two values - "standard" (default) and "dark".
+
+```jsx
+<Mockman colorScheme="dark" />
+```
+
 ---
 
 ## **💖 We love Contributions**

lib/main.css

@@ -29,15 +29,23 @@
 }
 
 .mockman {
-  max-width: 1200px;
+  text-align: left;
   display: grid;
-  padding: 2rem;
   grid-template-columns: 1fr 1fr;
   margin: auto;
 }
+
+.mockman-standard {
+  color: black;
+  background-color: white;
+}
+
+.mockman-dark {
+  color: white;
+  background-color: black;
+}
 .request-wrapper {
-  padding: 3rem;
-  background-color: rgba(0, 0, 0, 0.02);
+  padding: 4rem;
   border: 1px solid rgb(24, 93, 153);
   margin: 10px;
   border-radius: 5px;
@@ -49,8 +57,8 @@
   justify-content: space-around;
 }
 .response-wrapper {
-  padding: 3rem;
-  background-color: rgba(0, 0, 0, 0.02);
+  min-width: 10rem;
+  padding: 4rem;
   border: 1px solid rgb(24, 93, 153);
   margin: 10px;
   border-radius: 5px;
@@ -85,3 +93,11 @@ textarea {
 .inputHeadersItem span {
   padding-inline: 5px;
 }
+
+@media only screen and (max-width: 900px) {
+  .mockman {
+    grid-template-columns: 1fr;
+    width: 100%;
+    margin: auto;
+  }
+}

lib/main.jsx

@@ -11,7 +11,7 @@ Add dependencies as per requirement
 Test the component by importing Mockman in src/main.tsx and run yarn dev to see the component in action 
 */
 
-function Mockman() {
+function Mockman({ colorScheme = "standard" }) {
   const defaultState = {
     reqType: "GET",
     endpoint: "/api/test-todos",
@@ -23,8 +23,8 @@ function Mockman() {
   const [data, setData] = useState(defaultState);
 
   return (
-    <div className="mockman">
-      <div className="request-wrapper">
+    <div className={`mockman`}>
+      <div className={`request-wrapper mockman-${colorScheme}`}>
         <InputForm data={data} setData={setData} />
         <InputContent
           data={data}
@@ -33,7 +33,7 @@ function Mockman() {
           setError={setError}
         />
       </div>
-      <div className="response-wrapper">
+      <div className={`response-wrapper mockman-${colorScheme}`}>
         <InputResponse data={data} />
       </div>
     </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mockman-js",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "files": [
     "dist/*.css",
     "dist/*.js"
@@ -9,7 +9,8 @@
   "module": "./dist/mockman.es.js",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build:web": "vite build --mode website",
+    "build:pkg": "vite build --mode package",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -19,7 +20,7 @@
     "react-json-view": "^1.21.3"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^1.0.7",
+    "@vitejs/plugin-react": "^1.1.4",
     "@vitejs/plugin-react-refresh": "^1.3.6",
     "miragejs": "^0.1.43",
     "vite": "^2.7.2"

src/App.css

@@ -1,42 +1,89 @@
-/* .App {
-  text-align: center;
+@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
+
+.App {
+  margin: 2rem 5%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 90vh;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.mobile-view {
+  display: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.hero__content {
   display: flex;
   flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.hero__content-header {
+  margin-top: 6rem;
+  padding: 0;
+  font-size: 4rem;
+  font-weight: bold;
+  color: #ffce6d;
+  font-family: "Anton", sans-serif;
+}
+
+.hero__content-CTA span {
+  padding: 0.2rem;
+  background-color: white;
+  margin-right: 0.5rem;
+  border-radius: 4px;
+  font-size: 1.2rem;
+  color: #120200;
+  cursor: pointer;
+}
+
+.hero__content-CTA {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+}
+
+.github-logo {
+  color: white;
+  font-size: 2rem;
+}
+
+.npm-logo {
   color: white;
+  font-size: 4rem;
+}
+
+.guidelines {
+  font-size: 1.2rem;
+  text-align: left;
 }
 
-.App-link {
-  color: #61dafb;
+.guidelines a {
+  color: #ffce6d;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+.footer {
+  text-align: center;
+  margin-top: 4rem;
+}
+
+@media only screen and (max-width: 900px) {
+  .mockmanjs {
+    display: none;
   }
-  to {
-    transform: rotate(360deg);
+
+  .hero__content-header {
+    margin-top: 0rem;
   }
-}
 
-button {
-  font-size: calc(10px + 2vmin);
-} */
+  .mobile-view {
+    display: block;
+  }
+}

src/App.jsx

@@ -1,10 +1,59 @@
 import React from "react";
 import "./App.css";
 import Mockman from "../lib/main";
+import logo from "./assets/Logo-only.png";
+import { MdiGithub } from "./assets/svgs/GithubLogo";
+import { MdiNpm } from "./assets/svgs/NpmLogo";
 function App() {
   return (
     <div className="App">
-      <Mockman />
+      <div className="main-content">
+        <div className="hero">
+          <img src={logo} alt="mockman logo" width={300} height={300} />
+          <div className="hero__content">
+            <span className="hero__content-header">MockmanJS</span>
+            <div className="hero__content-CTA">
+              <span>
+                {" "}
+                <code>yarn add mockman-js</code>
+              </span>
+              <a
+                href="https://github.com/neogcamp/mockman"
+                target="_blank"
+                className="github-logo"
+              >
+                <MdiGithub />
+              </a>
+              <a
+                href="https://www.npmjs.com/package/mockman-js"
+                className="npm-logo"
+              >
+                <MdiNpm />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div className="mockmanjs">
+          <Mockman />
+          <div className="guidelines">
+            <p>
+              To test the above TODO-app, you can find it's mock-API
+              documentation{" "}
+              <a target="_blank" rel="noopener noreferrer" href="soham.com">
+                here
+              </a>
+            </p>
+          </div>
+        </div>
+        <div className="mobile-view">
+          <p>
+            This site isn't yet optimized for mobile view. Open in website to
+            see Live Mockman example!{" "}
+          </p>
+        </div>
+      </div>
+      <div className="footer">Copyright © 2022 neoG camp</div>
     </div>
   );
 }

src/assets/svgs/GithubLogo.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+export function MdiGithub(props) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}

src/assets/svgs/NpmLogo.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+export function MdiNpm(props) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        d="M4 10v4h2v-3h1v3h1v-4H4m5 0v5h2v-1h2v-4H9m3 1v2h-1v-2h1m2-1v4h2v-3h1v3h1v-3h1v3h1v-4h-6M3 9h18v6h-9v1H8v-1H3V9z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}

src/index.css

@@ -1,13 +1,14 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: #120200;
+  color: white;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }