From 7fa8e849d05302c94c4180322c3601224e611de1 Mon Sep 17 00:00:00 2001 From: David Jerleke Date: Fri, 7 Jul 2023 23:32:03 +0200 Subject: [PATCH 1/6] Fix infinite recursion for loop option --- .../src/components/EmblaCarousel.ts | 46 +++++++++++-------- .../src/main.ts | 22 +++++++-- 2 files changed, 45 insertions(+), 23 deletions(-) diff --git a/packages/embla-carousel/src/components/EmblaCarousel.ts b/packages/embla-carousel/src/components/EmblaCarousel.ts index 78d0489bc..70c26f140 100644 --- a/packages/embla-carousel/src/components/EmblaCarousel.ts +++ b/packages/embla-carousel/src/components/EmblaCarousel.ts @@ -2,7 +2,7 @@ import { Engine, EngineType } from './Engine' import { Animations, AnimationsType } from './Animations' import { EventStore } from './EventStore' import { EventHandler, EventHandlerType } from './EventHandler' -import { defaultOptions, EmblaOptionsType } from './Options' +import { defaultOptions, EmblaOptionsType, OptionsType } from './Options' import { OptionsHandler } from './OptionsHandler' import { PluginsHandler } from './PluginsHandler' import { EmblaPluginsType, EmblaPluginType } from './Plugins' @@ -73,6 +73,28 @@ function EmblaCarousel( slides = [].slice.call(customSlides || container.children) } + function createEngine( + options: OptionsType, + animations: AnimationsType, + ): EngineType { + const engine = Engine( + root, + container, + slides, + ownerDocument, + ownerWindow, + options, + eventHandler, + animations, + ) + + if (options.loop && !engine.slideLooper.canLoop()) { + const optionsWithoutLoop = Object.assign({}, options, { loop: false }) + return createEngine(optionsWithoutLoop, animations) + } + return engine + } + function activate( withOptions?: EmblaOptionsType, withPlugins?: EmblaPluginType[], @@ -89,16 +111,7 @@ function EmblaCarousel( storeElements() - engine = Engine( - root, - container, - slides, - ownerDocument, - ownerWindow, - options, - eventHandler, - animations, - ) + engine = createEngine(options, animations) optionsMediaQueries([ optionsBase, @@ -116,15 +129,8 @@ function EmblaCarousel( if (ownerDocument.hidden) animations.reset() }) - if (options.loop) { - if (!engine.slideLooper.canLoop()) { - deActivate() - activate({ loop: false }, withPlugins) - optionsBase = mergeOptions(optionsBase, { loop: true }) - return - } - engine.slideLooper.loop() - } + if (engine.options.loop) engine.slideLooper.loop() + if (container.offsetParent && slides.length) { engine.dragHandler.init(self, options.watchDrag) } diff --git a/playgrounds/embla-carousel-playground-vanilla/src/main.ts b/playgrounds/embla-carousel-playground-vanilla/src/main.ts index 3ba972ebc..fda0da21f 100644 --- a/playgrounds/embla-carousel-playground-vanilla/src/main.ts +++ b/playgrounds/embla-carousel-playground-vanilla/src/main.ts @@ -37,11 +37,27 @@ const injectBaseStyles = (): void => { injectBaseStyles() -const SLIDE_COUNT = 16 +const SLIDE_COUNT = 2 const OPTIONS: EmblaOptionsType = { - // loop: true, - dragFree: true, + align: 'start', containScroll: 'trimSnaps', + breakpoints: { + '(max-width: 767px)': { + dragFree: true, + loop: false, + slidesToScroll: 1, + }, + '(min-width: 768px) and (max-width: 1023px)': { + loop: true, + dragFree: false, + slidesToScroll: 2, + }, + '(min-width: 1024px)': { + loop: true, + dragFree: false, + slidesToScroll: 3, + }, + }, } const emblaNodes = ( From ed665e3a8357e894215a6c16d14ddee111c9c28f Mon Sep 17 00:00:00 2001 From: David Jerleke Date: Sat, 8 Jul 2023 11:18:03 +0200 Subject: [PATCH 2/6] Update react playground --- .../src/Carousel/Carousel.tsx | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/playgrounds/embla-carousel-playground-react/src/Carousel/Carousel.tsx b/playgrounds/embla-carousel-playground-react/src/Carousel/Carousel.tsx index a8c5bd4ec..67f5397fa 100644 --- a/playgrounds/embla-carousel-playground-react/src/Carousel/Carousel.tsx +++ b/playgrounds/embla-carousel-playground-react/src/Carousel/Carousel.tsx @@ -1,5 +1,8 @@ import React, { useState, useEffect, useCallback } from 'react' -import useEmblaCarousel, { EmblaOptionsType } from 'embla-carousel-react' +import useEmblaCarousel, { + EmblaCarouselType, + EmblaOptionsType, +} from 'embla-carousel-react' import { DotButton, PrevButton, NextButton } from './Buttons' import imageByIndex from './imageByIndex' @@ -29,21 +32,25 @@ export const EmblaCarousel: React.FC = (props) => { [emblaApi], ) - const onSelect = useCallback(() => { - if (!emblaApi) return + const onInit = useCallback((emblaApi: EmblaCarouselType) => { + setScrollSnaps(emblaApi.scrollSnapList()) + }, []) + + const onSelect = useCallback((emblaApi: EmblaCarouselType) => { setSelectedIndex(emblaApi.selectedScrollSnap()) setPrevBtnEnabled(emblaApi.canScrollPrev()) setNextBtnEnabled(emblaApi.canScrollNext()) - }, [emblaApi, setSelectedIndex]) + }, []) useEffect(() => { if (!emblaApi) return - onSelect() - setScrollSnaps(emblaApi.scrollSnapList()) - emblaApi.on('select', onSelect) - emblaApi.on('reInit', onSelect) - }, [emblaApi, setScrollSnaps, onSelect]) + onInit(emblaApi) + onSelect(emblaApi) + emblaApi.on('reInit', onInit) + emblaApi.on('reInit', onSelect) + emblaApi.on('select', onSelect) + }, [emblaApi, onInit, onSelect]) return ( <>
From ef4e63d79408262f044b4b3799c537ea6a3a04e7 Mon Sep 17 00:00:00 2001 From: David Jerleke Date: Sat, 8 Jul 2023 11:27:38 +0200 Subject: [PATCH 3/6] Remove testing options in vanilla playground --- .../src/main.ts | 22 +++---------------- 1 file changed, 3 insertions(+), 19 deletions(-) diff --git a/playgrounds/embla-carousel-playground-vanilla/src/main.ts b/playgrounds/embla-carousel-playground-vanilla/src/main.ts index fda0da21f..3ba972ebc 100644 --- a/playgrounds/embla-carousel-playground-vanilla/src/main.ts +++ b/playgrounds/embla-carousel-playground-vanilla/src/main.ts @@ -37,27 +37,11 @@ const injectBaseStyles = (): void => { injectBaseStyles() -const SLIDE_COUNT = 2 +const SLIDE_COUNT = 16 const OPTIONS: EmblaOptionsType = { - align: 'start', + // loop: true, + dragFree: true, containScroll: 'trimSnaps', - breakpoints: { - '(max-width: 767px)': { - dragFree: true, - loop: false, - slidesToScroll: 1, - }, - '(min-width: 768px) and (max-width: 1023px)': { - loop: true, - dragFree: false, - slidesToScroll: 2, - }, - '(min-width: 1024px)': { - loop: true, - dragFree: false, - slidesToScroll: 3, - }, - }, } const emblaNodes = ( From a375c68a85225269b848da391d300f9fad424451 Mon Sep 17 00:00:00 2001 From: David Jerleke Date: Tue, 30 May 2023 14:23:47 +0200 Subject: [PATCH 4/6] Implement #504. --- .github/ISSUE_TEMPLATE/bug_report.md | 3 +- .github/ISSUE_TEMPLATE/feature_request.md | 3 +- .prettierrc.js | 4 +- .vscode/settings.json | 3 + .../embla-carousel-auto-height/.eslintrc.js | 14 +- .../embla-carousel-auto-height/jest.config.js | 4 +- .../rollup.config.js | 14 +- .../src/components/AutoHeight.ts | 8 +- .../src/components/Options.ts | 2 +- packages/embla-carousel-autoplay/.eslintrc.js | 14 +- .../embla-carousel-autoplay/jest.config.js | 4 +- .../embla-carousel-autoplay/rollup.config.js | 14 +- .../src/components/Autoplay.ts | 4 +- .../src/components/Options.ts | 2 +- .../embla-carousel-class-names/.eslintrc.js | 14 +- .../embla-carousel-class-names/jest.config.js | 4 +- .../rollup.config.js | 14 +- .../src/components/ClassNames.ts | 6 +- .../src/components/Options.ts | 2 +- packages/embla-carousel-docs/.eslintrc.js | 52 ++-- .../{gatsby-browser.js => gatsby-browser.ts} | 4 +- .../{gatsby-config.js => gatsby-config.ts} | 76 +++--- packages/embla-carousel-docs/gatsby-node.js | 140 +---------- packages/embla-carousel-docs/gatsby-node.ts | 217 +++++++++++++++++ .../{gatsby-ssr.js => gatsby-ssr.tsx} | 31 +-- packages/embla-carousel-docs/package.json | 12 +- .../src/assets/icons/chevron-down.svg | 3 + .../src/assets/icons/chevron-left.svg | 4 +- .../src/assets/icons/chevron-right.svg | 4 +- .../src/assets/icons/chevron-up.svg | 3 + .../src/assets/icons/index.ts | 2 +- .../Button/{BareButton.tsx => ButtonBare.tsx} | 18 +- ...ttonFilled.tsx => ButtonPrimaryFilled.tsx} | 18 +- .../Button/ButtonPrimaryOutlined.tsx | 67 ++++++ .../Button/createButtonWithLoading.tsx | 61 +++++ .../CarouselGeneratorAlignmentSettings.tsx | 222 ++++++++++++++++++ .../CarouselGeneratorBasicSettings.tsx | 124 ++++++++++ .../CarouselGeneratorContext.tsx | 140 +++++++++++ .../CarouselGeneratorForm.tsx | 24 ++ .../CarouselGeneratorFormItems.tsx | 40 ++++ .../CarouselGeneratorFrameworkSettings.tsx | 53 +++++ .../CarouselGeneratorNavigationSettings.tsx | 54 +++++ .../CarouselGeneratorPlugins.tsx | 52 ++++ .../CarouselGeneratorSlidesSettings.tsx | 61 +++++ .../CarouselGeneratorSubmit.tsx | 65 +++++ .../CarouselGeneratorSupport.tsx | 16 ++ .../carouselGeneratorToggleFeatures.ts | 95 ++++++++ .../createCarouselGeneratorOptions.ts | 17 ++ .../createCarouselGeneratorPlugins.ts | 17 ++ .../createCarouselGeneratorStyles.ts | 31 +++ .../EmblaCarouselArrowsDotsButtons.jsx | 51 ---- .../EmblaCarouselArrowsDotsButtons.tsx | 61 ----- .../EmblaCarouselArrowsDotsButtons.tsx | 61 ----- .../React/createSandboxReactFooter.ts | 25 -- .../React/createSandboxReactHeader.ts | 24 -- .../React/createSandboxReactImages.ts | 24 -- .../CodeSandbox/SelectCodeSandboxForm.tsx | 189 --------------- .../Vanilla/createSandboxVanillaOptions.ts | 17 -- .../createSandboxFunctionsWithLabels.ts | 26 -- .../components/CodeSandbox/sandboxPlugins.ts | 27 --- .../components/CodeSandbox/sandboxTypes.ts | 58 ----- .../components/CodeSandbox/sandboxUtils.ts | 47 ---- .../src/components/Examples/Basic/Align.tsx | 2 +- .../Examples/Basic/AlignSandboxes.tsx | 108 ++++----- .../src/components/Examples/Basic/Default.tsx | 2 +- .../Examples/Basic/DefaultSandboxes.tsx | 108 ++++----- .../components/Examples/Basic/DragFree.tsx | 4 +- .../Examples/Basic/DragFreeSandboxes.tsx | 108 ++++----- .../src/components/Examples/Basic/Loop.tsx | 2 +- .../Examples/Basic/LoopSandboxes.tsx | 108 ++++----- .../components/Examples/Basic/RightToLeft.tsx | 2 +- .../Examples/Basic/RightToLeftSandboxes.tsx | 110 ++++----- .../Examples/Basic/SlidesToScroll.tsx | 4 +- .../Basic/SlidesToScrollSandboxes.tsx | 110 ++++----- .../Examples/Basic/VariableWidths.tsx | 2 +- .../Basic/VariableWidthsSandboxes.tsx | 110 ++++----- .../src/components/Examples/Basic/YAxis.tsx | 4 +- .../Examples/Basic/YAxisSandboxes.tsx | 108 ++++----- .../CarouselGeneratorSandboxes.ts | 173 ++++++++++++++ .../Examples/Miscellaneous/InfiniteScroll.tsx | 4 +- .../Miscellaneous/InfiniteScrollSandboxes.tsx | 145 ++++++------ .../Examples/Miscellaneous/IosPicker.tsx | 2 +- .../Miscellaneous/IosPickerSandboxes.tsx | 208 ++++++++-------- .../Examples/Miscellaneous/LazyLoad.tsx | 2 +- .../Miscellaneous/LazyLoadSandboxes.tsx | 188 +++++++-------- .../Examples/Miscellaneous/Progress.tsx | 2 +- .../Miscellaneous/ProgressSandboxes.tsx | 148 ++++++------ .../Examples/Navigation/ArrowsDots.tsx | 2 +- .../Navigation/ArrowsDotsSandboxes.tsx | 187 +++++++-------- .../components/Examples/Navigation/Thumbs.tsx | 2 +- .../Examples/Navigation/ThumbsSandboxes.tsx | 187 +++++++-------- .../components/Examples/Plugins/Autoplay.tsx | 2 +- .../Examples/Plugins/AutoplaySandboxes.tsx | 112 ++++----- .../Examples/Plugins/ClassNames.tsx | 2 +- .../Examples/Plugins/ClassNamesSandboxes.tsx | 112 ++++----- .../src/components/Examples/Tween/Opacity.tsx | 2 +- .../Examples/Tween/OpacitySandboxes.tsx | 146 ++++++------ .../components/Examples/Tween/Parallax.tsx | 2 +- .../Examples/Tween/ParallaxSandboxes.tsx | 146 ++++++------ .../src/components/Examples/Tween/Scale.tsx | 2 +- .../Examples/Tween/ScaleSandboxes.tsx | 146 ++++++------ .../Examples/carouselWrapperStyles.ts | 10 +- .../Examples/createCarouselStyles.ts | 158 +++++++------ .../src/components/Footer/Footer.tsx | 8 +- .../src/components/Footer/FooterLinks.tsx | 8 +- .../src/components/Header/Header.tsx | 4 +- .../src/components/Header/HeaderActions.tsx | 15 +- .../src/components/Header/HeaderLogo.tsx | 4 +- .../src/components/Hero/HeroBrand.tsx | 35 ++- .../src/components/Hero/HeroUsps.tsx | 22 +- .../src/components/Icon/Icon.tsx | 8 +- .../src/components/Icon/IconWithText.tsx | 35 ++- .../src/components/Input/InputCheckbox.tsx | 6 + .../src/components/Input/InputRadio.tsx | 6 + .../src/components/Input/InputText.tsx | 151 ++++++++++++ .../Input/createRadioOrCheckboxCard.tsx | 111 +++++++++ .../Input/createRadioOrCheckboxDefault.tsx | 155 ++++++++++++ .../KeyNavigating/KeyNavigatingContext.tsx | 10 +- .../KeyNavigatingSkipToContent.tsx | 28 +-- .../src/components/Layout/Layout.tsx | 14 +- .../src/components/Link/ButtonLink.tsx | 7 - .../Link/{BareLink.tsx => LinkBare.tsx} | 10 +- .../src/components/Link/LinkButton.tsx | 34 +++ .../Link/{CardLink.tsx => LinkCard.tsx} | 16 +- .../Link/{ContentLink.tsx => LinkContent.tsx} | 12 +- ...{NavigationLink.tsx => LinkNavigation.tsx} | 10 +- .../components/LoadSpinner/LoadSpinner.tsx | 2 +- .../components/Mdx/Components/Admonition.tsx | 35 +-- .../src/components/Mdx/Components/Link.tsx | 6 +- .../Mdx/Components/PageChildLinks.tsx | 23 +- .../Mdx/Components/PrismSyntaxFrame.tsx | 27 ++- .../Mdx/Components/PrismSyntaxHighlight.tsx | 2 +- .../Mdx/Components/RepositoryLink.tsx | 4 +- .../src/components/Mdx/Mdx.tsx | 4 +- .../src/components/Mdx/Styles/code.ts | 27 +-- .../src/components/Mdx/Styles/heading.ts | 4 +- .../src/components/Page/PageBreadcrumbs.tsx | 6 +- .../src/components/Page/PageEditThisPage.tsx | 4 +- .../src/components/Page/PageFrame.tsx | 37 +++ .../src/components/Page/PageFrameCollapse.ts | 11 + .../Grid.tsx => Page/PageGrid.tsx} | 20 +- .../src/components/Page/PagePagination.tsx | 35 ++- .../src/components/Portal/Portal.tsx | 2 +- .../src/components/Routes/RoutesContext.tsx | 27 +-- .../Compilation/build-after.ts | 10 +- .../Compilation/build-before.ts | 8 +- .../Compilation/build-utils.ts | 6 +- .../Compilation/tsconfig.node.json | 0 .../Compilation/tsconfig.sandboxfiles.json | 0 .../ArrowsDots/EmblaCarousel.jsx | 26 +- .../ArrowsDots/EmblaCarousel.tsx | 28 ++- .../EmblaCarouselArrowsDotsButtons.jsx | 51 ++++ .../EmblaCarouselArrowsDotsButtons.tsx | 58 +++++ .../Autoplay/EmblaCarousel.jsx | 0 .../Autoplay/EmblaCarousel.tsx | 0 .../SandboxFilesDist/CarouselDefaultEntry.jsx | 2 +- .../CarouselDefaultEntry.tsx | 2 +- .../CarouselGenerator/EmblaCarousel.jsx | 106 +++++++++ .../CarouselGenerator/EmblaCarousel.tsx | 114 +++++++++ .../EmblaCarouselArrowButtons.jsx | 121 ++++++++++ .../EmblaCarouselArrowButtons.tsx | 141 +++++++++++ .../EmblaCarouselDotButton.jsx | 59 +++++ .../EmblaCarouselDotButton.tsx | 78 ++++++ .../CarouselIosPickerEntry.jsx | 2 +- .../CarouselIosPickerEntry.tsx | 2 +- .../ClassNames/EmblaCarousel.jsx | 0 .../ClassNames/EmblaCarousel.tsx | 0 .../Default/EmblaCarousel.jsx | 0 .../Default/EmblaCarousel.tsx | 0 .../React/SandboxFilesDist/Footer.jsx | 0 .../React/SandboxFilesDist/Footer.tsx | 0 .../React/SandboxFilesDist/Header.jsx | 0 .../React/SandboxFilesDist/Header.tsx | 0 .../InfiniteScroll/EmblaCarousel.jsx | 9 +- .../InfiniteScroll/EmblaCarousel.tsx | 15 +- .../IosPicker/EmblaCarousel.jsx | 0 .../IosPicker/EmblaCarousel.tsx | 0 .../IosPicker/EmblaCarouselIosPickerItem.jsx | 12 +- .../IosPicker/EmblaCarouselIosPickerItem.tsx | 20 +- .../LazyLoad/EmblaCarousel.jsx | 0 .../LazyLoad/EmblaCarousel.tsx | 2 +- .../LazyLoad/EmblaCarouselLazyLoadImage.jsx | 2 +- .../LazyLoad/EmblaCarouselLazyLoadImage.tsx | 2 +- .../Opacity/EmblaCarousel.jsx | 2 +- .../Opacity/EmblaCarousel.tsx | 2 +- .../Parallax/EmblaCarousel.jsx | 4 +- .../Parallax/EmblaCarousel.tsx | 4 +- .../Progress/EmblaCarousel.jsx | 0 .../Progress/EmblaCarousel.tsx | 2 +- .../RightToLeft/EmblaCarousel.jsx | 0 .../RightToLeft/EmblaCarousel.tsx | 0 .../SandboxFilesDist/Scale/EmblaCarousel.jsx | 4 +- .../SandboxFilesDist}/Scale/EmblaCarousel.tsx | 4 +- .../SandboxFilesDist/Thumbs/EmblaCarousel.jsx | 4 +- .../Thumbs/EmblaCarousel.tsx | 4 +- .../Thumbs/EmblaCarouselThumbsButton.jsx | 2 +- .../Thumbs/EmblaCarouselThumbsButton.tsx | 2 +- .../React/SandboxFilesDist/declarations.d.ts | 0 .../React/SandboxFilesDist/imageByIndex.js | 0 .../React/SandboxFilesDist/imageByIndex.ts | 0 .../React/SandboxFilesDist/index.html | 0 .../ArrowsDots/EmblaCarousel.tsx | 28 ++- .../EmblaCarouselArrowsDotsButtons.tsx | 58 +++++ .../Autoplay/EmblaCarousel.tsx | 0 .../SandboxFilesSrc}/CarouselDefaultEntry.tsx | 2 +- .../CarouselGenerator/EmblaCarousel.tsx | 114 +++++++++ .../EmblaCarouselArrowButtons.tsx | 141 +++++++++++ .../EmblaCarouselDotButton.tsx | 78 ++++++ .../CarouselIosPickerEntry.tsx | 2 +- .../ClassNames/EmblaCarousel.tsx | 0 .../SandboxFilesSrc/Default/EmblaCarousel.tsx | 0 .../React/SandboxFilesSrc/Footer.tsx | 0 .../React/SandboxFilesSrc/Header.tsx | 0 .../InfiniteScroll/EmblaCarousel.tsx | 15 +- .../IosPicker/EmblaCarousel.tsx | 0 .../IosPicker/EmblaCarouselIosPickerItem.tsx | 20 +- .../LazyLoad/EmblaCarousel.tsx | 2 +- .../LazyLoad/EmblaCarouselLazyLoadImage.tsx | 2 +- .../Opacity/EmblaCarousel.tsx | 2 +- .../Parallax/EmblaCarousel.tsx | 4 +- .../Progress/EmblaCarousel.tsx | 2 +- .../RightToLeft/EmblaCarousel.tsx | 0 .../SandboxFilesSrc}/Scale/EmblaCarousel.tsx | 4 +- .../SandboxFilesSrc}/Thumbs/EmblaCarousel.tsx | 4 +- .../Thumbs/EmblaCarouselThumbsButton.tsx | 2 +- .../React/SandboxFilesSrc/declarations.d.ts | 0 .../React/SandboxFilesSrc/imageByIndex.ts | 0 .../React/SandboxFilesSrc/index.html | 0 .../React/createSandboxReact.ts | 86 ++++--- .../React/createSandboxReactEntry.ts | 32 ++- .../Sandbox/React/createSandboxReactFooter.ts | 21 ++ .../Sandbox/React/createSandboxReactHeader.ts | 23 ++ .../React/createSandboxReactImagePath.ts | 2 +- .../Sandbox/React/createSandboxReactImages.ts | 22 ++ .../React/createSandboxReactIndexHtml.ts | 6 +- .../React/createSandboxReactPackageJson.ts | 38 +-- .../React/createSandboxReactTsConfig.ts | 6 +- .../React/createSandboxReactTsDeclarations.ts | 2 +- .../React/sandboxReactFolders.ts | 2 +- .../SandboxSelection.tsx} | 39 ++- .../Sandbox/SandboxSelectionForm.tsx | 114 +++++++++ .../Sandbox/SandboxSelectionInput.tsx | 55 +++++ .../ArrowsDots/EmblaCarousel.js | 13 +- .../ArrowsDots/EmblaCarousel.ts | 13 +- .../ArrowsDots/arrows-dots-buttons.js | 35 +-- .../ArrowsDots/arrows-dots-buttons.ts | 47 ++-- .../Autoplay/EmblaCarousel.js | 0 .../Autoplay/EmblaCarousel.ts | 0 .../CarouselGenerator/EmblaCarousel.js | 67 ++++++ .../CarouselGenerator/EmblaCarousel.ts | 70 ++++++ .../CarouselGenerator/arrow-buttons.js | 55 +++++ .../CarouselGenerator/arrow-buttons.ts | 61 +++++ .../CarouselGenerator/dot-buttons.js | 46 ++++ .../CarouselGenerator/dot-buttons.ts | 48 ++++ .../CarouselGenerator/embla-carousel.html | 100 ++++++++ .../ClassNames/EmblaCarousel.js | 0 .../ClassNames/EmblaCarousel.ts | 0 .../SandboxFilesDist/Default/EmblaCarousel.js | 0 .../SandboxFilesDist/Default/EmblaCarousel.ts | 0 .../InfiniteScroll/EmblaCarousel.js | 4 +- .../InfiniteScroll/EmblaCarousel.ts | 4 +- .../InfiniteScroll/infinite-scroll.js | 2 +- .../InfiniteScroll/infinite-scroll.ts | 10 +- .../IosPicker/EmblaCarousel.js | 4 +- .../IosPicker/EmblaCarousel.ts | 4 +- .../SandboxFilesDist/IosPicker/ios-picker.js | 4 +- .../SandboxFilesDist}/IosPicker/ios-picker.ts | 14 +- .../LazyLoad/EmblaCarousel.js | 0 .../LazyLoad/EmblaCarousel.ts | 0 .../SandboxFilesDist/LazyLoad/lazy-load.js | 4 +- .../SandboxFilesDist}/LazyLoad/lazy-load.ts | 8 +- .../SandboxFilesDist/Opacity/EmblaCarousel.js | 0 .../SandboxFilesDist/Opacity/EmblaCarousel.ts | 0 .../SandboxFilesDist/Opacity/tween-opacity.js | 2 +- .../SandboxFilesDist/Opacity/tween-opacity.ts | 4 +- .../Parallax/EmblaCarousel.js | 0 .../Parallax/EmblaCarousel.ts | 0 .../Parallax/tween-parallax.js | 2 +- .../Parallax/tween-parallax.ts | 6 +- .../Progress/EmblaCarousel.js | 2 +- .../Progress/EmblaCarousel.ts | 2 +- .../SandboxFilesDist/Progress/progress-bar.js | 2 +- .../SandboxFilesDist/Progress/progress-bar.ts | 4 +- .../SandboxFilesDist/Scale/EmblaCarousel.js | 0 .../SandboxFilesDist/Scale/EmblaCarousel.ts | 0 .../SandboxFilesDist/Scale/tween-scale.js | 2 +- .../SandboxFilesDist/Scale/tween-scale.ts | 4 +- .../SandboxFilesDist/Thumbs/EmblaCarousel.js | 10 +- .../SandboxFilesDist}/Thumbs/EmblaCarousel.ts | 8 +- .../SandboxFilesDist/Thumbs/thumb-buttons.js | 2 +- .../SandboxFilesDist/Thumbs/thumb-buttons.ts | 6 +- .../SandboxFilesDist/declarations.d.ts | 0 .../Vanilla/SandboxFilesDist/index.html | 0 .../ArrowsDots/EmblaCarousel.ts | 13 +- .../ArrowsDots/arrows-dots-buttons.ts | 47 ++-- .../SandboxFilesSrc/Autoplay/EmblaCarousel.ts | 0 .../CarouselGenerator/EmblaCarousel.ts | 70 ++++++ .../CarouselGenerator/arrow-buttons.ts | 61 +++++ .../CarouselGenerator/dot-buttons.ts | 48 ++++ .../CarouselGenerator/embla-carousel.html | 100 ++++++++ .../ClassNames/EmblaCarousel.ts | 0 .../SandboxFilesSrc/Default/EmblaCarousel.ts | 0 .../InfiniteScroll/EmblaCarousel.ts | 4 +- .../InfiniteScroll/infinite-scroll.ts | 10 +- .../IosPicker/EmblaCarousel.ts | 4 +- .../SandboxFilesSrc}/IosPicker/ios-picker.ts | 14 +- .../SandboxFilesSrc/LazyLoad/EmblaCarousel.ts | 0 .../SandboxFilesSrc}/LazyLoad/lazy-load.ts | 8 +- .../SandboxFilesSrc/Opacity/EmblaCarousel.ts | 0 .../SandboxFilesSrc/Opacity/tween-opacity.ts | 4 +- .../SandboxFilesSrc/Parallax/EmblaCarousel.ts | 0 .../Parallax/tween-parallax.ts | 6 +- .../SandboxFilesSrc/Progress/EmblaCarousel.ts | 2 +- .../SandboxFilesSrc/Progress/progress-bar.ts | 4 +- .../SandboxFilesSrc/Scale/EmblaCarousel.ts | 0 .../SandboxFilesSrc/Scale/tween-scale.ts | 4 +- .../SandboxFilesSrc}/Thumbs/EmblaCarousel.ts | 8 +- .../SandboxFilesSrc/Thumbs/thumb-buttons.ts | 6 +- .../Vanilla/SandboxFilesSrc/declarations.d.ts | 0 .../Vanilla/SandboxFilesSrc/index.html | 0 .../Vanilla/createSandboxVanilla.ts | 59 ++--- .../Vanilla/createSandboxVanillaEntry.ts | 10 +- .../Vanilla/createSandboxVanillaImagePaths.ts | 2 +- .../Vanilla/createSandboxVanillaOptions.ts | 16 ++ .../createSandboxVanillaPackageJson.ts | 23 +- .../Vanilla/createSandboxVanillaTsConfig.ts | 6 +- .../createSandboxVanillaTsDeclarations.ts | 2 +- .../Vanilla/sandboxVanillaFolders.ts | 2 +- .../{CodeSandbox => Sandbox}/sandboxImages.ts | 10 +- .../{CodeSandbox => Sandbox}/sandboxStyles.ts | 4 +- .../src/components/Search/Search.tsx | 26 +- .../src/components/SiteLayout/Frame.tsx | 36 --- .../components/SiteLayout/FrameCollapse.tsx | 15 -- .../src/components/SiteLogo/SiteLogo.tsx | 16 +- .../SiteNavigation/SiteNavigation.tsx | 2 +- .../SiteNavigation/SiteNavigationContext.tsx | 8 +- .../SiteNavigationMenuCompact.tsx | 18 +- .../SiteNavigationMenuDesktop.tsx | 12 +- .../SiteNavigation/SiteNavigationSubMenu.tsx | 10 +- .../SiteNavigation/SiteNavigationToggle.tsx | 4 +- .../TableOfContents/TableOfContents.tsx | 8 +- .../TableOfContentsContext.tsx | 10 +- .../TableOfContents/TableOfContentsMenu.tsx | 10 +- .../TableOfContentsMenuItem.tsx | 4 +- .../src/components/Tabs/Tabs.tsx | 26 +- .../src/components/Tabs/TabsContext.tsx | 10 +- .../src/components/Tabs/TabsItem.tsx | 2 +- .../src/components/Theme/ThemeContext.tsx | 6 +- .../src/components/Theme/ThemeToggle.tsx | 4 +- .../src/consts/algoliaSearch.ts | 4 +- .../embla-carousel-docs/src/consts/border.ts | 4 +- .../src/consts/breakpoints.ts | 6 +- .../embla-carousel-docs/src/consts/card.ts | 9 + .../src/consts/carouselGenerator.ts | 40 ++++ .../src/consts/fontSizes.ts | 6 +- .../embla-carousel-docs/src/consts/graphQL.ts | 25 ++ .../embla-carousel-docs/src/consts/layers.ts | 2 +- .../src/consts/localStorage.ts | 2 +- .../embla-carousel-docs/src/consts/page.ts | 64 +++++ .../src/consts/pageTemplates.ts | 37 --- .../embla-carousel-docs/src/consts/sandbox.ts | 98 ++++++++ .../src/consts/scrollBars.ts | 8 +- .../src/consts/spacings.ts | 4 +- .../embla-carousel-docs/src/consts/themes.ts | 12 +- .../embla-carousel-docs/src/consts/urls.ts | 5 +- .../src/content/pages/examples/generator.mdx | 66 ++++++ .../examples/{static.mdx => predefined.mdx} | 8 +- .../src/hooks/useCarouselGenerator.ts | 8 + .../src/hooks/useEventListener.ts | 14 +- .../src/hooks/useKeyNavigating.ts | 2 +- .../src/hooks/useLocalStorage.ts | 2 +- .../src/hooks/useNavigation.ts | 2 +- .../src/hooks/useRouteActive.ts | 4 +- .../src/hooks/useRouteBreadcrumbs.ts | 2 +- .../src/hooks/useRoutes.ts | 2 +- .../src/hooks/useSiteMetadata.ts | 2 +- .../src/hooks/useTableOfContents.ts | 2 +- .../src/hooks/useWindowSize.ts | 6 +- .../embla-carousel-docs/src/templates/404.tsx | 30 +-- .../src/templates/{Page.tsx => Default.tsx} | 24 +- .../src/templates/Generator.tsx | 54 +++++ .../src/templates/Home.tsx | 10 +- .../src/utils/addRouteChildren.ts | 2 +- .../src/utils/camelOrPascalToKebabCase.ts | 13 + .../src/utils/carouselGenerator.ts | 46 ++++ .../src/utils/createFlatRoutes.ts | 11 +- .../src/utils/createGapStyles.ts | 35 +++ .../src/utils/createHierarchicalRoutes.ts | 5 +- .../src/utils/createPlaceholderStyles.ts | 2 +- .../src/utils/createSquareSizeStyles.ts | 2 +- .../src/utils/getRefElementOrNode.ts | 2 +- .../src/utils/isRouteActive.ts | 2 +- .../src/utils/isRoutePartiallyActive.ts | 2 +- .../src/utils/kebabCaseToPascalCase.ts | 4 +- .../src/utils/loadPrettier.ts | 14 +- .../src/utils/numberWithinRange.ts | 2 +- .../embla-carousel-docs/src/utils/sandbox.ts | 92 ++++++++ .../utils/styledComponentStylesToString.ts | 2 +- packages/embla-carousel-react/.eslintrc.js | 8 +- packages/embla-carousel-react/jest.config.js | 4 +- .../embla-carousel-react/rollup.config.js | 22 +- .../src/components/useEmblaCarousel.ts | 12 +- .../.eslintrc.js | 14 +- .../jest.config.js | 4 +- .../rollup.config.js | 14 +- .../src/__tests__/utils.test.ts | 60 ++--- .../src/components/utils.ts | 8 +- .../src/index.ts | 2 +- packages/embla-carousel-svelte/.eslintrc.js | 8 +- packages/embla-carousel-svelte/jest.config.js | 4 +- .../embla-carousel-svelte/rollup.config.js | 22 +- .../src/components/emblaCarouselSvelte.ts | 18 +- packages/embla-carousel-vue/.eslintrc.js | 8 +- packages/embla-carousel-vue/jest.config.js | 4 +- packages/embla-carousel-vue/rollup.config.js | 22 +- .../src/components/emblaCarouselVue.ts | 10 +- packages/embla-carousel/.eslintrc.js | 14 +- packages/embla-carousel/jest.config.js | 4 +- packages/embla-carousel/rollup.config.js | 14 +- .../src/__tests__/Alignment.test.ts | 2 +- .../embla-carousel/src/__tests__/Axis.test.ts | 4 +- .../src/__tests__/EmblaCarousel.test.ts | 10 +- .../src/__tests__/OptionsHandler.test.ts | 38 +-- .../src/__tests__/PluginsHandler.test.ts | 4 +- .../src/__tests__/ScrollBounds.test.ts | 2 +- .../src/__tests__/SlidesInView.test.ts | 4 +- .../src/__tests__/SlidesToScroll.test.ts | 4 +- .../src/components/Alignment.ts | 4 +- .../src/components/Animations.ts | 2 +- .../embla-carousel/src/components/Axis.ts | 4 +- .../embla-carousel/src/components/Counter.ts | 4 +- .../src/components/Direction.ts | 2 +- .../src/components/DragHandler.ts | 10 +- .../src/components/DragTracker.ts | 4 +- .../src/components/EmblaCarousel.ts | 14 +- .../embla-carousel/src/components/Engine.ts | 36 +-- .../src/components/EventHandler.ts | 2 +- .../src/components/EventStore.ts | 6 +- .../embla-carousel/src/components/Limit.ts | 2 +- .../embla-carousel/src/components/Options.ts | 2 +- .../src/components/OptionsHandler.ts | 6 +- .../src/components/PercentOfView.ts | 2 +- .../embla-carousel/src/components/Plugins.ts | 2 +- .../src/components/PluginsHandler.ts | 12 +- .../src/components/ResizeHandler.ts | 10 +- .../src/components/ScrollBody.ts | 4 +- .../src/components/ScrollBounds.ts | 4 +- .../src/components/ScrollContain.ts | 4 +- .../src/components/ScrollLimit.ts | 4 +- .../src/components/ScrollLooper.ts | 4 +- .../src/components/ScrollProgress.ts | 2 +- .../src/components/ScrollSnaps.ts | 4 +- .../src/components/ScrollTarget.ts | 4 +- .../embla-carousel/src/components/ScrollTo.ts | 4 +- .../src/components/SlideLooper.ts | 6 +- .../src/components/SlideSizes.ts | 4 +- .../src/components/SlidesHandler.ts | 10 +- .../src/components/SlidesInView.ts | 8 +- .../src/components/SlidesToScroll.ts | 4 +- .../src/components/Translate.ts | 4 +- .../embla-carousel/src/components/Vector1d.ts | 2 +- .../embla-carousel/src/components/utils.ts | 4 +- .../src/Carousel/Carousel.tsx | 8 +- .../src/main.tsx | 6 +- .../vite.config.ts | 16 +- .../src/Carousel/setupButtons.ts | 4 +- .../src/Carousel/setupDots.ts | 4 +- .../src/Carousel/setupSlides.ts | 4 +- .../src/main.ts | 12 +- .../vite.config.ts | 16 +- rollup.config.js | 12 +- yarn.lock | 21 +- 472 files changed, 7508 insertions(+), 3653 deletions(-) create mode 100644 .vscode/settings.json rename packages/embla-carousel-docs/{gatsby-browser.js => gatsby-browser.ts} (60%) rename packages/embla-carousel-docs/{gatsby-config.js => gatsby-config.ts} (62%) create mode 100644 packages/embla-carousel-docs/gatsby-node.ts rename packages/embla-carousel-docs/{gatsby-ssr.js => gatsby-ssr.tsx} (84%) create mode 100644 packages/embla-carousel-docs/src/assets/icons/chevron-down.svg create mode 100644 packages/embla-carousel-docs/src/assets/icons/chevron-up.svg rename packages/embla-carousel-docs/src/components/Button/{BareButton.tsx => ButtonBare.tsx} (78%) rename packages/embla-carousel-docs/src/components/Button/{PrimaryButtonFilled.tsx => ButtonPrimaryFilled.tsx} (54%) create mode 100644 packages/embla-carousel-docs/src/components/Button/ButtonPrimaryOutlined.tsx create mode 100644 packages/embla-carousel-docs/src/components/Button/createButtonWithLoading.tsx create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorAlignmentSettings.tsx create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorBasicSettings.tsx create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorContext.tsx create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorForm.tsx create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorFormItems.tsx create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorFrameworkSettings.tsx create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorNavigationSettings.tsx create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorPlugins.tsx create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorSlidesSettings.tsx create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorSubmit.tsx create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorSupport.tsx create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/carouselGeneratorToggleFeatures.ts create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/createCarouselGeneratorOptions.ts create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/createCarouselGeneratorPlugins.ts create mode 100644 packages/embla-carousel-docs/src/components/CarouselGenerator/createCarouselGeneratorStyles.ts delete mode 100644 packages/embla-carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/ArrowsDots/EmblaCarouselArrowsDotsButtons.jsx delete mode 100644 packages/embla-carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/ArrowsDots/EmblaCarouselArrowsDotsButtons.tsx delete mode 100644 packages/embla-carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/ArrowsDots/EmblaCarouselArrowsDotsButtons.tsx delete mode 100644 packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactFooter.ts delete mode 100644 packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactHeader.ts delete mode 100644 packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactImages.ts delete mode 100644 packages/embla-carousel-docs/src/components/CodeSandbox/SelectCodeSandboxForm.tsx delete mode 100644 packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaOptions.ts delete mode 100644 packages/embla-carousel-docs/src/components/CodeSandbox/createSandboxFunctionsWithLabels.ts delete mode 100644 packages/embla-carousel-docs/src/components/CodeSandbox/sandboxPlugins.ts delete mode 100644 packages/embla-carousel-docs/src/components/CodeSandbox/sandboxTypes.ts delete mode 100644 packages/embla-carousel-docs/src/components/CodeSandbox/sandboxUtils.ts create mode 100644 packages/embla-carousel-docs/src/components/Examples/CarouselGenerator/CarouselGeneratorSandboxes.ts create mode 100644 packages/embla-carousel-docs/src/components/Input/InputCheckbox.tsx create mode 100644 packages/embla-carousel-docs/src/components/Input/InputRadio.tsx create mode 100644 packages/embla-carousel-docs/src/components/Input/InputText.tsx create mode 100644 packages/embla-carousel-docs/src/components/Input/createRadioOrCheckboxCard.tsx create mode 100644 packages/embla-carousel-docs/src/components/Input/createRadioOrCheckboxDefault.tsx delete mode 100644 packages/embla-carousel-docs/src/components/Link/ButtonLink.tsx rename packages/embla-carousel-docs/src/components/Link/{BareLink.tsx => LinkBare.tsx} (91%) create mode 100644 packages/embla-carousel-docs/src/components/Link/LinkButton.tsx rename packages/embla-carousel-docs/src/components/Link/{CardLink.tsx => LinkCard.tsx} (68%) rename packages/embla-carousel-docs/src/components/Link/{ContentLink.tsx => LinkContent.tsx} (53%) rename packages/embla-carousel-docs/src/components/Link/{NavigationLink.tsx => LinkNavigation.tsx} (84%) create mode 100644 packages/embla-carousel-docs/src/components/Page/PageFrame.tsx create mode 100644 packages/embla-carousel-docs/src/components/Page/PageFrameCollapse.ts rename packages/embla-carousel-docs/src/components/{SiteLayout/Grid.tsx => Page/PageGrid.tsx} (83%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Compilation/build-after.ts (85%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Compilation/build-before.ts (92%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Compilation/build-utils.ts (81%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Compilation/tsconfig.node.json (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Compilation/tsconfig.sandboxfiles.json (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/ArrowsDots/EmblaCarousel.jsx (76%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/ArrowsDots/EmblaCarousel.tsx (77%) create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/ArrowsDots/EmblaCarouselArrowsDotsButtons.jsx create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/ArrowsDots/EmblaCarouselArrowsDotsButtons.tsx rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Autoplay/EmblaCarousel.jsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Autoplay/EmblaCarousel.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/CarouselDefaultEntry.jsx (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/React/SandboxFilesSrc => Sandbox/React/SandboxFilesDist}/CarouselDefaultEntry.tsx (97%) create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarousel.jsx create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarousel.tsx create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.jsx create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.tsx create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.jsx create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.tsx rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/CarouselIosPickerEntry.jsx (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/CarouselIosPickerEntry.tsx (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/ClassNames/EmblaCarousel.jsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/ClassNames/EmblaCarousel.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Default/EmblaCarousel.jsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Default/EmblaCarousel.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Footer.jsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Footer.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Header.jsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Header.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.jsx (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.tsx (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/IosPicker/EmblaCarousel.jsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/IosPicker/EmblaCarousel.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.jsx (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/React/SandboxFilesSrc => Sandbox/React/SandboxFilesDist}/IosPicker/EmblaCarouselIosPickerItem.tsx (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/LazyLoad/EmblaCarousel.jsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/LazyLoad/EmblaCarousel.tsx (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/LazyLoad/EmblaCarouselLazyLoadImage.jsx (93%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/React/SandboxFilesSrc => Sandbox/React/SandboxFilesDist}/LazyLoad/EmblaCarouselLazyLoadImage.tsx (94%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Opacity/EmblaCarousel.jsx (99%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/React/SandboxFilesSrc => Sandbox/React/SandboxFilesDist}/Opacity/EmblaCarousel.tsx (99%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Parallax/EmblaCarousel.jsx (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Parallax/EmblaCarousel.tsx (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Progress/EmblaCarousel.jsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Progress/EmblaCarousel.tsx (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/RightToLeft/EmblaCarousel.jsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/RightToLeft/EmblaCarousel.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Scale/EmblaCarousel.jsx (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/React/SandboxFilesSrc => Sandbox/React/SandboxFilesDist}/Scale/EmblaCarousel.tsx (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Thumbs/EmblaCarousel.jsx (97%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/React/SandboxFilesSrc => Sandbox/React/SandboxFilesDist}/Thumbs/EmblaCarousel.tsx (97%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.jsx (90%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.tsx (92%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/declarations.d.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/imageByIndex.js (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/imageByIndex.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesDist/index.html (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/ArrowsDots/EmblaCarousel.tsx (77%) create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/ArrowsDots/EmblaCarouselArrowsDotsButtons.tsx rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/Autoplay/EmblaCarousel.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/React/SandboxFilesDist => Sandbox/React/SandboxFilesSrc}/CarouselDefaultEntry.tsx (97%) create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarousel.tsx create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselArrowButtons.tsx create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.tsx rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/CarouselIosPickerEntry.tsx (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/ClassNames/EmblaCarousel.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/Default/EmblaCarousel.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/Footer.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/Header.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/InfiniteScroll/EmblaCarousel.tsx (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/IosPicker/EmblaCarousel.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/React/SandboxFilesDist => Sandbox/React/SandboxFilesSrc}/IosPicker/EmblaCarouselIosPickerItem.tsx (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/LazyLoad/EmblaCarousel.tsx (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/React/SandboxFilesDist => Sandbox/React/SandboxFilesSrc}/LazyLoad/EmblaCarouselLazyLoadImage.tsx (94%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/React/SandboxFilesDist => Sandbox/React/SandboxFilesSrc}/Opacity/EmblaCarousel.tsx (99%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/Parallax/EmblaCarousel.tsx (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/Progress/EmblaCarousel.tsx (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/RightToLeft/EmblaCarousel.tsx (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/React/SandboxFilesDist => Sandbox/React/SandboxFilesSrc}/Scale/EmblaCarousel.tsx (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/React/SandboxFilesDist => Sandbox/React/SandboxFilesSrc}/Thumbs/EmblaCarousel.tsx (97%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/Thumbs/EmblaCarouselThumbsButton.tsx (92%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/declarations.d.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/imageByIndex.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/SandboxFilesSrc/index.html (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/createSandboxReact.ts (57%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/createSandboxReactEntry.ts (53%) create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/createSandboxReactFooter.ts create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/createSandboxReactHeader.ts rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/createSandboxReactImagePath.ts (87%) create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/React/createSandboxReactImages.ts rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/createSandboxReactIndexHtml.ts (75%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/createSandboxReactPackageJson.ts (66%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/createSandboxReactTsConfig.ts (75%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/createSandboxReactTsDeclarations.ts (64%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/React/sandboxReactFolders.ts (79%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/SelectCodeSandbox.tsx => Sandbox/SandboxSelection.tsx} (81%) create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/SandboxSelectionForm.tsx create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/SandboxSelectionInput.tsx rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/ArrowsDots/EmblaCarousel.js (78%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/ArrowsDots/EmblaCarousel.ts (80%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/ArrowsDots/arrows-dots-buttons.js (88%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/Vanilla/SandboxFilesSrc => Sandbox/Vanilla/SandboxFilesDist}/ArrowsDots/arrows-dots-buttons.ts (88%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Autoplay/EmblaCarousel.js (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Autoplay/EmblaCarousel.ts (100%) create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarousel.js create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarousel.ts create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/arrow-buttons.js create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/arrow-buttons.ts create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/dot-buttons.js create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/dot-buttons.ts create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/embla-carousel.html rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/ClassNames/EmblaCarousel.js (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/ClassNames/EmblaCarousel.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Default/EmblaCarousel.js (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Default/EmblaCarousel.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarousel.js (97%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/Vanilla/SandboxFilesSrc => Sandbox/Vanilla/SandboxFilesDist}/InfiniteScroll/EmblaCarousel.ts (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/InfiniteScroll/infinite-scroll.js (99%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/Vanilla/SandboxFilesSrc => Sandbox/Vanilla/SandboxFilesDist}/InfiniteScroll/infinite-scroll.ts (97%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/IosPicker/EmblaCarousel.js (93%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/IosPicker/EmblaCarousel.ts (93%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/IosPicker/ios-picker.js (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/Vanilla/SandboxFilesSrc => Sandbox/Vanilla/SandboxFilesDist}/IosPicker/ios-picker.ts (95%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.js (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/LazyLoad/lazy-load.js (91%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/Vanilla/SandboxFilesSrc => Sandbox/Vanilla/SandboxFilesDist}/LazyLoad/lazy-load.ts (94%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Opacity/EmblaCarousel.js (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Opacity/EmblaCarousel.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Opacity/tween-opacity.js (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Opacity/tween-opacity.ts (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Parallax/EmblaCarousel.js (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Parallax/EmblaCarousel.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Parallax/tween-parallax.js (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Parallax/tween-parallax.ts (94%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Progress/EmblaCarousel.js (97%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Progress/EmblaCarousel.ts (97%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Progress/progress-bar.js (94%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Progress/progress-bar.ts (91%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Scale/EmblaCarousel.js (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Scale/EmblaCarousel.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Scale/tween-scale.js (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Scale/tween-scale.ts (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Thumbs/EmblaCarousel.js (89%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/Vanilla/SandboxFilesSrc => Sandbox/Vanilla/SandboxFilesDist}/Thumbs/EmblaCarousel.ts (92%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Thumbs/thumb-buttons.js (95%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/Thumbs/thumb-buttons.ts (90%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/declarations.d.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesDist/index.html (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/ArrowsDots/EmblaCarousel.ts (80%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/Vanilla/SandboxFilesDist => Sandbox/Vanilla/SandboxFilesSrc}/ArrowsDots/arrows-dots-buttons.ts (88%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/Autoplay/EmblaCarousel.ts (100%) create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarousel.ts create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/arrow-buttons.ts create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/dot-buttons.ts create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/embla-carousel.html rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/ClassNames/EmblaCarousel.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/Default/EmblaCarousel.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/Vanilla/SandboxFilesDist => Sandbox/Vanilla/SandboxFilesSrc}/InfiniteScroll/EmblaCarousel.ts (98%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/Vanilla/SandboxFilesDist => Sandbox/Vanilla/SandboxFilesSrc}/InfiniteScroll/infinite-scroll.ts (97%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/IosPicker/EmblaCarousel.ts (93%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/Vanilla/SandboxFilesDist => Sandbox/Vanilla/SandboxFilesSrc}/IosPicker/ios-picker.ts (95%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/LazyLoad/EmblaCarousel.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/Vanilla/SandboxFilesDist => Sandbox/Vanilla/SandboxFilesSrc}/LazyLoad/lazy-load.ts (94%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/Opacity/EmblaCarousel.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/Opacity/tween-opacity.ts (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/Parallax/EmblaCarousel.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/Parallax/tween-parallax.ts (94%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/Progress/EmblaCarousel.ts (97%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/Progress/progress-bar.ts (91%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/Scale/EmblaCarousel.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/Scale/tween-scale.ts (96%) rename packages/embla-carousel-docs/src/components/{CodeSandbox/Vanilla/SandboxFilesDist => Sandbox/Vanilla/SandboxFilesSrc}/Thumbs/EmblaCarousel.ts (92%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/Thumbs/thumb-buttons.ts (90%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/declarations.d.ts (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/SandboxFilesSrc/index.html (100%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/createSandboxVanilla.ts (63%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/createSandboxVanillaEntry.ts (83%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/createSandboxVanillaImagePaths.ts (95%) create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/Vanilla/createSandboxVanillaOptions.ts rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/createSandboxVanillaPackageJson.ts (62%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/createSandboxVanillaTsConfig.ts (80%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/createSandboxVanillaTsDeclarations.ts (64%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/Vanilla/sandboxVanillaFolders.ts (76%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/sandboxImages.ts (80%) rename packages/embla-carousel-docs/src/components/{CodeSandbox => Sandbox}/sandboxStyles.ts (98%) delete mode 100644 packages/embla-carousel-docs/src/components/SiteLayout/Frame.tsx delete mode 100644 packages/embla-carousel-docs/src/components/SiteLayout/FrameCollapse.tsx create mode 100644 packages/embla-carousel-docs/src/consts/card.ts create mode 100644 packages/embla-carousel-docs/src/consts/carouselGenerator.ts create mode 100644 packages/embla-carousel-docs/src/consts/graphQL.ts create mode 100644 packages/embla-carousel-docs/src/consts/page.ts delete mode 100644 packages/embla-carousel-docs/src/consts/pageTemplates.ts create mode 100644 packages/embla-carousel-docs/src/consts/sandbox.ts create mode 100644 packages/embla-carousel-docs/src/content/pages/examples/generator.mdx rename packages/embla-carousel-docs/src/content/pages/examples/{static.mdx => predefined.mdx} (96%) create mode 100644 packages/embla-carousel-docs/src/hooks/useCarouselGenerator.ts rename packages/embla-carousel-docs/src/templates/{Page.tsx => Default.tsx} (84%) create mode 100644 packages/embla-carousel-docs/src/templates/Generator.tsx create mode 100644 packages/embla-carousel-docs/src/utils/camelOrPascalToKebabCase.ts create mode 100644 packages/embla-carousel-docs/src/utils/carouselGenerator.ts create mode 100644 packages/embla-carousel-docs/src/utils/createGapStyles.ts create mode 100644 packages/embla-carousel-docs/src/utils/sandbox.ts diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 41f78c5f9..ca85502d7 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -15,7 +15,8 @@ assignees: '' - [ ] embla-carousel-autoplay - [ ] embla-carousel-auto-height - [ ] embla-carousel-class-names -- [ ] embla-carousel-docs (documentation website) +- [ ] embla-carousel-docs (documentation) +- [ ] embla-carousel-docs (generator) ### Embla Carousel version diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index beace1b64..555d5026b 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -15,7 +15,8 @@ assignees: '' - [ ] embla-carousel-autoplay - [ ] embla-carousel-auto-height - [ ] embla-carousel-class-names -- [ ] embla-carousel-docs (documentation website) +- [ ] embla-carousel-docs (documentation) +- [ ] embla-carousel-docs (generator) ### Is your feature request related to an issue? diff --git a/.prettierrc.js b/.prettierrc.js index 3fccc181c..51731f908 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -3,7 +3,7 @@ module.exports = { printWidth: 80, semi: false, singleQuote: true, - trailingComma: 'all', + trailingComma: 'none', tabWidth: 2, - useTabs: false, + useTabs: false } diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..b102eae0e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "prettier.configPath": "" +} diff --git a/packages/embla-carousel-auto-height/.eslintrc.js b/packages/embla-carousel-auto-height/.eslintrc.js index 400426864..b17ac0422 100644 --- a/packages/embla-carousel-auto-height/.eslintrc.js +++ b/packages/embla-carousel-auto-height/.eslintrc.js @@ -2,13 +2,13 @@ module.exports = { parser: '@typescript-eslint/parser', parserOptions: { ecmaVersion: 2018, - sourceType: 'module', + sourceType: 'module' }, extends: [ 'eslint:recommended', 'plugin:prettier/recommended', 'plugin:@typescript-eslint/eslint-recommended', - 'plugin:@typescript-eslint/recommended', + 'plugin:@typescript-eslint/recommended' ], rules: { 'no-debugger': 2, @@ -19,10 +19,10 @@ module.exports = { 'error', { types: { - '{}': false, + '{}': false }, - extendDefaults: true, - }, - ], - }, + extendDefaults: true + } + ] + } } diff --git a/packages/embla-carousel-auto-height/jest.config.js b/packages/embla-carousel-auto-height/jest.config.js index 161ccbc1f..04a0181f9 100644 --- a/packages/embla-carousel-auto-height/jest.config.js +++ b/packages/embla-carousel-auto-height/jest.config.js @@ -1,8 +1,8 @@ module.exports = { transform: { - '^.+\\.(t|j)sx?$': 'ts-jest', + '^.+\\.(t|j)sx?$': 'ts-jest' }, testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], - testEnvironment: 'jsdom', + testEnvironment: 'jsdom' } diff --git a/packages/embla-carousel-auto-height/rollup.config.js b/packages/embla-carousel-auto-height/rollup.config.js index 31fcd3303..cac3f02ac 100644 --- a/packages/embla-carousel-auto-height/rollup.config.js +++ b/packages/embla-carousel-auto-height/rollup.config.js @@ -7,7 +7,7 @@ import { typescript, resolve, terser, - kebabToPascalCase, + kebabToPascalCase } from '../../rollup.config' export default [ @@ -20,14 +20,14 @@ export default [ globals: CONFIG_GLOBALS, strict: true, sourcemap: true, - exports: 'auto', + exports: 'auto' }, { file: `${packageJson.name}.esm.js`, format: 'esm', globals: CONFIG_GLOBALS, strict: true, - sourcemap: true, + sourcemap: true }, { file: `${packageJson.name}.umd.js`, @@ -36,10 +36,10 @@ export default [ strict: true, sourcemap: false, name: kebabToPascalCase(packageJson.name), - plugins: [terser()], - }, + plugins: [terser()] + } ], external: Object.keys(CONFIG_GLOBALS), - plugins: [resolve(), typescript(CONFIG_TYPESCRIPT), babel(CONFIG_BABEL)], - }, + plugins: [resolve(), typescript(CONFIG_TYPESCRIPT), babel(CONFIG_BABEL)] + } ] diff --git a/packages/embla-carousel-auto-height/src/components/AutoHeight.ts b/packages/embla-carousel-auto-height/src/components/AutoHeight.ts index ff2d55037..0d002ebba 100644 --- a/packages/embla-carousel-auto-height/src/components/AutoHeight.ts +++ b/packages/embla-carousel-auto-height/src/components/AutoHeight.ts @@ -24,7 +24,7 @@ function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType { function init( emblaApiInstance: EmblaCarouselType, - optionsHandler: OptionsHandlerType, + optionsHandler: OptionsHandlerType ): void { emblaApi = emblaApiInstance @@ -36,7 +36,7 @@ function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType { const { options: { axis }, slidesInView, - slideRects, + slideRects } = emblaApi.internalEngine() if (axis === 'y') return @@ -61,7 +61,7 @@ function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType { function setContainerHeight( _?: EmblaCarouselType, - evt?: EmblaEventType, + evt?: EmblaEventType ): void { const height = evt === 'destroy' ? options.destroyHeight : `${highestInView()}px` @@ -72,7 +72,7 @@ function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType { name: 'autoHeight', options: userOptions, init, - destroy, + destroy } return self } diff --git a/packages/embla-carousel-auto-height/src/components/Options.ts b/packages/embla-carousel-auto-height/src/components/Options.ts index b8965d729..219dc255b 100644 --- a/packages/embla-carousel-auto-height/src/components/Options.ts +++ b/packages/embla-carousel-auto-height/src/components/Options.ts @@ -7,5 +7,5 @@ export type OptionsType = CreateOptionsType<{ export const defaultOptions: OptionsType = { active: true, breakpoints: {}, - destroyHeight: 'auto', + destroyHeight: 'auto' } diff --git a/packages/embla-carousel-autoplay/.eslintrc.js b/packages/embla-carousel-autoplay/.eslintrc.js index 400426864..b17ac0422 100644 --- a/packages/embla-carousel-autoplay/.eslintrc.js +++ b/packages/embla-carousel-autoplay/.eslintrc.js @@ -2,13 +2,13 @@ module.exports = { parser: '@typescript-eslint/parser', parserOptions: { ecmaVersion: 2018, - sourceType: 'module', + sourceType: 'module' }, extends: [ 'eslint:recommended', 'plugin:prettier/recommended', 'plugin:@typescript-eslint/eslint-recommended', - 'plugin:@typescript-eslint/recommended', + 'plugin:@typescript-eslint/recommended' ], rules: { 'no-debugger': 2, @@ -19,10 +19,10 @@ module.exports = { 'error', { types: { - '{}': false, + '{}': false }, - extendDefaults: true, - }, - ], - }, + extendDefaults: true + } + ] + } } diff --git a/packages/embla-carousel-autoplay/jest.config.js b/packages/embla-carousel-autoplay/jest.config.js index 161ccbc1f..04a0181f9 100644 --- a/packages/embla-carousel-autoplay/jest.config.js +++ b/packages/embla-carousel-autoplay/jest.config.js @@ -1,8 +1,8 @@ module.exports = { transform: { - '^.+\\.(t|j)sx?$': 'ts-jest', + '^.+\\.(t|j)sx?$': 'ts-jest' }, testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], - testEnvironment: 'jsdom', + testEnvironment: 'jsdom' } diff --git a/packages/embla-carousel-autoplay/rollup.config.js b/packages/embla-carousel-autoplay/rollup.config.js index 31fcd3303..cac3f02ac 100644 --- a/packages/embla-carousel-autoplay/rollup.config.js +++ b/packages/embla-carousel-autoplay/rollup.config.js @@ -7,7 +7,7 @@ import { typescript, resolve, terser, - kebabToPascalCase, + kebabToPascalCase } from '../../rollup.config' export default [ @@ -20,14 +20,14 @@ export default [ globals: CONFIG_GLOBALS, strict: true, sourcemap: true, - exports: 'auto', + exports: 'auto' }, { file: `${packageJson.name}.esm.js`, format: 'esm', globals: CONFIG_GLOBALS, strict: true, - sourcemap: true, + sourcemap: true }, { file: `${packageJson.name}.umd.js`, @@ -36,10 +36,10 @@ export default [ strict: true, sourcemap: false, name: kebabToPascalCase(packageJson.name), - plugins: [terser()], - }, + plugins: [terser()] + } ], external: Object.keys(CONFIG_GLOBALS), - plugins: [resolve(), typescript(CONFIG_TYPESCRIPT), babel(CONFIG_BABEL)], - }, + plugins: [resolve(), typescript(CONFIG_TYPESCRIPT), babel(CONFIG_BABEL)] + } ] diff --git a/packages/embla-carousel-autoplay/src/components/Autoplay.ts b/packages/embla-carousel-autoplay/src/components/Autoplay.ts index 288254878..90f1629e0 100644 --- a/packages/embla-carousel-autoplay/src/components/Autoplay.ts +++ b/packages/embla-carousel-autoplay/src/components/Autoplay.ts @@ -29,7 +29,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { function init( emblaApiInstance: EmblaCarouselType, - optionsHandler: OptionsHandlerType, + optionsHandler: OptionsHandlerType ): void { emblaApi = emblaApiInstance @@ -110,7 +110,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { destroy, play, stop, - reset, + reset } return self } diff --git a/packages/embla-carousel-autoplay/src/components/Options.ts b/packages/embla-carousel-autoplay/src/components/Options.ts index 7cb943fc7..6f60d16ab 100644 --- a/packages/embla-carousel-autoplay/src/components/Options.ts +++ b/packages/embla-carousel-autoplay/src/components/Options.ts @@ -19,5 +19,5 @@ export const defaultOptions: OptionsType = { stopOnInteraction: true, stopOnMouseEnter: false, stopOnLastSnap: false, - rootNode: null, + rootNode: null } diff --git a/packages/embla-carousel-class-names/.eslintrc.js b/packages/embla-carousel-class-names/.eslintrc.js index 400426864..b17ac0422 100644 --- a/packages/embla-carousel-class-names/.eslintrc.js +++ b/packages/embla-carousel-class-names/.eslintrc.js @@ -2,13 +2,13 @@ module.exports = { parser: '@typescript-eslint/parser', parserOptions: { ecmaVersion: 2018, - sourceType: 'module', + sourceType: 'module' }, extends: [ 'eslint:recommended', 'plugin:prettier/recommended', 'plugin:@typescript-eslint/eslint-recommended', - 'plugin:@typescript-eslint/recommended', + 'plugin:@typescript-eslint/recommended' ], rules: { 'no-debugger': 2, @@ -19,10 +19,10 @@ module.exports = { 'error', { types: { - '{}': false, + '{}': false }, - extendDefaults: true, - }, - ], - }, + extendDefaults: true + } + ] + } } diff --git a/packages/embla-carousel-class-names/jest.config.js b/packages/embla-carousel-class-names/jest.config.js index 161ccbc1f..04a0181f9 100644 --- a/packages/embla-carousel-class-names/jest.config.js +++ b/packages/embla-carousel-class-names/jest.config.js @@ -1,8 +1,8 @@ module.exports = { transform: { - '^.+\\.(t|j)sx?$': 'ts-jest', + '^.+\\.(t|j)sx?$': 'ts-jest' }, testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], - testEnvironment: 'jsdom', + testEnvironment: 'jsdom' } diff --git a/packages/embla-carousel-class-names/rollup.config.js b/packages/embla-carousel-class-names/rollup.config.js index 31fcd3303..cac3f02ac 100644 --- a/packages/embla-carousel-class-names/rollup.config.js +++ b/packages/embla-carousel-class-names/rollup.config.js @@ -7,7 +7,7 @@ import { typescript, resolve, terser, - kebabToPascalCase, + kebabToPascalCase } from '../../rollup.config' export default [ @@ -20,14 +20,14 @@ export default [ globals: CONFIG_GLOBALS, strict: true, sourcemap: true, - exports: 'auto', + exports: 'auto' }, { file: `${packageJson.name}.esm.js`, format: 'esm', globals: CONFIG_GLOBALS, strict: true, - sourcemap: true, + sourcemap: true }, { file: `${packageJson.name}.umd.js`, @@ -36,10 +36,10 @@ export default [ strict: true, sourcemap: false, name: kebabToPascalCase(packageJson.name), - plugins: [terser()], - }, + plugins: [terser()] + } ], external: Object.keys(CONFIG_GLOBALS), - plugins: [resolve(), typescript(CONFIG_TYPESCRIPT), babel(CONFIG_BABEL)], - }, + plugins: [resolve(), typescript(CONFIG_TYPESCRIPT), babel(CONFIG_BABEL)] + } ] diff --git a/packages/embla-carousel-class-names/src/components/ClassNames.ts b/packages/embla-carousel-class-names/src/components/ClassNames.ts index 9c8aa2114..932441c64 100644 --- a/packages/embla-carousel-class-names/src/components/ClassNames.ts +++ b/packages/embla-carousel-class-names/src/components/ClassNames.ts @@ -24,7 +24,7 @@ function ClassNames(userOptions: ClassNamesOptionsType = {}): ClassNamesType { function init( emblaApiInstance: EmblaCarouselType, - optionsHandler: OptionsHandlerType, + optionsHandler: OptionsHandlerType ): void { emblaApi = emblaApiInstance @@ -58,7 +58,7 @@ function ClassNames(userOptions: ClassNamesOptionsType = {}): ClassNamesType { function toggleDraggingClass( _: EmblaCarouselType, - evt: EmblaEventType, + evt: EmblaEventType ): void { if (evt === 'pointerDown') addClass(root, options.dragging) else removeClass(root, options.dragging) @@ -75,7 +75,7 @@ function ClassNames(userOptions: ClassNamesOptionsType = {}): ClassNamesType { name: 'classNames', options: userOptions, init, - destroy, + destroy } return self } diff --git a/packages/embla-carousel-class-names/src/components/Options.ts b/packages/embla-carousel-class-names/src/components/Options.ts index e75c86f75..95d9b9186 100644 --- a/packages/embla-carousel-class-names/src/components/Options.ts +++ b/packages/embla-carousel-class-names/src/components/Options.ts @@ -11,5 +11,5 @@ export const defaultOptions: OptionsType = { breakpoints: {}, selected: 'is-selected', draggable: 'is-draggable', - dragging: 'is-dragging', + dragging: 'is-dragging' } diff --git a/packages/embla-carousel-docs/.eslintrc.js b/packages/embla-carousel-docs/.eslintrc.js index d650f98e8..57445d400 100644 --- a/packages/embla-carousel-docs/.eslintrc.js +++ b/packages/embla-carousel-docs/.eslintrc.js @@ -3,14 +3,14 @@ module.exports = { parserOptions: { ecmaVersion: 2018, sourceType: 'module', - ecmaFeatures: { jsx: true }, + ecmaFeatures: { jsx: true } }, extends: [ 'eslint:recommended', 'plugin:prettier/recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/eslint-recommended', - 'plugin:@typescript-eslint/recommended', + 'plugin:@typescript-eslint/recommended' ], rules: { 'no-debugger': 2, @@ -22,52 +22,58 @@ module.exports = { 'error', { types: { - '{}': false, + '{}': false }, - extendDefaults: true, - }, - ], + extendDefaults: true + } + ] }, overrides: [ { files: ['*.ts'], rules: { - '@typescript-eslint/explicit-module-boundary-types': ['error'], - }, + '@typescript-eslint/explicit-module-boundary-types': ['error'] + } }, { files: ['src/components/Page/Mdx.tsx'], rules: { - 'react/display-name': 'off', - }, + 'react/display-name': 'off' + } }, { files: [ - 'src/components/CodeSandbox/Vanilla/SandboxFilesSrc/**/*', - 'src/components/CodeSandbox/Vanilla/SandboxFilesDist/**/*', - 'src/components/CodeSandbox/React/SandboxFilesSrc/**/*', - 'src/components/CodeSandbox/React/SandboxFilesDist/**/*', + 'src/components/Sandbox/Vanilla/SandboxFilesSrc/**/*', + 'src/components/Sandbox/Vanilla/SandboxFilesDist/**/*', + 'src/components/Sandbox/React/SandboxFilesSrc/**/*', + 'src/components/Sandbox/React/SandboxFilesDist/**/*' ], rules: { '@typescript-eslint/no-unused-vars': 'off', - '@typescript-eslint/ban-ts-comment': 'off', - }, + '@typescript-eslint/ban-ts-comment': 'off' + } }, { - files: ['src/components/CodeSandbox/Compilation/**/*'], + files: ['src/components/Sandbox/Compilation/**/*'], rules: { - 'no-console': 'off', - }, + 'no-console': 'off' + } }, + { + files: ['src/utils/createGapStyles.ts'], + rules: { + '@typescript-eslint/no-explicit-any': 'off' + } + } ], env: { browser: true, es6: true, - jest: true, + jest: true }, settings: { react: { - version: 'detect', - }, - }, + version: 'detect' + } + } } diff --git a/packages/embla-carousel-docs/gatsby-browser.js b/packages/embla-carousel-docs/gatsby-browser.ts similarity index 60% rename from packages/embla-carousel-docs/gatsby-browser.js rename to packages/embla-carousel-docs/gatsby-browser.ts index 6a90716bb..519f3c376 100644 --- a/packages/embla-carousel-docs/gatsby-browser.js +++ b/packages/embla-carousel-docs/gatsby-browser.ts @@ -1,4 +1,6 @@ -export const onRouteUpdate = ({ location }) => { +import { GatsbyBrowser } from 'gatsby' + +export const onRouteUpdate: GatsbyBrowser['onRouteUpdate'] = ({ location }) => { const { hash } = location if (!hash) return diff --git a/packages/embla-carousel-docs/gatsby-config.js b/packages/embla-carousel-docs/gatsby-config.ts similarity index 62% rename from packages/embla-carousel-docs/gatsby-config.js rename to packages/embla-carousel-docs/gatsby-config.ts index ded7e066f..75b05b8ba 100644 --- a/packages/embla-carousel-docs/gatsby-config.js +++ b/packages/embla-carousel-docs/gatsby-config.ts @@ -1,30 +1,40 @@ -const capitalizeFirstLetter = (s) => `${s.charAt(0).toUpperCase()}${s.slice(1)}` -const packageJson = require('../embla-carousel/package.json') -const siteMetadata = { - title: packageJson.name.split('-').map(capitalizeFirstLetter).join(' '), +import packageJson from '../embla-carousel/package.json' +import { GatsbyConfig } from 'gatsby' +import { kebabCaseToPascalCase } from './src/utils/kebabCaseToPascalCase' +import { SiteMetadataType } from './src/hooks/useSiteMetadata' + +type GatsbyConfigType = GatsbyConfig & { + siteMetadata: SiteMetadataType['site']['siteMetadata'] +} + +const siteMetadata: SiteMetadataType['site']['siteMetadata'] = { + title: kebabCaseToPascalCase(packageJson.name, ' '), author: packageJson.author, siteUrl: packageJson.homepage, description: packageJson.description, - version: packageJson.version, + version: packageJson.version } -module.exports = { +const gatsbyConfig: GatsbyConfigType = { siteMetadata, plugins: [ 'gatsby-plugin-styled-components', { resolve: 'gatsby-plugin-sitemap', - query: ` + options: { + query: ` { allSitePage { - edges { - node { - path - } + nodes { + path + pageContext } } } `, + resolveSiteUrl: () => siteMetadata.siteUrl, + resolvePages: ({ allSitePage: { nodes: allPages } }) => allPages + } }, { resolve: 'gatsby-plugin-manifest', @@ -44,15 +54,15 @@ module.exports = { { src: `favicon-192x192.png`, sizes: `192x192`, - type: `image/png`, + type: `image/png` }, { src: `favicon-512x512.png`, sizes: `512x512`, - type: `image/png`, - }, - ], - }, + type: `image/png` + } + ] + } }, { resolve: 'gatsby-plugin-mdx', @@ -65,42 +75,44 @@ module.exports = { offsetY: '0', className: 'anchor', elements: ['h2', 'h3', 'h4', 'h5', 'h6'], - icon: ``, - }, - }, - ], - }, + icon: `` + } + } + ] + } }, { resolve: 'gatsby-plugin-react-svg', options: { rule: { - include: /assets\/icons/, - }, - }, + include: /assets\/icons/ + } + } }, { resolve: 'gatsby-plugin-layout', options: { - component: `${__dirname}/src/components/Layout/`, - }, + component: `${__dirname}/src/components/Layout/` + } }, { resolve: 'gatsby-source-filesystem', options: { name: 'pages', - path: `${__dirname}/src/content/pages/`, - }, + path: `${__dirname}/src/content/pages/` + } }, { resolve: 'gatsby-source-filesystem', options: { name: 'images', - path: `${__dirname}/src/assets/images/`, - }, - }, - ], + path: `${__dirname}/src/assets/images/` + } + } + ] // flags: { // DEV_SSR: true, // }, } + +export default gatsbyConfig diff --git a/packages/embla-carousel-docs/gatsby-node.js b/packages/embla-carousel-docs/gatsby-node.js index aaae7c355..16df5906d 100644 --- a/packages/embla-carousel-docs/gatsby-node.js +++ b/packages/embla-carousel-docs/gatsby-node.js @@ -1,138 +1,2 @@ -const { createFilePath } = require('gatsby-source-filesystem') -const path = require('path') - -const PAGE_TEMPLATES = { - HOME: `Home`, - PAGE: `Page`, - NOT_FOUND: `404`, -} - -const resolveComponentPath = (template, node) => - `${template}?__contentFilePath=${node.internal.contentFilePath}` - -const resolveFilePath = (node) => - node.internal.contentFilePath.replace(/.+?embla-carousel-docs\//, '') - -const addPageChildren = (parent, pages) => - pages - .filter((page) => new RegExp(`^${parent.slug}`).test(page.slug)) - .filter((page) => page.level - 1 === parent.level) - .reduce((acc, page) => [...acc, ...addPageChildren(page, pages)], [parent]) - -const createPageListWithChildren = (pages) => - pages - .filter((page) => page.level === 1) - .reduce((acc, page) => [...acc, ...addPageChildren(page, pages)], []) - -exports.onCreateNode = ({ node, actions: { createNodeField }, getNode }) => { - if (node.internal.type === 'Mdx') { - const value = createFilePath({ node, getNode }) - createNodeField({ node, value, name: 'slug' }) - } -} - -exports.createPages = async ({ - graphql, - actions: { createPage }, - reporter, -}) => { - const { errors, data } = await graphql(` - { - allMdx(sort: { frontmatter: { order: ASC } }) { - edges { - node { - id - fields { - slug - } - frontmatter { - title - order - } - internal { - contentFilePath - } - } - } - } - } - `) - - if (errors) { - reporter.panicOnBuild(`Error while running GraphQL query for createPages`) - return - } - - const { edges } = data.allMdx - const pageList = edges - .map(({ node }) => ({ - id: node.id, - slug: node.fields.slug, - title: node.frontmatter.title, - order: node.frontmatter.order || 0, - level: node.fields.slug.split('/').filter(Boolean).length, - })) - .filter(({ slug }) => slug !== '/404/') - const pageListWithChildren = createPageListWithChildren(pageList) - const startPage = edges.find(({ node }) => node.fields.slug === '/') - const notFoundPage = edges.find(({ node }) => node.fields.slug === '/404/') - const exclude = [startPage.node.fields.slug, notFoundPage.node.fields.slug] - const pages = edges.filter(({ node }) => !exclude.includes(node.fields.slug)) - - const startPageTemplate = path.resolve( - `./src/templates/${PAGE_TEMPLATES.HOME}.tsx`, - ) - createPage({ - path: startPage.node.fields.slug, - component: resolveComponentPath(startPageTemplate, startPage.node), - context: { - id: startPage.node.id, - layout: PAGE_TEMPLATES.HOME, - slug: startPage.node.fields.slug, - filePath: resolveFilePath(startPage.node), - }, - }) - - const notFoundPageTemplate = path.resolve( - path.resolve(`./src/templates/${PAGE_TEMPLATES.NOT_FOUND}.tsx`), - ) - createPage({ - path: notFoundPage.node.fields.slug, - component: resolveComponentPath(notFoundPageTemplate, notFoundPage.node), - context: { - id: notFoundPage.node.id, - layout: PAGE_TEMPLATES.NOT_FOUND, - slug: notFoundPage.node.fields.slug, - filePath: resolveFilePath(notFoundPage.node), - }, - }) - - pages.forEach(({ node }) => { - const { id, fields } = node - const index = pageListWithChildren.findIndex((page) => page.id === id) - - const pageTemplate = path.resolve( - path.resolve(`./src/templates/${PAGE_TEMPLATES.PAGE}.tsx`), - ) - createPage({ - path: fields.slug, - component: resolveComponentPath(pageTemplate, node), - context: { - id, - layout: PAGE_TEMPLATES.PAGE, - slug: fields.slug, - filePath: resolveFilePath(node), - next: pageListWithChildren[index + 1], - previous: pageListWithChildren[index - 1], - }, - }) - }) -} - -exports.onCreateWebpackConfig = ({ actions: { setWebpackConfig } }) => { - setWebpackConfig({ - resolve: { - modules: ['node_modules', 'src'], - }, - }) -} +require('ts-node').register() +module.exports = require('./gatsby-config.ts') diff --git a/packages/embla-carousel-docs/gatsby-node.ts b/packages/embla-carousel-docs/gatsby-node.ts new file mode 100644 index 000000000..19465a39f --- /dev/null +++ b/packages/embla-carousel-docs/gatsby-node.ts @@ -0,0 +1,217 @@ +import path from 'path' +import { GatsbyNode } from 'gatsby' +import { createFilePath } from 'gatsby-source-filesystem' +import { GraphQLAllDataType, GraphQLNodeType } from './src/consts/graphQL' +import { + PAGE_LAYOUTS, + PageOverviewType, + PageHomeLayoutType, + SetupGatsbyPageType, + PageNotFoundLayoutType, + PageDefaultLayoutType, + PageGeneratorLayoutType, + PagePaginationType +} from './src/consts/page' + +const PAGE_LAYOUTS_ROOT = './src/templates' + +const PAGE_TEMPLATES = { + HOME: path.resolve(`${PAGE_LAYOUTS_ROOT}/${PAGE_LAYOUTS.HOME}.tsx`), + DEFAULT: path.resolve(`${PAGE_LAYOUTS_ROOT}/${PAGE_LAYOUTS.DEFAULT}.tsx`), + NOT_FOUND: path.resolve(`${PAGE_LAYOUTS_ROOT}/${PAGE_LAYOUTS.NOT_FOUND}.tsx`), + GENERATOR: path.resolve(`${PAGE_LAYOUTS_ROOT}/${PAGE_LAYOUTS.GENERATOR}.tsx`) +} + +const isHomePage = (node: GraphQLNodeType): boolean => { + return /pages\/index.mdx?$/i.test(node.internal.contentFilePath) +} + +const isNotFoundPage = (node: GraphQLNodeType): boolean => { + return /\/404.mdx?$/i.test(node.internal.contentFilePath) +} + +const isGeneratorPage = (node: GraphQLNodeType): boolean => { + return /\/generator.mdx?$/i.test(node.internal.contentFilePath) +} + +const resolveFilePath = (node: GraphQLNodeType): string => { + return node.internal.contentFilePath.replace(/.+?embla-carousel-docs\//, '') +} + +const resolveComponentPath = ( + layout: string, + node: GraphQLNodeType +): string => { + return `${layout}?__contentFilePath=${node.internal.contentFilePath}` +} + +const addPageChildren = ( + parent: PageOverviewType, + pages: PageOverviewType[] +): PageOverviewType[] => { + return pages + .filter((page) => new RegExp(`^${parent.slug}`).test(page.slug)) + .filter((page) => page.level - 1 === parent.level) + .reduce((acc, page) => [...acc, ...addPageChildren(page, pages)], [parent]) +} + +const createPageListWithChildren = ( + pages: PageOverviewType[] +): PageOverviewType[] => { + return pages + .filter((page) => page.level === 1) + .reduce( + (acc, page) => [...acc, ...addPageChildren(page, pages)], + [] + ) +} + +export const onCreateNode: GatsbyNode['onCreateNode'] = ({ + node, + actions: { createNodeField }, + getNode +}) => { + if (node.internal.type === 'Mdx') { + const value = createFilePath({ node, getNode }) + createNodeField({ node, value, name: 'slug' }) + } +} + +export const createPages: GatsbyNode['createPages'] = async ({ + graphql, + actions: { createPage }, + reporter +}) => { + const { errors, data } = await graphql(` + { + allMdx(sort: { frontmatter: { order: ASC } }) { + edges { + node { + id + fields { + slug + } + frontmatter { + title + order + } + internal { + contentFilePath + } + } + } + } + } + `) + + if (!data) { + reporter.panicOnBuild(`No data was returned when running GraphQL query`) + return + } + + if (errors) { + reporter.panicOnBuild(`Error while running GraphQL query for createPages`) + return + } + + const { edges } = data.allMdx + const pageList: PageOverviewType[] = edges + .filter(({ node }) => !isNotFoundPage(node)) + .map(({ node }) => ({ + id: node.id, + slug: node.fields.slug, + title: node.frontmatter.title, + order: node.frontmatter.order || 0, + level: node.fields.slug.split('/').filter(Boolean).length + })) + const pageListWithChildren = createPageListWithChildren(pageList) + + edges.forEach(({ node }) => { + const { + id, + fields: { slug } + } = node + const index = pageListWithChildren.findIndex((page) => page.id === id) + const filePath = resolveFilePath(node) + const next = pageListWithChildren[index + 1] + const previous = pageListWithChildren[index - 1] + + if (isHomePage(node)) { + const homePageSetup: SetupGatsbyPageType = { + path: slug, + component: resolveComponentPath(PAGE_TEMPLATES.HOME, node), + context: { + id, + layout: PAGE_LAYOUTS.HOME, + slug, + filePath + } + } + + return createPage(homePageSetup) + } + + if (isNotFoundPage(node)) { + const notFoundPageSetup: SetupGatsbyPageType = { + path: slug, + component: resolveComponentPath(PAGE_TEMPLATES.NOT_FOUND, node), + context: { + id, + layout: PAGE_LAYOUTS.NOT_FOUND, + slug, + filePath + } + } + + return createPage(notFoundPageSetup) + } + + if (isGeneratorPage(node)) { + const pageSetup: SetupGatsbyPageType< + PageGeneratorLayoutType, + PagePaginationType + > = { + path: slug, + component: resolveComponentPath(PAGE_TEMPLATES.GENERATOR, node), + context: { + id, + layout: PAGE_LAYOUTS.GENERATOR, + slug, + filePath, + next, + previous + } + } + + return createPage(pageSetup) + } + + const pageSetup: SetupGatsbyPageType< + PageDefaultLayoutType, + PagePaginationType + > = { + path: slug, + component: resolveComponentPath(PAGE_TEMPLATES.DEFAULT, node), + context: { + id, + layout: PAGE_LAYOUTS.DEFAULT, + slug, + filePath, + next, + previous + } + } + + return createPage(pageSetup) + }) +} + +export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = ({ + actions: { setWebpackConfig } +}) => { + setWebpackConfig({ + resolve: { + modules: ['node_modules', 'src'] + } + }) +} diff --git a/packages/embla-carousel-docs/gatsby-ssr.js b/packages/embla-carousel-docs/gatsby-ssr.tsx similarity index 84% rename from packages/embla-carousel-docs/gatsby-ssr.js rename to packages/embla-carousel-docs/gatsby-ssr.tsx index c7b827406..8f92b7da1 100644 --- a/packages/embla-carousel-docs/gatsby-ssr.js +++ b/packages/embla-carousel-docs/gatsby-ssr.tsx @@ -1,22 +1,23 @@ import React from 'react' import config from './gatsby-config' +import { GatsbySSR } from 'gatsby' import { THEME_KEYS, THEME_PREFIX, THEME_COLORS, THEME_META_SELECTOR, - THEME_STYLES, -} from 'consts/themes' -import { LOCALSTORAGE_KEYS } from 'consts/localStorage' -import { ALGOLIA_SEARCH_CONFIG } from 'consts/algoliaSearch' -import { FONT_FACE_STYLES } from 'consts/fontFace' -import { styledComponentsStylesToString } from 'utils/styledComponentStylesToString' -import { removeProtocol } from 'utils/removeProtocol' + THEME_STYLES +} from './src/consts/themes' +import { LOCALSTORAGE_KEYS } from './src/consts/localStorage' +import { ALGOLIA_SEARCH_CONFIG } from './src/consts/algoliaSearch' +import { FONT_FACE_STYLES } from './src/consts/fontFace' +import { styledComponentsStylesToString } from './src/utils/styledComponentStylesToString' +import { removeProtocol } from './src/utils/removeProtocol' -export const onRenderBody = ({ +export const onRenderBody: GatsbySSR['onRenderBody'] = ({ setHtmlAttributes, setHeadComponents, - setPreBodyComponents, + setPreBodyComponents }) => { const { siteUrl } = config.siteMetadata const htmlAttributes = { className: `${THEME_PREFIX}${THEME_KEYS.LIGHT}` } @@ -33,7 +34,7 @@ export const onRenderBody = ({ id="theme-styles" key="theme-style" dangerouslySetInnerHTML={{ - __html: styledComponentsStylesToString(THEME_STYLES), + __html: styledComponentsStylesToString(THEME_STYLES) }} />,