From 62727e511ddca7b62ae2ac304e4b5338dc6f35b7 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Fri, 27 Sep 2024 17:35:24 +0000 Subject: [PATCH] Chore/move simple codeblock (#29547) * Move SimpleCodeBlock to shared packages * Add new files * Add use client * Revert sitemap changes --- .../AIPolicyEditorPanel/PolicyTemplates.tsx | 2 +- .../interfaces/Auth/Users/UserPanel.tsx | 2 +- .../interfaces/Auth/Users/UserSidePanel.tsx | 2 +- .../Auth/Users/UsersV1/UsersListItem.tsx | 2 +- .../interfaces/Docs/CodeSnippet.tsx | 2 +- .../androidkotlin/supabasekt/content.tsx | 2 +- .../content/astro/supabasejs/content.tsx | 2 +- .../Home/Connect/content/drizzle/content.tsx | 2 +- .../exporeactnative/supabasejs/content.tsx | 2 +- .../flutter/supabaseflutter/content.tsx | 2 +- .../ionicangular/supabasejs/content.tsx | 2 +- .../content/ionicreact/supabasejs/content.tsx | 2 +- .../content/nextjs/app/supabasejs/content.tsx | 2 +- .../nextjs/pages/supabasejs/content.tsx | 2 +- .../content/nuxt/supabasejs/content.tsx | 2 +- .../Home/Connect/content/prisma/content.tsx | 2 +- .../create-react-app/supabasejs/content.tsx | 2 +- .../content/react/vite/supabasejs/content.tsx | 2 +- .../content/refine/supabasejs/content.tsx | 2 +- .../content/remix/supabasejs/content.tsx | 2 +- .../content/solidjs/supabasejs/content.tsx | 2 +- .../content/sveltekit/supabasejs/content.tsx | 2 +- .../content/swift/supabaseswift/content.tsx | 2 +- .../content/vuejs/supabasejs/content.tsx | 2 +- .../Home/NewProjectPanel/APIKeys.tsx | 2 +- .../ProjectAPIDocs/ContentSnippet.tsx | 2 +- .../ProjectAPIDocs/ResourceContent.tsx | 2 +- .../layouts/SQLEditorLayout/QueryItem.tsx | 2 +- packages/ui/index.tsx | 1 + .../SimpleCodeBlock}/SimpleCodeBlock.tsx | 10 ++--- .../src/components/SimpleCodeBlock/index.tsx | 1 + .../src/components/SimpleCodeBlock}/prism.ts | 0 packages/ui/src/lib/utils/clipboard.ts | 38 +++++++++++++++++++ packages/ui/src/lib/utils/index.ts | 1 + 34 files changed, 73 insertions(+), 34 deletions(-) rename {apps/studio/components/to-be-cleaned => packages/ui/src/components/SimpleCodeBlock}/SimpleCodeBlock.tsx (93%) create mode 100644 packages/ui/src/components/SimpleCodeBlock/index.tsx rename {apps/studio/lib/constants => packages/ui/src/components/SimpleCodeBlock}/prism.ts (100%) create mode 100644 packages/ui/src/lib/utils/clipboard.ts diff --git a/apps/studio/components/interfaces/Auth/Policies/AIPolicyEditorPanel/PolicyTemplates.tsx b/apps/studio/components/interfaces/Auth/Policies/AIPolicyEditorPanel/PolicyTemplates.tsx index 31830fc8537..0edb730208b 100644 --- a/apps/studio/components/interfaces/Auth/Policies/AIPolicyEditorPanel/PolicyTemplates.tsx +++ b/apps/studio/components/interfaces/Auth/Policies/AIPolicyEditorPanel/PolicyTemplates.tsx @@ -4,7 +4,7 @@ import { useState } from 'react' import { Badge, HoverCard, HoverCardContent, HoverCardTrigger, Input, cn } from 'ui' import { Markdown } from 'components/interfaces/Markdown' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' import CardButton from 'components/ui/CardButton' import CopyButton from 'components/ui/CopyButton' import NoSearchResults from 'components/ui/NoSearchResults' diff --git a/apps/studio/components/interfaces/Auth/Users/UserPanel.tsx b/apps/studio/components/interfaces/Auth/Users/UserPanel.tsx index 8d7e5ee0c26..f4b8e2ef67b 100644 --- a/apps/studio/components/interfaces/Auth/Users/UserPanel.tsx +++ b/apps/studio/components/interfaces/Auth/Users/UserPanel.tsx @@ -1,4 +1,4 @@ -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' import { User } from 'data/auth/users-query' import { X } from 'lucide-react' import { useState } from 'react' diff --git a/apps/studio/components/interfaces/Auth/Users/UserSidePanel.tsx b/apps/studio/components/interfaces/Auth/Users/UserSidePanel.tsx index 441b4969588..7cff76415cf 100644 --- a/apps/studio/components/interfaces/Auth/Users/UserSidePanel.tsx +++ b/apps/studio/components/interfaces/Auth/Users/UserSidePanel.tsx @@ -1,4 +1,4 @@ -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' import type { User } from 'data/auth/users-query' import { SidePanel } from 'ui' diff --git a/apps/studio/components/interfaces/Auth/Users/UsersV1/UsersListItem.tsx b/apps/studio/components/interfaces/Auth/Users/UsersV1/UsersListItem.tsx index 4c34ad9ab76..c478cf81838 100644 --- a/apps/studio/components/interfaces/Auth/Users/UsersV1/UsersListItem.tsx +++ b/apps/studio/components/interfaces/Auth/Users/UsersV1/UsersListItem.tsx @@ -1,7 +1,7 @@ import dayjs from 'dayjs' import { Badge } from 'ui' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' import Table from 'components/to-be-cleaned/Table' import type { User } from 'data/auth/users-query' import UserDropdown from '../UserDropdown' diff --git a/apps/studio/components/interfaces/Docs/CodeSnippet.tsx b/apps/studio/components/interfaces/Docs/CodeSnippet.tsx index 9bb0b831f29..87f1850ebd6 100644 --- a/apps/studio/components/interfaces/Docs/CodeSnippet.tsx +++ b/apps/studio/components/interfaces/Docs/CodeSnippet.tsx @@ -1,4 +1,4 @@ -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' interface CodeSnippetProps { selectedLang: 'bash' | 'js' diff --git a/apps/studio/components/interfaces/Home/Connect/content/androidkotlin/supabasekt/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/androidkotlin/supabasekt/content.tsx index 7e866e184ea..bcb90e3c9a5 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/androidkotlin/supabasekt/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/androidkotlin/supabasekt/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTrigger, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/astro/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/astro/supabasejs/content.tsx index aecccde06e9..a88f865dde2 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/astro/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/astro/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTrigger, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/drizzle/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/drizzle/content.tsx index dfbcabef0fd..de06febc660 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/drizzle/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/drizzle/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTriggers, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ connectionStringPooler }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/exporeactnative/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/exporeactnative/supabasejs/content.tsx index 815e4ce5749..00fc5873977 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/exporeactnative/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/exporeactnative/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTriggers, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/flutter/supabaseflutter/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/flutter/supabaseflutter/content.tsx index 210bde2c97b..8ae2c76a4d0 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/flutter/supabaseflutter/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/flutter/supabaseflutter/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTrigger, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/ionicangular/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/ionicangular/supabasejs/content.tsx index 44804ced43d..4a51e5f27a1 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/ionicangular/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/ionicangular/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTrigger, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/ionicreact/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/ionicreact/supabasejs/content.tsx index adaed38bbcc..193a6e6719d 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/ionicreact/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/ionicreact/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTrigger, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/nextjs/app/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/nextjs/app/supabasejs/content.tsx index 11d0621c239..9a2cd70d26c 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/nextjs/app/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/nextjs/app/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTriggers, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/nextjs/pages/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/nextjs/pages/supabasejs/content.tsx index 4131fd593cf..f22c1474db0 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/nextjs/pages/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/nextjs/pages/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTriggers, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/content.tsx index efd3c26ac47..6b0428be949 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/nuxt/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTriggers, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/prisma/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/prisma/content.tsx index d287ced2d3f..1094ad05e24 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/prisma/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/prisma/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTriggers, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ connectionStringPooler }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/react/create-react-app/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/react/create-react-app/supabasejs/content.tsx index 6299beae650..de20afa3284 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/react/create-react-app/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/react/create-react-app/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTriggers, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/react/vite/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/react/vite/supabasejs/content.tsx index 86ad9bb36fe..f7b0c82ff92 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/react/vite/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/react/vite/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTriggers, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/refine/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/refine/supabasejs/content.tsx index 1d56893b856..6c5cd2ea118 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/refine/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/refine/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTriggers, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/remix/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/remix/supabasejs/content.tsx index 80e12a0a088..4487cf53afd 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/remix/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/remix/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTrigger, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/solidjs/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/solidjs/supabasejs/content.tsx index 54f2ca88ca6..9ab97360e6f 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/solidjs/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/solidjs/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTriggers, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/content.tsx index 7a399e2f1f0..6f9468e2f18 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/sveltekit/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTrigger, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/swift/supabaseswift/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/swift/supabaseswift/content.tsx index a22a289bccc..43ced097a49 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/swift/supabaseswift/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/swift/supabaseswift/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTrigger, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/Connect/content/vuejs/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/vuejs/supabasejs/content.tsx index b9d5a24d603..5ab61da9c8a 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/vuejs/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/vuejs/supabasejs/content.tsx @@ -6,7 +6,7 @@ import { ConnectTabTriggers, ConnectTabContent, } from 'components/interfaces/Home/Connect/ConnectTabs' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' const ContentFile = ({ projectKeys }: ContentFileProps) => { return ( diff --git a/apps/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx b/apps/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx index 058545be2dd..93af608f4e7 100644 --- a/apps/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx +++ b/apps/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx @@ -4,7 +4,7 @@ import Link from 'next/link' import { useState } from 'react' import { useParams } from 'common/hooks' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' import Panel from 'components/ui/Panel' import { useJwtSecretUpdatingStatusQuery } from 'data/config/jwt-secret-updating-status-query' import { useProjectApiQuery } from 'data/config/project-api-query' diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/ContentSnippet.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/ContentSnippet.tsx index 3e3c9bab310..76309d7d1fc 100644 --- a/apps/studio/components/interfaces/ProjectAPIDocs/ContentSnippet.tsx +++ b/apps/studio/components/interfaces/ProjectAPIDocs/ContentSnippet.tsx @@ -1,6 +1,6 @@ import { useParams } from 'common' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' import { Markdown } from '../Markdown' import { PropsWithChildren } from 'react' diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/ResourceContent.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/ResourceContent.tsx index a15bf10ac81..557e9163fd6 100644 --- a/apps/studio/components/interfaces/ProjectAPIDocs/ResourceContent.tsx +++ b/apps/studio/components/interfaces/ProjectAPIDocs/ResourceContent.tsx @@ -2,7 +2,7 @@ import { useParams } from 'common' import Link from 'next/link' import { Button } from 'ui' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' import { Markdown } from '../Markdown' import { ExternalLink } from 'lucide-react' diff --git a/apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx b/apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx index def6119d3eb..12c2f191f4f 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx @@ -6,7 +6,7 @@ import { toast } from 'sonner' import DownloadSnippetModal from 'components/interfaces/SQLEditor/DownloadSnippetModal' import RenameQueryModal from 'components/interfaces/SQLEditor/RenameQueryModal' -import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock' +import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock' import CopyButton from 'components/ui/CopyButton' import { useContentDeleteMutation } from 'data/content/content-delete-mutation' import type { SqlSnippet } from 'data/content/sql-snippets-query' diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index 8dc98662ae4..2e93ef25595 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -19,6 +19,7 @@ export * from './src/components/Alert' export * from './src/components/Accordion' export * from './src/components/Collapsible' export * from './src/components/CodeBlock' +export * from './src/components/SimpleCodeBlock' export * from './src/components/TreeView/TreeView' // NAV diff --git a/apps/studio/components/to-be-cleaned/SimpleCodeBlock.tsx b/packages/ui/src/components/SimpleCodeBlock/SimpleCodeBlock.tsx similarity index 93% rename from apps/studio/components/to-be-cleaned/SimpleCodeBlock.tsx rename to packages/ui/src/components/SimpleCodeBlock/SimpleCodeBlock.tsx index f238c8fa330..9fa89971af6 100644 --- a/apps/studio/components/to-be-cleaned/SimpleCodeBlock.tsx +++ b/packages/ui/src/components/SimpleCodeBlock/SimpleCodeBlock.tsx @@ -1,3 +1,4 @@ +'use client' /** * Copyright (c) 2017-present, Facebook, Inc. * @@ -7,10 +8,9 @@ import { Prism, themes, Highlight, Language } from 'prism-react-renderer' import { PropsWithChildren, useEffect, useRef, useState } from 'react' -import { Button } from 'ui' +import { Button, copyToClipboard } from 'ui' import { useTheme } from 'next-themes' -import { copyToClipboard } from 'lib/helpers' -import { dart } from 'lib/constants/prism' +import { dart } from './prism' dart(Prism) @@ -25,7 +25,7 @@ interface SimpleCodeBlockProps { showCopy?: boolean } -const SimpleCodeBlock = ({ +export const SimpleCodeBlock = ({ children, parentClassName, className: languageClassName, @@ -91,5 +91,3 @@ const SimpleCodeBlock = ({ ) } - -export default SimpleCodeBlock diff --git a/packages/ui/src/components/SimpleCodeBlock/index.tsx b/packages/ui/src/components/SimpleCodeBlock/index.tsx new file mode 100644 index 00000000000..5297b45df4f --- /dev/null +++ b/packages/ui/src/components/SimpleCodeBlock/index.tsx @@ -0,0 +1 @@ +export * from './SimpleCodeBlock' diff --git a/apps/studio/lib/constants/prism.ts b/packages/ui/src/components/SimpleCodeBlock/prism.ts similarity index 100% rename from apps/studio/lib/constants/prism.ts rename to packages/ui/src/components/SimpleCodeBlock/prism.ts diff --git a/packages/ui/src/lib/utils/clipboard.ts b/packages/ui/src/lib/utils/clipboard.ts new file mode 100644 index 00000000000..5661c1b8d50 --- /dev/null +++ b/packages/ui/src/lib/utils/clipboard.ts @@ -0,0 +1,38 @@ +import { noop } from 'lodash' +import { toast } from 'sonner' + +/** + * Copy text content (string or Promise) into Clipboard. Safari doesn't support write text into clipboard async, + * so if you need to load text content async before coping, please use Promise for the 1st arg. + * + * IF YOU NEED TO CHANGE THIS FUNCTION, PLEASE TEST IT IN SAFARI with a promised string. Expiring URL to a file in a + * private bucket will do. + * + * Copied code from https://wolfgangrittner.dev/how-to-use-clipboard-api-in-firefox/ + */ +export const copyToClipboard = async (str: string | Promise, callback = noop) => { + const focused = window.document.hasFocus() + if (focused) { + if (typeof ClipboardItem && navigator.clipboard?.write) { + // NOTE: Safari locks down the clipboard API to only work when triggered + // by a direct user interaction. You can't use it async in a promise. + // But! You can wrap the promise in a ClipboardItem, and give that to + // the clipboard API. + // Found this on https://developer.apple.com/forums/thread/691873 + const text = new ClipboardItem({ + 'text/plain': Promise.resolve(str).then((text) => new Blob([text], { type: 'text/plain' })), + }) + navigator.clipboard.write([text]).then(callback) + } else { + // NOTE: Firefox has support for ClipboardItem and navigator.clipboard.write, + // but those are behind `dom.events.asyncClipboard.clipboardItem` preference. + // Good news is that other than Safari, Firefox does not care about + // Clipboard API being used async in a Promise. + Promise.resolve(str) + .then((text) => navigator.clipboard?.writeText(text)) + .then(callback) + } + } else { + toast.error('Unable to copy to clipboard') + } +} diff --git a/packages/ui/src/lib/utils/index.ts b/packages/ui/src/lib/utils/index.ts index 524b85fccef..b69b50d5098 100644 --- a/packages/ui/src/lib/utils/index.ts +++ b/packages/ui/src/lib/utils/index.ts @@ -1,3 +1,4 @@ export * from './cn' export * from './mergeDeep' export * from './randomIdGenerator' +export * from './clipboard'