fix(sandbox): fixed sandboxes that have additional files

Author: mlaursen

packages/dev-utils/src/sandbox/createSandbox.ts

@@ -168,7 +168,9 @@ export function createSandbox(
   resolvedFiles.forEach((contents, aliasedFileName) => {
     const fileName = aliasedFileName
       .replace(aliasRegExp, "")
+      .replace(`${demoName}${sep}`, "")
       .replace(/\/?Demos\/[A-z]+\/?/, "");
+
     const key = join("src", `${fileName}${getExtension(fileName)}`);
     if (files[key]) {
       log.error(`${key} already exists in the resolved files`);

packages/documentation/src/constants/sandboxes/Chip-ActionChips-js.json

@@ -56,40 +56,40 @@
   "src/Demo.jsx": {
     "content": "import React, { useState } from 'react';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardSubtitle,\n  CardTitle,\n} from '@react-md/card';\nimport { Divider } from '@react-md/divider';\nimport { MediaContainer } from '@react-md/media';\n\nimport ActionChipAlarm from './ActionChipAlarm';\nimport ActionChipBlinds from './ActionChipBlinds';\nimport ActionChipLights from './ActionChipLights';\nimport Blinds from './Blinds';\n\nimport styles from './ActionChips.module.scss';\n\nconst width = 240;\nconst height = width * 0.75;\n\nconst Demo = () => {\n  const [blinds, setBlinds] = useState(false);\n  return (\n    <Card id=\"action-chips-card\" className={styles.container}>\n      <MediaContainer fullWidth>\n        <Blinds visible={blinds} />\n        <img src={`https://picsum.photos/id/218/${width}/${height}`} alt=\"\" />\n      </MediaContainer>\n      <CardHeader>\n        <CardTitle noWrap>Welcome Home Person Name!</CardTitle>\n        <CardSubtitle noWrap>Monday 12:30 PM, Mostly Sunny</CardSubtitle>\n      </CardHeader>\n      <Divider />\n      <CardContent className={styles.content} disableExtraPadding>\n        <ActionChipLights />\n        <ActionChipAlarm />\n        <ActionChipBlinds\n          visible={blinds}\n          onClick={() => setBlinds((prevBlinds) => !prevBlinds)}\n        />\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default Demo;\n"
   },
-  "src/ActionChips/ActionChipAlarm.jsx": {
+  "src/ActionChipAlarm.jsx": {
     "content": "import React, { useState } from 'react';\nimport { Button } from '@react-md/button';\nimport { AlarmSVGIcon, CloseSVGIcon } from '@react-md/material-icons';\nimport { Sheet } from '@react-md/sheet';\n\nimport ActionChip from './ActionChip';\nimport styles from './ActionChipAlarm.module.scss';\n\nconst ActionChipAlarm = () => {\n  const [visible, setVisible] = useState(false);\n  const hide = () => setVisible(false);\n\n  return (\n    <>\n      <ActionChip\n        id=\"action-chip-alarm\"\n        leftIcon={<AlarmSVGIcon />}\n        onClick={() => setVisible(true)}\n      >\n        Set Alarm\n      </ActionChip>\n      <Sheet\n        id=\"action-chip-alarm-sheet\"\n        aria-label=\"Alarm\"\n        className={styles.absolute}\n        overlayClassName={styles.absolute}\n        position=\"bottom\"\n        visible={visible}\n        onRequestClose={hide}\n        portalIntoId=\"action-chips-card\"\n        disableScrollLock\n      >\n        <Button\n          id=\"action-chip-alarm-close\"\n          aria-label=\"Close\"\n          buttonType=\"icon\"\n          onClick={hide}\n        >\n          <CloseSVGIcon />\n        </Button>\n      </Sheet>\n    </>\n  );\n};\n\nexport default ActionChipAlarm;\n"
   },
-  "src/ActionChips/ActionChip.jsx": {
+  "src/ActionChip.jsx": {
     "content": "import React from 'react';\nimport cn from 'classnames';\nimport { Chip } from '@react-md/chip';\n\nimport styles from './ActionChip.module.scss';\n\nconst ActionChip = ({\n  children,\n  className,\n  theme = 'outline',\n  yellow = false,\n  ...props\n}) => (\n  <Chip\n    {...props}\n    theme={theme}\n    className={cn(\n      styles.chip,\n      {\n        [styles.yellow]: yellow,\n      },\n      className\n    )}\n  >\n    {children}\n  </Chip>\n);\n\nexport default ActionChip;\n"
   },
-  "src/ActionChips/ActionChip.module.scss": {
+  "src/ActionChip.module.scss": {
     "content": "@import '~@react-md/icon/dist/mixins';\n@import '~@react-md/theme/dist/color-palette';\n\n.chip {\n  margin: 0.25rem;\n}\n\n.yellow {\n  @include rmd-icon-theme-update-var(color, $rmd-yellow-300);\n}\n"
   },
-  "src/ActionChips/ActionChipAlarm.module.scss": {
+  "src/ActionChipAlarm.module.scss": {
     "content": ".absolute {\n  position: absolute;\n}\n"
   },
-  "src/ActionChips/ActionChipBlinds.jsx": {
+  "src/ActionChipBlinds.jsx": {
     "content": "import React from 'react';\nimport { ClearAllSVGIcon } from '@react-md/material-icons';\nimport ActionChip from './ActionChip';\n\nconst ActionChipBlinds = ({ onClick, visible }) => (\n  <ActionChip\n    selected={visible}\n    onClick={onClick}\n    leftIcon={<ClearAllSVGIcon />}\n  >\n    Close blinds\n  </ActionChip>\n);\n\nexport default ActionChipBlinds;\n"
   },
-  "src/ActionChips/ActionChipLights.jsx": {
-    "content": "import React, { useEffect, useState } from 'react';\nimport {\n  BrightnessHighSVGIcon,\n  BrightnessLowSVGIcon,\n} from '@react-md/material-icons';\nimport { CircularProgress, getProgressA11y } from '@react-md/progress';\n\nimport { randomInt } from '../random';\n\nimport ActionChip from './ActionChip';\n\nconst id = 'action-chip-lights';\nconst progressId = `${id}-progress`;\n\nconst ActionChipLights = () => {\n  const [enabled, setEnabled] = useState(false);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    if (!loading) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => {\n      setLoading(false);\n      setEnabled((prevEnabled) => !prevEnabled);\n    }, randomInt({ min: 3, max: 5 }) * 1000);\n\n    return () => {\n      window.clearTimeout(timeout);\n    };\n  }, [loading]);\n\n  let leftIcon = enabled ? <BrightnessHighSVGIcon /> : <BrightnessLowSVGIcon />;\n  if (loading) {\n    leftIcon = <CircularProgress id={progressId} centered={false} />;\n  }\n\n  return (\n    <ActionChip\n      id={id}\n      {...getProgressA11y(progressId, loading)}\n      leftIcon={leftIcon}\n      selected={enabled}\n      onClick={() => {\n        if (loading) {\n          return;\n        }\n\n        setLoading(!loading);\n      }}\n      yellow={enabled}\n    >\n      Turn on lights\n    </ActionChip>\n  );\n};\n\nexport default ActionChipLights;\n"
+  "src/ActionChipLights.jsx": {
+    "content": "import React, { useEffect, useState } from 'react';\nimport {\n  BrightnessHighSVGIcon,\n  BrightnessLowSVGIcon,\n} from '@react-md/material-icons';\nimport { CircularProgress, getProgressA11y } from '@react-md/progress';\n\nimport { randomInt } from './random';\n\nimport ActionChip from './ActionChip';\n\nconst id = 'action-chip-lights';\nconst progressId = `${id}-progress`;\n\nconst ActionChipLights = () => {\n  const [enabled, setEnabled] = useState(false);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    if (!loading) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => {\n      setLoading(false);\n      setEnabled((prevEnabled) => !prevEnabled);\n    }, randomInt({ min: 3, max: 5 }) * 1000);\n\n    return () => {\n      window.clearTimeout(timeout);\n    };\n  }, [loading]);\n\n  let leftIcon = enabled ? <BrightnessHighSVGIcon /> : <BrightnessLowSVGIcon />;\n  if (loading) {\n    leftIcon = <CircularProgress id={progressId} centered={false} />;\n  }\n\n  return (\n    <ActionChip\n      id={id}\n      {...getProgressA11y(progressId, loading)}\n      leftIcon={leftIcon}\n      selected={enabled}\n      onClick={() => {\n        if (loading) {\n          return;\n        }\n\n        setLoading(!loading);\n      }}\n      yellow={enabled}\n    >\n      Turn on lights\n    </ActionChip>\n  );\n};\n\nexport default ActionChipLights;\n"
   },
   "src/random.js": {
     "content": "/* eslint-disable import/prefer-default-export */\n\n/**\n * Generates a random integer between a min and max value. Defaults\n * to 0-10.\n */\nexport function randomInt({ min = 0, max = 10 } = {}) {\n  return Math.floor(Math.random() * max) + min;\n}\n"
   },
-  "src/ActionChips/Blinds.jsx": {
+  "src/Blinds.jsx": {
     "content": "import React, { useState, useRef } from 'react';\nimport cn from 'classnames';\nimport CSSTransition from 'react-transition-group/CSSTransition';\n\nimport Blind from './Blind';\nimport styles from './Blinds.module.scss';\n\nconst CLASSNAMES = {\n  enter: styles.enter,\n  enterActive: cn(styles.entering, styles.animate),\n  exit: styles.exit,\n  exitActive: cn(styles.exiting, styles.animate),\n};\n\nconst Blinds = ({ visible }) => {\n  const ref = useRef(null);\n  const [exited, setExited] = useState(true);\n  if (visible && exited) {\n    setExited(false);\n  }\n\n  const hide = () => setExited(true);\n\n  const isVisible = visible || !exited;\n\n  return (\n    <CSSTransition\n      in={isVisible}\n      nodeRef={ref}\n      mountOnEnter\n      unmountOnExit\n      timeout={1500}\n      classNames={CLASSNAMES}\n    >\n      {(state) => (\n        <div ref={ref} className={styles.blinds}>\n          {Array.from({ length: 11 }, (_, i) => (\n            <Blind\n              key={i}\n              visible={visible && state === 'entered'}\n              onExited={i === 10 ? hide : undefined}\n            />\n          ))}\n        </div>\n      )}\n    </CSSTransition>\n  );\n};\n\nexport default Blinds;\n"
   },
-  "src/ActionChips/Blind.jsx": {
+  "src/Blind.jsx": {
     "content": "import React, { useRef } from 'react';\nimport cn from 'classnames';\nimport CSSTransition from 'react-transition-group/CSSTransition';\n\nimport styles from './Blind.module.scss';\n\nconst CLASSNAMES = {\n  enter: styles.enter,\n  enterActive: cn(styles.entering, styles.animate),\n  enterDone: styles.done,\n  exit: styles.exit,\n  exitActive: cn(styles.exiting, styles.animate),\n};\n\nconst Blind = ({ visible, onExited }) => {\n  const ref = useRef(null);\n\n  return (\n    <CSSTransition\n      nodeRef={ref}\n      timeout={2500}\n      classNames={CLASSNAMES}\n      in={visible}\n      onExited={onExited}\n    >\n      <span ref={ref} className={styles.blind} />\n    </CSSTransition>\n  );\n};\n\nexport default Blind;\n"
   },
-  "src/ActionChips/Blind.module.scss": {
+  "src/Blind.module.scss": {
     "content": "@import '~@react-md/elevation/dist/mixins';\n@import '~@react-md/utils/dist/mixins';\n\n$blind-height: 1.5rem;\n$blind-margin: 2px;\n$blind-margin-extra: 8px;\n$blind-rotation: 12deg;\n$blind-rotation-extra: 24deg;\n\n.blind {\n  @include rmd-elevation(8);\n\n  background-color: rgba($rmd-white-base, 0.94);\n  flex-shrink: 0;\n  height: $blind-height;\n  margin-bottom: $blind-margin-extra;\n  transform: skewX($blind-rotation-extra);\n  width: 100%;\n}\n\n.animate {\n  @include rmd-transition(standard);\n  $duration: 2s;\n\n  transition: margin-bottom $duration, transform $duration;\n}\n\n.enter {\n  margin-bottom: $blind-margin-extra;\n  transition-delay: 0.5s;\n}\n\n.entering {\n  margin-bottom: $blind-margin;\n  transform: skewX($blind-rotation);\n}\n\n.done {\n  margin-bottom: $blind-margin;\n  transform: skewX($blind-rotation);\n}\n\n.exit {\n  margin-bottom: $blind-margin;\n  transform: skewX($blind-rotation);\n}\n\n.exiting {\n  margin-bottom: $blind-margin-extra;\n  transform: skewX($blind-rotation-extra);\n}\n"
   },
-  "src/ActionChips/Blinds.module.scss": {
+  "src/Blinds.module.scss": {
     "content": "@import '~@react-md/transition/dist/mixins';\n\n.blinds {\n  @include rmd-transition(deceleration);\n\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  transform-origin: top;\n  width: 100%;\n}\n\n.animate {\n  @include rmd-transition(deceleration);\n\n  transition: transform 1.5s;\n}\n\n.enter {\n  transform: scaleY(0);\n}\n\n.entering {\n  transform: scaleY(1);\n}\n\n.exit {\n  transform: scaleY(1);\n}\n\n.exiting {\n  transform: scaleY(0);\n}\n"
   },
-  "src/ActionChips/ActionChips.module.scss": {
+  "src/ActionChips.module.scss": {
     "content": "@import '~@react-md/elevation/dist/mixins';\n@import '~@react-md/icon/dist/mixins';\n@import '~@react-md/utils/dist/mixins';\n\n$blind-height: 1.5rem;\n$blind-margin: 2px;\n$blind-margin-extra: 8px;\n$blind-rotation: 12deg;\n$blind-rotation-extra: 24deg;\n\n.container {\n  @include rmd-utils-block-centered;\n  @media screen and (min-width: 23.4375em) {\n    width: 19rem;\n  }\n\n  overflow: hidden;\n  position: relative;\n  width: 15rem;\n}\n\n.content {\n  @include rmd-utils-scroll(x);\n\n  display: flex;\n}\n"
   }
 }