stellar · quietbits · Feb 21, 2024 · Feb 13, 2024 · Feb 14, 2024 · Feb 14, 2024
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\", \\\"version\\\": \\\"$(git describe --tags --always)\\\"};\" > src/generated/gitInfo.ts"
   },
   "dependencies": {
-    "@stellar/design-system": "^1.1.2",
+    "@stellar/design-system": "^2.0.0-beta.1",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18"

diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export default function CreateAccount() {
+  return <div>Create Account</div>;
+}
diff --git a/src/app/(sidebar)/account/fund/page.tsx b/src/app/(sidebar)/account/fund/page.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export default function FundAccount() {
+  return <div>Fund Account</div>;
+}
diff --git a/src/app/(sidebar)/account/page.tsx b/src/app/(sidebar)/account/page.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+export default function Account() {
+  return <div>Account content</div>;
+}
diff --git a/src/app/(sidebar)/account/template.tsx b/src/app/(sidebar)/account/template.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
+import { Routes } from "@/constants/routes";
+
+export default function AccountTemplate({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LayoutSidebarContent
+      sidebar={{
+        navItems: [
+          {
+            route: Routes.CREATE_ACCOUNT,
+            label: "Create Account",
+          },
+          {
+            route: Routes.FUND_ACCOUNT,
+            label: "Fund Account",
+          },
+        ],
+      }}
+    >
+      {children}
+    </LayoutSidebarContent>
+  );
+}
diff --git a/src/app/(sidebar)/layout.tsx b/src/app/(sidebar)/layout.tsx
@@ -0,0 +1,5 @@
+import { LayoutWithSidebar } from "@/components/layout/LayoutWithSidebar";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <LayoutWithSidebar>{children}</LayoutWithSidebar>;
+}
diff --git a/src/app/globals.scss b/src/app/globals.scss
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,11 @@
 import type { Metadata } from "next";
 
-import { MainLayout } from "./ui/MainLayout";
+import { LayoutMain } from "@/components/layout/LayoutMain";
 
 import "@stellar/design-system/build/styles.min.css";
-import "./globals.scss";
+import "@/styles/globals.scss";
 
+// TODO: update metadata
 export const metadata: Metadata = {
   title: "Laboratory - Stellar",
   description: "",
@@ -18,8 +19,8 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <div id="root">
-          <MainLayout>{children}</MainLayout>
+        <div id="root" className="LabLayout">
+          <LayoutMain>{children}</LayoutMain>
         </div>
       </body>
     </html>

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import Link from "next/link";
+
+import { Routes } from "@/constants/routes";
+import { LayoutContentContainer } from "@/components/layout/LayoutContentContainer";
+
+// TODO: update 404
+export default function NotFound() {
+  return (
+    <LayoutContentContainer>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+      <Link href={Routes.ROOT}>Return Home</Link>
+    </LayoutContentContainer>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,11 @@
 "use client";
 
-import { Layout } from "@stellar/design-system";
+import { LayoutContentContainer } from "@/components/layout/LayoutContentContainer";
 
-export default function Home() {
-  return <Layout.Inset>Page</Layout.Inset>;
+export default function Introduction() {
+  return (
+    <LayoutContentContainer>
+      <div>Introduction</div>
+    </LayoutContentContainer>
+  );
 }
diff --git a/src/app/ui/MainLayout.tsx b/src/app/ui/MainLayout.tsx
diff --git a/src/components/MainNav.tsx b/src/components/MainNav.tsx
@@ -0,0 +1,73 @@
+import { usePathname, useSearchParams } from "next/navigation";
+
+import { Routes } from "@/constants/routes";
+import { NextLink } from "@/components/NextLink";
+
+type NavLink = {
+  href: Routes | string;
+  label: string;
+};
+
+const primaryNavLinks: NavLink[] = [
+  {
+    href: Routes.ROOT,
+    label: "Introduction",
+  },
+  {
+    href: Routes.CREATE_ACCOUNT,
+    label: "Account",
+  },
+  {
+    href: Routes.EXPLORE_ENDPOINTS,
+    label: "Explore Endpoints",
+  },
+];
+
+const secondaryNavLinks: NavLink[] = [
+  {
+    href: "https://developers.stellar.org/docs",
+    label: "View Documentation",
+  },
+];
+
+export const MainNav = () => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  console.log(">>> pathname: ", pathname);
+  console.log(">>> searchParams: ", searchParams.toString());
+
+  const isActiveRoute = (link: string) => {
+    if (link.startsWith("http")) {
+      return false;
+    }
+
+    return pathname.split("/")[1] === link.split("/")[1];
+  };
+
+  const NavItem = ({ link }: { link: NavLink }) => (
+    <NextLink
+      href={link.href}
+      className={`NavLink ${isActiveRoute(link.href) ? "NavLink--active" : ""}`}
+    >
+      {link.label}
+    </NextLink>
+  );
+
+  return (
+    <nav className="LabLayout__header__nav">
+      {/* Primary nav links */}
+      <div className="LabLayout__header__nav--primary">
+        {primaryNavLinks.map((l) => (
+          <NavItem key={l.href} link={l} />
+        ))}
+      </div>
+      {/* Secondary nav links */}
+      <div className="LabLayout__header__nav--secondary">
+        {secondaryNavLinks.map((sl) => (
+          <NavItem key={sl.href} link={sl} />
+        ))}
+      </div>
+    </nav>
+  );
+};
diff --git a/src/components/NextLink.tsx b/src/components/NextLink.tsx
@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+import Link from "next/link";
+
+type LinkProps = ComponentProps<typeof Link>;
+
+/** `NextLink` is extended `next/link`. */
+export const NextLink = (props: LinkProps) => {
+  const externalLinkProps = (href: string) => {
+    const isExternalLink = href?.startsWith("http") || href?.startsWith("//");
+
+    return isExternalLink
+      ? { rel: "noreferrer noopener", target: "_blank" }
+      : {};
+  };
+
+  return <Link {...props} {...externalLinkProps(props.href.toString())} />;
+};
diff --git a/src/components/SdsLink.tsx b/src/components/SdsLink.tsx
@@ -0,0 +1,11 @@
+import NextLink from "next/link";
+import { Props as LinkProps, Link } from "@stellar/design-system";
+
+/** Use `SdsLink` instead of `Link` from Stellar Design System to support client-side routing. `SdsLink` uses `next/link` internally. */
+export const SdsLink = (props: LinkProps) => {
+  return (
+    <Link {...props} customAnchor={<NextLink href={props.href || ""} />}>
+      {props.children}
+    </Link>
+  );
+};
diff --git a/src/components/layout/LayoutContentContainer.tsx b/src/components/layout/LayoutContentContainer.tsx
@@ -0,0 +1,9 @@
+export const LayoutContentContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => (
+  <div className="LabLayout__container">
+    <div className="LabLayout__content">{children}</div>
+  </div>
+);
diff --git a/src/components/layout/LayoutMain.tsx b/src/components/layout/LayoutMain.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { ReactNode } from "react";
+import Link from "next/link";
+
+import { ProjectLogo, ThemeSwitch } from "@stellar/design-system";
+
+import { MainNav } from "@/components/MainNav";
+
+export const LayoutMain = ({ children }: { children: ReactNode }) => {
+  return (
+    <>
+      <div className="LabLayout__header">
+        <header className="LabLayout__header__main">
+          <ProjectLogo
+            title="Laboratory"
+            link="/"
+            customAnchor={<Link href="/" />}
+          />
+
+          <div className="LabLayout__header__settings">
+            <ThemeSwitch storageKeyId="stellarTheme:Laboratory" />
+          </div>
+        </header>
+        <MainNav />
+      </div>
+
+      {children}
+    </>
+  );
+};
diff --git a/src/components/layout/LayoutSidebarContent.tsx b/src/components/layout/LayoutSidebarContent.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { ReactNode } from "react";
+import { usePathname } from "next/navigation";
+import { Icon } from "@stellar/design-system";
+import { Routes } from "@/constants/routes";
+import { NextLink } from "@/components/NextLink";
+
+export type SidebarLink = {
+  route: Routes | string;
+  label: string;
+  icon?: ReactNode;
+  nestedItems?: SidebarLink[];
+};
+
+export type Sidebar = {
+  navItems: SidebarLink[];
+  instruction?: string;
+  bottomItems?: SidebarLink[];
+};
+
+export const LayoutSidebarContent = ({
+  children,
+  sidebar,
+}: {
+  children: ReactNode;
+  sidebar: Sidebar;
+}) => {
+  const pathname = usePathname();
+
+  const Link = ({ item }: { item: SidebarLink }) => (
+    <NextLink
+      href={item.route}
+      className={`SidebarLink ${
+        pathname === item.route ? "SidebarLink--active" : ""
+      }`}
+    >
+      {item.icon ?? null} {item.label}
+    </NextLink>
+  );
+
+  return (
+    <>
+      <div className="LabLayout__sidebar">
+        <div className="LabLayout__sidebar--top">
+          {sidebar.instruction ? (
+            <div className="LabLayout__sidebar__instruction">
+              {sidebar.instruction}
+            </div>
+          ) : null}
+
+          {/* TODO: render nested items */}
+          {sidebar.navItems.map((item) => (
+            <Link key={item.route} item={item} />
+          ))}
+        </div>
+        <div
+          className={`LabLayout__sidebar--bottom ${
+            sidebar.bottomItems?.length
+              ? "LabLayout__sidebar--bottom--border"
+              : ""
+          }`}
+        >
+          <div className="LabLayout__sidebar__wrapper">
+            {sidebar.bottomItems?.map((bi) => (
+              <Link key={bi.route} item={bi} />
+            ))}
+          </div>
+          <div className="LabLayout__sidebar__wrapper">
+            <NextLink href="https://stellar.org" className="SidebarLink">
+              <Icon.MessageTextSquare02 /> Got product feedback?
+            </NextLink>
+          </div>
+        </div>
+      </div>
+      <div className="LabLayout__container">
+        <div className="LabLayout__content">{children}</div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/layout/LayoutWithSidebar.tsx b/src/components/layout/LayoutWithSidebar.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { ReactNode } from "react";
+
+export const LayoutWithSidebar = ({ children }: { children: ReactNode }) => {
+  return <div className="LabLayout__withSidebar">{children}</div>;
+};
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
@@ -0,0 +1,10 @@
+export enum Routes {
+  ROOT = "/",
+  // Account
+  CREATE_ACCOUNT = "/account/create",
+  FUND_ACCOUNT = "/account/fund",
+  CREATE_MUXED_ACCOUNT = "/account/muxed-create",
+  PARSE_MUXED_ACCOUNT = "/account/muxed-parse",
+  // Explore Endpoints
+  EXPLORE_ENDPOINTS = "/explore-endpoints",
+}