chore: Clean the ui package from next imports (#44278)

This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.

`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.

The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.

packages/ui-patterns/src/SimpleCodeBlock/SimpleCodeBlock.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useTheme } from 'next-themes'
+import { Highlight, Language, Prism, themes } from 'prism-react-renderer'
+import { createContext, PropsWithChildren, useContext, useEffect, useRef, useState } from 'react'
+import { Button, cn, copyToClipboard } from 'ui'
+
+import { dart } from './prism'
+
+// Context for copy callback - can be provided by parent components
+export const CopyCallbackContext = createContext<(() => void) | undefined>(undefined)
+
+dart(Prism)
+
+const prism = {
+  defaultLanguage: 'js',
+  plugins: ['line-numbers', 'show-language'],
+}
+
+interface SimpleCodeBlockProps {
+  parentClassName?: string
+  className?: string
+  showCopy?: boolean
+  onCopy?: () => void
+  handleCopy?: (value: string) => void
+}
+
+// [Joshen] Refactor: De-dupe with CodeBlock.tsx
+export const SimpleCodeBlock = ({
+  children,
+  parentClassName,
+  className: languageClassName,
+  showCopy = true,
+  onCopy,
+  handleCopy,
+}: PropsWithChildren<SimpleCodeBlockProps>) => {
+  const { resolvedTheme } = useTheme()
+  const [showCopied, setShowCopied] = useState(false)
+  const target = useRef(null)
+  const contextOnCopy = useContext(CopyCallbackContext)
+  let highlightLines: any = []
+
+  useEffect(() => {
+    if (!showCopied) return
+    const timer = setTimeout(() => setShowCopied(false), 2000)
+    return () => clearTimeout(timer)
+  }, [showCopied])
+
+  let language = languageClassName && languageClassName.replace(/language-/, '')
+
+  if (!language && prism.defaultLanguage) {
+    language = prism.defaultLanguage
+  }
+
+  const handleCopyCode = (code: any) => {
+    if (!!handleCopy) {
+      handleCopy(code)
+    } else {
+      copyToClipboard(code)
+    }
+    setShowCopied(true)
+    // Use prop onCopy if provided, otherwise fall back to context
+    const copyCallback = onCopy || contextOnCopy
+    copyCallback?.()
+  }
+
+  return (
+    <Highlight
+      theme={resolvedTheme === 'dark' ? themes.nightOwl : themes.nightOwlLight}
+      code={(children as string)?.trim() ?? ''}
+      language={language as Language}
+    >
+      {({ className, tokens, getLineProps, getTokenProps }) => {
+        return (
+          <div className="Code codeBlockWrapper group">
+            <pre ref={target} className={cn('codeBlock', className, parentClassName)}>
+              {tokens.map((line, i) => {
+                const { key: _key, ...lineProps } = getLineProps({ line, key: i })
+
+                if (highlightLines.includes(i + 1)) {
+                  lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`
+                }
+
+                return (
+                  <div key={i} {...lineProps}>
+                    {line.map((token, key) => {
+                      const { key: _key, ...tokenProps } = getTokenProps({ token, key })
+                      return <span key={key} {...tokenProps} />
+                    })}
+                  </div>
+                )
+              })}
+            </pre>
+            {showCopy && (
+              <div className="invisible absolute right-0 top-0 opacity-0 transition-opacity group-hover:visible group-hover:opacity-100">
+                <Button size="tiny" type="default" onClick={() => handleCopyCode(children)}>
+                  {showCopied ? 'Copied' : 'Copy'}
+                </Button>
+              </div>
+            )}
+          </div>
+        )
+      }}
+    </Highlight>
+  )
+}

packages/ui-patterns/src/SimpleCodeBlock/index.tsx

@@ -0,0 +1 @@
+export * from './SimpleCodeBlock'

packages/ui-patterns/src/SimpleCodeBlock/prism.ts

@@ -0,0 +1,79 @@
+// Prism syntax highlighting referenced from Refractor
+// https://github.com/wooorm/refractor/blob/main/lang/dart.js
+
+export function dart(Prism: any) {
+  // Handles named imports, such as http.Client
+  const keywords = [
+    /\b(?:async|sync|yield)\*/,
+    /\b(?:abstract|assert|async|await|break|case|catch|class|const|continue|covariant|default|deferred|do|dynamic|else|enum|export|extends|extension|external|factory|final|finally|for|get|hide|if|implements|import|in|interface|library|mixin|new|null|on|operator|part|rethrow|return|set|show|static|super|switch|sync|this|throw|try|typedef|var|void|while|with|yield)\b/,
+  ]
+
+  // based on the dart naming conventions
+  const packagePrefix = /(^|[^\w.])(?:[a-z]\w*\s*\.\s*)*(?:[A-Z]\w*\s*\.\s*)*/.source
+
+  const className = {
+    pattern: RegExp(packagePrefix + /[A-Z](?:[\d_A-Z]*[a-z]\w*)?\b/.source),
+    lookbehind: true,
+    inside: {
+      namespace: {
+        pattern: /^[a-z]\w*(?:\s*\.\s*[a-z]\w*)*(?:\s*\.)?/,
+        inside: {
+          punctuation: /\./,
+        },
+      },
+    },
+  }
+
+  Prism.languages.dart = Prism.languages.extend('clike', {
+    'class-name': [
+      className,
+      {
+        // variables and parameters
+        // supports class names (or generic parameters) which do not contain a lower case letter (also works for methods)
+        pattern: RegExp(packagePrefix + /[A-Z]\w*(?=\s+\w+\s*[;,=()])/.source),
+        lookbehind: true,
+        inside: className.inside,
+      },
+    ],
+    keyword: keywords,
+    operator: /\bis!|\b(?:as|is)\b|\+\+|--|&&|\|\||<<=?|>>=?|~(?:\/=?)?|[+\-*\/%&^|=!<>]=?|\?/,
+  })
+  Prism.languages.insertBefore('dart', 'string', {
+    'string-literal': {
+      pattern: /r?(?:("""|''')[\s\S]*?\1|(["'])(?:\\.|(?!\2)[^\\\r\n])*\2(?!\2))/,
+      greedy: true,
+      inside: {
+        interpolation: {
+          pattern: /((?:^|[^\\])(?:\\{2})*)\$(?:\w+|\{(?:[^{}]|\{[^{}]*\})*\})/,
+          lookbehind: true,
+          inside: {
+            punctuation: /^\$\{?|\}$/,
+            expression: {
+              pattern: /[\s\S]+/,
+              inside: Prism.languages.dart,
+            },
+          },
+        },
+        string: /[\s\S]+/,
+      },
+    },
+    string: undefined,
+  })
+  Prism.languages.insertBefore('dart', 'class-name', {
+    metadata: {
+      pattern: /@\w+/,
+      alias: 'function',
+    },
+  })
+  Prism.languages.insertBefore('dart', 'class-name', {
+    generics: {
+      pattern: /<(?:[\w\s,.&?]|<(?:[\w\s,.&?]|<(?:[\w\s,.&?]|<[\w\s,.&?]*>)*>)*>)*>/,
+      inside: {
+        'class-name': className,
+        keyword: keywords,
+        punctuation: /[<>(),.:]/,
+        operator: /[?&|]/,
+      },
+    },
+  })
+}