diff --git a/apps/docs/components/CodeBlock/CodeBlock.tsx b/apps/docs/components/CodeBlock/CodeBlock.tsx index ada3cd860c0..9172f204075 100644 --- a/apps/docs/components/CodeBlock/CodeBlock.tsx +++ b/apps/docs/components/CodeBlock/CodeBlock.tsx @@ -65,7 +65,7 @@ const CodeBlock: FC = ({ const showLineNumbers = !hideLineNumbers return ( -
+
{title && (
{title.replace(/%20/g, ' ')} @@ -80,6 +80,7 @@ const CodeBlock: FC = ({ '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, diff --git a/apps/docs/components/FooterHelpCallout.tsx b/apps/docs/components/FooterHelpCallout.tsx index 91531ca91ec..364a8135687 100644 --- a/apps/docs/components/FooterHelpCallout.tsx +++ b/apps/docs/components/FooterHelpCallout.tsx @@ -3,7 +3,7 @@ const FooterHelpCallout = () => {
Need some help?

- 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 dashboard.

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx index de8312ddc49..8dbeca1fc9e 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx @@ -71,7 +71,7 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => { } const Divider = () => { - return
+ return
} return ( diff --git a/apps/docs/package.json b/apps/docs/package.json index 70fea8a13d7..c033cb31f6a 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -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", diff --git a/apps/docs/pages/reference/javascript/[...slug].tsx b/apps/docs/pages/reference/javascript/[...slug].tsx index 7e64363c194..f338e234341 100644 --- a/apps/docs/pages/reference/javascript/[...slug].tsx +++ b/apps/docs/pages/reference/javascript/[...slug].tsx @@ -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 ( <> {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 ( - - {tables && - tables.length > 0 && - tables.map((table) => { - return ( -
-
-
-
- -
-
{table.name}
-
-
+ + + + + + + {tables && + tables.length > 0 && + tables.map((table) => { + return ( +
+
+
+
+ +
+
+ {table.name} +
+
+
+
+ ) + })} + {sql && ( + + {sql} + + )} + + +} + +const Tabs: React.FC & 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 = ({ children, id, className }) => { let __styles = styleHandler('tabs') return ( @@ -137,7 +140,7 @@ export function Panel({ children, id }: PanelProps) { {({ activeId }) => { const active = activeId === id return ( - + {children} ) diff --git a/packages/ui/src/lib/theme/defaultTheme.ts b/packages/ui/src/lib/theme/defaultTheme.ts index eb33ab7ef96..e5f2b773fc4 100644 --- a/packages/ui/src/lib/theme/defaultTheme.ts +++ b/packages/ui/src/lib/theme/defaultTheme.ts @@ -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`, }, /*