From 77913a36885b7c9058c958f09229796c844a324c Mon Sep 17 00:00:00 2001 From: mbaharip <62494292+mbahArip@users.noreply.github.com> Date: Sun, 31 Mar 2024 00:38:18 +0700 Subject: [PATCH] basic layout --- .prettierrc.js | 8 +- README.md | 10 + components.json | 17 + next.config.js | 55 +- package.json | 69 +- src/{pages => _pages}/404.tsx | 0 src/{pages => _pages}/[...path]/index.tsx | 0 src/{pages => _pages}/_app.tsx | 74 +- src/{pages => _pages}/_document.tsx | 0 src/{pages => _pages}/index.tsx | 0 src/app/@explorer.tsx | 151 + src/app/@file.grid.tsx | 115 + src/app/@file.list.tsx | 180 + src/app/@footer.tsx | 42 + src/app/@header.breadcrumb.tsx | 181 + src/app/@header.button.tsx | 97 + src/app/@header.title.tsx | 25 + src/app/@header.tsx | 45 + .../Markdown/index.tsx => app/@markdown.tsx} | 118 +- src/app/@navbar.tsx | 495 + src/app/@password.tsx | 118 + .../_internal_/thumb/[encryptedId]/route.ts | 10 + src/app/actions.ts | 268 + src/app/api/getData/route.ts | 262 +- src/app/api/thumb/[encryptedId]/route.ts | 37 + src/app/api/thumb/route.ts | 7 + src/app/globals.css | 117 + src/app/highlight.css | 472 + src/app/layout.tsx | 138 + src/app/loading.tsx | 22 + src/app/markdown.css | 107 + src/app/page.tsx | 56 + src/app/theme-provider.tsx | 37 + src/components/Alert/index.tsx | 53 - src/components/Breadcrumb/index.tsx | 165 - src/components/Button/index.tsx | 121 - src/components/ButtonGroup/index.tsx | 36 - src/components/ButtonIcon/index.tsx | 58 - src/components/ClickAway/index.tsx | 38 - src/components/File/GridItem/index.tsx | 233 - src/components/File/ListItem/index.tsx | 232 - src/components/Icon/index.tsx | 19 + src/components/Layout/Explorer/Grid.tsx | 34 - src/components/Layout/Explorer/List.tsx | 34 - src/components/Layout/Explorer/index.tsx | 240 - src/components/Layout/Header/index.tsx | 259 - src/components/Layout/Loader/index.tsx | 188 - src/components/Layout/Password/index.tsx | 88 - src/components/Layout/Preview/index.tsx | 306 - src/components/Modal/index.tsx | 124 - src/components/Preview/Audio.tsx | 31 - src/components/Preview/Code.tsx | 55 - src/components/Preview/Document.tsx | 59 - src/components/Preview/Error.tsx | 24 - src/components/Preview/Image.tsx | 82 - src/components/Preview/Manga.tsx | 124 - src/components/Preview/Rich.tsx | 52 - src/components/Preview/Unknown.tsx | 12 - src/components/Preview/Video.tsx | 36 - src/components/Tooltip/index.tsx | 99 - src/components/ui/breadcrumb.tsx | 115 + src/components/ui/button.tsx | 56 + src/components/ui/card.tsx | 79 + src/components/ui/dialog.tsx | 122 + src/components/ui/drawer.tsx | 118 + src/components/ui/dropdown-menu.tsx | 200 + src/components/ui/input.tsx | 25 + src/components/ui/menubar.tsx | 236 + src/components/ui/select.tsx | 160 + src/components/ui/separator.tsx | 31 + src/components/ui/sheet.tsx | 140 + src/components/ui/skeleton.tsx | 15 + src/components/ui/table.tsx | 117 + src/components/ui/toast.tsx | 129 + src/components/ui/toaster.tsx | 35 + src/components/ui/tooltip.tsx | 30 + src/components/ui/use-toast.ts | 190 + src/config/gIndex.config.ts | 154 +- src/context/layoutContext.tsx | 14 +- src/hooks/useMediaQuery.ts | 21 + src/schema.ts | 34 + src/styles/globals.css | 17 - src/types/constant.ts | 1 + src/utils.ts | 6 + src/utils/durationFormat.ts | 19 +- src/utils/encryptionHelper/hash.ts | 23 +- src/utils/gdriveInstance.ts | 11 +- src/utils/previewHelper.ts | 111 +- src/utils/tokenHelper.ts | 14 +- tailwind.config.js | 104 - tailwind.config.ts | 90 + tsconfig.json | 16 +- yarn.lock | 14236 ++++++++++------ 93 files changed, 14471 insertions(+), 8333 deletions(-) create mode 100644 components.json rename src/{pages => _pages}/404.tsx (100%) rename src/{pages => _pages}/[...path]/index.tsx (100%) rename src/{pages => _pages}/_app.tsx (75%) rename src/{pages => _pages}/_document.tsx (100%) rename src/{pages => _pages}/index.tsx (100%) create mode 100644 src/app/@explorer.tsx create mode 100644 src/app/@file.grid.tsx create mode 100644 src/app/@file.list.tsx create mode 100644 src/app/@footer.tsx create mode 100644 src/app/@header.breadcrumb.tsx create mode 100644 src/app/@header.button.tsx create mode 100644 src/app/@header.title.tsx create mode 100644 src/app/@header.tsx rename src/{components/Markdown/index.tsx => app/@markdown.tsx} (55%) create mode 100644 src/app/@navbar.tsx create mode 100644 src/app/@password.tsx create mode 100644 src/app/_internal_/thumb/[encryptedId]/route.ts create mode 100644 src/app/actions.ts create mode 100644 src/app/api/thumb/[encryptedId]/route.ts create mode 100644 src/app/api/thumb/route.ts create mode 100644 src/app/globals.css create mode 100644 src/app/highlight.css create mode 100644 src/app/layout.tsx create mode 100644 src/app/loading.tsx create mode 100644 src/app/markdown.css create mode 100644 src/app/page.tsx create mode 100644 src/app/theme-provider.tsx delete mode 100644 src/components/Alert/index.tsx delete mode 100644 src/components/Breadcrumb/index.tsx delete mode 100644 src/components/Button/index.tsx delete mode 100644 src/components/ButtonGroup/index.tsx delete mode 100644 src/components/ButtonIcon/index.tsx delete mode 100644 src/components/ClickAway/index.tsx delete mode 100644 src/components/File/GridItem/index.tsx delete mode 100644 src/components/File/ListItem/index.tsx create mode 100644 src/components/Icon/index.tsx delete mode 100644 src/components/Layout/Explorer/Grid.tsx delete mode 100644 src/components/Layout/Explorer/List.tsx delete mode 100644 src/components/Layout/Explorer/index.tsx delete mode 100644 src/components/Layout/Header/index.tsx delete mode 100644 src/components/Layout/Loader/index.tsx delete mode 100644 src/components/Layout/Password/index.tsx delete mode 100644 src/components/Layout/Preview/index.tsx delete mode 100644 src/components/Modal/index.tsx delete mode 100644 src/components/Preview/Audio.tsx delete mode 100644 src/components/Preview/Code.tsx delete mode 100644 src/components/Preview/Document.tsx delete mode 100644 src/components/Preview/Error.tsx delete mode 100644 src/components/Preview/Image.tsx delete mode 100644 src/components/Preview/Manga.tsx delete mode 100644 src/components/Preview/Rich.tsx delete mode 100644 src/components/Preview/Unknown.tsx delete mode 100644 src/components/Preview/Video.tsx delete mode 100644 src/components/Tooltip/index.tsx create mode 100644 src/components/ui/breadcrumb.tsx create mode 100644 src/components/ui/button.tsx create mode 100644 src/components/ui/card.tsx create mode 100644 src/components/ui/dialog.tsx create mode 100644 src/components/ui/drawer.tsx create mode 100644 src/components/ui/dropdown-menu.tsx create mode 100644 src/components/ui/input.tsx create mode 100644 src/components/ui/menubar.tsx create mode 100644 src/components/ui/select.tsx create mode 100644 src/components/ui/separator.tsx create mode 100644 src/components/ui/sheet.tsx create mode 100644 src/components/ui/skeleton.tsx create mode 100644 src/components/ui/table.tsx create mode 100644 src/components/ui/toast.tsx create mode 100644 src/components/ui/toaster.tsx create mode 100644 src/components/ui/tooltip.tsx create mode 100644 src/components/ui/use-toast.ts create mode 100644 src/hooks/useMediaQuery.ts create mode 100644 src/schema.ts create mode 100644 src/utils.ts delete mode 100644 tailwind.config.js create mode 100644 tailwind.config.ts diff --git a/.prettierrc.js b/.prettierrc.js index 99bcabb..cbd437c 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,10 +1,7 @@ "use strict"; module.exports = { - plugins: [ - require("prettier-plugin-tailwindcss"), - require("@trivago/prettier-plugin-sort-imports"), - ], - printWidth: 120, + plugins: [require("@trivago/prettier-plugin-sort-imports"), require("prettier-plugin-tailwindcss")], + printWidth: 80, tabWidth: 2, useTabs: false, semi: true, @@ -30,4 +27,5 @@ module.exports = { ], importOrderSeparation: true, importOrderSortSpecifiers: true, + tailwindFunctions: ["twsx", "cn"], }; diff --git a/README.md b/README.md index 08b2e18..a4f2f6b 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,16 @@ FAQ

+## Version 2 + +It seems there are some bugs on mobile devices that prevent the files list from rendering properly. So I will use this chance to upgrade the project to `Next.js 14`, use `shadcn/ui`, and also add some new features. + +Here's what changed in version 2: + +- Upgrade to `Next.js 14` app directory structure. +- Use `shadcn/ui` for the UI components. +- Add light and dark mode. + ## What is this? `next-gdrive-index` is an indexer for Google Drive, it's a simple project that I made to index my files in Google Drive. diff --git a/components.json b/components.json new file mode 100644 index 0000000..e048066 --- /dev/null +++ b/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "src/app/globals.css", + "baseColor": "zinc", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "~/components", + "utils": "~/utils" + } +} diff --git a/next.config.js b/next.config.js index 8851780..9f61070 100644 --- a/next.config.js +++ b/next.config.js @@ -1,34 +1,35 @@ /** @type {import('next').NextConfig} */ -const withMDX = require("@next/mdx")({ - extension: /\.mdx?$/, - options: { - // If you use remark-gfm, you'll need to use next.config.mjs - // as the package is ESM only - // https://github.com/remarkjs/remark-gfm#install - remarkPlugins: [], - rehypePlugins: [], - // If you use `MDXProvider`, uncomment the following line. - providerImportSource: "@mdx-js/react", - }, -}); +// const withMDX = require("@next/mdx")({ +// extension: /\.mdx?$/, +// options: { +// // If you use remark-gfm, you'll need to use next.config.mjs +// // as the package is ESM only +// // https://github.com/remarkjs/remark-gfm#install +// remarkPlugins: [], +// rehypePlugins: [], +// // If you use `MDXProvider`, uncomment the following line. +// providerImportSource: "@mdx-js/react", +// }, +// }); const nextConfig = { - pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"], + // pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"], reactStrictMode: true, - async headers() { - return [ - { - source: "/:path*", - headers: [ - { - key: "Cache-Control", - value: "max-age=300, s-maxage=300, stale-while-revalidate, public", - }, - ], - }, - ]; - }, + // async headers() { + // return [ + // { + // source: "/:path*", + // headers: [ + // { + // key: "Cache-Control", + // value: "max-age=300, s-maxage=300, stale-while-revalidate, public", + // }, + // ], + // }, + // ]; + // }, }; -module.exports = withMDX(nextConfig); +// module.exports = withMDX(nextConfig); +module.exports = nextConfig; diff --git a/package.json b/package.json index 5e77880..ffebd8e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "drive-manager", - "version": "0.1.0", + "name": "next-gdrive-index", + "version": "2.0.0", "private": true, "scripts": { "dev": "next dev -p 3000", @@ -12,24 +12,59 @@ }, "dependencies": { "@cyntler/react-doc-viewer": "^1.13.0", - "@iconify/react": "^4.1.1", - "@mdx-js/loader": "^2.3.0", - "@mdx-js/react": "^2.3.0", - "@next/mdx": "^13.4.19", - "@popperjs/core": "^2.11.8", + "@hookform/resolvers": "^3.3.4", + "@radix-ui/react-accordion": "^1.1.2", + "@radix-ui/react-alert-dialog": "^1.0.5", + "@radix-ui/react-aspect-ratio": "^1.0.3", + "@radix-ui/react-avatar": "^1.0.4", + "@radix-ui/react-checkbox": "^1.0.4", + "@radix-ui/react-collapsible": "^1.0.3", + "@radix-ui/react-context-menu": "^2.1.5", + "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-dropdown-menu": "^2.0.6", + "@radix-ui/react-hover-card": "^1.0.7", + "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-menubar": "^1.0.4", + "@radix-ui/react-navigation-menu": "^1.1.4", + "@radix-ui/react-popover": "^1.0.7", + "@radix-ui/react-progress": "^1.0.3", + "@radix-ui/react-radio-group": "^1.1.3", + "@radix-ui/react-scroll-area": "^1.0.5", + "@radix-ui/react-select": "^2.0.0", + "@radix-ui/react-separator": "^1.0.3", + "@radix-ui/react-slider": "^1.1.2", + "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-switch": "^1.0.3", + "@radix-ui/react-tabs": "^1.0.4", + "@radix-ui/react-toast": "^1.1.5", + "@radix-ui/react-toggle": "^1.0.3", + "@radix-ui/react-toggle-group": "^1.0.4", + "@radix-ui/react-tooltip": "^1.0.7", "axios": "^1.3.5", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.0", + "cmdk": "^1.0.0", + "date-fns": "^3.6.0", + "embla-carousel-react": "^8.0.0", "googleapis": "^118.0.0", + "input-otp": "^1.2.3", "jsonwebtoken": "^9.0.0", "jszip": "^3.10.1", - "next": "^13.4.13", - "next-seo": "^6.1.0", + "lucide-react": "^0.363.0", + "next": "^14.1.4", + "next-themes": "^0.3.0", + "nextjs-toploader": "^1.6.11", "react": "^18.2.0", + "react-day-picker": "^8.10.0", "react-dom": "^18.2.0", "react-h5-audio-player": "^3.8.6", + "react-hook-form": "^7.51.2", + "react-hot-toast": "^2.4.1", "react-is": "^18.2.0", "react-markdown": "^8.0.7", "react-player": "^2.13.0", "react-popper": "^2.3.0", + "react-resizable-panels": "^2.0.16", "react-toastify": "^9.1.3", "rehype-katex": "^6.0.3", "rehype-prism-plus": "^1.6.3", @@ -37,7 +72,12 @@ "remark-gfm": "^3.0.1", "remark-math": "^5.1.1", "remark-slug": "^7.0.1", - "remark-toc": "^8.0.1" + "remark-toc": "^8.0.1", + "sonner": "^1.4.41", + "tailwind-merge": "^2.2.2", + "tailwindcss-animate": "^1.0.7", + "vaul": "^0.9.0", + "zod": "^3.22.4" }, "devDependencies": { "@faker-js/faker": "^8.0.2", @@ -50,15 +90,14 @@ "@types/react": "18.0.35", "@types/react-dom": "18.0.11", "@types/three": "^0.150.2", - "autoprefixer": "10.4.14", + "autoprefixer": "^10.4.19", "encoding": "^0.1.13", "eslint": "8.38.0", - "eslint-config-next": "^13.4.3", - "postcss": "8.4.22", + "eslint-config-next": "^14.1.4", + "postcss": "^8.4.38", "prettier": "^2.8.7", "prettier-plugin-tailwindcss": "^0.2.7", - "tailwind-merge": "^1.14.0", - "tailwindcss": "3.3.1", + "tailwindcss": "^3.4.1", "typescript": "5.0.4" } } diff --git a/src/pages/404.tsx b/src/_pages/404.tsx similarity index 100% rename from src/pages/404.tsx rename to src/_pages/404.tsx diff --git a/src/pages/[...path]/index.tsx b/src/_pages/[...path]/index.tsx similarity index 100% rename from src/pages/[...path]/index.tsx rename to src/_pages/[...path]/index.tsx diff --git a/src/pages/_app.tsx b/src/_pages/_app.tsx similarity index 75% rename from src/pages/_app.tsx rename to src/_pages/_app.tsx index 487b15c..2f1618a 100644 --- a/src/pages/_app.tsx +++ b/src/_pages/_app.tsx @@ -52,7 +52,8 @@ export default function App({ Component, pageProps }: AppProps) { const [showToTopButton, setShowToTopButton] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); - const [clearPasswordModalOpen, setClearPasswordModalOpen] = useState(false); + const [clearPasswordModalOpen, setClearPasswordModalOpen] = + useState(false); useEffect(() => { const handleScroll = () => { @@ -85,7 +86,7 @@ export default function App({ Component, pageProps }: AppProps) { return (
-