Update demo scripts

Author: kylekarpack

demo.tsx

@@ -1,11 +1,13 @@
 import React from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import GithubContributions from "./src/GithubContributions";
 
-render(
+const container = document.getElementById("home");
+const root = createRoot(container!);
+
+root.render(
   <div>
     <h1>React Github Graph Demo Page</h1>
     <GithubContributions username="kylekarpack" />
-  </div>,
-  document.getElementById("home")
+  </div>
 );

index.ts

@@ -35,6 +35,8 @@
     "@storybook/manager-webpack5": "^6.5.13",
     "@storybook/react": "^6.5.13",
     "@types/node": "^17.0.8",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "cross-env": "^7.0.2",
     "parcel": "^2.8.0",
     "react": "^18.2.0",

package-lock.json

@@ -1,5 +1,4 @@
 import React, { FunctionComponent, useEffect, useState } from "react";
-import "./container.scss";
 import { Loader } from "./Loader";
 
 const GithubContributions: FunctionComponent<{ username: string }> = ({

package.json

@@ -1,4 +1,7 @@
 import GithubContributions from "./GithubContributions";
 
+import cssText from "bundle-text:./container.scss";
+console.log(cssText);
+
 export { GithubContributions };
 export default GithubContributions;