diff --git a/.eslintrc.js b/.eslintrc.js index 7beb879..a4b3294 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -15,10 +15,15 @@ module.exports = { "plugin:react/recommended", "plugin:prettier/recommended", ], - plugins: ["@typescript-eslint", "react", "react-hooks", "prettier"], + plugins: ["@typescript-eslint", "react", "react-hooks", "prettier", "unused-imports"], rules: { + "no-unused-vars": "off", + "unused-imports/no-unused-imports": "error", + "unused-imports/no-unused-vars": [ + "error", + { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" } + ], "prettier/prettier": "error", - "import/first": "error", "import/order": [ "error", diff --git a/components/Header.module.css b/components/Header.module.css index 191e868..2df6e3d 100644 --- a/components/Header.module.css +++ b/components/Header.module.css @@ -1,144 +1,133 @@ .headerWrapper { - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; - left: 0; - width: 100vw; - background: var(--dark--primary-background); - z-index: 98; - box-sizing: border-box; - padding: calc(10rem / 16) calc(100rem / 16) 0 calc(100rem / 16); + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0; + left: 0; + width: 100vw; + background: var(--dark--primary-background); + z-index: 98; + box-sizing: border-box; + padding: calc(10rem / 16) calc(100rem / 16) 0; } .titleHeader { - margin: calc(16rem / 16) 0; + margin: calc(16rem / 16) 0; } .sideBarCommon { - position: fixed; - right: 0; - top: 0; - width: 20vw; - height: 100vh; - background: var(--secondary-background); - padding: calc(100rem / 16); - margin: 0; - z-index: 100; - padding: 0; - padding-right: calc(20rem / 16); + position: fixed; + right: 0; + top: 0; + min-width: calc(400rem / 16); + height: 100vh; + background: var(--secondary-background); + padding: calc(100rem / 16); + margin: 0; + z-index: 100; + padding: 0; + padding-right: calc(20rem / 16); + transition: transform 0.8s; } .sideBarShown { - composes: sideBarCommon; - transition: transform 0.8s; - transform: translateX(0%); + composes: sideBarCommon; } .sideBarHidden { - composes: sideBarCommon; - transition: transform 0.8s; - transform: translateX(100%); + composes: sideBarCommon; + transform: translateX(100%); } .backgroundTintCommon { - background-color: var(--label); - animation: fadeIn 1s; - position: fixed; - z-index: 99; - left: 0; - top: 0; - width: 100vw; - height: 100vh; + background-color: var(--label); + animation: fadeIn 1s; + position: fixed; + z-index: 99; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + transition: opacity 0.8s, visibility 0.8s; } .backgroundTintShow { - composes: backgroundTintCommon; - transition: opacity 0.8s; - opacity: 0.2; - visibility: visible; + composes: backgroundTintCommon; + visibility: visible; + opacity: 0.2; } .backgroundTintHidden { - composes: backgroundTintCommon; - transition: opacity 0.8s, visibility 0.8s; - opacity: 0; - visibility: hidden; + composes: backgroundTintCommon; + visibility: hidden; + opacity: 0; } .menuHeader { - margin-bottom: 0; - padding-left: calc(20rem / 16); - padding-bottom: 0; - font-size: cacl(50rem / 16); - color: var(--dark--secondary-heading); + margin-bottom: 0; + padding-left: calc(20rem / 16); + padding-bottom: 0; + color: var(--dark--secondary-heading); } .sectionsWrapper { - padding-left: calc(30rem / 16); + padding-left: calc(30rem / 16); } .menuIcon { - background: none; - border: none; + background: none; + border: none; } .menuIcon:hover { - opacity: 0.8; - cursor: pointer; + opacity: 0.8; + cursor: pointer; } -.mobileSpacer { - display: none; -} @media screen and (max-width: 768px) { - .sideBarCommon { - width: 90vw; - } + .sideBarCommon { + min-width: calc(300rem / 16); + max-width: calc(500rem / 16); + } - .menuHeader { - padding-left: calc(10rem / 16); - } + .menuHeader { + padding-left: calc(10rem / 16); + } - .sectionsWrapper { - padding-left: calc(20rem / 16); - } + .sectionsWrapper { + padding-left: calc(20rem / 16); + } - .headerWrapper { - padding: calc(10rem / 16) calc(20rem / 16) 0 calc(20rem / 16); - } - - .mobileSpacer { - display: block; - padding: calc(50rem / 16); - } + .headerWrapper { + padding: calc(10rem / 16) calc(20rem / 16) 0; + } } .closeMenuButton { - background: var(--primary-heading); - padding: 0 calc(20rem / 16); - border-radius: calc(50rem / 16); - display: flex; - flex-direction: row; - margin-left: calc(20rem / 16); + background: var(--primary-heading); + padding: 0 calc(20rem / 16); + border-radius: calc(50rem / 16); + display: flex; + flex-direction: row; + margin-left: calc(20rem / 16); } .closeMenuButton:hover { - background-color: var(--secondary-accent-light); - cursor: pointer; + background-color: var(--secondary-accent-light); + cursor: pointer; } .lineWrapper { - width: 100%; - display: flex; + width: 100%; + display: flex; } .lineWrapper:before { - content: ""; - flex: 1 1; - border-bottom: 3px solid white; - margin: auto; + content: ""; + flex: 1 1; + border-bottom: 3px solid white; + margin: auto; } \ No newline at end of file diff --git a/components/Header.tsx b/components/Header.tsx index 61c3d84..f02a4bd 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -11,13 +11,22 @@ export function Header() { return ( <> +
{ + setIsShowingMenu(false); + }} + />

CS 2022

-
-
@@ -52,30 +59,6 @@ export function Header() {
- -
{ - setIsShowingMenu(false); - }} - /> ); } - -const ListItem: React.FC<{ link: string; children: string }> = ({ - link, - children, -}) => { - return ( -

- -
  • {children}
    • - -

    - ); -}; diff --git a/package-lock.json b/package-lock.json index 1e58472..16f960c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "cs-2022-class-profile", "version": "0.1.0", "dependencies": { "@visx/axis": "^2.10.0", @@ -35,6 +36,7 @@ "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.30.0", "eslint-plugin-react-hooks": "^4.5.0", + "eslint-plugin-unused-imports": "^2.0.0", "postcss": "^8.4.14", "postcss-calc": "^8.2.4", "postcss-flexbugs-fixes": "^5.0.2", @@ -2126,6 +2128,36 @@ "semver": "bin/semver.js" } }, + "node_modules/eslint-plugin-unused-imports": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-2.0.0.tgz", + "integrity": "sha512-3APeS/tQlTrFa167ThtP0Zm0vctjr4M44HMpeg1P4bK6wItarumq0Ma82xorMKdFsWpphQBlRPzw/pxiVELX1A==", + "dev": true, + "dependencies": { + "eslint-rule-composer": "^0.3.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "peerDependencies": { + "@typescript-eslint/eslint-plugin": "^5.0.0", + "eslint": "^8.0.0" + }, + "peerDependenciesMeta": { + "@typescript-eslint/eslint-plugin": { + "optional": true + } + } + }, + "node_modules/eslint-rule-composer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz", + "integrity": "sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==", + "dev": true, + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/eslint-scope": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", @@ -5949,6 +5981,21 @@ "dev": true, "requires": {} }, + "eslint-plugin-unused-imports": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-2.0.0.tgz", + "integrity": "sha512-3APeS/tQlTrFa167ThtP0Zm0vctjr4M44HMpeg1P4bK6wItarumq0Ma82xorMKdFsWpphQBlRPzw/pxiVELX1A==", + "dev": true, + "requires": { + "eslint-rule-composer": "^0.3.0" + } + }, + "eslint-rule-composer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz", + "integrity": "sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==", + "dev": true + }, "eslint-scope": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", diff --git a/package.json b/package.json index f59b11a..586b95d 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.30.0", "eslint-plugin-react-hooks": "^4.5.0", + "eslint-plugin-unused-imports": "^2.0.0", "postcss": "^8.4.14", "postcss-calc": "^8.2.4", "postcss-flexbugs-fixes": "^5.0.2", diff --git a/pages/samplePage.tsx b/pages/samplePage.tsx index 21db9c4..b48ff33 100644 --- a/pages/samplePage.tsx +++ b/pages/samplePage.tsx @@ -1,13 +1,12 @@ -import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph"; import { mockCategoricalData, moreMockCategoricalData } from "data/mocks"; import React from "react"; import { useWindowDimensions } from "utils/getWindowDimensions"; import { useIsMobile } from "utils/isMobile"; +import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph"; import { ComponentWrapper } from "@/components/ComponentWrapper"; import { Header } from "@/components/Header"; - -import { WordCloud } from "../components/WordCloud"; +import { WordCloud } from "@/components/WordCloud"; import styles from "./samplePage.module.css";