Browse Source

added support for mdx

pull/3/head
remorses 1 year ago
parent
commit
188aafd01e
9 changed files with 1237 additions and 1436 deletions
  1. +1
    -2
      core/package.json
  2. +13
    -6
      demos/next.config.js
  3. +3
    -0
      demos/package.json
  4. +211
    -0
      demos/src/components/CodeBlock.tsx
  5. +165
    -0
      demos/src/components/mdx.tsx
  6. +5
    -1
      demos/src/pages/_app.tsx
  7. +15
    -0
      demos/src/pages/docs/test.mdx
  8. +2
    -1
      package.json
  9. +822
    -1426
      yarn.lock

+ 1
- 2
core/package.json View File

@ -29,7 +29,7 @@
"@svgr/cli": "^5.3.0",
"@types/mocha": "^5.2.7",
"@types/node": "^12.0.7",
"@types/react": "^16.9.25",
"@types/react": "^16.9.31",
"dotenv": "^8.2.0",
"mocha": "^6.1.4",
"react": "^16.13.1",
@ -42,7 +42,6 @@
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"@types/lodash.get": "^4.4.6",
"@types/react": "^16.9.26",
"color-js": "^1.0.5",
"emotion-theming": "^10.0.27",
"intersection-observer": "^0.7.0",

+ 13
- 6
demos/next.config.js View File

@ -1,8 +1,15 @@
const path = require('path')
const withTM = require('next-transpile-modules')(['react-landing', 'chakra-ui-forms']) // pass the modules you would like to see transpiled
const withTM = require('next-transpile-modules')([
'react-landing',
'chakra-ui-forms',
]) // pass the modules you would like to see transpiled
const withMDX = require('@next/mdx')()
module.exports = withTM({
webpack: (config) => {
return config
},
})
module.exports = withMDX(
withTM({
pageExtensions: ['js', 'jsx', 'md', 'mdx', 'tsx'],
webpack: (config) => {
return config
},
}),
)

+ 3
- 0
demos/package.json View File

@ -15,7 +15,10 @@
},
"dependencies": {
"@chakra-ui/core": "^0.7.0",
"@mdx-js/loader": "^1.5.8",
"@mdx-js/react": "^1.5.8",
"@monaco-editor/react": "^3.1.2",
"@next/mdx": "^9.3.4",
"@types/lodash": "^4.14.149",
"@types/node": "^13.9.3",
"@types/react": "^16.9.25",

+ 211
- 0
demos/src/components/CodeBlock.tsx View File

@ -0,0 +1,211 @@
import React, { useState, CSSProperties } from 'react'
import lightTheme from 'prism-react-renderer/themes/nightOwlLight'
import darkTheme from 'prism-react-renderer/themes/nightOwl'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
// import Highlight, { defaultProps } from "prism-react-renderer";
import { mdx } from '@mdx-js/react'
import * as Chakra from '@chakra-ui/core'
import * as ReactIcons from 'react-icons/md'
import FocusLock from 'react-focus-lock'
const { Box, Button, useClipboard, useColorMode } = Chakra
export const liveEditorStyle: CSSProperties = {
fontSize: 14,
marginBottom: 32,
marginTop: 32,
overflowX: 'auto',
fontFamily: 'Menlo,monospace',
borderRadius: 10,
}
// const highlightStyle = {
// padding: 20,
// fontSize: 14,
// overflow: "auto",
// lineHeight: "1.5",
// fontFamily: "Menlo,monospace",
// };
export const liveErrorStyle: CSSProperties = {
fontFamily: 'Menlo, monospace',
fontSize: 14,
padding: '1em',
overflowX: 'auto',
color: 'white',
backgroundColor: 'red',
}
const LiveCodePreview = (props) => (
<Box
as={LivePreview}
fontFamily='body'
mt={5}
p={3}
border='1px'
borderColor='inherit'
rounded='md'
{...props}
/>
)
const CopyButton = (props) => (
<Button
size='sm'
position='absolute'
textTransform='uppercase'
variantColor='teal'
fontSize='xs'
height='24px'
top={0}
zIndex='1'
right='1.25em'
{...props}
/>
)
const EditableNotice = (props) => {
const { colorMode } = useColorMode()
const bg = { light: '#fbfbfb', dark: '#011627' }
return (
<Box
position='absolute'
width='full'
top='-1.25em'
roundedTop='10px'
bg={bg['dark']}
py='2'
zIndex='0'
letterSpacing='wide'
color='gray.400'
fontSize='xs'
fontWeight='semibold'
textAlign='center'
textTransform='uppercase'
pointerEvents='none'
{...props}
>
Editable Example
</Box>
)
}
const StarIcon = (props) => {
return (
<Box
m='2px'
as='svg'
fill='current'
size='3'
viewBox='0 0 24 24'
{...props}
>
<path d='M23.555 8.729a1.505 1.505 0 0 0-1.406-.98h-6.087a.5.5 0 0 1-.472-.334l-2.185-6.193a1.5 1.5 0 0 0-2.81 0l-.005.016-2.18 6.177a.5.5 0 0 1-.471.334H1.85A1.5 1.5 0 0 0 .887 10.4l5.184 4.3a.5.5 0 0 1 .155.543l-2.178 6.531a1.5 1.5 0 0 0 2.31 1.684l5.346-3.92a.5.5 0 0 1 .591 0l5.344 3.919a1.5 1.5 0 0 0 2.312-1.683l-2.178-6.535a.5.5 0 0 1 .155-.543l5.194-4.306a1.5 1.5 0 0 0 .433-1.661z'></path>
</Box>
)
}
const CodeBlock = ({
className,
live = true,
isManual,
render,
children,
...props
}) => {
const [editorCode, setEditorCode] = useState(children.trim())
const language = className && className.replace(/language-/, '')
const { onCopy, hasCopied } = useClipboard(editorCode)
const { colorMode } = useColorMode()
const themes = { light: lightTheme, dark: darkTheme }
const theme = themes['dark']
const liveProviderProps = {
theme,
language,
code: editorCode,
transformCode: (code) => '/** @jsx mdx */' + code,
scope: {
...Chakra,
...ReactIcons,
mdx,
StarIcon,
FocusLock,
},
noInline: isManual,
...props,
}
const handleCodeChange = (newCode) => setEditorCode(newCode.trim())
if (language === 'jsx' && live === true) {
return (
<LiveProvider {...liveProviderProps}>
<LiveCodePreview />
<Box position='relative'>
<LiveEditor
onChange={handleCodeChange}
style={liveEditorStyle}
/>
<CopyButton onClick={onCopy}>
{hasCopied ? 'copied' : 'copy'}
</CopyButton>
<EditableNotice />
</Box>
<LiveError style={liveErrorStyle} />
</LiveProvider>
)
}
if (render) {
return (
<div style={{ marginTop: '40px' }}>
<LiveProvider {...liveProviderProps}>
<LiveCodePreview />
</LiveProvider>
</div>
)
}
return (
<LiveProvider disabled {...liveProviderProps}>
<Box position='relative'>
<LiveEditor style={liveEditorStyle} />
<CopyButton top='1.25em' onClick={onCopy}>
{hasCopied ? 'copied' : 'copy'}
</CopyButton>
</Box>
</LiveProvider>
)
// return (
// <Highlight
// {...defaultProps}
// theme={theme}
// code={children.trim()}
// language={language}
// >
// {({ className, style, tokens, getLineProps, getTokenProps }) => (
// <pre className={className} style={{ ...style, ...highlightStyle }}>
// {tokens.map((line, i) => (
// <div key={i} {...getLineProps({ line, key: i })}>
// {line.map((token, key) => (
// <span key={key} {...getTokenProps({ token, key })} />
// ))}
// </div>
// ))}
// </pre>
// )}
// </Highlight>
// );
}
CodeBlock.defaultProps = {
mountStylesheet: false,
}
export default CodeBlock

+ 165
- 0
demos/src/components/mdx.tsx View File

@ -0,0 +1,165 @@
/** @jsx jsx */
import {
Box,
Callout,
Code,
Heading,
Kbd,
PseudoBox,
Text,
useColorMode,
Link as ChakraLink
} from '@chakra-ui/core'
import { jsx } from '@emotion/core'
import NextLink from 'next/link'
import { forwardRef } from 'react'
import CodeBlock from './CodeBlock'
const Pre = (props) => <Box my='2em' rounded='sm' {...props} />
const Table = (props) => (
<Box as='table' textAlign='left' mt='32px' width='full' {...props} />
)
const THead = (props) => {
const { colorMode } = useColorMode()
const bg = { light: 'gray.50', dark: 'whiteAlpha.100' }
return (
<Box
as='th'
bg={bg[colorMode]}
fontWeight='semibold'
p={2}
fontSize='sm'
{...props}
/>
)
}
const TData = (props) => (
<Box
as='td'
p={2}
borderTopWidth='1px'
borderColor='inherit'
fontSize='sm'
whiteSpace='normal'
{...props}
/>
)
const Link = forwardRef((props, ref) => (
<PseudoBox
as='a'
ref={ref}
color='teal.500'
cursor='pointer'
textDecoration='underline'
outline='none'
_hover={{ opacity: 0.8 }}
_focus={{ boxShadow: 'outline' }}
{...props}
/>
))
const DocsHeading = (props) => (
<Heading
mb='1em'
mt='2em'
css={{
'&[id]': {
pointerEvents: 'none',
},
'&[id]:before': {
display: 'block',
height: ' 6rem',
marginTop: '-6rem',
visibility: 'hidden',
content: `""`,
},
'&[id]:hover a': { opacity: 1 },
}}
{...props}
>
<Box pointerEvents='auto'>
{props.children}
{props.id && (
<ChakraLink
aria-label='anchor'
as='a'
color='teal.500'
fontWeight='normal'
outline='none'
_focus={{ opacity: 1, boxShadow: 'outline' }}
opacity={0}
ml='0.375rem'
href={`#${props.id}`}
>
#
</ChakraLink>
)}
</Box>
</Heading>
)
const MDXComponents = {
h1: (props) => <Heading as='h1' size='xl' my='1em' {...props}></Heading>,
h2: (props) => (
<DocsHeading
as='h2'
fontWeight='semibold'
size='lg'
{...props}
></DocsHeading>
),
h3: (props) => (
<DocsHeading
as='h3'
size='md'
fontWeight='medium'
{...props}
></DocsHeading>
),
inlineCode: (props) => (
<Code variantColor='yellow' fontSize='0.84em' {...props} />
),
code: CodeBlock,
pre: Pre,
kbd: Kbd,
br: (props) => <Box height='24px' {...props} />,
hr: (props) => <Box as='hr' borderTopWidth='1px' my={8} {...props} />,
table: Table,
th: THead,
td: TData,
a: ({ href, ...props }) => (
<NextLink href={href} passHref>
<Link {...props} />
</NextLink>
),
p: (props) => <Text as='p' mt={4} lineHeight='tall' {...props} />,
ul: (props) => <Box as='ul' pt='8px' pl='16px' {...props} />,
ol: (props) => <Box as='ol' pt='8px' pl='16px' {...props} />,
li: (props) => <Box as='li' pb='4px' {...props} />,
blockquote: (props) => (
<Callout
mt={4}
variant='left-accent'
status='warning'
css={{ '> *:first-of-type': { marginTop: 0 } }}
{...props}
/>
),
}
// const ChakraProvider = ({ children, theme }) => {
// return (
// <ThemeProvider theme={theme}>
// <ColorModeProvider>
// <CSSReset />
// {children}
// </ColorModeProvider>
// </ThemeProvider>
// );
// };
export default MDXComponents

+ 5
- 1
demos/src/pages/_app.tsx View File

@ -11,6 +11,8 @@ import {
CSSResetProps,
} from '@chakra-ui/core'
import { ThemeProvider } from '@chakra-ui/core'
import { MDXProvider } from '@mdx-js/react'
import MDXComponents from '../components/mdx'
const customTheme = {
...theme,
@ -70,7 +72,9 @@ export default class MyApp extends App {
fontSize='16px'
fontWeight={400}
>
<Component {...pageProps} />
<MDXProvider components={MDXComponents}>
<Component {...pageProps} />
</MDXProvider>
</Box>
{/* <Box mt='300px' /> */}
</Layout>

+ 15
- 0
demos/src/pages/docs/test.mdx View File

@ -0,0 +1,15 @@
# salve a tutti
questo è testo
ed una lista
- cuai
- 34534
- adsf
## Code example
```jsx
<Box>ciao</Box>
```

+ 2
- 1
package.json View File

@ -3,7 +3,8 @@
"workspaces": [
"core",
"demos",
"chakra-ui-forms"
"chakra-ui-forms",
"docs"
],
"scripts": {
"example": "cd demos && yarn dev",

+ 822
- 1426
yarn.lock
File diff suppressed because it is too large
View File


Loading…
Cancel
Save