WIP: move area page to app dir

feat: create a separate area edit page to simplify the current area page

package.json

@@ -17,6 +17,7 @@
     "@lexical/react": "^0.7.5",
     "@math.gl/web-mercator": "3.6.2",
     "@openbeta/sandbag": "^0.0.48",
+    "@phosphor-icons/react": "^2.0.14",
     "@radix-ui/react-alert-dialog": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^2.0.1",
@@ -48,9 +49,9 @@
     "next-auth": "^4.22.1",
     "nprogress": "^0.2.0",
     "rc-slider": "^10.0.0-alpha.5",
-    "react": "^18.0.0",
+    "react": "^18.2.0",
     "react-content-loader": "^6.2.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.1",
     "react-hook-form": "^7.34.2",
     "react-hotkeys-hook": "^3.4.7",
@@ -63,6 +64,7 @@
     "react-use": "^17.4.0",
     "recharts": "^2.7.2",
     "simple-statistics": "^7.8.3",
+    "slugify": "^1.6.6",
     "swr": "^2.1.5",
     "tailwindcss-radix": "^2.5.0",
     "typesense": "^1.2.1",

src/app/components/ui/StickyHeaderContainer.tsx

@@ -0,0 +1,27 @@
+'use client'
+import { useRef, ReactNode } from 'react'
+import { useIntersection } from 'react-use'
+import clx from 'classnames'
+
+/**
+ * A container that becomes sticky when being scrolled to the top of the window.
+ * Useful for wrapper nav bar.
+ */
+export const StickyHeaderContainer: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const intersectionRef = useRef(null)
+  /**
+   * Creating an intersection hook to be notified when div reaches become 'sticky'
+   * aka reaches the top.
+   */
+  const intersection = useIntersection(intersectionRef, {
+    root: null,
+    rootMargin: '0px 0px -100% 0px'
+  })
+  const atTop = intersection?.isIntersecting ?? false
+
+  return (
+    <div ref={intersectionRef} className={clx('sticky top-0 z-40 py-2 lg:min-h-[4rem] block lg:flex lg:items-center lg:justify-between bg-base-100 -mx-6 px-6', atTop ? 'border-b bottom-shadow backdrop-blur-sm bg-opacity-90' : '')}>
+      {children}
+    </div>
+  )
+}

src/app/global.css

@@ -14,6 +14,16 @@ html {
   @apply font-sans text-base text-base-content bg-base-100;
 }
 
+.btn {
+  min-height: 2rem;
+  height: 2rem;  
+}
+
+.btn-md {
+  min-height: 2rem;
+  height: 2rem;
+}
+
 h1 {
     @apply text-base-content text-4xl lg:text-5xl tracking-tight;
 }
@@ -30,14 +40,15 @@ h3 {
   @apply sm:px-0 border-0 !important;
 }
 
-.hero-text-shadow {
-  text-shadow: 1px 1px 3px rgb(21, 8, 60);
+/* Layout for summary section of the area and climb page. 2 columns on desktop, normal stack div on mobile. */
+.area-climb-page-summary {
+  @apply mt-6 lg:grid lg:grid-cols-3 w-full;
+}
+
+.area-climb-page-summary-left {
+  @apply  lg:pr-8 border-base-content;
 }
 
-.rainbow-border {
-  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)) 50% 50%/calc(100% - 2px) calc(100% - 2px) no-repeat,
-            linear-gradient(0deg, #00a7f4 0%, transparent 70%),
-            radial-gradient(at 100% 0%, #00ff53 0%, transparent 70%),
-            #f15e40;
-  box-sizing: border-box;
+.area-climb-page-summary-right {
+  @apply mt-6 lg:mt-0 lg:col-span-2 lg:pl-16 w-full;
 }

src/components/crag/StickyHeader.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useRef, ReactNode } from 'react'
 import { useIntersection } from 'react-use'
 import clx from 'classnames'
 

src/components/media/PhotoMontage.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { useState, useEffect, memo, MouseEventHandler } from 'react'
 import Image from 'next/image'
 import clx from 'classnames'

src/components/ui/form/Input.tsx

@@ -101,3 +101,58 @@ export default function Input ({ label, labelAlt, unitLabel, unitLabelPlacement
 export const INPUT_DEFAULT_CSS = 'input input-primary input-bordered input-md focus:outline-0 focus:ring-1 focus:ring-primary'
 
 const AFFIX_DEFAULT_CSS = 'bg-default uppercase text-sm'
+
+export interface DashboardInputProps {
+  name: string
+  label: string
+  description: string
+  helper: string
+  placeholder?: string
+  disabled?: boolean
+  readOnly?: boolean
+  registerOptions?: RegisterOptions
+  type?: 'text' | 'number' | 'email'
+  spellCheck?: boolean
+  className?: string
+
+}
+
+export const DashboardInput: React.FC<DashboardInputProps> = ({ name, label, description, helper, placeholder, disabled = false, readOnly = false, registerOptions, type = 'text', spellCheck = false, className = '' }) => {
+  const formContext = useFormContext()
+  const { formState: { errors } } = formContext
+
+  const error = errors?.[name]
+  return (
+    <div className='card card-compact card-bordered border-base-300  overflow-hidden w-full'>
+      <div className='form-control'>
+        <div className='p-6 bg-base-100'>
+          <label className='flex flex-col items-start justify-start gap-2 pb-2' htmlFor={name}>
+            <h2 className='font-semibold text-2xl'>{label}</h2>
+            <span className='text-md'>{description}</span>
+          </label>
+          <BaseInput
+            name={name}
+            placeholder={placeholder}
+            className={clx(INPUT_DEFAULT_CSS, className)}
+            label={label}
+            disabled={disabled}
+            readOnly={readOnly}
+            formContext={formContext}
+            registerOptions={registerOptions}
+            type={type}
+            spellCheck={spellCheck}
+          />
+        </div>
+        {/* Footer */}
+        <div className='px-6 py-2 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 bg-base-200 border-t'>
+          <label className='label' id={`${name}-helper`} htmlFor={name}>
+            {error?.message != null &&
+           (<span className='text-error'>{error?.message as string}</span>)}
+            {(error == null) && <span className='text-base-content/60'>{helper}</span>}
+          </label>
+          <button className='btn btn-primary btn-solid w-full lg:w-fit' type='submit'>Save</button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/js/graphql/getArea.ts

@@ -0,0 +1,24 @@
+import { QUERY_AREA_BY_ID } from './gql/areaById'
+import { graphqlClient } from './Client'
+import { AreaType, ChangesetType } from '../types'
+
+export interface AreaPageDataProps {
+  area: AreaType
+  getAreaHistory: ChangesetType[]
+}
+
+/**
+ * Get area page data
+ * @param uuid area uuid
+ */
+export const getArea = async (uuid: string): Promise<AreaPageDataProps> => {
+  const rs = await graphqlClient.query<AreaPageDataProps>({
+    query: QUERY_AREA_BY_ID,
+    variables: {
+      uuid
+    },
+    fetchPolicy: 'no-cache'
+  })
+
+  return rs.data
+}

tailwind.config.js

@@ -53,12 +53,12 @@ module.exports = {
         info: '#65C3C8',
         error: '#ec4899',
         'base-content': '#111827', // gray-900
-        'base-300': '#4B5563', // gray-600
-        'base-200': '#9ca3af', // gray-400
+        'base-300': '#d1d5db', // gray-300
+        'base-200': '#f3f4f6', // gray-100
         'base-100': '#FAFAF9', // stone-50
         '--rounded-box': '0.5rem',
         '--rounded-btn': '0.5rem', // border radius rounded-btn utility class, used in buttons and similar element
-
+        '--border-color': '#AABAC0',
         '--btn-text-case': s => s
       }
     }],

tsconfig.json

@@ -24,6 +24,9 @@
       "@/components/*": [
         "components/*"
       ],
+      "@/app/components/*": [
+        "app/components/*"
+      ],
       "@/js/*": [
         "js/*"
       ],

yarn.lock

@@ -1815,6 +1815,11 @@
   resolved "https://registry.yarnpkg.com/@panva/hkdf/-/hkdf-1.1.1.tgz#ab9cd8755d1976e72fc77a00f7655a64efe6cd5d"
   integrity sha512-dhPeilub1NuIG0X5Kvhh9lH4iW3ZsHlnzwgwbOlgwQ2wG1IqFzsgHqmKPk3WzsdWAeaxKJxgM0+W433RmN45GA==
 
+"@phosphor-icons/react@^2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@phosphor-icons/react/-/react-2.0.14.tgz#3c8977cc81cc376d0c6afda46882eb5dc9b8b54d"
+  integrity sha512-VaZ7/JEQ7dW+Up23l7t6lqJ3dPJupM03916Pat+ZOLX1vex9OeX9t8RZLJWt0oVrdc/GcrAyRD5FESDeP+M4tQ==
+
 "@radix-ui/[email protected]":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
@@ -7295,7 +7300,7 @@ react-content-loader@^6.2.0:
   resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-6.2.1.tgz#8feb733c2d2495002e1b216f13707f2b5f2a8ead"
   integrity sha512-6ONbFX+Hi3SHuP66JB8CPvJn372pj+qwltJV0J8z/8MFrq98I1cbFdZuhDWeQXu3CFxiiDTXJn7DFxx2ZvrO7g==
 
-react-dom@^18.0.0:
+react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -7498,7 +7503,7 @@ react-use@^17.4.0:
     ts-easing "^0.2.0"
     tslib "^2.1.0"
 
-react@^18.0.0:
+react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -7908,6 +7913,11 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+slugify@^1.6.6:
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.6.tgz#2d4ac0eacb47add6af9e04d3be79319cbcc7924b"
+  integrity sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==
+
 snake-case@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-1.1.2.tgz#0c2f25e305158d9a18d3d977066187fef8a5a66a"