From 095ae97c1d75e152c6fbe1bfce9c809d15cd4985 Mon Sep 17 00:00:00 2001 From: Mikkel Laursen Date: Fri, 13 Aug 2021 07:37:49 -0600 Subject: [PATCH] chore(docs): Updated sandboxes for new Sass module system --- packages/dev-utils/src/sandbox/constants.ts | 16 ++++----- .../dev-utils/src/sandbox/createSandbox.ts | 6 ++-- packages/documentation/next-env.d.ts | 3 ++ packages/documentation/package.json | 34 +------------------ .../ThemeBuilder/ThemeUsage.tsx | 7 ++-- .../Demos/Theme/SimpleExample.module.scss | 6 ++-- .../NotFoundPage/NotFoundPage.module.scss | 2 +- .../NotFoundPage/NotFoundSVG.module.scss | 6 ++-- .../documentation/src/utils/getSandbox.ts | 6 +++- packages/react-md/README.md | 2 +- 10 files changed, 32 insertions(+), 56 deletions(-) diff --git a/packages/dev-utils/src/sandbox/constants.ts b/packages/dev-utils/src/sandbox/constants.ts index 833b8e26ba..a18cc7491f 100644 --- 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 = ` `; -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 index 80a93d9461..346cb44684 100644 --- 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 index c6643fda12..9bc3dd46b9 100644 --- a/packages/documentation/next-env.d.ts +++ b/packages/documentation/next-env.d.ts @@ -1,3 +1,6 @@ /// /// /// + +// 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 index e4b7470477..b8db355545 100644 --- 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 index fd8684d69d..9bfd0544b2 100644 --- 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 \`\`\`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 index e513dfa806..76f8c2c9fb 100644 --- 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 index 53a0b0b7f6..92a786d5c4 100644 --- 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 index f43d662c70..ad57961d88 100644 --- 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 index fedc4f77d9..ef0505f33b 100644 --- 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 index dc53c64123..32aa995196 100644 --- 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;