diff --git a/apps/docs/components/JwtGenerator.js b/apps/docs/components/JwtGenerator.js
index 4ac1b05e255..d0dc7a7bf08 100644
--- a/apps/docs/components/JwtGenerator.js
+++ b/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()
diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx
index 2c6de4992b5..8178b4d51f5 100644
--- a/apps/docs/components/index.tsx
+++ b/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}
),
- // pre: (props: any) => {
- // const linesToHighlight = parseNumericRange(props.lines ?? '')
- // return
- // },
- mono: (props: any) => {props.children},
- // inlineCode: (props: { children: string }) => ,
RefSubLayout,
- // CH,
- code: (props: any) => ,
RefHeaderSection: (props: any) => ,
CliGlobalFlagsHandler: () => ,
Options,
Param,
- img: (props: any) => {
- return (
-
-
-
- )
- },
}
export default components
diff --git a/apps/docs/components/reference/ApiOperationSection.tsx b/apps/docs/components/reference/ApiOperationSection.tsx
index f97549b4775..6713809bccf 100644
--- a/apps/docs/components/reference/ApiOperationSection.tsx
+++ b/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'
diff --git a/apps/docs/components/reference/CLICommandSection.tsx b/apps/docs/components/reference/CLICommandSection.tsx
index 9217dd4980f..d20c1db8086 100644
--- a/apps/docs/components/reference/CLICommandSection.tsx
+++ b/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'
diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx
index 8b228a6bfa6..ddb35ba930b 100644
--- a/apps/docs/components/reference/RefFunctionSection.tsx
+++ b/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'
diff --git a/apps/docs/pages/reference/auth/[...slug].tsx b/apps/docs/pages/reference/auth/[...slug].tsx
index ad57871576b..68603c86b07 100644
--- a/apps/docs/pages/reference/auth/[...slug].tsx
+++ b/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 = {
diff --git a/apps/docs/pages/reference/storage/[...slug].tsx b/apps/docs/pages/reference/storage/[...slug].tsx
index 9068c3008c7..bfd42d2719a 100644
--- a/apps/docs/pages/reference/storage/[...slug].tsx
+++ b/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 = {
diff --git a/package-lock.json b/package-lock.json
index b0bcd07d8d7..ba8018c9a62 100644
--- a/package-lock.json
+++ b/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"
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 3edb9ec62c3..375afa29f51 100644
--- a/packages/ui/index.tsx
+++ b/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
diff --git a/packages/ui/package.json b/packages/ui/package.json
index fdcb547ecff..568cd7207fb 100644
--- a/packages/ui/package.json
+++ b/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"
},
diff --git a/apps/docs/components/CodeBlock/CodeBlock.tsx b/packages/ui/src/components/CodeBlock/CodeBlock.tsx
similarity index 95%
rename from apps/docs/components/CodeBlock/CodeBlock.tsx
rename to packages/ui/src/components/CodeBlock/CodeBlock.tsx
index b54e01b699f..b1f443ab128 100644
--- a/apps/docs/components/CodeBlock/CodeBlock.tsx
+++ b/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 = ({
+export const CodeBlock = ({
title,
language,
linesToHighlight = [],
@@ -36,7 +37,7 @@ const CodeBlock: FC = ({
children,
hideCopy = false,
hideLineNumbers = false,
-}) => {
+}: CodeBlockProps) => {
const { isDarkMode } = useTheme()
const monokaiTheme = monokaiCustomTheme(isDarkMode)
@@ -156,5 +157,3 @@ const CodeBlock: FC = ({
)
}
-
-export default CodeBlock
diff --git a/apps/docs/components/CodeBlock/CodeBlock.utils.js b/packages/ui/src/components/CodeBlock/CodeBlock.utils.ts
similarity index 93%
rename from apps/docs/components/CodeBlock/CodeBlock.utils.js
rename to packages/ui/src/components/CodeBlock/CodeBlock.utils.ts
index 48b62cffc1e..c63a767346c 100644
--- a/apps/docs/components/CodeBlock/CodeBlock.utils.js
+++ b/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
diff --git a/packages/ui/src/components/CodeBlock/index.tsx b/packages/ui/src/components/CodeBlock/index.tsx
new file mode 100644
index 00000000000..412da3582da
--- /dev/null
+++ b/packages/ui/src/components/CodeBlock/index.tsx
@@ -0,0 +1 @@
+export * from './CodeBlock'
diff --git a/packages/ui/src/lib/Markdown/index.tsx b/packages/ui/src/lib/Markdown/index.tsx
new file mode 100644
index 00000000000..09274ae7ac9
--- /dev/null
+++ b/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) => {props.children},
+ code: (props: any) => ,
+ img: (props: any) => {
+ return (
+
+
+
+ )
+ },
+}