docs: add code mirror

packages/Accordion/docs/index.mdx

@@ -2,24 +2,7 @@
 category: data-display
 ---
 
-export { getStaticProps } from '../../getStaticProps'
-
-import {
-  dependencies,
-  peerDependencies,
-  component,
-  name,
-  version,
-} from '@welcome-ui/accordion/package.json'
-
-<showcase
-  version={version}
-  name={name}
-  component={component}
-  description="Allows the user to show and hide sections of related content on a page."
-/>
-
-## About
+# Accordion
 
 Built with [Ariakit](https://ariakit.org/components/disclosure) for a better accessibility 🌈
 
@@ -105,19 +88,3 @@ And the hook returns (among other things):
 
 - `useState('open')`: whether the accordion is currently open
 - `hide`: a function to hide the accordion
-
-## Properties
-
-<props propTypes={props.propTypes.Accordion} />
-
-## Packages
-
-### Dependencies
-
-<dependencies dependencies={dependencies} />
-
-### Peer dependencies
-
-<dependencies dependencies={peerDependencies} />
-
-<pagination />

packages/Box/package.json

@@ -15,7 +15,7 @@
     "./dist/index.doc.json": "./dist/index.doc.json"
   },
   "scripts": {
-    "build": "node ../../scripts/build.js",
+    "build": "node ../../scripts/build.js --useClient",
     "test": "jest",
     "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
     "doc": "node -r esm ../../scripts/doc-props.js --name Box"

packages/Link/package.json

@@ -15,7 +15,7 @@
     "./dist/index.doc.json": "./dist/index.doc.json"
   },
   "scripts": {
-    "build": "node ../../scripts/build.js",
+    "build": "node ../../scripts/build.js --useClient",
     "test": "jest",
     "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
     "doc": "node -r esm ../../scripts/doc-props.js --name Link"

packages/Text/package.json

@@ -15,7 +15,7 @@
     "./dist/index.doc.json": "./dist/index.doc.json"
   },
   "scripts": {
-    "build": "node ../../scripts/build.js",
+    "build": "node ../../scripts/build.js --useClient",
     "test": "jest",
     "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
     "doc": "node -r esm ../../scripts/doc-props.js --name Text"

website/build-app/components/Mdx/Pre.tsx

@@ -0,0 +1,27 @@
+'use client'
+import CodeMirror from '@uiw/react-codemirror'
+import { javascript } from '@codemirror/lang-javascript'
+import * as React from 'react'
+
+interface PreProps {
+  children: React.ReactNode[]
+}
+
+export function Pre({ children, ...rest }: PreProps) {
+  // @ts-ignore
+  const [code] = children[0].props.children
+  const [codeUpdated, setCodeUpdate] = React.useState(code)
+
+  const onChange = React.useCallback((newCode: React.ReactNode) => {
+    setCodeUpdate(newCode)
+  }, [])
+
+  return (
+    <CodeMirror
+      value={codeUpdated}
+      height="200px"
+      extensions={[javascript({ jsx: true, typescript: true })]}
+      onChange={onChange}
+    />
+  )
+}

website/build-app/components/Mdx/index.tsx

@@ -1,19 +1,44 @@
 import kebabCase from 'lodash/kebabCase'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import { Text } from '@welcome-ui/text'
+import { Link } from '@welcome-ui/link'
+import { Box } from '@welcome-ui/box'
+import { Pre } from './Pre'
 
-const markdown = `Just a link: https://reactjs.com.`
-
-export function Mdx({ children = markdown }) {
+export function Mdx({ children = '' }) {
   return (
     <div style={{ maxWidth: '100%' }}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{
-          // @ts-ignore
-          pre: props => <pre style={{ textWrap: 'wrap' }} {...props} />,
-          h2: ({ children }) => <h2 id={`${kebabCase(children.toString())}`}>{children}</h2>,
-          h3: ({ children }) => <h3 id={`${kebabCase(children.toString())}`}>{children}</h3>,
+          pre: props => <Pre {...props} />,
+          h1: ({ children }) => (
+            <Text variant="h1" id={`${kebabCase(children.toString())}`}>
+              {children}
+            </Text>
+          ),
+          h2: ({ children }) => (
+            <Text variant="h2" id={`${kebabCase(children.toString())}`}>
+              {children}
+            </Text>
+          ),
+          h3: ({ children }) => (
+            <Text variant="h3" id={`${kebabCase(children.toString())}`}>
+              {children}
+            </Text>
+          ),
+          h4: ({ children }) => (
+            <Text variant="h4" id={`${kebabCase(children.toString())}`}>
+              {children}
+            </Text>
+          ),
+          a: ({ href, ...props }) => <Link isExternal href={href} {...props} />,
+          code: ({ children }) => (
+            <Box as="code" backgroundColor="dark-100" color="dark-900" p="xs" borderRadius={2}>
+              {children}
+            </Box>
+          ),
         }}
       >
         {children}

website/build-app/components/ThemeProvider/index.tsx

@@ -1,14 +1,14 @@
 'use client'
-import { WuiProvider, createTheme } from '@welcome-ui/core'
+import { WuiProvider, WuiProviderProps, createTheme } from '@welcome-ui/core'
 import { welcomeTheme } from '@welcome-ui/themes.welcome'
-import { useMemo } from 'react'
+import * as React from 'react'
 
 interface ThemeProviderProps {
-  children: React.ReactNode
+  children: WuiProviderProps['children']
 }
 
 export function ThemeProvider({ children }: ThemeProviderProps) {
-  const theme = useMemo(() => createTheme(welcomeTheme), [])
+  const theme = React.useMemo(() => createTheme(welcomeTheme), [])
 
   return <WuiProvider theme={theme}>{children}</WuiProvider>
 }

website/build-app/registry.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import * as React from 'react'
 import { useServerInsertedHTML } from 'next/navigation'
 import { ServerStyleSheet, StyleSheetManager, StyleSheetManagerProps } from 'styled-components'
 
@@ -11,7 +11,7 @@ interface StyledComponentsRegistryProps {
 export default function StyledComponentsRegistry({ children }: StyledComponentsRegistryProps) {
   // Only create stylesheet once with lazy initial state
   // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
-  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+  const [styledComponentsStyleSheet] = React.useState(() => new ServerStyleSheet())
 
   useServerInsertedHTML(() => {
     const styles = styledComponentsStyleSheet.getStyleElement()

website/package.json

@@ -9,10 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.1.9",
     "@types/lodash": "^4.14.196",
     "@types/node": "20.4.5",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
+    "@uiw/react-codemirror": "^4.21.9",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",
     "gray-matter": "^4.0.3",