Skip to content

Commit

Permalink
fix(sandbox): fixed sandboxes that have additional files
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlaursen
mlaursen committed Nov 14, 2020
1 parent a40b6b3 commit f45aab1
Show file tree
Hide file tree
Showing 25 changed files with 124 additions and 122 deletions.
2 changes: 2 additions & 0 deletions packages/dev-utils/src/sandbox/createSandbox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`);
Expand Down
24 changes: 12 additions & 12 deletions packages/documentation/src/constants/sandboxes/Chip-ActionChips-js.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
Loading

0 comments on commit f45aab1

Please sign in to comment.