Frontend fixes (#429)

* fix decompile modal  codemirror height

* bump browserslist

* fix scrollbars

* remove storybook, update things

* fix editor styling

Co-authored-by: Ethan Roseman <ethteck@gmail.com>

.gitignore

@@ -17,5 +17,4 @@ sandbox/
 /frontend/cache
 /frontend/public/sw.*
 /frontend/public/workbox-*
-/frontend/storybook-static
 .vscode/launch.json

docs/CONTRIBUTING.md

@@ -114,7 +114,3 @@ cd backend
 poetry run mypy
 poetry run black .
 ```
-
-### Storybook
-
-Use `yarn storybook` to run a Storybook instance on [http://localhost:6006](http://localhost:6006). This is useful for testing UI components in isolation.

frontend/.storybook/main.js

@@ -1,58 +0,0 @@
-const path = require("path")
-const { config } = require("dotenv")
-const { execSync } = require("child_process")
-
-for (const envFile of [".env.local", ".env"]) {
-    config({ path: `../${envFile}` })
-}
-
-process.env.STORYBOOK_API_BASE = process.env.API_BASE
-process.env.STORYBOOK_GITHUB_CLIENT_ID = process.env.GITHUB_CLIENT_ID
-process.env.STORYBOOK_COMMIT_HASH = execSync("git rev-parse HEAD").toString().trim()
-
-module.exports = {
-    stories: [
-        "../src/**/*.stories.mdx",
-        "../src/**/*.stories.@(js|jsx|ts|tsx)",
-    ],
-    addons: [
-        "@storybook/addon-links",
-        "@storybook/addon-essentials",
-        "@storybook/addon-viewport",
-        "storybook-dark-mode",
-    ],
-    core: {
-        builder: "webpack5",
-    },
-    webpackFinal: async (config, { configType }) => {
-        // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-        // You can change the configuration based on that.
-        // 'PRODUCTION' is used when building the static version of storybook.
-
-        // load svg as element
-        const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
-        fileLoaderRule.exclude = /\.svg$/
-        config.module.rules.push({
-            test: /\.svg$/,
-            use: ["@svgr/webpack"],
-        })
-
-        // run postcss on scss
-        config.module.rules.push({
-            test: /\.scss$/,
-            use: [
-                'style-loader', {
-                    loader: 'css-loader',
-                    options: {
-                        importLoaders: 2,
-                    },
-                },
-                'postcss-loader',
-                'sass-loader',
-            ],
-            include: path.resolve(__dirname, '../src'),
-        })
-
-        return config
-    },
-}

frontend/.storybook/preview.js

@@ -1,20 +0,0 @@
-//import styles from "../src/pages/_app.scss"
-
-import "!style-loader!css-loader!sass-loader!../src/pages/_app.scss"
-
-export const decorators = [
-    Story => {
-        document.body.classList.add("themePlum")
-        return <Story />
-    },
-]
-
-export const parameters = {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-        matchers: {
-            color: /(background|color)$/i,
-            date: /Date$/,
-        },
-    },
-}

frontend/package.json

@@ -6,8 +6,6 @@
         "start": "next start --port 8080",
         "lint": "next lint && yarn stylelint 'src/**/*.css' 'src/**/*.scss'",
         "postinstall": "next telemetry disable",
-        "storybook": "start-storybook -p 6006 --ci",
-        "build-storybook": "build-storybook",
         "test": "jest --watch",
         "test:ci": "jest --ci"
     },
@@ -44,15 +42,6 @@
     "devDependencies": {
         "@babel/core": "^7.17.8",
         "@next/eslint-plugin-next": "^11.1.2",
-        "@storybook/addon-actions": "^6.3.10",
-        "@storybook/addon-essentials": "^6.3.10",
-        "@storybook/addon-links": "^6.3.10",
-        "@storybook/addon-postcss": "^2.0.0",
-        "@storybook/addon-viewport": "^6.3.10",
-        "@storybook/builder-webpack5": "^6.3.10",
-        "@storybook/manager-webpack5": "^6.3.10",
-        "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^6.3.10",
         "@svgr/webpack": "^5.5.0",
         "@testing-library/jest-dom": "^5.16.3",
         "@testing-library/react": "^13.0.0-alpha.6",
@@ -81,10 +70,8 @@
         "next-remove-imports": "^1.0.6",
         "postcss": "^8.3.6",
         "postcss-loader": "^6.1.1",
-        "postcss-scrollbar": "^0.3.0",
-        "react-test-renderer": "^17.0.2",
+        "react-test-renderer": "^18.0.0",
         "sass-loader": "^12.1.0",
-        "storybook-dark-mode": "^1.0.8",
         "style-loader": "^3.3.0",
         "stylelint": "^13.13.1",
         "stylelint-config-css-modules": "^2.2.0",

frontend/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
     plugins: [
-        "postcss-scrollbar",
         "autoprefixer",
         "cssnano",
     ],

frontend/src/components/AsyncButton.stories.tsx

@@ -1,34 +0,0 @@
-import React from "react"
-
-import { ComponentStory, ComponentMeta } from "@storybook/react"
-
-import AsyncButton from "./AsyncButton"
-
-export default {
-    title: "AsyncButton",
-    component: AsyncButton,
-} as ComponentMeta<typeof AsyncButton>
-
-const Template: ComponentStory<typeof AsyncButton> = args => <AsyncButton {...args} />
-
-export const Success: ComponentStory<typeof AsyncButton> = Template.bind({})
-Success.args = {
-    children: "Click me",
-    forceLoading: false,
-    errorPlacement: "right-center",
-    onClick: () => new Promise(resolve => setTimeout(() => resolve(undefined), 500)),
-}
-
-export const Loading: ComponentStory<typeof AsyncButton> = Template.bind({})
-Loading.args = {
-    ...Success.args,
-    forceLoading: true,
-}
-
-export const Error: ComponentStory<typeof AsyncButton> = Template.bind({})
-Error.args = {
-    children: "Click me",
-    forceLoading: false,
-    errorPlacement: "right-center",
-    onClick: () => new Promise((_resolve, reject) => setTimeout(() => reject("I am error"), 500)),
-}

frontend/src/components/Button.stories.tsx

@@ -1,46 +0,0 @@
-import React from "react"
-
-import { BookIcon } from "@primer/octicons-react"
-import { ComponentStory, ComponentMeta } from "@storybook/react"
-
-import Button from "./Button"
-
-export default {
-    title: "Button",
-    component: Button,
-} as ComponentMeta<typeof Button>
-
-const Template: ComponentStory<typeof Button> = args => <Button {...args} />
-
-export const Default: ComponentStory<typeof Button> = Template.bind({})
-Default.args = {
-    children: "Button",
-    primary: false,
-    disabled: false,
-}
-
-export const Disabled: ComponentStory<typeof Button> = Template.bind({})
-Disabled.args = {
-    ...Default.args,
-    disabled: true,
-}
-
-export const Primary: ComponentStory<typeof Button> = Template.bind({})
-Primary.args = {
-    ...Default.args,
-    primary: true,
-}
-
-export const PrimaryDisabled: ComponentStory<typeof Button> = Template.bind({})
-PrimaryDisabled.args = {
-    ...Default.args,
-    primary: true,
-    disabled: true,
-}
-
-export const Icon: ComponentStory<typeof Button> = args => (
-    <Button {...args}>
-        <BookIcon />
-        Read a book
-    </Button>
-)

frontend/src/components/Diff/CompilationPanel.module.scss

@@ -32,8 +32,6 @@
     padding: 0.8rem;
 
     overflow: auto;
-    scrollbar-color: #fff3 transparent;
-    scrollbar-width: thin;
 
     user-select: text;
     font-family: var(--monospace);

frontend/src/components/Diff/Diff.module.scss

@@ -57,9 +57,6 @@
     white-space: pre;
 
     list-style: none;
-
-    scrollbar-color: #fff3 transparent;
-    scrollbar-width: thin;
 }
 
 .row {

frontend/src/components/Footer.tsx

@@ -6,7 +6,7 @@ import Discord from "./discord.svg"
 import ErrorBoundary from "./ErrorBoundary"
 import styles from "./Footer.module.scss"
 
-const commitHash = process.env.NEXT_PUBLIC_COMMIT_HASH ?? process.env.STORYBOOK_COMMIT_HASH
+const commitHash = process.env.NEXT_PUBLIC_COMMIT_HASH
 
 export default function Footer() {
     return <ErrorBoundary className={styles.footer}>

frontend/src/components/Scratch/ScratchBody.module.scss

@@ -6,7 +6,4 @@
 .diffSection {
     display: flex;
     flex-direction: column;
-
-    scrollbar-color: #fff3 transparent;
-    scrollbar-width: thin;
 }

frontend/src/components/Scratch/ScratchDecompileModal.module.scss

@@ -6,6 +6,8 @@
     flex-direction: column;
 
     padding: 1.5em;
+
+    overflow-y: auto;
 }
 
 .main {
@@ -15,6 +17,10 @@
     flex-direction: column;
     gap: 1rem;
 
+    @media screen and (min-height: 600px) {
+        overflow-y: hidden;
+    }
+
     > h2 {
         font-size: 1.4em;
         font-weight: 400;
@@ -39,6 +45,10 @@
 
     overflow: hidden;
 
+    @media screen and (max-height: 600px) {
+        height: 200px;
+    }
+
     :global(.cm-editor) {
         height: 100%;
     }

frontend/src/components/Scratch/renderTabs.module.scss

@@ -4,25 +4,19 @@
 }
 
 .editor {
+    display: flex;
+    align-items: stretch;
+
+    width: 100%;
     height: 100%;
 
-    overflow: hidden;
-
     :global(.cm-editor) {
-        height: 100%;
+        flex: 1 1 auto;
+        width: 100%;
     }
 
-    :global(.cm-gutters),
-    :global(.cm-content) {
-        margin: 1em;
-    }
-
-    :global(.cm-gutters) {
-        margin-right: 0;
-    }
-
-    :global(.cm-content) {
-        margin-left: 0;
+    :global(.cm-scroller) {
+        overflow: auto;
     }
 }
 

frontend/src/components/Select2.stories.tsx

@@ -1,30 +0,0 @@
-import { useState } from "react"
-
-import { ComponentStory, ComponentMeta } from "@storybook/react"
-
-import Select from "./Select2"
-
-export default {
-    title: "Select",
-    component: Select,
-} as ComponentMeta<typeof Select>
-
-const Template: ComponentStory<typeof Select> = args => {
-    const [value, setValue] = useState<string>(args.value)
-
-    return <div>
-        <Select {...args} value={value} onChange={setValue} />
-        <br />
-        value: {value}
-    </div>
-}
-
-export const Default: ComponentStory<typeof Select> = Template.bind({})
-Default.args = {
-    value: "initial",
-    options: {
-        "above": "Above",
-        "initial": "Initial value",
-        "below": "Below",
-    },
-}

frontend/src/components/Tabs.stories.tsx

@@ -1,28 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react"
-
-import Tabs, { Tab } from "./Tabs"
-
-export default {
-    title: "Tabs",
-    component: Tabs,
-} as ComponentMeta<typeof Tabs>
-
-export const Basic: ComponentStory<typeof Tabs> = args => {
-    return <Tabs {...args}>
-        <Tab tabKey="tab 1" key="Tab 1">
-            Tab 1 content
-        </Tab>
-        <Tab tabKey="tab 2" key="Tab 2">
-            Tab 2 content
-        </Tab>
-        <Tab tabKey="tab 3" key="Disabled tab" disabled>
-            How did you get here?
-        </Tab>
-        <Tab tabKey="tab 4" key="Tab 4">
-            Tab 4 content
-        </Tab>
-    </Tabs>
-}
-Basic.args = {
-    activeTab: "Tab 2",
-}

frontend/src/components/compiler/CompilerOpts.stories.tsx

@@ -1,21 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react"
-
-import CompilerOpts from "./CompilerOpts"
-
-export default {
-    title: "compiler/CompilerOpts",
-    component: CompilerOpts,
-} as ComponentMeta<typeof CompilerOpts>
-
-const Template: ComponentStory<typeof CompilerOpts> = args => {
-    return <CompilerOpts {...args} />
-}
-
-export const AnyPlatform: ComponentStory<typeof CompilerOpts> = Template.bind({})
-AnyPlatform.args = {
-}
-
-export const N64CompilersOnly: ComponentStory<typeof CompilerOpts> = Template.bind({})
-N64CompilersOnly.args = {
-    platform: "n64",
-}

frontend/src/lib/api.ts

@@ -8,7 +8,7 @@ import { useDebouncedCallback } from "use-debounce"
 
 import { ignoreNextWarnBeforeUnload } from "./hooks"
 
-const API_BASE = process.env.INTERNAL_API_BASE ?? process.env.NEXT_PUBLIC_API_BASE ?? process.env.STORYBOOK_API_BASE
+const API_BASE = process.env.INTERNAL_API_BASE ?? process.env.NEXT_PUBLIC_API_BASE
 
 type Json = any
 

frontend/src/lib/oauth.ts

@@ -2,7 +2,7 @@ import { mutate } from "swr"
 
 import { ResponseError } from "./api"
 
-const GITHUB_CLIENT_ID = process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID ?? process.env.STORYBOOK_GITHUB_CLIENT_ID
+const GITHUB_CLIENT_ID = process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID
 
 export function isGitHubLoginSupported(): boolean {
     return !!GITHUB_CLIENT_ID

frontend/src/pages/_app.scss

@@ -140,6 +140,9 @@ body {
     overflow-x: hidden;
     user-select: none;
     position: relative;
+
+    scrollbar-color: #fff3 #fff1;
+    scrollbar-width: thin;
 }
 
 html,
@@ -147,6 +150,25 @@ body {
     height: 100%;
 }
 
+::-webkit-scrollbar {
+    background-color: transparent;
+    width: 0.6rem;
+    height: 0.6rem;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+    background-color: #fff1;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #fff3;
+}
+
+::-webkit-scrollbar-button {
+    display: none;
+}
+
 #__next {
     display: flex;
     flex-direction: column;
@@ -173,7 +195,6 @@ main {
     z-index: 999;
 }
 
-div {
-    scrollbar-color: #fff3 transparent;
-    scrollbar-width: thin;
+.cm-editor {
+    user-select: initial;
 }