chore(docs): Updated sandboxes for new Sass module system

mlaursen · Aug 13, 2021 · 095ae97 · 095ae97
1 parent 68e8c6b
commit 095ae97
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 56 deletions.
diff --git a/packages/dev-utils/src/sandbox/constants.ts b/packages/dev-utils/src/sandbox/constants.ts
@@ -82,17 +82,17 @@ export const DEMO_INDEX_HTML = `<!DOCTYPE html>
 </html>
 `;
 
-export const VARIABLES_SCSS_FILE = `@import "@react-md/theme/dist/color-palette";
-
-$rmd-theme-light: true;
-$rmd-theme-primary: $rmd-teal-500;
-$rmd-theme-secondary: $rmd-pink-a-200;
+export const EVERYTHING_SCSS_FILE = `@use "@react-md/theme/dist/color-palette" as *;
+@forward "react-md" with (
+  $rmd-theme-light: true,
+  $rmd-theme-primary: $rmd-teal-500,
+  $rmd-theme-secondary: $rmd-pink-a-200,
+);
 `;
 
-export const STYLES_SCSS_FILE = `@import "./variables";
-@import "react-md/dist/everything";
+export const STYLES_SCSS_FILE = `@use "./everything" as *;
 
-@include react-md-utils";
+@include react-md-utils;
 `;
 
 export const PHONE_INDEX_FILE = `export { default } from "./Phone";

diff --git a/packages/dev-utils/src/sandbox/createSandbox.ts b/packages/dev-utils/src/sandbox/createSandbox.ts
@@ -13,7 +13,7 @@ import {
   FORM_PARTS,
   SANDBOXES_PATH,
   STYLES_SCSS_FILE,
-  VARIABLES_SCSS_FILE,
+  EVERYTHING_SCSS_FILE,
 } from "./constants";
 import { createPackageJson } from "./createPackageJson";
 import { getAllDependencies } from "./getAllDependencies";
@@ -159,8 +159,8 @@ export function createSandbox(
     "src/styles.scss": {
       content: STYLES_SCSS_FILE,
     },
-    "src/_variables.scss": {
-      content: VARIABLES_SCSS_FILE,
+    "src/_everything.scss": {
+      content: EVERYTHING_SCSS_FILE,
     },
     "package.json": createPackageJson({
       demoTitle,

diff --git a/packages/documentation/next-env.d.ts b/packages/documentation/next-env.d.ts
@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -20,39 +20,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@react-md/alert": "^2.9.1",
-    "@react-md/app-bar": "^2.9.1",
-    "@react-md/autocomplete": "^2.9.1",
-    "@react-md/avatar": "^2.9.1",
-    "@react-md/badge": "^2.9.1",
-    "@react-md/button": "^2.9.1",
-    "@react-md/card": "^2.9.1",
-    "@react-md/chip": "^2.9.1",
-    "@react-md/dialog": "^2.9.1",
-    "@react-md/divider": "^2.9.1",
-    "@react-md/elevation": "^2.9.1",
-    "@react-md/expansion-panel": "^2.9.1",
-    "@react-md/form": "^2.9.1",
-    "@react-md/icon": "^2.9.1",
-    "@react-md/layout": "^2.9.1",
-    "@react-md/link": "^2.9.1",
-    "@react-md/list": "^2.9.1",
-    "@react-md/material-icons": "^2.9.1",
-    "@react-md/media": "^2.9.1",
-    "@react-md/menu": "^2.9.1",
-    "@react-md/overlay": "^2.9.1",
-    "@react-md/portal": "^2.9.1",
-    "@react-md/progress": "^2.9.1",
-    "@react-md/sheet": "^2.9.1",
-    "@react-md/states": "^2.9.1",
-    "@react-md/table": "^2.9.1",
-    "@react-md/tabs": "^2.9.1",
-    "@react-md/theme": "^2.9.1",
-    "@react-md/tooltip": "^2.9.1",
-    "@react-md/transition": "^2.9.1",
-    "@react-md/tree": "^2.9.1",
-    "@react-md/typography": "^2.9.1",
-    "@react-md/utils": "^2.9.1",
     "classnames": "^2.3.1",
     "codesandbox": "^2.2.3",
     "date-fns": "^2.23.0",
@@ -68,6 +35,7 @@
     "qs": "^6.10.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.1",
+    "react-md": "^2.9.1",
     "react-hook-form": "^7.12.2",
     "react-router-dom": "^5.2.0",
     "react-swipeable": "^6.1.2",

diff --git a/packages/documentation/src/components/ColorsAndTheming/ThemeBuilder/ThemeUsage.tsx b/packages/documentation/src/components/ColorsAndTheming/ThemeBuilder/ThemeUsage.tsx
@@ -33,11 +33,12 @@ export default function ThemeUsage({
         {`##### SCSS Usage<!-- no-margin-bottom -->
 
 \`\`\`scss
-@use '@react-md/theme/dist/color-palette' as *;
+// Note: have to rename to color since react-md also exports these variables which causes an error
+@use '@react-md/theme/dist/color-palette' as color;
 @use 'react-md' as * with (
   $rmd-theme-light: ${theme === "light"},
-  $rmd-theme-primary: $rmd-${primary}-500,
-  $rmd-theme-secondary: $rmd-${secondary}-a-${accent},
+  $rmd-theme-primary: color.$rmd-${primary}-500,
+  $rmd-theme-secondary: color.$rmd-${secondary}-a-${accent},
   // other variable overrides
 );
 

diff --git a/packages/documentation/src/components/Demos/Theme/SimpleExample.module.scss b/packages/documentation/src/components/Demos/Theme/SimpleExample.module.scss
@@ -1,8 +1,8 @@
 // sass-lint:disable class-name-format
-@use '@react-md/theme/dist/color-palette' as *;
+@use '@react-md/theme/dist/color-palette' as color;
 @use 'react-md' as * with (
-  $rmd-theme-primary: $rmd-teal-500,
-  $rmd-theme-secondary: $rmd-pink-a-200,
+  $rmd-theme-primary: color.$rmd-teal-500,
+  $rmd-theme-secondary: color.$rmd-pink-a-200,
 );
 
 .container {

diff --git a/packages/documentation/src/components/NotFoundPage/NotFoundPage.module.scss b/packages/documentation/src/components/NotFoundPage/NotFoundPage.module.scss
@@ -1,4 +1,4 @@
-@use '../../everything';
+@use '../../everything' as *;
 
 .container {
   background-color: rmd-theme-get-swatch($rmd-theme-primary, 800);

diff --git a/packages/documentation/src/components/NotFoundPage/NotFoundSVG.module.scss b/packages/documentation/src/components/NotFoundPage/NotFoundSVG.module.scss
@@ -1,15 +1,15 @@
-@use '../../everything';
+@use '../../everything' as *;
 
 .oval {
   @include rmd-theme(fill, secondary);
 }
 
 .circle1 {
-  fill: rmd-theme-get-swatch(variables.$primary-color, 700);
+  fill: rmd-theme-get-swatch($rmd-theme-primary, 700);
 }
 
 .circle2 {
-  fill: rmd-theme-get-swatch(variables.$primary-color, 600);
+  fill: rmd-theme-get-swatch($rmd-theme-primary, 600);
 }
 
 .circle3 {

diff --git a/packages/documentation/src/utils/getSandbox.ts b/packages/documentation/src/utils/getSandbox.ts
@@ -19,6 +19,10 @@ function getVersion(packageName: string): string {
     return "latest";
   }
 
+  if (name.includes("react-md")) {
+    return RMD_VERSION;
+  }
+
   const version = versions[name];
   if (!versions[name]) {
     throw new Error(`${name} does not have a version available`);
@@ -67,7 +71,7 @@ export default function getSandbox(
           content = content
             .replace(/{{RMD_VERSION}}/g, RMD_VERSION)
             .replace(/{{THEME}}/g, theme);
-          if (theme === "dark" && fileName === "src/_variables.scss") {
+          if (theme === "dark" && fileName === "src/_everything.scss") {
             content = content.replace(
               "$rmd-theme-light: true",
               "$rmd-theme-light: false"

diff --git a/packages/react-md/README.md b/packages/react-md/README.md
@@ -130,7 +130,7 @@ Next, create a `src/App.scss` file to include all the `react-md` styles and
 import the `App.scss` file in the `src/App.js`:
 
 ```scss
-@import "react-md/dist/react-md";
+@use "react-md" as *;
 
 // this will include all the styles from react-md
 @include react-md-utils;