chore(docs): Updated documentation for {{RMD_VERSION}}

This should hopefully be the last commit required for the v2 release. Tagging all the open v2 targeted github issues below so they auto close once this is merged. - Closes mlaursen#826 (v2 status ticket) - Closes mlaursen#697 - Closes mlaursen#854 with the new documentation for [self hosting fonts with relative paths] - Closes mlaursen#851, closes mlaursen#642 with the new [ExpansionPanel] components - Closes mlaursen#850, closes mlaursen#641, closes mlaursen#600, closes mlaursen#594, closes mlaursen#554, closes mlaursen#519, closes mlaursen#406, closes mlaursen#405, closes mlaursen#404, closes mlaursen#399, closes #289, closes #237 with the new [Table] components and the new [useIndeterminateChecked] hook - Closes mlaursen#848, closes mlaursen#816, closes mlaursen#788 since v2 no longer uses deprecated lifecycle methods and is purely function component based. (react-transition-group uses `findDOMNode` though right now) - Closes mlaursen#844 since this is available in the [@react-md/sheet package] - Closes mlaursen#842 due to re-writing the `Collapse` component - Closes mlaursen#824, closes mlaursen#820, closes mlaursen#771, closes mlaursen#707, closes mlaursen#693, closes mlaursen#687, closes mlaursen#654, closes mlaursen#577, closes #270 due to the new [Tabs API] - Closes mlaursen#823, closes mlaursen#714, closes mlaursen#705 with the new [Menu components] - Closes mlaursen#822 since the new [@react-md/form package] added the new styles. - Closes mlaursen#819 with the new [SimpleListItem] and [ListItemChildren (preferred)] components - Closes mlaursen#818 with the new focus behavior - Closes mlaursen#804, closes mlaursen#765, closes mlaursen#743, closes mlaursen#731, closes mlaursen#730, closes mlaursen#671, closes mlaursen#607, closes mlaursen#387 with the new [NativeSelect] and [Select] implementations - Closes mlaursen#802, closes mlaursen#762, closes mlaursen#761, closes mlaursen#572, closes mlaursen#486, closes mlaursen#408, closes mlaursen#314, closes mlaursen#312 with the new [TextField] implementation - Closes mlaursen#791, closes mlaursen#780, closes mlaursen#425, closes mlaursen#633 with the new [AutoComplete] implementation - Closes mlaursen#770 with the new [FixedDialog] component - Closes mlaursen#721, closes mlaursen#640, closes mlaursen#407 with the new [Grid] and [GridList] implementations - Closes mlaursen#719 with the new [Radio] component - Closes mlaursen#706, closes mlaursen#683 with the new [Button] component - Closes mlaursen#695 with the new [Theme API] - Closes mlaursen#691 with the new [FileInput] component - Closes mlaursen#689 with the new [Tabs API] and [Menu components] - Closes mlaursen#674, closes mlaursen#413 with the new [@react-md/alert package] - Closes mlaursen#658 with the new [Menu components] and [@react-md/tree package] - Closes mlaursen#582 with the new [Chip] component - Closes mlaursen#497, closes mlaursen#455, closes mlaursen#419 with the new [@react-md/layout package] - Closes mlaursen#496 with the new [Switch] component - Closes #239, closes #157 with the new [Tooltip] component [self hosting fonts with relative paths]: https://react-md.dev/guides/advanced-installation#using-relative-paths-for-fonts [useIndeterminateChecked hook]: https://react-md.dev/packages/form/demos#indeterminate-checkboxes-title [@react-md/alert package]: https://react-md.dev/packages/alert/demos [@react-md/layout package]: https://react-md.dev/packages/layout/demos [@react-md/form package]: https://react-md.dev/packages/form/demos [@react-md/sheet package]: https://react-md.dev/packages/sheet/demos [@react-md/tree package]: https://react-md.dev/packages/tree/demos [Theme API]: https://react-md.dev/guides/customizing-your-theme [Tabs api]: https://react-md.dev/packages/tabs/demos [Button]: https://react-md.dev/packages/button/demos [Chip]: https://react-md.dev/packages/chip/demos [ExpansionPanel]: https://react-md.dev/packages/button/demos [menu components]: https://react-md.dev/packages/menu/demos [FileInput]: https://react-md.dev/packages/form/demos#file-input-example-title [Switch]: https://react-md.dev/packages/form/demos#switch-examples-title [NativeSelect]: https://react-md.dev/packages/form/demos#native-select-example-title [Select]: https://react-md.dev/packages/form/demos#select-example-title [Tooltip]: https://react-md.dev/packages/tooltip/demos [Table]: https://react-md.dev/packages/table/demos [AutoComplete]: https://react-md.dev/packages/autocomplete/demos [FixedDialog]: https://react-md.dev/packages/dialog/demos#fixed-dialog-example-title [TextField]: https://react-md.dev/packages/form/demos#text-field-example-title [Radio]: https://react-md.dev/packages/form/demos#checkbox-and-radio-examples-title [Grid]: https://react-md.dev/packages/utils/demos#material-grid-example-title [GridList]: https://react-md.dev/packages/utils/demos#simple-grid-list-example-title [SimpleListItem]: https://github.com/mlaursen/react-md/blob/1a4161976fbb95233284c507c10063602d1cc682/packages/list/src/SimpleListItem.tsx [ListItemChildren (preferred)]: https://github.com/mlaursen/react-md/blob/1a4161976fbb95233284c507c10063602d1cc682/packages/list/src/ListItemChildren.tsx [useIndeterminateChecked]: https://github.com/mlaursen/react-md/blob/1a4161976fbb95233284c507c10063602d1cc682/packages/form/src/useIndeterminateChecked.ts
JCofman · Jun 15, 2020 · b5c47ed · b5c47ed
1 parent 0370a56
commit b5c47ed
Show file tree

Hide file tree

Showing 158 changed files with 1,399 additions and 1,344 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,5 @@
 # react-md [![codecov](https://codecov.io/gh/mlaursen/react-md/branch/master/graph/badge.svg)](https://codecov.io/gh/mlaursen/react-md) [![Build Status](https://travis-ci.org/mlaursen/react-md.svg?branch=master)](https://travis-ci.org/mlaursen/react-md) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](https://github.com/mlaursen/react-md/pulls) [![Join the chat at Slack](https://react-md.herokuapp.com/badge.svg)](https://react-md.herokuapp.com) [![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/mlaursen03)
 
-### v2 is still in alpha, but nearing completion. Please see the [v1 documentation site](https://react-md.dev/v1) and [branch](../../tree/v1) until then.
-
 Create an accessible React application with the
 [material design specifications](https://material.io/design/) and Scss.
 
@@ -19,6 +17,8 @@ Create an accessible React application with the
 - [Library Size](#library-size) - The UMD bundle size for the entire `react-md`
   library and sizes for some of the pre-built css files.
 
+#### If you are still on v1, please see the [v1 documentation site](https://react-md.dev/v1) and [branch](../../tree/v1) instead
+
 ### Highlights/Features
 
 - Matches the accessibility guidelines from

diff --git a/packages/dev-utils/src/sandbox/constants.ts b/packages/dev-utils/src/sandbox/constants.ts
@@ -70,7 +70,7 @@ export const DEMO_INDEX_HTML = `<!DOCTYPE html>
     />
     <link
       rel="stylesheet"
-      href="https://unpkg.com/react-md@next/dist/css/react-md.teal-pink-200-light.min.css"
+      href="https://unpkg.com/react-md@{{RMD_VERSION}}/dist/css/react-md.teal-pink-200-light.min.css"
     />
     <title>{{DEMO_TITLE}}</title>
   </head>

diff --git a/packages/dev-utils/src/sandbox/generate.ts b/packages/dev-utils/src/sandbox/generate.ts
@@ -41,7 +41,9 @@ function toDependencyJson(dependencies: string[]): Record<string, string> {
   return filtered.reduce(
     (json, dependency) => ({
       ...json,
-      [dependency]: dependency.startsWith("@react-md") ? "next" : "latest",
+      [dependency]: dependency.startsWith("@react-md")
+        ? "{{RMD_VERSION}}"
+        : "latest",
     }),
     {}
   );

diff --git a/packages/documentation/next.config.js b/packages/documentation/next.config.js
@@ -7,6 +7,12 @@ const commitHash = isProduction
   ? execSync('git rev-parse HEAD').toString().trim()
   : 'master';
 
+// Note: this _might_ cause problems for scoped packages since they
+// aren't always published together right now
+const rmdVersion = isProduction
+  ? require('../../lerna.json').version
+  : 'latest';
+
 const withCustomConfig = (nextConfig = {}) => ({
   ...nextConfig,
   poweredByHeader: false,
@@ -21,6 +27,7 @@ const withCustomConfig = (nextConfig = {}) => ({
       new webpack.DefinePlugin({
         'process.env': {
           COMMIT_SHA: JSON.stringify(commitHash),
+          RMD_VERSION: JSON.stringify(rmdVersion),
         },
       })
     );

diff --git a/packages/documentation/src/components/ColorsAndTheming/ThemeBuilder/ThemeUsage.tsx b/packages/documentation/src/components/ColorsAndTheming/ThemeBuilder/ThemeUsage.tsx
@@ -71,7 +71,7 @@ $rmd-theme-secondary: $rmd-${secondary}-a-${accent};
        user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
      -->
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-+    <link rel="stylesheet" href="https://unpkg.com/react-md@next/${cssName}" />
++    <link rel="stylesheet" href="https://unpkg.com/react-md@{{RMD_VERSION}}/${cssName}" />
 \`\`\`
         `}
       </Markdown>

diff --git a/packages/documentation/src/components/DemoSandbox/CodePreview.tsx b/packages/documentation/src/components/DemoSandbox/CodePreview.tsx
@@ -3,6 +3,7 @@ import cn from "classnames";
 import { IFiles } from "codesandbox-import-utils/lib/api/define";
 
 import { CodeBlock } from "components/Code";
+import { RMD_VERSION } from "constants/github";
 
 import FileNotFound from "./FileNotFound";
 
@@ -66,7 +67,7 @@ const CodePreview: FC<CodePreviewProps> = ({
       // the page
       tabIndex={0}
     >
-      {content}
+      {content.replace(/{{RMD_VERSION}}/g, RMD_VERSION)}
     </CodeBlock>
   );
 };

diff --git a/packages/documentation/src/components/Demos/SandboxDefineForm.tsx b/packages/documentation/src/components/Demos/SandboxDefineForm.tsx
@@ -2,6 +2,7 @@ import React, { FC, useEffect, useState } from "react";
 import { getParameters } from "codesandbox/lib/api/define";
 
 import { IFiles } from "codesandbox-import-utils/lib/api/define";
+import { RMD_VERSION } from "constants/github";
 
 const CODE_SANDBOX_DEFINE_API =
   "https://codesandbox.io/api/v1/sandboxes/define";
@@ -20,7 +21,38 @@ const SandboxDefineForm: FC<SandboxDefineFormProps> = ({
   useEffect(() => {
     let cancelled = false;
     (async function load(): Promise<void> {
-      const files = await getSandbox();
+      const sandbox = await getSandbox();
+      const files = Object.entries(sandbox).reduce<IFiles>(
+        (files, [fileName, data]) => {
+          let { content } = data;
+          if (typeof content === "string") {
+            content = content.replace(/{{RMD_VERSION}}/g, RMD_VERSION);
+          } else if (fileName === "package.json") {
+            /* eslint-disable @typescript-eslint/no-explicit-any */
+            // the IFiles type is incorrect since it doesn't include the type for package.json
+            const dependencies = (content as any).dependencies as Record<
+              string,
+              string
+            >;
+
+            const updated = Object.entries(dependencies).reduce(
+              (json, [key, value]) => ({
+                ...json,
+                [key]: value.replace(/{{RMD_VERSION}}/g, RMD_VERSION),
+              }),
+              {}
+            );
+
+            content = { ...(content as any), dependencies: updated };
+            /* eslint-enable @typescript-eslint/no-explicit-any */
+          }
+
+          files[fileName] = { ...data, content };
+
+          return files;
+        },
+        {}
+      );
       if (!cancelled) {
         setParameters(getParameters({ files }));
       }

diff --git a/packages/documentation/src/components/Home/LibraryInfo/constants.ts b/packages/documentation/src/components/Home/LibraryInfo/constants.ts
@@ -1,3 +1,5 @@
 /* eslint-disable import/prefer-default-export */
 
-export const UNPKG = "https://unpkg.com/react-md@next/dist";
+import { RMD_VERSION } from "constants/github";
+
+export const UNPKG = `https://unpkg.com/react-md@${RMD_VERSION}/dist`;
diff --git a/packages/documentation/src/components/Markdown/utils.ts b/packages/documentation/src/components/Markdown/utils.ts
@@ -2,7 +2,12 @@ import Prism from "prismjs";
 import marked from "marked";
 import cn from "classnames";
 
-import { GITHUB_URL, COMMIT_SHA, GITHUB_FILE_URL } from "constants/github";
+import {
+  RMD_VERSION,
+  GITHUB_URL,
+  COMMIT_SHA,
+  GITHUB_FILE_URL,
+} from "constants/github";
 import { PACKAGE_NAMES, SCSS_PACKAGES } from "constants/packages";
 
 import styles from "./Markdown.module.scss";
@@ -245,18 +250,23 @@ export const linkToGithubCommit: Transformer = (md) =>
 export const replaceEmojis: Transformer = (md) => md.replace(/(:tada:)/g, "🎉");
 
 export const replaceGeneratedConstants: Transformer = (md) =>
-  md.replace(/{{(COMMIT_SHA|GITHUB_URL|GITHUB_FILE_URL)}}/g, (_, type) => {
-    switch (type) {
-      case "COMMIT_SHA":
-        return COMMIT_SHA;
-      case "GITHUB_URL":
-        return GITHUB_URL;
-      case "GITHUB_FILE_URL":
-        return GITHUB_FILE_URL;
-      default:
-        throw new Error(`Unknown git replacement: ${type}`);
+  md.replace(
+    /{{(COMMIT_SHA|GITHUB_URL|GITHUB_FILE_URL|RMD_VERSION)}}/g,
+    (_, type) => {
+      switch (type) {
+        case "COMMIT_SHA":
+          return COMMIT_SHA;
+        case "GITHUB_URL":
+          return GITHUB_URL;
+        case "GITHUB_FILE_URL":
+          return GITHUB_FILE_URL;
+        case "RMD_VERSION":
+          return RMD_VERSION;
+        default:
+          throw new Error(`Unknown git replacement: ${type}`);
+      }
     }
-  });
+  );
 
 const transforms: Transformer[] = [
   packageQuickLink,

diff --git a/packages/documentation/src/constants/github.ts b/packages/documentation/src/constants/github.ts
@@ -1,4 +1,5 @@
 export const { COMMIT_SHA = "master" } = process.env;
+export const { RMD_VERSION = "latest" } = process.env; // Ok.. it isn't really github, but don't know a better place for it
 
 export const GITHUB_URL = "https://github.com/mlaursen/react-md";
 export const GITHUB_FILE_URL = `${GITHUB_URL}/blob/${COMMIT_SHA}`;

diff --git a/packages/documentation/src/constants/sandboxes/Alert-HandlingDuplicatedMessages.json b/packages/documentation/src/constants/sandboxes/Alert-HandlingDuplicatedMessages.json
@@ -1,6 +1,6 @@
 {
   "public/index.html": {
-    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n    />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro\"\n    />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/react-md@next/dist/css/react-md.teal-pink-200-light.min.css\"\n    />\n    <title>Alert Example - Handling Duplicated Messages</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n  </body>\n</html>\n",
+    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n    />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro\"\n    />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/react-md@{{RMD_VERSION}}/dist/css/react-md.teal-pink-200-light.min.css\"\n    />\n    <title>Alert Example - Handling Duplicated Messages</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n  </body>\n</html>\n",
     "isBinary": false
   },
   "src/index.tsx": {
@@ -21,16 +21,16 @@
       "description": "Example from https://react-md.dev/packages/alert/demos#handling-duplicated-messages",
       "main": "src/index.tsx",
       "dependencies": {
-        "@react-md/alert": "next",
-        "@react-md/button": "next",
-        "@react-md/divider": "next",
-        "@react-md/form": "next",
-        "@react-md/layout": "next",
-        "@react-md/material-icons": "next",
-        "@react-md/states": "next",
-        "@react-md/theme": "next",
-        "@react-md/typography": "next",
-        "@react-md/utils": "next",
+        "@react-md/alert": "{{RMD_VERSION}}",
+        "@react-md/button": "{{RMD_VERSION}}",
+        "@react-md/divider": "{{RMD_VERSION}}",
+        "@react-md/form": "{{RMD_VERSION}}",
+        "@react-md/layout": "{{RMD_VERSION}}",
+        "@react-md/material-icons": "{{RMD_VERSION}}",
+        "@react-md/states": "{{RMD_VERSION}}",
+        "@react-md/theme": "{{RMD_VERSION}}",
+        "@react-md/typography": "{{RMD_VERSION}}",
+        "@react-md/utils": "{{RMD_VERSION}}",
         "classnames": "latest",
         "react": "latest",
         "react-dom": "latest"

diff --git a/packages/documentation/src/constants/sandboxes/Alert-SimpleMessageQueue.json b/packages/documentation/src/constants/sandboxes/Alert-SimpleMessageQueue.json
@@ -1,6 +1,6 @@
 {
   "public/index.html": {
-    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n    />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro\"\n    />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/react-md@next/dist/css/react-md.teal-pink-200-light.min.css\"\n    />\n    <title>Alert Example - Simple Message Queue</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n  </body>\n</html>\n",
+    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n    />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro\"\n    />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/react-md@{{RMD_VERSION}}/dist/css/react-md.teal-pink-200-light.min.css\"\n    />\n    <title>Alert Example - Simple Message Queue</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n  </body>\n</html>\n",
     "isBinary": false
   },
   "src/index.tsx": {
@@ -21,14 +21,14 @@
       "description": "Example from https://react-md.dev/packages/alert/demos#simple-message-queue",
       "main": "src/index.tsx",
       "dependencies": {
-        "@react-md/alert": "next",
-        "@react-md/button": "next",
-        "@react-md/form": "next",
-        "@react-md/layout": "next",
-        "@react-md/states": "next",
-        "@react-md/theme": "next",
-        "@react-md/typography": "next",
-        "@react-md/utils": "next",
+        "@react-md/alert": "{{RMD_VERSION}}",
+        "@react-md/button": "{{RMD_VERSION}}",
+        "@react-md/form": "{{RMD_VERSION}}",
+        "@react-md/layout": "{{RMD_VERSION}}",
+        "@react-md/states": "{{RMD_VERSION}}",
+        "@react-md/theme": "{{RMD_VERSION}}",
+        "@react-md/typography": "{{RMD_VERSION}}",
+        "@react-md/utils": "{{RMD_VERSION}}",
         "react": "latest",
         "react-dom": "latest"
       },

diff --git a/packages/documentation/src/constants/sandboxes/Alert-UpdatingMessagePriority.json b/packages/documentation/src/constants/sandboxes/Alert-UpdatingMessagePriority.json
@@ -1,6 +1,6 @@
 {
   "public/index.html": {
-    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n    />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro\"\n    />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/react-md@next/dist/css/react-md.teal-pink-200-light.min.css\"\n    />\n    <title>Alert Example - Updating Message Priority</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n  </body>\n</html>\n",
+    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n    />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro\"\n    />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/react-md@{{RMD_VERSION}}/dist/css/react-md.teal-pink-200-light.min.css\"\n    />\n    <title>Alert Example - Updating Message Priority</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n  </body>\n</html>\n",
     "isBinary": false
   },
   "src/index.tsx": {
@@ -21,15 +21,15 @@
       "description": "Example from https://react-md.dev/packages/alert/demos#updating-message-priority",
       "main": "src/index.tsx",
       "dependencies": {
-        "@react-md/alert": "next",
-        "@react-md/button": "next",
-        "@react-md/elevation": "next",
-        "@react-md/form": "next",
-        "@react-md/layout": "next",
-        "@react-md/states": "next",
-        "@react-md/theme": "next",
-        "@react-md/typography": "next",
-        "@react-md/utils": "next",
+        "@react-md/alert": "{{RMD_VERSION}}",
+        "@react-md/button": "{{RMD_VERSION}}",
+        "@react-md/elevation": "{{RMD_VERSION}}",
+        "@react-md/form": "{{RMD_VERSION}}",
+        "@react-md/layout": "{{RMD_VERSION}}",
+        "@react-md/states": "{{RMD_VERSION}}",
+        "@react-md/theme": "{{RMD_VERSION}}",
+        "@react-md/typography": "{{RMD_VERSION}}",
+        "@react-md/utils": "{{RMD_VERSION}}",
         "react": "latest",
         "react-dom": "latest"
       },

diff --git a/packages/documentation/src/constants/sandboxes/AppBar-AnimatingAppBar.json b/packages/documentation/src/constants/sandboxes/AppBar-AnimatingAppBar.json
@@ -1,6 +1,6 @@
 {
   "public/index.html": {
-    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n    />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro\"\n    />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/react-md@next/dist/css/react-md.teal-pink-200-light.min.css\"\n    />\n    <title>AppBar Example - Animating App Bar</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n  </body>\n</html>\n",
+    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n    />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro\"\n    />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/react-md@{{RMD_VERSION}}/dist/css/react-md.teal-pink-200-light.min.css\"\n    />\n    <title>AppBar Example - Animating App Bar</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n  </body>\n</html>\n",
     "isBinary": false
   },
   "src/index.tsx": {
@@ -21,18 +21,18 @@
       "description": "Example from https://react-md.dev/packages/app-bar/demos#animating-app-bar",
       "main": "src/index.tsx",
       "dependencies": {
-        "@react-md/app-bar": "next",
-        "@react-md/avatar": "next",
-        "@react-md/button": "next",
-        "@react-md/elevation": "next",
-        "@react-md/layout": "next",
-        "@react-md/list": "next",
-        "@react-md/material-icons": "next",
-        "@react-md/states": "next",
-        "@react-md/theme": "next",
-        "@react-md/tooltip": "next",
-        "@react-md/typography": "next",
-        "@react-md/utils": "next",
+        "@react-md/app-bar": "{{RMD_VERSION}}",
+        "@react-md/avatar": "{{RMD_VERSION}}",
+        "@react-md/button": "{{RMD_VERSION}}",
+        "@react-md/elevation": "{{RMD_VERSION}}",
+        "@react-md/layout": "{{RMD_VERSION}}",
+        "@react-md/list": "{{RMD_VERSION}}",
+        "@react-md/material-icons": "{{RMD_VERSION}}",
+        "@react-md/states": "{{RMD_VERSION}}",
+        "@react-md/theme": "{{RMD_VERSION}}",
+        "@react-md/tooltip": "{{RMD_VERSION}}",
+        "@react-md/typography": "{{RMD_VERSION}}",
+        "@react-md/utils": "{{RMD_VERSION}}",
         "react": "latest",
         "react-dom": "latest"
       },