saving forgotten changes

Signed-off-by: Joe Fusco <[email protected]>
wp-graphql · Dec 6, 2023 · f064ae7 · f064ae7
1 parent 33562ae
commit f064ae7
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 74 deletions.
diff --git a/components/MiniGraphiQL.jsx b/components/MiniGraphiQL.jsx
@@ -78,9 +78,7 @@ const MiniGraphiQLClient = ({ initialQuery, initialVariables, endpoint, readOnly
       border-radius: 4px;
       padding: 0.5rem;
       display: flex;
-    }
-    .graphiql-container * {
-      height: fit-content !important;
+      min-height: 400px; 
     }
     .graphiql-container .graphiql-editors.full-height {
       margin-top: 8px;

diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
@@ -24,11 +24,11 @@ const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
+  <AccordionPrimitive.Header className="flex my-1">
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-2 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}

diff --git a/components/ui/tabs.js b/components/ui/tabs.js
@@ -11,7 +11,7 @@ const TabsList = React.forwardRef(({ className, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      'inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
       className,
     )}
     {...props}
@@ -23,7 +23,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-5 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow relative',
       className,
     )}
     {...props}

diff --git a/wp-blocks/AcfFieldTypeConfigurationBlock.js b/wp-blocks/AcfFieldTypeConfigurationBlock.js
@@ -2,6 +2,13 @@ import React from 'react';
 import { gql } from '@apollo/client'
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { snakeToPascalCase } from '@/lib/snakeToPascalCase';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card';
 
 const tabData = [
   {
@@ -61,7 +68,7 @@ add_action( 'acf/include_fields', function() {
 `;
 
   return(
-    <pre>
+    <pre className='mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4'>
       {phpString}
     </pre>
   )
@@ -70,34 +77,33 @@ add_action( 'acf/include_fields', function() {
 function JSONTabContent({fieldTypeConfigurationBlockFields}) {
   const { acfFieldType } = fieldTypeConfigurationBlockFields;
 
-  // const result = JSON.parse(acfFieldType);
-  // const prettyResult = JSON.stringify(result, null, 2);
-
   return(
-    <pre>
-      JSON
+    <pre className='mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4'>
+      JSON OUTPUT for {acfFieldType}
     </pre>
   )
 }
 
 export function AcfFieldTypeConfigurationBlock({ fieldTypeConfigurationBlockFields }) {
   return (
-    <Tabs defaultValue={tabData[0].key}>
-      <TabsList aria-label="Dynamic Tabs">
-        {tabData.map(tab => (
-          <TabsTrigger key={tab.key} value={tab.key}>
-            {tab.name}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-      {tabData.map(tab => (
-        <TabsContent key={tab.key} value={tab.key}>
-          <div className="p-4">
-            {tab.component({ fieldTypeConfigurationBlockFields })}
-          </div>
-        </TabsContent>
-      ))}
-    </Tabs>
+    <Card>
+      <CardHeader className="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
+        <Tabs defaultValue={tabData[0].key}>
+          <TabsList aria-label="Dynamic Tabs">
+            {tabData.map(tab => (
+              <TabsTrigger key={tab.key} value={tab.key}>
+                {tab.name}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {tabData.map(tab => (
+            <TabsContent key={tab.key} value={tab.key}>
+              {tab.component({ fieldTypeConfigurationBlockFields })}
+            </TabsContent>
+          ))}
+        </Tabs>
+      </CardHeader>
+    </Card>
   );
 };
 

diff --git a/wp-blocks/AcfFieldTypeSettingsBlock.js b/wp-blocks/AcfFieldTypeSettingsBlock.js
@@ -1,57 +1,77 @@
+import { useState } from 'react'
 import { gql } from '@apollo/client'
 import Image from 'next/image'
-import { Fragment } from 'react'
-
-import { InfoIcon } from '@/components/icons/InfoIcon'
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import { Button } from "@/components/ui/button"
 
 export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
   const { fieldTypeSettings } = fieldTypeSettingsBlockFields
+  const [openItems, setOpenItems] = useState([]);
+
+  const toggleItem = (value) => {
+    setOpenItems(currentItems => {
+      if (currentItems.includes(value)) {
+        // Remove item from array if it's already there
+        return currentItems.filter(item => item !== value);
+      } else {
+        // Add item to array
+        return [...currentItems, value];
+      }
+    });
+  };
+
+  const expandAll = () => {
+    const allItemValues = fieldTypeSettings.nodes.map((_, index) => `item-${index + 1}`);
+    setOpenItems(allItemValues);
+  };
 
   return (
-    <>
-      {fieldTypeSettings?.nodes?.map((item) => {
-        const { id, name, description, fieldTypeSettingsMeta } = item
-        const { impactOnWpgraphql, adminScreenshot } = fieldTypeSettingsMeta
+    <div>
+      <Accordion 
+        className="w-full space-y-1" 
+        collapsible="collapsible" 
+        type="multiple" 
+        value={openItems} 
+        onChange={(value) => toggleItem(value)}
+      >
+        {fieldTypeSettings?.nodes?.map((item, index) => {
+          const { id, name, description, fieldTypeSettingsMeta } = item
+          const { impactOnWpgraphql, adminScreenshot } = fieldTypeSettingsMeta
 
-        return (
-          <Fragment key={id}>
-            <div className="mb-2">
-              <div className="flex">
-                <h3 className="m-0 inline-flex">{name}</h3>
-                <Popover className="ml-3">
-                  <PopoverTrigger>
-                    <div className="m-2 rounded-full p-2 transition-colors duration-300 hover:bg-gray-200 dark:hover:bg-gray-800">
-                      <InfoIcon />
-                    </div>
-                  </PopoverTrigger>
-                  <PopoverContent className="min-w-full">
-                    <Image
-                      src={adminScreenshot?.node?.mediaItemUrl}
-                      alt={adminScreenshot?.node?.altText}
-                      width={adminScreenshot?.node?.mediaDetails?.width}
-                      height={adminScreenshot?.node?.mediaDetails?.height}
-                    />
-                    {description && <p className='sr-only'>{description}</p>}
-                  </PopoverContent>
-                </Popover>
-              </div>
-              {impactOnWpgraphql ? (
-                <span dangerouslySetInnerHTML={{ __html: impactOnWpgraphql }} />
-              ) : (
-                <span className="italic">
-                  Impact on WPGraphQL not yet documented
-                </span>
-              )}
-            </div>
-          </Fragment>
-        )
-      })}
-    </>
+          return (
+            <AccordionItem key={id} value={`item-${index + 1}`}>
+              <AccordionTrigger className="flex items-center p-4 bg-gray-200 dark:bg-gray-700">
+                {name}
+              </AccordionTrigger>
+              <AccordionContent className="p-4 bg-gray-100 dark:bg-gray-800">
+                <Image
+                  src={adminScreenshot?.node?.mediaItemUrl}
+                  alt={adminScreenshot?.node?.altText}
+                  width={adminScreenshot?.node?.mediaDetails?.width}
+                  height={adminScreenshot?.node?.mediaDetails?.height}
+                />
+                {description && <p>{description}</p>}
+                {impactOnWpgraphql && (
+                  <div className="mt-2 p-2 bg-yellow-300 dark:bg-yellow-500">
+                    <span dangerouslySetInnerHTML={{ __html: impactOnWpgraphql }} />
+                  </div>
+                )}
+              </AccordionContent>
+            </AccordionItem>
+          )
+        })}
+      </Accordion>
+      <div className="mt-4">
+        <Button className="w-full" variant="outline" onClick={expandAll}>
+          Expand All Field Settings
+        </Button>
+      </div>
+    </div>
   )
 }