react-email - npm Package Compare versions

Comparing version 1.7.6 to 1.7.7

dist/package.json

 {
     "name": "react-email",
-    "version": "1.7.6",
+    "version": "1.7.7",
     "description": "A live preview of your emails right in your browser.",
@@ -5,0 +5,0 @@ "bin": {

dist/source/_preview/components.js

@@ -11,7 +11,7 @@ "use strict";
         title: 'code-container.tsx',
-        content: "import { Language } from 'prism-react-renderer';\nimport { IconButton } from './icon-button';\nimport { IconClipboard } from './icon-clipboard';\nimport { IconDownload } from './icon-download';\nimport { IconCheck } from './icon-check';\nimport { copyTextToClipboard } from '../utils';\nimport languageMap from '../utils/language-map';\nimport { Tooltip } from './tooltip';\nimport { Code } from './code';\nimport { AnimateSharedLayout, motion } from 'framer-motion';\nimport * as React from 'react';\n\ninterface CodeContainerProps {\n  markups: MarkupProps[];\n}\n\ninterface MarkupProps {\n  language: Language;\n  content: string;\n}\n\nexport const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({\n  markups,\n}) => {\n  const [hovered, setHovered] = React.useState('');\n  const [isCopied, setIsCopied] = React.useState(false);\n  const [activeTab, setActiveTab] = React.useState(markups[0].language);\n  let file = null;\n  let url = null;\n\n  const renderDownloadIcon = () => {\n    let value = markups.filter((markup) => markup.language === activeTab);\n    file = new File([value[0].content], `email.${value[0].language}`);\n    url = URL.createObjectURL(file);\n\n    return (\n      <a\n        href={url}\n        download={file.name}\n        className=\"text-slate-11 transition ease-in-out duration-200 hover:text-slate-12\"\n      >\n        <IconDownload />\n      </a>\n    );\n  };\n\n  const renderClipboardIcon = () => {\n    const handleClipboard = async () => {\n      const activeContent = markups.filter(({ language }) => {\n        return activeTab === language;\n      });\n      setIsCopied(true);\n      await copyTextToClipboard(activeContent[0].content);\n      setTimeout(() => setIsCopied(false), 3000);\n    };\n\n    return (\n      <IconButton onClick={handleClipboard}>\n        {isCopied ? <IconCheck /> : <IconClipboard />}\n      </IconButton>\n    );\n  };\n\n  React.useEffect(() => {\n    setIsCopied(false);\n  }, [activeTab]);\n\n  return (\n    <pre\n      className={\n        'border-slate-6 relative w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md'\n      }\n      style={{\n        lineHeight: '130%',\n        background:\n          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',\n        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',\n      }}\n    >\n      <div className=\"h-9 border-b border-slate-6\">\n        <div className=\"flex\">\n          <AnimateSharedLayout>\n            {markups.map(({ language }) => {\n              const isHovered = hovered === language;\n              return (\n                <motion.button\n                  className={`relative py-[8px] px-4 text-sm font-medium font-sans transition ease-in-out duration-200 ${\n                    activeTab !== language ? 'text-slate-11' : 'text-slate-12'\n                  }`}\n                  onClick={() => setActiveTab(language)}\n                  onHoverStart={() => setHovered(language)}\n                  onHoverEnd={() => setHovered('')}\n                  key={language}\n                >\n                  {isHovered && (\n                    <motion.span\n                      layoutId=\"nav\"\n                      className=\"absolute left-0 right-0 top-0 bottom-0 bg-slate-4\"\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      exit={{ opacity: 0 }}\n                    />\n                  )}\n                  {languageMap[language]}\n                </motion.button>\n              );\n            })}\n          </AnimateSharedLayout>\n        </div>\n        <Tooltip>\n          <Tooltip.Trigger className=\"absolute top-2 right-2 hidden md:block\">\n            {renderClipboardIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>\n        </Tooltip>\n        <Tooltip>\n          <Tooltip.Trigger className=\"text-gray-11 absolute top-2 right-8 hidden md:block\">\n            {renderDownloadIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Download</Tooltip.Content>\n        </Tooltip>\n      </div>\n      {markups.map(({ language, content }) => {\n        return (\n          <div\n            className={`${activeTab !== language && 'hidden'}`}\n            key={language}\n          >\n            <Code language={language}>{content}</Code>\n          </div>\n        );\n      })}\n    </pre>\n  );\n};\n",
+        content: "import { Language } from 'prism-react-renderer';\nimport { IconButton } from './icon-button';\nimport { IconClipboard } from './icon-clipboard';\nimport { IconDownload } from './icon-download';\nimport { IconCheck } from './icon-check';\nimport { copyTextToClipboard } from '../utils';\nimport languageMap from '../utils/language-map';\nimport { Tooltip } from './tooltip';\nimport { Code } from './code';\nimport { AnimateSharedLayout, motion } from 'framer-motion';\nimport * as React from 'react';\n\ninterface CodeContainerProps {\n  markups: MarkupProps[];\n}\n\ninterface MarkupProps {\n  language: Language;\n  content: string;\n}\n\nexport const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({\n  markups,\n}) => {\n  const [hovered, setHovered] = React.useState('');\n  const [isCopied, setIsCopied] = React.useState(false);\n  const [activeTab, setActiveTab] = React.useState(markups[0].language);\n  let file = null;\n  let url = null;\n\n  const renderDownloadIcon = () => {\n    let value = markups.filter((markup) => markup.language === activeTab);\n    file = new File([value[0].content], `email.${value[0].language}`);\n    url = URL.createObjectURL(file);\n\n    return (\n      <a\n        href={url}\n        download={file.name}\n        className=\"text-slate-11 transition ease-in-out duration-200 hover:text-slate-12\"\n      >\n        <IconDownload />\n      </a>\n    );\n  };\n\n  const renderClipboardIcon = () => {\n    const handleClipboard = async () => {\n      const activeContent = markups.filter(({ language }) => {\n        return activeTab === language;\n      });\n      setIsCopied(true);\n      await copyTextToClipboard(activeContent[0].content);\n      setTimeout(() => setIsCopied(false), 3000);\n    };\n\n    return (\n      <IconButton onClick={handleClipboard}>\n        {isCopied ? <IconCheck /> : <IconClipboard />}\n      </IconButton>\n    );\n  };\n\n  React.useEffect(() => {\n    setIsCopied(false);\n  }, [activeTab]);\n\n  return (\n    <pre\n      className={\n        'border-slate-6 relative w-full items-center whitespace-pre rounded-md border text-sm backdrop-blur-md'\n      }\n      style={{\n        lineHeight: '130%',\n        background:\n          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',\n        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',\n      }}\n    >\n      <div className=\"h-9 border-b border-slate-6\">\n        <div className=\"flex\">\n          <AnimateSharedLayout>\n            {markups.map(({ language }) => {\n              const isHovered = hovered === language;\n              return (\n                <motion.button\n                  className={`relative py-[8px] px-4 text-sm font-medium font-sans transition ease-in-out duration-200 ${\n                    activeTab !== language ? 'text-slate-11' : 'text-slate-12'\n                  }`}\n                  onClick={() => setActiveTab(language)}\n                  onHoverStart={() => setHovered(language)}\n                  onHoverEnd={() => setHovered('')}\n                  key={language}\n                >\n                  {isHovered && (\n                    <motion.span\n                      layoutId=\"nav\"\n                      className=\"absolute left-0 right-0 top-0 bottom-0 bg-slate-4\"\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      exit={{ opacity: 0 }}\n                    />\n                  )}\n                  {languageMap[language]}\n                </motion.button>\n              );\n            })}\n          </AnimateSharedLayout>\n        </div>\n        <Tooltip>\n          <Tooltip.Trigger className=\"absolute top-2 right-2 hidden md:block\">\n            {renderClipboardIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>\n        </Tooltip>\n        <Tooltip>\n          <Tooltip.Trigger className=\"text-gray-11 absolute top-2 right-8 hidden md:block\">\n            {renderDownloadIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Download</Tooltip.Content>\n        </Tooltip>\n      </div>\n      {markups.map(({ language, content }) => {\n        return (\n          <div\n            className={`${activeTab !== language && 'hidden'}`}\n            key={language}\n          >\n            <Code language={language}>{content}</Code>\n          </div>\n        );\n      })}\n    </pre>\n  );\n};\n",
     },
     {
         title: 'code.tsx',
-        content: "import classnames from 'classnames';\nimport Highlight, { defaultProps, Language } from 'prism-react-renderer';\nimport * as React from 'react';\n\ninterface CodeProps {\n  children: any;\n  className?: string;\n  language?: Language;\n}\n\nconst theme = {\n  plain: {\n    color: '#EDEDEF',\n    fontSize: 13,\n    fontFamily: 'MonoLisa, Menlo, monospace',\n  },\n  styles: [\n    {\n      types: ['comment'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['atrule', 'keyword', 'attr-name', 'selector'],\n      style: {\n        color: '#7E7D86',\n      },\n    },\n    {\n      types: ['punctuation', 'operator'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['class-name', 'function', 'tag', 'key-white'],\n      style: {\n        color: '#EDEDEF',\n      },\n    },\n  ],\n};\n\nexport const Code: React.FC<Readonly<CodeProps>> = ({\n  children,\n  language = 'html',\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const value = children.trim();\n\n  const file = new File([value], `email.${language}`);\n  const url = URL.createObjectURL(file);\n\n  return (\n    <Highlight\n      {...defaultProps}\n      theme={theme}\n      code={value}\n      language={language as Language}\n    >\n      {({ tokens, getLineProps, getTokenProps }) => (\n        <>\n          <div\n            className=\"absolute right-0 top-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n          <div className=\"p-4\">\n            {tokens.map((line, i) => {\n              return (\n                <div\n                  key={i}\n                  {...getLineProps({ line, key: i })}\n                  className={classnames('whitespace-pre', {\n                    \"before:text-slate-11 before:mr-2 before:content-['$']\":\n                      language === 'bash' && tokens && tokens.length === 1,\n                  })}\n                >\n                  {line.map((token, key) => {\n                    const isException =\n                      token.content === 'from' &&\n                      line[key + 1]?.content === ':';\n                    const newTypes = isException\n                      ? [...token.types, 'key-white']\n                      : token.types;\n                    token.types = newTypes;\n\n                    return (\n                      <React.Fragment key={key}>\n                        <span {...getTokenProps({ token, key })} />\n                      </React.Fragment>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n          <div\n            className=\"absolute left-0 bottom-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n        </>\n      )}\n    </Highlight>\n  );\n};\n",
+        content: "import classnames from 'classnames';\nimport Highlight, { defaultProps, Language } from 'prism-react-renderer';\nimport * as React from 'react';\n\ninterface CodeProps {\n  children: any;\n  className?: string;\n  language?: Language;\n}\n\nconst theme = {\n  plain: {\n    color: '#EDEDEF',\n    fontSize: 13,\n    fontFamily: 'MonoLisa, Menlo, monospace',\n  },\n  styles: [\n    {\n      types: ['comment'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['atrule', 'keyword', 'attr-name', 'selector'],\n      style: {\n        color: '#7E7D86',\n      },\n    },\n    {\n      types: ['punctuation', 'operator'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['class-name', 'function', 'tag', 'key-white'],\n      style: {\n        color: '#EDEDEF',\n      },\n    },\n  ],\n};\n\nexport const Code: React.FC<Readonly<CodeProps>> = ({\n  children,\n  language = 'html',\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const value = children.trim();\n\n  const file = new File([value], `email.${language}`);\n  const url = URL.createObjectURL(file);\n\n  return (\n    <Highlight\n      {...defaultProps}\n      theme={theme}\n      code={value}\n      language={language as Language}\n    >\n      {({ tokens, getLineProps, getTokenProps }) => (\n        <>\n          <div\n            className=\"absolute right-0 top-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n          <div className=\"p-4 h-[650px] overflow-auto\">\n            {tokens.map((line, i) => {\n              return (\n                <div\n                  key={i}\n                  {...getLineProps({ line, key: i })}\n                  className={classnames('whitespace-pre', {\n                    \"before:text-slate-11 before:mr-2 before:content-['$']\":\n                      language === 'bash' && tokens && tokens.length === 1,\n                  })}\n                >\n                  {line.map((token, key) => {\n                    const isException =\n                      token.content === 'from' &&\n                      line[key + 1]?.content === ':';\n                    const newTypes = isException\n                      ? [...token.types, 'key-white']\n                      : token.types;\n                    token.types = newTypes;\n\n                    return (\n                      <React.Fragment key={key}>\n                        <span {...getTokenProps({ token, key })} />\n                      </React.Fragment>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n          <div\n            className=\"absolute left-0 bottom-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n        </>\n      )}\n    </Highlight>\n  );\n};\n",
     },
@@ -18,0 +18,0 @@ {

dist/source/_preview/root.js

@@ -15,3 +15,3 @@ "use strict";
         title: 'package.json',
-        content: '{\n  "name": "react-email-preview",\n  "version": "0.0.10",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=16.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.6",\n    "classnames": "2.3.2",\n    "framer-motion": "8.4.6",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
+        content: '{\n  "name": "react-email-preview",\n  "version": "0.0.11",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=16.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.6",\n    "classnames": "2.3.2",\n    "framer-motion": "8.4.6",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
     },
@@ -18,0 +18,0 @@ {

package.json

 {
   "name": "react-email",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "description": "A live preview of your emails right in your browser.",
@@ -5,0 +5,0 @@ "bin": {

preview/package.json

 {
   "name": "react-email-preview",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "The React Email preview application",
@@ -5,0 +5,0 @@ "license": "MIT",

source/_preview/components.ts

@@ -10,3 +10,3 @@ export const components = [
     content:
-      "import { Language } from 'prism-react-renderer';\nimport { IconButton } from './icon-button';\nimport { IconClipboard } from './icon-clipboard';\nimport { IconDownload } from './icon-download';\nimport { IconCheck } from './icon-check';\nimport { copyTextToClipboard } from '../utils';\nimport languageMap from '../utils/language-map';\nimport { Tooltip } from './tooltip';\nimport { Code } from './code';\nimport { AnimateSharedLayout, motion } from 'framer-motion';\nimport * as React from 'react';\n\ninterface CodeContainerProps {\n  markups: MarkupProps[];\n}\n\ninterface MarkupProps {\n  language: Language;\n  content: string;\n}\n\nexport const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({\n  markups,\n}) => {\n  const [hovered, setHovered] = React.useState('');\n  const [isCopied, setIsCopied] = React.useState(false);\n  const [activeTab, setActiveTab] = React.useState(markups[0].language);\n  let file = null;\n  let url = null;\n\n  const renderDownloadIcon = () => {\n    let value = markups.filter((markup) => markup.language === activeTab);\n    file = new File([value[0].content], `email.${value[0].language}`);\n    url = URL.createObjectURL(file);\n\n    return (\n      <a\n        href={url}\n        download={file.name}\n        className=\"text-slate-11 transition ease-in-out duration-200 hover:text-slate-12\"\n      >\n        <IconDownload />\n      </a>\n    );\n  };\n\n  const renderClipboardIcon = () => {\n    const handleClipboard = async () => {\n      const activeContent = markups.filter(({ language }) => {\n        return activeTab === language;\n      });\n      setIsCopied(true);\n      await copyTextToClipboard(activeContent[0].content);\n      setTimeout(() => setIsCopied(false), 3000);\n    };\n\n    return (\n      <IconButton onClick={handleClipboard}>\n        {isCopied ? <IconCheck /> : <IconClipboard />}\n      </IconButton>\n    );\n  };\n\n  React.useEffect(() => {\n    setIsCopied(false);\n  }, [activeTab]);\n\n  return (\n    <pre\n      className={\n        'border-slate-6 relative w-full items-center overflow-auto whitespace-pre rounded-md border text-sm backdrop-blur-md'\n      }\n      style={{\n        lineHeight: '130%',\n        background:\n          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',\n        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',\n      }}\n    >\n      <div className=\"h-9 border-b border-slate-6\">\n        <div className=\"flex\">\n          <AnimateSharedLayout>\n            {markups.map(({ language }) => {\n              const isHovered = hovered === language;\n              return (\n                <motion.button\n                  className={`relative py-[8px] px-4 text-sm font-medium font-sans transition ease-in-out duration-200 ${\n                    activeTab !== language ? 'text-slate-11' : 'text-slate-12'\n                  }`}\n                  onClick={() => setActiveTab(language)}\n                  onHoverStart={() => setHovered(language)}\n                  onHoverEnd={() => setHovered('')}\n                  key={language}\n                >\n                  {isHovered && (\n                    <motion.span\n                      layoutId=\"nav\"\n                      className=\"absolute left-0 right-0 top-0 bottom-0 bg-slate-4\"\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      exit={{ opacity: 0 }}\n                    />\n                  )}\n                  {languageMap[language]}\n                </motion.button>\n              );\n            })}\n          </AnimateSharedLayout>\n        </div>\n        <Tooltip>\n          <Tooltip.Trigger className=\"absolute top-2 right-2 hidden md:block\">\n            {renderClipboardIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>\n        </Tooltip>\n        <Tooltip>\n          <Tooltip.Trigger className=\"text-gray-11 absolute top-2 right-8 hidden md:block\">\n            {renderDownloadIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Download</Tooltip.Content>\n        </Tooltip>\n      </div>\n      {markups.map(({ language, content }) => {\n        return (\n          <div\n            className={`${activeTab !== language && 'hidden'}`}\n            key={language}\n          >\n            <Code language={language}>{content}</Code>\n          </div>\n        );\n      })}\n    </pre>\n  );\n};\n",
+      "import { Language } from 'prism-react-renderer';\nimport { IconButton } from './icon-button';\nimport { IconClipboard } from './icon-clipboard';\nimport { IconDownload } from './icon-download';\nimport { IconCheck } from './icon-check';\nimport { copyTextToClipboard } from '../utils';\nimport languageMap from '../utils/language-map';\nimport { Tooltip } from './tooltip';\nimport { Code } from './code';\nimport { AnimateSharedLayout, motion } from 'framer-motion';\nimport * as React from 'react';\n\ninterface CodeContainerProps {\n  markups: MarkupProps[];\n}\n\ninterface MarkupProps {\n  language: Language;\n  content: string;\n}\n\nexport const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({\n  markups,\n}) => {\n  const [hovered, setHovered] = React.useState('');\n  const [isCopied, setIsCopied] = React.useState(false);\n  const [activeTab, setActiveTab] = React.useState(markups[0].language);\n  let file = null;\n  let url = null;\n\n  const renderDownloadIcon = () => {\n    let value = markups.filter((markup) => markup.language === activeTab);\n    file = new File([value[0].content], `email.${value[0].language}`);\n    url = URL.createObjectURL(file);\n\n    return (\n      <a\n        href={url}\n        download={file.name}\n        className=\"text-slate-11 transition ease-in-out duration-200 hover:text-slate-12\"\n      >\n        <IconDownload />\n      </a>\n    );\n  };\n\n  const renderClipboardIcon = () => {\n    const handleClipboard = async () => {\n      const activeContent = markups.filter(({ language }) => {\n        return activeTab === language;\n      });\n      setIsCopied(true);\n      await copyTextToClipboard(activeContent[0].content);\n      setTimeout(() => setIsCopied(false), 3000);\n    };\n\n    return (\n      <IconButton onClick={handleClipboard}>\n        {isCopied ? <IconCheck /> : <IconClipboard />}\n      </IconButton>\n    );\n  };\n\n  React.useEffect(() => {\n    setIsCopied(false);\n  }, [activeTab]);\n\n  return (\n    <pre\n      className={\n        'border-slate-6 relative w-full items-center whitespace-pre rounded-md border text-sm backdrop-blur-md'\n      }\n      style={{\n        lineHeight: '130%',\n        background:\n          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',\n        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',\n      }}\n    >\n      <div className=\"h-9 border-b border-slate-6\">\n        <div className=\"flex\">\n          <AnimateSharedLayout>\n            {markups.map(({ language }) => {\n              const isHovered = hovered === language;\n              return (\n                <motion.button\n                  className={`relative py-[8px] px-4 text-sm font-medium font-sans transition ease-in-out duration-200 ${\n                    activeTab !== language ? 'text-slate-11' : 'text-slate-12'\n                  }`}\n                  onClick={() => setActiveTab(language)}\n                  onHoverStart={() => setHovered(language)}\n                  onHoverEnd={() => setHovered('')}\n                  key={language}\n                >\n                  {isHovered && (\n                    <motion.span\n                      layoutId=\"nav\"\n                      className=\"absolute left-0 right-0 top-0 bottom-0 bg-slate-4\"\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      exit={{ opacity: 0 }}\n                    />\n                  )}\n                  {languageMap[language]}\n                </motion.button>\n              );\n            })}\n          </AnimateSharedLayout>\n        </div>\n        <Tooltip>\n          <Tooltip.Trigger className=\"absolute top-2 right-2 hidden md:block\">\n            {renderClipboardIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>\n        </Tooltip>\n        <Tooltip>\n          <Tooltip.Trigger className=\"text-gray-11 absolute top-2 right-8 hidden md:block\">\n            {renderDownloadIcon()}\n          </Tooltip.Trigger>\n          <Tooltip.Content>Download</Tooltip.Content>\n        </Tooltip>\n      </div>\n      {markups.map(({ language, content }) => {\n        return (\n          <div\n            className={`${activeTab !== language && 'hidden'}`}\n            key={language}\n          >\n            <Code language={language}>{content}</Code>\n          </div>\n        );\n      })}\n    </pre>\n  );\n};\n",
   },
@@ -16,3 +16,3 @@ {
     content:
-      "import classnames from 'classnames';\nimport Highlight, { defaultProps, Language } from 'prism-react-renderer';\nimport * as React from 'react';\n\ninterface CodeProps {\n  children: any;\n  className?: string;\n  language?: Language;\n}\n\nconst theme = {\n  plain: {\n    color: '#EDEDEF',\n    fontSize: 13,\n    fontFamily: 'MonoLisa, Menlo, monospace',\n  },\n  styles: [\n    {\n      types: ['comment'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['atrule', 'keyword', 'attr-name', 'selector'],\n      style: {\n        color: '#7E7D86',\n      },\n    },\n    {\n      types: ['punctuation', 'operator'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['class-name', 'function', 'tag', 'key-white'],\n      style: {\n        color: '#EDEDEF',\n      },\n    },\n  ],\n};\n\nexport const Code: React.FC<Readonly<CodeProps>> = ({\n  children,\n  language = 'html',\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const value = children.trim();\n\n  const file = new File([value], `email.${language}`);\n  const url = URL.createObjectURL(file);\n\n  return (\n    <Highlight\n      {...defaultProps}\n      theme={theme}\n      code={value}\n      language={language as Language}\n    >\n      {({ tokens, getLineProps, getTokenProps }) => (\n        <>\n          <div\n            className=\"absolute right-0 top-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n          <div className=\"p-4\">\n            {tokens.map((line, i) => {\n              return (\n                <div\n                  key={i}\n                  {...getLineProps({ line, key: i })}\n                  className={classnames('whitespace-pre', {\n                    \"before:text-slate-11 before:mr-2 before:content-['$']\":\n                      language === 'bash' && tokens && tokens.length === 1,\n                  })}\n                >\n                  {line.map((token, key) => {\n                    const isException =\n                      token.content === 'from' &&\n                      line[key + 1]?.content === ':';\n                    const newTypes = isException\n                      ? [...token.types, 'key-white']\n                      : token.types;\n                    token.types = newTypes;\n\n                    return (\n                      <React.Fragment key={key}>\n                        <span {...getTokenProps({ token, key })} />\n                      </React.Fragment>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n          <div\n            className=\"absolute left-0 bottom-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n        </>\n      )}\n    </Highlight>\n  );\n};\n",
+      "import classnames from 'classnames';\nimport Highlight, { defaultProps, Language } from 'prism-react-renderer';\nimport * as React from 'react';\n\ninterface CodeProps {\n  children: any;\n  className?: string;\n  language?: Language;\n}\n\nconst theme = {\n  plain: {\n    color: '#EDEDEF',\n    fontSize: 13,\n    fontFamily: 'MonoLisa, Menlo, monospace',\n  },\n  styles: [\n    {\n      types: ['comment'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['atrule', 'keyword', 'attr-name', 'selector'],\n      style: {\n        color: '#7E7D86',\n      },\n    },\n    {\n      types: ['punctuation', 'operator'],\n      style: {\n        color: '#706F78',\n      },\n    },\n    {\n      types: ['class-name', 'function', 'tag', 'key-white'],\n      style: {\n        color: '#EDEDEF',\n      },\n    },\n  ],\n};\n\nexport const Code: React.FC<Readonly<CodeProps>> = ({\n  children,\n  language = 'html',\n}) => {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const value = children.trim();\n\n  const file = new File([value], `email.${language}`);\n  const url = URL.createObjectURL(file);\n\n  return (\n    <Highlight\n      {...defaultProps}\n      theme={theme}\n      code={value}\n      language={language as Language}\n    >\n      {({ tokens, getLineProps, getTokenProps }) => (\n        <>\n          <div\n            className=\"absolute right-0 top-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n          <div className=\"p-4 h-[650px] overflow-auto\">\n            {tokens.map((line, i) => {\n              return (\n                <div\n                  key={i}\n                  {...getLineProps({ line, key: i })}\n                  className={classnames('whitespace-pre', {\n                    \"before:text-slate-11 before:mr-2 before:content-['$']\":\n                      language === 'bash' && tokens && tokens.length === 1,\n                  })}\n                >\n                  {line.map((token, key) => {\n                    const isException =\n                      token.content === 'from' &&\n                      line[key + 1]?.content === ':';\n                    const newTypes = isException\n                      ? [...token.types, 'key-white']\n                      : token.types;\n                    token.types = newTypes;\n\n                    return (\n                      <React.Fragment key={key}>\n                        <span {...getTokenProps({ token, key })} />\n                      </React.Fragment>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n          <div\n            className=\"absolute left-0 bottom-0 h-px w-[200px]\"\n            style={{\n              background:\n                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',\n            }}\n          />\n        </>\n      )}\n    </Highlight>\n  );\n};\n",
   },
@@ -19,0 +19,0 @@ {

source/_preview/root.ts

@@ -15,3 +15,3 @@ export const root = [
     content:
-      '{\n  "name": "react-email-preview",\n  "version": "0.0.10",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=16.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.6",\n    "classnames": "2.3.2",\n    "framer-motion": "8.4.6",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
+      '{\n  "name": "react-email-preview",\n  "version": "0.0.11",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "engines": {\n    "node": ">=16.0.0"\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-popover": "1.0.2",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@radix-ui/react-tooltip": "1.0.2",\n    "@react-email/render": "0.0.6",\n    "classnames": "2.3.2",\n    "framer-motion": "8.4.6",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
   },
@@ -18,0 +18,0 @@ {

source/commands/dev.ts

@@ -180,6 +180,4 @@ import {
   );
-  const staticDir = path.join(emailDir, 'static')
-  const hasStaticDirectory = checkDirectoryExist(
-    staticDir,
-  );
+  const staticDir = path.join(emailDir, 'static');
+  const hasStaticDirectory = checkDirectoryExist(staticDir);
 
@@ -193,6 +191,3 @@ if (hasPackageStaticDirectory) {
   if (hasStaticDirectory) {
-    await copy(
-      staticDir,
-      `${REACT_EMAIL_ROOT}/public/static`,
-    );
+    await copy(staticDir, `${REACT_EMAIL_ROOT}/public/static`);
   }
@@ -205,6 +200,4 @@ };
   );
-  const componentDir = path.join(emailDir, 'components')
-  const hasComponentsDirectory = checkDirectoryExist(
-    componentDir,
-  );
+  const componentDir = path.join(emailDir, 'components');
+  const hasComponentsDirectory = checkDirectoryExist(componentDir);
 
@@ -218,6 +211,3 @@ if (hasPackageComponentsDirectory) {
   if (hasComponentsDirectory) {
-    await copy(
-      componentDir,
-      `${PACKAGE_EMAILS_PATH}/components`,
-    );
+    await copy(componentDir, `${PACKAGE_EMAILS_PATH}/components`);
   }
@@ -224,0 +214,0 @@ };

source/commands/export.ts

@@ -17,7 +17,9 @@ import { glob } from 'glob';
  */
-export const exportTemplates = async (outDir: string, srcDir: string, options: Options) => {
+export const exportTemplates = async (
+  outDir: string,
+  srcDir: string,
+  options: Options,
+) => {
   const spinner = ora('Preparing files...\n').start();
-  const allTemplates = glob.sync(
-    normalize(path.join(srcDir, '*.{tsx,jsx}')),
-  );
+  const allTemplates = glob.sync(normalize(path.join(srcDir, '*.{tsx,jsx}')));
 
@@ -47,6 +49,4 @@ esbuild.buildSync({
 
-  const staticDir = path.join(srcDir, 'static')
-  const hasStaticDirectory = checkDirectoryExist(
-    staticDir
-  );
+  const staticDir = path.join(srcDir, 'static');
+  const hasStaticDirectory = checkDirectoryExist(staticDir);
 
@@ -53,0 +53,0 @@ if (hasStaticDirectory) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

8

decreased by-55.56%

Worsened metrics

Total package byte prevSize

236213

decreased by-33.99%

Number of package files

88

decreased by-27.27%

Lines of code

3343

decreased by-21.67%

No dependency changes