chore(docs): Enable rust compiler by removing custom babelrc

Author: mlaursen

packages/documentation/.babelrc

@@ -52,8 +52,6 @@
     "@types/prismjs": "^1.16.6",
     "@types/qs": "^6.9.7",
     "@types/react-virtualized": "^9.21.13",
-    "babel-plugin-inline-react-svg": "^2.0.1",
-    "babel-plugin-prismjs": "^2.1.0",
     "cross-env": "^7.0.3",
     "eslint-config-next": "^11.1.2",
     "npm-run-all": "^4.1.5",

packages/documentation/package.json

@@ -1,4 +1,18 @@
 import { highlight, languages } from "prismjs";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-tsx";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-scss";
+import "prismjs/components/prism-css-extras";
+import "prismjs/components/prism-markup";
+import "prismjs/components/prism-markdown";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-git";
+import "prismjs/components/prism-diff";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-properties";
 import {
   DangerouslyHighlightCode,
   GetCodeLanguage,

packages/documentation/src/components/CodeBlock/utils.ts

@@ -15,7 +15,7 @@ import {
 } from "@react-md/tree";
 
 import FileSVGIcon from "icons/FileSVGIcon";
-import HTML5SVGIcon from "icons/HTML5SVGIcon";
+import Html5SVGIcon from "icons/Html5SVGIcon";
 import SassSVGIcon from "icons/SassSVGIcon";
 import TypescriptSVGIcon from "icons/TypescriptSVGIcon";
 import createIdGenerator from "utils/createIdGenerator";
@@ -72,7 +72,7 @@ const getItemProps: GetItemProps<Item> = (item) => {
       leftAddon = expanded ? <FolderOpenSVGIcon /> : <FolderSVGIcon />;
       break;
     case "html":
-      leftAddon = <HTML5SVGIcon />;
+      leftAddon = <Html5SVGIcon />;
       break;
     case "text":
       leftAddon = <FileSVGIcon />;

packages/documentation/src/components/Demos/Tree/CustomizingTreeItems.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from "react";
+import Image from "next/image";
 import {
   CardHeader,
   CardTitle,
@@ -13,7 +14,7 @@ import Code from "components/Code";
 import CodeBlock from "components/CodeBlock";
 import LinkButton from "components/LinkButton";
 
-import { Component as SVG } from "./components.svg";
+import components from "./components.svg";
 import JumpStartCard from "./JumpStartCard";
 
 export default function Components(): ReactElement {
@@ -23,7 +24,7 @@ export default function Components(): ReactElement {
         <CardTitle>Components and Styles</CardTitle>
       </CardHeader>
       <MediaContainer fullWidth>
-        <SVG role="presentation" />
+        <Image src={components} />
       </MediaContainer>
       <CardContent disableSecondaryColor>
         <Text>

packages/documentation/src/components/Home/Components.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from "react";
+import Image from "next/image";
 import {
   CardHeader,
   CardTitle,
@@ -12,7 +13,7 @@ import { Text } from "@react-md/typography";
 import Code from "components/Code";
 import LinkButton from "components/LinkButton";
 
-import { Component as SVG } from "./customization.svg";
+import customization from "./customization.svg";
 import JumpStartCard from "./JumpStartCard";
 
 export default function GettingStarted(): ReactElement {
@@ -22,7 +23,7 @@ export default function GettingStarted(): ReactElement {
         <CardTitle>Customization and Themes</CardTitle>
       </CardHeader>
       <MediaContainer fullWidth>
-        <SVG role="presentation" />
+        <Image src={customization} />
       </MediaContainer>
       <CardContent disableSecondaryColor>
         <Text>

packages/documentation/src/components/Home/Customization.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from "react";
+import Image from "next/image";
 import {
   CardHeader,
   CardTitle,
@@ -13,7 +14,7 @@ import Code from "components/Code";
 import LinkButton from "components/LinkButton";
 
 import JumpStartCard from "./JumpStartCard";
-import { Component as SVG } from "./getting-started.svg";
+import gettingStarted from "./getting-started.svg";
 
 export default function GettingStarted(): ReactElement {
   return (
@@ -22,7 +23,7 @@ export default function GettingStarted(): ReactElement {
         <CardTitle>Getting Started</CardTitle>
       </CardHeader>
       <MediaContainer fullWidth>
-        <SVG role="presentation" />
+        <Image src={gettingStarted} />
       </MediaContainer>
       <CardContent disableSecondaryColor>
         <Text>

packages/documentation/src/components/Home/GettingStarted.tsx

@@ -1,21 +1,10 @@
 import React, { ReactElement } from "react";
-import cn from "classnames";
-import { SVGIconProps } from "@react-md/icon";
-import { Component as CodeSandboxIcon } from "./codesandbox.svg";
+import { SVGIcon, SVGIconProps } from "@react-md/icon";
 
-export default function CodeSandboxSVGIcon({
-  className,
-  ...props
-}: SVGIconProps): ReactElement {
+export default function CodeSandboxSVGIcon(props: SVGIconProps): ReactElement {
   return (
-    <CodeSandboxIcon
-      {...props}
-      className={cn("rmd-icon rmd-icon--svg", className)}
-    />
+    <SVGIcon {...props} viewBox="0 0 512 512">
+      <path d="M69.2898098,165.083974 L69.2898098,276.649443 L152.161311,324.692718 L152.161311,412.603224 L241.327633,463.829131 L241.327633,264.06328 L69.2898098,165.083974 Z M89.0172642,137.098529 L260.121958,235.540974 L427.640018,138.456525 L339.210941,87.2017661 L262.258901,131.853758 L179.736828,84.2839889 L89.0172642,137.098529 Z M272.206216,463.739666 L370.845646,406.905256 L370.845646,322.809124 L444.244039,280.276172 L444.244039,167.397587 L272.206216,266.116045 L272.206216,463.739666 Z M255.633239,512 L34,384.729507 L34,128.977638 L255.644267,0 L477.328236,128.432852 L477.328236,384.321468 L255.633239,512 Z"></path>
+    </SVGIcon>
   );
 }
-
-CodeSandboxSVGIcon.defaultProps = {
-  role: "img",
-  focusable: "false",
-};

packages/documentation/src/icons/CodeSandboxSVGIcon.tsx

@@ -1,14 +1,24 @@
 import React, { ReactElement } from "react";
-import cn from "classnames";
-import { SVGIconProps } from "@react-md/icon";
+import { SVGIcon, SVGIconProps } from "@react-md/icon";
 
-import { Component as HtmlSVG } from "./html.svg";
-
-export default function HtmlIcon({
-  className,
-  ...props
-}: SVGIconProps): ReactElement | null {
+export default function HtmlIcon(props: SVGIconProps): ReactElement {
   return (
-    <HtmlSVG {...props} className={cn("rmd-icon rmd-icon--svg", className)} />
+    <SVGIcon {...props} viewBox="0 0 72 96">
+      <path
+        fill="#72a536"
+        d="M0 2v92c0 1.1.9 2 2 2h68c1.1 0 2-.9 2-2V28H50c-1.1 0-2-.9-2-2V0H2C.9 0 0 .9 0 2z"
+      />
+      <path fill="#72a536" d="M71.9 24c-.1-.4-.2-.7-.4-1L52 1.2V24h19.9z" />
+      <path
+        d="M6 41h60v49H6V41zm6.5-34.9c1.3 0 2.6.4 3.6 1.2l-1.4 2.8c-.4-.5-1.3-.9-2.1-.9-2.1 0-3.2 1.9-3.2 4.2s1.2 4.4 3.2 4.4c1 0 1.7-.5 2.3-1l1.4 2.8c-.9.7-2 1.3-3.9 1.3-4 0-6.3-3.1-6.3-7.4-.1-4.2 2.3-7.4 6.4-7.4zm7.2 10.6c.6.6 1.4 1.2 2.3 1.2s1.3-.6 1.3-1.2c0-2-4.8-2.1-4.8-6.2 0-2.4 1.7-4.3 4.5-4.3 1.2 0 2.4.3 3.4 1l-1.2 2.9c-.5-.4-1.4-.9-2.2-.9-.9 0-1.3.6-1.3 1.2 0 2.1 4.8 2 4.8 6.1 0 2.3-1.5 4.4-4.4 4.4-1.4 0-2.9-.5-4-1.4l1.6-2.8zm10.7 0c.6.6 1.4 1.2 2.3 1.2.9 0 1.3-.6 1.3-1.2 0-2-4.8-2.1-4.8-6.2 0-2.4 1.7-4.3 4.5-4.3 1.2 0 2.4.3 3.4 1L36 10.1c-.5-.4-1.4-.9-2.2-.9-.9 0-1.3.6-1.3 1.2 0 2.1 4.8 2 4.8 6.1 0 2.3-1.5 4.4-4.4 4.4-1.4 0-2.9-.5-4-1.4l1.5-2.8z"
+        fill="#fff"
+      />
+      <path
+        d="M16.4 67.5v-4.1c.9-.1 1.6-.2 2-.4s.8-.6 1.2-1c.4-.5.5-1.1.7-1.9.1-.6.2-1.5.2-2.8 0-2.2.1-3.7.4-4.6.2-.8.6-1.6 1.2-2 .5-.5 1.4-.9 2.5-1.2.7-.2 1.9-.4 3.5-.4h.9V53c-1.3 0-2.2.1-2.6.3s-.6.4-.9.6c-.2.3-.3.7-.3 1.5s-.1 2-.2 4.1c-.1 1.2-.2 2-.4 2.8-.3.6-.6 1.2-1 1.8-.4.4-1 .9-1.8 1.4.7.4 1.3.8 1.8 1.3s.8 1.2 1.1 1.9c.3.7.4 1.8.4 3 .1 1.9.1 3.1.1 3.6 0 .7.1 1.2.3 1.6.2.4.5.5.9.6.4.2 1.2.3 2.6.3v4.1h-1c-1.6 0-2.9-.1-3.7-.4-.9-.3-1.6-.6-2.2-1.2s-1-1.2-1.2-2-.3-2.1-.3-4c0-2-.1-3.5-.3-4.1-.3-.9-.7-1.6-1.2-2-.7-.5-1.5-.7-2.7-.7zm39.1 0c-.9.1-1.6.2-2 .4-.4.2-.8.6-1.2 1-.4.5-.5 1.1-.7 1.9-.1.6-.2 1.5-.2 2.8 0 2.2-.1 3.7-.4 4.6-.2.9-.6 1.6-1.2 2-.5.5-1.4.9-2.5 1.2-.7.2-1.9.4-3.5.4h-1v-4.1c1.3 0 2.1-.1 2.6-.3s.7-.4.9-.6c.2-.3.3-.7.3-1.5 0-.6.1-2 .2-4 .1-1.2.3-2.1.5-2.8.3-.7.6-1.3 1.1-1.9.4-.5 1-.9 1.7-1.3-.9-.6-1.6-1.1-2-1.6-.5-.7-1-1.8-1.2-2.8-.2-.8-.3-2.6-.3-5.2 0-.8-.1-1.4-.3-1.8-.2-.3-.4-.5-.8-.6-.2-.3-1-.3-2.5-.3v-4h1c1.6 0 2.9.1 3.7.4.9.3 1.6.6 2.2 1.2s1 1.2 1.2 2 .4 2.1.4 4c0 2 .1 3.4.3 4.1.3.9.7 1.6 1.2 1.9.5.4 1.4.6 2.5.6.1.1 0 4.3 0 4.3z"
+        fill="#72a536"
+        stroke="#72a536"
+        strokeMiterlimit="10"
+      />
+    </SVGIcon>
   );
 }

packages/documentation/src/icons/CssIcon.tsx

@@ -1,15 +1,11 @@
 // source: https://ionicons.com/
 import React, { ReactElement } from "react";
-import cn from "classnames";
-import { SVGIconProps } from "@react-md/icon";
+import { SVGIcon, SVGIconProps } from "@react-md/icon";
 
-import { Component as FileSVG } from "./file.svg";
-
-export default function FileSVGIcon({
-  className,
-  ...props
-}: SVGIconProps): ReactElement {
+export default function FileSVGIcon(props: SVGIconProps): ReactElement {
   return (
-    <FileSVG {...props} className={cn("rmd-icon rmd-icon--svg", className)} />
+    <SVGIcon {...props} viewBox="0 0 512 512">
+      <path d="M288 48H136c-22.092 0-40 17.908-40 40v336c0 22.092 17.908 40 40 40h240c22.092 0 40-17.908 40-40V176L288 48zm-16 144V80l112 112H272z" />
+    </SVGIcon>
   );
 }