Add constants for sandbox folders

davidjerleke · Dec 9, 2022 · 8d4c11b · 8d4c11b
1 parent 92ae0e8
commit 8d4c11b
Show file tree

Hide file tree

Showing 23 changed files with 117 additions and 79 deletions.
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReact.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReact.ts
@@ -1,6 +1,7 @@
 import { getParameters } from 'codesandbox/lib/api/define'
 import { BASE_CSS, SANDBOX_CSS } from 'components/CodeSandbox/sandboxStyles'
-import { SANDBOX_IMAGES } from '../sandboxImages'
+import { SANDBOX_REACT_FOLDERS } from './sandboxReactFolders'
+import { createSandboxImages } from '../sandboxImages'
 import { loadPrettier } from 'utils/loadPrettier'
 import { createSandboxReactPackageJson } from './createSandboxReactPackageJson'
 import { createSandboxReactIndexHtml } from './createSandboxReactIndexHtml'
@@ -29,6 +30,7 @@ export const createSandboxReact = async (
     language = 'javascript',
   } = config
   const title = `${id}-react`
+  const sandboxImages = createSandboxImages(SANDBOX_REACT_FOLDERS.IMAGES)
   const { prettierConfig, formatCss, formatJs, formatTs } = await loadPrettier()
   const scriptExtension = languageToReactExtension(language)
   const isTypeScript = isLanguageTypeScript(language)
@@ -61,39 +63,39 @@ export const createSandboxReact = async (
       isBinary: false,
       content: JSON.stringify(packageJson, null, '\t'),
     },
-    [`public/index.html`]: {
+    [`${SANDBOX_REACT_FOLDERS.PUBLIC}/index.html`]: {
       isBinary: false,
       content: entryHtml,
     },
-    [`src/css/base.css`]: {
+    [`${SANDBOX_REACT_FOLDERS.CSS}/base.css`]: {
       isBinary: false,
       content: formatCss(BASE_CSS),
     },
-    [`src/css/sandbox.css`]: {
+    [`${SANDBOX_REACT_FOLDERS.CSS}/sandbox.css`]: {
       isBinary: false,
       content: formatCss(SANDBOX_CSS),
     },
-    [`src/css/embla.css`]: {
+    [`${SANDBOX_REACT_FOLDERS.CSS}/embla.css`]: {
       isBinary: false,
       content: formatCss(styles),
     },
-    [`src/js/index.${scriptExtension}`]: {
+    [`${SANDBOX_REACT_FOLDERS.JS}/index.${scriptExtension}`]: {
       isBinary: false,
       content: formatScript(entryScript),
     },
-    [`src/js/Header.${scriptExtension}`]: {
+    [`${SANDBOX_REACT_FOLDERS.JS}/Header.${scriptExtension}`]: {
       isBinary: false,
       content: formatScript(headerScript),
     },
-    [`src/js/Footer.${scriptExtension}`]: {
+    [`${SANDBOX_REACT_FOLDERS.JS}/Footer.${scriptExtension}`]: {
       isBinary: false,
       content: formatScript(footerScript),
     },
-    [`src/js/EmblaCarousel.${scriptExtension}`]: {
+    [`${SANDBOX_REACT_FOLDERS.JS}/EmblaCarousel.${scriptExtension}`]: {
       isBinary: false,
       content: formatScript(carouselScript),
     },
-    [`src/js/imageByIndex.${scriptExtension}`]: {
+    [`${SANDBOX_REACT_FOLDERS.JS}/imageByIndex.${scriptExtension}`]: {
       isBinary: false,
       content: formatScript(imagesScript),
     },
@@ -113,6 +115,6 @@ export const createSandboxReact = async (
   }
 
   return getParameters({
-    files: Object.assign({}, sandboxConfig, SANDBOX_IMAGES, sandboxOverrides),
+    files: Object.assign({}, sandboxConfig, sandboxImages, sandboxOverrides),
   })
 }
diff --git a/...ges/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactPackageJson.ts b/...ges/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactPackageJson.ts
@@ -1,4 +1,5 @@
 import docsPackageJson from 'embla-carousel-docs/package.json'
+import { SANDBOX_REACT_FOLDERS } from './sandboxReactFolders'
 import { kebabCaseToPascalCase } from 'utils/kebabCaseToPascalCase'
 import { languageToReactExtension } from '../sandboxUtils'
 import {
@@ -21,7 +22,7 @@ export const createSandboxReactPackageJson = (
     version: '1.0.0',
     description: `${kebabCaseToPascalCase(id, ' ')} Example`,
     keywords: ['react', 'starter', language],
-    main: `src/js/index.${scriptExtension}`,
+    main: `${SANDBOX_REACT_FOLDERS.JS}/index.${scriptExtension}`,
     dependencies: {
       react: dependencies.react,
       'react-dom': dependencies['react-dom'],

diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/React/sandboxReactFolders.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/React/sandboxReactFolders.ts
@@ -0,0 +1,6 @@
+export const SANDBOX_REACT_FOLDERS = {
+  PUBLIC: 'public',
+  CSS: 'src/css',
+  JS: 'src/js',
+  IMAGES: 'src/images',
+}
diff --git a/...arousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Default/EmblaCarousel.js b/...arousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Default/EmblaCarousel.js
@@ -1,12 +1,12 @@
-import EmblaCarousel from 'embla-carousel'
-import '../css/base.css'
-import '../css/sandbox.css'
-import '../css/embla.css'
+import EmblaCarousel from 'embla-carousel';
+import '../css/base.css';
+import '../css/sandbox.css';
+import '../css/embla.css';
 
-const OPTIONS = {}
+const OPTIONS = {};
 
-const emblaNode = document.querySelector('.embla')
-const viewportNode = emblaNode.querySelector('.embla__viewport')
+const emblaNode = document.querySelector('.embla');
+const viewportNode = emblaNode.querySelector('.embla__viewport');
 
 // @ts-ignore
-const emblaApi = EmblaCarousel(viewportNode, OPTIONS)
+const emblaApi = EmblaCarousel(viewportNode, OPTIONS);
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/index.html b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/index.html
@@ -37,6 +37,6 @@ <h1 class="sandbox__header">__replace_sandbox_title__</h1>
     </main>
 
     <noscript> You need to enable JavaScript to run this app. </noscript>
-    <script src="src/js/index.__replace_sandbox_language_extension__"></script>
+    <script src="__replace_sandbox_script_src__"></script>
   </body>
 </html>
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/index.html b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/index.html
@@ -37,6 +37,6 @@ <h1 class="sandbox__header">__replace_sandbox_title__</h1>
     </main>
 
     <noscript> You need to enable JavaScript to run this app. </noscript>
-    <script src="src/js/index.__replace_sandbox_language_extension__"></script>
+    <script src="__replace_sandbox_script_src__"></script>
   </body>
 </html>
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanilla.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanilla.ts
@@ -1,6 +1,7 @@
 import { getParameters } from 'codesandbox/lib/api/define'
 import { BASE_CSS, SANDBOX_CSS } from '../sandboxStyles'
-import { SANDBOX_IMAGES } from '../sandboxImages'
+import { SANDBOX_VANILLA_FOLDERS } from './sandboxVanillaFolders'
+import { createSandboxImages } from '../sandboxImages'
 import { loadPrettier } from 'utils/loadPrettier'
 import { createSandboxVanillaPackageJson } from './createSandboxVanillaPackageJson'
 import { createSandboxVanillaTsConfig } from './createSandboxVanillaTsConfig'
@@ -28,6 +29,7 @@ export const createSandboxVanilla = async (
     language = 'javascript',
   } = config
   const title = `${id}-vanilla`
+  const sandboxImages = createSandboxImages(SANDBOX_VANILLA_FOLDERS.IMAGES)
   const { prettierConfig, formatHtml, formatCss, formatJs, formatTs } =
     await loadPrettier()
   const scriptExtension = languageToVanillaExtension(language)
@@ -58,19 +60,19 @@ export const createSandboxVanilla = async (
       isBinary: false,
       content: formatHtml(entryHtml),
     },
-    [`src/css/base.css`]: {
+    [`${SANDBOX_VANILLA_FOLDERS.CSS}/base.css`]: {
       isBinary: false,
       content: formatCss(BASE_CSS),
     },
-    [`src/css/sandbox.css`]: {
+    [`${SANDBOX_VANILLA_FOLDERS.CSS}/sandbox.css`]: {
       isBinary: false,
       content: formatCss(SANDBOX_CSS),
     },
-    [`src/css/embla.css`]: {
+    [`${SANDBOX_VANILLA_FOLDERS.CSS}/embla.css`]: {
       isBinary: false,
       content: formatCss(styles),
     },
-    [`src/js/index.${scriptExtension}`]: {
+    [`${SANDBOX_VANILLA_FOLDERS.JS}/index.${scriptExtension}`]: {
       isBinary: false,
       content: formatScript(entryScript),
     },
@@ -90,6 +92,6 @@ export const createSandboxVanilla = async (
   }
 
   return getParameters({
-    files: Object.assign({}, sandboxConfig, SANDBOX_IMAGES, sandboxOverrides),
+    files: Object.assign({}, sandboxConfig, sandboxImages, sandboxOverrides),
   })
 }
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaEntry.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaEntry.ts
@@ -1,11 +1,12 @@
 import { THEME_PREFIX } from 'consts/themes'
 import { URLS } from 'consts/urls'
+import { SANDBOX_VANILLA_FOLDERS } from './sandboxVanillaFolders'
 import { getThemeFromDocument } from 'utils/getThemeFromDocument'
 import { kebabCaseToPascalCase } from 'utils/kebabCaseToPascalCase'
 import { SandboxVanillaExtensionType } from '../sandboxTypes'
 import {
   SANDBOX_REGEX_CODE,
-  SANDBOX_REGEX_LANGUAGE_EXTENSION,
+  SANDBOX_REGEX_SCRIPT_SRC,
   SANDBOX_REGEX_REPOSITORY_URL,
   SANDBOX_REGEX_THEME,
   SANDBOX_REGEX_TITLE,
@@ -21,10 +22,11 @@ export const createSandboxVanillaEntry = async (
   )
   const theme = THEME_PREFIX + getThemeFromDocument()
   const title = kebabCaseToPascalCase(id, ' ')
+  const scriptSrc = `${SANDBOX_VANILLA_FOLDERS.JS}/index.${languageExtension}`
   return indexHTML.default
     .replace(SANDBOX_REGEX_THEME, theme)
     .replace(SANDBOX_REGEX_TITLE, title)
-    .replace(SANDBOX_REGEX_LANGUAGE_EXTENSION, languageExtension)
+    .replace(SANDBOX_REGEX_SCRIPT_SRC, scriptSrc)
     .replace(SANDBOX_REGEX_REPOSITORY_URL, URLS.GITHUB_ROOT)
     .replace(SANDBOX_REGEX_CODE, carouselHtml)
 }
diff --git a/.../embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaImagePaths.ts b/.../embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaImagePaths.ts
@@ -1,3 +1,5 @@
+import { SANDBOX_VANILLA_FOLDERS } from './sandboxVanillaFolders'
+
 const REMOVE_IMAGE_HASH_REGEX = /(?<=slide-\d)(.*?)(?=.jpg)/g
 const REWRITE_IMAGE_PATH_REGEX = /\/static\//g
 
@@ -6,5 +8,5 @@ export const createSandboxVanillaImagePaths = (
 ): string => {
   return carouselHtml
     .replace(REMOVE_IMAGE_HASH_REGEX, '')
-    .replace(REWRITE_IMAGE_PATH_REGEX, 'src/images/')
+    .replace(REWRITE_IMAGE_PATH_REGEX, `${SANDBOX_VANILLA_FOLDERS.IMAGES}/`)
 }
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/sandboxVanillaFolders.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/sandboxVanillaFolders.ts
@@ -0,0 +1,5 @@
+export const SANDBOX_VANILLA_FOLDERS = {
+  CSS: 'src/css',
+  JS: 'src/js',
+  IMAGES: 'src/images',
+}
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxImages.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxImages.ts
@@ -2,19 +2,23 @@ import { URLS } from 'consts/urls'
 import { arrayFromNumber } from 'utils/arrayFromNumber'
 import { SandboxConfigType } from './sandboxTypes'
 
-export const SANDBOX_IMAGE_URLS: string[] = arrayFromNumber(4).map((index) => {
+const SANDBOX_IMAGE_URLS: string[] = arrayFromNumber(4).map((index) => {
   return `${URLS.GITHUB_DOCUMENTATION_RAW}/src/assets/images/slide-${
     index + 1
   }.jpg`
 })
 
-export const SANDBOX_IMAGES: SandboxConfigType['files'] =
-  SANDBOX_IMAGE_URLS.reduce((allImages, imageUrl, index) => {
-    return {
+export const createSandboxImages = (
+  path: string,
+): SandboxConfigType['files'] => {
+  return SANDBOX_IMAGE_URLS.reduce(
+    (allImages, imageUrl, index) => ({
       ...allImages,
-      [`src/images/slide-${index + 1}.jpg`]: {
+      [`${path}/slide-${index + 1}.jpg`]: {
         isBinary: true,
         content: imageUrl,
       },
-    }
-  }, {})
+    }),
+    {},
+  )
+}
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxRegex.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxRegex.ts
@@ -1,12 +1,11 @@
 export const SANDBOX_REGEX_OPTIONS =
   /((?<=EmblaOptionsType\s\=\s)(.*))|((?<=OPTIONS\s\=\s)(.*))/
 
-export const SANDBOX_REGEX_LANGUAGE_EXTENSION =
-  /__replace_sandbox_language_extension__/g
-
 export const SANDBOX_REGEX_REPOSITORY_URL =
   /__replace_sandbox_repository_url__/g
 
+export const SANDBOX_REGEX_SCRIPT_SRC = /__replace_sandbox_script_src__/g
+
 export const SANDBOX_REGEX_IOS_PICKER_LOOP = /((?<=LOOP\s\=\s)(true|false))/
 
 export const SANDBOX_REGEX_IMAGE_IMPORT = /(?<=from\s')(.*)(?=\/images)/g

diff --git a/...ges/embla-carousel-docs/src/components/Examples/Miscellaneous/InfiniteScrollSandboxes.tsx b/...ges/embla-carousel-docs/src/components/Examples/Miscellaneous/InfiniteScrollSandboxes.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
+import { SANDBOX_VANILLA_FOLDERS } from 'components/CodeSandbox/Vanilla/sandboxVanillaFolders'
 import CarouselInfiniteScroll from 'components/CodeSandbox/React/SandboxFilesSrc/InfiniteScroll/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
@@ -47,10 +48,11 @@ const sandboxVanillaJavaScript = async (): Promise<string> => {
     ),
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_INFINITE_SCROLL_FILE_NAME}.js`]: {
-        isBinary: false,
-        content: formatJs(infiniteScroll.default),
-      },
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_INFINITE_SCROLL_FILE_NAME}.js`]:
+        {
+          isBinary: false,
+          content: formatJs(infiniteScroll.default),
+        },
     },
   })
 }
@@ -73,10 +75,11 @@ const sandboxVanillaTypeScript = async (): Promise<string> => {
     ),
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_INFINITE_SCROLL_FILE_NAME}.ts`]: {
-        isBinary: false,
-        content: formatTs(infiniteScroll.default),
-      },
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_INFINITE_SCROLL_FILE_NAME}.ts`]:
+        {
+          isBinary: false,
+          content: formatTs(infiniteScroll.default),
+        },
     },
   })
 }

diff --git a/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/IosPicker.tsx b/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/IosPicker.tsx
@@ -6,7 +6,7 @@ import CarouselIosPicker from 'components/CodeSandbox/React/SandboxFilesSrc/IosP
 import { iosPickerWrapperStyles } from 'components/Examples/carouselWrapperStyles'
 import { createCarouselIosPickerStyles } from 'components/Examples/createCarouselStyles'
 
-export const ID = 'embla-carousel-ios-picker'
+export const ID = 'embla-carousel-ios-style-picker'
 export const STYLES = createCarouselIosPickerStyles()
 
 export const Wrapper = styled.div`

diff --git a/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/IosPickerSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/IosPickerSandboxes.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
+import { SANDBOX_VANILLA_FOLDERS } from 'components/CodeSandbox/Vanilla/sandboxVanillaFolders'
+import { SANDBOX_REACT_FOLDERS } from 'components/CodeSandbox/React/sandboxReactFolders'
 import CarouselIosPicker from 'components/CodeSandbox/React/SandboxFilesSrc/IosPicker/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
@@ -42,7 +44,7 @@ const sandboxVanillaJavaScript = async (loop: boolean): Promise<string> => {
     carouselHtml: ReactDOMServer.renderToStaticMarkup(<CarouselIosPicker />),
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_IOS_PICKER_FILE_NAME}.js`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_IOS_PICKER_FILE_NAME}.js`]: {
         isBinary: false,
         content: formatJs(infiniteScroll.default),
       },
@@ -67,7 +69,7 @@ const sandboxVanillaTypeScript = async (loop: boolean): Promise<string> => {
     carouselHtml: ReactDOMServer.renderToStaticMarkup(<CarouselIosPicker />),
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_IOS_PICKER_FILE_NAME}.ts`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_IOS_PICKER_FILE_NAME}.ts`]: {
         isBinary: false,
         content: formatTs(infiniteScroll.default),
       },
@@ -94,7 +96,7 @@ const sandboxReactJavaScript = async (loop: boolean): Promise<string> => {
     carouselScript: carousel.default,
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${REACT_IOS_PICKER_FILE_NAME}.jsx`]: {
+      [`${SANDBOX_REACT_FOLDERS.JS}/${REACT_IOS_PICKER_FILE_NAME}.jsx`]: {
         isBinary: false,
         content: formatJs(item.default),
       },
@@ -121,7 +123,7 @@ const sandboxReactTypeScript = async (loop: boolean): Promise<string> => {
     carouselScript: carousel.default,
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${REACT_IOS_PICKER_FILE_NAME}.tsx`]: {
+      [`${SANDBOX_REACT_FOLDERS.JS}/${REACT_IOS_PICKER_FILE_NAME}.tsx`]: {
         isBinary: false,
         content: formatTs(item.default),
       },