diff --git a/.gitignore b/.gitignore index 1dfc52f1..74f58d58 100644 --- a/.gitignore +++ b/.gitignore @@ -17,5 +17,4 @@ sandbox/ /frontend/cache /frontend/public/sw.* /frontend/public/workbox-* -/frontend/storybook-static .vscode/launch.json diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index fa904062..f61889cf 100644 --- a/docs/CONTRIBUTING.md +++ b/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. diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js deleted file mode 100644 index dca09412..00000000 --- a/frontend/.storybook/main.js +++ /dev/null @@ -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 - }, -} diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js deleted file mode 100644 index c751cc1f..00000000 --- a/frontend/.storybook/preview.js +++ /dev/null @@ -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 - }, -] - -export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, -} diff --git a/frontend/package.json b/frontend/package.json index 9d2203e0..c8c0adc0 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js index 0054e732..7c32348b 100644 --- a/frontend/postcss.config.js +++ b/frontend/postcss.config.js @@ -1,6 +1,5 @@ module.exports = { plugins: [ - "postcss-scrollbar", "autoprefixer", "cssnano", ], diff --git a/frontend/src/components/AsyncButton.stories.tsx b/frontend/src/components/AsyncButton.stories.tsx deleted file mode 100644 index 327053bd..00000000 --- a/frontend/src/components/AsyncButton.stories.tsx +++ /dev/null @@ -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 - -const Template: ComponentStory = args => - -export const Success: ComponentStory = Template.bind({}) -Success.args = { - children: "Click me", - forceLoading: false, - errorPlacement: "right-center", - onClick: () => new Promise(resolve => setTimeout(() => resolve(undefined), 500)), -} - -export const Loading: ComponentStory = Template.bind({}) -Loading.args = { - ...Success.args, - forceLoading: true, -} - -export const Error: ComponentStory = Template.bind({}) -Error.args = { - children: "Click me", - forceLoading: false, - errorPlacement: "right-center", - onClick: () => new Promise((_resolve, reject) => setTimeout(() => reject("I am error"), 500)), -} diff --git a/frontend/src/components/Button.stories.tsx b/frontend/src/components/Button.stories.tsx deleted file mode 100644 index 9766fe76..00000000 --- a/frontend/src/components/Button.stories.tsx +++ /dev/null @@ -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 - -const Template: ComponentStory = args => -) diff --git a/frontend/src/components/Diff/CompilationPanel.module.scss b/frontend/src/components/Diff/CompilationPanel.module.scss index ef82ad02..d12c0922 100644 --- a/frontend/src/components/Diff/CompilationPanel.module.scss +++ b/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); diff --git a/frontend/src/components/Diff/Diff.module.scss b/frontend/src/components/Diff/Diff.module.scss index 9237555c..db41fd64 100644 --- a/frontend/src/components/Diff/Diff.module.scss +++ b/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 { diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index 26a23bdb..37dff693 100644 --- a/frontend/src/components/Footer.tsx +++ b/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 diff --git a/frontend/src/components/Scratch/ScratchBody.module.scss b/frontend/src/components/Scratch/ScratchBody.module.scss index fcb2f4b5..2aca9367 100644 --- a/frontend/src/components/Scratch/ScratchBody.module.scss +++ b/frontend/src/components/Scratch/ScratchBody.module.scss @@ -6,7 +6,4 @@ .diffSection { display: flex; flex-direction: column; - - scrollbar-color: #fff3 transparent; - scrollbar-width: thin; } diff --git a/frontend/src/components/Scratch/ScratchDecompileModal.module.scss b/frontend/src/components/Scratch/ScratchDecompileModal.module.scss index 4bdaac90..95fbdd0a 100644 --- a/frontend/src/components/Scratch/ScratchDecompileModal.module.scss +++ b/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%; } diff --git a/frontend/src/components/Scratch/renderTabs.module.scss b/frontend/src/components/Scratch/renderTabs.module.scss index 15929b96..b4a39286 100644 --- a/frontend/src/components/Scratch/renderTabs.module.scss +++ b/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; } } diff --git a/frontend/src/components/Select2.stories.tsx b/frontend/src/components/Select2.stories.tsx deleted file mode 100644 index b72bd7c8..00000000 --- a/frontend/src/components/Select2.stories.tsx +++ /dev/null @@ -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 - -const Template: ComponentStory = args => { - const [value, setValue] = useState(args.value) - - return
-