feat: Rework repo structure

Author: kvet

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf
+max_line_length = null

.eslintrc.js

@@ -0,0 +1,13 @@
+*       text eol=lf
+
+# images
+*.gif   binary
+*.jpg   binary
+*.png   binary
+*.svg   binary
+*.ico   binary
+
+# fonts
+*.eot   binary
+*.ttf   binary
+*.woff  binary

.gitattributes

@@ -1,17 +1,20 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# build
+.turbo
+.next
+build_production
+build_local
+
 # dependencies
 node_modules
-.pnp
-.pnp.js
-
-# testing
-coverage
-
-# next.js
-.next/
-out/
-build
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 
 # misc
 .DS_Store
@@ -21,13 +24,10 @@ build
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
+.env.development*.local
+.env.test*.local
+.env.production*.local
 
-# turbo
-.turbo

.gitignore

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { memo, useRef } from "react";
+
+function Breadcrumbs({
+  pathParts,
+}: {
+  pathParts: { title: string; path: string }[];
+}) {
+  const date = useRef(new Date(Date.now()).toLocaleString());
+
+  return (
+    <div className="border-b border-gray-300 pt-2 pb-4 px-8 group">
+      <div className="text-gray-600 text-xs text-start opacity-0 -mt-1 -mb-1 transition-opacity group-hover:opacity-100">
+        This is breadcrumbs. Note that it is not a "god" component. Data loading
+        is decoupled by the use of hooks inside the page layout.{" "}
+        <span className="text-gray-400">
+          (Breadcrumbs rendered at: {date.current})
+        </span>
+      </div>
+      <nav className="flex justify-start">
+        {!pathParts.length && (
+          <span className="text-gray-600 text-base animate-pulse">
+            Loading...
+          </span>
+        )}
+        {pathParts.map(({ title, path }) => (
+          <>
+            <Link key={path} href={path}>
+              <a className="text-gray-600 text-base underline">{title}</a>
+            </Link>
+            &nbsp;/&nbsp;
+          </>
+        ))}
+      </nav>
+    </div>
+  );
+}
+
+export default memo(Breadcrumbs);

apps/docs/next.config.js

@@ -0,0 +1,12 @@
+import { memo } from "react";
+
+import hljs from "highlight.js/lib/core";
+import typescript from "highlight.js/lib/languages/javascript";
+hljs.registerLanguage("typescript", typescript);
+import "highlight.js/styles/tokyo-night-dark.css";
+
+function Highlight({ children }: { children: string }) {
+  return <pre dangerouslySetInnerHTML={{ __html: hljs.highlight(children, { language: "typescript" }).value }} />;
+}
+
+export default memo(Highlight);

apps/docs/package.json

@@ -0,0 +1,20 @@
+import { memo, useCallback, useState } from "react";
+
+function Incrementer() {
+  const [count, setCount] = useState(0);
+  const increment = useCallback(() => setCount((c) => c + 1), []);
+
+  return (
+    <div className="flex items-center justify-center p-4 border-2 border-dashed border-gray-600 space-x-4">
+      <span className="text-gray-800 text-base">Current: {count}</span>
+      <button
+        className="p-2 text-gray-800 border border-gray-600 hover:border-gray-500 active:border-gray-800"
+        onClick={increment}
+      >
+        Increment
+      </button>
+    </div>
+  );
+}
+
+export default memo(Incrementer);

apps/docs/pages/index.tsx

@@ -0,0 +1,22 @@
+import { memo, ReactElement, ReactNode, useRef } from "react";
+
+function Layout({ children }: { children: ReactNode }): ReactElement {
+  const date = useRef(new Date(Date.now()).toLocaleString());
+
+  return (
+    <div>
+      {children}
+      <div className="border-t border-gray-300 py-4 px-8 text-gray-600 text-sm text-center">
+        This is a demo of the "
+        <span className="font-bold text-blue-600">@kvet/next-layout</span>"
+        package. Note that the layout component maintains its state on the route
+        change event.{" "}
+        <span className="text-gray-400">
+          (The layout rendered at: {date.current})
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default memo(Layout);

apps/docs/tsconfig.json

@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { memo, useRef } from "react";
+
+function Navbar() {
+  const date = useRef(new Date(Date.now()).toLocaleString());
+
+  return (
+    <div className="border-b border-gray-300 pt-2 pb-4 px-8 group">
+      <div className="text-gray-600 text-xs text-start opacity-0 -mt-1 -mb-1 transition-opacity group-hover:opacity-100">
+        This is a navbar. Note that a focused element maintains its state on the
+        route change event.
+        <span className="text-gray-400">(Layout rendered at: {date.current})</span>
+      </div>
+      <nav className="flex justify-center space-x-4">
+        <Link href="/">
+          <a className="text-gray-800 text-base underline">Main page</a>
+        </Link>
+        <Link href="/sidebar">
+          <a className="text-gray-800 text-base underline">Page with a sidebar</a>
+        </Link>
+        {/* <Link href="/sidebar/fullscreen">
+          <a className="text-gray-800 text-base underline">Nested page with a fullscreen layout</a>
+        </Link> */}
+      </nav>
+    </div>
+  );
+}
+
+export default memo(Navbar);

apps/web/.eslintrc.js

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { memo, ReactElement, ReactNode, useRef } from "react";
+
+function Sidebar({
+  paths,
+  children,
+}: {
+  paths: { title: string; path: string }[];
+  children: ReactNode;
+}): ReactElement {
+  const date = useRef(new Date(Date.now()).toLocaleString());
+
+  return (
+    <div className="flex flex-col-reverse md:flex-row">
+      <div className="md:w-64 flex-shrink-0 border-r border-gray-300 py-4 group">
+        <div className="text-center text-xs text-gray-600 opacity-0 transition-opacity group-hover:opacity-100">
+          This is a sidebar.{" "}
+          <span className="text-gray-400">(Rendered at: {date.current})</span>
+        </div>
+        <nav className="flex flex-col justify-start px-4 py-2 space-y-2">
+          {!paths.length && (
+            <span className="text-gray-600 text-base animate-pulse">
+              Loading...
+            </span>
+          )}
+          {paths.map(({ title, path }) => (
+            <>
+              <Link key={path} href={path}>
+                <a className="text-gray-600 text-sm underline">{title}</a>
+              </Link>
+            </>
+          ))}
+        </nav>
+      </div>
+      <div className="flex-grow flex-shrink">{children}</div>
+    </div>
+  );
+}
+
+export default memo(Sidebar);