refactor: move CodeBlock component to ui package

apps/docs/components/JwtGenerator.js

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import KJUR from 'jsrsasign'
-import CodeBlock from './CodeBlock/CodeBlock'
-import { Button, Select, Input } from 'ui'
+import { Button, Select, Input, CodeBlock } from 'ui'
 
 const JWT_HEADER = { alg: 'HS256', typ: 'JWT' }
 const now = new Date()

apps/docs/components/index.tsx

@@ -1,31 +1,27 @@
-import { Button, Tabs, Alert, GlassPanel } from 'ui'
 import Link from 'next/link'
+import { Alert, Button, CodeBlock, GlassPanel, markdownComponents, Tabs } from 'ui'
 import StepHikeCompact from '~/components/StepHikeCompact'
 
 // Common components
 import Admonition from './Admonition'
 import ButtonCard from './ButtonCard'
-import CodeBlock from './CodeBlock/CodeBlock'
-import { parseNumericRange } from './CodeBlock/CodeBlock.utils'
 import JwtGenerator from './JwtGenerator'
 
 // Page specific components
-import Frameworks from './Frameworks'
 import AuthProviders from './AuthProviders'
-import FunctionsExamples from './FunctionsExamples'
 import Extensions from './Extensions'
+import Frameworks from './Frameworks'
+import FunctionsExamples from './FunctionsExamples'
 
 // Other components
-import { Heading } from './CustomHTMLElements'
-import QuickstartIntro from './MDX/quickstart_intro.mdx'
-import ProjectSetup from './MDX/project_setup.mdx'
-import SocialProviderSetup from './MDX/social_provider_setup.mdx'
-import SocialProviderSettingsSupabase from './MDX/social_provider_settings_supabase.mdx'
-import StorageManagement from './MDX/storage_management.mdx'
 import { Mermaid } from 'mdx-mermaid/lib/Mermaid'
-import InlineCodeTag from './CustomHTMLElements/InlineCode'
-import React from 'react'
 import RefSubLayout from '~/layouts/ref/RefSubLayout'
+import { Heading } from './CustomHTMLElements'
+import ProjectSetup from './MDX/project_setup.mdx'
+import QuickstartIntro from './MDX/quickstart_intro.mdx'
+import SocialProviderSettingsSupabase from './MDX/social_provider_settings_supabase.mdx'
+import SocialProviderSetup from './MDX/social_provider_setup.mdx'
+import StorageManagement from './MDX/storage_management.mdx'
 // import { CH } from '@code-hike/mdx/components'
 import RefHeaderSection from './reference/RefHeaderSection'
 
@@ -34,9 +30,9 @@ import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlo
 
 import Options from '~/components/Options'
 import Param from '~/components/Params'
-import Image from 'next/image'
 
 const components = {
+  ...markdownComponents,
   Admonition,
   Button,
   ButtonCard,
@@ -72,26 +68,11 @@ const components = {
       {props.children}
     </Heading>
   ),
-  // pre: (props: any) => {
-  //   const linesToHighlight = parseNumericRange(props.lines ?? '')
-  //   return <CodeBlock {...props} linesToHighlight={linesToHighlight} />
-  // },
-  mono: (props: any) => <code className="text-sm">{props.children}</code>,
-  // inlineCode: (props: { children: string }) => <InlineCodeTag {...props} />,
   RefSubLayout,
-  // CH,
-  code: (props: any) => <CodeBlock {...props} />,
   RefHeaderSection: (props: any) => <RefHeaderSection {...props} />,
   CliGlobalFlagsHandler: () => <CliGlobalFlagsHandler />,
   Options,
   Param,
-  img: (props: any) => {
-    return (
-      <span className={['next-image--dynamic-fill'].join(' ')}>
-        <Image {...props} className={['rounded-md border'].join(' ')} layout="fill" />
-      </span>
-    )
-  },
 }
 
 export default components

apps/docs/components/reference/ApiOperationSection.tsx

@@ -1,5 +1,4 @@
-import { Tabs } from '~/../../packages/ui'
-import CodeBlock from '~/components/CodeBlock/CodeBlock'
+import { CodeBlock, Tabs } from 'ui'
 import Param from '~/components/Params'
 import RefSubLayout from '~/layouts/ref/RefSubLayout'
 

apps/docs/components/reference/CLICommandSection.tsx

@@ -1,8 +1,7 @@
 import ReactMarkdown from 'react-markdown'
-import { IconChevronRight, Tabs } from '~/../../packages/ui'
+import { CodeBlock, IconChevronRight, Tabs } from 'ui'
 // @ts-expect-error
 import spec from '~/../../spec/cli_v1_commands.yaml' assert { type: 'yml' }
-import CodeBlock from '~/components/CodeBlock/CodeBlock'
 import Options from '~/components/Options'
 import Param from '~/components/Params'
 import RefSubLayout from '~/layouts/ref/RefSubLayout'

apps/docs/components/reference/RefFunctionSection.tsx

@@ -1,7 +1,6 @@
 import ReactMarkdown from 'react-markdown'
 
-import { IconDatabase, Tabs } from 'ui'
-import CodeBlock from '~/components/CodeBlock/CodeBlock'
+import { CodeBlock, IconDatabase, Tabs } from 'ui'
 
 import Options from '~/components/Options'
 import Param from '~/components/Params'

apps/docs/pages/reference/auth/[...slug].tsx

@@ -1,9 +1,7 @@
+import { CodeBlock, Tabs } from 'ui'
 import specFile from '~/../../spec/transforms/auth_v1_openapi_deparsed.json' assert { type: 'json' }
-import { gen_v3, enrichedOperation } from '~/lib/refGenerator/helpers'
-import { Tabs } from '~/../../packages/ui'
+import { gen_v3 } from '~/lib/refGenerator/helpers'
 
-// @ts-ignore
-import CodeBlock from '~/components/CodeBlock/CodeBlock'
 import RefSubLayout from '~/layouts/ref/RefSubLayout'
 
 export type AcceptedValue = {

apps/docs/pages/reference/storage/[...slug].tsx

@@ -1,9 +1,7 @@
+import { CodeBlock, Tabs } from 'ui'
 import specFile from '~/../../spec/transforms/storage_v0_openapi_deparsed.json' assert { type: 'json' }
-import { gen_v3, enrichedOperation } from '~/lib/refGenerator/helpers'
-import { Tabs } from '~/../../packages/ui'
+import { gen_v3 } from '~/lib/refGenerator/helpers'
 
-// @ts-ignore
-import CodeBlock from '~/components/CodeBlock/CodeBlock'
 import RefSubLayout from '~/layouts/ref/RefSubLayout'
 
 export type AcceptedValue = {

package-lock.json

@@ -38428,7 +38428,9 @@
         "lodash": "^4.17.20",
         "postcss": "^8.4.5",
         "prop-types": "^15.7.2",
+        "react-copy-to-clipboard": "^5.1.0",
         "react-feather": "^2.0.10",
+        "react-syntax-highlighter": "^15.5.0",
         "tailwindcss": "^3.0.15",
         "tailwindcss-radix": "^1.6.0"
       },
@@ -66933,7 +66935,9 @@
         "lodash": "^4.17.20",
         "postcss": "^8.4.5",
         "prop-types": "^15.7.2",
+        "react-copy-to-clipboard": "^5.1.0",
         "react-feather": "^2.0.10",
+        "react-syntax-highlighter": "*",
         "tailwindcss": "^3.0.15",
         "tailwindcss-radix": "^1.6.0",
         "typescript": "4.3.4"

packages/ui/index.tsx

@@ -4,6 +4,10 @@ import * as React from 'react'
 
 export * from './src/providers'
 
+// Markdown components
+
+export * from './src/lib/Markdown'
+
 // // GENERAL
 
 export * from './src/components/Button'
@@ -21,6 +25,7 @@ export * from './src/components/Tabs'
 export * from './src/components/Alert'
 export * from './src/components/Accordion'
 export * from './src/components/Collapsible'
+export * from './src/components/CodeBlock'
 // export * from './src/components/Breadcrumb'
 
 // NAV

packages/ui/package.json

@@ -27,7 +27,9 @@
     "lodash": "^4.17.20",
     "postcss": "^8.4.5",
     "prop-types": "^15.7.2",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-feather": "^2.0.10",
+    "react-syntax-highlighter": "^15.5.0",
     "tailwindcss": "^3.0.15",
     "tailwindcss-radix": "^1.6.0"
   },

packages/ui/src/components/CodeBlock/CodeBlock.tsx

@@ -1,7 +1,8 @@
+import * as React from 'react'
 import { Children, FC } from 'react'
-import CopyToClipboard from 'react-copy-to-clipboard'
+import * as CopyToClipboard from 'react-copy-to-clipboard'
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
-import monokaiCustomTheme from './CodeBlock.utils'
+import { monokaiCustomTheme } from './CodeBlock.utils'
 import { Button, IconCheck, IconCopy } from 'ui'
 
 import js from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript'
@@ -16,7 +17,7 @@ import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json'
 import { useState } from 'react'
 import { useTheme } from 'common/Providers'
 
-interface Props {
+export interface CodeBlockProps {
   title?: string
   language: 'js' | 'jsx' | 'sql' | 'py' | 'bash' | 'ts' | 'dart' | 'json' | 'csharp'
   linesToHighlight?: number[]
@@ -27,7 +28,7 @@ interface Props {
   children?: string
 }
 
-const CodeBlock: FC<Props> = ({
+export const CodeBlock = ({
   title,
   language,
   linesToHighlight = [],
@@ -36,7 +37,7 @@ const CodeBlock: FC<Props> = ({
   children,
   hideCopy = false,
   hideLineNumbers = false,
-}) => {
+}: CodeBlockProps) => {
   const { isDarkMode } = useTheme()
   const monokaiTheme = monokaiCustomTheme(isDarkMode)
 
@@ -156,5 +157,3 @@ const CodeBlock: FC<Props> = ({
     </>
   )
 }
-
-export default CodeBlock

packages/ui/src/components/CodeBlock/CodeBlock.utils.ts

@@ -1,9 +1,9 @@
 // https://github.com/euank/node-parse-numeric-range/blob/master/index.js
-export function parseNumericRange(string) {
+export function parseNumericRange(value: string) {
   let res = []
   let m
 
-  for (let str of string.split(',').map((str) => str.trim())) {
+  for (let str of value.split(',').map((str) => str.trim())) {
     // just a number
     if (/^-?\d+$/.test(str)) {
       res.push(parseInt(str, 10))
@@ -27,7 +27,7 @@ export function parseNumericRange(string) {
   return res
 }
 
-const monokaiCustomTheme = (isDarkMode) => {
+export const monokaiCustomTheme = (isDarkMode: boolean) => {
   return {
     hljs: {
       display: 'block',
@@ -142,5 +142,3 @@ const monokaiCustomTheme = (isDarkMode) => {
     },
   }
 }
-
-export default monokaiCustomTheme

packages/ui/src/components/CodeBlock/index.tsx

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

packages/ui/src/lib/Markdown/index.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { CodeBlock } from '../../components/CodeBlock/CodeBlock'
+import Image from 'next/image'
+
+export const markdownComponents = {
+  mono: (props: any) => <code className="text-sm">{props.children}</code>,
+  code: (props: any) => <CodeBlock {...props} />,
+  img: (props: any) => {
+    return (
+      <span className={['next-image--dynamic-fill'].join(' ')}>
+        <Image {...props} className={['rounded-md border'].join(' ')} layout="fill" />
+      </span>
+    )
+  },
+}