Skip to content

Commit

Permalink
Merge pull request #33 from wp-graphql/issue-19-field-type-configurat…
Browse files Browse the repository at this point in the history
…ion-block

Add ACF Field Type Configuration Block
  • Loading branch information
josephfusco committed Dec 11, 2023
2 parents 65e8fb1 + cbffcb3 commit 13ba870
Show file tree
Hide file tree
Showing 16 changed files with 1,079 additions and 185 deletions.
67 changes: 28 additions & 39 deletions components/DocsSidebarNavigation.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { gql } from '@apollo/client'
import clsx from 'clsx'
import Link from 'next/link'
import { useState } from 'react'
import { gql } from '@apollo/client';
import clsx from 'clsx';
import Link from 'next/link';
import { useState } from 'react';

DocsSidebarNavigation.fragment = gql`
fragment DocsSidebarNavigationFragment on RootQuery {
Expand All @@ -18,7 +18,7 @@ DocsSidebarNavigation.fragment = gql`
}
}
}
`
`;

export function DocsSidebarNavigation({ className, data, navigation }) {
const isActiveSection = (section, currentNode) => {
Expand Down Expand Up @@ -50,36 +50,28 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
{navigation.map((section) => (
<li key={section.title}>
<div className="flex items-center">
<Link href={section.href} className='block w-full'>
<h2 className="cursor-pointer font-display font-medium text-slate-900 hover:text-slate-600 dark:text-white dark:hover:text-gray-300">
<Link href={section.href} passHref>
<h2 className="block w-full cursor-pointer font-display font-medium text-slate-900 hover:text-slate-600 dark:text-white dark:hover:text-gray-300">
{section.title}
</h2>
</Link>
<div className="ml-auto mr-0 inline-flex items-center justify-center rounded-full transition-colors duration-300 hover:bg-gray-200 dark:hover:bg-gray-800">
<button
onClick={() => toggleSection(section.title)}
className="p-2 text-slate-900 transition-transform duration-300 dark:text-white"
<button
onClick={() => toggleSection(section.title)}
className="ml-auto p-2 text-slate-900 transition-transform duration-300 dark:text-white"
>
<svg
className={clsx(
'h-4 w-4 transition-transform',
expandedSections[section.title] && 'rotate-180'
)}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<svg
className={clsx(
'',
expandedSections[section.title] && 'rotate-90',
'h-4 w-4'
)}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 5l7 7-7 7"
/>
</svg>
</button>
</div>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
<ul
role="list"
Expand All @@ -93,14 +85,11 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
>
{section.links.map((link) => (
<li key={link.href} className="relative pl-3.5">
<Link
href={link.href}
className={clsx(
'block',
link.href === data?.node?.uri ? 'font-semibold text-sky-500' : 'text-slate-500 hover:text-slate-600 dark:text-slate-400'
)}
>
{link.title}
<Link href={link.href} className={clsx(
'block',
link.href === data?.node?.uri ? 'font-semibold text-sky-500' : 'text-slate-500 hover:text-slate-600 dark:text-slate-400'
)}>
{link.title}
</Link>
</li>
))}
Expand Down
47 changes: 20 additions & 27 deletions components/MiniGraphiQL.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,31 +70,15 @@ const MiniGraphiQLClient = ({ initialQuery, initialVariables, endpoint, readOnly
}
}

const containerStyles = {
height: '80vh',
maxHeight: 'auto',
borderRadius: '4px',
padding: '0.5rem',
display: 'flex',
flex: '1 1 0%',
};

const graphiqlStyles = `
:root {
color-scheme: ${theme};
}
.graphiql-container {
height: fit-content;
background-color: transparent !important;
font-size: 14px;
}
.graphiql-container * {
box-shadow: none !important;
}
.graphiql-container .graphiql-editor-tools button:nth-child(2) {
display: none;
}
.graphiql-container .graphiql-editors {
border-radius: 2px;
border-radius: 4px;
padding: 0.5rem;
display: flex;
min-height: 400px;
}
.graphiql-container .graphiql-editors.full-height {
margin-top: 8px;
Expand All @@ -107,25 +91,34 @@ const MiniGraphiQLClient = ({ initialQuery, initialVariables, endpoint, readOnly
.graphiql-container .graphiql-response .result-window {
padding-top: 8px;
}
.graphiql-container .graphiql-session-header {
display: none;
}
.graphiql-container .graphiql-sessions {
border-radius: 2px;
}
.graphiql-container .graphiql-editors {
border-radius: 2px;
}
.graphiql-container * {
box-shadow: none !important;
}
.graphiql-container .graphiql-session-header {
display: none;
}
.graphiql-container .graphiql-sidebar {
display: none;
}
.graphiql-container .graphiql-editor-tools button:nth-child(2) {
display: none; /* headers tab */
}
.graphiql-toolbar button:nth-child(2) {
display: none; /* prettify */
display: none; /* prettify button */
}
.graphiql-toolbar button:nth-child(3) {
display: none; /* merge */
display: none; /* merge fragment button */
}
`;

return (
<div style={containerStyles} className={resolvedTheme}>
<div className={resolvedTheme}>
<style dangerouslySetInnerHTML={{ __html: graphiqlStyles }} />
{GraphiQL ? (
<GraphiQL
Expand Down
4 changes: 2 additions & 2 deletions components/ui/accordion.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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="my-1 flex">
<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}
Expand Down
4 changes: 2 additions & 2 deletions components/ui/tabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand Down
34 changes: 34 additions & 0 deletions lib/jsonToPhp.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
export function jsonToPhp(obj) {
const convertArray = (array) => {
return array.map(value => {
if (typeof value === 'object' && value !== null) {
return jsonToPhp(value);
} else if (Array.isArray(value)) {
return convertArray(value);
} else if (typeof value === 'string') {
return `'${value.replace(/'/g, "\\'")}'`;
} else if (typeof value === 'boolean') {
return value ? 'true' : 'false';
} else {
return value;
}
}).join(", ");
};

let result = "array(\n";
for (const key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
const value = obj[key];
result += `\t\t'${key}' => `;
if (Array.isArray(value)) {
result += convertArray(value) + ",\n";
} else if (typeof value === 'object' && value !== null) {
result += jsonToPhp(value) + ",\n";
} else {
result += `${value},\n`;
}
}
}
result += "\t)";
return result;
}
12 changes: 12 additions & 0 deletions lib/snakeToPascalCase.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* Converts a snake case string to PascalCase.
*
* @param {string} str - The snake case string to convert.
* @returns {string} - The PascalCase version of the string.
*/
export function snakeToPascalCase(str) {
return str
.split('_')
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join('');
}
18 changes: 17 additions & 1 deletion next.config.mjs
Original file line number Diff line number Diff line change
@@ -1,7 +1,23 @@
import { withFaust, getWpHostname } from '@faustwp/core';
import nextMDX from '@next/mdx';
import withMarkdoc from '@markdoc/next.js'
import withSearch from './markdoc/search.mjs'
import rehypePrettyCode from 'rehype-pretty-code';

/** @type {import('rehype-pretty-code').Options} */
const options = {
theme: 'one-dark-pro',
};

const withMDX = nextMDX({
extension: /\.mdx?$/,
options: {
remarkPlugins: [],
rehypePlugins: [[rehypePrettyCode, options]],
},
});

/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
Expand All @@ -14,4 +30,4 @@ const nextConfig = {
},
};

export default withFaust( withSearch( withMarkdoc({ schemaPath: './src/markdoc' })(nextConfig) ) );
export default withFaust( withMDX( withSearch( withMarkdoc({ schemaPath: './src/markdoc' })(nextConfig) ) ) );
Loading

1 comment on commit 13ba870

@headless-platform-by-wp-engine

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check out the recent updates to your Atlas environment:

App Environment URL Build
acf.wpgraphql.com main https://hb…wered.com ✅ (logs)

Learn more about building on Atlas in our documentation.

Please sign in to comment.