diff --git a/.eslintrc.json b/.eslintrc.json index 594804c..dc85c27 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -7,6 +7,7 @@ "ignorePatterns": [ "src/generated" ], + "plugins": ["simple-import-sort"], "rules": { "semi": [ "error", @@ -37,8 +38,25 @@ "react/react-in-jsx-scope": "off", "react/self-closing-comp": "error", // For now we don't habe prop-types validation - "react/prop-types": "off" - + "react/prop-types": "off", + // Sort imports + "simple-import-sort/imports": [ + "error", + { + "groups": [ + // Packages that are used in almost all files. + ["^react$", "^react\\u0000$", "^styled-components", "^next"], + // All other packages. + ["^@?\\w"], + // Absolute imports and other imports such as Vue-style `@/foo`. + // Anything not matched in another group. + ["^"], + // Side effect imports. + ["^\\u0000"] + ] + } + ], + "simple-import-sort/exports": "error" }, "overrides": [ { @@ -65,7 +83,12 @@ "allowSingleExtends": true } ], - "@typescript-eslint/consistent-type-imports": "error", + "@typescript-eslint/consistent-type-imports": [ + "error", + { + "fixStyle": "inline-type-imports" + } + ], "@typescript-eslint/consistent-type-exports": "error" } } diff --git a/.gitignore b/.gitignore index 1e13173..19f95f5 100644 --- a/.gitignore +++ b/.gitignore @@ -37,6 +37,7 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts +next.config.mjs # IDE (WebStorm) *.iml diff --git a/jsconfig.json b/jsconfig.json index ec2332e..22bf498 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,5 +1,8 @@ { "compilerOptions": { - "baseUrl": "src" + "baseUrl": "src", + "paths": { + "@/*": ["./*"] + } } } diff --git a/next.config.mjs b/next.config.ts similarity index 90% rename from next.config.mjs rename to next.config.ts index 586a10e..facab7f 100644 --- a/next.config.mjs +++ b/next.config.ts @@ -1,10 +1,10 @@ -// @ts-check - -import { ANALYZE, BASE_PATH, STAGING, validateConfig } from "./src/utils/config.mjs"; -import { error, info } from "./src/utils/log.mjs"; +import type { NextConfig } from "next"; import NextBundleAnalyzer from "@next/bundle-analyzer"; +import { ANALYZE, BASE_PATH, STAGING, validateConfig } from "@/utils/config"; +import { error, info } from "@/utils/log"; + const withBundleAnalyzer = NextBundleAnalyzer({ enabled: ANALYZE, }); @@ -18,10 +18,7 @@ if (STAGING) { info("Running animethemes-web in staging mode!"); } -/** - * @type {import('next').NextConfig} - **/ -const nextConfig = { +const nextConfig: NextConfig = { basePath: BASE_PATH, reactStrictMode: true, compiler: { diff --git a/package-lock.json b/package-lock.json index b235e21..08161df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "ahooks": "^3.7.6", "axios": "^1.2.2", "common-tags": "^1.8.0", - "framer-motion": "^10.12.4", + "framer-motion": "^11.2.4", "graphql": "^15.8.0", "graphql-parse-resolve-info": "^4.12.0", "graphql-tag": "^2.12.6", @@ -62,8 +62,10 @@ "@types/styled-components": "^5.1.25", "@typescript-eslint/eslint-plugin": "^5.27.1", "@typescript-eslint/parser": "^5.27.1", + "esbuild": "^0.21.3", "eslint": "7.32.0", "eslint-config-next": "^13.3.0", + "eslint-plugin-simple-import-sort": "^12.1.0", "husky": "^9.0.11", "ts-node": "^10.8.1", "typescript": "^4.9.5" @@ -1191,6 +1193,7 @@ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", "optional": true, + "peer": true, "dependencies": { "@emotion/memoize": "0.7.4" } @@ -1199,7 +1202,8 @@ "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "optional": true + "optional": true, + "peer": true }, "node_modules/@emotion/stylis": { "version": "0.8.5", @@ -1211,6 +1215,374 @@ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.3.tgz", + "integrity": "sha512-yTgnwQpFVYfvvo4SvRFB0SwrW8YjOxEoT7wfMT7Ol5v7v5LDNvSGo67aExmxOb87nQNeWPVvaGBNfQ7BXcrZ9w==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.3.tgz", + "integrity": "sha512-bviJOLMgurLJtF1/mAoJLxDZDL6oU5/ztMHnJQRejbJrSc9FFu0QoUoFhvi6qSKJEw9y5oGyvr9fuDtzJ30rNQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.3.tgz", + "integrity": "sha512-c+ty9necz3zB1Y+d/N+mC6KVVkGUUOcm4ZmT5i/Fk5arOaY3i6CA3P5wo/7+XzV8cb4GrI/Zjp8NuOQ9Lfsosw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.3.tgz", + "integrity": "sha512-JReHfYCRK3FVX4Ra+y5EBH1b9e16TV2OxrPAvzMsGeES0X2Ndm9ImQRI4Ket757vhc5XBOuGperw63upesclRw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.3.tgz", + "integrity": "sha512-U3fuQ0xNiAkXOmQ6w5dKpEvXQRSpHOnbw7gEfHCRXPeTKW9sBzVck6C5Yneb8LfJm0l6le4NQfkNPnWMSlTFUQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.3.tgz", + "integrity": "sha512-3m1CEB7F07s19wmaMNI2KANLcnaqryJxO1fXHUV5j1rWn+wMxdUYoPyO2TnAbfRZdi7ADRwJClmOwgT13qlP3Q==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.3.tgz", + "integrity": "sha512-fsNAAl5pU6wmKHq91cHWQT0Fz0vtyE1JauMzKotrwqIKAswwP5cpHUCxZNSTuA/JlqtScq20/5KZ+TxQdovU/g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.3.tgz", + "integrity": "sha512-tci+UJ4zP5EGF4rp8XlZIdq1q1a/1h9XuronfxTMCNBslpCtmk97Q/5qqy1Mu4zIc0yswN/yP/BLX+NTUC1bXA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.3.tgz", + "integrity": "sha512-f6kz2QpSuyHHg01cDawj0vkyMwuIvN62UAguQfnNVzbge2uWLhA7TCXOn83DT0ZvyJmBI943MItgTovUob36SQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.3.tgz", + "integrity": "sha512-vvG6R5g5ieB4eCJBQevyDMb31LMHthLpXTc2IGkFnPWS/GzIFDnaYFp558O+XybTmYrVjxnryru7QRleJvmZ6Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.3.tgz", + "integrity": "sha512-HjCWhH7K96Na+66TacDLJmOI9R8iDWDDiqe17C7znGvvE4sW1ECt9ly0AJ3dJH62jHyVqW9xpxZEU1jKdt+29A==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.3.tgz", + "integrity": "sha512-BGpimEccmHBZRcAhdlRIxMp7x9PyJxUtj7apL2IuoG9VxvU/l/v1z015nFs7Si7tXUwEsvjc1rOJdZCn4QTU+Q==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.3.tgz", + "integrity": "sha512-5rMOWkp7FQGtAH3QJddP4w3s47iT20hwftqdm7b+loe95o8JU8ro3qZbhgMRy0VuFU0DizymF1pBKkn3YHWtsw==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.3.tgz", + "integrity": "sha512-h0zj1ldel89V5sjPLo5H1SyMzp4VrgN1tPkN29TmjvO1/r0MuMRwJxL8QY05SmfsZRs6TF0c/IDH3u7XYYmbAg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.3.tgz", + "integrity": "sha512-dkAKcTsTJ+CRX6bnO17qDJbLoW37npd5gSNtSzjYQr0svghLJYGYB0NF1SNcU1vDcjXLYS5pO4qOW4YbFama4A==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.3.tgz", + "integrity": "sha512-vnD1YUkovEdnZWEuMmy2X2JmzsHQqPpZElXx6dxENcIwTu+Cu5ERax6+Ke1QsE814Zf3c6rxCfwQdCTQ7tPuXA==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.3.tgz", + "integrity": "sha512-IOXOIm9WaK7plL2gMhsWJd+l2bfrhfilv0uPTptoRoSb2p09RghhQQp9YY6ZJhk/kqmeRt6siRdMSLLwzuT0KQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.3.tgz", + "integrity": "sha512-uTgCwsvQ5+vCQnqM//EfDSuomo2LhdWhFPS8VL8xKf+PKTCrcT/2kPPoWMTs22aB63MLdGMJiE3f1PHvCDmUOw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.3.tgz", + "integrity": "sha512-vNAkR17Ub2MgEud2Wag/OE4HTSI6zlb291UYzHez/psiKarp0J8PKGDnAhMBcHFoOHMXHfExzmjMojJNbAStrQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.3.tgz", + "integrity": "sha512-W8H9jlGiSBomkgmouaRoTXo49j4w4Kfbl6I1bIdO/vT0+0u4f20ko3ELzV3hPI6XV6JNBVX+8BC+ajHkvffIJA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.3.tgz", + "integrity": "sha512-EjEomwyLSCg8Ag3LDILIqYCZAq/y3diJ04PnqGRgq8/4O3VNlXyMd54j/saShaN4h5o5mivOjAzmU6C3X4v0xw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.3.tgz", + "integrity": "sha512-WGiE/GgbsEwR33++5rzjiYsKyHywE8QSZPF7Rfx9EBfK3Qn3xyR6IjyCr5Uk38Kg8fG4/2phN7sXp4NPWd3fcw==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.3.tgz", + "integrity": "sha512-xRxC0jaJWDLYvcUvjQmHCJSfMrgmUuvsoXgDeU/wTorQ1ngDdUBuFtgY3W1Pc5sprGAvZBtWdJX7RPg/iZZUqA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, "node_modules/@eslint/eslintrc": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz", @@ -5447,6 +5819,44 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/esbuild": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.3.tgz", + "integrity": "sha512-Kgq0/ZsAPzKrbOjCQcjoSmPoWhlcVnGAUo7jvaLHoxW1Drto0KGkR1xBNg2Cp43b9ImvxmPEJZ9xkfcnqPsfBw==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.21.3", + "@esbuild/android-arm": "0.21.3", + "@esbuild/android-arm64": "0.21.3", + "@esbuild/android-x64": "0.21.3", + "@esbuild/darwin-arm64": "0.21.3", + "@esbuild/darwin-x64": "0.21.3", + "@esbuild/freebsd-arm64": "0.21.3", + "@esbuild/freebsd-x64": "0.21.3", + "@esbuild/linux-arm": "0.21.3", + "@esbuild/linux-arm64": "0.21.3", + "@esbuild/linux-ia32": "0.21.3", + "@esbuild/linux-loong64": "0.21.3", + "@esbuild/linux-mips64el": "0.21.3", + "@esbuild/linux-ppc64": "0.21.3", + "@esbuild/linux-riscv64": "0.21.3", + "@esbuild/linux-s390x": "0.21.3", + "@esbuild/linux-x64": "0.21.3", + "@esbuild/netbsd-x64": "0.21.3", + "@esbuild/openbsd-x64": "0.21.3", + "@esbuild/sunos-x64": "0.21.3", + "@esbuild/win32-arm64": "0.21.3", + "@esbuild/win32-ia32": "0.21.3", + "@esbuild/win32-x64": "0.21.3" + } + }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -5801,6 +6211,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/eslint-plugin-simple-import-sort": { + "version": "12.1.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.1.0.tgz", + "integrity": "sha512-Y2fqAfC11TcG/WP3TrI1Gi3p3nc8XJyEOJYHyEPEGI/UAgNx6akxxlX74p7SbAQdLcgASKhj8M0GKvH3vq/+ig==", + "dev": true, + "peerDependencies": { + "eslint": ">=5.0.0" + } + }, "node_modules/eslint-scope": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", @@ -6428,20 +6847,21 @@ } }, "node_modules/framer-motion": { - "version": "10.12.4", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.12.4.tgz", - "integrity": "sha512-9gLtv8T6dui0tujHROR+VM3kdJyKiFCFiD94IQE+0OuX6LaIyXtdVpviokVdrHSb1giWhmmX4yzoucALMx6mtw==", + "version": "11.2.4", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.4.tgz", + "integrity": "sha512-D+EXd0lspaZijv3BJhAcSsyGz+gnvoEdnf+QWkPZdhoFzbeX/2skrH9XSVFb0osgUnCajW8x1frjhLuKwa/Reg==", "dependencies": { "tslib": "^2.4.0" }, - "optionalDependencies": { - "@emotion/is-prop-valid": "^0.8.2" - }, "peerDependencies": { + "@emotion/is-prop-valid": "*", "react": "^18.0.0", "react-dom": "^18.0.0" }, "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, "react": { "optional": true }, @@ -12907,6 +13327,7 @@ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", "optional": true, + "peer": true, "requires": { "@emotion/memoize": "0.7.4" } @@ -12915,7 +13336,8 @@ "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "optional": true + "optional": true, + "peer": true }, "@emotion/stylis": { "version": "0.8.5", @@ -12927,6 +13349,167 @@ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" }, + "@esbuild/aix-ppc64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.3.tgz", + "integrity": "sha512-yTgnwQpFVYfvvo4SvRFB0SwrW8YjOxEoT7wfMT7Ol5v7v5LDNvSGo67aExmxOb87nQNeWPVvaGBNfQ7BXcrZ9w==", + "dev": true, + "optional": true + }, + "@esbuild/android-arm": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.3.tgz", + "integrity": "sha512-bviJOLMgurLJtF1/mAoJLxDZDL6oU5/ztMHnJQRejbJrSc9FFu0QoUoFhvi6qSKJEw9y5oGyvr9fuDtzJ30rNQ==", + "dev": true, + "optional": true + }, + "@esbuild/android-arm64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.3.tgz", + "integrity": "sha512-c+ty9necz3zB1Y+d/N+mC6KVVkGUUOcm4ZmT5i/Fk5arOaY3i6CA3P5wo/7+XzV8cb4GrI/Zjp8NuOQ9Lfsosw==", + "dev": true, + "optional": true + }, + "@esbuild/android-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.3.tgz", + "integrity": "sha512-JReHfYCRK3FVX4Ra+y5EBH1b9e16TV2OxrPAvzMsGeES0X2Ndm9ImQRI4Ket757vhc5XBOuGperw63upesclRw==", + "dev": true, + "optional": true + }, + "@esbuild/darwin-arm64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.3.tgz", + "integrity": "sha512-U3fuQ0xNiAkXOmQ6w5dKpEvXQRSpHOnbw7gEfHCRXPeTKW9sBzVck6C5Yneb8LfJm0l6le4NQfkNPnWMSlTFUQ==", + "dev": true, + "optional": true + }, + "@esbuild/darwin-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.3.tgz", + "integrity": "sha512-3m1CEB7F07s19wmaMNI2KANLcnaqryJxO1fXHUV5j1rWn+wMxdUYoPyO2TnAbfRZdi7ADRwJClmOwgT13qlP3Q==", + "dev": true, + "optional": true + }, + "@esbuild/freebsd-arm64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.3.tgz", + "integrity": "sha512-fsNAAl5pU6wmKHq91cHWQT0Fz0vtyE1JauMzKotrwqIKAswwP5cpHUCxZNSTuA/JlqtScq20/5KZ+TxQdovU/g==", + "dev": true, + "optional": true + }, + "@esbuild/freebsd-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.3.tgz", + "integrity": "sha512-tci+UJ4zP5EGF4rp8XlZIdq1q1a/1h9XuronfxTMCNBslpCtmk97Q/5qqy1Mu4zIc0yswN/yP/BLX+NTUC1bXA==", + "dev": true, + "optional": true + }, + "@esbuild/linux-arm": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.3.tgz", + "integrity": "sha512-f6kz2QpSuyHHg01cDawj0vkyMwuIvN62UAguQfnNVzbge2uWLhA7TCXOn83DT0ZvyJmBI943MItgTovUob36SQ==", + "dev": true, + "optional": true + }, + "@esbuild/linux-arm64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.3.tgz", + "integrity": "sha512-vvG6R5g5ieB4eCJBQevyDMb31LMHthLpXTc2IGkFnPWS/GzIFDnaYFp558O+XybTmYrVjxnryru7QRleJvmZ6Q==", + "dev": true, + "optional": true + }, + "@esbuild/linux-ia32": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.3.tgz", + "integrity": "sha512-HjCWhH7K96Na+66TacDLJmOI9R8iDWDDiqe17C7znGvvE4sW1ECt9ly0AJ3dJH62jHyVqW9xpxZEU1jKdt+29A==", + "dev": true, + "optional": true + }, + "@esbuild/linux-loong64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.3.tgz", + "integrity": "sha512-BGpimEccmHBZRcAhdlRIxMp7x9PyJxUtj7apL2IuoG9VxvU/l/v1z015nFs7Si7tXUwEsvjc1rOJdZCn4QTU+Q==", + "dev": true, + "optional": true + }, + "@esbuild/linux-mips64el": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.3.tgz", + "integrity": "sha512-5rMOWkp7FQGtAH3QJddP4w3s47iT20hwftqdm7b+loe95o8JU8ro3qZbhgMRy0VuFU0DizymF1pBKkn3YHWtsw==", + "dev": true, + "optional": true + }, + "@esbuild/linux-ppc64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.3.tgz", + "integrity": "sha512-h0zj1ldel89V5sjPLo5H1SyMzp4VrgN1tPkN29TmjvO1/r0MuMRwJxL8QY05SmfsZRs6TF0c/IDH3u7XYYmbAg==", + "dev": true, + "optional": true + }, + "@esbuild/linux-riscv64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.3.tgz", + "integrity": "sha512-dkAKcTsTJ+CRX6bnO17qDJbLoW37npd5gSNtSzjYQr0svghLJYGYB0NF1SNcU1vDcjXLYS5pO4qOW4YbFama4A==", + "dev": true, + "optional": true + }, + "@esbuild/linux-s390x": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.3.tgz", + "integrity": "sha512-vnD1YUkovEdnZWEuMmy2X2JmzsHQqPpZElXx6dxENcIwTu+Cu5ERax6+Ke1QsE814Zf3c6rxCfwQdCTQ7tPuXA==", + "dev": true, + "optional": true + }, + "@esbuild/linux-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.3.tgz", + "integrity": "sha512-IOXOIm9WaK7plL2gMhsWJd+l2bfrhfilv0uPTptoRoSb2p09RghhQQp9YY6ZJhk/kqmeRt6siRdMSLLwzuT0KQ==", + "dev": true, + "optional": true + }, + "@esbuild/netbsd-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.3.tgz", + "integrity": "sha512-uTgCwsvQ5+vCQnqM//EfDSuomo2LhdWhFPS8VL8xKf+PKTCrcT/2kPPoWMTs22aB63MLdGMJiE3f1PHvCDmUOw==", + "dev": true, + "optional": true + }, + "@esbuild/openbsd-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.3.tgz", + "integrity": "sha512-vNAkR17Ub2MgEud2Wag/OE4HTSI6zlb291UYzHez/psiKarp0J8PKGDnAhMBcHFoOHMXHfExzmjMojJNbAStrQ==", + "dev": true, + "optional": true + }, + "@esbuild/sunos-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.3.tgz", + "integrity": "sha512-W8H9jlGiSBomkgmouaRoTXo49j4w4Kfbl6I1bIdO/vT0+0u4f20ko3ELzV3hPI6XV6JNBVX+8BC+ajHkvffIJA==", + "dev": true, + "optional": true + }, + "@esbuild/win32-arm64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.3.tgz", + "integrity": "sha512-EjEomwyLSCg8Ag3LDILIqYCZAq/y3diJ04PnqGRgq8/4O3VNlXyMd54j/saShaN4h5o5mivOjAzmU6C3X4v0xw==", + "dev": true, + "optional": true + }, + "@esbuild/win32-ia32": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.3.tgz", + "integrity": "sha512-WGiE/GgbsEwR33++5rzjiYsKyHywE8QSZPF7Rfx9EBfK3Qn3xyR6IjyCr5Uk38Kg8fG4/2phN7sXp4NPWd3fcw==", + "dev": true, + "optional": true + }, + "@esbuild/win32-x64": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.3.tgz", + "integrity": "sha512-xRxC0jaJWDLYvcUvjQmHCJSfMrgmUuvsoXgDeU/wTorQ1ngDdUBuFtgY3W1Pc5sprGAvZBtWdJX7RPg/iZZUqA==", + "dev": true, + "optional": true + }, "@eslint/eslintrc": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz", @@ -16187,6 +16770,37 @@ "is-symbol": "^1.0.2" } }, + "esbuild": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.3.tgz", + "integrity": "sha512-Kgq0/ZsAPzKrbOjCQcjoSmPoWhlcVnGAUo7jvaLHoxW1Drto0KGkR1xBNg2Cp43b9ImvxmPEJZ9xkfcnqPsfBw==", + "dev": true, + "requires": { + "@esbuild/aix-ppc64": "0.21.3", + "@esbuild/android-arm": "0.21.3", + "@esbuild/android-arm64": "0.21.3", + "@esbuild/android-x64": "0.21.3", + "@esbuild/darwin-arm64": "0.21.3", + "@esbuild/darwin-x64": "0.21.3", + "@esbuild/freebsd-arm64": "0.21.3", + "@esbuild/freebsd-x64": "0.21.3", + "@esbuild/linux-arm": "0.21.3", + "@esbuild/linux-arm64": "0.21.3", + "@esbuild/linux-ia32": "0.21.3", + "@esbuild/linux-loong64": "0.21.3", + "@esbuild/linux-mips64el": "0.21.3", + "@esbuild/linux-ppc64": "0.21.3", + "@esbuild/linux-riscv64": "0.21.3", + "@esbuild/linux-s390x": "0.21.3", + "@esbuild/linux-x64": "0.21.3", + "@esbuild/netbsd-x64": "0.21.3", + "@esbuild/openbsd-x64": "0.21.3", + "@esbuild/sunos-x64": "0.21.3", + "@esbuild/win32-arm64": "0.21.3", + "@esbuild/win32-ia32": "0.21.3", + "@esbuild/win32-x64": "0.21.3" + } + }, "escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -16552,6 +17166,13 @@ "dev": true, "requires": {} }, + "eslint-plugin-simple-import-sort": { + "version": "12.1.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.1.0.tgz", + "integrity": "sha512-Y2fqAfC11TcG/WP3TrI1Gi3p3nc8XJyEOJYHyEPEGI/UAgNx6akxxlX74p7SbAQdLcgASKhj8M0GKvH3vq/+ig==", + "dev": true, + "requires": {} + }, "eslint-scope": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", @@ -16935,11 +17556,10 @@ } }, "framer-motion": { - "version": "10.12.4", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.12.4.tgz", - "integrity": "sha512-9gLtv8T6dui0tujHROR+VM3kdJyKiFCFiD94IQE+0OuX6LaIyXtdVpviokVdrHSb1giWhmmX4yzoucALMx6mtw==", + "version": "11.2.4", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.4.tgz", + "integrity": "sha512-D+EXd0lspaZijv3BJhAcSsyGz+gnvoEdnf+QWkPZdhoFzbeX/2skrH9XSVFb0osgUnCajW8x1frjhLuKwa/Reg==", "requires": { - "@emotion/is-prop-valid": "^0.8.2", "tslib": "^2.4.0" } }, diff --git a/package.json b/package.json index a6b2b6c..b3cc4be 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,10 @@ "dev": "next dev", "build": "next build", "start": "next start", + "predev": "npm run compile-config", + "prebuild": "npm run compile-config", + "prestart": "npm run compile-config", + "compile-config": "esbuild next.config.ts --bundle --outfile=next.config.mjs --platform=node --format=esm --external:./node_modules/* --target=esnext", "lint": "next lint", "type-check": "tsc", "graphql-codegen": "graphql-codegen --config codegen.ts", @@ -27,7 +31,7 @@ "ahooks": "^3.7.6", "axios": "^1.2.2", "common-tags": "^1.8.0", - "framer-motion": "^10.12.4", + "framer-motion": "^11.2.4", "graphql": "^15.8.0", "graphql-parse-resolve-info": "^4.12.0", "graphql-tag": "^2.12.6", @@ -66,8 +70,10 @@ "@types/styled-components": "^5.1.25", "@typescript-eslint/eslint-plugin": "^5.27.1", "@typescript-eslint/parser": "^5.27.1", + "esbuild": "^0.21.3", "eslint": "7.32.0", "eslint-config-next": "^13.3.0", + "eslint-plugin-simple-import-sort": "^12.1.0", "husky": "^9.0.11", "ts-node": "^10.8.1", "typescript": "^4.9.5" diff --git a/src/components/auth/LoginGate.tsx b/src/components/auth/LoginGate.tsx index 8369ba6..9bdecdc 100644 --- a/src/components/auth/LoginGate.tsx +++ b/src/components/auth/LoginGate.tsx @@ -1,9 +1,10 @@ -import useAuth from "hooks/useAuth"; import type { ReactNode } from "react"; -import { Text } from "components/text"; -import { Column, Row } from "components/box"; -import { LoginDialog } from "components/dialog/LoginDialog"; -import { RegisterDialog } from "components/dialog/RegisterDialog"; + +import { Column, Row } from "@/components/box/Flex"; +import { LoginDialog } from "@/components/dialog/LoginDialog"; +import { RegisterDialog } from "@/components/dialog/RegisterDialog"; +import { Text } from "@/components/text/Text"; +import useAuth from "@/hooks/useAuth"; interface LoginGateProps { children: ReactNode; diff --git a/src/components/box/Flex.ts b/src/components/box/Flex.ts index 9cb83f8..39fcd28 100644 --- a/src/components/box/Flex.ts +++ b/src/components/box/Flex.ts @@ -1,4 +1,5 @@ import styled from "styled-components"; + import type { Property } from "csstype"; const Flex = styled.div<{ diff --git a/src/components/box/Solid.ts b/src/components/box/Solid.ts index 83d46fe..fde9129 100644 --- a/src/components/box/Solid.ts +++ b/src/components/box/Solid.ts @@ -1,5 +1,6 @@ import styled from "styled-components"; -import theme from "theme"; + +import theme from "@/theme"; export const Solid = styled.div` background-color: ${theme.colors["solid"]}; diff --git a/src/components/box/index.ts b/src/components/box/index.ts deleted file mode 100644 index f19a39f..0000000 --- a/src/components/box/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Row, Column } from "./Flex"; -export { Solid } from "./Solid"; diff --git a/src/components/bracket/BracketChart.tsx b/src/components/bracket/BracketChart.tsx index 3913034..bbf77b1 100644 --- a/src/components/bracket/BracketChart.tsx +++ b/src/components/bracket/BracketChart.tsx @@ -1,15 +1,17 @@ -import styled from "styled-components"; -import { Text } from "components/text"; -import { faDiagramProject } from "@fortawesome/pro-solid-svg-icons"; -import { Icon } from "components/icon"; -import type { RefObject } from "react"; import { memo, useCallback, useRef, useState } from "react"; -import theme from "theme"; +import type { RefObject } from "react"; +import styled from "styled-components"; + +import { faDiagramProject } from "@fortawesome/pro-solid-svg-icons"; import { m } from "framer-motion"; -import { Button } from "components/button"; -import { BracketThemeSummaryCard } from "components/bracket/BracketThemeSummaryCard"; -import type { BracketPageQuery } from "generated/graphql"; -import type { RequiredNonNullable } from "utils/types"; + +import { BracketThemeSummaryCard } from "@/components/bracket/BracketThemeSummaryCard"; +import { Button } from "@/components/button/Button"; +import { Icon } from "@/components/icon/Icon"; +import { Text } from "@/components/text/Text"; +import type { BracketPageQuery } from "@/generated/graphql"; +import theme from "@/theme"; +import type { RequiredNonNullable } from "@/utils/types"; const StyledBracketContainer = styled.div` flex: 1 1 0; diff --git a/src/components/bracket/BracketThemeSummaryCard.tsx b/src/components/bracket/BracketThemeSummaryCard.tsx index ecfab1e..6068320 100644 --- a/src/components/bracket/BracketThemeSummaryCard.tsx +++ b/src/components/bracket/BracketThemeSummaryCard.tsx @@ -1,17 +1,20 @@ -import styled from "styled-components"; -import { SummaryCard, ThemeSummaryCard } from "components/card"; -import { Text } from "components/text"; -import extractImages from "utils/extractImages"; -import createVideoSlug from "utils/createVideoSlug"; -import { SongTitleWithArtists } from "components/utils"; -import { Column } from "components/box"; -import { Icon } from "components/icon"; -import { faAward, faSeedling, faUsers } from "@fortawesome/pro-solid-svg-icons"; -import { CornerIcon } from "components/icon/CornerIcon"; -import gql from "graphql-tag"; -import type { BracketThemeSummaryCardConstestantFragment } from "generated/graphql"; import type { ComponentPropsWithoutRef, ReactNode } from "react"; -import { TextLink } from "components/text/TextLink"; +import styled from "styled-components"; + +import { faAward, faSeedling, faUsers } from "@fortawesome/pro-solid-svg-icons"; +import gql from "graphql-tag"; + +import { Column } from "@/components/box/Flex"; +import { SummaryCard } from "@/components/card/SummaryCard"; +import { ThemeSummaryCard } from "@/components/card/ThemeSummaryCard"; +import { CornerIcon } from "@/components/icon/CornerIcon"; +import { Icon } from "@/components/icon/Icon"; +import { Text } from "@/components/text/Text"; +import { TextLink } from "@/components/text/TextLink"; +import { SongTitleWithArtists } from "@/components/utils/SongTitleWithArtists"; +import type { BracketThemeSummaryCardConstestantFragment } from "@/generated/graphql"; +import createVideoSlug from "@/utils/createVideoSlug"; +import extractImages from "@/utils/extractImages"; const StyledSummaryCardWrapper = styled.div` position: relative; diff --git a/src/components/button/BackToTopButton.tsx b/src/components/button/BackToTopButton.tsx index d5433ab..1f7998f 100644 --- a/src/components/button/BackToTopButton.tsx +++ b/src/components/button/BackToTopButton.tsx @@ -1,13 +1,15 @@ +import React, { useContext,useEffect, useState } from "react"; import styled from "styled-components"; -import { Button } from "./Button"; -import { Icon } from "components/icon"; + import { faChevronUp } from "@fortawesome/pro-solid-svg-icons"; -import React, { useState, useEffect, useContext } from "react"; -import theme from "theme"; -import { withHover } from "styles/mixins"; -import PlayerContext from "context/playerContext"; import { AnimatePresence, m } from "framer-motion"; +import { Button } from "@/components/button/Button"; +import { Icon } from "@/components/icon/Icon"; +import PlayerContext from "@/context/playerContext"; +import { withHover } from "@/styles/mixins"; +import theme from "@/theme"; + const ScrollButton = styled(m(Button))<{ $bottomOffset: number }>` position: fixed; right: 16px; diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx index 647048b..265d308 100644 --- a/src/components/button/Button.tsx +++ b/src/components/button/Button.tsx @@ -1,9 +1,10 @@ -import styled from "styled-components"; -import theme from "theme"; -import { withHover } from "styles/mixins"; -import { Solid } from "components/box"; -import type { ComponentPropsWithoutRef, ForwardedRef, ReactNode } from "react"; import { forwardRef } from "react"; +import type { ComponentPropsWithoutRef, ForwardedRef, ReactNode } from "react"; +import styled from "styled-components"; + +import { Solid } from "@/components/box/Solid"; +import { withHover } from "@/styles/mixins"; +import theme from "@/theme"; export const Button = forwardRef(ButtonWithRef); diff --git a/src/components/button/FilterToggleButton.tsx b/src/components/button/FilterToggleButton.tsx index 16d2df3..4388130 100644 --- a/src/components/button/FilterToggleButton.tsx +++ b/src/components/button/FilterToggleButton.tsx @@ -1,7 +1,9 @@ -import { faFilter } from "@fortawesome/pro-solid-svg-icons"; -import { IconTextButton } from "components/button"; import type { ComponentPropsWithoutRef } from "react"; +import { faFilter } from "@fortawesome/pro-solid-svg-icons"; + +import { IconTextButton } from "@/components/button/IconTextButton"; + export function FilterToggleButton(props: Partial>) { return ( Filter diff --git a/src/components/button/IconTextButton.tsx b/src/components/button/IconTextButton.tsx index 628aff2..064ca26 100644 --- a/src/components/button/IconTextButton.tsx +++ b/src/components/button/IconTextButton.tsx @@ -1,10 +1,12 @@ -import { Icon } from "components/icon"; -import { Button } from "components/button"; -import styled from "styled-components"; -import theme from "theme"; -import type { IconDefinition } from "@fortawesome/fontawesome-svg-core"; -import type { ComponentPropsWithoutRef, ReactNode } from "react"; import { forwardRef } from "react"; +import type { ComponentPropsWithoutRef, ReactNode } from "react"; +import styled from "styled-components"; + +import type { IconDefinition } from "@fortawesome/fontawesome-svg-core"; + +import { Button } from "@/components/button/Button"; +import { Icon } from "@/components/icon/Icon"; +import theme from "@/theme"; const StyledButton = styled(Button)<{ $collapseBreakpoint: string }>` gap: 8px; diff --git a/src/components/button/VideoButton.tsx b/src/components/button/VideoButton.tsx index 2aa9e7c..0a1fbae 100644 --- a/src/components/button/VideoButton.tsx +++ b/src/components/button/VideoButton.tsx @@ -1,19 +1,21 @@ -import type { ComponentPropsWithoutRef } from "react"; import { useContext } from "react"; +import type { ComponentPropsWithoutRef } from "react"; import Link from "next/link"; + import { faCompactDisc, faPlay } from "@fortawesome/pro-solid-svg-icons"; -import PlayerContext from "context/playerContext"; -import createVideoSlug, { getVideoSlugByWatchListItem } from "utils/createVideoSlug"; -import { Icon } from "components/icon"; -import { Button } from "components/button"; -import { VideoTags } from "components/tag/VideoTags"; import gql from "graphql-tag"; + +import { Button } from "@/components/button/Button"; +import { Icon } from "@/components/icon/Icon"; +import { VideoTags } from "@/components/tag/VideoTags"; +import PlayerContext from "@/context/playerContext"; import type { VideoButtonAnimeFragment, VideoButtonEntryFragment, VideoButtonThemeFragment, VideoButtonVideoFragment -} from "generated/graphql"; +} from "@/generated/graphql"; +import createVideoSlug, { getVideoSlugByWatchListItem } from "@/utils/createVideoSlug"; interface VideoButtonProps extends ComponentPropsWithoutRef { anime: VideoButtonAnimeFragment diff --git a/src/components/button/index.ts b/src/components/button/index.ts deleted file mode 100644 index c32e943..0000000 --- a/src/components/button/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { Button } from "./Button"; -export { VideoButton } from "./VideoButton"; -export { FilterToggleButton } from "./FilterToggleButton"; -export { IconTextButton } from "./IconTextButton"; -export { BackToTopButton } from "./BackToTopButton"; \ No newline at end of file diff --git a/src/components/card/AnimeSummaryCard.tsx b/src/components/card/AnimeSummaryCard.tsx index aa81e31..5f44768 100644 --- a/src/components/card/AnimeSummaryCard.tsx +++ b/src/components/card/AnimeSummaryCard.tsx @@ -1,20 +1,22 @@ import { Fragment } from "react"; -import { faChevronDown } from "@fortawesome/pro-solid-svg-icons"; -import { Button } from "components/button"; -import { Text } from "components/text"; -import extractImages from "utils/extractImages"; -import { Icon } from "components/icon"; -import { SummaryCard } from "components/card"; import styled from "styled-components"; -import useToggle from "hooks/useToggle"; -import theme from "theme"; -import { uniqBy } from "lodash-es"; -import { Collapse } from "components/utils"; -import { ThemeTable } from "components/table"; -import useMediaQuery from "hooks/useMediaQuery"; + +import { faChevronDown } from "@fortawesome/pro-solid-svg-icons"; import gql from "graphql-tag"; -import type { AnimeSummaryCardAnimeExpandableFragment, AnimeSummaryCardAnimeFragment } from "generated/graphql"; -import { TextLink } from "components/text/TextLink"; +import { uniqBy } from "lodash-es"; + +import { Button } from "@/components/button/Button"; +import { SummaryCard } from "@/components/card/SummaryCard"; +import { Icon } from "@/components/icon/Icon"; +import { ThemeTable } from "@/components/table/ThemeTable"; +import { Text } from "@/components/text/Text"; +import { TextLink } from "@/components/text/TextLink"; +import { Collapse } from "@/components/utils/Collapse"; +import type { AnimeSummaryCardAnimeExpandableFragment, AnimeSummaryCardAnimeFragment } from "@/generated/graphql"; +import useMediaQuery from "@/hooks/useMediaQuery"; +import useToggle from "@/hooks/useToggle"; +import theme from "@/theme"; +import extractImages from "@/utils/extractImages"; const StyledWrapper = styled.div` position: relative diff --git a/src/components/card/AnnouncementCard.tsx b/src/components/card/AnnouncementCard.tsx index d76727d..bc9e3fd 100644 --- a/src/components/card/AnnouncementCard.tsx +++ b/src/components/card/AnnouncementCard.tsx @@ -1,6 +1,7 @@ import type { MDXRemoteSerializeResult } from "next-mdx-remote"; -import { Markdown } from "components/markdown/Markdown"; -import { AnimeAwardsNowAvailable } from "components/event/AnimeAwardsNowAvailable"; + +import { AnimeAwardsNowAvailable } from "@/components/event/AnimeAwardsNowAvailable"; +import { Markdown } from "@/components/markdown/Markdown"; interface AnnouncementCardProps { announcementSource: MDXRemoteSerializeResult; diff --git a/src/components/card/ArtistSummaryCard.tsx b/src/components/card/ArtistSummaryCard.tsx index b6f2dad..6335f8b 100644 --- a/src/components/card/ArtistSummaryCard.tsx +++ b/src/components/card/ArtistSummaryCard.tsx @@ -1,7 +1,8 @@ -import extractImages from "utils/extractImages"; -import { SummaryCard } from "components/card"; import gql from "graphql-tag"; -import type { ArtistSummaryCardArtistFragment } from "generated/graphql"; + +import { SummaryCard } from "@/components/card/SummaryCard"; +import type { ArtistSummaryCardArtistFragment } from "@/generated/graphql"; +import extractImages from "@/utils/extractImages"; type ArtistSummaryCardProps = { artist: ArtistSummaryCardArtistFragment diff --git a/src/components/card/Card.ts b/src/components/card/Card.ts index fa0e117..4806dad 100644 --- a/src/components/card/Card.ts +++ b/src/components/card/Card.ts @@ -1,8 +1,9 @@ import styled, { css } from "styled-components"; -import { Solid } from "components/box"; -import theme from "theme"; -import { withHover } from "styles/mixins"; -import type { Colors } from "theme/colors"; + +import { Solid } from "@/components/box/Solid"; +import { withHover } from "@/styles/mixins"; +import theme from "@/theme"; +import type { Colors } from "@/theme/colors"; export const Card = styled(Solid)<{ hoverable?: boolean diff --git a/src/components/card/ErrorCard.tsx b/src/components/card/ErrorCard.tsx index dc28b19..63e4387 100644 --- a/src/components/card/ErrorCard.tsx +++ b/src/components/card/ErrorCard.tsx @@ -1,10 +1,12 @@ -import { Card } from "components/card"; -import { Row } from "components/box"; -import { Text } from "components/text"; -import { faExclamation } from "@fortawesome/pro-solid-svg-icons"; import styled from "styled-components"; -import theme from "theme"; -import { Icon } from "components/icon"; + +import { faExclamation } from "@fortawesome/pro-solid-svg-icons"; + +import { Row } from "@/components/box/Flex"; +import { Card } from "@/components/card/Card"; +import { Icon } from "@/components/icon/Icon"; +import { Text } from "@/components/text/Text"; +import theme from "@/theme"; const StyledCard = styled(Card)` display: flex; diff --git a/src/components/card/PlaylistSummaryCard.tsx b/src/components/card/PlaylistSummaryCard.tsx index 79aeeec..7359e6e 100644 --- a/src/components/card/PlaylistSummaryCard.tsx +++ b/src/components/card/PlaylistSummaryCard.tsx @@ -1,11 +1,13 @@ -import { SummaryCard } from "components/card/SummaryCard"; import type { PropsWithChildren } from "react"; -import gql from "graphql-tag"; -import type { PlaylistSummaryCardPlaylistFragment, PlaylistSummaryCardShowOwnerFragment } from "generated/graphql"; import type { ReactNode } from "react"; import styled from "styled-components"; -import theme from "theme"; -import { Text } from "components/text"; + +import gql from "graphql-tag"; + +import { SummaryCard } from "@/components/card/SummaryCard"; +import { Text } from "@/components/text/Text"; +import type { PlaylistSummaryCardPlaylistFragment, PlaylistSummaryCardShowOwnerFragment } from "@/generated/graphql"; +import theme from "@/theme"; const StyledWrapper = styled.div` position: relative diff --git a/src/components/card/StudioSummaryCard.tsx b/src/components/card/StudioSummaryCard.tsx index 56d5031..9f8a00d 100644 --- a/src/components/card/StudioSummaryCard.tsx +++ b/src/components/card/StudioSummaryCard.tsx @@ -1,10 +1,12 @@ import { type SyntheticEvent, useState } from "react"; + import type { Property } from "csstype"; import gql from "graphql-tag"; -import type { StudioSummaryCardStudioFragment } from "generated/graphql"; -import extractBackgroundColor from "utils/extractBackgroundColor"; -import { SummaryCard } from "components/card/SummaryCard"; -import extractImages from "utils/extractImages"; + +import { SummaryCard } from "@/components/card/SummaryCard"; +import type { StudioSummaryCardStudioFragment } from "@/generated/graphql"; +import extractBackgroundColor from "@/utils/extractBackgroundColor"; +import extractImages from "@/utils/extractImages"; interface StudioSummaryCardProps { studio: StudioSummaryCardStudioFragment; diff --git a/src/components/card/SummaryCard.tsx b/src/components/card/SummaryCard.tsx index 36595bf..2dbeb94 100644 --- a/src/components/card/SummaryCard.tsx +++ b/src/components/card/SummaryCard.tsx @@ -1,16 +1,18 @@ -import Link from "next/link"; -import { Text } from "components/text"; -import styled, { css } from "styled-components"; -import { Card } from "components/card"; -import { Column } from "components/box"; -import withBasePath from "utils/withBasePath"; -import type { ComponentPropsWithoutRef, ReactNode } from "react"; import { useState } from "react"; -import { loadingAnimation } from "styles/mixins"; -import { TextLink } from "components/text/TextLink"; -import { ConditionalWrapper } from "components/utils/ConditionalWrapper"; +import type { ComponentPropsWithoutRef, ReactNode } from "react"; +import styled, { css } from "styled-components"; +import Link from "next/link"; + import type { Property } from "csstype"; +import { Column } from "@/components/box/Flex"; +import { Card } from "@/components/card/Card"; +import { Text } from "@/components/text/Text"; +import { TextLink } from "@/components/text/TextLink"; +import { ConditionalWrapper } from "@/components/utils/ConditionalWrapper"; +import { loadingAnimation } from "@/styles/mixins"; +import withBasePath from "@/utils/withBasePath"; + const StyledSummaryCard = styled(Card)` display: flex; flex-direction: row; diff --git a/src/components/card/SummaryCard2.tsx b/src/components/card/SummaryCard2.tsx index ef0f95d..69f88a8 100644 --- a/src/components/card/SummaryCard2.tsx +++ b/src/components/card/SummaryCard2.tsx @@ -1,13 +1,15 @@ -import { Text } from "components/text"; -import styled, { css } from "styled-components"; -import { Card } from "components/card"; -import { Column } from "components/box"; -import withBasePath from "utils/withBasePath"; -import type { ComponentPropsWithoutRef, ReactNode } from "react"; import { useState } from "react"; -import { loadingAnimation } from "styles/mixins"; +import type { ComponentPropsWithoutRef, ReactNode } from "react"; +import styled, { css } from "styled-components"; + import type { Property } from "csstype"; +import { Column } from "@/components/box/Flex"; +import { Card } from "@/components/card/Card"; +import { Text } from "@/components/text/Text"; +import { loadingAnimation } from "@/styles/mixins"; +import withBasePath from "@/utils/withBasePath"; + const StyledSummaryCard = styled(Card)` display: flex; flex-direction: row; diff --git a/src/components/card/ThemeDetailCard.tsx b/src/components/card/ThemeDetailCard.tsx index 98080ab..208d951 100644 --- a/src/components/card/ThemeDetailCard.tsx +++ b/src/components/card/ThemeDetailCard.tsx @@ -1,16 +1,19 @@ -import { VideoButton } from "components/button"; -import { Performances, SongTitle } from "components/utils"; -import { Text } from "components/text"; -import { ThemeMenu } from "components/menu/ThemeMenu"; -import { ThemeEntryTags } from "components/tag/ThemeEntryTags"; -import { VideoTags } from "components/tag/VideoTags"; -import gql from "graphql-tag"; -import type { ThemeDetailCardThemeFragment } from "generated/graphql"; import styled from "styled-components"; -import { Card } from "components/card/Card"; -import theme from "theme"; -import { Row } from "components/box"; -import { entryVersionComparator } from "utils/comparators"; + +import gql from "graphql-tag"; + +import { Row } from "@/components/box/Flex"; +import { VideoButton } from "@/components/button/VideoButton"; +import { Card } from "@/components/card/Card"; +import { ThemeMenu } from "@/components/menu/ThemeMenu"; +import { ThemeEntryTags } from "@/components/tag/ThemeEntryTags"; +import { VideoTags } from "@/components/tag/VideoTags"; +import { Text } from "@/components/text/Text"; +import { Performances } from "@/components/utils/Performances"; +import { SongTitle } from "@/components/utils/SongTitle"; +import type { ThemeDetailCardThemeFragment } from "@/generated/graphql"; +import theme from "@/theme"; +import { entryVersionComparator } from "@/utils/comparators"; const StyledThemeCard = styled(Card)` display: flex; diff --git a/src/components/card/ThemeSummaryCard.tsx b/src/components/card/ThemeSummaryCard.tsx index 9303825..ca57ec8 100644 --- a/src/components/card/ThemeSummaryCard.tsx +++ b/src/components/card/ThemeSummaryCard.tsx @@ -1,29 +1,34 @@ -import Link from "next/link"; -import { Collapse, Performances, SongTitle, SongTitleWithArtists } from "components/utils"; -import { Text } from "components/text"; -import extractImages from "utils/extractImages"; -import createVideoSlug from "utils/createVideoSlug"; -import { SummaryCard } from "components/card/SummaryCard2"; -import { ThemeMenu } from "components/menu/ThemeMenu"; -import gql from "graphql-tag"; -import { fetchDataClient } from "lib/client"; -import { Icon } from "components/icon"; -import { faChevronDown } from "@fortawesome/pro-solid-svg-icons"; -import { Button } from "components/button"; -import useToggle from "hooks/useToggle"; +import type { PropsWithChildren } from "react"; import styled from "styled-components"; -import { Table, ThemeTable } from "components/table"; -import theme from "theme"; -import useMediaQuery from "hooks/useMediaQuery"; +import Link from "next/link"; + +import { faChevronDown } from "@fortawesome/pro-solid-svg-icons"; +import gql from "graphql-tag"; + +import { Button } from "@/components/button/Button"; +import { SummaryCard } from "@/components/card/SummaryCard2"; +import { Icon } from "@/components/icon/Icon"; +import { ThemeMenu } from "@/components/menu/ThemeMenu"; +import { Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow } from "@/components/table/Table"; +import { ThemeTable } from "@/components/table/ThemeTable"; +import { Text } from "@/components/text/Text"; +import { TextLink } from "@/components/text/TextLink"; +import { Collapse } from "@/components/utils/Collapse"; +import { Performances } from "@/components/utils/Performances"; +import { SongTitle } from "@/components/utils/SongTitle"; +import { SongTitleWithArtists } from "@/components/utils/SongTitleWithArtists"; import type { ThemeSummaryCardArtistFragment, ThemeSummaryCardQuery, ThemeSummaryCardThemeExpandableFragment, ThemeSummaryCardThemeFragment -} from "generated/graphql"; -import type { PropsWithChildren } from "react"; -import { TableBody, TableCell, TableHead, TableHeadCell, TableRow } from "components/table/Table"; -import { TextLink } from "components/text/TextLink"; +} from "@/generated/graphql"; +import useMediaQuery from "@/hooks/useMediaQuery"; +import useToggle from "@/hooks/useToggle"; +import { fetchDataClient } from "@/lib/client"; +import theme from "@/theme"; +import createVideoSlug from "@/utils/createVideoSlug"; +import extractImages from "@/utils/extractImages"; const StyledWrapper = styled.div` position: relative diff --git a/src/components/card/VideoSummaryCard.tsx b/src/components/card/VideoSummaryCard.tsx index f8849a9..56725e9 100644 --- a/src/components/card/VideoSummaryCard.tsx +++ b/src/components/card/VideoSummaryCard.tsx @@ -1,16 +1,20 @@ -import { Performances, SongTitle, SongTitleWithArtists } from "components/utils"; -import extractImages from "utils/extractImages"; -import createVideoSlug from "utils/createVideoSlug"; -import { SummaryCard } from "components/card/SummaryCard2"; -import gql from "graphql-tag"; -import styled from "styled-components"; -import theme from "theme"; -import type { VideoSummaryCardVideoFragment } from "generated/graphql"; import { type ForwardedRef, forwardRef, type ReactNode } from "react"; -import { TextLink } from "components/text/TextLink"; +import styled from "styled-components"; import Link from "next/link"; -import { Icon } from "components/icon"; + import { faPlay } from "@fortawesome/pro-solid-svg-icons"; +import gql from "graphql-tag"; + +import { SummaryCard } from "@/components/card/SummaryCard2"; +import { Icon } from "@/components/icon/Icon"; +import { TextLink } from "@/components/text/TextLink"; +import { Performances } from "@/components/utils/Performances"; +import { SongTitle } from "@/components/utils/SongTitle"; +import { SongTitleWithArtists } from "@/components/utils/SongTitleWithArtists"; +import type { VideoSummaryCardVideoFragment } from "@/generated/graphql"; +import theme from "@/theme"; +import createVideoSlug from "@/utils/createVideoSlug"; +import extractImages from "@/utils/extractImages"; const StyledWrapper = styled.div` position: relative; @@ -52,12 +56,13 @@ const StyledCoverOverlay = styled.div` interface VideoSummaryCardProps { video: VideoSummaryCardVideoFragment; menu?: ReactNode; + append?: ReactNode; onPlay?(): void; isPlaying?: boolean; } export const VideoSummaryCard = forwardRef( - function VideoSummaryCard({ video, menu, onPlay, isPlaying, ...props }: VideoSummaryCardProps, ref: ForwardedRef) { + function VideoSummaryCard({ video, menu, append, onPlay, isPlaying, ...props }: VideoSummaryCardProps, ref: ForwardedRef) { const entry = video.entries[0]; const theme = entry.theme; const anime = theme?.anime; @@ -96,6 +101,7 @@ export const VideoSummaryCard = forwardRef( {menu} ) : null} + {append} ); diff --git a/src/components/card/index.ts b/src/components/card/index.ts deleted file mode 100644 index 2d34595..0000000 --- a/src/components/card/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export { Card } from "./Card"; -export { SummaryCard } from "./SummaryCard"; -export { AnimeSummaryCard } from "./AnimeSummaryCard"; -export { ThemeSummaryCard } from "./ThemeSummaryCard"; -export { ArtistSummaryCard } from "./ArtistSummaryCard"; -export { ThemeDetailCard } from "./ThemeDetailCard"; -export { ErrorCard } from "./ErrorCard"; diff --git a/src/components/container/SidebarContainer.ts b/src/components/container/SidebarContainer.ts index 57a0c5f..e4b0063 100644 --- a/src/components/container/SidebarContainer.ts +++ b/src/components/container/SidebarContainer.ts @@ -1,5 +1,6 @@ import styled from "styled-components"; -import theme from "theme"; + +import theme from "@/theme"; export const SidebarContainer = styled.div` display: grid; diff --git a/src/components/container/index.ts b/src/components/container/index.ts deleted file mode 100644 index a19985d..0000000 --- a/src/components/container/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Container } from "./Container"; -export { SidebarContainer } from "./SidebarContainer"; diff --git a/src/components/description-list/DescriptionList.tsx b/src/components/description-list/DescriptionList.tsx index 470542c..d2b7f08 100644 --- a/src/components/description-list/DescriptionList.tsx +++ b/src/components/description-list/DescriptionList.tsx @@ -1,6 +1,7 @@ -import styled from "styled-components"; -import { Text } from "components/text"; import type { ComponentPropsWithoutRef, ReactNode } from "react"; +import styled from "styled-components"; + +import { Text } from "@/components/text/Text"; const StyledDescriptionList = styled.dl` display: flex; diff --git a/src/components/description-list/index.ts b/src/components/description-list/index.ts deleted file mode 100644 index 40c95ea..0000000 --- a/src/components/description-list/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { DescriptionList } from "./DescriptionList"; diff --git a/src/components/dialog/Dialog.tsx b/src/components/dialog/Dialog.tsx index e78563c..aae3f0c 100644 --- a/src/components/dialog/Dialog.tsx +++ b/src/components/dialog/Dialog.tsx @@ -1,9 +1,11 @@ import { forwardRef } from "react"; -import * as RadixDialog from "@radix-ui/react-dialog"; import styled, { keyframes } from "styled-components"; -import { Card } from "components/card"; -import theme from "theme"; -import { Text } from "components/text"; + +import * as RadixDialog from "@radix-ui/react-dialog"; + +import { Card } from "@/components/card/Card"; +import { Text } from "@/components/text/Text"; +import theme from "@/theme"; const overlayAnimation = keyframes` from { diff --git a/src/components/dialog/ForgotPasswordDialog.tsx b/src/components/dialog/ForgotPasswordDialog.tsx index 4111617..32d2716 100644 --- a/src/components/dialog/ForgotPasswordDialog.tsx +++ b/src/components/dialog/ForgotPasswordDialog.tsx @@ -1,18 +1,20 @@ -import type { SyntheticEvent } from "react"; import { useState } from "react"; -import { Button } from "components/button"; -import { Input } from "components/form"; -import { Text } from "components/text"; -import { SearchFilter } from "components/search-filter"; +import type { SyntheticEvent } from "react"; import styled from "styled-components"; -import useAuth from "hooks/useAuth"; -import { Dialog, DialogContent, DialogTrigger } from "components/dialog/Dialog"; -import { Column, Row } from "components/box"; -import { Busy } from "components/utils/Busy"; -import { Toast } from "components/toast"; -import { useToasts } from "context/toastContext"; + import { isAxiosError } from "axios"; +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { Dialog, DialogContent, DialogTrigger } from "@/components/dialog/Dialog"; +import { Input } from "@/components/form/Input"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; +import { Toast } from "@/components/toast/Toast"; +import { Busy } from "@/components/utils/Busy"; +import { useToasts } from "@/context/toastContext"; +import useAuth from "@/hooks/useAuth"; + const StyledForm = styled.form` display: flex; flex-direction: column; diff --git a/src/components/dialog/LoginDialog.tsx b/src/components/dialog/LoginDialog.tsx index 9fbc299..08e0406 100644 --- a/src/components/dialog/LoginDialog.tsx +++ b/src/components/dialog/LoginDialog.tsx @@ -1,16 +1,17 @@ -import type { SyntheticEvent } from "react"; import { useState } from "react"; -import { Button } from "components/button"; -import { Input } from "components/form"; -import { Text } from "components/text"; -import { SearchFilter } from "components/search-filter"; +import type { SyntheticEvent } from "react"; import styled from "styled-components"; -import useAuth from "hooks/useAuth"; -import { Dialog, DialogContent, DialogTrigger } from "components/dialog/Dialog"; -import { Column, Row } from "components/box"; -import { Busy } from "components/utils/Busy"; -import Switch from "components/form/Switch"; -import { ForgotPasswordDialog } from "components/dialog/ForgotPasswordDialog"; + +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { Dialog, DialogContent, DialogTrigger } from "@/components/dialog/Dialog"; +import { ForgotPasswordDialog } from "@/components/dialog/ForgotPasswordDialog"; +import { Input } from "@/components/form/Input"; +import Switch from "@/components/form/Switch"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; +import { Busy } from "@/components/utils/Busy"; +import useAuth from "@/hooks/useAuth"; const StyledForm = styled.form` display: flex; diff --git a/src/components/dialog/PasswordChangeDialog.tsx b/src/components/dialog/PasswordChangeDialog.tsx index daa2a47..fb51ead 100644 --- a/src/components/dialog/PasswordChangeDialog.tsx +++ b/src/components/dialog/PasswordChangeDialog.tsx @@ -1,18 +1,20 @@ -import type { SyntheticEvent } from "react"; import { useState } from "react"; -import { Text } from "components/text"; -import { SearchFilter } from "components/search-filter"; -import { Input } from "components/form"; -import { Button } from "components/button"; +import type { SyntheticEvent } from "react"; import styled from "styled-components"; -import { Column, Row } from "components/box"; -import { Dialog, DialogContent, DialogTrigger } from "components/dialog/Dialog"; -import { Busy } from "components/utils/Busy"; -import axios from "lib/client/axios"; + import { isAxiosError } from "axios"; -import { useToasts } from "context/toastContext"; -import { Toast } from "components/toast"; -import { AUTH_PATH } from "utils/config.mjs"; + +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { Dialog, DialogContent, DialogTrigger } from "@/components/dialog/Dialog"; +import { Input } from "@/components/form/Input"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; +import { Toast } from "@/components/toast/Toast"; +import { Busy } from "@/components/utils/Busy"; +import { useToasts } from "@/context/toastContext"; +import axios from "@/lib/client/axios"; +import { AUTH_PATH } from "@/utils/config"; export function PasswordChangeDialog() { const [open, setOpen] = useState(false); diff --git a/src/components/dialog/PasswordResetDialog.tsx b/src/components/dialog/PasswordResetDialog.tsx index 4c71ac1..cd4d8e1 100644 --- a/src/components/dialog/PasswordResetDialog.tsx +++ b/src/components/dialog/PasswordResetDialog.tsx @@ -1,18 +1,20 @@ -import type { SyntheticEvent } from "react"; import { useEffect, useState } from "react"; -import { Text } from "components/text"; -import { SearchFilter } from "components/search-filter"; -import { Input } from "components/form"; -import { Button } from "components/button"; +import type { SyntheticEvent } from "react"; import styled from "styled-components"; -import { Column, Row } from "components/box"; -import { Dialog, DialogContent } from "components/dialog/Dialog"; -import { Busy } from "components/utils/Busy"; -import { isAxiosError } from "axios"; -import { useToasts } from "context/toastContext"; -import { Toast } from "components/toast"; import { useRouter } from "next/router"; -import useAuth from "hooks/useAuth"; + +import { isAxiosError } from "axios"; + +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { Dialog, DialogContent } from "@/components/dialog/Dialog"; +import { Input } from "@/components/form/Input"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; +import { Toast } from "@/components/toast/Toast"; +import { Busy } from "@/components/utils/Busy"; +import { useToasts } from "@/context/toastContext"; +import useAuth from "@/hooks/useAuth"; export function PasswordResetDialog() { const router = useRouter(); diff --git a/src/components/dialog/PlaylistAddDialog.tsx b/src/components/dialog/PlaylistAddDialog.tsx index 6b27cfd..00cfdbe 100644 --- a/src/components/dialog/PlaylistAddDialog.tsx +++ b/src/components/dialog/PlaylistAddDialog.tsx @@ -1,19 +1,22 @@ -import { Dialog, DialogContent, DialogTrigger } from "components/dialog/Dialog"; -import { Button, IconTextButton } from "components/button"; -import { faPlus } from "@fortawesome/pro-solid-svg-icons"; -import { Column, Row } from "components/box"; -import { Text } from "components/text"; -import { SearchFilter } from "components/search-filter"; -import { Input } from "components/form"; -import type { FormEvent, ReactNode } from "react"; import { useState } from "react"; -import { Listbox, ListboxOption } from "components/listbox/Listbox"; -import axios from "lib/client/axios"; +import type { FormEvent, ReactNode } from "react"; import styled from "styled-components"; -import { LoginGate } from "components/auth/LoginGate"; -import { mutate } from "swr"; -import { Busy } from "components/utils/Busy"; + +import { faPlus } from "@fortawesome/pro-solid-svg-icons"; import { isAxiosError } from "axios"; +import { mutate } from "swr"; + +import { LoginGate } from "@/components/auth/LoginGate"; +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { IconTextButton } from "@/components/button/IconTextButton"; +import { Dialog, DialogContent, DialogTrigger } from "@/components/dialog/Dialog"; +import { Input } from "@/components/form/Input"; +import { Listbox, ListboxOption } from "@/components/listbox/Listbox"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; +import { Busy } from "@/components/utils/Busy"; +import axios from "@/lib/client/axios"; interface PlaylistAddDialogProps { trigger?: ReactNode; diff --git a/src/components/dialog/PlaylistEditDialog.tsx b/src/components/dialog/PlaylistEditDialog.tsx index ef2199a..c7907d7 100644 --- a/src/components/dialog/PlaylistEditDialog.tsx +++ b/src/components/dialog/PlaylistEditDialog.tsx @@ -1,21 +1,24 @@ -import { Dialog, DialogContent, DialogTrigger } from "components/dialog/Dialog"; -import { Button, IconTextButton } from "components/button"; -import { faPen } from "@fortawesome/pro-solid-svg-icons"; -import { Column, Row } from "components/box"; -import { Text } from "components/text"; -import { SearchFilter } from "components/search-filter"; -import { Input } from "components/form"; -import type { FormEvent, ReactNode } from "react"; import { useState } from "react"; -import { Listbox, ListboxOption } from "components/listbox/Listbox"; -import axios from "lib/client/axios"; +import type { FormEvent, ReactNode } from "react"; import styled from "styled-components"; -import { LoginGate } from "components/auth/LoginGate"; -import { mutate } from "swr"; -import { Busy } from "components/utils/Busy"; + +import { faPen } from "@fortawesome/pro-solid-svg-icons"; import { isAxiosError } from "axios"; import gql from "graphql-tag"; -import type { PlaylistEditDialogPlaylistFragment } from "generated/graphql"; +import { mutate } from "swr"; + +import { LoginGate } from "@/components/auth/LoginGate"; +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { IconTextButton } from "@/components/button/IconTextButton"; +import { Dialog, DialogContent, DialogTrigger } from "@/components/dialog/Dialog"; +import { Input } from "@/components/form/Input"; +import { Listbox, ListboxOption } from "@/components/listbox/Listbox"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; +import { Busy } from "@/components/utils/Busy"; +import type { PlaylistEditDialogPlaylistFragment } from "@/generated/graphql"; +import axios from "@/lib/client/axios"; interface PlaylistEditDialogProps { playlist: PlaylistEditDialogPlaylistFragment; diff --git a/src/components/dialog/PlaylistRemoveDialog.tsx b/src/components/dialog/PlaylistRemoveDialog.tsx index 6d4d89e..ba756c7 100644 --- a/src/components/dialog/PlaylistRemoveDialog.tsx +++ b/src/components/dialog/PlaylistRemoveDialog.tsx @@ -1,19 +1,22 @@ -import { Dialog, DialogContent, DialogTrigger } from "components/dialog/Dialog"; -import { Button, IconTextButton } from "components/button"; -import { faMinus } from "@fortawesome/pro-solid-svg-icons"; -import { Column, Row } from "components/box"; -import { Text } from "components/text"; -import type { ReactNode } from "react"; import { useState } from "react"; -import axios from "lib/client/axios"; -import { LoginGate } from "components/auth/LoginGate"; -import { mutate } from "swr"; -import { Busy } from "components/utils/Busy"; +import type { ReactNode } from "react"; + +import { faMinus } from "@fortawesome/pro-solid-svg-icons"; import gql from "graphql-tag"; -import { useToasts } from "context/toastContext"; -import { PlaylistRemoveToast } from "components/toast/PlaylistRemoveToast"; -import PlaylistSummaryCard from "components/card/PlaylistSummaryCard"; -import type { PlaylistRemoveDialogPlaylistFragment } from "generated/graphql"; +import { mutate } from "swr"; + +import { LoginGate } from "@/components/auth/LoginGate"; +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { IconTextButton } from "@/components/button/IconTextButton"; +import PlaylistSummaryCard from "@/components/card/PlaylistSummaryCard"; +import { Dialog, DialogContent, DialogTrigger } from "@/components/dialog/Dialog"; +import { Text } from "@/components/text/Text"; +import { PlaylistRemoveToast } from "@/components/toast/PlaylistRemoveToast"; +import { Busy } from "@/components/utils/Busy"; +import { useToasts } from "@/context/toastContext"; +import type { PlaylistRemoveDialogPlaylistFragment } from "@/generated/graphql"; +import axios from "@/lib/client/axios"; interface PlaylistRemoveDialogProps { playlist: PlaylistRemoveDialogPlaylistFragment; diff --git a/src/components/dialog/PlaylistTrackAddDialog.tsx b/src/components/dialog/PlaylistTrackAddDialog.tsx index 6752e8f..43241fa 100644 --- a/src/components/dialog/PlaylistTrackAddDialog.tsx +++ b/src/components/dialog/PlaylistTrackAddDialog.tsx @@ -1,28 +1,31 @@ -import { Dialog, DialogContent, DialogTrigger } from "components/dialog/Dialog"; -import { Button, IconTextButton } from "components/button"; -import { faArrowDown, faListMusic, faMinus, faPlus } from "@fortawesome/pro-solid-svg-icons"; -import { Column, Row } from "components/box"; -import type { ReactNode } from "react"; import { useState } from "react"; -import axios from "lib/client/axios"; +import type { ReactNode } from "react"; + +import { faArrowDown, faListMusic, faMinus, faPlus } from "@fortawesome/pro-solid-svg-icons"; +import gql from "graphql-tag"; import useSWR, { mutate } from "swr"; -import { Icon } from "components/icon"; -import PlaylistSummaryCard from "components/card/PlaylistSummaryCard"; -import { useToasts } from "context/toastContext"; + +import { LoginGate } from "@/components/auth/LoginGate"; +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { IconTextButton } from "@/components/button/IconTextButton"; +import PlaylistSummaryCard from "@/components/card/PlaylistSummaryCard"; +import { VideoSummaryCard, VideoSummaryCardFragmentVideo } from "@/components/card/VideoSummaryCard"; +import { Dialog, DialogContent, DialogTrigger } from "@/components/dialog/Dialog"; +import { PlaylistAddDialog } from "@/components/dialog/PlaylistAddDialog"; +import { Icon } from "@/components/icon/Icon"; +import { Skeleton } from "@/components/skeleton/Skeleton"; +import { Text } from "@/components/text/Text"; +import { PlaylistTrackAddToast } from "@/components/toast/PlaylistTrackAddToast"; +import { PlaylistTrackRemoveToast } from "@/components/toast/PlaylistTrackRemoveToast"; +import { Busy } from "@/components/utils/Busy"; +import { useToasts } from "@/context/toastContext"; import type { PlaylistTrackAddDialogVideoFragment, PlaylistTrackAddFormPlaylistQuery, PlaylistTrackAddFormPlaylistQueryVariables -} from "generated/graphql"; -import { Text } from "components/text"; -import { PlaylistTrackAddToast } from "components/toast/PlaylistTrackAddToast"; -import { PlaylistTrackRemoveToast } from "components/toast/PlaylistTrackRemoveToast"; -import { LoginGate } from "components/auth/LoginGate"; -import { VideoSummaryCard, VideoSummaryCardFragmentVideo } from "components/card/VideoSummaryCard"; -import gql from "graphql-tag"; -import { Skeleton } from "components/skeleton/Skeleton"; -import { Busy } from "components/utils/Busy"; -import { fetchDataClient } from "lib/client"; -import { PlaylistAddDialog } from "components/dialog/PlaylistAddDialog"; +} from "@/generated/graphql"; +import { fetchDataClient } from "@/lib/client"; +import axios from "@/lib/client/axios"; interface PlaylistTrackAddDialogProps { video: PlaylistTrackAddDialogVideoFragment; diff --git a/src/components/dialog/PlaylistTrackRemoveDialog.tsx b/src/components/dialog/PlaylistTrackRemoveDialog.tsx index dcd1147..c365122 100644 --- a/src/components/dialog/PlaylistTrackRemoveDialog.tsx +++ b/src/components/dialog/PlaylistTrackRemoveDialog.tsx @@ -1,22 +1,25 @@ +import { useState } from "react"; +import type { ReactNode } from "react"; + +import { faMinus } from "@fortawesome/pro-solid-svg-icons"; +import gql from "graphql-tag"; +import { mutate } from "swr"; + +import { LoginGate } from "@/components/auth/LoginGate"; +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { IconTextButton } from "@/components/button/IconTextButton"; +import { VideoSummaryCard, VideoSummaryCardFragmentVideo } from "@/components/card/VideoSummaryCard"; +import { Dialog, DialogContent, DialogTrigger } from "@/components/dialog/Dialog"; +import { Text } from "@/components/text/Text"; +import { PlaylistTrackRemoveToast } from "@/components/toast/PlaylistTrackRemoveToast"; +import { Busy } from "@/components/utils/Busy"; +import { useToasts } from "@/context/toastContext"; import type { PlaylistTrackRemoveDialogPlaylistFragment, PlaylistTrackRemoveDialogVideoFragment -} from "generated/graphql"; -import type { ReactNode } from "react"; -import { useState } from "react"; -import { Dialog, DialogContent, DialogTrigger } from "components/dialog/Dialog"; -import { Button, IconTextButton } from "components/button"; -import { faMinus } from "@fortawesome/pro-solid-svg-icons"; -import { LoginGate } from "components/auth/LoginGate"; -import axios from "lib/client/axios"; -import { Column, Row } from "components/box"; -import { VideoSummaryCard, VideoSummaryCardFragmentVideo } from "components/card/VideoSummaryCard"; -import { Text } from "components/text"; -import { PlaylistTrackRemoveToast } from "components/toast/PlaylistTrackRemoveToast"; -import { useToasts } from "context/toastContext"; -import { mutate } from "swr"; -import gql from "graphql-tag"; -import { Busy } from "components/utils/Busy"; +} from "@/generated/graphql"; +import axios from "@/lib/client/axios"; interface PlaylistTrackRemoveDialogProps { playlist: PlaylistTrackRemoveDialogPlaylistFragment; diff --git a/src/components/dialog/RegisterDialog.tsx b/src/components/dialog/RegisterDialog.tsx index fd8b923..ad4aac7 100644 --- a/src/components/dialog/RegisterDialog.tsx +++ b/src/components/dialog/RegisterDialog.tsx @@ -1,17 +1,18 @@ -import type { SyntheticEvent } from "react"; import { useState } from "react"; -import { Text } from "components/text"; -import { SearchFilter } from "components/search-filter"; -import { Input } from "components/form"; -import { Button } from "components/button"; -import useAuth from "hooks/useAuth"; +import type { SyntheticEvent } from "react"; import styled from "styled-components"; -import Switch from "components/form/Switch"; -import { Column, Row } from "components/box"; -import { Dialog, DialogContent, DialogTrigger } from "components/dialog/Dialog"; -import { Busy } from "components/utils/Busy"; import Link from "next/link"; +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { Dialog, DialogContent, DialogTrigger } from "@/components/dialog/Dialog"; +import { Input } from "@/components/form/Input"; +import Switch from "@/components/form/Switch"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; +import { Busy } from "@/components/utils/Busy"; +import useAuth from "@/hooks/useAuth"; + export function RegisterDialog() { const [open, setOpen] = useState(false); diff --git a/src/components/dialog/ShuffleDialog.tsx b/src/components/dialog/ShuffleDialog.tsx index da902e6..70ea6d2 100644 --- a/src/components/dialog/ShuffleDialog.tsx +++ b/src/components/dialog/ShuffleDialog.tsx @@ -1,15 +1,16 @@ import { type FormEvent, type ReactNode, useState } from "react"; -import { Dialog, DialogContent, DialogTrigger } from "components/dialog/Dialog"; -import { Button } from "components/button"; import styled from "styled-components"; -import { Row } from "components/box"; -import useRandomThemes from "hooks/useRandomThemes"; -import { Busy } from "components/utils/Busy"; -import { Switcher } from "../switcher"; -import { SwitcherOption } from "../switcher/Switcher"; -import { Text } from "../text"; -import { SearchFilter, SearchFilterGroup } from "../search-filter"; -import { Input } from "../form"; + +import { Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { Dialog, DialogContent, DialogTrigger } from "@/components/dialog/Dialog"; +import { Input } from "@/components/form/Input"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { SearchFilterGroup } from "@/components/search-filter/SearchFilterGroup"; +import { Switcher, SwitcherOption } from "@/components/switcher/Switcher"; +import { Text } from "@/components/text/Text"; +import { Busy } from "@/components/utils/Busy"; +import useRandomThemes from "@/hooks/useRandomThemes"; interface ShuffleDialogProps { trigger: ReactNode; diff --git a/src/components/dialog/UserInformationDialog.tsx b/src/components/dialog/UserInformationDialog.tsx index 2a09f3e..9f9b46d 100644 --- a/src/components/dialog/UserInformationDialog.tsx +++ b/src/components/dialog/UserInformationDialog.tsx @@ -1,20 +1,22 @@ -import type { SyntheticEvent } from "react"; import { useState } from "react"; -import { Text } from "components/text"; -import { SearchFilter } from "components/search-filter"; -import { Input } from "components/form"; -import { Button } from "components/button"; +import type { SyntheticEvent } from "react"; import styled from "styled-components"; -import { Column, Row } from "components/box"; -import { Dialog, DialogContent, DialogTrigger } from "components/dialog/Dialog"; -import { Busy } from "components/utils/Busy"; -import axios from "lib/client/axios"; + import { isAxiosError } from "axios"; -import { useToasts } from "context/toastContext"; -import { Toast } from "components/toast"; -import { AUTH_PATH } from "utils/config.mjs"; import { mutate } from "swr"; -import useAuth from "../../hooks/useAuth"; + +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { Dialog, DialogContent, DialogTrigger } from "@/components/dialog/Dialog"; +import { Input } from "@/components/form/Input"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; +import { Toast } from "@/components/toast/Toast"; +import { Busy } from "@/components/utils/Busy"; +import { useToasts } from "@/context/toastContext"; +import useAuth from "@/hooks/useAuth"; +import axios from "@/lib/client/axios"; +import { AUTH_PATH } from "@/utils/config"; export function UserInformationDialog() { const [open, setOpen] = useState(false); diff --git a/src/components/event/AnimeAwardsNowAvailable.tsx b/src/components/event/AnimeAwardsNowAvailable.tsx index 458f1b9..8a82cc7 100644 --- a/src/components/event/AnimeAwardsNowAvailable.tsx +++ b/src/components/event/AnimeAwardsNowAvailable.tsx @@ -1,10 +1,12 @@ import styled, { keyframes } from "styled-components"; -import theme from "theme"; import Link from "next/link"; + import { faArrowRight, faTrophy } from "@fortawesome/pro-solid-svg-icons"; -import { Text } from "components/text"; -import { Icon } from "components/icon"; -import { Button } from "components/button"; + +import { Button } from "@/components/button/Button"; +import { Icon } from "@/components/icon/Icon"; +import { Text } from "@/components/text/Text"; +import theme from "@/theme"; const EventButtonContainer = styled.div` position: relative; diff --git a/src/components/external-link/ExternalLink.tsx b/src/components/external-link/ExternalLink.tsx index 68ac0dd..ac15fe9 100644 --- a/src/components/external-link/ExternalLink.tsx +++ b/src/components/external-link/ExternalLink.tsx @@ -1,8 +1,10 @@ -import { faChevronCircleRight } from "@fortawesome/pro-solid-svg-icons"; -import { Text } from "components/text"; -import { Icon } from "components/icon"; import type { ComponentPropsWithoutRef, ReactNode } from "react"; +import { faChevronCircleRight } from "@fortawesome/pro-solid-svg-icons"; + +import { Icon } from "@/components/icon/Icon"; +import { Text } from "@/components/text/Text"; + interface ExternalLinkProps extends ComponentPropsWithoutRef { href?: string | null children: ReactNode diff --git a/src/components/external-link/index.ts b/src/components/external-link/index.ts deleted file mode 100644 index 094bf8d..0000000 --- a/src/components/external-link/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ExternalLink } from "./ExternalLink"; diff --git a/src/components/featured-theme/FeaturedTheme.tsx b/src/components/featured-theme/FeaturedTheme.tsx index 0a849fb..437a94e 100644 --- a/src/components/featured-theme/FeaturedTheme.tsx +++ b/src/components/featured-theme/FeaturedTheme.tsx @@ -1,18 +1,20 @@ -import { FeaturedThemePreview } from "utils/settings"; -import styled, { keyframes } from "styled-components"; -import theme from "theme"; -import { ThemeSummaryCard } from "components/card"; -import extractImages from "utils/extractImages"; -import type { ReactNode } from "react"; import { useEffect, useState } from "react"; -import useSetting from "hooks/useSetting"; -import useCompatability from "hooks/useCompatability"; -import { fetchRandomGrill } from "lib/client/randomGrill"; -import createVideoSlug from "utils/createVideoSlug"; +import type { ReactNode } from "react"; +import styled, { keyframes } from "styled-components"; import Link from "next/link"; -import { VIDEO_URL } from "utils/config.mjs"; + import gql from "graphql-tag"; -import type { FeaturedThemeThemeFragment } from "generated/graphql"; + +import { ThemeSummaryCard } from "@/components/card/ThemeSummaryCard"; +import type { FeaturedThemeThemeFragment } from "@/generated/graphql"; +import useCompatability from "@/hooks/useCompatability"; +import useSetting from "@/hooks/useSetting"; +import { fetchRandomGrill } from "@/lib/client/randomGrill"; +import theme from "@/theme"; +import { VIDEO_URL } from "@/utils/config"; +import createVideoSlug from "@/utils/createVideoSlug"; +import extractImages from "@/utils/extractImages"; +import { FeaturedThemePreview } from "@/utils/settings"; const slowPan = keyframes` from { diff --git a/src/components/featured-theme/index.ts b/src/components/featured-theme/index.ts deleted file mode 100644 index 91c9786..0000000 --- a/src/components/featured-theme/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { FeaturedTheme } from "./FeaturedTheme"; diff --git a/src/components/filter/AnimeThemeFilter.tsx b/src/components/filter/AnimeThemeFilter.tsx index b9b540e..70b7ddf 100644 --- a/src/components/filter/AnimeThemeFilter.tsx +++ b/src/components/filter/AnimeThemeFilter.tsx @@ -1,12 +1,14 @@ import { memo, useMemo, useState } from "react"; -import { Column, Row } from "components/box"; -import { ThemeDetailCard } from "components/card"; -import { HorizontalScroll } from "components/utils"; -import { either, themeGroupComparator, themeIndexComparator, themeTypeComparator } from "utils/comparators"; + import gql from "graphql-tag"; -import type { AnimeThemeFilterThemeFragment } from "generated/graphql"; -import { Listbox, ListboxOption } from "components/listbox/Listbox"; -import { Text } from "components/text/Text"; + +import { Column, Row } from "@/components/box/Flex"; +import { ThemeDetailCard } from "@/components/card/ThemeDetailCard"; +import { Listbox, ListboxOption } from "@/components/listbox/Listbox"; +import { Text } from "@/components/text/Text"; +import { HorizontalScroll } from "@/components/utils/HorizontalScroll"; +import type { AnimeThemeFilterThemeFragment } from "@/generated/graphql"; +import { either, themeGroupComparator, themeIndexComparator, themeTypeComparator } from "@/utils/comparators"; interface AnimeThemeFilterProps { themes: Array diff --git a/src/components/filter/index.ts b/src/components/filter/index.ts deleted file mode 100644 index 5884626..0000000 --- a/src/components/filter/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { AnimeThemeFilter } from "./AnimeThemeFilter"; diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index 900eca5..78c7796 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -1,13 +1,16 @@ -import Link from "next/link"; -import { Column, Row, Solid } from "components/box"; -import { Container } from "components/container"; -import { Text } from "components/text"; -import { Icon } from "components/icon"; -import { faDiscord, faGithub, faReddit, faTwitter } from "@fortawesome/free-brands-svg-icons"; -import { Button } from "components/button"; -import styled from "styled-components"; -import theme from "theme"; import type { ComponentPropsWithoutRef } from "react"; +import styled from "styled-components"; +import Link from "next/link"; + +import { faDiscord, faGithub, faReddit, faTwitter } from "@fortawesome/free-brands-svg-icons"; + +import { Column, Row } from "@/components/box/Flex"; +import { Solid } from "@/components/box/Solid"; +import { Button } from "@/components/button/Button"; +import { Container } from "@/components/container/Container"; +import { Icon } from "@/components/icon/Icon"; +import { Text } from "@/components/text/Text"; +import theme from "@/theme"; const StyledFooter = styled(Solid)` margin-top: auto; diff --git a/src/components/footer/index.ts b/src/components/footer/index.ts deleted file mode 100644 index e5ea0e5..0000000 --- a/src/components/footer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Footer } from "./Footer"; diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx index c6a1995..bf3560a 100644 --- a/src/components/form/Input.tsx +++ b/src/components/form/Input.tsx @@ -1,11 +1,13 @@ -import styled from "styled-components"; -import theme from "theme"; -import { Icon } from "components/icon"; -import { faTimes } from "@fortawesome/pro-solid-svg-icons"; -import { Button } from "components/button"; -import type { IconDefinition } from "@fortawesome/fontawesome-svg-core"; import type { ComponentPropsWithoutRef } from "react"; -import { withColorTheme } from "styles/mixins"; +import styled from "styled-components"; + +import type { IconDefinition } from "@fortawesome/fontawesome-svg-core"; +import { faTimes } from "@fortawesome/pro-solid-svg-icons"; + +import { Button } from "@/components/button/Button"; +import { Icon } from "@/components/icon/Icon"; +import { withColorTheme } from "@/styles/mixins"; +import theme from "@/theme"; const StyledSearchInput = styled.div` display: flex; diff --git a/src/components/form/Switch.tsx b/src/components/form/Switch.tsx index f04739f..aa57b48 100644 --- a/src/components/form/Switch.tsx +++ b/src/components/form/Switch.tsx @@ -1,7 +1,9 @@ -import * as RadixSwitch from "@radix-ui/react-switch"; import styled from "styled-components"; -import theme from "theme"; -import { withColorTheme } from "styles/mixins"; + +import * as RadixSwitch from "@radix-ui/react-switch"; + +import { withColorTheme } from "@/styles/mixins"; +import theme from "@/theme"; const StyledSwitch = styled(RadixSwitch.Root)` width: 50px; diff --git a/src/components/form/index.ts b/src/components/form/index.ts index 8487f43..7751d33 100644 --- a/src/components/form/index.ts +++ b/src/components/form/index.ts @@ -1 +1 @@ -export { Input } from "components/form/Input"; +export { Input } from "@/components/form/Input"; diff --git a/src/components/icon/CornerIcon.ts b/src/components/icon/CornerIcon.ts index 9102323..7b0abf0 100644 --- a/src/components/icon/CornerIcon.ts +++ b/src/components/icon/CornerIcon.ts @@ -1,6 +1,7 @@ import styled from "styled-components"; -import { Icon } from "components/icon/Icon"; -import theme from "theme"; + +import { Icon } from "@/components/icon/Icon"; +import theme from "@/theme"; export const CornerIcon = styled(Icon)` position: absolute; diff --git a/src/components/icon/FontAwesomeIcon.tsx b/src/components/icon/FontAwesomeIcon.tsx index 36a8490..356b9d6 100644 --- a/src/components/icon/FontAwesomeIcon.tsx +++ b/src/components/icon/FontAwesomeIcon.tsx @@ -1,4 +1,5 @@ import type { SVGProps } from "react"; + import type { IconDefinition } from "@fortawesome/fontawesome-svg-core"; export type FontAwesomeIconProps = SVGProps & { diff --git a/src/components/icon/Icon.tsx b/src/components/icon/Icon.tsx index e76f68b..4197131 100644 --- a/src/components/icon/Icon.tsx +++ b/src/components/icon/Icon.tsx @@ -1,8 +1,10 @@ -import { FontAwesomeIcon } from "components/icon/FontAwesomeIcon"; import styled from "styled-components"; -import theme from "theme"; + import type { Property } from "csstype"; -import type { Colors } from "theme/colors"; + +import { FontAwesomeIcon } from "@/components/icon/FontAwesomeIcon"; +import theme from "@/theme"; +import type { Colors } from "@/theme/colors"; export const Icon = styled(FontAwesomeIcon)<{ color?: keyof Colors, transition?: Property.Transition }>` color: ${(props) => props.color && theme.colors[props.color]}; diff --git a/src/components/icon/index.ts b/src/components/icon/index.ts deleted file mode 100644 index 65d727b..0000000 --- a/src/components/icon/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Icon } from "./Icon"; diff --git a/src/components/image/CoverImage.tsx b/src/components/image/CoverImage.tsx index 2f311b9..7ce8fe9 100644 --- a/src/components/image/CoverImage.tsx +++ b/src/components/image/CoverImage.tsx @@ -1,10 +1,12 @@ -import extractImages from "utils/extractImages"; -import { AspectRatio } from "components/utils"; -import { FullWidthImage } from "components/image"; -import gql from "graphql-tag"; -import type { CoverImageResourceWithImagesFragment } from "generated/graphql"; import type { ComponentPropsWithoutRef } from "react"; +import gql from "graphql-tag"; + +import { FullWidthImage } from "@/components/image/FullWidthImage"; +import { AspectRatio } from "@/components/utils/AspectRatio"; +import type { CoverImageResourceWithImagesFragment } from "@/generated/graphql"; +import extractImages from "@/utils/extractImages"; + interface CoverImageProps extends ComponentPropsWithoutRef { resourceWithImages: CoverImageResourceWithImagesFragment } diff --git a/src/components/image/FullWidthImage.ts b/src/components/image/FullWidthImage.ts index 42616ba..d9d0c59 100644 --- a/src/components/image/FullWidthImage.ts +++ b/src/components/image/FullWidthImage.ts @@ -1,5 +1,6 @@ import styled from "styled-components"; -import theme from "theme"; + +import theme from "@/theme"; export const FullWidthImage = styled.img` width: 100%; diff --git a/src/components/image/LogoPlaceholder.tsx b/src/components/image/LogoPlaceholder.tsx index f8bdcd2..265f258 100644 --- a/src/components/image/LogoPlaceholder.tsx +++ b/src/components/image/LogoPlaceholder.tsx @@ -1,7 +1,8 @@ -import styled from "styled-components"; -import theme from "theme"; -import { Logo } from "components/image/Logo"; import type { ComponentPropsWithoutRef } from "react"; +import styled from "styled-components"; + +import { Logo } from "@/components/image/Logo"; +import theme from "@/theme"; const StyledPlaceholder = styled.div` width: 100%; diff --git a/src/components/image/MultiCoverImage.tsx b/src/components/image/MultiCoverImage.tsx index bcaab05..b754c5f 100644 --- a/src/components/image/MultiCoverImage.tsx +++ b/src/components/image/MultiCoverImage.tsx @@ -1,10 +1,12 @@ -import extractImages from "utils/extractImages"; -import { AspectRatio } from "components/utils"; -import styled, { css } from "styled-components"; import type { ComponentPropsWithoutRef } from "react"; -import type { MultiCoverImageResourceWithImagesFragment } from "generated/graphql"; +import styled, { css } from "styled-components"; + import gql from "graphql-tag"; -import { LogoPlaceholder } from "components/image/LogoPlaceholder"; + +import { LogoPlaceholder } from "@/components/image/LogoPlaceholder"; +import { AspectRatio } from "@/components/utils/AspectRatio"; +import type { MultiCoverImageResourceWithImagesFragment } from "@/generated/graphql"; +import extractImages from "@/utils/extractImages"; function getTranslationX(item: number, itemCount: number) { switch (itemCount) { diff --git a/src/components/image/ProfileImage.tsx b/src/components/image/ProfileImage.tsx index c6fba63..9970de1 100644 --- a/src/components/image/ProfileImage.tsx +++ b/src/components/image/ProfileImage.tsx @@ -1,7 +1,8 @@ import gql from "graphql-tag"; -import type { ProfileImageUserFragment } from "generated/graphql"; import md5 from "md5"; +import type { ProfileImageUserFragment } from "@/generated/graphql"; + interface ProfileImageProps { user: ProfileImageUserFragment; size?: number; diff --git a/src/components/image/StudioCoverImage.tsx b/src/components/image/StudioCoverImage.tsx index 92ba1c5..b437772 100644 --- a/src/components/image/StudioCoverImage.tsx +++ b/src/components/image/StudioCoverImage.tsx @@ -1,12 +1,15 @@ -import extractImages from "utils/extractImages"; -import { AspectRatio } from "components/utils"; -import { FullWidthImage, MultiCoverImage } from "components/image"; -import gql from "graphql-tag"; -import type { ComponentPropsWithoutRef } from "react"; import { useState } from "react"; -import type { StudioCoverImageStudioFragment } from "generated/graphql"; +import type { ComponentPropsWithoutRef } from "react"; import styled from "styled-components"; +import gql from "graphql-tag"; + +import { FullWidthImage } from "@/components/image/FullWidthImage"; +import { MultiCoverImage } from "@/components/image/MultiCoverImage"; +import { AspectRatio } from "@/components/utils/AspectRatio"; +import type { StudioCoverImageStudioFragment } from "@/generated/graphql"; +import extractImages from "@/utils/extractImages"; + const StyledImage = styled(FullWidthImage)` object-fit: contain; background-size: contain; diff --git a/src/components/image/index.ts b/src/components/image/index.ts deleted file mode 100644 index 7488f69..0000000 --- a/src/components/image/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { FullWidthImage } from "./FullWidthImage"; -export { CoverImage } from "./CoverImage"; -export { MultiCoverImage } from "./MultiCoverImage"; -export { Logo } from "./Logo"; diff --git a/src/components/index/AlphabeticalIndex.tsx b/src/components/index/AlphabeticalIndex.tsx index 2b98164..59386f1 100644 --- a/src/components/index/AlphabeticalIndex.tsx +++ b/src/components/index/AlphabeticalIndex.tsx @@ -1,9 +1,11 @@ -import type { ReactNode } from "react"; import React from "react"; -import Link from "next/link"; -import { groupBy } from "lodash-es"; -import { Text } from "components/text"; +import type { ReactNode } from "react"; import styled from "styled-components"; +import Link from "next/link"; + +import { groupBy } from "lodash-es"; + +import { Text } from "@/components/text/Text"; const StyledLetterList = styled.div` display: flex; diff --git a/src/components/index/index.ts b/src/components/index/index.ts deleted file mode 100644 index a3dca17..0000000 --- a/src/components/index/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { AlphabeticalIndex } from "./AlphabeticalIndex"; diff --git a/src/components/listbox/Listbox.tsx b/src/components/listbox/Listbox.tsx index 0b690ec..f6c4128 100644 --- a/src/components/listbox/Listbox.tsx +++ b/src/components/listbox/Listbox.tsx @@ -1,11 +1,13 @@ -import styled from "styled-components"; -import { faCheck, faSort, faTimes } from "@fortawesome/pro-solid-svg-icons"; -import { Button } from "components/button"; -import theme from "theme"; -import * as RadixSelect from "@radix-ui/react-select"; -import { flipDown } from "styles/animations"; -import { Icon } from "components/icon"; import { forwardRef } from "react"; +import styled from "styled-components"; + +import { faCheck, faSort, faTimes } from "@fortawesome/pro-solid-svg-icons"; +import * as RadixSelect from "@radix-ui/react-select"; + +import { Button } from "@/components/button/Button"; +import { Icon } from "@/components/icon/Icon"; +import { flipDown } from "@/styles/animations"; +import theme from "@/theme"; // Radix' listbox can't handle null values, so we are giving it a fake null value. const NULL_VALUE = "__NULL__"; diff --git a/src/components/markdown/Markdown.tsx b/src/components/markdown/Markdown.tsx index c5bdb56..c74e04b 100644 --- a/src/components/markdown/Markdown.tsx +++ b/src/components/markdown/Markdown.tsx @@ -1,13 +1,15 @@ +import type { ComponentPropsWithoutRef } from "react"; +import styled from "styled-components"; import type { MDXRemoteSerializeResult } from "next-mdx-remote"; import { MDXRemote } from "next-mdx-remote"; -import type { ComponentPropsWithoutRef } from "react"; -import { TextLink } from "components/text/TextLink"; -import { Text } from "components/text"; -import { Card } from "components/card"; -import styled from "styled-components"; -import theme from "theme"; + import type { MDXComponents } from "mdx/types"; +import { Card } from "@/components/card/Card"; +import { Text } from "@/components/text/Text"; +import { TextLink } from "@/components/text/TextLink"; +import theme from "@/theme"; + const StyledMarkdown = styled.div` line-height: 1.75; word-break: break-word; diff --git a/src/components/markdown/TableOfContents.tsx b/src/components/markdown/TableOfContents.tsx index 707157a..cac8e39 100644 --- a/src/components/markdown/TableOfContents.tsx +++ b/src/components/markdown/TableOfContents.tsx @@ -1,9 +1,11 @@ -import type { Heading } from "utils/rehypeExtractHeadings"; import { useEffect, useState } from "react"; -import { Text } from "components/text"; import styled from "styled-components"; + import { m } from "framer-motion"; -import theme from "theme"; + +import { Text } from "@/components/text/Text"; +import theme from "@/theme"; +import type { Heading } from "@/utils/rehypeExtractHeadings"; const StyledTableOfContents = styled.ul` position: sticky; diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx index 5a2c930..641ad25 100644 --- a/src/components/menu/Menu.tsx +++ b/src/components/menu/Menu.tsx @@ -1,10 +1,12 @@ -import styled from "styled-components"; -import theme from "theme"; -import { flipDown } from "styles/animations"; import { forwardRef } from "react"; +import styled from "styled-components"; + import type { DropdownMenuContentProps } from "@radix-ui/react-dropdown-menu"; import * as RadixMenu from "@radix-ui/react-dropdown-menu"; +import { flipDown } from "@/styles/animations"; +import theme from "@/theme"; + const StyledMenuContent = styled(RadixMenu.Content)` width: max-content; max-height: var(--radix-dropdown-menu-content-available-height); diff --git a/src/components/menu/ShareMenu.tsx b/src/components/menu/ShareMenu.tsx new file mode 100644 index 0000000..5a03f7a --- /dev/null +++ b/src/components/menu/ShareMenu.tsx @@ -0,0 +1,54 @@ +import type { ReactNode } from "react"; + +import { faShare } from "@fortawesome/pro-solid-svg-icons"; + +import { IconTextButton } from "@/components/button/IconTextButton"; +import { Menu, MenuContent, MenuItem, MenuTrigger } from "@/components/menu/Menu"; +import { Toast } from "@/components/toast/Toast"; +import { useToasts } from "@/context/toastContext"; +import useSetting from "@/hooks/useSetting"; +import { BASE_PATH } from "@/utils/config"; +import { AudioMode } from "@/utils/settings"; + +interface ShareMenuProps { + pagePath: string; + videoUrl: string; + audioUrl: string; + trigger?: ReactNode; +} + +export function ShareMenu({ pagePath, videoUrl, audioUrl, trigger }: ShareMenuProps) { + const { dispatchToast } = useToasts(); + const [audioMode] = useSetting(AudioMode, { storageSync: false }); + + function saveToClipboard(url: string) { + navigator.clipboard.writeText(url) + .then(() => dispatchToast("clipboard", Copied to clipboard!)); + } + + return ( + + + {trigger ?? Share} + + + saveToClipboard(location.origin + BASE_PATH + pagePath)}>Copy URL to this Page + {audioMode === AudioMode.ENABLED ? ( + <> + saveToClipboard(audioUrl)}>Copy URL to Embeddable Audio + + Download Audio + + + ) : ( + <> + saveToClipboard(videoUrl)}>Copy URL to Embeddable Video + + Download Video + + + )} + + + ); +} \ No newline at end of file diff --git a/src/components/menu/ThemeMenu.tsx b/src/components/menu/ThemeMenu.tsx index c50a7e6..55b2592 100644 --- a/src/components/menu/ThemeMenu.tsx +++ b/src/components/menu/ThemeMenu.tsx @@ -1,14 +1,15 @@ -import { Icon } from "components/icon"; import { faEllipsisV, faListMusic } from "@fortawesome/pro-solid-svg-icons"; -import { Text } from "components/text"; -import type { ThemeMenuThemeFragment } from "generated/graphql"; -import { PlaylistTrackAddDialog } from "components/dialog/PlaylistTrackAddDialog"; import gql from "graphql-tag"; -import { SongTitleWithArtists } from "components/utils"; -import extractImages from "utils/extractImages"; -import createVideoSlug from "utils/createVideoSlug"; -import { Menu, MenuContent, MenuItem, MenuTrigger } from "components/menu/Menu"; -import { Button } from "components/button"; + +import { Button } from "@/components/button/Button"; +import { PlaylistTrackAddDialog } from "@/components/dialog/PlaylistTrackAddDialog"; +import { Icon } from "@/components/icon/Icon"; +import { Menu, MenuContent, MenuItem, MenuTrigger } from "@/components/menu/Menu"; +import { Text } from "@/components/text/Text"; +import { SongTitleWithArtists } from "@/components/utils/SongTitleWithArtists"; +import type { ThemeMenuThemeFragment } from "@/generated/graphql"; +import createVideoSlug from "@/utils/createVideoSlug"; +import extractImages from "@/utils/extractImages"; interface ThemeMenuProps { theme: ThemeMenuThemeFragment; diff --git a/src/components/navigation/Navigation.style.ts b/src/components/navigation/Navigation.style.ts index fe872f6..340fc4b 100644 --- a/src/components/navigation/Navigation.style.ts +++ b/src/components/navigation/Navigation.style.ts @@ -1,8 +1,9 @@ import styled, { css } from "styled-components"; -import { Container } from "components/container"; -import theme from "theme"; -import { Logo } from "components/image"; -import { ProfileImage } from "components/image/ProfileImage"; + +import { Container } from "@/components/container/Container"; +import { Logo } from "@/components/image/Logo"; +import { ProfileImage } from "@/components/image/ProfileImage"; +import theme from "@/theme"; export const StyledNavigation = styled.nav<{ $floating: boolean }>` position: sticky; diff --git a/src/components/navigation/Navigation.tsx b/src/components/navigation/Navigation.tsx index 1b7f1cd..5448e03 100644 --- a/src/components/navigation/Navigation.tsx +++ b/src/components/navigation/Navigation.tsx @@ -1,6 +1,11 @@ import { useEffect, useState } from "react"; import Link from "next/link"; +import { useRouter } from "next/router"; + import { faRandom, faSearch, faTv, faUser } from "@fortawesome/pro-solid-svg-icons"; + +import { IconTextButton } from "@/components/button/IconTextButton"; +import { ShuffleDialog } from "@/components/dialog/ShuffleDialog"; import { StyledLogo, StyledLogoContainer, @@ -9,12 +14,9 @@ import { StyledNavigationLinks, StyledProfileImage, StyledProfileImageIcon -} from "./Navigation.style"; -import { IconTextButton } from "components/button"; -import useCurrentSeason from "hooks/useCurrentSeason"; -import { useRouter } from "next/router"; -import useAuth from "hooks/useAuth"; -import { ShuffleDialog } from "../dialog/ShuffleDialog"; +} from "@/components/navigation/Navigation.style"; +import useAuth from "@/hooks/useAuth"; +import useCurrentSeason from "@/hooks/useCurrentSeason"; export function Navigation() { const { me } = useAuth(); diff --git a/src/components/navigation/SearchNavigation.tsx b/src/components/navigation/SearchNavigation.tsx index de9ed46..500a154 100644 --- a/src/components/navigation/SearchNavigation.tsx +++ b/src/components/navigation/SearchNavigation.tsx @@ -1,15 +1,16 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import Link from "next/link"; -import { Text } from "components/text"; -import { Input } from "components/form"; -import { HorizontalScroll } from "components/utils"; -import { Switcher } from "components/switcher"; import styled from "styled-components"; -import theme from "theme"; +import Link from "next/link"; import { useRouter } from "next/router"; -import { debounce } from "lodash-es"; + import { faSearch } from "@fortawesome/pro-solid-svg-icons"; -import { SwitcherOption, SwitcherReset } from "components/switcher/Switcher"; +import { debounce } from "lodash-es"; + +import { Input } from "@/components/form/Input"; +import { Switcher, SwitcherOption, SwitcherReset } from "@/components/switcher/Switcher"; +import { Text } from "@/components/text/Text"; +import { HorizontalScroll } from "@/components/utils/HorizontalScroll"; +import theme from "@/theme"; const StyledSearchOptions = styled.div` display: grid; diff --git a/src/components/navigation/SeasonNavigation.tsx b/src/components/navigation/SeasonNavigation.tsx index 91c0054..4235573 100644 --- a/src/components/navigation/SeasonNavigation.tsx +++ b/src/components/navigation/SeasonNavigation.tsx @@ -1,10 +1,10 @@ -import { Row } from "components/box"; -import { Switcher } from "components/switcher"; import Link from "next/link"; -import { HorizontalScroll } from "components/utils"; -import type { YearDetailPageProps } from "pages/year/[year]"; -import { SwitcherOption } from "components/switcher/Switcher"; -import type { SeasonDetailPageProps } from "pages/year/[year]/[season]"; + +import { Row } from "@/components/box/Flex"; +import { Switcher, SwitcherOption } from "@/components/switcher/Switcher"; +import { HorizontalScroll } from "@/components/utils/HorizontalScroll"; +import type { YearDetailPageProps } from "@/pages/year/[year]"; +import type { SeasonDetailPageProps } from "@/pages/year/[year]/[season]"; export function SeasonNavigation(props: YearDetailPageProps | SeasonDetailPageProps) { const { year } = props; diff --git a/src/components/navigation/YearNavigation.tsx b/src/components/navigation/YearNavigation.tsx index 43fc557..f9c1fb8 100644 --- a/src/components/navigation/YearNavigation.tsx +++ b/src/components/navigation/YearNavigation.tsx @@ -1,9 +1,10 @@ -import Link from "next/link"; -import { Button } from "components/button"; import styled from "styled-components"; -import { Row } from "components/box"; -import { Text } from "components/text"; -import type { YearDetailPageProps } from "pages/year/[year]"; +import Link from "next/link"; + +import { Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { Text } from "@/components/text/Text"; +import type { YearDetailPageProps } from "@/pages/year/[year]"; const StyledYear = styled.div` flex: 1; diff --git a/src/components/navigation/index.ts b/src/components/navigation/index.ts deleted file mode 100644 index be1f59f..0000000 --- a/src/components/navigation/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { Navigation } from "./Navigation"; -export { SeasonNavigation } from "./SeasonNavigation"; -export { YearNavigation } from "./YearNavigation"; -export { SearchNavigation } from "./SearchNavigation"; diff --git a/src/components/search-filter/SearchFilterFirstLetter.tsx b/src/components/search-filter/SearchFilterFirstLetter.tsx index d588ef9..8fae466 100644 --- a/src/components/search-filter/SearchFilterFirstLetter.tsx +++ b/src/components/search-filter/SearchFilterFirstLetter.tsx @@ -1,6 +1,6 @@ -import { Text } from "components/text"; -import { SearchFilter } from "components/search-filter"; -import { Listbox, ListboxOption } from "components/listbox/Listbox"; +import { Listbox, ListboxOption } from "@/components/listbox/Listbox"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; const letters = createLetters(); diff --git a/src/components/search-filter/SearchFilterMediaFormat.tsx b/src/components/search-filter/SearchFilterMediaFormat.tsx index 43f7ec6..3eeccf8 100644 --- a/src/components/search-filter/SearchFilterMediaFormat.tsx +++ b/src/components/search-filter/SearchFilterMediaFormat.tsx @@ -1,6 +1,6 @@ -import { Text } from "components/text"; -import { SearchFilter } from "components/search-filter"; -import { Listbox, ListboxOption } from "components/listbox/Listbox"; +import { Listbox, ListboxOption } from "@/components/listbox/Listbox"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; interface SearchFilterMediaFormatProps { value: string | null diff --git a/src/components/search-filter/SearchFilterSeason.tsx b/src/components/search-filter/SearchFilterSeason.tsx index 156b152..eb4dd36 100644 --- a/src/components/search-filter/SearchFilterSeason.tsx +++ b/src/components/search-filter/SearchFilterSeason.tsx @@ -1,6 +1,6 @@ -import { Text } from "components/text"; -import { SearchFilter } from "components/search-filter"; -import { Listbox, ListboxOption } from "components/listbox/Listbox"; +import { Listbox, ListboxOption } from "@/components/listbox/Listbox"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; interface SearchFilterSeasonProps { value: string | null diff --git a/src/components/search-filter/SearchFilterSortBy.tsx b/src/components/search-filter/SearchFilterSortBy.tsx index ef469dd..f6bca98 100644 --- a/src/components/search-filter/SearchFilterSortBy.tsx +++ b/src/components/search-filter/SearchFilterSortBy.tsx @@ -1,8 +1,9 @@ -import { Text } from "components/text"; -import { SearchFilter } from "components/search-filter"; import type { ReactNode } from "react"; -import type { ListboxOptionProps } from "components/listbox/Listbox"; -import { Listbox, ListboxOption } from "components/listbox/Listbox"; + +import type { ListboxOptionProps } from "@/components/listbox/Listbox"; +import { Listbox, ListboxOption } from "@/components/listbox/Listbox"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; interface SearchFilterSortByProps { children: ReactNode diff --git a/src/components/search-filter/SearchFilterThemeType.tsx b/src/components/search-filter/SearchFilterThemeType.tsx index 4d8545c..bf17baa 100644 --- a/src/components/search-filter/SearchFilterThemeType.tsx +++ b/src/components/search-filter/SearchFilterThemeType.tsx @@ -1,6 +1,6 @@ -import { Text } from "components/text"; -import { SearchFilter } from "components/search-filter"; -import { Listbox, ListboxOption } from "components/listbox/Listbox"; +import { Listbox, ListboxOption } from "@/components/listbox/Listbox"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; interface SearchFilterThemeTypeProps { value: string | null diff --git a/src/components/search-filter/SearchFilterYear.tsx b/src/components/search-filter/SearchFilterYear.tsx index baf9ee7..3dc0275 100644 --- a/src/components/search-filter/SearchFilterYear.tsx +++ b/src/components/search-filter/SearchFilterYear.tsx @@ -1,7 +1,7 @@ -import { Text } from "components/text"; -import useYearList from "hooks/useYearList"; -import { SearchFilter } from "components/search-filter"; -import { Listbox, ListboxOption } from "components/listbox/Listbox"; +import { Listbox, ListboxOption } from "@/components/listbox/Listbox"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { Text } from "@/components/text/Text"; +import useYearList from "@/hooks/useYearList"; interface SearchFilterYearProps { value: string | null diff --git a/src/components/search-filter/index.ts b/src/components/search-filter/index.ts deleted file mode 100644 index e1d502d..0000000 --- a/src/components/search-filter/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export { SearchFilter } from "./SearchFilter"; -export { SearchFilterGroup } from "./SearchFilterGroup"; -export { SearchFilterFirstLetter } from "./SearchFilterFirstLetter"; -export { SearchFilterSeason } from "./SearchFilterSeason"; -export { SearchFilterYear } from "./SearchFilterYear"; -export { SearchFilterThemeType } from "./SearchFilterThemeType"; -export { SearchFilterSortBy } from "./SearchFilterSortBy"; diff --git a/src/components/search/SearchAnime.tsx b/src/components/search/SearchAnime.tsx index 888e8bd..0a2ac0f 100644 --- a/src/components/search/SearchAnime.tsx +++ b/src/components/search/SearchAnime.tsx @@ -1,17 +1,17 @@ -import { - SearchFilterFirstLetter, - SearchFilterSeason, - SearchFilterSortBy, - SearchFilterYear -} from "components/search-filter"; -import { SearchEntity } from "components/search"; -import { AnimeSummaryCard } from "components/card"; import { useState } from "react"; + import gql from "graphql-tag"; -import type { SearchAnimeQuery, SearchAnimeQueryVariables } from "generated/graphql"; -import { fetchDataClient } from "lib/client"; -import useFilterStorage from "hooks/useFilterStorage"; -import { SearchFilterMediaFormat } from "components/search-filter/SearchFilterMediaFormat"; + +import { AnimeSummaryCard } from "@/components/card/AnimeSummaryCard"; +import { SearchEntity } from "@/components/search/SearchEntity"; +import { SearchFilterFirstLetter } from "@/components/search-filter/SearchFilterFirstLetter"; +import { SearchFilterMediaFormat } from "@/components/search-filter/SearchFilterMediaFormat"; +import { SearchFilterSeason } from "@/components/search-filter/SearchFilterSeason"; +import { SearchFilterSortBy } from "@/components/search-filter/SearchFilterSortBy"; +import { SearchFilterYear } from "@/components/search-filter/SearchFilterYear"; +import type { SearchAnimeQuery, SearchAnimeQueryVariables } from "@/generated/graphql"; +import useFilterStorage from "@/hooks/useFilterStorage"; +import { fetchDataClient } from "@/lib/client"; const initialFilter = { firstLetter: null, diff --git a/src/components/search/SearchArtist.tsx b/src/components/search/SearchArtist.tsx index 2b190c8..8f7a1dd 100644 --- a/src/components/search/SearchArtist.tsx +++ b/src/components/search/SearchArtist.tsx @@ -1,11 +1,14 @@ -import { SearchFilterFirstLetter, SearchFilterSortBy } from "components/search-filter"; -import { SearchEntity } from "components/search"; -import { ArtistSummaryCard } from "components/card"; import { useState } from "react"; -import { fetchDataClient } from "lib/client"; -import type { SearchArtistQuery, SearchArtistQueryVariables } from "generated/graphql"; + import gql from "graphql-tag"; -import useFilterStorage from "hooks/useFilterStorage"; + +import { ArtistSummaryCard } from "@/components/card/ArtistSummaryCard"; +import { SearchEntity } from "@/components/search/SearchEntity"; +import { SearchFilterFirstLetter } from "@/components/search-filter/SearchFilterFirstLetter"; +import { SearchFilterSortBy } from "@/components/search-filter/SearchFilterSortBy"; +import type { SearchArtistQuery, SearchArtistQueryVariables } from "@/generated/graphql"; +import useFilterStorage from "@/hooks/useFilterStorage"; +import { fetchDataClient } from "@/lib/client"; const initialFilter = { firstLetter: null, diff --git a/src/components/search/SearchEntity.tsx b/src/components/search/SearchEntity.tsx index 64970fd..c3f7fb1 100644 --- a/src/components/search/SearchEntity.tsx +++ b/src/components/search/SearchEntity.tsx @@ -1,14 +1,16 @@ -import { faChevronDown, faSpinner } from "@fortawesome/pro-solid-svg-icons"; -import { Button } from "components/button"; -import { Text } from "components/text"; -import { Column, Row } from "components/box"; -import { Icon } from "components/icon"; -import { SearchFilterGroup } from "components/search-filter"; -import { ErrorCard } from "components/card"; -import useEntitySearch from "hooks/useEntitySearch"; import type { ReactNode } from "react"; -import type { SearchArgs } from "generated/graphql"; -import type { SimpleSearchArgs } from "lib/client/search"; + +import { faChevronDown, faSpinner } from "@fortawesome/pro-solid-svg-icons"; + +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { ErrorCard } from "@/components/card/ErrorCard"; +import { Icon } from "@/components/icon/Icon"; +import { SearchFilterGroup } from "@/components/search-filter/SearchFilterGroup"; +import { Text } from "@/components/text/Text"; +import type { SearchArgs } from "@/generated/graphql"; +import useEntitySearch from "@/hooks/useEntitySearch"; +import type { SimpleSearchArgs } from "@/lib/client/search"; interface SearchEntityProps { entity: string diff --git a/src/components/search/SearchGlobal.tsx b/src/components/search/SearchGlobal.tsx index fe98461..041ba91 100644 --- a/src/components/search/SearchGlobal.tsx +++ b/src/components/search/SearchGlobal.tsx @@ -1,17 +1,23 @@ -import Link from "next/link"; -import { faChevronDown } from "@fortawesome/pro-solid-svg-icons"; -import { Button } from "components/button"; -import { Text } from "components/text"; -import { Column, Row } from "components/box"; -import { Icon } from "components/icon"; -import { useQuery } from "react-query"; -import { AnimeSummaryCard, ArtistSummaryCard, ErrorCard, SummaryCard, ThemeSummaryCard } from "components/card"; -import { useRouter } from "next/router"; -import { fetchDataClient } from "lib/client"; -import gql from "graphql-tag"; -import type { SearchGlobalQuery, SearchGlobalQueryVariables } from "generated/graphql"; import type { ReactNode } from "react"; -import PlaylistSummaryCard from "components/card/PlaylistSummaryCard"; +import Link from "next/link"; +import { useRouter } from "next/router"; + +import { faChevronDown } from "@fortawesome/pro-solid-svg-icons"; +import gql from "graphql-tag"; +import { useQuery } from "react-query"; + +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { AnimeSummaryCard } from "@/components/card/AnimeSummaryCard"; +import { ArtistSummaryCard } from "@/components/card/ArtistSummaryCard"; +import { ErrorCard } from "@/components/card/ErrorCard"; +import PlaylistSummaryCard from "@/components/card/PlaylistSummaryCard"; +import { SummaryCard } from "@/components/card/SummaryCard"; +import { ThemeSummaryCard } from "@/components/card/ThemeSummaryCard"; +import { Icon } from "@/components/icon/Icon"; +import { Text } from "@/components/text/Text"; +import type { SearchGlobalQuery, SearchGlobalQueryVariables } from "@/generated/graphql"; +import { fetchDataClient } from "@/lib/client"; interface SearchGlobalProps { searchQuery?: string diff --git a/src/components/search/SearchPlaylist.tsx b/src/components/search/SearchPlaylist.tsx index 8d70fe9..52fcdc8 100644 --- a/src/components/search/SearchPlaylist.tsx +++ b/src/components/search/SearchPlaylist.tsx @@ -1,11 +1,13 @@ -import { SearchFilterSortBy } from "components/search-filter"; -import { SearchEntity } from "components/search"; import { useState } from "react"; + import gql from "graphql-tag"; -import type { SearchPlaylistQuery, SearchPlaylistQueryVariables } from "generated/graphql"; -import { fetchDataClient } from "lib/client"; -import useFilterStorage from "hooks/useFilterStorage"; -import PlaylistSummaryCard from "components/card/PlaylistSummaryCard"; + +import PlaylistSummaryCard from "@/components/card/PlaylistSummaryCard"; +import { SearchEntity } from "@/components/search/SearchEntity"; +import { SearchFilterSortBy } from "@/components/search-filter/SearchFilterSortBy"; +import type { SearchPlaylistQuery, SearchPlaylistQueryVariables } from "@/generated/graphql"; +import useFilterStorage from "@/hooks/useFilterStorage"; +import { fetchDataClient } from "@/lib/client"; const initialFilter = { sortBy: "name", diff --git a/src/components/search/SearchSeries.tsx b/src/components/search/SearchSeries.tsx index 01b427e..9a1b2ec 100644 --- a/src/components/search/SearchSeries.tsx +++ b/src/components/search/SearchSeries.tsx @@ -1,11 +1,14 @@ -import { SearchFilterFirstLetter, SearchFilterSortBy } from "components/search-filter"; -import { SearchEntity } from "components/search"; -import { SummaryCard } from "components/card"; import { useState } from "react"; -import { fetchDataClient } from "lib/client"; -import type { SearchSeriesQuery, SearchSeriesQueryVariables } from "generated/graphql"; + import gql from "graphql-tag"; -import useFilterStorage from "hooks/useFilterStorage"; + +import { SummaryCard } from "@/components/card/SummaryCard"; +import { SearchEntity } from "@/components/search/SearchEntity"; +import { SearchFilterFirstLetter } from "@/components/search-filter/SearchFilterFirstLetter"; +import { SearchFilterSortBy } from "@/components/search-filter/SearchFilterSortBy"; +import type { SearchSeriesQuery, SearchSeriesQueryVariables } from "@/generated/graphql"; +import useFilterStorage from "@/hooks/useFilterStorage"; +import { fetchDataClient } from "@/lib/client"; const initialFilter = { firstLetter: null, diff --git a/src/components/search/SearchStudio.tsx b/src/components/search/SearchStudio.tsx index c97f026..25a69bf 100644 --- a/src/components/search/SearchStudio.tsx +++ b/src/components/search/SearchStudio.tsx @@ -1,12 +1,15 @@ -import { SearchFilterFirstLetter, SearchFilterSortBy } from "components/search-filter"; -import { SearchEntity } from "components/search"; import { useState } from "react"; -import { fetchDataClient } from "lib/client"; -import type { SearchStudioQuery, SearchStudioQueryVariables } from "generated/graphql"; + import gql from "graphql-tag"; -import { StudioCoverImage } from "components/image/StudioCoverImage"; -import useFilterStorage from "hooks/useFilterStorage"; -import { StudioSummaryCard } from "components/card/StudioSummaryCard"; + +import { StudioSummaryCard } from "@/components/card/StudioSummaryCard"; +import { StudioCoverImage } from "@/components/image/StudioCoverImage"; +import { SearchEntity } from "@/components/search/SearchEntity"; +import { SearchFilterFirstLetter } from "@/components/search-filter/SearchFilterFirstLetter"; +import { SearchFilterSortBy } from "@/components/search-filter/SearchFilterSortBy"; +import type { SearchStudioQuery, SearchStudioQueryVariables } from "@/generated/graphql"; +import useFilterStorage from "@/hooks/useFilterStorage"; +import { fetchDataClient } from "@/lib/client"; const initialFilter = { firstLetter: null, diff --git a/src/components/search/SearchTheme.tsx b/src/components/search/SearchTheme.tsx index 99eb63f..ab991c7 100644 --- a/src/components/search/SearchTheme.tsx +++ b/src/components/search/SearchTheme.tsx @@ -1,11 +1,15 @@ -import { SearchFilterFirstLetter, SearchFilterSortBy, SearchFilterThemeType } from "components/search-filter"; -import { SearchEntity } from "components/search"; -import { ThemeSummaryCard } from "components/card"; import { useState } from "react"; -import { fetchDataClient } from "lib/client"; -import type { SearchThemeQuery, SearchThemeQueryVariables } from "generated/graphql"; + import gql from "graphql-tag"; -import useFilterStorage from "hooks/useFilterStorage"; + +import { ThemeSummaryCard } from "@/components/card/ThemeSummaryCard"; +import { SearchEntity } from "@/components/search/SearchEntity"; +import { SearchFilterFirstLetter } from "@/components/search-filter/SearchFilterFirstLetter"; +import { SearchFilterSortBy } from "@/components/search-filter/SearchFilterSortBy"; +import { SearchFilterThemeType } from "@/components/search-filter/SearchFilterThemeType"; +import type { SearchThemeQuery, SearchThemeQueryVariables } from "@/generated/graphql"; +import useFilterStorage from "@/hooks/useFilterStorage"; +import { fetchDataClient } from "@/lib/client"; const initialFilter = { firstLetter: null, diff --git a/src/components/search/index.ts b/src/components/search/index.ts deleted file mode 100644 index 77c127f..0000000 --- a/src/components/search/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export { SearchGlobal } from "./SearchGlobal"; -export { SearchEntity } from "./SearchEntity"; -export { SearchAnime } from "./SearchAnime"; -export { SearchTheme } from "./SearchTheme"; -export { SearchArtist } from "./SearchArtist"; -export { SearchSeries } from "./SearchSeries"; -export { SearchStudio } from "./SearchStudio"; diff --git a/src/components/seo/SEO.tsx b/src/components/seo/SEO.tsx index 84ef588..853a689 100644 --- a/src/components/seo/SEO.tsx +++ b/src/components/seo/SEO.tsx @@ -1,6 +1,7 @@ import type { PropsWithChildren } from "react"; import Head from "next/head"; -import withBasePath from "utils/withBasePath"; + +import withBasePath from "@/utils/withBasePath"; interface SEOProps { title?: string diff --git a/src/components/seo/index.ts b/src/components/seo/index.ts deleted file mode 100644 index f827191..0000000 --- a/src/components/seo/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { SEO } from "./SEO"; diff --git a/src/components/skeleton/Skeleton.tsx b/src/components/skeleton/Skeleton.tsx index c98c197..620c68b 100644 --- a/src/components/skeleton/Skeleton.tsx +++ b/src/components/skeleton/Skeleton.tsx @@ -1,10 +1,12 @@ -import styled from "styled-components"; -import { loadingAnimation } from "styles/mixins"; -import { fadeIn } from "styles/animations"; -import theme from "theme"; import type { ReactNode } from "react"; +import styled from "styled-components"; + import type { Property } from "csstype"; +import { fadeIn } from "@/styles/animations"; +import { loadingAnimation } from "@/styles/mixins"; +import theme from "@/theme"; + const StyledSkeleton = styled.div` ${loadingAnimation} `; diff --git a/src/components/skeleton/index.ts b/src/components/skeleton/index.ts deleted file mode 100644 index 0ea7701..0000000 --- a/src/components/skeleton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Skeleton } from "./Skeleton"; diff --git a/src/components/slider/Slider.tsx b/src/components/slider/Slider.tsx index 9041410..99d5de9 100644 --- a/src/components/slider/Slider.tsx +++ b/src/components/slider/Slider.tsx @@ -1,7 +1,9 @@ import { forwardRef } from "react"; -import * as RadixSlider from "@radix-ui/react-slider"; import styled from "styled-components"; -import theme from "theme"; + +import * as RadixSlider from "@radix-ui/react-slider"; + +import theme from "@/theme"; const StyledSlider = styled(RadixSlider.Root)` position: relative; diff --git a/src/components/switcher/Switcher.tsx b/src/components/switcher/Switcher.tsx index 9eaeeba..5e32123 100644 --- a/src/components/switcher/Switcher.tsx +++ b/src/components/switcher/Switcher.tsx @@ -1,13 +1,15 @@ -import styled from "styled-components"; -import { LayoutGroup, m } from "framer-motion"; -import theme from "theme"; -import { uniqueId as createUniqueId } from "lodash-es"; -import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from "react"; import { createContext, useContext, useMemo } from "react"; +import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from "react"; +import styled from "styled-components"; + import { faTimes } from "@fortawesome/pro-solid-svg-icons"; -import { Icon } from "components/icon"; -import { withHover } from "styles/mixins"; -import { Solid } from "components/box"; +import { LayoutGroup, m } from "framer-motion"; +import { uniqueId as createUniqueId } from "lodash-es"; + +import { Solid } from "@/components/box/Solid"; +import { Icon } from "@/components/icon/Icon"; +import { withHover } from "@/styles/mixins"; +import theme from "@/theme"; interface SwitcherContextValue { selectedItem: string | null diff --git a/src/components/switcher/index.ts b/src/components/switcher/index.ts deleted file mode 100644 index 4d776ba..0000000 --- a/src/components/switcher/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Switcher } from "./Switcher"; diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx index bf714cc..eb0cf56 100644 --- a/src/components/table/Table.tsx +++ b/src/components/table/Table.tsx @@ -1,8 +1,10 @@ import styled from "styled-components"; -import theme from "theme"; -import { withHover } from "styles/mixins"; + import type { Property } from "csstype"; +import { withHover } from "@/styles/mixins"; +import theme from "@/theme"; + export const Table = styled.div<{ style: { "--columns": Property.GridTemplateColumns } }>` width: 100%; `; diff --git a/src/components/table/ThemeTable.tsx b/src/components/table/ThemeTable.tsx index 8416ab4..b7c5434 100644 --- a/src/components/table/ThemeTable.tsx +++ b/src/components/table/ThemeTable.tsx @@ -1,16 +1,18 @@ -import { either, themeIndexComparator, themeTypeComparator } from "utils/comparators"; -import createVideoSlug from "utils/createVideoSlug"; import Link from "next/link"; -import { Table } from "components/table"; -import { Text } from "components/text"; -import { SongTitle } from "components/utils"; -import { ContentWarningTags } from "components/tag/ContentWarningTags"; -import { EpisodeTag } from "components/tag/EpisodeTag"; -import { VideoTags } from "components/tag/VideoTags"; -import { Row } from "components/box"; -import { TableBody, TableCell, TableHead, TableHeadCell, TableRow } from "components/table/Table"; + import gql from "graphql-tag"; -import type { ThemeTableThemeFragment } from "generated/graphql"; + +import { Row } from "@/components/box/Flex"; +import { Table } from "@/components/table/Table"; +import { TableBody, TableCell, TableHead, TableHeadCell, TableRow } from "@/components/table/Table"; +import { ContentWarningTags } from "@/components/tag/ContentWarningTags"; +import { EpisodeTag } from "@/components/tag/EpisodeTag"; +import { VideoTags } from "@/components/tag/VideoTags"; +import { Text } from "@/components/text/Text"; +import { SongTitle } from "@/components/utils/SongTitle"; +import type { ThemeTableThemeFragment } from "@/generated/graphql"; +import { either, themeIndexComparator, themeTypeComparator } from "@/utils/comparators"; +import createVideoSlug from "@/utils/createVideoSlug"; export interface ThemeTableProps { themes: Array diff --git a/src/components/table/index.ts b/src/components/table/index.ts deleted file mode 100644 index 5e0cf1c..0000000 --- a/src/components/table/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Table } from "./Table"; -export { ThemeTable } from "./ThemeTable"; diff --git a/src/components/tag/ContentWarningTags.tsx b/src/components/tag/ContentWarningTags.tsx index 1314fba..91a0204 100644 --- a/src/components/tag/ContentWarningTags.tsx +++ b/src/components/tag/ContentWarningTags.tsx @@ -1,8 +1,9 @@ import { faExclamationCircle } from "@fortawesome/pro-solid-svg-icons"; -import { Tag } from "components/tag/Tag"; -import { Icon } from "components/icon"; import gql from "graphql-tag"; -import type { ContentWarningTagsEntryFragment } from "generated/graphql"; + +import { Icon } from "@/components/icon/Icon"; +import { Tag } from "@/components/tag/Tag"; +import type { ContentWarningTagsEntryFragment } from "@/generated/graphql"; interface ContentWarningTagsProps { entry: ContentWarningTagsEntryFragment diff --git a/src/components/tag/EpisodeTag.tsx b/src/components/tag/EpisodeTag.tsx index cad23cd..fba8f91 100644 --- a/src/components/tag/EpisodeTag.tsx +++ b/src/components/tag/EpisodeTag.tsx @@ -1,7 +1,8 @@ import { faFilm } from "@fortawesome/pro-solid-svg-icons"; -import { Tag } from "components/tag/Tag"; import gql from "graphql-tag"; -import type { EpisodeTagEntryFragment } from "generated/graphql"; + +import { Tag } from "@/components/tag/Tag"; +import type { EpisodeTagEntryFragment } from "@/generated/graphql"; interface EpisodeTagProps { entry: EpisodeTagEntryFragment diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx index 41e78f6..2027260 100644 --- a/src/components/tag/Tag.tsx +++ b/src/components/tag/Tag.tsx @@ -1,10 +1,12 @@ -import styled, { css } from "styled-components"; -import { Text } from "components/text"; -import { Icon } from "components/icon"; -import theme from "theme"; -import type { IconDefinition } from "@fortawesome/fontawesome-svg-core"; import type { HTMLAttributes, ReactComponentElement, ReactElement, ReactNode } from "react"; -import type { Colors } from "theme/colors"; +import styled, { css } from "styled-components"; + +import type { IconDefinition } from "@fortawesome/fontawesome-svg-core"; + +import { Icon } from "@/components/icon/Icon"; +import { Text } from "@/components/text/Text"; +import theme from "@/theme"; +import type { Colors } from "@/theme/colors"; const StyledTag = styled.span` display: flex; diff --git a/src/components/tag/ThemeEntryTags.tsx b/src/components/tag/ThemeEntryTags.tsx index 28dcb22..d2a7a83 100644 --- a/src/components/tag/ThemeEntryTags.tsx +++ b/src/components/tag/ThemeEntryTags.tsx @@ -1,8 +1,9 @@ -import { ContentWarningTags } from "components/tag/ContentWarningTags"; -import { EpisodeTag } from "components/tag/EpisodeTag"; -import { Row } from "components/box"; import gql from "graphql-tag"; -import type { ThemeEntryTagsEntryFragment } from "generated/graphql"; + +import { Row } from "@/components/box/Flex"; +import { ContentWarningTags } from "@/components/tag/ContentWarningTags"; +import { EpisodeTag } from "@/components/tag/EpisodeTag"; +import type { ThemeEntryTagsEntryFragment } from "@/generated/graphql"; type ThemeEntryTagsProps = { entry: ThemeEntryTagsEntryFragment diff --git a/src/components/tag/VideoTags.tsx b/src/components/tag/VideoTags.tsx index ed6cd8f..87d3de2 100644 --- a/src/components/tag/VideoTags.tsx +++ b/src/components/tag/VideoTags.tsx @@ -1,3 +1,5 @@ +import styled from "styled-components"; + import { faAlignSlash, faBringForward, @@ -6,11 +8,11 @@ import { faCompactDisc, faEyes } from "@fortawesome/pro-solid-svg-icons"; -import { Tag } from "components/tag/Tag"; -import { Row } from "components/box"; -import styled from "styled-components"; import gql from "graphql-tag"; -import type { VideoTagsVideoFragment } from "generated/graphql"; + +import { Row } from "@/components/box/Flex"; +import { Tag } from "@/components/tag/Tag"; +import type { VideoTagsVideoFragment } from "@/generated/graphql"; const StyledVideoTags = styled(Row)` align-items: baseline; diff --git a/src/components/text/Text.ts b/src/components/text/Text.ts index 890c663..a40e9f2 100644 --- a/src/components/text/Text.ts +++ b/src/components/text/Text.ts @@ -1,8 +1,10 @@ -import styled, { css } from "styled-components"; -import theme from "theme"; -import type { Property } from "csstype"; -import type { Colors } from "theme/colors"; import type { ReactElement } from "react"; +import styled, { css } from "styled-components"; + +import type { Property } from "csstype"; + +import theme from "@/theme"; +import type { Colors } from "@/theme/colors"; interface TextProps { variant?: "h1" | "h2" | "h3" | "small" | "code"; diff --git a/src/components/text/TextLink.ts b/src/components/text/TextLink.ts index 28e44a0..3c18bc3 100644 --- a/src/components/text/TextLink.ts +++ b/src/components/text/TextLink.ts @@ -1,6 +1,7 @@ import styled from "styled-components"; import Link from "next/link"; -import theme from "theme"; + +import theme from "@/theme"; export const TextLink = styled(Link)` cursor: pointer; diff --git a/src/components/text/index.ts b/src/components/text/index.ts deleted file mode 100644 index 7afe56f..0000000 --- a/src/components/text/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Text } from "./Text"; diff --git a/src/components/toast/AnnouncementToast.tsx b/src/components/toast/AnnouncementToast.tsx index 12cf3cc..44326cd 100644 --- a/src/components/toast/AnnouncementToast.tsx +++ b/src/components/toast/AnnouncementToast.tsx @@ -1,13 +1,14 @@ import { useEffect, useState } from "react"; import styled from "styled-components"; -import { Toast } from "components/toast"; -import { Text } from "components/text"; -import type { Announcement } from "lib/client/announcement"; -import { fetchAnnouncements } from "lib/client/announcement"; -import { ShowAnnouncements } from "utils/settings"; -import theme from "theme"; -import { useToasts } from "context/toastContext"; -import useSetting from "hooks/useSetting"; + +import { Text } from "@/components/text/Text"; +import { Toast } from "@/components/toast/Toast"; +import { useToasts } from "@/context/toastContext"; +import useSetting from "@/hooks/useSetting"; +import type { Announcement } from "@/lib/client/announcement"; +import { fetchAnnouncements } from "@/lib/client/announcement"; +import theme from "@/theme"; +import { ShowAnnouncements } from "@/utils/settings"; const StyledBody = styled.div` display: flex; diff --git a/src/components/toast/PlaylistAddToast.tsx b/src/components/toast/PlaylistAddToast.tsx index 052d7d8..4b83189 100644 --- a/src/components/toast/PlaylistAddToast.tsx +++ b/src/components/toast/PlaylistAddToast.tsx @@ -1,9 +1,10 @@ import Link from "next/link"; -import { Toast } from "components/toast"; -import { Text } from "components/text"; -import { Row } from "components/box"; -import { SongTitle } from "components/utils"; -import type { FetchThemeSummaryCardData } from "components/card/ThemeSummaryCard"; + +import { Row } from "@/components/box/Flex"; +import type { FetchThemeSummaryCardData } from "@/components/card/ThemeSummaryCard"; +import { Text } from "@/components/text/Text"; +import { Toast } from "@/components/toast/Toast"; +import { SongTitle } from "@/components/utils/SongTitle"; interface PlaylistAddToastProps { theme: Exclude diff --git a/src/components/toast/PlaylistRemoveToast.tsx b/src/components/toast/PlaylistRemoveToast.tsx index ae64a86..ef52ba2 100644 --- a/src/components/toast/PlaylistRemoveToast.tsx +++ b/src/components/toast/PlaylistRemoveToast.tsx @@ -1,8 +1,9 @@ -import { Toast } from "components/toast"; -import { Text } from "components/text"; -import type { PlaylistTrackRemoveToastPlaylistFragment } from "generated/graphql"; import gql from "graphql-tag"; +import { Text } from "@/components/text/Text"; +import { Toast } from "@/components/toast/Toast"; +import type { PlaylistTrackRemoveToastPlaylistFragment } from "@/generated/graphql"; + interface PlaylistRemoveToastProps { playlist: PlaylistTrackRemoveToastPlaylistFragment; } diff --git a/src/components/toast/PlaylistTrackAddToast.tsx b/src/components/toast/PlaylistTrackAddToast.tsx index 98fd476..0c92a77 100644 --- a/src/components/toast/PlaylistTrackAddToast.tsx +++ b/src/components/toast/PlaylistTrackAddToast.tsx @@ -1,11 +1,13 @@ import Link from "next/link"; -import { Toast } from "components/toast"; -import { Text } from "components/text"; -import { Row } from "components/box"; -import { SongTitle } from "components/utils"; -import type { PlaylistTrackAddToastPlaylistFragment, PlaylistTrackAddToastVideoFragment } from "generated/graphql"; + import gql from "graphql-tag"; +import { Row } from "@/components/box/Flex"; +import { Text } from "@/components/text/Text"; +import { Toast } from "@/components/toast/Toast"; +import { SongTitle } from "@/components/utils/SongTitle"; +import type { PlaylistTrackAddToastPlaylistFragment, PlaylistTrackAddToastVideoFragment } from "@/generated/graphql"; + interface PlaylistTrackAddToastProps { playlist: PlaylistTrackAddToastPlaylistFragment; video: PlaylistTrackAddToastVideoFragment; diff --git a/src/components/toast/PlaylistTrackRemoveToast.tsx b/src/components/toast/PlaylistTrackRemoveToast.tsx index 8cb6b6f..132afed 100644 --- a/src/components/toast/PlaylistTrackRemoveToast.tsx +++ b/src/components/toast/PlaylistTrackRemoveToast.tsx @@ -1,13 +1,15 @@ import Link from "next/link"; -import { Toast } from "components/toast"; -import { Text } from "components/text"; -import { Row } from "components/box"; -import { SongTitle } from "components/utils"; + +import gql from "graphql-tag"; + +import { Row } from "@/components/box/Flex"; +import { Text } from "@/components/text/Text"; +import { Toast } from "@/components/toast/Toast"; +import { SongTitle } from "@/components/utils/SongTitle"; import type { PlaylistTrackRemoveToastPlaylistFragment, PlaylistTrackRemoveToastVideoFragment -} from "generated/graphql"; -import gql from "graphql-tag"; +} from "@/generated/graphql"; interface PlaylistTrackRemoveToastProps { playlist: PlaylistTrackRemoveToastPlaylistFragment; diff --git a/src/components/toast/Toast.ts b/src/components/toast/Toast.ts index 2867a19..1974f86 100644 --- a/src/components/toast/Toast.ts +++ b/src/components/toast/Toast.ts @@ -1,6 +1,7 @@ import styled from "styled-components"; -import { Card } from "components/card"; -import theme from "theme"; + +import { Card } from "@/components/card/Card"; +import theme from "@/theme"; export const Toast = styled(Card)` box-shadow: ${theme.shadows.high}; diff --git a/src/components/toast/ToastHub.tsx b/src/components/toast/ToastHub.tsx index caa6c35..b481d8c 100644 --- a/src/components/toast/ToastHub.tsx +++ b/src/components/toast/ToastHub.tsx @@ -1,9 +1,11 @@ -import { useToasts } from "context/toastContext"; import styled from "styled-components"; -import { Container } from "components/container"; -import theme from "theme"; + import { AnimatePresence, m } from "framer-motion"; +import { Container } from "@/components/container/Container"; +import { useToasts } from "@/context/toastContext"; +import theme from "@/theme"; + const StyledToastHub = styled(Container)` position: fixed; left: 0; diff --git a/src/components/toast/index.ts b/src/components/toast/index.ts deleted file mode 100644 index c344770..0000000 --- a/src/components/toast/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { Toast } from "./Toast"; -export { ToastHub } from "./ToastHub"; -export { AnnouncementToast } from "./AnnouncementToast"; -export { PlaylistAddToast } from "./PlaylistAddToast"; diff --git a/src/components/utils/Busy.tsx b/src/components/utils/Busy.tsx index e6264ea..3cb0583 100644 --- a/src/components/utils/Busy.tsx +++ b/src/components/utils/Busy.tsx @@ -1,8 +1,10 @@ -import styled from "styled-components"; -import { Icon } from "components/icon"; import type { ReactNode } from "react"; +import styled from "styled-components"; + import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"; +import { Icon } from "@/components/icon/Icon"; + const StyledWrapper = styled.div` position: relative; diff --git a/src/components/utils/Collapse.tsx b/src/components/utils/Collapse.tsx index d022180..64d77ea 100644 --- a/src/components/utils/Collapse.tsx +++ b/src/components/utils/Collapse.tsx @@ -1,6 +1,7 @@ -import styled from "styled-components"; -import { fadeIn, slideIn } from "styles/animations"; import type { ReactNode } from "react"; +import styled from "styled-components"; + +import { fadeIn, slideIn } from "@/styles/animations"; const StyledWrapper = styled.div` animation-name: ${slideIn("-16px")}, ${fadeIn}; diff --git a/src/components/utils/ErrorBoundary.tsx b/src/components/utils/ErrorBoundary.tsx index 266cc70..63950af 100644 --- a/src/components/utils/ErrorBoundary.tsx +++ b/src/components/utils/ErrorBoundary.tsx @@ -1,8 +1,9 @@ -import type { ErrorInfo, ReactNode } from "react"; import { Component } from "react"; +import type { ErrorInfo, ReactNode } from "react"; import Link from "next/link"; -import { Text } from "components/text"; -import { Container } from "components/container"; + +import { Container } from "@/components/container/Container"; +import { Text } from "@/components/text/Text"; interface ErrorBoundaryProps { children?: ReactNode diff --git a/src/components/utils/HeightTransition.tsx b/src/components/utils/HeightTransition.tsx index 3e1e7a2..a392f1c 100644 --- a/src/components/utils/HeightTransition.tsx +++ b/src/components/utils/HeightTransition.tsx @@ -1,6 +1,7 @@ -import type { ReactNode } from "react"; import { useEffect, useRef, useState } from "react"; +import type { ReactNode } from "react"; import styled from "styled-components"; + import type { Property } from "csstype"; const StyledShadowFix = styled.div` diff --git a/src/components/utils/PageRevalidation.tsx b/src/components/utils/PageRevalidation.tsx index f796dff..fd7d38b 100644 --- a/src/components/utils/PageRevalidation.tsx +++ b/src/components/utils/PageRevalidation.tsx @@ -1,7 +1,8 @@ -import { useRouter } from "next/router"; import { useMemo, useState } from "react"; -import { Text } from "components/text"; -import useAuth from "../../hooks/useAuth"; +import { useRouter } from "next/router"; + +import { Text } from "@/components/text/Text"; +import useAuth from "@/hooks/useAuth"; interface PageRevalidationProps { lastBuildAt: number diff --git a/src/components/utils/Performances.tsx b/src/components/utils/Performances.tsx index e5e842b..98f4645 100644 --- a/src/components/utils/Performances.tsx +++ b/src/components/utils/Performances.tsx @@ -1,9 +1,11 @@ -import Link from "next/link"; -import { Text } from "components/text"; -import styled from "styled-components"; import { useState } from "react"; +import styled from "styled-components"; +import Link from "next/link"; + import gql from "graphql-tag"; -import type { PerformancesArtistFragment, PerformancesSongFragment } from "generated/graphql"; + +import { Text } from "@/components/text/Text"; +import type { PerformancesArtistFragment, PerformancesSongFragment } from "@/generated/graphql"; const StyledArtist = styled(Text)` &:not(:first-of-type)::before { diff --git a/src/components/utils/SongTitle.tsx b/src/components/utils/SongTitle.tsx index bc5b261..428e45c 100644 --- a/src/components/utils/SongTitle.tsx +++ b/src/components/utils/SongTitle.tsx @@ -1,8 +1,10 @@ -import Link from "next/link"; -import { Text } from "components/text"; -import gql from "graphql-tag"; -import type { SongTitleSongFragment } from "generated/graphql"; import type { ComponentPropsWithoutRef } from "react"; +import Link from "next/link"; + +import gql from "graphql-tag"; + +import { Text } from "@/components/text/Text"; +import type { SongTitleSongFragment } from "@/generated/graphql"; export interface SongTitleProps extends ComponentPropsWithoutRef { song: SongTitleSongFragment | null diff --git a/src/components/utils/SongTitleWithArtists.tsx b/src/components/utils/SongTitleWithArtists.tsx index b824101..da12fd7 100644 --- a/src/components/utils/SongTitleWithArtists.tsx +++ b/src/components/utils/SongTitleWithArtists.tsx @@ -1,7 +1,9 @@ -import { Text } from "components/text"; -import { Performances, SongTitle } from "components/utils"; import gql from "graphql-tag"; -import type { SongTitleWithArtistsArtistFragment, SongTitleWithArtistsSongFragment } from "generated/graphql"; + +import { Text } from "@/components/text/Text"; +import { Performances } from "@/components/utils/Performances"; +import { SongTitle } from "@/components/utils/SongTitle"; +import type { SongTitleWithArtistsArtistFragment, SongTitleWithArtistsSongFragment } from "@/generated/graphql"; interface SongTitleWithArtistsProps { song: SongTitleWithArtistsSongFragment | null diff --git a/src/components/utils/index.ts b/src/components/utils/index.ts deleted file mode 100644 index 2e6fc5d..0000000 --- a/src/components/utils/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -export { AspectRatio } from "components/utils/AspectRatio"; -export { Collapse } from "./Collapse"; -export { HeightTransition } from "./HeightTransition"; -export { SongTitle } from "./SongTitle"; -export { Performances } from "./Performances"; -export { SongTitleWithArtists } from "./SongTitleWithArtists"; -export { HorizontalScroll } from "./HorizontalScroll"; -export { ErrorBoundary } from "./ErrorBoundary"; diff --git a/src/components/video-player/ProgressBar.tsx b/src/components/video-player/ProgressBar.tsx index fbe3021..e85af73 100644 --- a/src/components/video-player/ProgressBar.tsx +++ b/src/components/video-player/ProgressBar.tsx @@ -1,7 +1,8 @@ -import styled from "styled-components"; -import theme from "theme"; import { useContext, useEffect, useRef } from "react"; -import { VideoPlayerContext } from "components/video-player/VideoPlayer"; +import styled from "styled-components"; + +import { VideoPlayerContext } from "@/components/video-player/VideoPlayer"; +import theme from "@/theme"; const StyledPlayerProgress = styled.div` position: absolute; diff --git a/src/components/video-player/VideoPlayer.style.ts b/src/components/video-player/VideoPlayer.style.ts index dce92a0..9402ca8 100644 --- a/src/components/video-player/VideoPlayer.style.ts +++ b/src/components/video-player/VideoPlayer.style.ts @@ -1,8 +1,10 @@ import styled from "styled-components"; -import theme from "theme"; -import { Switcher } from "components/switcher"; + import { m } from "framer-motion"; +import { Switcher } from "@/components/switcher/Switcher"; +import theme from "@/theme"; + export const StyledPlayer = styled.div` position: sticky; bottom: 0; diff --git a/src/components/video-player/VideoPlayer.tsx b/src/components/video-player/VideoPlayer.tsx index 07faf3c..000d118 100644 --- a/src/components/video-player/VideoPlayer.tsx +++ b/src/components/video-player/VideoPlayer.tsx @@ -1,5 +1,7 @@ -import type { PointerEvent, ReactNode, RefObject, SyntheticEvent } from "react"; import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react"; +import type { PointerEvent, ReactNode, RefObject, SyntheticEvent } from "react"; +import { useRouter } from "next/router"; + import { StyledAside, StyledAudio, @@ -10,18 +12,17 @@ import { StyledPlayerContent, StyledVideo, StyledVideoBackground -} from "./VideoPlayer.style"; -import PlayerContext from "context/playerContext"; -import createVideoSlug from "utils/createVideoSlug"; -import { useRouter } from "next/router"; -import useSetting from "hooks/useSetting"; -import { AudioMode, GlobalVolume } from "utils/settings"; -import { AUDIO_URL, VIDEO_URL } from "utils/config.mjs"; -import extractImages from "utils/extractImages"; -import useWatchHistory from "hooks/useWatchHistory"; -import type { VideoSummaryCardVideoFragment } from "generated/graphql"; -import { VideoPlayerBar } from "components/video-player/VideoPlayerBar"; -import useMouseRelax from "hooks/useMouseRelax"; +} from "@/components/video-player/VideoPlayer.style"; +import { VideoPlayerBar } from "@/components/video-player/VideoPlayerBar"; +import PlayerContext from "@/context/playerContext"; +import type { VideoSummaryCardVideoFragment } from "@/generated/graphql"; +import useMouseRelax from "@/hooks/useMouseRelax"; +import useSetting from "@/hooks/useSetting"; +import useWatchHistory from "@/hooks/useWatchHistory"; +import { AUDIO_URL, VIDEO_URL } from "@/utils/config"; +import createVideoSlug from "@/utils/createVideoSlug"; +import extractImages from "@/utils/extractImages"; +import { AudioMode, GlobalVolume } from "@/utils/settings"; interface VideoPlayerContextValue { video: VideoSummaryCardVideoFragment; diff --git a/src/components/video-player/VideoPlayerBar.tsx b/src/components/video-player/VideoPlayerBar.tsx index e0251f3..1d14eff 100644 --- a/src/components/video-player/VideoPlayerBar.tsx +++ b/src/components/video-player/VideoPlayerBar.tsx @@ -1,32 +1,24 @@ -import { Column, Solid } from "components/box"; -import { Text } from "components/text"; -import { Performances, SongTitle } from "components/utils"; -import Link from "next/link"; -import { ConditionalWrapper } from "components/utils/ConditionalWrapper"; -import { - faBackwardStep, - faForwardStep, - faListMusic, - faPause, - faPlay, - faShare, - faXmark -} from "@fortawesome/pro-solid-svg-icons"; -import { Icon } from "components/icon"; -import { PlaylistTrackAddDialog } from "components/dialog/PlaylistTrackAddDialog"; -import { Menu, MenuContent, MenuItem, MenuTrigger } from "components/menu/Menu"; -import { IconTextButton } from "components/button"; -import { AudioMode } from "utils/settings"; -import { ProgressBar } from "components/video-player/ProgressBar"; -import styled from "styled-components"; -import theme from "theme"; -import { Toast } from "components/toast"; -import { useToasts } from "context/toastContext"; import { useContext } from "react"; -import { VideoPlayerContext } from "components/video-player/VideoPlayer"; -import useSetting from "hooks/useSetting"; -import PlayerContext from "context/playerContext"; -import { VolumeControl } from "components/video-player/VolumeControl"; +import styled from "styled-components"; +import Link from "next/link"; + +import { faBackwardStep, faForwardStep, faListMusic, faPause, faPlay, faXmark } from "@fortawesome/pro-solid-svg-icons"; + +import { Column } from "@/components/box/Flex"; +import { Solid } from "@/components/box/Solid"; +import { IconTextButton } from "@/components/button/IconTextButton"; +import { PlaylistTrackAddDialog } from "@/components/dialog/PlaylistTrackAddDialog"; +import { Icon } from "@/components/icon/Icon"; +import { ShareMenu } from "@/components/menu/ShareMenu"; +import { Text } from "@/components/text/Text"; +import { ConditionalWrapper } from "@/components/utils/ConditionalWrapper"; +import { Performances } from "@/components/utils/Performances"; +import { SongTitle } from "@/components/utils/SongTitle"; +import { ProgressBar } from "@/components/video-player/ProgressBar"; +import { VideoPlayerContext } from "@/components/video-player/VideoPlayer"; +import { VolumeControl } from "@/components/video-player/VolumeControl"; +import PlayerContext from "@/context/playerContext"; +import theme from "@/theme"; const StyledPlayerBar = styled(Solid)` position: relative; @@ -114,15 +106,8 @@ export function VideoPlayerBar() { const theme = entry.theme; const anime = theme.anime; - const { dispatchToast } = useToasts(); - const [audioMode] = useSetting(AudioMode, { storageSync: false }); const { clearWatchList } = useContext(PlayerContext); - function saveToClipboard(url: string) { - navigator.clipboard.writeText(url) - .then(() => dispatchToast("clipboard", Copied to clipboard!)); - } - return ( @@ -201,29 +186,7 @@ export function VideoPlayerBar() { Add to Playlist } /> - - - Share - - - saveToClipboard(location.href)}>Copy URL to this Page - {audioMode === AudioMode.ENABLED ? ( - <> - saveToClipboard(audioUrl)}>Copy URL to Embeddable Audio - - Download Audio - - - ) : ( - <> - saveToClipboard(videoUrl)}>Copy URL to Embeddable Video - - Download Video - - - )} - - + + + } + /> + } + /> diff --git a/src/components/video-player/VolumeControl.tsx b/src/components/video-player/VolumeControl.tsx index 1082a18..b7cbdec 100644 --- a/src/components/video-player/VolumeControl.tsx +++ b/src/components/video-player/VolumeControl.tsx @@ -1,11 +1,13 @@ -import { IconTextButton } from "components/button"; -import { faVolume, faVolumeHigh, faVolumeLow, faVolumeSlash } from "@fortawesome/pro-solid-svg-icons"; -import useSetting from "hooks/useSetting"; -import { GlobalVolume } from "utils/settings"; -import styled from "styled-components"; -import { Row } from "components/box"; -import { Slider } from "components/slider/Slider"; import type { ComponentPropsWithoutRef } from "react"; +import styled from "styled-components"; + +import { faVolume, faVolumeHigh, faVolumeLow, faVolumeSlash } from "@fortawesome/pro-solid-svg-icons"; + +import { Row } from "@/components/box/Flex"; +import { IconTextButton } from "@/components/button/IconTextButton"; +import { Slider } from "@/components/slider/Slider"; +import useSetting from "@/hooks/useSetting"; +import { GlobalVolume } from "@/utils/settings"; const StyledRow = styled(Row)` align-self: stretch; diff --git a/src/components/video-script/VideoScript.tsx b/src/components/video-script/VideoScript.tsx index e8d52fe..155bff2 100644 --- a/src/components/video-script/VideoScript.tsx +++ b/src/components/video-script/VideoScript.tsx @@ -1,9 +1,11 @@ -import { Text } from "components/text"; -import gql from "graphql-tag"; -import type { VideoScriptVideoFragment } from "generated/graphql"; import { useState } from "react"; import styled from "styled-components"; -import { Column } from "components/box"; + +import gql from "graphql-tag"; + +import { Column } from "@/components/box/Flex"; +import { Text } from "@/components/text/Text"; +import type { VideoScriptVideoFragment } from "@/generated/graphql"; const StyledCodeBlock = styled.pre` overflow-x: auto; diff --git a/src/context/playerContext.ts b/src/context/playerContext.ts index d44b4d3..a2cd120 100644 --- a/src/context/playerContext.ts +++ b/src/context/playerContext.ts @@ -1,5 +1,6 @@ import { createContext } from "react"; -import type { VideoSummaryCardVideoFragment } from "generated/graphql"; + +import type { VideoSummaryCardVideoFragment } from "@/generated/graphql"; export interface WatchListItem extends VideoSummaryCardVideoFragment { watchListId: number; diff --git a/src/context/toastContext.tsx b/src/context/toastContext.tsx index 2607e8a..6da84ab 100644 --- a/src/context/toastContext.tsx +++ b/src/context/toastContext.tsx @@ -1,5 +1,5 @@ -import type { ReactNode } from "react"; import { createContext, useContext, useState } from "react"; +import type { ReactNode } from "react"; interface IToastContext { activeToasts: Array diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts index 2f50b69..d230928 100644 --- a/src/hooks/useAuth.ts +++ b/src/hooks/useAuth.ts @@ -1,9 +1,10 @@ -import useSWR, { mutate as mutateGlobal } from "swr"; -import axios from "lib/client/axios"; -import { fetchDataClient } from "lib/client"; import gql from "graphql-tag"; -import type { CheckAuthQuery } from "generated/graphql"; -import { AUTH_PATH } from "utils/config.mjs"; +import useSWR, { mutate as mutateGlobal } from "swr"; + +import type { CheckAuthQuery } from "@/generated/graphql"; +import { fetchDataClient } from "@/lib/client"; +import axios from "@/lib/client/axios"; +import { AUTH_PATH } from "@/utils/config"; export default function useAuth() { const { data: me } = useSWR( diff --git a/src/hooks/useColorTheme.ts b/src/hooks/useColorTheme.ts index 15fcaa9..68a2129 100644 --- a/src/hooks/useColorTheme.ts +++ b/src/hooks/useColorTheme.ts @@ -1,7 +1,9 @@ import { useEffect } from "react"; + import useLocalStorageState from "use-local-storage-state"; -import type { ColorTheme } from "context/colorThemeContext"; -import { isColorTheme } from "context/colorThemeContext"; + +import type { ColorTheme } from "@/context/colorThemeContext"; +import { isColorTheme } from "@/context/colorThemeContext"; export default function useColorTheme(): [ColorTheme, (colorTheme: ColorTheme) => void] { const [ theme, setTheme ] = useLocalStorageState("theme", { defaultValue: "system" }); diff --git a/src/hooks/useEntitySearch.ts b/src/hooks/useEntitySearch.ts index 7c0f2a4..94a89d9 100644 --- a/src/hooks/useEntitySearch.ts +++ b/src/hooks/useEntitySearch.ts @@ -1,7 +1,8 @@ import { useInfiniteQuery } from "react-query"; -import type { SimpleSearchArgs } from "lib/client/search"; -import { toSearchArgs } from "lib/client/search"; -import type { SearchArgs } from "generated/graphql"; + +import type { SearchArgs } from "@/generated/graphql"; +import type { SimpleSearchArgs } from "@/lib/client/search"; +import { toSearchArgs } from "@/lib/client/search"; export default function useEntitySearch( entity: string, diff --git a/src/hooks/useLocalPlaylist.tsx b/src/hooks/useLocalPlaylist.tsx index 5dc533a..6187311 100644 --- a/src/hooks/useLocalPlaylist.tsx +++ b/src/hooks/useLocalPlaylist.tsx @@ -1,8 +1,9 @@ import useLocalStorageState from "use-local-storage-state"; -import { PlaylistAddToast } from "components/toast"; -import { useToasts } from "context/toastContext"; -import type { FetchThemeSummaryCardData } from "components/card/ThemeSummaryCard"; -import { fetchThemeSummaryCardData } from "components/card/ThemeSummaryCard"; + +import type { FetchThemeSummaryCardData } from "@/components/card/ThemeSummaryCard"; +import { fetchThemeSummaryCardData } from "@/components/card/ThemeSummaryCard"; +import { PlaylistAddToast } from "@/components/toast/PlaylistAddToast"; +import { useToasts } from "@/context/toastContext"; interface LocalPlaylistTheme { id: number diff --git a/src/hooks/useRandomThemes.ts b/src/hooks/useRandomThemes.ts index 1ec5c26..217cd2c 100644 --- a/src/hooks/useRandomThemes.ts +++ b/src/hooks/useRandomThemes.ts @@ -1,8 +1,9 @@ -import { fetchRandomThemes, type RandomThemesOptions } from "lib/client/randomTheme"; -import PlayerContext, { createWatchListItem } from "context/playerContext"; import { useContext } from "react"; import { useRouter } from "next/router"; -import createVideoSlug from "utils/createVideoSlug"; + +import PlayerContext, { createWatchListItem } from "@/context/playerContext"; +import { fetchRandomThemes, type RandomThemesOptions } from "@/lib/client/randomTheme"; +import createVideoSlug from "@/utils/createVideoSlug"; export default function useRandomThemes() { const router = useRouter(); diff --git a/src/hooks/useSetting.ts b/src/hooks/useSetting.ts index 9befb89..92bdc2f 100644 --- a/src/hooks/useSetting.ts +++ b/src/hooks/useSetting.ts @@ -1,7 +1,8 @@ import useLocalStorageState from "use-local-storage-state"; -import type { Setting } from "utils/settings"; import type { LocalStorageOptions } from "use-local-storage-state/src/useLocalStorageState"; +import type { Setting } from "@/utils/settings"; + export default function useSetting( { __KEY__: key, __INITIAL_VALUE__: initialValue }: Setting, localStorageOptions: Pick, "storageSync"> = {} diff --git a/src/hooks/useWatchHistory.ts b/src/hooks/useWatchHistory.ts index fb0995d..418de27 100644 --- a/src/hooks/useWatchHistory.ts +++ b/src/hooks/useWatchHistory.ts @@ -1,7 +1,9 @@ -import useLocalStorageState from "use-local-storage-state"; -import type { ThemeSummaryCardThemeFragment } from "generated/graphql"; import { useCallback } from "react"; +import useLocalStorageState from "use-local-storage-state"; + +import type { ThemeSummaryCardThemeFragment } from "@/generated/graphql"; + interface WatchHistoryTheme extends ThemeSummaryCardThemeFragment { id: number } diff --git a/src/hooks/useYearList.ts b/src/hooks/useYearList.ts index 8317fc0..1f125d8 100644 --- a/src/hooks/useYearList.ts +++ b/src/hooks/useYearList.ts @@ -1,4 +1,5 @@ import { useEffect, useState } from "react"; + import { rangeRight } from "lodash-es"; export default function useYearList() { diff --git a/src/lib/client/announcement.ts b/src/lib/client/announcement.ts index dba72b1..db4228b 100644 --- a/src/lib/client/announcement.ts +++ b/src/lib/client/announcement.ts @@ -1,4 +1,4 @@ -import { CLIENT_API_URL } from "utils/config.mjs"; +import { CLIENT_API_URL } from "@/utils/config"; export interface Announcement { id: number diff --git a/src/lib/client/axios.ts b/src/lib/client/axios.ts index 520101f..e7a5cfd 100644 --- a/src/lib/client/axios.ts +++ b/src/lib/client/axios.ts @@ -1,6 +1,7 @@ import type { AxiosError } from "axios"; import Axios from "axios"; -import { CLIENT_API_URL } from "utils/config.mjs"; + +import { CLIENT_API_URL } from "@/utils/config"; const axios = Axios.create({ baseURL: CLIENT_API_URL, diff --git a/src/lib/client/chunk.ts b/src/lib/client/chunk.ts index 460dfc3..ecc6577 100644 --- a/src/lib/client/chunk.ts +++ b/src/lib/client/chunk.ts @@ -1,9 +1,10 @@ -import { makeExecutableSchema } from "@graphql-tools/schema"; -import { buildFetchData } from "lib/common"; -import typeDefsAnimeThemes from "lib/common/animethemes/type-defs"; -import resolversAnimeThemes from "lib/common/animethemes/resolvers"; import { mergeResolvers, mergeTypeDefs } from "@graphql-tools/merge"; -import { searchResolvers, searchTypeDefs } from "lib/client/search"; +import { makeExecutableSchema } from "@graphql-tools/schema"; + +import { searchResolvers, searchTypeDefs } from "@/lib/client/search"; +import { buildFetchData } from "@/lib/common"; +import resolversAnimeThemes from "@/lib/common/animethemes/resolvers"; +import typeDefsAnimeThemes from "@/lib/common/animethemes/type-defs"; const schema = makeExecutableSchema({ typeDefs: mergeTypeDefs([ diff --git a/src/lib/client/index.ts b/src/lib/client/index.ts index 9d9b4d1..e728ce4 100644 --- a/src/lib/client/index.ts +++ b/src/lib/client/index.ts @@ -1,5 +1,6 @@ import type { ASTNode } from "graphql"; -import type { ApiExecutionResult } from "lib/common"; + +import type { ApiExecutionResult } from "@/lib/common"; export async function fetchDataClient( query: string | ASTNode @@ -17,7 +18,7 @@ export async function fetchDataClient>( root?: Record ): Promise> { // Code-split anything GraphQL related to reduce initial bundle size. - const { fetchDataClient } = await import("./chunk"); + const { fetchDataClient } = await import("lib/client/chunk"); if (!args) { return fetchDataClient(query); diff --git a/src/lib/client/randomGrill.ts b/src/lib/client/randomGrill.ts index 2394424..5e6eeba 100644 --- a/src/lib/client/randomGrill.ts +++ b/src/lib/client/randomGrill.ts @@ -1,4 +1,4 @@ -import { CLIENT_API_URL } from "utils/config.mjs"; +import { CLIENT_API_URL } from "@/utils/config"; export async function fetchRandomGrill(): Promise { const res = await fetch(`${CLIENT_API_URL}/image?filter[facet]=Grill&sort=random&page[size]=1`); diff --git a/src/lib/client/randomTheme.ts b/src/lib/client/randomTheme.ts index 98ac162..4e58bd1 100644 --- a/src/lib/client/randomTheme.ts +++ b/src/lib/client/randomTheme.ts @@ -1,7 +1,8 @@ -import { fetchDataClient } from "lib/client/index"; -import type { RandomThemeQuery, RandomThemeQueryVariables } from "generated/graphql"; import gql from "graphql-tag"; -import { ThemeSummaryCard } from "components/card"; + +import { ThemeSummaryCard } from "@/components/card/ThemeSummaryCard"; +import type { RandomThemeQuery, RandomThemeQueryVariables } from "@/generated/graphql"; +import { fetchDataClient } from "@/lib/client/index"; export interface RandomThemesOptions { themeType?: string; diff --git a/src/lib/client/search.ts b/src/lib/client/search.ts index 5b7fd34..8932d9b 100644 --- a/src/lib/client/search.ts +++ b/src/lib/client/search.ts @@ -1,6 +1,7 @@ -import { apiResolver, fetchJson } from "lib/common/animethemes/api"; import gql from "graphql-tag"; -import type { SearchArgs } from "generated/graphql"; + +import type { SearchArgs } from "@/generated/graphql"; +import { apiResolver, fetchJson } from "@/lib/common/animethemes/api"; export interface SimpleSearchArgs { query?: string | null diff --git a/src/lib/common/animethemes/api.ts b/src/lib/common/animethemes/api.ts index e8b11f7..6540fb6 100644 --- a/src/lib/common/animethemes/api.ts +++ b/src/lib/common/animethemes/api.ts @@ -1,11 +1,12 @@ -import pLimit from "p-limit"; -import type { ResolveTree } from "graphql-parse-resolve-info"; -import { parseResolveInfo } from "graphql-parse-resolve-info"; -import devLog from "utils/devLog"; -import { CLIENT_API_URL, SERVER_API_KEY, SERVER_API_URL, AUTH_REFERER, PAGINATION_PAGE_SIZE } from "utils/config.mjs"; import type { GraphQLFieldResolver, GraphQLOutputType, GraphQLResolveInfo } from "graphql"; import type { Path } from "graphql/jsutils/Path"; +import type { ResolveTree } from "graphql-parse-resolve-info"; +import { parseResolveInfo } from "graphql-parse-resolve-info"; import type { IncomingMessage } from "node:http"; +import pLimit from "p-limit"; + +import { AUTH_REFERER, CLIENT_API_URL, PAGINATION_PAGE_SIZE,SERVER_API_KEY, SERVER_API_URL } from "@/utils/config"; +import devLog from "@/utils/devLog"; const limit = pLimit(5); diff --git a/src/lib/common/animethemes/resolvers.ts b/src/lib/common/animethemes/resolvers.ts index e51c979..c94ecc0 100644 --- a/src/lib/common/animethemes/resolvers.ts +++ b/src/lib/common/animethemes/resolvers.ts @@ -1,6 +1,7 @@ -import { apiResolver, INCLUDES } from "./api"; import type { IResolvers } from "@graphql-tools/utils"; +import { apiResolver, INCLUDES } from "@/lib/common/animethemes/api"; + const resolvers: IResolvers = { Query: { anime: apiResolver({ diff --git a/src/lib/common/index.ts b/src/lib/common/index.ts index fec54f8..1389aa9 100644 --- a/src/lib/common/index.ts +++ b/src/lib/common/index.ts @@ -1,6 +1,7 @@ import type { ASTNode, GraphQLSchema } from "graphql"; import { graphql, print } from "graphql"; -import type { ApiResolverContext } from "lib/common/animethemes/api"; + +import type { ApiResolverContext } from "@/lib/common/animethemes/api"; export interface ApiExecutionResult { data: T diff --git a/src/lib/server/animebracket/resolvers.ts b/src/lib/server/animebracket/resolvers.ts index 6e2a1a4..1709ccf 100644 --- a/src/lib/server/animebracket/resolvers.ts +++ b/src/lib/server/animebracket/resolvers.ts @@ -1,7 +1,7 @@ -import brackets from "./brackets.json"; -import mappings from "./mappings.json"; -import { apiResolver } from "lib/common/animethemes/api"; -import devLog from "utils/devLog"; +import { apiResolver } from "@/lib/common/animethemes/api"; +import brackets from "@/lib/server/animebracket/brackets.json"; +import mappings from "@/lib/server/animebracket/mappings.json"; +import devLog from "@/utils/devLog"; interface SourceBracket { name: string diff --git a/src/lib/server/index.ts b/src/lib/server/index.ts index 48f20b2..a59cce2 100644 --- a/src/lib/server/index.ts +++ b/src/lib/server/index.ts @@ -1,13 +1,11 @@ -import { makeExecutableSchema } from "@graphql-tools/schema"; import { mergeResolvers, mergeTypeDefs } from "@graphql-tools/merge"; +import { makeExecutableSchema } from "@graphql-tools/schema"; -import { buildFetchData } from "lib/common"; - -import typeDefsAnimeThemes from "lib/common/animethemes/type-defs"; -import typeDefsAnimeBracket from "lib/server/animebracket/type-defs"; - -import resolversAnimeThemes from "lib/common/animethemes/resolvers"; -import resolversAnimeBracket from "lib/server/animebracket/resolvers"; +import { buildFetchData } from "@/lib/common"; +import resolversAnimeThemes from "@/lib/common/animethemes/resolvers"; +import typeDefsAnimeThemes from "@/lib/common/animethemes/type-defs"; +import resolversAnimeBracket from "@/lib/server/animebracket/resolvers"; +import typeDefsAnimeBracket from "@/lib/server/animebracket/type-defs"; export const schema = makeExecutableSchema({ typeDefs: mergeTypeDefs([ diff --git a/src/pages/404.tsx b/src/pages/404.tsx index c805c5a..9d9417e 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,6 +1,6 @@ -import { Text } from "components/text"; -import { SEO } from "components/seo"; -import { TextLink } from "components/text/TextLink"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import { TextLink } from "@/components/text/TextLink"; export default function NotFoundPage() { return <> diff --git a/src/pages/[...pageSlug]/index.tsx b/src/pages/[...pageSlug]/index.tsx index 2200493..fdbb95f 100644 --- a/src/pages/[...pageSlug]/index.tsx +++ b/src/pages/[...pageSlug]/index.tsx @@ -1,24 +1,26 @@ -import Link from "next/link"; -import { fetchData } from "lib/server"; import styled from "styled-components"; -import { Icon } from "components/icon"; -import { faArrowLeft } from "@fortawesome/pro-solid-svg-icons"; -import { Text } from "components/text"; -import theme from "theme"; -import { SEO } from "components/seo"; -import fetchStaticPaths from "utils/fetchStaticPaths"; -import gql from "graphql-tag"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; import type { GetStaticPaths, GetStaticProps } from "next"; -import type { ParsedUrlQuery } from "querystring"; -import type { DocumentPageAllQuery, DocumentPageQuery, DocumentPageQueryVariables } from "generated/graphql"; -import type { RequiredNonNullable } from "utils/types"; +import Link from "next/link"; import type { MDXRemoteSerializeResult } from "next-mdx-remote"; -import serializeMarkdown from "utils/serializeMarkdown"; -import type { Heading } from "utils/rehypeExtractHeadings"; -import { Markdown } from "components/markdown/Markdown"; -import { TableOfContents } from "components/markdown/TableOfContents"; + +import { faArrowLeft } from "@fortawesome/pro-solid-svg-icons"; +import gql from "graphql-tag"; +import type { ParsedUrlQuery } from "querystring"; + +import { Icon } from "@/components/icon/Icon"; +import { Markdown } from "@/components/markdown/Markdown"; +import { TableOfContents } from "@/components/markdown/TableOfContents"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import type { DocumentPageAllQuery, DocumentPageQuery, DocumentPageQueryVariables } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import theme from "@/theme"; +import fetchStaticPaths from "@/utils/fetchStaticPaths"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import type { Heading } from "@/utils/rehypeExtractHeadings"; +import serializeMarkdown from "@/utils/serializeMarkdown"; +import type { RequiredNonNullable } from "@/utils/types"; const StyledGrid = styled.div` display: flex; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index c93f0b3..4c7c892 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,40 +1,45 @@ -import styled, { ThemeProvider } from "styled-components"; -import GlobalStyle from "styles/global"; -import theme from "theme"; -import { Column } from "components/box"; -import { Container } from "components/container"; -import { Footer } from "components/footer"; -import { Navigation, SearchNavigation, SeasonNavigation, YearNavigation } from "components/navigation"; -import ColorThemeContext from "context/colorThemeContext"; -import useColorTheme from "hooks/useColorTheme"; -import type { WatchListItem } from "context/playerContext"; -import PlayerContext, { createWatchListItem } from "context/playerContext"; -import type { ComponentType, ReactNode } from "react"; import { useEffect, useState } from "react"; -import { QueryClient, QueryClientProvider } from "react-query"; -import Head from "next/head"; -import withBasePath from "utils/withBasePath"; -import { SEO } from "components/seo"; -import { config } from "@fortawesome/fontawesome-svg-core"; -import { ToastProvider } from "context/toastContext"; -import { ToastHub } from "components/toast"; -import { Text } from "components/text"; -import { useRouter } from "next/router"; -import { ErrorBoundary } from "components/utils"; -import { STAGING } from "utils/config.mjs"; -import { Card } from "components/card"; -import { ExternalLink } from "components/external-link"; +import type { ComponentType, ReactNode } from "react"; +import styled, { ThemeProvider } from "styled-components"; import type { AppProps } from "next/app"; -import { LazyMotion } from "framer-motion"; -import { VideoPlayer } from "components/video-player/VideoPlayer"; -import { PageRevalidation } from "components/utils/PageRevalidation"; -import type { VideoPageProps } from "pages/anime/[animeSlug]/[videoSlug]"; -import FullscreenContext from "context/fullscreenContext"; -import { VideoPlayerOverlay } from "components/video-player/VideoPlayerOverlay"; +import Head from "next/head"; +import { useRouter } from "next/router"; + +import { config } from "@fortawesome/fontawesome-svg-core"; import { useFullscreen } from "ahooks"; -import { either, sortTransformed, themeIndexComparator, themeTypeComparator } from "utils/comparators"; +import { LazyMotion } from "framer-motion"; +import { QueryClient, QueryClientProvider } from "react-query"; import useLocalStorageState from "use-local-storage-state"; -import { getVideoSlugByProps, getVideoSlugByWatchListItem } from "utils/createVideoSlug"; + +import { Column } from "@/components/box/Flex"; +import { Card } from "@/components/card/Card"; +import { Container } from "@/components/container/Container"; +import { ExternalLink } from "@/components/external-link/ExternalLink"; +import { Footer } from "@/components/footer/Footer"; +import { Navigation } from "@/components/navigation/Navigation"; +import { SearchNavigation } from "@/components/navigation/SearchNavigation"; +import { SeasonNavigation } from "@/components/navigation/SeasonNavigation"; +import { YearNavigation } from "@/components/navigation/YearNavigation"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import { ToastHub } from "@/components/toast/ToastHub"; +import { ErrorBoundary } from "@/components/utils/ErrorBoundary"; +import { PageRevalidation } from "@/components/utils/PageRevalidation"; +import { VideoPlayer } from "@/components/video-player/VideoPlayer"; +import { VideoPlayerOverlay } from "@/components/video-player/VideoPlayerOverlay"; +import ColorThemeContext from "@/context/colorThemeContext"; +import FullscreenContext from "@/context/fullscreenContext"; +import type { WatchListItem } from "@/context/playerContext"; +import PlayerContext, { createWatchListItem } from "@/context/playerContext"; +import { ToastProvider } from "@/context/toastContext"; +import useColorTheme from "@/hooks/useColorTheme"; +import type { VideoPageProps } from "@/pages/anime/[animeSlug]/[videoSlug]"; +import GlobalStyle from "@/styles/global"; +import theme from "@/theme"; +import { either, sortTransformed, themeIndexComparator, themeTypeComparator } from "@/utils/comparators"; +import { STAGING } from "@/utils/config"; +import { getVideoSlugByProps, getVideoSlugByWatchListItem } from "@/utils/createVideoSlug"; +import withBasePath from "@/utils/withBasePath"; import "@fortawesome/fontawesome-svg-core/styles.css"; import "styles/prism.scss"; @@ -44,6 +49,7 @@ config.autoAddCss = false; const queryClient = new QueryClient(); const StyledWrapper = styled(Column)` + isolation: isolate; min-height: 100%; `; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 93973b0..b27c6aa 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,7 +1,8 @@ +import { ServerStyleSheet } from "styled-components"; import type { DocumentContext } from "next/document"; import Document, { Head, Html, Main, NextScript } from "next/document"; -import { ServerStyleSheet } from "styled-components"; -import { API_URL } from "lib/common/animethemes/api"; + +import { API_URL } from "@/lib/common/animethemes/api"; const ThemeInjection = () => { // language=JavaScript diff --git a/src/pages/about/dump.tsx b/src/pages/about/dump.tsx index f045d8e..2b4b750 100644 --- a/src/pages/about/dump.tsx +++ b/src/pages/about/dump.tsx @@ -1,17 +1,19 @@ import type { GetStaticProps } from "next"; -import { fetchData } from "lib/server"; -import gql from "graphql-tag"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; -import type { DumpIndexPageQuery } from "generated/graphql"; -import { Text } from "components/text"; -import { SummaryCard } from "components/card"; -import { IconTextButton } from "components/button"; -import type { Comparator } from "utils/types"; -import { faDownload } from "@fortawesome/pro-solid-svg-icons"; -import { SEO } from "components/seo"; import Link from "next/link"; -import { Column } from "components/box"; + +import { faDownload } from "@fortawesome/pro-solid-svg-icons"; +import gql from "graphql-tag"; + +import { Column } from "@/components/box/Flex"; +import { IconTextButton } from "@/components/button/IconTextButton"; +import { SummaryCard } from "@/components/card/SummaryCard"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import type { DumpIndexPageQuery } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import type { Comparator } from "@/utils/types"; interface DumpIndexPageProps extends SharedPageProps, DumpIndexPageQuery {} diff --git a/src/pages/anime/[animeSlug]/[videoSlug]/index.tsx b/src/pages/anime/[animeSlug]/[videoSlug]/index.tsx index 27289ba..c18d2e7 100644 --- a/src/pages/anime/[animeSlug]/[videoSlug]/index.tsx +++ b/src/pages/anime/[animeSlug]/[videoSlug]/index.tsx @@ -1,31 +1,36 @@ -import { AnimeSummaryCard, ArtistSummaryCard, SummaryCard, ThemeSummaryCard } from "components/card"; -import createVideoSlug from "utils/createVideoSlug"; -import fetchStaticPaths from "utils/fetchStaticPaths"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; -import type { VideoPageAllQuery, VideoPageQuery, VideoPageQueryVariables } from "generated/graphql"; -import type { GetStaticPaths, GetStaticProps } from "next"; -import { fetchData } from "lib/server"; -import gql from "graphql-tag"; -import type { RequiredNonNullable } from "utils/types"; -import VideoScript from "components/video-script/VideoScript"; -import { HorizontalScroll } from "components/utils"; -import { StyledScrollArea, StyledSwitcher } from "components/video-player/VideoPlayer.style"; -import { SwitcherOption } from "components/switcher/Switcher"; -import { Column, Row } from "components/box"; -import { VideoSummaryCard } from "components/card/VideoSummaryCard"; -import { Text } from "components/text"; -import { IconTextButton } from "components/button"; import { useContext, useEffect, useRef, useState } from "react"; -import PlayerContext from "context/playerContext"; -import { PageRevalidation } from "components/utils/PageRevalidation"; -import { SEO } from "components/seo"; -import extractImages from "utils/extractImages"; -import { VIDEO_URL } from "utils/config.mjs"; +import type { GetStaticPaths, GetStaticProps } from "next"; + import { faChevronDown, faChevronUp } from "@fortawesome/pro-solid-svg-icons"; -import Switch from "components/form/Switch"; -import PlaylistSummaryCard from "components/card/PlaylistSummaryCard"; -import { StudioSummaryCard } from "components/card/StudioSummaryCard"; +import gql from "graphql-tag"; + +import { Column, Row } from "@/components/box/Flex"; +import { IconTextButton } from "@/components/button/IconTextButton"; +import { AnimeSummaryCard } from "@/components/card/AnimeSummaryCard"; +import { ArtistSummaryCard } from "@/components/card/ArtistSummaryCard"; +import PlaylistSummaryCard from "@/components/card/PlaylistSummaryCard"; +import { StudioSummaryCard } from "@/components/card/StudioSummaryCard"; +import { SummaryCard } from "@/components/card/SummaryCard"; +import { ThemeSummaryCard } from "@/components/card/ThemeSummaryCard"; +import { VideoSummaryCard } from "@/components/card/VideoSummaryCard"; +import Switch from "@/components/form/Switch"; +import { SEO } from "@/components/seo/SEO"; +import { SwitcherOption } from "@/components/switcher/Switcher"; +import { Text } from "@/components/text/Text"; +import { HorizontalScroll } from "@/components/utils/HorizontalScroll"; +import { PageRevalidation } from "@/components/utils/PageRevalidation"; +import { StyledScrollArea, StyledSwitcher } from "@/components/video-player/VideoPlayer.style"; +import VideoScript from "@/components/video-script/VideoScript"; +import PlayerContext from "@/context/playerContext"; +import type { VideoPageAllQuery, VideoPageQuery, VideoPageQueryVariables } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import { VIDEO_URL } from "@/utils/config"; +import createVideoSlug from "@/utils/createVideoSlug"; +import extractImages from "@/utils/extractImages"; +import fetchStaticPaths from "@/utils/fetchStaticPaths"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import type { RequiredNonNullable } from "@/utils/types"; export interface VideoPageProps extends SharedPageProps, RequiredNonNullable { themeIndex: number diff --git a/src/pages/anime/[animeSlug]/index.tsx b/src/pages/anime/[animeSlug]/index.tsx index 61c4791..ff5180e 100644 --- a/src/pages/anime/[animeSlug]/index.tsx +++ b/src/pages/anime/[animeSlug]/index.tsx @@ -1,33 +1,36 @@ import { useState } from "react"; -import Link from "next/link"; import styled from "styled-components"; -import { ExternalLink } from "components/external-link"; -import { DescriptionList } from "components/description-list"; -import { Text } from "components/text"; -import { Column } from "components/box"; -import { SidebarContainer } from "components/container"; -import { Card, ThemeDetailCard } from "components/card"; -import { HeightTransition } from "components/utils"; -import { CoverImage } from "components/image"; -import { AnimeThemeFilter } from "components/filter"; -import { SEO } from "components/seo"; -import extractImages from "utils/extractImages"; +import type { GetStaticPaths, GetStaticProps } from "next"; +import Link from "next/link"; + +import gql from "graphql-tag"; +import type { ParsedUrlQuery } from "querystring"; + +import { Column } from "@/components/box/Flex"; +import { Card } from "@/components/card/Card"; +import { ThemeDetailCard } from "@/components/card/ThemeDetailCard"; +import { SidebarContainer } from "@/components/container/SidebarContainer"; +import { DescriptionList } from "@/components/description-list/DescriptionList"; +import { ExternalLink } from "@/components/external-link/ExternalLink"; +import { AnimeThemeFilter } from "@/components/filter/AnimeThemeFilter"; +import { CoverImage } from "@/components/image/CoverImage"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import { HeightTransition } from "@/components/utils/HeightTransition"; +import type { AnimeDetailPageAllQuery, AnimeDetailPageQuery, AnimeDetailPageQueryVariables } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; import { either, resourceAsComparator, resourceSiteComparator, seriesNameComparator, studioNameComparator -} from "utils/comparators"; -import fetchStaticPaths from "utils/fetchStaticPaths"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; -import type { GetStaticPaths, GetStaticProps } from "next"; -import type { ParsedUrlQuery } from "querystring"; -import { fetchData } from "lib/server"; -import gql from "graphql-tag"; -import type { AnimeDetailPageAllQuery, AnimeDetailPageQuery, AnimeDetailPageQueryVariables } from "generated/graphql"; -import type { RequiredNonNullable } from "utils/types"; +} from "@/utils/comparators"; +import extractImages from "@/utils/extractImages"; +import fetchStaticPaths from "@/utils/fetchStaticPaths"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import type { RequiredNonNullable } from "@/utils/types"; const StyledList = styled.div` display: flex; diff --git a/src/pages/anime/index.tsx b/src/pages/anime/index.tsx index 126cc6f..c8dd5b4 100644 --- a/src/pages/anime/index.tsx +++ b/src/pages/anime/index.tsx @@ -1,14 +1,16 @@ import React from "react"; -import Link from "next/link"; -import { Text } from "components/text"; -import { AlphabeticalIndex } from "components/index"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; import type { GetStaticProps } from "next"; -import { fetchData } from "lib/server"; +import Link from "next/link"; + import gql from "graphql-tag"; -import type { AnimeIndexPageQuery } from "generated/graphql"; -import { BackToTopButton } from "components/button"; + +import { BackToTopButton } from "@/components/button/BackToTopButton"; +import { AlphabeticalIndex } from "@/components/index/AlphabeticalIndex"; +import { Text } from "@/components/text/Text"; +import type { AnimeIndexPageQuery } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; interface AnimeIndexPageProps extends SharedPageProps, AnimeIndexPageQuery {} diff --git a/src/pages/api/revalidate.ts b/src/pages/api/revalidate.ts index 717406c..8b2a018 100644 --- a/src/pages/api/revalidate.ts +++ b/src/pages/api/revalidate.ts @@ -1,9 +1,11 @@ -import { fetchData } from "lib/server"; -import gql from "graphql-tag"; -import createVideoSlug from "utils/createVideoSlug"; -import { BASE_PATH } from "utils/config.mjs"; import type { NextApiRequest, NextApiResponse } from "next"; -import type { RevalidateAnimeQuery, RevalidateApiQuery } from "generated/graphql"; + +import gql from "graphql-tag"; + +import type { RevalidateAnimeQuery, RevalidateApiQuery } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import { BASE_PATH } from "@/utils/config"; +import createVideoSlug from "@/utils/createVideoSlug"; interface RevalidateQuery { secret?: string diff --git a/src/pages/artist/[artistSlug]/index.tsx b/src/pages/artist/[artistSlug]/index.tsx index 2ad9dfb..cc7b4a5 100644 --- a/src/pages/artist/[artistSlug]/index.tsx +++ b/src/pages/artist/[artistSlug]/index.tsx @@ -1,18 +1,35 @@ import React, { useCallback } from "react"; -import Link from "next/link"; -import styled from "styled-components"; -import { ExternalLink } from "components/external-link"; -import { DescriptionList } from "components/description-list"; -import { Text } from "components/text"; -import { Column } from "components/box"; -import { SidebarContainer } from "components/container"; -import { ThemeSummaryCard } from "components/card"; -import { CoverImage } from "components/image"; -import useToggle from "hooks/useToggle"; import { memo, useMemo, useState } from "react"; -import { FilterToggleButton } from "components/button"; -import { SearchFilter, SearchFilterGroup, SearchFilterSortBy } from "components/search-filter"; -import { Collapse } from "components/utils"; +import { useContext } from "react"; +import styled from "styled-components"; +import type { GetStaticPaths, GetStaticProps } from "next"; +import Link from "next/link"; + +import gql from "graphql-tag"; +import type { ParsedUrlQuery } from "querystring"; + +import { Column } from "@/components/box/Flex"; +import { FilterToggleButton } from "@/components/button/FilterToggleButton"; +import { ThemeSummaryCard } from "@/components/card/ThemeSummaryCard"; +import { SidebarContainer } from "@/components/container/SidebarContainer"; +import { DescriptionList } from "@/components/description-list/DescriptionList"; +import { ExternalLink } from "@/components/external-link/ExternalLink"; +import { CoverImage } from "@/components/image/CoverImage"; +import { Listbox, ListboxOption } from "@/components/listbox/Listbox"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { SearchFilterGroup } from "@/components/search-filter/SearchFilterGroup"; +import { SearchFilterSortBy } from "@/components/search-filter/SearchFilterSortBy"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import { Collapse } from "@/components/utils/Collapse"; +import PlayerContext, { createWatchListItem } from "@/context/playerContext"; +import type { + ArtistDetailPageAllQuery, + ArtistDetailPageQuery, + ArtistDetailPageQueryVariables, ThemeSummaryCardArtistFragment +} from "@/generated/graphql"; +import useToggle from "@/hooks/useToggle"; +import { fetchData } from "@/lib/server"; import { either, getComparator, @@ -24,24 +41,11 @@ import { SONG_OLD_NEW, SONG_Z_A, SONG_Z_A_ANIME -} from "utils/comparators"; -import { fetchData } from "lib/server"; -import { SEO } from "components/seo"; -import extractImages from "utils/extractImages"; -import gql from "graphql-tag"; -import fetchStaticPaths from "utils/fetchStaticPaths"; -import getSharedPageProps from "utils/getSharedPageProps"; -import type { GetStaticPaths, GetStaticProps } from "next"; -import type { - ArtistDetailPageAllQuery, - ArtistDetailPageQuery, - ArtistDetailPageQueryVariables, ThemeSummaryCardArtistFragment -} from "generated/graphql"; -import type { ParsedUrlQuery } from "querystring"; -import type { RequiredNonNullable } from "utils/types"; -import { Listbox, ListboxOption } from "components/listbox/Listbox"; -import { useContext } from "react"; -import PlayerContext, { createWatchListItem } from "context/playerContext"; +} from "@/utils/comparators"; +import extractImages from "@/utils/extractImages"; +import fetchStaticPaths from "@/utils/fetchStaticPaths"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import type { RequiredNonNullable } from "@/utils/types"; const StyledList = styled.div` diff --git a/src/pages/artist/index.tsx b/src/pages/artist/index.tsx index 34ae0e6..8c5a4a0 100644 --- a/src/pages/artist/index.tsx +++ b/src/pages/artist/index.tsx @@ -1,14 +1,16 @@ import React from "react"; -import Link from "next/link"; -import { Text } from "components/text"; -import { AlphabeticalIndex } from "components/index"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; import type { GetStaticProps } from "next"; -import { fetchData } from "lib/server"; +import Link from "next/link"; + import gql from "graphql-tag"; -import type { ArtistIndexPageQuery } from "generated/graphql"; -import { BackToTopButton } from "components/button"; + +import { BackToTopButton } from "@/components/button/BackToTopButton"; +import { AlphabeticalIndex } from "@/components/index/AlphabeticalIndex"; +import { Text } from "@/components/text/Text"; +import type { ArtistIndexPageQuery } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; interface ArtistIndexPageProps extends SharedPageProps, ArtistIndexPageQuery {} diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index 70f2ff7..d471c3a 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -1,17 +1,20 @@ -import { fetchData } from "lib/server"; -import { SEO } from "components/seo"; -import { Text } from "components/text"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; -import type { GetStaticProps } from "next"; -import gql from "graphql-tag"; -import type { DocumentIndexPageQuery } from "generated/graphql"; -import { BackToTopButton, Button } from "components/button"; -import { Card } from "components/card"; -import Link from "next/link"; -import { Column, Row } from "components/box"; -import { groupBy } from "lodash-es"; import { Fragment } from "react"; +import type { GetStaticProps } from "next"; +import Link from "next/link"; + +import gql from "graphql-tag"; +import { groupBy } from "lodash-es"; + +import { Column, Row } from "@/components/box/Flex"; +import { BackToTopButton } from "@/components/button/BackToTopButton"; +import { Button } from "@/components/button/Button"; +import { Card } from "@/components/card/Card"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import type { DocumentIndexPageQuery } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; interface DocumentIndexPageProps extends SharedPageProps, DocumentIndexPageQuery {} diff --git a/src/pages/event/[bracketSlug]/index.tsx b/src/pages/event/[bracketSlug]/index.tsx index d471418..02a9c8e 100644 --- a/src/pages/event/[bracketSlug]/index.tsx +++ b/src/pages/event/[bracketSlug]/index.tsx @@ -1,24 +1,26 @@ -import styled from "styled-components"; -import { SEO } from "components/seo"; -import { Text } from "components/text"; -import { Column, Solid } from "components/box"; -import { faStopwatch } from "@fortawesome/pro-solid-svg-icons"; -import theme from "theme"; import { useState } from "react"; -import { Switcher } from "components/switcher"; -import { fetchData } from "lib/server"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; -import fetchStaticPaths from "utils/fetchStaticPaths"; -import gql from "graphql-tag"; -import { CornerIcon } from "components/icon/CornerIcon"; -import { BracketThemeSummaryCard } from "components/bracket/BracketThemeSummaryCard"; -import { BracketChart } from "components/bracket/BracketChart"; -import type { RequiredNonNullable } from "utils/types"; -import type { BracketPageAllQuery, BracketPageQuery, BracketPageQueryVariables } from "generated/graphql"; -import type { ParsedUrlQuery } from "querystring"; +import styled from "styled-components"; import type { GetStaticPaths, GetStaticProps } from "next"; -import { SwitcherOption } from "components/switcher/Switcher"; + +import { faStopwatch } from "@fortawesome/pro-solid-svg-icons"; +import gql from "graphql-tag"; +import type { ParsedUrlQuery } from "querystring"; + +import { Column } from "@/components/box/Flex"; +import { Solid } from "@/components/box/Solid"; +import { BracketChart } from "@/components/bracket/BracketChart"; +import { BracketThemeSummaryCard } from "@/components/bracket/BracketThemeSummaryCard"; +import { CornerIcon } from "@/components/icon/CornerIcon"; +import { SEO } from "@/components/seo/SEO"; +import { Switcher, SwitcherOption } from "@/components/switcher/Switcher"; +import { Text } from "@/components/text/Text"; +import type { BracketPageAllQuery, BracketPageQuery, BracketPageQueryVariables } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import theme from "@/theme"; +import fetchStaticPaths from "@/utils/fetchStaticPaths"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import type { RequiredNonNullable } from "@/utils/types"; const CurrentRound = styled(Solid)` position: relative; diff --git a/src/pages/event/anime-awards.tsx b/src/pages/event/anime-awards.tsx index 4f8f71d..9bada26 100644 --- a/src/pages/event/anime-awards.tsx +++ b/src/pages/event/anime-awards.tsx @@ -1,27 +1,29 @@ -import type { ComponentPropsWithoutRef } from "react"; import { useState } from "react"; -import event from "lib/server/animeawards/index.json"; -import { fetchData } from "lib/server"; -import { SEO } from "components/seo"; -import { Text } from "components/text"; -import { SummaryCard } from "components/card"; -import { Switcher } from "components/switcher"; +import type { ComponentPropsWithoutRef } from "react"; import styled from "styled-components"; -import theme from "theme"; -import extractImages from "utils/extractImages"; -import createVideoSlug from "utils/createVideoSlug"; +import type { GetStaticProps } from "next"; import Link from "next/link"; -import { SongTitleWithArtists } from "components/utils"; -import { Icon } from "components/icon"; + import { faAward, faHashtag, faUsers } from "@fortawesome/pro-solid-svg-icons"; import { m } from "framer-motion"; -import getSharedPageProps from "utils/getSharedPageProps"; -import type { GetStaticProps } from "next"; import gql from "graphql-tag"; -import type { AwardPageThemeQuery } from "generated/graphql"; -import type { Comparator } from "utils/types"; -import { SwitcherOption, SwitcherReset } from "components/switcher/Switcher"; -import { CornerIcon } from "components/icon/CornerIcon"; + +import { SummaryCard } from "@/components/card/SummaryCard"; +import { CornerIcon } from "@/components/icon/CornerIcon"; +import { Icon } from "@/components/icon/Icon"; +import { SEO } from "@/components/seo/SEO"; +import { Switcher } from "@/components/switcher/Switcher"; +import { SwitcherOption, SwitcherReset } from "@/components/switcher/Switcher"; +import { Text } from "@/components/text/Text"; +import { SongTitleWithArtists } from "@/components/utils/SongTitleWithArtists"; +import type { AwardPageThemeQuery } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import event from "@/lib/server/animeawards/index.json"; +import theme from "@/theme"; +import createVideoSlug from "@/utils/createVideoSlug"; +import extractImages from "@/utils/extractImages"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import type { Comparator } from "@/utils/types"; const StyledHeader = styled.div` display: flex; diff --git a/src/pages/event/index.tsx b/src/pages/event/index.tsx index 11a9ad6..c0f01d8 100644 --- a/src/pages/event/index.tsx +++ b/src/pages/event/index.tsx @@ -1,16 +1,18 @@ -import Link from "next/link"; -import { Text } from "components/text"; -import { Column } from "components/box"; -import { SEO } from "components/seo"; import styled from "styled-components"; -import { Button } from "components/button"; -import { fetchData } from "lib/server"; +import Link from "next/link"; + import { faArrowRight, faAward, faTrophy } from "@fortawesome/pro-solid-svg-icons"; -import { Icon } from "components/icon"; -import theme from "theme"; -import getSharedPageProps from "utils/getSharedPageProps"; import gql from "graphql-tag"; -import type { EventPageQuery } from "generated/graphql"; + +import { Column } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { Icon } from "@/components/icon/Icon"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import type { EventPageQuery } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import theme from "@/theme"; +import getSharedPageProps from "@/utils/getSharedPageProps"; const BigButton = styled(Button)` overflow: hidden; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index eb4aaed..7b0f932 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,9 +1,8 @@ -import Link from "next/link"; -import { Column } from "components/box"; -import { Text } from "components/text"; import styled from "styled-components"; -import { Button } from "components/button"; -import { Icon } from "components/icon"; +import type { GetStaticProps } from "next"; +import Link from "next/link"; +import type { MDXRemoteSerializeResult } from "next-mdx-remote"; + import { faArrowRight, faAward, @@ -13,33 +12,36 @@ import { faTv, faUser } from "@fortawesome/pro-solid-svg-icons"; -import theme from "theme"; -import { ExternalLink } from "components/external-link"; -import useCurrentSeason from "hooks/useCurrentSeason"; -import { fetchData } from "lib/server"; -import { SEO } from "components/seo"; -import { FeaturedTheme } from "components/featured-theme"; -import getSharedPageProps from "utils/getSharedPageProps"; +import gql from "graphql-tag"; import { range } from "lodash-es"; -import { Skeleton } from "components/skeleton"; +import useSWR from "swr"; + +import { Column } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { AnnouncementCard } from "@/components/card/AnnouncementCard"; +import PlaylistSummaryCard from "@/components/card/PlaylistSummaryCard"; +import { VideoSummaryCard, VideoSummaryCardFragmentVideo } from "@/components/card/VideoSummaryCard"; +import { ShuffleDialog } from "@/components/dialog/ShuffleDialog"; +import { ExternalLink } from "@/components/external-link/ExternalLink"; +import { FeaturedTheme } from "@/components/featured-theme/FeaturedTheme"; +import { Icon } from "@/components/icon/Icon"; +import { ProfileImage } from "@/components/image/ProfileImage"; +import { SEO } from "@/components/seo/SEO"; +import { Skeleton } from "@/components/skeleton/Skeleton"; +import { Text } from "@/components/text/Text"; import type { HomePageMostViewedQuery, HomePageQuery, HomePageRecentlyAddedPlaylistsQuery, HomePageRecentlyAddedQuery -} from "generated/graphql"; -import type { GetStaticProps } from "next"; -import { AnnouncementCard } from "components/card/AnnouncementCard"; -import type { MDXRemoteSerializeResult } from "next-mdx-remote"; -import serializeMarkdown from "utils/serializeMarkdown"; -import { VideoSummaryCard, VideoSummaryCardFragmentVideo } from "components/card/VideoSummaryCard"; -import useSWR from "swr"; -import { fetchDataClient } from "lib/client"; -import gql from "graphql-tag"; -import { ShuffleDialog } from "components/dialog/ShuffleDialog"; -import useAuth from "hooks/useAuth"; -import { ProfileImage } from "components/image/ProfileImage"; -import PlaylistSummaryCard from "components/card/PlaylistSummaryCard"; +} from "@/generated/graphql"; +import useAuth from "@/hooks/useAuth"; +import useCurrentSeason from "@/hooks/useCurrentSeason"; +import { fetchDataClient } from "@/lib/client"; +import { fetchData } from "@/lib/server"; +import theme from "@/theme"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import serializeMarkdown from "@/utils/serializeMarkdown"; const BigButton = styled(Button)` justify-content: flex-end; diff --git a/src/pages/playlist/[playlistId]/index.tsx b/src/pages/playlist/[playlistId]/index.tsx index ad9dc05..b0b0810 100644 --- a/src/pages/playlist/[playlistId]/index.tsx +++ b/src/pages/playlist/[playlistId]/index.tsx @@ -1,21 +1,47 @@ +import { useContext, useMemo, useState } from "react"; +import styled from "styled-components"; import type { GetServerSideProps } from "next"; -import { Text } from "components/text"; -import { fetchData } from "lib/server"; +import { useRouter } from "next/router"; + +import { faEllipsisV, faGrid, faListMusic, faMinus, faPlus, faShuffle, faTrophy } from "@fortawesome/pro-solid-svg-icons"; +import { Reorder, useDragControls } from "framer-motion"; +import gql from "graphql-tag"; +import { shuffle } from "lodash-es"; +import type { ParsedUrlQuery } from "querystring"; +import useSWR from "swr"; + +import { Column } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { FilterToggleButton } from "@/components/button/FilterToggleButton"; +import { IconTextButton } from "@/components/button/IconTextButton"; +import { VideoSummaryCard, VideoSummaryCardFragmentVideo } from "@/components/card/VideoSummaryCard"; +import { SidebarContainer } from "@/components/container/SidebarContainer"; +import { DescriptionList } from "@/components/description-list/DescriptionList"; +import { PlaylistEditDialog } from "@/components/dialog/PlaylistEditDialog"; +import { PlaylistTrackAddDialog } from "@/components/dialog/PlaylistTrackAddDialog"; +import { PlaylistTrackRemoveDialog } from "@/components/dialog/PlaylistTrackRemoveDialog"; +import { FeaturedTheme } from "@/components/featured-theme/FeaturedTheme"; +import { Icon } from "@/components/icon/Icon"; +import { MultiCoverImage } from "@/components/image/MultiCoverImage"; +import { Menu, MenuContent, MenuItem, MenuTrigger } from "@/components/menu/Menu"; +import { SearchFilterGroup } from "@/components/search-filter/SearchFilterGroup"; +import { SearchFilterSortBy } from "@/components/search-filter/SearchFilterSortBy"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import { Collapse } from "@/components/utils/Collapse"; +import PlayerContext, { createWatchListItem } from "@/context/playerContext"; import type { PlaylistDetailPageMeQuery, PlaylistDetailPagePlaylistQuery, PlaylistDetailPagePlaylistQueryVariables, PlaylistDetailPageQuery, PlaylistDetailPageQueryVariables -} from "generated/graphql"; -import gql from "graphql-tag"; -import { VideoSummaryCard, VideoSummaryCardFragmentVideo } from "components/card/VideoSummaryCard"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; -import type { Comparator, RequiredNonNullable } from "utils/types"; -import type { ParsedUrlQuery } from "querystring"; -import useToggle from "hooks/useToggle"; -import { useContext, useState } from "react"; +} from "@/generated/graphql"; +import useToggle from "@/hooks/useToggle"; +import { fetchDataClient } from "@/lib/client"; +import axios from "@/lib/client/axios"; +import { fetchData } from "@/lib/server"; +import theme from "@/theme"; import { ANIME_A_Z, ANIME_NEW_OLD, @@ -26,32 +52,11 @@ import { SONG_Z_A, sortTransformed, UNSORTED -} from "utils/comparators"; -import { SEO } from "components/seo"; -import { SidebarContainer } from "components/container"; -import { MultiCoverImage } from "components/image"; -import { Column } from "components/box"; -import { Button, FilterToggleButton, IconTextButton } from "components/button"; -import { Collapse } from "components/utils"; -import { SearchFilterGroup, SearchFilterSortBy } from "components/search-filter"; -import styled from "styled-components"; -import theme from "theme"; -import { DescriptionList } from "components/description-list"; -import { Icon } from "components/icon"; -import { faEllipsisV, faListMusic, faMinus, faPlus, faShuffle, faTrophy } from "@fortawesome/pro-solid-svg-icons"; -import { PlaylistTrackAddDialog } from "components/dialog/PlaylistTrackAddDialog"; -import { PlaylistTrackRemoveDialog } from "components/dialog/PlaylistTrackRemoveDialog"; -import useSWR from "swr"; -import { fetchDataClient } from "lib/client"; -import PlayerContext, { createWatchListItem } from "context/playerContext"; -import { Menu, MenuContent, MenuItem, MenuTrigger } from "components/menu/Menu"; -import { PlaylistEditDialog } from "components/dialog/PlaylistEditDialog"; -import { Reorder } from "framer-motion"; -import axios from "lib/client/axios"; -import { FeaturedTheme } from "components/featured-theme"; -import { shuffle } from "lodash-es"; -import createVideoSlug from "utils/createVideoSlug"; -import { useRouter } from "next/router"; +} from "@/utils/comparators"; +import createVideoSlug from "@/utils/createVideoSlug"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import type { Comparator, RequiredNonNullable } from "@/utils/types"; const StyledDesktopOnly = styled.div` gap: 24px; @@ -142,7 +147,7 @@ interface PlaylistDetailPageParams extends ParsedUrlQuery { } export default function PlaylistDetailPage({ playlist: initialPlaylist, me: initialMe }: PlaylistDetailPageProps) { - const { setWatchList, setWatchListFactory, setCurrentWatchListItem, addWatchListItem, addWatchListItemNext } = useContext(PlayerContext); + const { setWatchList, setWatchListFactory, setCurrentWatchListItem } = useContext(PlayerContext); const router = useRouter(); const { data: playlist, mutate } = useSWR( @@ -269,11 +274,148 @@ export default function PlaylistDetailPage({ playlist: initialPlaylist, me: init } } - const trackElements = tracksSorted.map((track, index) => [track, ( + const coverImageResources = useMemo(() => playlist.tracks.flatMap((track) => { + const anime = track.video.entries[0].theme?.anime; + + return anime ? [anime] : []; + }), [playlist.tracks]); + + const topRankedTrack = tracks.find((track) => track.rank === 1); + + return ( + <> + + {playlist.name} + + + + + + {isOwner ? ( + + ) : null} + + + {playlist.user.name} + + + + + {(isRanking && topRankedTrack) ? ( + playAll(0)} + /> + } + onPlay={() => playAll(0)} + /> + ) : null} + + + Themes + ({playlist.tracks_count}) + + {tracksSorted.length > 0 && ( + Shuffle All + )} + + + + + + Custom + Reversed + A ➜ Z (Song) + Z ➜ A (Song) + A ➜ Z (Anime) + Z ➜ A (Anime) + Old ➜ New + New ➜ Old + + + + + {(sortBy === UNSORTED && isOwner) ? ( + + {tracksSorted.map((track, index) => ( + playAll(index)} + onDragEnd={() => updateTrackOrderRemote(track.id)} + /> + ))} + + ) : ( +
+ {tracksSorted.map((track, index) => ( + playAll(index)} + /> + ))} +
+ )} + + + + + ); +} + +const StyledDragHandle = styled(Icon)` + cursor: grab; + user-select: none; + touch-action: none; + + &:active:hover { + cursor: grabbing; + } +`; + +interface PlaylistTrackProps { + playlist: PlaylistDetailPageProps["playlist"]; + track: PlaylistDetailPageProps["playlist"]["tracks"][number] & { rank: number }; + isOwner: boolean; + isRanking: boolean; + isDraggable?: boolean; + onPlay: () => void; + onDragEnd?: () => void; +} + +function PlaylistTrack({ playlist, track, isOwner, isRanking, isDraggable, onPlay, onDragEnd }: PlaylistTrackProps) { + const { addWatchListItem, addWatchListItemNext } = useContext(PlayerContext); + const controls = useDragControls(); + + const element = ( playAll(index)} + onPlay={() => onPlay()} menu={ @@ -315,6 +457,7 @@ export default function PlaylistDetailPage({ playlist: initialPlaylist, me: init } + append={isDraggable ? controls.start(event)} /> : null} /> {isRanking ? ( {track.rank === 1 ? ( @@ -322,93 +465,17 @@ export default function PlaylistDetailPage({ playlist: initialPlaylist, me: init ) : `#${track.rank}`} ) : null} - )] as const); - - return ( - <> - - {playlist.name} - - - - { - const anime = track.video.entries[0].theme?.anime; - - return anime ? [anime] : []; - })} - /> - - {isOwner ? ( - - ) : null} - - - {playlist.user.name} - - - - - {isRanking ? ( - track.rank === 1)?.[1]} - onPlay={() => playAll(0)} - /> - ) : null} - - - Themes - ({playlist.tracks_count}) - - {tracksSorted.length > 0 && ( - Shuffle All - )} - - - - - - Custom - {isRanking ? ( - Reversed - ) : null} - A ➜ Z (Song) - Z ➜ A (Song) - A ➜ Z (Anime) - Z ➜ A (Anime) - Old ➜ New - New ➜ Old - - - - - {(sortBy === UNSORTED && isOwner) ? ( - - {trackElements.map(([track, node]) => ( - updateTrackOrderRemote(track.id)}> - {node} - - ))} - - ) : ( -
- {trackElements.map(([, node]) => node)} -
- )} - - - - ); + + if (isDraggable) { + return ( + onDragEnd?.()}> + {element} + + ); + } + + return element; } PlaylistDetailPage.fragments = { diff --git a/src/pages/profile/gallery/index.tsx b/src/pages/profile/gallery/index.tsx index dc2c751..544c8d6 100644 --- a/src/pages/profile/gallery/index.tsx +++ b/src/pages/profile/gallery/index.tsx @@ -1,15 +1,17 @@ -import { Text } from "components/text"; -import styled from "styled-components"; -import { Button } from "components/button"; import { useState } from "react"; -import { SEO } from "components/seo"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; +import styled from "styled-components"; import type { GetStaticProps } from "next"; -import { fetchData } from "lib/server"; -import type { GalleryPageQuery } from "generated/graphql"; + import gql from "graphql-tag"; +import { Button } from "@/components/button/Button"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import type { GalleryPageQuery } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; + const StyledGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx index d1ab935..4aa063e 100644 --- a/src/pages/profile/index.tsx +++ b/src/pages/profile/index.tsx @@ -1,42 +1,48 @@ -import styled, { css } from "styled-components"; -import { SEO } from "components/seo"; -import { Column, Row } from "components/box"; -import { Text } from "components/text"; -import { Card, SummaryCard, ThemeSummaryCard } from "components/card"; -import { Button, IconTextButton } from "components/button"; -import { faEllipsisV, faExclamationCircle, faPersonToDoor, faTrash } from "@fortawesome/pro-solid-svg-icons"; -import type { WatchHistory } from "hooks/useWatchHistory"; -import useWatchHistory from "hooks/useWatchHistory"; -import useLocalPlaylist from "hooks/useLocalPlaylist"; -import theme from "theme"; -import { SearchFilter, SearchFilterGroup } from "components/search-filter"; -import { ColorTheme, FeaturedThemePreview, ShowAnnouncements } from "utils/settings"; -import useSetting from "hooks/useSetting"; import { memo, useState } from "react"; -import { PlaylistAddDialog } from "components/dialog/PlaylistAddDialog"; -import PlaylistSummaryCard from "components/card/PlaylistSummaryCard"; +import styled, { css } from "styled-components"; import type { GetServerSideProps } from "next"; -import { fetchData } from "lib/server"; -import type { ProfilePageMeQuery, ProfilePageQuery } from "generated/graphql"; -import gql from "graphql-tag"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; -import useAuth from "hooks/useAuth"; -import { LoginDialog } from "components/dialog/LoginDialog"; -import { RegisterDialog } from "components/dialog/RegisterDialog"; -import useSWR from "swr"; -import { fetchDataClient } from "lib/client"; -import type { RequiredNonNullable } from "utils/types"; -import { Busy } from "components/utils/Busy"; -import { PlaylistRemoveDialog } from "components/dialog/PlaylistRemoveDialog"; -import { Icon } from "components/icon"; -import { ProfileImage } from "components/image/ProfileImage"; + +import { faEllipsisV, faExclamationCircle, faPersonToDoor, faTrash } from "@fortawesome/pro-solid-svg-icons"; import { isAxiosError } from "axios"; -import { handleAxiosError } from "lib/client/axios"; -import { PasswordChangeDialog } from "components/dialog/PasswordChangeDialog"; -import { Menu, MenuContent, MenuItem, MenuTrigger } from "components/menu/Menu"; -import { Listbox, ListboxOption } from "components/listbox/Listbox"; -import { UserInformationDialog } from "../../components/dialog/UserInformationDialog"; +import gql from "graphql-tag"; +import useSWR from "swr"; + +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { IconTextButton } from "@/components/button/IconTextButton"; +import { Card } from "@/components/card/Card"; +import PlaylistSummaryCard from "@/components/card/PlaylistSummaryCard"; +import { SummaryCard } from "@/components/card/SummaryCard"; +import { ThemeSummaryCard } from "@/components/card/ThemeSummaryCard"; +import { LoginDialog } from "@/components/dialog/LoginDialog"; +import { PasswordChangeDialog } from "@/components/dialog/PasswordChangeDialog"; +import { PlaylistAddDialog } from "@/components/dialog/PlaylistAddDialog"; +import { PlaylistRemoveDialog } from "@/components/dialog/PlaylistRemoveDialog"; +import { RegisterDialog } from "@/components/dialog/RegisterDialog"; +import { UserInformationDialog } from "@/components/dialog/UserInformationDialog"; +import { Icon } from "@/components/icon/Icon"; +import { ProfileImage } from "@/components/image/ProfileImage"; +import { Listbox, ListboxOption } from "@/components/listbox/Listbox"; +import { Menu, MenuContent, MenuItem, MenuTrigger } from "@/components/menu/Menu"; +import { SearchFilter } from "@/components/search-filter/SearchFilter"; +import { SearchFilterGroup } from "@/components/search-filter/SearchFilterGroup"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import { Busy } from "@/components/utils/Busy"; +import type { ProfilePageMeQuery, ProfilePageQuery } from "@/generated/graphql"; +import useAuth from "@/hooks/useAuth"; +import useLocalPlaylist from "@/hooks/useLocalPlaylist"; +import useSetting from "@/hooks/useSetting"; +import type { WatchHistory } from "@/hooks/useWatchHistory"; +import useWatchHistory from "@/hooks/useWatchHistory"; +import { fetchDataClient } from "@/lib/client"; +import { handleAxiosError } from "@/lib/client/axios"; +import { fetchData } from "@/lib/server"; +import theme from "@/theme"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import { ColorTheme, FeaturedThemePreview, ShowAnnouncements } from "@/utils/settings"; +import type { RequiredNonNullable } from "@/utils/types"; const StyledProfileGrid = styled.div` --columns: 2; diff --git a/src/pages/profile/playlist/index.tsx b/src/pages/profile/playlist/index.tsx index 16dbb24..c7ad25a 100644 --- a/src/pages/profile/playlist/index.tsx +++ b/src/pages/profile/playlist/index.tsx @@ -1,13 +1,26 @@ -import styled from "styled-components"; -import { Text } from "components/text"; -import { Column, Row } from "components/box"; -import { SidebarContainer } from "components/container"; -import { Card, ThemeSummaryCard } from "components/card"; -import useToggle from "hooks/useToggle"; import { useState } from "react"; -import { Button, FilterToggleButton } from "components/button"; -import { SearchFilterGroup, SearchFilterSortBy } from "components/search-filter"; -import { Collapse } from "components/utils"; +import styled from "styled-components"; + +import { faExclamationCircle } from "@fortawesome/pro-solid-svg-icons"; +import { Reorder } from "framer-motion"; + +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { FilterToggleButton } from "@/components/button/FilterToggleButton"; +import { Card } from "@/components/card/Card"; +import { ThemeSummaryCard } from "@/components/card/ThemeSummaryCard"; +import { fetchThemeSummaryCardData } from "@/components/card/ThemeSummaryCard"; +import { SidebarContainer } from "@/components/container/SidebarContainer"; +import { Icon } from "@/components/icon/Icon"; +import { MultiCoverImage } from "@/components/image/MultiCoverImage"; +import { SearchFilterGroup } from "@/components/search-filter/SearchFilterGroup"; +import { SearchFilterSortBy } from "@/components/search-filter/SearchFilterSortBy"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import { Collapse } from "@/components/utils/Collapse"; +import useLocalPlaylist from "@/hooks/useLocalPlaylist"; +import useToggle from "@/hooks/useToggle"; +import theme from "@/theme"; import { getComparator, SONG_A_Z, @@ -17,15 +30,7 @@ import { SONG_Z_A, SONG_Z_A_ANIME, UNSORTED -} from "utils/comparators"; -import { SEO } from "components/seo"; -import { Reorder } from "framer-motion"; -import useLocalPlaylist from "hooks/useLocalPlaylist"; -import theme from "theme"; -import { MultiCoverImage } from "components/image"; -import { faExclamationCircle } from "@fortawesome/pro-solid-svg-icons"; -import { Icon } from "components/icon"; -import { fetchThemeSummaryCardData } from "components/card/ThemeSummaryCard"; +} from "@/utils/comparators"; const StyledDesktopOnly = styled.div` gap: 24px; diff --git a/src/pages/profile/reset-password/index.tsx b/src/pages/profile/reset-password/index.tsx index 36a2c52..4167af5 100644 --- a/src/pages/profile/reset-password/index.tsx +++ b/src/pages/profile/reset-password/index.tsx @@ -1,4 +1,4 @@ -import { PasswordResetDialog } from "components/dialog/PasswordResetDialog"; +import { PasswordResetDialog } from "@/components/dialog/PasswordResetDialog"; export default function ResetPasswordPage() { return ( diff --git a/src/pages/search/[entity]/index.tsx b/src/pages/search/[entity]/index.tsx index f180f59..f6f0ae0 100644 --- a/src/pages/search/[entity]/index.tsx +++ b/src/pages/search/[entity]/index.tsx @@ -1,10 +1,16 @@ -import { SearchAnime, SearchArtist, SearchSeries, SearchStudio, SearchTheme } from "components/search"; -import { useRouter } from "next/router"; -import { SEO } from "components/seo"; -import { capitalize } from "lodash-es"; import type { GetStaticPaths, GetStaticProps } from "next"; +import { useRouter } from "next/router"; + +import { capitalize } from "lodash-es"; import type { ParsedUrlQuery } from "querystring"; -import { SearchPlaylist } from "components/search/SearchPlaylist"; + +import { SearchAnime } from "@/components/search/SearchAnime"; +import { SearchArtist } from "@/components/search/SearchArtist"; +import { SearchPlaylist } from "@/components/search/SearchPlaylist"; +import { SearchSeries } from "@/components/search/SearchSeries"; +import { SearchStudio } from "@/components/search/SearchStudio"; +import { SearchTheme } from "@/components/search/SearchTheme"; +import { SEO } from "@/components/seo/SEO"; const SEARCH_ENTITIES = [ "anime", "theme", "artist", "series", "studio", "playlist" ] as const; diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx index 6f18704..45e28b6 100644 --- a/src/pages/search/index.tsx +++ b/src/pages/search/index.tsx @@ -1,10 +1,12 @@ -import { SearchGlobal } from "components/search"; -import { Column, Row } from "components/box"; -import { faCompass, faSearch } from "@fortawesome/pro-solid-svg-icons"; -import { Text } from "components/text"; -import { Icon } from "components/icon"; import { useRouter } from "next/router"; -import { SEO } from "components/seo"; + +import { faCompass, faSearch } from "@fortawesome/pro-solid-svg-icons"; + +import { Column, Row } from "@/components/box/Flex"; +import { Icon } from "@/components/icon/Icon"; +import { SearchGlobal } from "@/components/search/SearchGlobal"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; export default function SearchGlobalPage() { const router = useRouter(); diff --git a/src/pages/series/[seriesSlug]/index.tsx b/src/pages/series/[seriesSlug]/index.tsx index d3dd3b0..5d6cd9c 100644 --- a/src/pages/series/[seriesSlug]/index.tsx +++ b/src/pages/series/[seriesSlug]/index.tsx @@ -1,26 +1,29 @@ -import { SidebarContainer } from "components/container"; -import styled from "styled-components"; -import { AnimeSummaryCard } from "components/card"; -import { Column, Row } from "components/box"; -import { Text } from "components/text"; -import { Collapse } from "components/utils"; -import useToggle from "hooks/useToggle"; import { memo, useMemo, useState } from "react"; -import { SearchFilterGroup, SearchFilterSortBy } from "components/search-filter"; -import { FilterToggleButton } from "components/button"; -import { ANIME_A_Z, ANIME_NEW_OLD, ANIME_OLD_NEW, ANIME_Z_A, getComparator } from "utils/comparators"; -import { fetchData } from "lib/server"; -import { SEO } from "components/seo"; -import theme from "theme"; -import { MultiCoverImage } from "components/image"; -import gql from "graphql-tag"; -import fetchStaticPaths from "utils/fetchStaticPaths"; -import getSharedPageProps from "utils/getSharedPageProps"; +import styled from "styled-components"; import type { GetStaticPaths, GetStaticProps } from "next"; -import type { RequiredNonNullable } from "utils/types"; -import type { SeriesDetailPageAllQuery, SeriesDetailPageQuery, SeriesDetailPageQueryVariables } from "generated/graphql"; + +import gql from "graphql-tag"; import type { ParsedUrlQuery } from "querystring"; +import { Column, Row } from "@/components/box/Flex"; +import { FilterToggleButton } from "@/components/button/FilterToggleButton"; +import { AnimeSummaryCard } from "@/components/card/AnimeSummaryCard"; +import { SidebarContainer } from "@/components/container/SidebarContainer"; +import { MultiCoverImage } from "@/components/image/MultiCoverImage"; +import { SearchFilterGroup } from "@/components/search-filter/SearchFilterGroup"; +import { SearchFilterSortBy } from "@/components/search-filter/SearchFilterSortBy"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import { Collapse } from "@/components/utils/Collapse"; +import type { SeriesDetailPageAllQuery, SeriesDetailPageQuery, SeriesDetailPageQueryVariables } from "@/generated/graphql"; +import useToggle from "@/hooks/useToggle"; +import { fetchData } from "@/lib/server"; +import theme from "@/theme"; +import { ANIME_A_Z, ANIME_NEW_OLD, ANIME_OLD_NEW, ANIME_Z_A, getComparator } from "@/utils/comparators"; +import fetchStaticPaths from "@/utils/fetchStaticPaths"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import type { RequiredNonNullable } from "@/utils/types"; + const StyledDesktopOnly = styled.div` gap: 24px; diff --git a/src/pages/series/index.tsx b/src/pages/series/index.tsx index 2e3e714..d71990d 100644 --- a/src/pages/series/index.tsx +++ b/src/pages/series/index.tsx @@ -1,14 +1,16 @@ import React from "react"; -import Link from "next/link"; -import { Text } from "components/text"; -import { AlphabeticalIndex } from "components/index"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; import type { GetStaticProps } from "next"; -import { fetchData } from "lib/server"; +import Link from "next/link"; + import gql from "graphql-tag"; -import type { SeriesIndexPageQuery } from "generated/graphql"; -import { BackToTopButton } from "components/button"; + +import { BackToTopButton } from "@/components/button/BackToTopButton"; +import { AlphabeticalIndex } from "@/components/index/AlphabeticalIndex"; +import { Text } from "@/components/text/Text"; +import type { SeriesIndexPageQuery } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; interface SeriesIndexPageProps extends SharedPageProps, SeriesIndexPageQuery {} diff --git a/src/pages/studio/[studioSlug]/index.tsx b/src/pages/studio/[studioSlug]/index.tsx index 30006b1..e1add81 100644 --- a/src/pages/studio/[studioSlug]/index.tsx +++ b/src/pages/studio/[studioSlug]/index.tsx @@ -1,13 +1,26 @@ -import { SidebarContainer } from "components/container"; -import styled from "styled-components"; -import { AnimeSummaryCard } from "components/card"; -import { Column, Row } from "components/box"; -import { Text } from "components/text"; -import { Collapse } from "components/utils"; import { memo, useMemo, useState } from "react"; -import { SearchFilterGroup, SearchFilterSortBy } from "components/search-filter"; -import useToggle from "hooks/useToggle"; -import { FilterToggleButton } from "components/button"; +import styled from "styled-components"; +import type { GetStaticPaths, GetStaticProps } from "next"; + +import gql from "graphql-tag"; +import type { ParsedUrlQuery } from "querystring"; + +import { Column, Row } from "@/components/box/Flex"; +import { FilterToggleButton } from "@/components/button/FilterToggleButton"; +import { AnimeSummaryCard } from "@/components/card/AnimeSummaryCard"; +import { SidebarContainer } from "@/components/container/SidebarContainer"; +import { DescriptionList } from "@/components/description-list/DescriptionList"; +import { ExternalLink } from "@/components/external-link/ExternalLink"; +import { StudioCoverImage } from "@/components/image/StudioCoverImage"; +import { SearchFilterGroup } from "@/components/search-filter/SearchFilterGroup"; +import { SearchFilterSortBy } from "@/components/search-filter/SearchFilterSortBy"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import { Collapse } from "@/components/utils/Collapse"; +import type { StudioDetailPageAllQuery, StudioDetailPageQuery, StudioDetailPageQueryVariables } from "@/generated/graphql"; +import useToggle from "@/hooks/useToggle"; +import { fetchData } from "@/lib/server"; +import theme from "@/theme"; import { ANIME_A_Z, ANIME_NEW_OLD, @@ -17,21 +30,11 @@ import { getComparator, resourceAsComparator, resourceSiteComparator, -} from "utils/comparators"; -import { fetchData } from "lib/server"; -import { DescriptionList } from "components/description-list"; -import { ExternalLink } from "components/external-link"; -import { SEO } from "components/seo"; -import theme from "theme"; -import gql from "graphql-tag"; -import fetchStaticPaths from "utils/fetchStaticPaths"; -import getSharedPageProps from "utils/getSharedPageProps"; -import type { GetStaticPaths, GetStaticProps } from "next"; -import type { RequiredNonNullable } from "utils/types"; -import type { StudioDetailPageAllQuery, StudioDetailPageQuery, StudioDetailPageQueryVariables } from "generated/graphql"; -import type { ParsedUrlQuery } from "querystring"; -import extractImages from "utils/extractImages"; -import { StudioCoverImage } from "components/image/StudioCoverImage"; +} from "@/utils/comparators"; +import extractImages from "@/utils/extractImages"; +import fetchStaticPaths from "@/utils/fetchStaticPaths"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import type { RequiredNonNullable } from "@/utils/types"; const StyledDesktopOnly = styled.div` @media (max-width: ${theme.breakpoints.mobileMax}) { diff --git a/src/pages/studio/index.tsx b/src/pages/studio/index.tsx index 1017ca6..5c8f04d 100644 --- a/src/pages/studio/index.tsx +++ b/src/pages/studio/index.tsx @@ -1,14 +1,16 @@ import React from "react"; -import Link from "next/link"; -import { Text } from "components/text"; -import { AlphabeticalIndex } from "components/index"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; import type { GetStaticProps } from "next"; -import { fetchData } from "lib/server"; +import Link from "next/link"; + import gql from "graphql-tag"; -import type { StudioIndexPageQuery } from "generated/graphql"; -import { BackToTopButton } from "components/button"; + +import { BackToTopButton } from "@/components/button/BackToTopButton"; +import { AlphabeticalIndex } from "@/components/index/AlphabeticalIndex"; +import { Text } from "@/components/text/Text"; +import type { StudioIndexPageQuery } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; interface StudioIndexPageProps extends SharedPageProps, StudioIndexPageQuery {} diff --git a/src/pages/year/[year]/[season]/index.tsx b/src/pages/year/[year]/[season]/index.tsx index 814cdd5..a7b86cc 100644 --- a/src/pages/year/[year]/[season]/index.tsx +++ b/src/pages/year/[year]/[season]/index.tsx @@ -1,17 +1,19 @@ -import { AnimeSummaryCard } from "components/card"; -import { Text } from "components/text"; -import { Column } from "components/box"; -import { fetchData } from "lib/server"; -import { SEO } from "components/seo"; -import gql from "graphql-tag"; -import fetchStaticPaths from "utils/fetchStaticPaths"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; import type { GetStaticPaths, GetStaticProps } from "next"; -import type { SeasonDetailPageAllQuery, SeasonDetailPageQuery, SeasonDetailPageQueryVariables } from "generated/graphql"; -import type { ParsedUrlQuery } from "querystring"; -import type { RequiredNonNullable } from "utils/types"; + +import gql from "graphql-tag"; import { capitalize } from "lodash-es"; +import type { ParsedUrlQuery } from "querystring"; + +import { Column } from "@/components/box/Flex"; +import { AnimeSummaryCard } from "@/components/card/AnimeSummaryCard"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import type { SeasonDetailPageAllQuery, SeasonDetailPageQuery, SeasonDetailPageQueryVariables } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import fetchStaticPaths from "@/utils/fetchStaticPaths"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import type { RequiredNonNullable } from "@/utils/types"; const seasonOrder = [ "winter", "spring", "summer", "fall" ]; diff --git a/src/pages/year/[year]/index.tsx b/src/pages/year/[year]/index.tsx index bcbd12d..3deb32a 100644 --- a/src/pages/year/[year]/index.tsx +++ b/src/pages/year/[year]/index.tsx @@ -1,21 +1,23 @@ -import Link from "next/link"; -import { AnimeSummaryCard } from "components/card"; -import { Button } from "components/button"; -import { Column, Row } from "components/box"; -import { faChevronDown } from "@fortawesome/pro-solid-svg-icons"; -import { Icon } from "components/icon"; -import { Text } from "components/text"; -import { fetchData } from "lib/server"; -import { SEO } from "components/seo"; -import gql from "graphql-tag"; -import { ANIME_A_Z, getComparator } from "utils/comparators"; -import fetchStaticPaths from "utils/fetchStaticPaths"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; -import type { ParsedUrlQuery } from "querystring"; import type { GetStaticPaths, GetStaticProps } from "next"; -import type { YearDetailPageAllQuery, YearDetailPageQuery, YearDetailPageQueryVariables } from "generated/graphql"; -import type { RequiredNonNullable } from "utils/types"; +import Link from "next/link"; + +import { faChevronDown } from "@fortawesome/pro-solid-svg-icons"; +import gql from "graphql-tag"; +import type { ParsedUrlQuery } from "querystring"; + +import { Column, Row } from "@/components/box/Flex"; +import { Button } from "@/components/button/Button"; +import { AnimeSummaryCard } from "@/components/card/AnimeSummaryCard"; +import { Icon } from "@/components/icon/Icon"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import type { YearDetailPageAllQuery, YearDetailPageQuery, YearDetailPageQueryVariables } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import { ANIME_A_Z, getComparator } from "@/utils/comparators"; +import fetchStaticPaths from "@/utils/fetchStaticPaths"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; +import type { RequiredNonNullable } from "@/utils/types"; const seasonOrder = [ "winter", "spring", "summer", "fall" ]; diff --git a/src/pages/year/index.tsx b/src/pages/year/index.tsx index e20dc26..aa11ee4 100644 --- a/src/pages/year/index.tsx +++ b/src/pages/year/index.tsx @@ -1,16 +1,18 @@ import styled from "styled-components"; -import { fetchData } from "lib/server"; -import { SEO } from "components/seo"; -import type { SharedPageProps } from "utils/getSharedPageProps"; -import getSharedPageProps from "utils/getSharedPageProps"; -import gql from "graphql-tag"; -import type { YearIndexPageQuery } from "generated/graphql"; import type { GetStaticProps } from "next"; -import { TextLink } from "components/text/TextLink"; -import { Text } from "components/text"; -import { Card } from "components/card"; -import theme from "theme"; -import { BackToTopButton } from "components/button"; + +import gql from "graphql-tag"; + +import { BackToTopButton } from "@/components/button/BackToTopButton"; +import { Card } from "@/components/card/Card"; +import { SEO } from "@/components/seo/SEO"; +import { Text } from "@/components/text/Text"; +import { TextLink } from "@/components/text/TextLink"; +import type { YearIndexPageQuery } from "@/generated/graphql"; +import { fetchData } from "@/lib/server"; +import theme from "@/theme"; +import type { SharedPageProps } from "@/utils/getSharedPageProps"; +import getSharedPageProps from "@/utils/getSharedPageProps"; const StyledYearGrid = styled.div` display: grid; diff --git a/src/styles/global.ts b/src/styles/global.ts index 6f86bb3..508d54e 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -1,10 +1,11 @@ import { createGlobalStyle } from "styled-components"; -import { colors, shadows } from "theme/colors"; -import { darkColors, darkShadows } from "theme/colors/dark"; -import theme, { createCssDefinition } from "theme"; -import { defineColorTheme } from "styles/mixins"; import { Nunito } from "next/font/google"; +import { defineColorTheme } from "@/styles/mixins"; +import theme, { createCssDefinition } from "@/theme"; +import { colors, shadows } from "@/theme/colors"; +import { darkColors, darkShadows } from "@/theme/colors/dark"; + const nunito = Nunito({ subsets: ["latin"], weight: "variable" }); export default createGlobalStyle` diff --git a/src/styles/mixins.ts b/src/styles/mixins.ts index 96a0edf..c4851e7 100644 --- a/src/styles/mixins.ts +++ b/src/styles/mixins.ts @@ -1,5 +1,6 @@ import { css, keyframes } from "styled-components"; -import { Solid } from "components/box"; + +import { Solid } from "@/components/box/Solid"; const loadingAnimationKeyframes = keyframes` 50% { diff --git a/src/theme/colors/dark.ts b/src/theme/colors/dark.ts index 12cbcc7..e699301 100644 --- a/src/theme/colors/dark.ts +++ b/src/theme/colors/dark.ts @@ -1,5 +1,5 @@ -import type { Colors, Shadows } from "./index"; -import { colors } from "./index"; +import type { Colors, Shadows } from "@/theme/colors/index"; +import { colors } from "@/theme/colors/index"; export const darkColors: Colors = { ...colors, diff --git a/src/theme/index.ts b/src/theme/index.ts index 2d49172..055bfc0 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,5 +1,5 @@ -import type { Colors, Shadows } from "theme/colors"; -import { colors, shadows } from "theme/colors"; +import type { Colors, Shadows } from "@/theme/colors"; +import { colors, shadows } from "@/theme/colors"; interface Theme { breakpoints: { diff --git a/src/utils/comparators.ts b/src/utils/comparators.ts index a8a6fa8..4d740aa 100644 --- a/src/utils/comparators.ts +++ b/src/utils/comparators.ts @@ -1,5 +1,5 @@ -import type { Comparator } from "utils/types"; -import type { Anime, Entry, Resource, Series, Studio, Theme } from "generated/graphql"; +import type { Anime, Entry, Resource, Series, Studio, Theme } from "@/generated/graphql"; +import type { Comparator } from "@/utils/types"; const seasonOrder = [ "winter", diff --git a/src/utils/config.mjs b/src/utils/config.ts similarity index 97% rename from src/utils/config.mjs rename to src/utils/config.ts index e1bee64..0d103eb 100644 --- a/src/utils/config.mjs +++ b/src/utils/config.ts @@ -1,7 +1,6 @@ -// @ts-check - import pico from "picocolors"; -import { error, warn } from "./log.mjs"; + +import { error, warn } from "@/utils/log"; // Server-side @@ -49,18 +48,18 @@ function validateConfig() { } export { - SERVER_API_URL, - SERVER_API_KEY, ANALYZE, - MINIMAL_BUILD, - BASE_PATH, - CLIENT_API_URL, - VIDEO_URL, AUDIO_URL, AUTH_PATH, - STAGING, - VERBOSE_LOGS, AUTH_REFERER, + BASE_PATH, + CLIENT_API_URL, + MINIMAL_BUILD, PAGINATION_PAGE_SIZE, + SERVER_API_KEY, + SERVER_API_URL, + STAGING, validateConfig, + VERBOSE_LOGS, + VIDEO_URL, }; diff --git a/src/utils/createVideoSlug.ts b/src/utils/createVideoSlug.ts index 6f31a5e..6b16b03 100644 --- a/src/utils/createVideoSlug.ts +++ b/src/utils/createVideoSlug.ts @@ -1,12 +1,13 @@ -import gql from "graphql-tag"; import type { ASTNode } from "graphql"; +import gql from "graphql-tag"; + +import type { WatchListItem } from "@/context/playerContext"; import type { CreateVideoSlugEntryFragment, CreateVideoSlugThemeFragment, CreateVideoSlugVideoFragment -} from "generated/graphql"; -import type { VideoPageProps } from "pages/anime/[animeSlug]/[videoSlug]"; -import type { WatchListItem } from "context/playerContext"; +} from "@/generated/graphql"; +import type { VideoPageProps } from "@/pages/anime/[animeSlug]/[videoSlug]"; interface CreateVideoSlug { ( diff --git a/src/utils/devLog.ts b/src/utils/devLog.ts index dfb8895..72d7bc5 100644 --- a/src/utils/devLog.ts +++ b/src/utils/devLog.ts @@ -1,5 +1,5 @@ -import * as log from "utils/log.mjs"; -import { VERBOSE_LOGS } from "./config.mjs"; +import { VERBOSE_LOGS } from "@/utils/config"; +import * as log from "@/utils/log"; function info(...message: string[]) { logIfDevelopment(log.info, ...message); diff --git a/src/utils/extractImages.ts b/src/utils/extractImages.ts index 87f8df4..670e878 100644 --- a/src/utils/extractImages.ts +++ b/src/utils/extractImages.ts @@ -1,6 +1,7 @@ -import gql from "graphql-tag"; import type { ASTNode } from "graphql"; -import type { ExtractImagesResourceWithImagesFragment } from "generated/graphql"; +import gql from "graphql-tag"; + +import type { ExtractImagesResourceWithImagesFragment } from "@/generated/graphql"; interface ExtractImages { (resourcesWithImages?: ExtractImagesResourceWithImagesFragment | null): ExtractImagesResult diff --git a/src/utils/fetchStaticPaths.ts b/src/utils/fetchStaticPaths.ts index caa511e..0012569 100644 --- a/src/utils/fetchStaticPaths.ts +++ b/src/utils/fetchStaticPaths.ts @@ -1,6 +1,7 @@ -import { MINIMAL_BUILD } from "utils/config.mjs"; import type { ParsedUrlQuery } from "querystring"; +import { MINIMAL_BUILD } from "@/utils/config"; + export default async function fetchStaticPaths( fetchPaths: () => Promise>, forceFullBuild = false diff --git a/src/utils/log.mjs b/src/utils/log.ts similarity index 51% rename from src/utils/log.mjs rename to src/utils/log.ts index 8bdb8df..8e26a2c 100644 --- a/src/utils/log.mjs +++ b/src/utils/log.ts @@ -1,24 +1,13 @@ -// @ts-check - import pico from "picocolors"; -/** - * @param {...any} message - */ -export function error(...message) { +export function error(...message: any) { console.error(" " + pico.red(pico.bold("⨯")), ...message); } -/** - * @param {...any} message - */ -export function warn(...message) { +export function warn(...message: any) { console.warn(" " + pico.yellow(pico.bold("⚠")), ...message); } -/** - * @param {...any} message - */ -export function info(...message) { +export function info(...message: any) { console.warn(" " + pico.white(pico.bold(" ")), ...message); } diff --git a/src/utils/rehypeExtractHeadings.ts b/src/utils/rehypeExtractHeadings.ts index d3d8712..713a4d9 100644 --- a/src/utils/rehypeExtractHeadings.ts +++ b/src/utils/rehypeExtractHeadings.ts @@ -1,8 +1,8 @@ +import type { Root } from "hast"; import { hasProperty } from "hast-util-has-property"; import { headingRank } from "hast-util-heading-rank"; import { toString } from "hast-util-to-string"; import { visit } from "unist-util-visit"; -import type { Root } from "hast"; export interface Heading { text: string diff --git a/src/utils/serializeMarkdown.ts b/src/utils/serializeMarkdown.ts index 18b7438..3b5084e 100644 --- a/src/utils/serializeMarkdown.ts +++ b/src/utils/serializeMarkdown.ts @@ -1,10 +1,12 @@ import { serialize } from "next-mdx-remote/serialize"; -import remarkGfm from "remark-gfm"; -import rehypeSlug from "rehype-slug"; -import type { Heading } from "utils/rehypeExtractHeadings"; -import rehypeExtractHeadings from "utils/rehypeExtractHeadings"; -import type { Compatible } from "vfile"; + import rehypePrettyCode from "rehype-pretty-code"; +import rehypeSlug from "rehype-slug"; +import remarkGfm from "remark-gfm"; +import type { Compatible } from "vfile"; + +import type { Heading } from "@/utils/rehypeExtractHeadings"; +import rehypeExtractHeadings from "@/utils/rehypeExtractHeadings"; export default async function serializeMarkdown(markdown: Compatible) { const headings: Heading[] = []; diff --git a/src/utils/withBasePath.ts b/src/utils/withBasePath.ts index c453b28..509e6f0 100644 --- a/src/utils/withBasePath.ts +++ b/src/utils/withBasePath.ts @@ -1,4 +1,4 @@ -import { BASE_PATH } from "utils/config.mjs"; +import { BASE_PATH } from "@/utils/config"; export default function withBasePath(path: string) { return `${BASE_PATH}${path}`; diff --git a/tsconfig.json b/tsconfig.json index a6a0bf0..e261d9f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,9 @@ { "compilerOptions": { "baseUrl": "src", + "paths": { + "@/*": ["./*"] + }, "target": "es2017", "lib": [ "dom",