Improve sandbox labels with createSandboxFunctionsWithLabels

davidjerleke · Dec 9, 2022 · 1bbfa5d · 1bbfa5d
1 parent 9f83f56
commit 1bbfa5d
Show file tree

Hide file tree

Showing 21 changed files with 185 additions and 228 deletions.
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/createSandboxFunctionsWithLabels.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/createSandboxFunctionsWithLabels.ts
@@ -0,0 +1,26 @@
+import { PropType as CreateCodeSandboxFormPropType } from './CreateCodeSandboxForm'
+
+export const SANDBOX_CREATE_LABELS = {
+  reactJs: 'React',
+  reactTs: 'React+TS',
+  vanillaJs: 'Vanilla',
+  vanillaTs: 'Vanilla+TS',
+}
+
+type CreateSandboxesKeyType = keyof typeof SANDBOX_CREATE_LABELS
+type CreateSandboxFunctionType = CreateCodeSandboxFormPropType['createSandbox']
+type CreateSandboxesType = {
+  [key in CreateSandboxesKeyType]: CreateSandboxFunctionType
+}
+
+export const createSandboxFunctionsWithLabels = (
+  createSandboxFunction: Partial<CreateSandboxesType>,
+): CreateCodeSandboxFormPropType[] => {
+  return Object.keys(createSandboxFunction).map((sandboxLabelKey) => {
+    const key = <CreateSandboxesKeyType>sandboxLabelKey
+    const createSandbox = <CreateSandboxFunctionType>createSandboxFunction[key]
+    const label = SANDBOX_CREATE_LABELS[key]
+
+    return { label, createSandbox }
+  })
+}
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxLabels.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxLabels.ts
diff --git a/packages/embla-carousel-docs/src/components/Examples/Basic/AlignSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Basic/AlignSandboxes.tsx
@@ -3,15 +3,12 @@ import * as ReactDOMServer from 'react-dom/server'
 import CarouselDefault from 'components/CodeSandbox/React/SandboxFilesSrc/Default/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
+import { createSandboxFunctionsWithLabels } from 'components/CodeSandbox/createSandboxFunctionsWithLabels'
 import { ID, SLIDES, OPTIONS, STYLES } from 'components/Examples/Basic/Align'
 import {
   CreateCodeSandboxForms,
   PropType as CreateCodeSandboxFormsPropType,
 } from 'components/CodeSandbox/CreateCodeSandboxForms'
-import {
-  createSandboxLabel,
-  SANDBOX_LABELS,
-} from 'components/CodeSandbox/sandboxLabels'
 
 const SHARED_CONFIG = {
   slides: SLIDES,
@@ -70,12 +67,13 @@ const sandboxReactTypeScript = async (): Promise<string> => {
   })
 }
 
-const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] = [
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_JS, sandboxVanillaJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_TS, sandboxVanillaTypeScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_JS, sandboxReactJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_TS, sandboxReactTypeScript),
-]
+const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] =
+  createSandboxFunctionsWithLabels({
+    vanillaJs: sandboxVanillaJavaScript,
+    vanillaTs: sandboxVanillaTypeScript,
+    reactJs: sandboxReactJavaScript,
+    reactTs: sandboxReactTypeScript,
+  })
 
 export const ExampleCarouselAlignSandboxes = () => {
   return <CreateCodeSandboxForms sandboxes={SANDBOXES} />

diff --git a/packages/embla-carousel-docs/src/components/Examples/Basic/DefaultSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Basic/DefaultSandboxes.tsx
@@ -3,15 +3,12 @@ import * as ReactDOMServer from 'react-dom/server'
 import CarouselDefault from 'components/CodeSandbox/React/SandboxFilesSrc/Default/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
+import { createSandboxFunctionsWithLabels } from 'components/CodeSandbox/createSandboxFunctionsWithLabels'
 import { ID, SLIDES, OPTIONS, STYLES } from 'components/Examples/Basic/Default'
 import {
   CreateCodeSandboxForms,
   PropType as CreateCodeSandboxFormsPropType,
 } from 'components/CodeSandbox/CreateCodeSandboxForms'
-import {
-  createSandboxLabel,
-  SANDBOX_LABELS,
-} from 'components/CodeSandbox/sandboxLabels'
 
 const SHARED_CONFIG = {
   slides: SLIDES,
@@ -70,12 +67,13 @@ const sandboxReactTypeScript = async (): Promise<string> => {
   })
 }
 
-const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] = [
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_JS, sandboxVanillaJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_TS, sandboxVanillaTypeScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_JS, sandboxReactJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_TS, sandboxReactTypeScript),
-]
+const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] =
+  createSandboxFunctionsWithLabels({
+    vanillaJs: sandboxVanillaJavaScript,
+    vanillaTs: sandboxVanillaTypeScript,
+    reactJs: sandboxReactJavaScript,
+    reactTs: sandboxReactTypeScript,
+  })
 
 export const ExampleCarouselDefaultSandboxes = () => {
   return <CreateCodeSandboxForms sandboxes={SANDBOXES} />

diff --git a/packages/embla-carousel-docs/src/components/Examples/Basic/DragFreeSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Basic/DragFreeSandboxes.tsx
@@ -3,15 +3,12 @@ import * as ReactDOMServer from 'react-dom/server'
 import CarouselDefault from 'components/CodeSandbox/React/SandboxFilesSrc/Default/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
+import { createSandboxFunctionsWithLabels } from 'components/CodeSandbox/createSandboxFunctionsWithLabels'
 import { ID, SLIDES, OPTIONS, STYLES } from 'components/Examples/Basic/DragFree'
 import {
   CreateCodeSandboxForms,
   PropType as CreateCodeSandboxFormsPropType,
 } from 'components/CodeSandbox/CreateCodeSandboxForms'
-import {
-  createSandboxLabel,
-  SANDBOX_LABELS,
-} from 'components/CodeSandbox/sandboxLabels'
 
 const SHARED_CONFIG = {
   slides: SLIDES,
@@ -70,12 +67,13 @@ const sandboxReactTypeScript = async (): Promise<string> => {
   })
 }
 
-const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] = [
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_JS, sandboxVanillaJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_TS, sandboxVanillaTypeScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_JS, sandboxReactJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_TS, sandboxReactTypeScript),
-]
+const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] =
+  createSandboxFunctionsWithLabels({
+    vanillaJs: sandboxVanillaJavaScript,
+    vanillaTs: sandboxVanillaTypeScript,
+    reactJs: sandboxReactJavaScript,
+    reactTs: sandboxReactTypeScript,
+  })
 
 export const ExampleCarouselDragFreeSandboxes = () => {
   return <CreateCodeSandboxForms sandboxes={SANDBOXES} />

diff --git a/packages/embla-carousel-docs/src/components/Examples/Basic/LoopSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Basic/LoopSandboxes.tsx
@@ -3,15 +3,12 @@ import * as ReactDOMServer from 'react-dom/server'
 import CarouselDefault from 'components/CodeSandbox/React/SandboxFilesSrc/Default/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
+import { createSandboxFunctionsWithLabels } from 'components/CodeSandbox/createSandboxFunctionsWithLabels'
 import { ID, SLIDES, OPTIONS, STYLES } from 'components/Examples/Basic/Loop'
 import {
   CreateCodeSandboxForms,
   PropType as CreateCodeSandboxFormsPropType,
 } from 'components/CodeSandbox/CreateCodeSandboxForms'
-import {
-  createSandboxLabel,
-  SANDBOX_LABELS,
-} from 'components/CodeSandbox/sandboxLabels'
 
 const SHARED_CONFIG = {
   slides: SLIDES,
@@ -70,12 +67,13 @@ const sandboxReactTypeScript = async (): Promise<string> => {
   })
 }
 
-const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] = [
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_JS, sandboxVanillaJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_TS, sandboxVanillaTypeScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_JS, sandboxReactJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_TS, sandboxReactTypeScript),
-]
+const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] =
+  createSandboxFunctionsWithLabels({
+    vanillaJs: sandboxVanillaJavaScript,
+    vanillaTs: sandboxVanillaTypeScript,
+    reactJs: sandboxReactJavaScript,
+    reactTs: sandboxReactTypeScript,
+  })
 
 export const ExampleCarouselLoopSandboxes = () => {
   return <CreateCodeSandboxForms sandboxes={SANDBOXES} />

diff --git a/packages/embla-carousel-docs/src/components/Examples/Basic/RightToLeftSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Basic/RightToLeftSandboxes.tsx
@@ -3,6 +3,7 @@ import * as ReactDOMServer from 'react-dom/server'
 import CarouselRightToLeft from 'components/CodeSandbox/React/SandboxFilesSrc/RightToLeft/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
+import { createSandboxFunctionsWithLabels } from 'components/CodeSandbox/createSandboxFunctionsWithLabels'
 import {
   ID,
   SLIDES,
@@ -13,10 +14,6 @@ import {
   CreateCodeSandboxForms,
   PropType as CreateCodeSandboxFormsPropType,
 } from 'components/CodeSandbox/CreateCodeSandboxForms'
-import {
-  createSandboxLabel,
-  SANDBOX_LABELS,
-} from 'components/CodeSandbox/sandboxLabels'
 
 const SHARED_CONFIG = {
   slides: SLIDES,
@@ -75,12 +72,13 @@ const sandboxReactTypeScript = async (): Promise<string> => {
   })
 }
 
-const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] = [
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_JS, sandboxVanillaJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_TS, sandboxVanillaTypeScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_JS, sandboxReactJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_TS, sandboxReactTypeScript),
-]
+const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] =
+  createSandboxFunctionsWithLabels({
+    vanillaJs: sandboxVanillaJavaScript,
+    vanillaTs: sandboxVanillaTypeScript,
+    reactJs: sandboxReactJavaScript,
+    reactTs: sandboxReactTypeScript,
+  })
 
 export const ExampleCarouselRightToLeftSandboxes = () => {
   return <CreateCodeSandboxForms sandboxes={SANDBOXES} />

diff --git a/packages/embla-carousel-docs/src/components/Examples/Basic/SlidesToScrollSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Basic/SlidesToScrollSandboxes.tsx
@@ -3,6 +3,7 @@ import * as ReactDOMServer from 'react-dom/server'
 import CarouselDefault from 'components/CodeSandbox/React/SandboxFilesSrc/Default/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
+import { createSandboxFunctionsWithLabels } from 'components/CodeSandbox/createSandboxFunctionsWithLabels'
 import {
   ID,
   SLIDES,
@@ -13,10 +14,6 @@ import {
   CreateCodeSandboxForms,
   PropType as CreateCodeSandboxFormsPropType,
 } from 'components/CodeSandbox/CreateCodeSandboxForms'
-import {
-  createSandboxLabel,
-  SANDBOX_LABELS,
-} from 'components/CodeSandbox/sandboxLabels'
 
 const SHARED_CONFIG = {
   slides: SLIDES,
@@ -75,12 +72,13 @@ const sandboxReactTypeScript = async (): Promise<string> => {
   })
 }
 
-const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] = [
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_JS, sandboxVanillaJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_TS, sandboxVanillaTypeScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_JS, sandboxReactJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_TS, sandboxReactTypeScript),
-]
+const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] =
+  createSandboxFunctionsWithLabels({
+    vanillaJs: sandboxVanillaJavaScript,
+    vanillaTs: sandboxVanillaTypeScript,
+    reactJs: sandboxReactJavaScript,
+    reactTs: sandboxReactTypeScript,
+  })
 
 export const ExampleCarouselSlidesToScrollSandboxes = () => {
   return <CreateCodeSandboxForms sandboxes={SANDBOXES} />

diff --git a/packages/embla-carousel-docs/src/components/Examples/Basic/VariableWidthsSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Basic/VariableWidthsSandboxes.tsx
@@ -3,6 +3,7 @@ import * as ReactDOMServer from 'react-dom/server'
 import CarouselDefault from 'components/CodeSandbox/React/SandboxFilesSrc/Default/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
+import { createSandboxFunctionsWithLabels } from 'components/CodeSandbox/createSandboxFunctionsWithLabels'
 import {
   ID,
   SLIDES,
@@ -13,10 +14,6 @@ import {
   CreateCodeSandboxForms,
   PropType as CreateCodeSandboxFormsPropType,
 } from 'components/CodeSandbox/CreateCodeSandboxForms'
-import {
-  createSandboxLabel,
-  SANDBOX_LABELS,
-} from 'components/CodeSandbox/sandboxLabels'
 
 const SHARED_CONFIG = {
   slides: SLIDES,
@@ -75,12 +72,13 @@ const sandboxReactTypeScript = async (): Promise<string> => {
   })
 }
 
-const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] = [
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_JS, sandboxVanillaJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_TS, sandboxVanillaTypeScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_JS, sandboxReactJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_TS, sandboxReactTypeScript),
-]
+const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] =
+  createSandboxFunctionsWithLabels({
+    vanillaJs: sandboxVanillaJavaScript,
+    vanillaTs: sandboxVanillaTypeScript,
+    reactJs: sandboxReactJavaScript,
+    reactTs: sandboxReactTypeScript,
+  })
 
 export const ExampleCarouselVariableWidthsSandboxes = () => {
   return <CreateCodeSandboxForms sandboxes={SANDBOXES} />

diff --git a/packages/embla-carousel-docs/src/components/Examples/Basic/YAxisSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Basic/YAxisSandboxes.tsx
@@ -3,15 +3,12 @@ import * as ReactDOMServer from 'react-dom/server'
 import CarouselDefault from 'components/CodeSandbox/React/SandboxFilesSrc/Default/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
+import { createSandboxFunctionsWithLabels } from 'components/CodeSandbox/createSandboxFunctionsWithLabels'
 import { ID, SLIDES, OPTIONS, STYLES } from 'components/Examples/Basic/YAxis'
 import {
   CreateCodeSandboxForms,
   PropType as CreateCodeSandboxFormsPropType,
 } from 'components/CodeSandbox/CreateCodeSandboxForms'
-import {
-  createSandboxLabel,
-  SANDBOX_LABELS,
-} from 'components/CodeSandbox/sandboxLabels'
 
 const SHARED_CONFIG = {
   slides: SLIDES,
@@ -70,12 +67,13 @@ const sandboxReactTypeScript = async (): Promise<string> => {
   })
 }
 
-const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] = [
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_JS, sandboxVanillaJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_TS, sandboxVanillaTypeScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_JS, sandboxReactJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_TS, sandboxReactTypeScript),
-]
+const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] =
+  createSandboxFunctionsWithLabels({
+    vanillaJs: sandboxVanillaJavaScript,
+    vanillaTs: sandboxVanillaTypeScript,
+    reactJs: sandboxReactJavaScript,
+    reactTs: sandboxReactTypeScript,
+  })
 
 export const ExampleCarouselYAxisSandboxes = () => {
   return <CreateCodeSandboxForms sandboxes={SANDBOXES} />

diff --git a/...ges/embla-carousel-docs/src/components/Examples/Miscellaneous/InfiniteScrollSandboxes.tsx b/...ges/embla-carousel-docs/src/components/Examples/Miscellaneous/InfiniteScrollSandboxes.tsx
@@ -4,6 +4,7 @@ import { SANDBOX_VANILLA_FOLDERS } from 'components/CodeSandbox/Vanilla/sandboxV
 import CarouselInfiniteScroll from 'components/CodeSandbox/React/SandboxFilesSrc/InfiniteScroll/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
+import { createSandboxFunctionsWithLabels } from 'components/CodeSandbox/createSandboxFunctionsWithLabels'
 import { loadPrettier } from 'utils/loadPrettier'
 import {
   ID,
@@ -15,10 +16,6 @@ import {
   CreateCodeSandboxForms,
   PropType as CreateCodeSandboxFormsPropType,
 } from 'components/CodeSandbox/CreateCodeSandboxForms'
-import {
-  createSandboxLabel,
-  SANDBOX_LABELS,
-} from 'components/CodeSandbox/sandboxLabels'
 
 const SHARED_CONFIG = {
   slides: SLIDES,
@@ -106,12 +103,13 @@ const sandboxReactTypeScript = async (): Promise<string> => {
   })
 }
 
-const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] = [
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_JS, sandboxVanillaJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.VANILLA_TS, sandboxVanillaTypeScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_JS, sandboxReactJavaScript),
-  createSandboxLabel(SANDBOX_LABELS.REACT_TS, sandboxReactTypeScript),
-]
+const SANDBOXES: CreateCodeSandboxFormsPropType['sandboxes'] =
+  createSandboxFunctionsWithLabels({
+    vanillaJs: sandboxVanillaJavaScript,
+    vanillaTs: sandboxVanillaTypeScript,
+    reactJs: sandboxReactJavaScript,
+    reactTs: sandboxReactTypeScript,
+  })
 
 export const ExampleCarouselInfiniteScrollSandboxes = () => {
   return <CreateCodeSandboxForms sandboxes={SANDBOXES} />