fix(uuid): Use uuid package for unique class names (#566)

Author: CrOrc

package.json

@@ -52,7 +52,8 @@
     "react-dom": ">=16.0.0"
   },
   "dependencies": {
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "uuid": "^7.0.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.7.4",
@@ -80,22 +81,20 @@
     "enzyme": "^2.3.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-config-standard-react": "^9.2.0",
     "eslint-config-jss": "5.0.1",
     "eslint-config-prettier": "6.10.0",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-config-standard-react": "^9.2.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-node": "^10.0.0",
+    "eslint-plugin-prettier": "3.1.2",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.16.0",
     "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-prettier": "3.1.2",
-    "stylelint": "13.2.0",
-    "stylelint-config-standard": "20.0.0",
-    "prettier": "1.19.1",
     "gh-pages": "1.1.0",
     "github-changes": "^1.1.2",
     "http-server": "^0.11.1",
+    "ignore-styles": "5.0.1",
     "jsdom": "^9.2.1",
     "mocha": "^5.2.0",
     "mocha-each": "^2.0.1",
@@ -104,24 +103,26 @@
     "npm-run-all": "^4.1.5",
     "postcss-nested": "^4.2.1",
     "postcss-simple-vars": "^5.0.2",
+    "prettier": "1.19.1",
     "react": "^16.4.1",
     "react-addons-test-utils": "^15.1.0",
     "react-dom": "^16.4.1",
     "rimraf": "^3.0.0",
     "rollup": "^1.27.5",
     "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-eslint": "7.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-sass": "^1.2.2",
-    "rollup-plugin-url": "^3.0.1",
-    "rollup-plugin-eslint": "7.0.0",
     "rollup-plugin-stylelint": "1.0.0",
+    "rollup-plugin-url": "^3.0.1",
     "semantic-release": "15.1.5",
     "snazzy": "^2.0.1",
     "standard": "^5.2.2",
+    "stylelint": "13.2.0",
+    "stylelint-config-standard": "20.0.0",
     "uglifyjs": "^2.4.10",
-    "watchify": "^3.11.1",
-    "ignore-styles": "5.0.1"
+    "watchify": "^3.11.1"
   },
   "files": [
     "dist"

src/utils/uuid.js

@@ -1,17 +1,5 @@
-/**
-* By w3resource, 2020, https://www.w3resource.com/javascript-exercises/javascript-math-exercise-23.php
-*/
+import { v4 as uuid } from "uuid";
 
 export function generateUUID(){
-    let dt = new Date().getTime();
-
-    let uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-        const r = (dt + Math.random()*16)%16 | 0;
-        dt = Math.floor(dt/16);
-        return (c === "x" ? r :(r&0x3|0x8)).toString(16);
-    });
-
-    uuid = "t" + uuid.substring(1, uuid.length); // CSS does not work correctly with classes starting with a numeric character
-
-    return uuid;
+    return "t" + uuid();
 }

yarn.lock

@@ -11955,6 +11955,11 @@ uuid@^3.3.2:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
 
+uuid@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.org/uuid/-/uuid-7.0.2.tgz#7ff5c203467e91f5e0d85cfcbaaf7d2ebbca9be6"
+  integrity sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw==
+
 v8-compile-cache@^2.0.3, v8-compile-cache@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"