Add popup component stories

Author: aeksco

src/popup/__tests__/__snapshots__/test_popup.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`component renders 1`] = `
 <div
-  className="popup-container"
+  className="popupContainer"
 >
   <div
-    className="container mx-4 my-4"
+    className="mx-4 my-4"
   >
     <div
       className="row"
@@ -22,24 +22,22 @@ exports[`component renders 1`] = `
     </div>
     <hr />
     <div
-      className="row"
+      className="grid gap-3 grid-cols-2 mt-3"
     >
-      <div
-        className="col-lg-12"
+      <button
+        className="btn"
+        data-testid="scroll-to-top"
+        onClick={[Function]}
       >
-        <button
-          className="btn btn-block btn-outline-dark"
-          onClick={[Function]}
-        >
-          Scroll To Top
-        </button>
-        <button
-          className="btn btn-block btn-outline-dark"
-          onClick={[Function]}
-        >
-          Scroll To Bottom
-        </button>
-      </div>
+        Scroll To Top
+      </button>
+      <button
+        className="btn"
+        data-testid="scroll-to-bottom"
+        onClick={[Function]}
+      >
+        Scroll To Bottom
+      </button>
     </div>
   </div>
 </div>

src/popup/component.tsx

@@ -1,25 +1,66 @@
-import React, { FunctionComponent } from "react";
+import React from "react";
 import { Hello } from "@src/components/hello";
-import { browser } from "webextension-polyfill-ts";
+import { browser, Tabs } from "webextension-polyfill-ts";
 import { Scroller } from "@src/components/scroller";
-import "./styles.scss";
+import css from "./styles.module.css";
 
 // // // //
 
-export const Popup: FunctionComponent = () => {
+// Scripts to execute in current tab
+const scrollToTopScript = `window.scroll(0,0)`;
+const scrollToBottomScript = `window.scroll(0,9999999)`;
+
+/**
+ * Executes a string of Javascript on the current tab
+ * @param code The string of code to execute on the current tab
+ */
+function executeScript(code: string): void {
+    // Query for the active tab in the current window
+    browser.tabs
+        .query({ active: true, currentWindow: true })
+        .then((tabs: Tabs.Tab[]) => {
+            // Pulls current tab from browser.tabs.query response
+            const currentTab: Tabs.Tab | undefined = tabs[0];
+
+            // Short circuits function execution is current tab isn't found
+            if (!currentTab) {
+                return;
+            }
+
+            // Executes the script in the current tab
+            browser.tabs
+                .executeScript(currentTab.id, {
+                    code,
+                })
+                .then(() => {
+                    console.log("Done Scrolling");
+                });
+        });
+}
+
+// // // //
+
+export function Popup() {
     // Sends the `popupMounted` event
     React.useEffect(() => {
         browser.runtime.sendMessage({ popupMounted: true });
     }, []);
 
     // Renders the component tree
     return (
-        <div className="popup-container">
-            <div className="container mx-4 my-4">
+        <div className={css.popupContainer}>
+            <div className="mx-4 my-4">
                 <Hello />
                 <hr />
-                <Scroller />
+                <Scroller
+                    onClickScrollTop={() => {
+                        executeScript(scrollToTopScript);
+                    }}
+                    onClickScrollBottom={() => {
+                        executeScript(scrollToBottomScript);
+                    }}
+                />
             </div>
         </div>
     );
-};
+}

src/popup/index.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { browser } from "webextension-polyfill-ts";
 import { Popup } from "./component";
-import "../scss/app.scss";
+import "../css/app.css";
 
 // // // //
 

src/popup/stories/Popup.stories.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { Popup } from "../component";
+import { ComponentMeta } from "@storybook/react";
+
+// // // //
+
+export default {
+    title: "Components/Popup",
+    component: Popup,
+} as ComponentMeta<typeof Popup>;
+
+export const Render = () => <Popup />;

src/popup/styles.module.css

@@ -0,0 +1,5 @@
+.popupContainer {
+    min-width: 300px;
+    min-height: 300px;
+    display: flex;
+}