Storybook: Converting to 'exemplar' and adding Knobs story

examples/.setup/addons.js

@@ -0,0 +1,5 @@
+try {
+  require('@storybook/addon-knobs/register');
+} catch (ex) {
+  console.dir(ex);
+}

examples/.setup/aliases.json

@@ -0,0 +1,3 @@
+{
+  "react-img-carousel": "../../src"
+}

examples/.setup/config.js

@@ -0,0 +1,4 @@
+import { addDecorator } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+addDecorator(withKnobs);

examples/.setup/shared.scss

@@ -0,0 +1 @@
+@import '../../src/carousel.less';

examples/addImages.js

@@ -0,0 +1,34 @@
+import React, { useState, Fragment } from 'react';
+import Carousel from 'react-img-carousel';
+import { CustomDots, IMAGES } from "./util/util";
+
+const addImages = () => {
+    const [images, setImages] = useState([IMAGES[0]]);
+
+    const addImage = () => {
+        if (images.length < IMAGES.length) {
+            setImages(images.concat(IMAGES[images.length]));
+        }
+    };
+
+    return (
+        <Fragment>
+            <Carousel
+                width='450px'
+                cellPadding={ 5 }
+                infinite={ true }
+                dots={ false }
+                arrows={ false }
+                autoplay={ false }
+                controls={ [{ component: CustomDots, props: { title: 'My Slides' }, position: 'top' }] }
+            >
+                {
+                    images.map((image, index) => <img key={ index } src={ image }/>)
+                }
+            </Carousel>
+            <button onClick={ addImage }>Add Image</button>
+        </Fragment>
+    );
+};
+
+export default addImages;

examples/autoplayWithBackgroundImages.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Carousel from 'react-img-carousel';
+
+const autoplayWithBackgroundImages = () =>
+    <Carousel
+        width='100%'
+        slideWidth='100%'
+        slideHeight='70vh'
+        arrows={ false }
+        autoplay={ true }
+    >
+        <div style={{ backgroundImage: 'url(http://picsum.photos/600/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
+        <div style={{ backgroundImage: 'url(http://picsum.photos/650/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
+        <div style={{ backgroundImage: 'url(http://picsum.photos/675/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
+        <div style={{ backgroundImage: 'url(http://picsum.photos/700/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
+    </Carousel>;
+
+export default autoplayWithBackgroundImages;

examples/backgroundImagesWithFade.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Carousel from 'react-img-carousel';
+
+const backgroundImagesWithFade = () =>
+    <Carousel
+        width='100%'
+        slideWidth='100%'
+        slideHeight='70vh'
+        transition='fade'
+        transitionDuration={ 1000 }
+        autoplay={ true }
+        arrows={ true }
+    >
+        <div style={{ backgroundImage: 'url(http://picsum.photos/600/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
+        <div style={{ backgroundImage: 'url(http://picsum.photos/650/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
+        <div style={{ backgroundImage: 'url(http://picsum.photos/675/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
+        <div style={{ backgroundImage: 'url(http://picsum.photos/700/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
+        <div style={{ backgroundImage: 'url(http://picsum.photos/750/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
+        <div style={{ backgroundImage: 'url(http://picsum.photos/725/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
+        <div style={{ backgroundImage: 'url(http://picsum.photos/625/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
+    </Carousel>;
+
+export default backgroundImagesWithFade;

examples/customDotsComponent.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Carousel from 'react-img-carousel';
+import { CustomDots, imgElements } from "./util/util";
+
+const customDotsComponent = () =>
+    <Carousel
+        width='450px'
+        cellPadding={ 5 }
+        infinite={ false }
+        dots={ false }
+        arrows={ false }
+        autoplay={ true }
+        controls={ [{ component: CustomDots, props: { title: 'My Slides' }, position: 'top' }] }
+        transitionDuration={ 0 }
+    >
+        { imgElements }
+    </Carousel>;
+
+export default customDotsComponent;

examples/fadeTransition.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Carousel from 'react-img-carousel';
+import { imgElements } from "./util/util";
+
+const fadeTransition = () =>
+    <Carousel
+        width='450px'
+        slideHeight='300px'
+        transitionDuration={ 1000 }
+        draggable={ false }
+        transition='fade'
+    >
+        { imgElements }
+    </Carousel>;
+
+export default fadeTransition;

examples/infiniteWithCellPadding.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Carousel from 'react-img-carousel';
+import { imgElements } from "./util/util";
+
+const infiniteWithCellPadding = () =>
+    <Carousel width='450px' cellPadding={ 5 }>
+        { imgElements }
+    </Carousel>;
+
+export default infiniteWithCellPadding;

examples/infiniteWithOnly1Slide.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Carousel from 'react-img-carousel';
+
+const infiniteWithOnly1Slide = () =>
+    <Carousel
+        width='450px'
+        infinite={ true }
+        arrows={ false }
+        dots={ false }
+    >
+        <img src='http://picsum.photos/325/300'/>
+    </Carousel>;
+
+export default infiniteWithOnly1Slide;

examples/infiniteWithOnly2Slides.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Carousel from 'react-img-carousel';
+
+const infiniteWithOnly2Slides = () =>
+    <Carousel width='450px' arrows={ false } slideHeight='300px'>
+        <img src='http://picsum.photos/325/300'/>
+        <img src='http://picsum.photos/350/300'/>
+    </Carousel>;
+
+export default infiniteWithOnly2Slides;

examples/knobsPlayground.js

@@ -0,0 +1,87 @@
+import React, { Fragment, useState } from 'react';
+import Carousel from 'react-img-carousel';
+import { IMAGES } from './util/util';
+import  { text, boolean, object, number, radios, select } from '@storybook/addon-knobs';
+
+const BUTTON_STYLE = {
+    padding: '5px 10px',
+    marginTop: 20,
+    marginLeft: 20,
+    borderRadius: 5,
+    backgroundColor: 'red',
+    color: 'white',
+    fontWeight: 'bold',
+    cursor: 'pointer',
+    outline: 'none',
+};
+
+const knobsPlayground = () => {
+    const [reloadKey, setReloadKey] = useState('some-random-key');
+
+    const sizesTabLabel = 'Sizes';
+    const controlsTabLabel = 'Controls';
+    const transitionTabLabel = 'Transition';
+
+    const sizes = {
+        width: text('width', '100%', sizesTabLabel),
+        height: text('height', 'auto', sizesTabLabel),
+        viewportWidth: text('viewportWidth', '100%', sizesTabLabel),
+        viewportHeight: text('viewportHeight', 'auto', sizesTabLabel),
+        slideWidth: text('slideWidth', '', sizesTabLabel),
+        slideHeight: text('slideHeight', '', sizesTabLabel),
+        cellPadding: number('cellPadding', 5, {}, sizesTabLabel),
+    };
+
+    const controls = {
+        clickToNavigate: boolean('clickToNavigate', true, controlsTabLabel),
+        autoplay: boolean('autoplay', false, controlsTabLabel),
+        autoplaySpeed: number('autoplaySpeed', 4000, {}, controlsTabLabel),
+        draggable: boolean('draggable', true, controlsTabLabel),
+        dots: boolean('dots', true, controlsTabLabel),
+        arrows: boolean('arrows', true, controlsTabLabel),
+        infinite: boolean('infinite', false, controlsTabLabel),
+    };
+    const transition = {
+        transition: radios('transition', {
+            slide: 'slide',
+            fade: 'fade',
+        }, 'slide', transitionTabLabel),
+        transitionDuration: number('transitionDuration', 500, {}, transitionTabLabel),
+        easing: select('easing', {
+            'ease': 'ease',
+            'linear': 'linear',
+            'ease-in': 'ease-in',
+            'ease-out': 'ease-out',
+            'ease-in-out': 'ease-in-out',
+        }, 'ease-in-out', transitionTabLabel),
+    };
+
+    const carouselProps = {
+        ...sizes,
+        ...controls,
+        ...transition,
+        initialSlide: number('initialSlide', 0),
+        lazyLoad: boolean('lazyLoad', false),
+        imagesToPrefetch: number('imagesToPrefetch', 5),
+        maxRenderedSlides: number('maxRenderedSlides', 5),
+    };
+
+    const content = object('image URLs', IMAGES).map((image, index) => <img src={ image } key={ index } />)
+    return (
+        <Fragment key={ reloadKey }>
+            <Carousel { ...carouselProps }>
+                {  content }
+            </Carousel>
+
+
+            <button
+                onClick={ () => setReloadKey(`${Math.random()}-${Math.random()}`) }
+                style={ BUTTON_STYLE }
+            >
+                Force Remount Component
+            </button>
+        </Fragment>
+    );
+};
+
+export default knobsPlayground;

examples/nonInfiniteWithCellPadding.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Carousel from 'react-img-carousel';
+import { imgElements } from "./util/util";
+
+const nonInfiniteWithCellPadding = () =>
+    <Carousel infinite={ false } width='450px' cellPadding={ 5 }>
+        { imgElements }
+    </Carousel>;
+
+export default nonInfiniteWithCellPadding;

examples/util/util.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+export const IMAGES = [
+  'http://picsum.photos/400/300',
+  'http://picsum.photos/275/300',
+  'http://picsum.photos/450/300',
+  'http://picsum.photos/350/300',
+  'http://picsum.photos/250/300',
+  'http://picsum.photos/375/300',
+  'http://picsum.photos/425/300',
+  'http://picsum.photos/325/300',
+];
+
+export const imgElements = IMAGES.map((image, index) => <img src={ image } key={ index } />);
+
+export const CustomDots = ({ numSlides, selectedIndex, goToSlide, title }) => {
+  const dots = [];
+
+  for (let index = 0; index < numSlides; index++) {
+    const buttonStyle = {
+      border: 'none',
+      cursor: 'pointer',
+      background: 'transparent'
+    };
+
+    if (index === selectedIndex) {
+      buttonStyle.color = 'red';
+    }
+
+    dots.push(
+      <li key={ `dot-${index}` } style={{ display: 'inline-block' }}>
+        <button style={ buttonStyle } onClick={ goToSlide.bind(null, index) }>•</button>
+      </li>
+    );
+  }
+
+  return (
+    <div style={{ position: 'absolute', top: '10px', right: '10px', background: 'rgba(114, 114, 114, 0.6)', zIndex: '1' }}>
+      <h2>{ title }</h2>
+      <ul style={{ listStyle: 'none', padding: '0' }}>
+        { dots }
+      </ul>
+    </div>
+  );
+};
+