add collapsible

2026-10-13 21:29:08 +03:00 · 2022-12-06 20:15:24 +08:00
1 parent 32073e5e69
commit f417388c6f
@@ -65,7 +65,7 @@ const CodeBlock: FC<Props> = ({
  const showLineNumbers = !hideLineNumbers

  return (
-    <div className="relative my-2 max-w-[90vw] md:max-w-none overflow-auto">
+    <div className="relative max-w-[90vw] md:max-w-none overflow-auto">
      {title && (
        <div className="rounded-t-md bg-scale-300 py-2 px-4 border-b border-scale-500 text-blue-1100 font-sans">
          {title.replace(/%20/g, ' ')}
@@ -80,6 +80,7 @@ const CodeBlock: FC<Props> = ({
            'code-block border p-4 w-full !my-0 !bg-scale-300',
            `${!title ? '!rounded-md' : '!rounded-t-none !rounded-b-md'}`,
            `${!showLineNumbers ? 'pl-6' : ''}`,
+            className,
          ].join(' ')}
          customStyle={{
            fontSize: large ? 18 : 13,
@@ -3,7 +3,7 @@ const FooterHelpCallout = () => {
    <div className="min-w-full px-8 py-6 prose bg-scale-300 dark:bg-whiteA-200 rounded">
      <h5 className="text-sm m-0 text-scale-1100">Need some help?</h5>
      <p className="m-0 text-sm text-scale-900">
-        Not to worry, we're here to help with our specialist engineers. You can submit a support
+        Not to worry, we are here to help with our specialist engineers. You can submit a support
        ticket via our <a href="https://app.supabase.com/support/new">dashboard</a>.
      </p>
    </div>
@@ -71,7 +71,7 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => {
  }

  const Divider = () => {
-    return <div className="h-px w-full bg-green-500 my-3"></div>
+    return <div className="h-px w-full bg-blackA-300 dark:bg-whiteA-300 my-3"></div>
  }

  return (
@@ -42,6 +42,7 @@
    "@mdx-js/react": "^1.6.22",
    "@next/mdx": "^12.0.4",
    "@radix-ui/react-accordion": "^1.0.1",
+    "@radix-ui/react-collapsible": "^1.0.1",
    "@tailwindcss/typography": "^0.4.1",
    "algoliasearch": "^4.14.2",
    "babel": "^6.23.0",
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'

 import fs from 'fs'
 import toc from 'markdown-toc'
@@ -20,7 +20,7 @@ import jsSpec from '~/../../spec/supabase_js_v2_temp_new_shape.yml' assert { typ
 // @ts-expect-error
 import commonLibSpec from '~/../../spec/common-client-libs.yml' assert { type: 'yml' }

-import { IconDatabase, Tabs } from 'ui'
+import { Button, IconChevronRight, IconDatabase, Tabs } from 'ui'
 import CodeBlock from '~/components/CodeBlock/CodeBlock'

 import { useRouter } from 'next/router'
@@ -31,6 +31,9 @@ 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'
+
 export default function JSReference(props) {
  const router = useRouter()

@@ -68,6 +71,8 @@ export default function JSReference(props) {
        const functionMarkdownContent = props?.docs[itemIndex]?.content
        const shortText = hasTsRef ? tsDefinition.signatures[0].comment.shortText : ''

+        // if (item.id !== 'db-modifiers-select') return <></>
+
        return (
          <>
            <RefSubLayout.Section
@@ -143,8 +148,8 @@ export default function JSReference(props) {
                  <>
                    <Tabs
                      defaultActiveId={item.examples[0].id}
-                      size="small"
-                      type="underlined"
+                      size="tiny"
+                      type="rounded-pills"
                      scrollable
                    >
                      {item.examples &&
@@ -162,33 +167,64 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
                          const sql = staticExample?.data?.sql
                          const tables = staticExample?.data?.tables

+                          const [dataOpen, setDataOpen] = useState(false)
+
                          return (
-                            <Tabs.Panel id={example.id} label={example.name}>
-                              {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>
-                                      </div>
+                            <Tabs.Panel
+                              id={example.id}
+                              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>
-                                  )
-                                })}
-                              {sql && (
-                                <CodeBlock
-                                  className="useless-code-block-class"
-                                  language="sql"
-                                  hideLineNumbers={true}
-                                >
-                                  {sql}
-                                </CodeBlock>
-                              )}
+                                    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>
+                                          </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>
+                              </Accordion.Root>
                              <CodeBlock
                                className="useless-code-block-class"
                                language="js"
@@ -49,6 +49,7 @@
        "@mdx-js/react": "^1.6.22",
        "@next/mdx": "^12.0.4",
        "@radix-ui/react-accordion": "^1.0.1",
+        "@radix-ui/react-collapsible": "^1.0.1",
        "@tailwindcss/typography": "^0.4.1",
        "algoliasearch": "^4.14.2",
        "babel": "^6.23.0",
@@ -239,6 +240,51 @@
        "react": "^16.13.1 || ^17.0.0"
      }
    },
+    "apps/docs/node_modules/@radix-ui/react-collapsible": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.1.tgz",
+      "integrity": "sha512-0maX4q91iYa4gjt3PsNf7dq/yqSR+HGAE8I5p54dQ6gnveS+ETWlMoijxrhmgV1k8svxpm34mQAtqIrJt4XZmA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "apps/docs/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-presence": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
+      "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "apps/docs/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
+      "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
    "apps/docs/node_modules/ajv": {
      "version": "6.12.6",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -49425,6 +49471,7 @@
        "@mdx-js/react": "^1.6.22",
        "@next/mdx": "^12.0.4",
        "@radix-ui/react-accordion": "^1.0.1",
+        "@radix-ui/react-collapsible": "*",
        "@tailwindcss/typography": "^0.4.1",
        "@types/node": "^17.0.12",
        "@types/react": "17.0.39",
@@ -49582,6 +49629,42 @@
          "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
          "requires": {}
        },
+        "@radix-ui/react-collapsible": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.1.tgz",
+          "integrity": "sha512-0maX4q91iYa4gjt3PsNf7dq/yqSR+HGAE8I5p54dQ6gnveS+ETWlMoijxrhmgV1k8svxpm34mQAtqIrJt4XZmA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/primitive": "1.0.0",
+            "@radix-ui/react-compose-refs": "1.0.0",
+            "@radix-ui/react-context": "1.0.0",
+            "@radix-ui/react-id": "1.0.0",
+            "@radix-ui/react-presence": "1.0.0",
+            "@radix-ui/react-primitive": "1.0.1",
+            "@radix-ui/react-use-controllable-state": "1.0.0",
+            "@radix-ui/react-use-layout-effect": "1.0.0"
+          },
+          "dependencies": {
+            "@radix-ui/react-presence": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
+              "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
+              "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.0",
+                "@radix-ui/react-use-layout-effect": "1.0.0"
+              }
+            },
+            "@radix-ui/react-use-layout-effect": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
+              "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
+              "requires": {
+                "@babel/runtime": "^7.13.10"
+              }
+            }
+          }
+        },
        "ajv": {
          "version": "6.12.6",
          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import * as React from 'react'
 import { TabsContext } from './TabsContext'

 import * as TabsPrimitive from '@radix-ui/react-tabs'
@@ -10,8 +10,7 @@ import { useRouter } from 'next/router'
 import styleHandler from '../../lib/theme/styleHandler'

 interface TabsProps {
-  type?: 'pills' | 'underlined' | 'cards'
-  children: any
+  type?: 'pills' | 'underlined' | 'cards' | 'rounded-pills'
  defaultActiveId?: string
  activeId?: string
  size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'
@@ -26,7 +25,11 @@ interface TabsProps {
  listClassNames?: string
 }

-function Tabs({
+interface TabsSubComponents {
+  Panel: React.FC<PanelProps>
+}
+
+const Tabs: React.FC<TabsProps> & TabsSubComponents = ({
  children,
  defaultActiveId,
  activeId,
@@ -39,8 +42,8 @@ function Tabs({
  addOnBefore,
  addOnAfter,
  listClassNames,
-}: TabsProps) {
-  const [activeTab, setActiveTab] = useState(
+}) => {
+  const [activeTab, setActiveTab] = React.useState(
    defaultActiveId
      ? defaultActiveId
      : // if no defaultActiveId is set use the first panel
@@ -123,13 +126,13 @@ function Tabs({
 }

 interface PanelProps {
-  children?: React.ReactNode
  id: string
  label?: string
  icon?: React.ReactNode
+  className?: string
 }

-export function Panel({ children, id }: PanelProps) {
+export const Panel: React.FC<PanelProps> = ({ children, id, className }) => {
  let __styles = styleHandler('tabs')

  return (
@@ -137,7 +140,7 @@ export function Panel({ children, id }: PanelProps) {
      {({ activeId }) => {
        const active = activeId === id
        return (
-          <TabsPrimitive.Content value={id} className={__styles.content}>
+          <TabsPrimitive.Content value={id} className={[__styles.content, className].join(' ')}>
            {children}
          </TabsPrimitive.Content>
        )
@@ -381,12 +381,40 @@ export default {
        border-scale-1200 
      `,
    },
+    'rounded-pills': {
+      list: 'flex space-x-2',
+      base: ` 
+        relative 
+        cursor-pointer 
+        flex 
+        items-center 
+        space-x-2
+        text-center 
+        transition
+        shadow-sm
+        rounded-full
+        focus:outline-none 
+        focus-visible:ring 
+        focus-visible:ring-scale-700
+        focus-visible:border-scale-900
+        `,
+      inactive: `
+        bg-scale-400 hover:bg-scale-500
+        hover:border-scale-900
+        text-scale-900 hover:text-scale-1200
+      `,
+      active: `
+        bg-scale-1200
+        text-scale-200
+        border-scale-1200 
+      `,
+    },
    block: 'w-full flex items-center justify-center',
    size: {
      ...default__padding_and_text,
    },
    scrollable: `overflow-auto whitespace-nowrap no-scrollbar mask-fadeout-right`,
-    content: `focus:outline-none`,
+    content: `focus:outline-none transition-height`,
  },

  /*