Merge branch 'jsdoc-setup' into 'develop'

Setup JSDoc for documentation

See merge request !11

src/cryptometrics/.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# parcel
+.parcel-cache

src/cryptometrics/.postcssrc

+{
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
\ No newline at end of file

src/cryptometrics/components/button/Button.js

-import classNames from "classnames";
 import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
 
-export default function Button({ children, className, onClick }) {
+/**
+ * Custom button component
+ *
+ * @component
+ * @example
+ * return (
+ *   <Button className="bg-indigo-500 text-white" onClick={() => console.log("Button pressed")}>
+ *      Hello!
+ *   </Button>
+ * )
+ */
+function Button({ children, className, onClick }) {
   return (
     <button
       className={classNames("py-2 px-5 rounded-xl", className)}
@@ -11,3 +23,20 @@ export default function Button({ children, className, onClick }) {
     </button>
   );
 }
+
+Button.propTypes = {
+  /**
+   * The content inside the button
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Additional CSS classes for the button (optional)
+   */
+  className: PropTypes.string,
+  /**
+   * The function to run when button is pressed
+   */
+  onClick: PropTypes.func,
+};
+
+export default Button;

src/cryptometrics/jsdoc.json

+{
+  "tags": {
+    "allowUnknownTags": true
+  },
+  "source": {
+    "include": ["components", "pages"]
+  },
+  "plugins": ["plugins/markdown", "better-docs/component"],
+  "opts": {
+    "encoding": "utf8",
+    "destination": "docs/",
+    "recurse": true,
+    "verbose": true,
+    "template": "./node_modules/better-docs"
+  },
+  "templates": {
+    "better-docs": {
+      "name": "CryptoMetrics",
+      "component": {
+        "entry": ["import '../styles/docs.css';"]
+      }
+    }
+  }
+}

src/cryptometrics/package.json

@@ -5,7 +5,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "docs": "jsdoc -c ./jsdoc.json"
   },
   "dependencies": {
     "@heroicons/react": "^1.0.5",
@@ -27,9 +28,13 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.2",
+    "better-docs": "2.4.1",
     "eslint": "8.9.0",
     "eslint-config-next": "12.1.0",
+    "jsdoc": "^3.6.10",
+    "parcel": "^2.3.2",
     "postcss": "^8.4.6",
+    "postcss-modules": "^4.3.1",
     "tailwindcss": "^3.0.23"
   }
 }

src/cryptometrics/styles/docs.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;