Lorem ipsum (#29)

* Lorem ipsum

* Change label

README.md

@@ -29,6 +29,7 @@
 - [x] 14. HTML Entity Encode / Decode
 - [x] 15. URL Encode / Decode
 - [x] 16. Backslash Encode / Decode
+- [x] 17. Lorem Ipsum Generator
 
 ## Demo
 

package.json

@@ -269,6 +269,7 @@
     "jsonwebtoken": "^8.5.1",
     "jsqr": "^1.4.0",
     "lodash": "^4.17.21",
+    "lorem-ipsum": "^2.0.3",
     "marked": "^2.1.3",
     "pngjs": "^6.0.0",
     "qrcode": "^1.4.4",

src/components/Main.tsx

@@ -22,6 +22,7 @@ import JsConsole from './notebook/JavaScript';
 import HtmlEntityCodec from './html/HtmlEntityCodec';
 import UrlCodec from './url/UrlCodec';
 import BackSlashCodec from './text/BackSlash';
+import LoremIpsum from './text/LoremIpsum';
 
 interface MenuItem {
   path: string;
@@ -60,6 +61,13 @@ const defaultRoutes: MenuItem[] = [
     show: true,
     Component: RegexTester,
   },
+  {
+    icon: <FontAwesomeIcon icon="random" />,
+    path: '/lorem-ipsum',
+    name: 'Lorem Ipsum Generator',
+    show: true,
+    Component: LoremIpsum,
+  },
   {
     icon: <FontAwesomeIcon icon={['fab', 'markdown']} />,
     path: '/markdown-to-html',

src/components/text/LoremIpsum.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react';
+import { clipboard } from 'electron';
+import { loremIpsum } from 'lorem-ipsum';
+
+type Unit = 'words' | 'sentences' | 'paragraphs';
+type Format = 'html' | 'plain';
+
+const LoremIpsum = () => {
+  const [output, setOutput] = useState('');
+  const [copied, setCopied] = useState(false);
+  const [units, setUnits] = useState<Unit>('paragraphs');
+  const [format, setFormat] = useState<Format>('plain');
+  const [count, setCount] = useState(5);
+
+  const handleCopyOutput = () => {
+    setCopied(true);
+    clipboard.write({ text: output });
+    setTimeout(() => setCopied(false), 500);
+  };
+
+  const unitsList = ['words', 'sentences', 'paragraphs'];
+  const formatList = [
+    {
+      f: 'html',
+      l: 'HTML',
+    },
+    {
+      f: 'plain',
+      l: 'Text',
+    },
+  ];
+
+  useEffect(() => {
+    setOutput(loremIpsum({ units, count, format }));
+  }, [units, count, format]);
+
+  return (
+    <div className="flex flex-col min-h-full">
+      <div className="flex justify-between mb-1">
+        <span className="flex space-x-4">
+          <input
+            type="number"
+            className="w-20 text-center"
+            value={count}
+            onChange={(e) => setCount(parseInt(e.target.value, 10) || 5)}
+          />
+
+          {unitsList.map((unit) => (
+            <label
+              htmlFor={unit}
+              className="flex items-center space-x-1"
+              key={unit}
+            >
+              <input
+                type="radio"
+                className="btn"
+                name="unit"
+                id={unit}
+                checked={unit === units}
+                onChange={() => setUnits(unit as Unit)}
+              />
+              <p>{unit}</p>
+            </label>
+          ))}
+        </span>
+
+        <span className="flex items-center justify-center space-x-4">
+          {formatList.map(({ f, l }) => (
+            <label htmlFor={f} className="flex items-center space-x-1" key={f}>
+              <input
+                type="radio"
+                className="btn"
+                name="format"
+                id={f}
+                checked={f === format}
+                onChange={() => setFormat(f as Format)}
+              />
+              <p>{l}</p>
+            </label>
+          ))}
+        </span>
+
+        <button
+          type="button"
+          className="w-16 btn"
+          onClick={handleCopyOutput}
+          disabled={copied}
+        >
+          {copied ? 'Copied' : 'Copy'}
+        </button>
+      </div>
+      <div className="flex flex-1 min-h-full space-x-2">
+        <textarea
+          className="flex-1 min-h-full p-2 bg-gray-100 rounded-md"
+          value={output}
+          readOnly
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LoremIpsum;

src/helpers/fontAwesome.ts

@@ -26,6 +26,7 @@ import {
   faLink,
   faFileCode,
   faSlash,
+  faRandom,
 } from '@fortawesome/free-solid-svg-icons';
 
 library.add(
@@ -52,5 +53,6 @@ library.add(
   faLink,
   faFileCode,
   faSlash,
+  faRandom,
   faCheck
 );

src/main.dev.ts

@@ -88,7 +88,9 @@ const createWindow = async () => {
   mainWindow = new BrowserWindow({
     show: false,
     width: 1024,
+    minWidth: 1024,
     height: 728,
+    minHeight: 728,
     icon: getAssetPath('icon.png'),
     webPreferences: {
       nodeIntegration: true,

yarn.lock

@@ -3716,7 +3716,7 @@ [email protected]:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.19.0, commander@^2.20.0:
+commander@^2.17.1, commander@^2.19.0, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -8248,6 +8248,13 @@ loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lorem-ipsum@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/lorem-ipsum/-/lorem-ipsum-2.0.3.tgz#9f1fa634780c9f58a349d4e091c3ba74f733164e"
+  integrity sha512-CX2r84DMWjW/DWiuzicTI9aRaJPAw2cvAGMJYZh/nx12OkTGqloj8y8FU0S8ZkKwOdqhfxEA6Ly8CW2P6Yxjwg==
+  dependencies:
+    commander "^2.17.1"
+
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"