From db233387038459dbb2a7b4d288da5b057b4b697c Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 7 Dec 2022 01:23:32 +0800
Subject: [PATCH 1/2] add collapse test in

---
 .../pages/reference/javascript/[...slug].tsx  | 102 +++++++++---------
 1 file changed, 54 insertions(+), 48 deletions(-)

diff --git a/apps/docs/pages/reference/javascript/[...slug].tsx b/apps/docs/pages/reference/javascript/[...slug].tsx
index f338e234341..40a9583066f 100644
--- a/apps/docs/pages/reference/javascript/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/[...slug].tsx
@@ -31,8 +31,7 @@ import RefSubLayout from '~/layouts/ref/RefSubLayout'
 
 import OldLayout from '~/layouts/Default'
 
-import * as Collapsible from '@radix-ui/react-collapsible'
-import * as Accordion from '@radix-ui/react-collapsible'
+import * as Accordion from '@radix-ui/react-accordion'
 
 export default function JSReference(props) {
   const router = useRouter()
@@ -175,55 +174,62 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
                               label={example.name}
                               className="flex flex-col gap-3"
                             >
-                              <Accordion.Root className="transition-all ease-out flex flex-col">
-                                <Accordion.Trigger asChild>
-                                  <button
-                                    className={[
-                                      'transition-all ease-out',
-                                      'h-8',
-                                      'bg-scale-300 data-open:bg-scale-500',
-                                      'border border-scale-500 w-full flex items-center gap-3 px-5',
-                                      'data-open:bg-yellow-900',
-                                      'rounded-tl rounded-tr',
-                                      'data-closed:rounded-bl data-closed:rounded-br',
-                                      'text-scale-1100 text-xs',
-                                    ].join(' ')}
-                                  >
-                                    <div className="data-open-parent:rotate-90 text-scale-900">
-                                      <IconChevronRight size={12} strokeWidth={2} />
-                                    </div>
-                                    Example data source
-                                  </button>
-                                </Accordion.Trigger>
-                                <Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up">
-                                  {tables &&
-                                    tables.length > 0 &&
-                                    tables.map((table) => {
-                                      return (
-                                        <div className="bg-scale-300 border rounded prose max-w-none">
-                                          <div className="bg-scale-200 px-5 py-2">
-                                            <div className="flex gap-2 items-center">
-                                              <div className="text-brand-900">
-                                                <IconDatabase size={16} />
+                              <Accordion.Root
+                                className="AccordionRoot"
+                                type="single"
+                                defaultValue={`${example.id}-data`}
+                                collapsible
+                              >
+                                <Accordion.Item value={`${example.id}-data`}>
+                                  <Accordion.Trigger asChild>
+                                    <button
+                                      className={[
+                                        'transition-all ease-out',
+                                        'h-8',
+                                        'bg-scale-300 data-open:bg-scale-500',
+                                        'border border-scale-500 w-full flex items-center gap-3 px-5',
+                                        'data-open:bg-yellow-900',
+                                        'rounded-tl rounded-tr',
+                                        'data-closed:rounded-bl data-closed:rounded-br',
+                                        'text-scale-1100 text-xs',
+                                      ].join(' ')}
+                                    >
+                                      <div className="data-open-parent:rotate-90 text-scale-900">
+                                        <IconChevronRight size={12} strokeWidth={2} />
+                                      </div>
+                                      Example data source
+                                    </button>
+                                  </Accordion.Trigger>
+                                  <Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up">
+                                    {tables &&
+                                      tables.length > 0 &&
+                                      tables.map((table) => {
+                                        return (
+                                          <div className="bg-scale-300 border rounded prose max-w-none">
+                                            <div className="bg-scale-200 px-5 py-2">
+                                              <div className="flex gap-2 items-center">
+                                                <div className="text-brand-900">
+                                                  <IconDatabase size={16} />
+                                                </div>
+                                                <h5 className="text-xs text-scale-1200">
+                                                  {table.name}
+                                                </h5>
                                               </div>
-                                              <h5 className="text-xs text-scale-1200">
-                                                {table.name}
-                                              </h5>
                                             </div>
                                           </div>
-                                        </div>
-                                      )
-                                    })}
-                                  {sql && (
-                                    <CodeBlock
-                                      className="useless-code-block-class my-0 border border-scale-500 !rounded-tl-none !rounded-tr-none"
-                                      language="sql"
-                                      hideLineNumbers={true}
-                                    >
-                                      {sql}
-                                    </CodeBlock>
-                                  )}
-                                </Accordion.Content>
+                                        )
+                                      })}
+                                    {sql && (
+                                      <CodeBlock
+                                        className="useless-code-block-class my-0 border border-scale-500 !rounded-tl-none !rounded-tr-none"
+                                        language="sql"
+                                        hideLineNumbers={true}
+                                      >
+                                        {sql}
+                                      </CodeBlock>
+                                    )}
+                                  </Accordion.Content>
+                                </Accordion.Item>
                               </Accordion.Root>
                               <CodeBlock
                                 className="useless-code-block-class"

From f99c481c05a8149083b1f92abdffac2914aaa5cb Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 7 Dec 2022 02:39:50 +0800
Subject: [PATCH 2/2] add reference details

---
 .../Reference/ReferenceDetailCollapse.tsx     | 44 ++++++++++++
 .../pages/reference/javascript/[...slug].tsx  | 71 ++++++++-----------
 2 files changed, 73 insertions(+), 42 deletions(-)
 create mode 100644 apps/docs/components/Reference/ReferenceDetailCollapse.tsx

diff --git a/apps/docs/components/Reference/ReferenceDetailCollapse.tsx b/apps/docs/components/Reference/ReferenceDetailCollapse.tsx
new file mode 100644
index 00000000000..ccb8f236671
--- /dev/null
+++ b/apps/docs/components/Reference/ReferenceDetailCollapse.tsx
@@ -0,0 +1,44 @@
+import * as Accordion from '@radix-ui/react-accordion'
+import React from 'react'
+import { IconChevronRight } from '~/../../packages/ui'
+
+const ReferenceDetailCollapse: React.FC<{ id: string; label: string; defaultOpen?: boolean }> = ({
+  defaultOpen = true,
+  ...props
+}) => {
+  return (
+    <Accordion.Root
+      className="AccordionRoot"
+      type="single"
+      defaultValue={defaultOpen ? `${props.id}` : ''}
+      collapsible
+    >
+      <Accordion.Item className="AccordionItem" value={`${props.id}`}>
+        <Accordion.Trigger asChild>
+          <button
+            className={[
+              'transition-all ease-out',
+              'h-8',
+              'bg-scale-200 data-open:bg-scale-300',
+              'dark:bg-scale-300 dark:data-open:bg-scale-500',
+              'border border-scale-500 w-full flex items-center gap-3 px-5',
+              'rounded-tl rounded-tr',
+              'data-closed:rounded-bl data-closed:rounded-br',
+              'text-scale-1100 text-xs',
+            ].join(' ')}
+          >
+            <div className="data-open-parent:rotate-90 text-scale-900">
+              <IconChevronRight size={12} strokeWidth={2} />
+            </div>
+            {props.label}
+          </button>
+        </Accordion.Trigger>
+        <Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up">
+          {props.children}
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  )
+}
+
+export default ReferenceDetailCollapse
diff --git a/apps/docs/pages/reference/javascript/[...slug].tsx b/apps/docs/pages/reference/javascript/[...slug].tsx
index a938acc74a6..4d8c9515626 100644
--- a/apps/docs/pages/reference/javascript/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/[...slug].tsx
@@ -32,6 +32,7 @@ import RefSubLayout from '~/layouts/ref/RefSubLayout'
 import OldLayout from '~/layouts/Default'
 
 import * as Accordion from '@radix-ui/react-accordion'
+import ReferenceDetailCollapse from '~/components/Reference/ReferenceDetailCollapse'
 
 export default function JSReference(props) {
   const router = useRouter()
@@ -90,6 +91,7 @@ export default function JSReference(props) {
 
           // const introFileMarkdownContent =
           console.log('props.docs', props.docs)
+
           // if (item.id !== 'db-modifiers-select') return <></>
 
           return (
@@ -194,33 +196,13 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
                                 label={example.name}
                                 className="flex flex-col gap-3"
                               >
-                                <Accordion.Root
-                                  className="AccordionRoot"
-                                  type="single"
-                                  defaultValue={`${example.id}-data`}
-                                  collapsible
-                                >
-                                  <Accordion.Item value={`${example.id}-data`}>
-                                    <Accordion.Trigger asChild>
-                                      <button
-                                        className={[
-                                          'transition-all ease-out',
-                                          'h-8',
-                                          'bg-scale-300 data-open:bg-scale-500',
-                                          'border border-scale-500 w-full flex items-center gap-3 px-5',
-                                          'data-open:bg-yellow-900',
-                                          'rounded-tl rounded-tr',
-                                          'data-closed:rounded-bl data-closed:rounded-br',
-                                          'text-scale-1100 text-xs',
-                                        ].join(' ')}
-                                      >
-                                        <div className="data-open-parent:rotate-90 text-scale-900">
-                                          <IconChevronRight size={12} strokeWidth={2} />
-                                        </div>
-                                        Example data source
-                                      </button>
-                                    </Accordion.Trigger>
-                                    <Accordion.Content>
+                                {((tables && tables.length > 0) || sql) && (
+                                  <ReferenceDetailCollapse
+                                    id={`${example.id}-${exampleIndex}-data`}
+                                    label="Example data source"
+                                    defaultOpen={false}
+                                  >
+                                    <>
                                       {tables &&
                                         tables.length > 0 &&
                                         tables.map((table) => {
@@ -241,16 +223,17 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
                                         })}
                                       {sql && (
                                         <CodeBlock
-                                          className="useless-code-block-class my-0 border border-scale-500 !rounded-tl-none !rounded-tr-none"
+                                          className="useless-code-block-class my-0 border border-t-0 border-scale-500 !rounded-tl-none !rounded-tr-none"
                                           language="sql"
                                           hideLineNumbers={true}
                                         >
                                           {sql}
                                         </CodeBlock>
                                       )}
-                                    </Accordion.Content>
-                                  </Accordion.Item>
-                                </Accordion.Root>
+                                    </>
+                                  </ReferenceDetailCollapse>
+                                )}
+
                                 <CodeBlock
                                   className="useless-code-block-class"
                                   language="js"
@@ -264,18 +247,22 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
                                         .replace('```', ''))}
                                 </CodeBlock>
                                 {response && (
-                                  <CodeBlock
-                                    className="useless-code-block-class"
-                                    language="js"
-                                    hideLineNumbers={true}
+                                  <ReferenceDetailCollapse
+                                    id={`${example.id}-${exampleIndex}-response`}
+                                    label="Example response"
+                                    defaultOpen={false}
                                   >
-                                    {exampleString +
-                                      (example.code &&
-                                        example.code
-                                          .replace('```', '')
-                                          .replace('js', '')
-                                          .replace('```', ''))}
-                                  </CodeBlock>
+                                    <CodeBlock
+                                      className="useless-code-block-class"
+                                      language="js"
+                                      hideLineNumbers={true}
+                                    >
+                                      {response
+                                        .replace('```', '')
+                                        .replace('json', '')
+                                        .replace('```', '')}
+                                    </CodeBlock>
+                                  </ReferenceDetailCollapse>
                                 )}
                               </Tabs.Panel>
                             )