refactor ui with template, using next.js app_router

lunar/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

lunar/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+# .env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+package-lock.json
+pnpm-lock.yaml

lunar/README.md

@@ -0,0 +1 @@
+## Lunar Module

lunar/next.config.js

@@ -0,0 +1,47 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+    reactStrictMode: true,
+    transpilePackages: [
+        // antd & deps
+        // https://github.com/vercel/next.js/issues/65707
+        // https://github.com/ant-design/ant-design/issues/46053#issuecomment-1905553667
+        "@ant-design",
+        "@rc-component",
+        "antd",
+        "rc-cascader",
+        "rc-checkbox",
+        "rc-collapse",
+        "rc-dialog",
+        "rc-drawer",
+        "rc-dropdown",
+        "rc-field-form",
+        "rc-image",
+        "rc-input",
+        "rc-input-number",
+        "rc-mentions",
+        "rc-menu",
+        "rc-motion",
+        "rc-notification",
+        "rc-pagination",
+        "rc-picker",
+        "rc-progress",
+        "rc-rate",
+        "rc-resize-observer",
+        "rc-segmented",
+        "rc-select",
+        "rc-slider",
+        "rc-steps",
+        "rc-switch",
+        "rc-table",
+        "rc-tabs",
+        "rc-textarea",
+        "rc-tooltip",
+        "rc-tree",
+        "rc-tree-select",
+        "rc-upload",
+        "rc-util",
+    ],
+}
+
+module.exports = nextConfig

lunar/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "moon",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.3.7",
+    "@ant-design/nextjs-registry": "^1.0.0",
+    "@headlessui/react": "^2.1.2",
+    "@headlessui/tailwindcss": "^0.2.1",
+    "@heroicons/react": "^2.1.3",
+    "@tailwindcss/forms": "^0.5.7",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.3.2",
+    "next": "14.2.3",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.3",
+    "postcss": "^8.4.31",
+    "typescript": "^5"
+  }
+}

lunar/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

lunar/src/app/application-layout.tsx

@@ -0,0 +1,182 @@
+'use client'
+
+import { Avatar } from '@/components/catalyst/avatar'
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownDivider,
+  DropdownItem,
+  DropdownLabel,
+  DropdownMenu,
+} from '@/components/catalyst/dropdown'
+import { Navbar, NavbarItem, NavbarSection, NavbarSpacer } from '@/components/catalyst/navbar'
+import {
+  Sidebar,
+  SidebarBody,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarHeading,
+  SidebarItem,
+  SidebarLabel,
+  SidebarSection,
+  SidebarSpacer,
+} from '@/components/catalyst/sidebar'
+import { SidebarLayout } from '@/components/catalyst/sidebar-layout'
+import {
+  ArrowRightStartOnRectangleIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  Cog8ToothIcon,
+  LightBulbIcon,
+  PlusIcon,
+  ShieldCheckIcon,
+  UserCircleIcon,
+} from '@heroicons/react/16/solid'
+import {
+  Cog6ToothIcon,
+  HomeIcon,
+  QuestionMarkCircleIcon,
+  SparklesIcon,
+  Square2StackIcon,
+  TicketIcon,
+} from '@heroicons/react/20/solid'
+import { usePathname } from 'next/navigation'
+
+function AccountDropdownMenu({ anchor }: { anchor: 'top start' | 'bottom end' }) {
+  return (
+    <DropdownMenu className="min-w-64" anchor={anchor}>
+      <DropdownItem href="#">
+        <UserCircleIcon />
+        <DropdownLabel>My account</DropdownLabel>
+      </DropdownItem>
+      <DropdownDivider />
+      <DropdownItem href="#">
+        <ShieldCheckIcon />
+        <DropdownLabel>Privacy policy</DropdownLabel>
+      </DropdownItem>
+      <DropdownItem href="#">
+        <LightBulbIcon />
+        <DropdownLabel>Share feedback</DropdownLabel>
+      </DropdownItem>
+      <DropdownDivider />
+      <DropdownItem href="#">
+        <ArrowRightStartOnRectangleIcon />
+        <DropdownLabel>Sign out</DropdownLabel>
+      </DropdownItem>
+    </DropdownMenu>
+  )
+}
+
+export function ApplicationLayout({
+  // events,
+  children,
+}: {
+  // events: Awaited<ReturnType<typeof getEvents>>
+  children: React.ReactNode
+}) {
+  let pathname = usePathname()
+
+  return (
+    <SidebarLayout
+      navbar={
+        <Navbar>
+          <NavbarSpacer />
+          <NavbarSection>
+            <Dropdown>
+              <DropdownButton as={NavbarItem}>
+                <Avatar src="/images/megaLogo.png" />
+              </DropdownButton>
+              <AccountDropdownMenu anchor="bottom end" />
+            </Dropdown>
+          </NavbarSection>
+        </Navbar>
+      }
+      sidebar={
+        <Sidebar>
+          <SidebarHeader>
+            <Dropdown>
+              <DropdownButton as={SidebarItem}>
+                <Avatar src="/images/megaLogo.png" />
+                <SidebarLabel>Mega</SidebarLabel>
+                <ChevronDownIcon />
+              </DropdownButton>
+              <DropdownMenu className="min-w-80 lg:min-w-64" anchor="bottom start">
+                <DropdownItem href="/settings">
+                  <Cog8ToothIcon />
+                  <DropdownLabel>Settings</DropdownLabel>
+                </DropdownItem>
+                <DropdownDivider />
+                <DropdownItem href="#">
+                  <Avatar slot="icon" initials="AD" className="bg-purple-500 text-white" />
+                  <DropdownLabel>Admin</DropdownLabel>
+                </DropdownItem>
+                <DropdownItem href="#">
+                  <Avatar slot="icon" initials="BE" className="bg-purple-500 text-white" />
+                  <DropdownLabel>Big Events</DropdownLabel>
+                </DropdownItem>
+                <DropdownDivider />
+                <DropdownItem href="#">
+                  <PlusIcon />
+                  <DropdownLabel>New team&hellip;</DropdownLabel>
+                </DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </SidebarHeader>
+
+          <SidebarBody>
+            <SidebarSection>
+              <SidebarItem href="/" current={pathname === '/'}>
+                <HomeIcon />
+                <SidebarLabel>Home</SidebarLabel>
+              </SidebarItem>
+              <SidebarItem href="/issue" current={pathname.startsWith('/issue')}>
+                <Square2StackIcon />
+                <SidebarLabel>Issue</SidebarLabel>
+              </SidebarItem>
+              <SidebarItem href="/mr" current={pathname.startsWith('/mr')}>
+                <TicketIcon />
+                <SidebarLabel>Merge Request</SidebarLabel>
+              </SidebarItem>
+              <SidebarItem href="/settings" current={pathname.startsWith('/settings')}>
+                <Cog6ToothIcon />
+                <SidebarLabel>Settings</SidebarLabel>
+              </SidebarItem>
+            </SidebarSection>
+            <SidebarSpacer />
+
+            <SidebarSection>
+              <SidebarItem href="#">
+                <QuestionMarkCircleIcon />
+                <SidebarLabel>Support</SidebarLabel>
+              </SidebarItem>
+              <SidebarItem href="#">
+                <SparklesIcon />
+                <SidebarLabel>Changelog</SidebarLabel>
+              </SidebarItem>
+            </SidebarSection>
+          </SidebarBody>
+
+          <SidebarFooter className="max-lg:hidden">
+            <Dropdown>
+              <DropdownButton as={SidebarItem}>
+                <span className="flex min-w-0 items-center gap-3">
+                  <Avatar slot="icon" initials="AD" className="size-10 bg-purple-500 text-white" />
+                  <span className="min-w-0">
+                    <span className="block truncate text-sm/5 font-medium text-zinc-950 dark:text-white">Admin</span>
+                    <span className="block truncate text-xs/5 font-normal text-zinc-500 dark:text-zinc-400">
+                      Admin@mega.com
+                    </span>
+                  </span>
+                </span>
+                <ChevronUpIcon />
+              </DropdownButton>
+              <AccountDropdownMenu anchor="top start" />
+            </Dropdown>
+          </SidebarFooter>
+        </Sidebar>
+      }
+    >
+      {children}
+    </SidebarLayout>
+  )
+}

lunar/src/app/layout.tsx

@@ -0,0 +1,24 @@
+'use client'
+import '@/styles/globals.css'
+import type React from 'react'
+import { ApplicationLayout } from './application-layout'
+import { AntdRegistry } from '@ant-design/nextjs-registry';
+
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+
+  return (
+    <html
+      lang="en"
+      className="text-zinc-950 antialiased lg:bg-zinc-100 dark:bg-zinc-900 dark:text-white dark:lg:bg-zinc-950"
+    >
+      <head>
+      </head>
+      <body>
+        <ApplicationLayout >
+          <AntdRegistry>{children}</AntdRegistry>
+        </ApplicationLayout>
+      </body>
+    </html>
+  )
+}