Add TypeScript usage examples to the docs

Co-authored-by: David Jerleke <david.jerleke@gmail.com>
Co-authored-by: Zakher Masri <46135573+zaaakher@users.noreply.github.com>

packages/embla-carousel-docs/gatsby-node.ts

@@ -2,6 +2,7 @@ import path from 'path'
 import { GatsbyNode } from 'gatsby'
 import { createFilePath } from 'gatsby-source-filesystem'
 import { GraphQLAllDataType, GraphQLNodeType } from './src/consts/graphQL'
+import { PRISM_HIGHLIGHT_PROP_SEPARATOR } from './src/consts/prismHighlight'
 import {
   PAGE_LAYOUTS,
   PageOverviewType,
@@ -14,6 +15,8 @@ import {
 } from './src/consts/page'
 
 const PAGE_LAYOUTS_ROOT = './src/templates'
+const CODE_BLOCK_START_REGEX = /```.*/g
+const EMPTY_SPACE_REGEX = /\s/g
 
 const PAGE_TEMPLATES = {
   HOME: path.resolve(`${PAGE_LAYOUTS_ROOT}/${PAGE_LAYOUTS.HOME}.tsx`),
@@ -66,12 +69,21 @@ const createPageListWithChildren = (
     )
 }
 
+const addPrismCodeBlockPropsSupport = (body: string): string => {
+  return body.replace(CODE_BLOCK_START_REGEX, (match) =>
+    match.replace(EMPTY_SPACE_REGEX, PRISM_HIGHLIGHT_PROP_SEPARATOR)
+  )
+}
+
 export const onCreateNode: GatsbyNode['onCreateNode'] = ({
   node,
   actions: { createNodeField },
   getNode
 }) => {
   if (node.internal.type === 'Mdx') {
+    const body = <string>node.body
+    node.body = addPrismCodeBlockPropsSupport(body)
+
     const value = createFilePath({ node, getNode })
     createNodeField({ node, value, name: 'slug' })
   }

packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorAlignmentSettings.tsx

@@ -4,7 +4,7 @@ import CarouselDefault from 'components/Sandbox/React/SandboxFilesSrc/Default/Em
 import { InputRadioDefault } from 'components/Input/InputRadio'
 import { InputCheckboxDefault } from 'components/Input/InputCheckbox'
 import { arrayFromNumber } from 'utils/arrayFromNumber'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import { createCarouselDefaultStyles } from 'components/Examples/createCarouselStyles'
 import { Admonition } from 'components/Mdx/Components/Admonition'
 import { BRAND_GRADIENT_BACKGROUND_STYLES } from 'consts/gradients'

packages/embla-carousel-docs/src/components/CarouselGenerator/createCarouselGeneratorOptions.ts

@@ -1,5 +1,5 @@
 import { CarouselGeneratorFormDataType } from 'consts/carouselGenerator'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 
 export const createCarouselGeneratorOptions = (
   settings: CarouselGeneratorFormDataType

packages/embla-carousel-docs/src/components/Examples/Basic/Align.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselDefault from 'components/Sandbox/React/SandboxFilesSrc/Default/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Basic/Default.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselDefault from 'components/Sandbox/React/SandboxFilesSrc/Default/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Basic/DragFree.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselDefault from 'components/Sandbox/React/SandboxFilesSrc/Default/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Basic/Loop.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselDefault from 'components/Sandbox/React/SandboxFilesSrc/Default/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Basic/RightToLeft.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselRightToLeft from 'components/Sandbox/React/SandboxFilesSrc/RightToLeft/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Basic/SlidesToScroll.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselDefault from 'components/Sandbox/React/SandboxFilesSrc/Default/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Basic/VariableWidths.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselDefault from 'components/Sandbox/React/SandboxFilesSrc/Default/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Basic/YAxis.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselDefault from 'components/Sandbox/React/SandboxFilesSrc/Default/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Miscellaneous/InfiniteScroll.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselInfiniteScroll from 'components/Sandbox/React/SandboxFilesSrc/InfiniteScroll/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Miscellaneous/IosPicker.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselIosPicker from 'components/Sandbox/React/SandboxFilesSrc/IosPicker/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Miscellaneous/LazyLoad.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselLazyLoad from 'components/Sandbox/React/SandboxFilesSrc/LazyLoad/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Miscellaneous/Progress.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselProgress from 'components/Sandbox/React/SandboxFilesSrc/Progress/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Navigation/ArrowsDots.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselArrowsDots from 'components/Sandbox/React/SandboxFilesSrc/ArrowsDots/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Navigation/Thumbs.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselThumbs from 'components/Sandbox/React/SandboxFilesSrc/Thumbs/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Plugins/Autoplay.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselAutoplay from 'components/Sandbox/React/SandboxFilesSrc/Autoplay/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Plugins/ClassNames.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselClassNames from 'components/Sandbox/React/SandboxFilesSrc/ClassNames/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Tween/Opacity.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselOpacity from 'components/Sandbox/React/SandboxFilesSrc/Opacity/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Tween/Parallax.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselParallax from 'components/Sandbox/React/SandboxFilesSrc/Parallax/EmblaCarousel'

packages/embla-carousel-docs/src/components/Examples/Tween/Scale.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import styled from 'styled-components'
 import { useInView } from 'react-intersection-observer'
 import CarouselScale from 'components/Sandbox/React/SandboxFilesSrc/Scale/EmblaCarousel'

packages/embla-carousel-docs/src/components/Hero/HeroBrand.tsx

@@ -92,10 +92,6 @@ const H1 = styled.h1`
   ${MEDIA.MIN_MD} {
     font-size: ${FONT_SIZES.CUSTOM(() => 8)};
   }
-
-  ${MEDIA.MIN_LG} {
-    font-size: ${FONT_SIZES.CUSTOM(() => 8.4)};
-  }
 `
 
 const H2 = styled.h2`

packages/embla-carousel-docs/src/components/Mdx/Components/PrismSyntaxHighlight.tsx

@@ -1,23 +1,21 @@
 import React, { useMemo } from 'react'
 import { PrismSyntaxFrame } from './PrismSyntaxFrame'
-import Highlight, {
-  defaultProps,
-  Language as PrismLanguage
-} from 'prism-react-renderer'
+import Highlight, { defaultProps } from 'prism-react-renderer'
+import {
+  PRISM_HIGHLIGHT_CLASS_NAME,
+  PRISM_HIGHLIGHT_LINE_CLASS_NAME,
+  PRISM_HIGHLIGHT_PROP_SEPARATOR,
+  PrismCodeBlockPropsType
+} from 'consts/prismHighlight'
 
-export const PRISM_HIGHLIGHT_CLASS_NAME = 'prism-highlight'
-export const PRISM_HIGHLIGHT_LINE_CLASS_NAME = `${PRISM_HIGHLIGHT_CLASS_NAME}-code-line`
-
-const REGEX_HIGHLIGHT_META = /{[^}]+}/
 const REGEX_HIGHLIGHT_RANGE = /\d{1,}-\d{1,}/
 const REGEX_HIGHLIGHT_RANGE_END = /-\d{1,}/
 const REGEX_HIGHLIGHT_RANGE_START = /\d{1,}-/
 const REGEX_LANGUAGE_PREFIX = /language-/gm
 
-const parseHighlightedLines = (className: string): number[] => {
+const parseHighlightedLines = (highlight: string = ''): number[] => {
   const highlightedLines: number[] = []
-  const highlightedLinesMatch = className.match(REGEX_HIGHLIGHT_META) || ['']
-  const matches = highlightedLinesMatch[0].replace(/{|}/g, '').split(',')
+  const matches = highlight.replace(/{|}/g, '').split(',')
 
   return matches.reduce((highlightedLinesArray, match) => {
     if (REGEX_HIGHLIGHT_RANGE.test(match)) {
@@ -32,19 +30,37 @@ const parseHighlightedLines = (className: string): number[] => {
   }, highlightedLines)
 }
 
+const parseCodeBlockProps = (string: string): PrismCodeBlockPropsType => {
+  return string
+    .split(PRISM_HIGHLIGHT_PROP_SEPARATOR)
+    .reduce((props, propString, index) => {
+      if (index === 0) {
+        const language = propString.replace(REGEX_LANGUAGE_PREFIX, '')
+        return { language }
+      }
+
+      const [prop, value] = propString.split('=')
+      return {
+        ...props,
+        [prop]: value
+      }
+    }, {}) as PrismCodeBlockPropsType
+}
+
 type PropType = {
   children: string
   className: string
 }
 
 export const PrismSyntaxHighlight = (props: PropType) => {
   const { children, className } = props
-  const language = className
-    .replace(REGEX_LANGUAGE_PREFIX, '')
-    .replace(REGEX_HIGHLIGHT_META, '') as PrismLanguage
 
-  const highlightedLines = useMemo(() => {
-    return parseHighlightedLines(className)
+  const { language, highlightedLines } = useMemo(() => {
+    const { language, highlight } = parseCodeBlockProps(className)
+    return {
+      language,
+      highlightedLines: parseHighlightedLines(highlight)
+    }
   }, [className])
 
   return (

packages/embla-carousel-docs/src/components/Mdx/Styles/code.ts

@@ -13,7 +13,7 @@ import { createScrollBarStyles } from 'consts/scrollBars'
 import {
   PRISM_HIGHLIGHT_CLASS_NAME,
   PRISM_HIGHLIGHT_LINE_CLASS_NAME
-} from 'components/Mdx/Components/PrismSyntaxHighlight'
+} from 'consts/prismHighlight'
 
 export const codeStyles = css`
   .${CODE_HIGHLIGHT_CLASS_NAME} {

packages/embla-carousel-docs/src/components/Mdx/Styles/index.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import { COLORS } from 'consts/themes'
 import { SPACINGS } from 'consts/spacings'
-import { PRISM_HIGHLIGHT_CLASS_NAME } from '../Components/PrismSyntaxHighlight'
+import { PRISM_HIGHLIGHT_CLASS_NAME } from 'consts/prismHighlight'
 import { TabsWrapper, TabPanel } from 'components/Tabs/Tabs'
 import { AdmonitionWrapper, AdmonitionContent } from '../Components/Admonition'
 import { headingStyles } from './heading'

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/ArrowsDots/EmblaCarousel.tsx

@@ -1,8 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react'
-import useEmblaCarousel, {
-  EmblaCarouselType,
-  EmblaOptionsType
-} from 'embla-carousel-react'
+import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel'
+import useEmblaCarousel from 'embla-carousel-react'
 import {
   DotButton,
   PrevButton,

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Autoplay/EmblaCarousel.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import useEmblaCarousel, { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
+import useEmblaCarousel from 'embla-carousel-react'
 import Autoplay from 'embla-carousel-autoplay'
 import imageByIndex from '../imageByIndex'
 

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselDefaultEntry.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import EmblaCarousel from './Default/EmblaCarousel'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import Header from './Header'
 import Footer from './Footer'
 import '../css/base.css'

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/ClassNames/EmblaCarousel.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import useEmblaCarousel, { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
+import useEmblaCarousel from 'embla-carousel-react'
 import ClassNames from 'embla-carousel-class-names'
 import imageByIndex from '../imageByIndex'
 

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Default/EmblaCarousel.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import useEmblaCarousel, { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
+import useEmblaCarousel from 'embla-carousel-react'
 import imageByIndex from '../imageByIndex'
 
 type PropType = {

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.tsx

@@ -1,9 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { EngineType } from 'embla-carousel/components/Engine'
-import useEmblaCarousel, {
-  EmblaCarouselType,
-  EmblaOptionsType
-} from 'embla-carousel-react'
+import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel'
+import useEmblaCarousel from 'embla-carousel-react'
 import imageByIndex from '../imageByIndex'
 
 const mockApiCall = (

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarousel.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
 import { IosPickerItem } from './EmblaCarouselIosPickerItem'
 
 type PropType = {

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/LazyLoad/EmblaCarousel.tsx

@@ -1,8 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import useEmblaCarousel, {
-  EmblaCarouselType,
-  EmblaOptionsType
-} from 'embla-carousel-react'
+import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel'
+import useEmblaCarousel from 'embla-carousel-react'
 import { LazyLoadImage } from './EmblaCarouselLazyLoadImage'
 import imageByIndex from '../imageByIndex'
 

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Opacity/EmblaCarousel.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import useEmblaCarousel, { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
+import useEmblaCarousel from 'embla-carousel-react'
 import { flushSync } from 'react-dom'
 import imageByIndex from '../imageByIndex'
 

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import useEmblaCarousel, { EmblaOptionsType } from 'embla-carousel-react'
+import { EmblaOptionsType } from 'embla-carousel'
+import useEmblaCarousel from 'embla-carousel-react'
 import { flushSync } from 'react-dom'
 import imageByIndex from '../imageByIndex'
 

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Progress/EmblaCarousel.tsx

@@ -1,8 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import useEmblaCarousel, {
-  EmblaCarouselType,
-  EmblaOptionsType
-} from 'embla-carousel-react'
+import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel'
+import useEmblaCarousel from 'embla-carousel-react'
 import imageByIndex from '../imageByIndex'
 
 type PropType = {