{"version":3,"sources":["lib/Benzin/Benzin.tsx","lib/Markdown/CodeBlock.tsx","lib/Markdown/InlineCode.tsx","lib/Markdown/Heading.tsx","lib/Markdown/Image.tsx","lib/Markdown/Markdown.tsx","demo/Header/Header.tsx","demo/Window/WindowSurface.tsx","demo/Window/Window.tsx","demo/content.md","assets/icon.svg","index.tsx"],"names":["benzinTheme","createMuiTheme","palette","type","primary","main","orange","secondary","purple","background","default","paper","elevation1","elevation2","elevation3","text","Benzin","children","ThemeProvider","theme","CssBaseline","useStyles","makeStyles","root","padding","spacing","overflowX","fontFamily","scrollbarColor","CodeBlock","value","classes","Paper","variant","className","borderRadius","InlineCode","Heading","level","adjustedLevel","Typography","Divider","Image","src","alt","style","maxWidth","maxHeight","Markdown","data","url","context","useState","markdown","setMarkdown","axios","get","then","response","useEffect","sanitized","line","baseUrl","replace","match","resolveUrls","slice","lastIndexOf","renderers","heading","code","link","Link","image","inlineCode","startsWith","symbol","source","plugins","emoji","allowDangerousHtml","color","paddingLeft","logo","margin","tab","flexDirection","fontSize","marginRight","marginBottom","Header","contents","page","setPage","AppBar","position","Toolbar","icon","title","Tabs","onChange","event","newPage","Object","keys","map","item","Tab","label","surface","display","overflowY","dark","light","WindowSurface","size","header","Window","name","height","bottom","width","left","right","window","promoButton","justifyContent","marginTop","Icon","headerContents","home","dotfiles","custom","pageMap","CustomPage","setUrl","inputEl","useRef","TextField","fullWidth","inputRef","Button","onClick","current","LivePreviewPage","setLivePreviewData","href","multiline","App","livePreviewData","fileName","primaryWindowContent","tryButton","content","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.697aa37d.chunk.js","sourcesContent":["import React from 'react';\nimport orange from '@material-ui/core/colors/orange';\nimport purple from '@material-ui/core/colors/purple';\nimport { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';\nimport { CssBaseline } from '@material-ui/core';\nimport 'typeface-roboto';\n\n\ndeclare module '@material-ui/core/styles/createPalette' {\n  interface TypeBackground {\n    elevation1: string;\n    elevation2: string;\n    elevation3: string;\n  }\n}\n\n\nconst benzinTheme = createMuiTheme({\n  palette: {\n    type: 'dark',\n    primary: {\n      main: orange[400],\n    },\n    secondary: {\n      main: purple[500],\n    },\n    background: {\n      default: '#121212',\n      paper: '#1e1e1e',\n      elevation1: '#1e1e1e',\n      elevation2: '#232323',\n      elevation3: '#252525',\n    },\n    text: {\n      primary: '#f4f4f4',\n      secondary: 'rgba(255, 255, 255, 0.6)',\n    },\n  },\n});\n\n\nconst Benzin: React.FC = ({ children }) => (\n  <ThemeProvider theme={benzinTheme}>\n    <CssBaseline />\n    {children}\n  </ThemeProvider>\n);\n\n\nexport default Benzin;\n\n","import React from 'react';\nimport { Paper, makeStyles } from '@material-ui/core';\n\ninterface PropTypes {\n  value: string;\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    background: theme.palette.background.default,\n    padding: theme.spacing(1),\n    overflowX: 'auto',\n    fontFamily: 'Monospace',\n    scrollbarColor: 'auto',\n  },\n}));\n\nconst CodeBlock: React.FC<PropTypes> = ({ value }) => {\n  const classes = useStyles();\n  return (\n    <Paper variant=\"outlined\" className={classes.root}>\n      <pre>\n        {value}\n      </pre>\n    </Paper>\n  );\n};\n\nexport default CodeBlock;\n\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    background: theme.palette.background.default,\n    borderRadius: theme.spacing(0.5),\n    padding: theme.spacing(0.5),\n    fontFamily: 'Monospace',\n  },\n}));\n\nconst InlineCode: React.FC = ({ children }) => {\n  const classes = useStyles();\n  return <span className={classes.root}>{children}</span>;\n};\n\nexport default InlineCode;\n","import React from 'react';\nimport { Typography, Divider, makeStyles } from '@material-ui/core';\n\ninterface PropTypes {\n  level: number;\n}\n\ntype Variant = 'h3' | 'h4' | 'h5' | 'h6';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    padding: theme.spacing(2, 0, 1, 0),\n  },\n}));\n\nconst Heading: React.FC<PropTypes> = ({ children, level }) => {\n  const classes = useStyles();\n\n  let adjustedLevel = level + 2; // Make everything smaller\n  if (adjustedLevel > 6) adjustedLevel = 6;\n\n  const variant: Variant = `h${adjustedLevel}` as Variant;\n\n  return (\n    <div className={classes.root}>\n      <Typography variant={variant}>{children}</Typography>\n      <Divider variant=\"middle\" />\n    </div>\n  );\n};\n\nexport default Heading;\n\n","import React from 'react';\n\ninterface PropTypes {\n  src: string;\n  alt: string;\n}\n\nconst Image: React.FC<PropTypes> = ({ src, alt }) => {\n  return <img src={src} alt={alt} style={{ maxWidth: '100%', maxHeight: '100%' }} />;\n};\n\nexport default Image;\n","import React, { useState, useEffect } from 'react';\nimport { Link, Typography } from '@material-ui/core';\nimport axios from 'axios';\nimport ReactMarkdown from 'react-markdown';\nimport emoji from 'remark-gemoji';\n\nimport CodeBlock from './CodeBlock';\nimport InlineCode from './InlineCode';\nimport Heading from './Heading';\nimport Image from './Image';\n\ninterface PropTypes {\n  data?: string;\n  url?: string;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  context?: Record<string, any>;\n}\n\nconst resolveUrls = (line: string, baseUrl: string): string => line.replace(\n  /src=\"(?!http)(.*)\"[\\s>]/,\n  (match, url) => `src=\"${baseUrl}/${url}?sanitize=true\"`,\n).replace(\n  /\\[(.*\\]?.*)\\]\\((?!http)(.+?)\\)/g,\n  (match, text, url) => `[${text}](${baseUrl}/${url})`,\n);\n\n\nconst Markdown: React.FC<PropTypes> = ({ data, url, context = {} }) => {\n  const [markdown, setMarkdown] = useState<string>(data || '');\n\n  if (url) axios.get(url).then(response => setMarkdown(response.data));\n\n  useEffect(() => {\n    if (!url) setMarkdown(data || '');\n  }, [data, url]);\n\n  const baseUrl = url?.slice(0, url.lastIndexOf('/')) || '';\n  const sanitized = resolveUrls(markdown, baseUrl);\n\n  const WrappedInlineCode: React.FC = ({ children }) => {\n    if (typeof children === 'string' && children?.startsWith('$')) {\n      const symbol = children.slice(1);\n      return context[symbol] || null;\n    }\n    return <InlineCode>{children}</InlineCode>;\n  };\n\n  const renderers = {\n    heading: Heading,\n    code: CodeBlock,\n    link: Link,\n    image: Image,\n    inlineCode: WrappedInlineCode,\n  };\n\n  return (\n    <Typography>\n      <ReactMarkdown\n        source={sanitized}\n        renderers={renderers}\n        plugins={[emoji]}\n        allowDangerousHtml\n      />\n    </Typography>\n  );\n};\n\n\nexport default Markdown;\n\n","import React from 'react';\n\nimport {\n  AppBar,\n  Tabs,\n  Tab,\n  Typography,\n  Toolbar,\n} from '@material-ui/core';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\n\ninterface PropTypes {\n  logo: {\n    icon: React.ReactNode;\n    title: string;\n  };\n  contents: {\n    [key: string]: React.ReactNode | null;\n  };\n  page: string;\n  setPage: (newPage: string) => void;\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    background: theme.palette.background.elevation2,\n    color: theme.palette.text.primary,\n    paddingLeft: theme.spacing(3),\n  },\n  logo: {\n    margin: theme.spacing(0, 3, 0, 1),\n  },\n  tab: {\n    '& .MuiTab-wrapper': {\n      padding: theme.spacing(2),\n      flexDirection: 'row',\n      fontSize: '0.8125rem',\n      '& svg': {\n        marginRight: theme.spacing(1),\n        marginBottom: '0 !important',\n      },\n    },\n  },\n}));\n\n\nconst Header: React.FC<PropTypes> = ({\n  logo, contents, page, setPage,\n}) => {\n  const classes = useStyles();\n\n  const handleChange = (event: React.ChangeEvent<unknown>, newPage: string): void => {\n    setPage(newPage);\n  };\n\n  return (\n    <AppBar position=\"sticky\" className={classes.root}>\n      <Toolbar>\n        {logo.icon}\n        <Typography variant=\"h5\" className={classes.logo} color=\"primary\">\n          {logo.title}\n        </Typography>\n        <Tabs onChange={handleChange} value={page}>\n          {contents && Object.keys(contents).map((item: string) => (\n            <Tab\n              label={item}\n              icon={contents[item] as JSX.Element}\n              value={item}\n              className={classes.tab}\n              key={item}\n            />\n          ))}\n        </Tabs>\n      </Toolbar>\n    </AppBar>\n  );\n};\n\nexport default Header;\n","import React from 'react';\n\nimport { Paper, makeStyles } from '@material-ui/core';\n\nimport { SurfaceSize, SurfacePosition } from './types';\n\n\ninterface PropTypes {\n  size: SurfaceSize;\n  position: SurfacePosition;\n}\n\n\nconst useStyles = makeStyles(theme => ({\n  surface: {\n    position: 'absolute',\n    display: 'flex',\n    flexDirection: 'column',\n    overflowY: 'auto',\n    scrollbarColor: `${theme.palette.secondary.dark} ${theme.palette.secondary.light}`,\n\n    '& a.MuiTypography-root': {\n      color: theme.palette.primary.light,\n    },\n  },\n}));\n\n\nconst WindowSurface: React.FC<PropTypes> = ({ size, position, children }) => {\n  const classes = useStyles();\n\n  return (\n    <Paper\n      variant=\"outlined\"\n      style={{ ...size, ...position }}\n      className={classes.surface}\n    >\n      {children}\n    </Paper>\n  );\n};\n\n\nexport default WindowSurface;\n","import React from 'react';\n\nimport { Typography, Divider, makeStyles } from '@material-ui/core';\n\nimport WindowSurface from './WindowSurface';\nimport { SurfaceSize, SurfacePosition } from './types';\n\n\ninterface PropTypes {\n  type: 'primary' | 'secondary' | 'mono';\n  name?: string;\n}\n\n\nconst useStyles = makeStyles(theme => ({\n  header: {\n    padding: theme.spacing(1, 0, 1, 2),\n    background: theme.palette.background.elevation2,\n  },\n}));\n\n\nconst Window: React.FC<PropTypes> = ({ type, name, children }) => {\n  const classes = useStyles();\n\n  const size: SurfaceSize = {\n    height: '85vh',\n  };\n\n  const position: SurfacePosition = {\n    bottom: '3vh',\n  };\n\n  if (type === 'primary') {\n    size.width = '63vw';\n    position.left = '2vw';\n  } else if (type === 'secondary') {\n    size.width = '31vw';\n    position.right = '2vw';\n  } else if (type === 'mono') {\n    position.left = '2vw';\n    position.right = '2vw';\n  }\n\n  return (\n    <WindowSurface\n      size={size}\n      position={position}\n    >\n      {name\n      && (\n      <div>\n        <Typography variant=\"h5\" className={classes.header}>{name}</Typography>\n        <Divider />\n      </div>\n      )}\n      {children}\n    </WindowSurface>\n  );\n};\n\nexport default Window;\n","export default __webpack_public_path__ + \"static/media/content.013c8163.md\";","export default __webpack_public_path__ + \"static/media/icon.50d2b01a.svg\";","import React, { useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n  makeStyles,\n  TextField,\n  Button,\n  Link,\n} from '@material-ui/core';\nimport {\n  Benzin,\n  Markdown,\n  Heading,\n} from './lib';\n\nimport Header from './demo/Header/Header';\nimport Window from './demo/Window/Window';\nimport content from './demo/content.md';\nimport icon from './assets/icon.svg';\n\nconst useStyles = makeStyles(theme => ({\n  window: {\n    padding: theme.spacing(4),\n  },\n  promoButton: {\n    display: 'flex',\n    justifyContent: 'center',\n    marginTop: theme.spacing(4),\n  },\n}));\n\n\nconst Icon = <img src={icon} width=\"32px\" height=\"37px\" alt=\"logo\" />;\n\nconst headerContents = {\n  home: null,\n  dotfiles: null,\n  'material-ui': null,\n  custom: null,\n  'live preview': null,\n};\n\nconst pageMap: Record<string, string> = {\n  home: 'https://raw.githubusercontent.com/eug-vs/react-benzin/develop/README.md',\n  'material-ui': 'https://raw.githubusercontent.com/mui-org/material-ui/master/README.md',\n  dotfiles: 'https://raw.githubusercontent.com/eug-vs/dotfiles/master/.github/README.md',\n};\n\n\nconst CustomPage: React.FC = () => {\n  const [url, setUrl] = useState<string>('');\n  const inputEl = useRef<HTMLInputElement>(null);\n\n  const handleParseUrl = (): void => {\n    setUrl(inputEl.current?.value || '');\n  };\n\n  return (\n    <>\n      <Heading level={2}>Render custom markdown document</Heading>\n      <p>\n        This should be a link to a valid markdown file. Response should give the file contents.\n        If you copy README file from GitHub, make sure you provide link to raw view.\n      </p>\n      <p>\n        <TextField\n          fullWidth\n          inputRef={inputEl}\n          variant=\"outlined\"\n          color=\"secondary\"\n          label=\"Markdown url\"\n        />\n      </p>\n      <Button variant=\"contained\" color=\"secondary\" onClick={handleParseUrl}>\n        Render!\n      </Button>\n      <Markdown url={url} />\n    </>\n  );\n};\n\ninterface LivePropTypes {\n  setLivePreviewData: (livePreviewData: string) => void;\n}\n\nconst LivePreviewPage: React.FC<LivePropTypes> = ({ setLivePreviewData }) => {\n  const inputEl = useRef<HTMLInputElement>(null);\n\n  const handleRender = (): void => {\n    setLivePreviewData(inputEl.current?.value || '');\n  };\n\n  return (\n    <>\n      <Heading level={2}>Markdown live preview</Heading>\n      <p>\n        Start typing and see your text rendered on the left window!\n        You can find the list of all Markdown features\n        {' '}\n        <Link href=\"https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet\">\n          here\n        </Link>\n        . (some of them are yet in progress).\n        We recommend starting with # Header.\n      </p>\n      <p>\n        <TextField\n          fullWidth\n          multiline\n          inputRef={inputEl}\n          variant=\"outlined\"\n          color=\"primary\"\n          label=\"Markdown\"\n          onChange={handleRender}\n        />\n      </p>\n    </>\n  );\n};\n\n\nconst App: React.FC = () => {\n  const classes = useStyles();\n  const [page, setPage] = useState<string>('home');\n  const [livePreviewData, setLivePreviewData] = useState<string>('');\n\n  const handleGoLivePreview = (): void => {\n    setPage('live preview');\n  };\n\n  const url = pageMap[page];\n  const fileName = url?.slice(url.lastIndexOf('/') + 1);\n\n  let primaryWindowContent = <Markdown url={url} />;\n  if (page === 'custom') primaryWindowContent = <CustomPage />;\n  else if (page === 'live preview') {\n    primaryWindowContent = <Markdown data={livePreviewData || '# Start typing in the right window!'} />;\n  }\n\n  const tryButton = (\n    <p className={classes.promoButton}>\n      <Button\n        variant=\"contained\"\n        color=\"primary\"\n        size=\"large\"\n        onClick={handleGoLivePreview}\n      >\n        Try it yourself!\n      </Button>\n    </p>\n  );\n\n  return (\n    <Benzin>\n      <Header\n        logo={{\n          icon: Icon,\n          title: 'BENZIN',\n        }}\n        contents={headerContents}\n        page={page}\n        setPage={setPage}\n      />\n      <Window type=\"primary\">\n        <div className={classes.window}>{primaryWindowContent}</div>\n      </Window>\n      <Window type=\"secondary\" name=\"Feature preview\">\n        <div className={classes.window}>\n          {\n            (page === 'live preview')\n              ? <LivePreviewPage setLivePreviewData={setLivePreviewData} />\n              : <Markdown url={content} context={{ tryButton, fileName }} />\n          }\n        </div>\n      </Window>\n    </Benzin>\n  );\n};\n\n\nReactDOM.render(<App />, document.getElementById('root'));\n\n"],"sourceRoot":""}