Merge pull request #64 from wp-graphql/feat/faust-toolbar

Attempt to setup Faust Toolbar. Add Context Menu to get "Edit Post" link

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/tailwind.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components/EditPost.jsx

@@ -0,0 +1,23 @@
+import { getAdminUrl } from "@faustwp/core"
+import Link from 'next/link'
+
+import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuTrigger,
+  } from "@/components/ui/context-menu"
+
+const EditPost = ({ post, children }) => {
+    console.log({post})
+    return(
+        <ContextMenu>
+        <ContextMenuTrigger>{children}</ContextMenuTrigger>
+        <ContextMenuContent>
+            <ContextMenuItem><Link href={`${getAdminUrl()}/post.php?post=${post?.databaseId}&action=edit`} target="_blank">{`Edit Post (id: ${post?.databaseId})`}</Link></ContextMenuItem>
+        </ContextMenuContent>
+        </ContextMenu>
+    )
+}
+
+export default EditPost;

components/Layout.jsx

@@ -4,6 +4,8 @@ import clsx from 'clsx'
 import Link from 'next/link'
 import { useCallback, useEffect, useState } from 'react'
 
+import EditPost from './EditPost'
+
 import { DocsSidebarNavigation } from '@/components/DocsSidebarNavigation'
 import { FooterNavigation } from '@/components/FooterNavigation'
 import { PrimaryNavigation } from '@/components/PrimaryNavigation'
@@ -153,9 +155,11 @@ export function Layout({ node, children, toc, title }) {
                     </p>
                   )}
                   {title && (
-                    <h1 className="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
-                      {title}
-                    </h1>
+                     <EditPost post={node}>
+                      <h1 className="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
+                        {title}
+                      </h1>
+                    </EditPost>
                   )}
                 </header>
               )}

components/ui/context-menu.jsx

@@ -0,0 +1,156 @@
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}>
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props} />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props} />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props} />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    (<span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props} />)
+  );
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

faust.config.js

@@ -12,4 +12,5 @@ export default setConfig({
   experimentalPlugins: [],
   usePersistedQueries: true,
   possibleTypes,
+  experimentalToolbar: true,
 })

package.json

@@ -25,6 +25,7 @@
     "@markdoc/markdoc": "0.1.7",
     "@markdoc/next.js": "^0.3.6",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.1",
@@ -39,7 +40,7 @@
     "algoliasearch": "^4.14.2",
     "allotment": "^1.19.3",
     "autoprefixer": "^10.4.7",
-    "class-variance-authority": "^0.6.0",
+    "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
     "crypto-hash": "^2.0.1",
     "fast-glob": "^3.2.12",
@@ -65,9 +66,9 @@
     "recma-nextjs-static-props": "^1.0.0",
     "remark-gfm": "^3.0.1",
     "simple-functional-loader": "^1.2.1",
-    "tailwind-merge": "^1.12.0",
+    "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.1",
-    "tailwindcss-animate": "^1.0.5",
+    "tailwindcss-animate": "^1.0.7",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.2",
     "zustand": "^4.3.2"

pages/_app.js

@@ -11,6 +11,8 @@ import { SearchProvider } from '@/components/Search'
 import { ThemeProvider } from '@/components/ThemeProvider'
 import blocks from '@/wp-blocks'
 
+import '@faustwp/core/dist/css/toolbar.css';
+
 export default function MyApp({ Component, pageProps, router }) {
   return (
     <ThemeProvider

styles/prism.css

@@ -44,4 +44,4 @@ pre[class*='language-'] {
 .token.operator,
 .token.combinator {
   color: theme('colors.slate.400');
-}
+}

styles/tailwind.css

@@ -96,5 +96,4 @@
   [inert] ::-webkit-scrollbar {
     display: none;
   }
-}
-
+}

wp-templates/IndexTemplate.js

@@ -14,6 +14,9 @@ query IndexTemplate($uri: String!) {
         ...on NodeWithTitle {
             title
         }
+        ...on DatabaseIdentifier {
+            databaseId
+        }
         ...on NodeWithEditorBlocks {
             editorBlocks {
                 __typename

wp-templates/single-field_type.js

@@ -4,6 +4,7 @@ import { flatListToHierarchical, useFaustQuery } from '@faustwp/core'
 import { Separator } from '@radix-ui/react-separator'
 import Head from 'next/head'
 
+import EditPost from '@/components/EditPost'
 import { Layout, LAYOUT_QUERY } from '@/components/Layout'
 import { Badge } from '@/components/ui/badge'
 import blocks from '@/wp-blocks'
@@ -27,7 +28,9 @@ query SingleAcfFieldType($uri: String!) {
     node: nodeByUri(uri: $uri) {
         __typename
         uri
+        id
         ...on FieldType {
+            databaseId
             title
             # content
             modified
@@ -114,7 +117,7 @@ export const SingleFieldType = () => {
         <title>{`${title} - WPGraphQL for ACF`}</title>
       </Head>
       <Layout node={node} toc={toc}>
-        <h1>{title}</h1>
+        <EditPost post={node}><h1>{title}</h1></EditPost>
         {node?.aCFFieldTypeCategories && node?.aCFFieldTypeCategories?.nodes && (
           <div id="field-type-categories" className="my-2">
             {node.aCFFieldTypeCategories.nodes.map((fieldTypeCategory) => (