From 80540d631e42692df7f8394a03a937ae6219d4e3 Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Tue, 31 Oct 2023 15:49:15 -0400 Subject: [PATCH 1/5] Handle dark mode for inline code Signed-off-by: Joe Fusco --- components/Prose.jsx | 2 +- wp-blocks/AcfFieldTypeSettingsBlock.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Prose.jsx b/components/Prose.jsx index df66cd2..3b39bc7 100644 --- a/components/Prose.jsx +++ b/components/Prose.jsx @@ -19,7 +19,7 @@ export function Prose({ as: Component = 'div', className, ...props }) { // hr 'dark:prose-hr:border-slate-800', // code - 'prose-code:rounded-md prose-code:border prose-code:border-solid prose-code:border-gray-200 prose-code:bg-gray-100 prose-code:px-2.5 prose-code:py-0.5 prose-code:tracking-wide prose-code:before:content-none prose-code:after:content-none', + 'prose-code:rounded-md prose-code:border prose-code:border-solid prose-code:border-gray-200 prose-code:bg-gray-100 prose-code:px-2.5 prose-code:py-0.5 prose-code:tracking-wide prose-code:before:content-none prose-code:after:content-none dark:prose-code:border-gray-700 dark:prose-code:bg-gray-800', )} {...props} /> diff --git a/wp-blocks/AcfFieldTypeSettingsBlock.js b/wp-blocks/AcfFieldTypeSettingsBlock.js index afb41c5..fe47365 100644 --- a/wp-blocks/AcfFieldTypeSettingsBlock.js +++ b/wp-blocks/AcfFieldTypeSettingsBlock.js @@ -12,7 +12,7 @@ export function AcfFieldTypeSettingsBlock({fieldTypeSettingsBlockFields}) { return (

{name}

- {acfFieldName} + {acfFieldName}
  • {description || 'Description not yet documented'} From ccc09cfadfa00ad00847ddf7a81bcfcb64953a7a Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Wed, 1 Nov 2023 12:52:37 -0400 Subject: [PATCH 2/5] Add comments Signed-off-by: Joe Fusco --- lib/utils.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/utils.js b/lib/utils.js index ed0a7fe..d7a4218 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -2,10 +2,12 @@ import { slugifyWithCounter } from '@sindresorhus/slugify' import { clsx } from 'clsx' import { twMerge } from 'tailwind-merge' +// Merges classes using clsx and tailwind-merge. export function cn(...inputs) { return twMerge(clsx(inputs)) } +// Recursively retrieve text from a node or its children. export function getNodeText(node) { let text = '' for (let child of node.children ?? []) { @@ -18,6 +20,7 @@ export function getNodeText(node) { return text } +// Collects and processes heading nodes (h2, h3) from a list of nodes. export function collectHeadings(nodes, slugify = slugifyWithCounter()) { let sections = [] From 5301858899d2d1c3f4b1e5e58efc3eb30ed0932b Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Wed, 1 Nov 2023 12:53:03 -0400 Subject: [PATCH 3/5] Add accordion Signed-off-by: Joe Fusco --- components/ui/accordion.tsx | 60 +++++++++++++++++++++++++++++++ package-lock.json | 71 +++++++++++++++++++++++++++++++++++++ package.json | 2 ++ 3 files changed, 133 insertions(+) create mode 100644 components/ui/accordion.tsx diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx new file mode 100644 index 0000000..66f095a --- /dev/null +++ b/components/ui/accordion.tsx @@ -0,0 +1,60 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDownIcon } from "@radix-ui/react-icons" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
    {children}
    +     +)) +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/package-lock.json b/package-lock.json index 45d445f..4abf787 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,8 @@ "@mdx-js/loader": "^2.1.5", "@mdx-js/react": "^2.1.5", "@next/mdx": "^13.0.3", + "@radix-ui/react-accordion": "^1.1.2", + "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.1", "@radix-ui/react-navigation-menu": "^1.1.3", "@radix-ui/react-separator": "^1.0.2", @@ -3765,6 +3767,67 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-accordion": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz", + "integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collapsible": "1.0.3", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collapsible": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz", + "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", @@ -3869,6 +3932,14 @@ } } }, + "node_modules/@radix-ui/react-icons": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz", + "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==", + "peerDependencies": { + "react": "^16.x || ^17.x || ^18.x" + } + }, "node_modules/@radix-ui/react-id": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", diff --git a/package.json b/package.json index ff4b765..53fcdcc 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,8 @@ "@mdx-js/loader": "^2.1.5", "@mdx-js/react": "^2.1.5", "@next/mdx": "^13.0.3", + "@radix-ui/react-accordion": "^1.1.2", + "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.1", "@radix-ui/react-navigation-menu": "^1.1.3", "@radix-ui/react-separator": "^1.0.2", From 903ad5f2c4af6cdc554fe9761242da8bd648b55a Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Wed, 1 Nov 2023 12:53:12 -0400 Subject: [PATCH 4/5] Polish up settings block Signed-off-by: Joe Fusco --- wp-blocks/AcfFieldTypeSettingsBlock.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/wp-blocks/AcfFieldTypeSettingsBlock.js b/wp-blocks/AcfFieldTypeSettingsBlock.js index fe47365..a500963 100644 --- a/wp-blocks/AcfFieldTypeSettingsBlock.js +++ b/wp-blocks/AcfFieldTypeSettingsBlock.js @@ -1,4 +1,5 @@ import { gql } from '@apollo/client' +import { Fragment } from 'react' export function AcfFieldTypeSettingsBlock({fieldTypeSettingsBlockFields}) { const { fieldTypeSettings } = fieldTypeSettingsBlockFields @@ -10,18 +11,18 @@ export function AcfFieldTypeSettingsBlock({fieldTypeSettingsBlockFields}) { const { acfFieldName, impactOnWpgraphql } = fieldTypeSettingsMeta return ( -
    -

    {name}

    - {acfFieldName} -
      -
    • - {description || 'Description not yet documented'} + +

      {name}

      + {acfFieldName && {acfFieldName}} +
        +
      • + {description || Description not yet documented}
        • -
      • - {impactOnWpgraphql ? : 'Impact on WPGraphQL not yet documented'} +
      • + {impactOnWpgraphql ? : Impact on WPGraphQL not yet documented}
      -
    + ); })} From 3178fc8939ddb77c6ce51b9302d0286954535593 Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Wed, 1 Nov 2023 12:56:42 -0400 Subject: [PATCH 5/5] Linting fixes Signed-off-by: Joe Fusco --- components/ui/accordion.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx index 66f095a..2dfe283 100644 --- a/components/ui/accordion.tsx +++ b/components/ui/accordion.tsx @@ -1,8 +1,8 @@ "use client" -import * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { ChevronDownIcon } from "@radix-ui/react-icons" +import * as React from "react" import { cn } from "@/lib/utils"