Minor updates

src/components/Arrow/Arrow.stories.js

@@ -0,0 +1,19 @@
+import Arrow from './Arrow.svelte';
+
+export default {
+  title: 'Default Components/Arrow',
+  component: Arrow,
+  argTypes: {
+    onClick: { action: 'onClick' }
+  }
+};
+
+const Template = ({ onClick, ...args }) => ({
+  Component: Arrow,
+  props: args,
+  on: {
+    click: onClick,
+  },
+});
+
+export const Primary = Template.bind({});

src/components/Arrow/Arrow.svelte

@@ -0,0 +1,62 @@
+<script>
+  import { NEXT, PREV } from '../../direction'
+  /**
+   * Indicates direction of the arrow ('next', 'prev')
+   */
+  export let direction = NEXT
+
+  /**
+   * Indicates if button disabled
+   */
+  export let disabled = false
+</script>
+
+<div
+  class="circle"
+  class:disabled
+  on:click
+>
+  <i
+    class="arrow"
+    class:next={direction === NEXT}
+    class:prev={direction === PREV}
+  ></i>
+</div>
+
+<style>
+  :root {
+    --size: 2px
+  }
+  .circle {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: rgba(93, 93, 93, 0.5); /* #5d5d5d */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 100ms ease;
+    cursor: pointer;
+  }
+  .circle:hover {
+    opacity: 0.9;
+  }
+  .arrow {
+    border: solid #1e1e1e;
+    border-width: 0 var(--size) var(--size) 0;
+    padding: var(--size);
+    position: relative;
+  }
+  .next {
+    transform: rotate(-45deg);
+    left: calc(var(--size) / -2);
+  }
+  .prev {
+    transform: rotate(135deg);
+    right: calc(var(--size) / -2);
+  }
+  .disabled,
+  .disabled:hover {
+    opacity: 0.5;
+  }
+</style>

src/components/Carousel/Carousel.stories.js

@@ -0,0 +1,27 @@
+import CarouselView from './CarouselView.svelte';
+import CarouselViewCustomDots from './CarouselViewCustomDots.svelte';
+import CarouselViewCustomArrows from './CarouselViewCustomArrows.svelte';
+
+export default {
+  title: 'Carousel',
+  component: CarouselView
+};
+
+const Template = ({ ...args }) => ({
+  Component: CarouselView,
+  props: args
+});
+export const Primary = Template.bind({});
+
+const TemplateCustomDots = ({ ...args }) => ({
+  Component: CarouselViewCustomDots,
+  props: args
+});
+export const WithCustomDots = TemplateCustomDots.bind({});
+
+const TemplateCustomArrows = ({ ...args }) => ({
+  Component: CarouselViewCustomArrows,
+  props: args
+});
+export const WithCustomArrows = TemplateCustomArrows.bind({});
+

src/components/Carousel/Carousel.svelte

@@ -0,0 +1,264 @@
+<script>
+  import { onDestroy, onMount, tick } from 'svelte'
+  import { store } from '../../store'
+  import Dots from '../Dots/Dots.svelte'
+  import Arrow from '../Arrow/Arrow.svelte'
+  import { NEXT, PREV } from '../../direction'
+  import { swipeable } from '../../utils/swipeable'
+  import {
+    addResizeEventListener,
+    removeResizeEventListener
+  } from '../../utils/event'
+
+  const directionFnDescription = {
+    [NEXT]: showNextPage,
+    [PREV]: showPrevPage
+  }
+
+  /**
+   * Enable Next/Prev arrows
+   */
+  export let arrows = true
+
+  /**
+   * Infinite looping
+   */
+  export let infinite = true
+
+  /**
+   * Page to start on
+   */
+  export let initialPageIndex = 1
+
+  /**
+   * Transition speed (ms)
+   */
+  export let speed = 500
+  let _speed = speed
+
+  /**
+   * Enables auto play of pages
+   */
+  export let autoplay = false
+
+  /**
+   * Auto play change interval
+   */
+  export let autoplaySpeed = 3000
+
+  /**
+   * Auto play change direction ('next', 'prev')
+   */
+  export let autoplayDirection = NEXT
+
+  /**
+   * Current page indicator dots
+   */
+  export let dots = true
+
+  let currentPageIndex = 0
+  $: originalCurrentPageIndex = currentPageIndex - Number(infinite);
+  let pagesCount = 0
+  $: originalPagesCount = Math.max(pagesCount - (infinite ? 2 : 0), 0) // without clones
+  let pageWidth = 0
+  let offset = 0
+  let pageWindowElement
+  let pagesElement
+
+  const unsubscribe = store.subscribe(value => {
+    currentPageIndex = value.currentPageIndex
+  })
+
+  function applyPageSizes() {
+    const children = pagesElement.children
+    pageWidth = pageWindowElement.clientWidth
+
+    pagesCount = children.length
+
+    for (let pageIndex=0; pageIndex<pagesCount; pageIndex++) {
+      children[pageIndex].style.minWidth = `${pageWidth}px`
+      children[pageIndex].style.maxWidth = `${pageWidth}px`
+    }
+
+    store.init(initialPageIndex + Number(infinite))
+    offsetPage(false)
+  }
+
+  function applyAutoplay() {
+    let interval
+    if (autoplay) {
+      interval = setInterval(() => {
+        directionFnDescription[autoplayDirection]()
+      }, autoplaySpeed)
+    }
+    return {
+      teardownAutoplay: () => {
+        interval && clearInterval(interval)
+      }
+    }
+  }
+  
+  function addClones() {
+    const first = pagesElement.firstChild
+    const last = pagesElement.children[pagesElement.children.length - 1]
+    pagesElement.prepend(last.cloneNode(true))
+    pagesElement.append(first.cloneNode(true))
+  }
+
+  onMount(async () => {
+    await tick()
+    if (pagesElement && pageWindowElement) {
+      infinite && addClones()
+      applyPageSizes()
+    }
+
+    const { teardownAutoplay } = applyAutoplay()
+
+    addResizeEventListener(applyPageSizes)
+    return () => {
+      removeResizeEventListener(applyPageSizes)
+      teardownAutoplay()
+    }
+  })
+
+  onDestroy(() => {
+    unsubscribe()
+  })
+
+  function handlePageChange(event) {
+    showPage(event.detail + Number(infinite), { offsetDelay: 0, animated: true })
+  }
+
+  function offsetPage(animated) {
+    _speed = animated ? speed : 0
+    offset = -currentPageIndex * pageWidth
+    if (infinite) {
+      if (currentPageIndex === 0) {
+        showPage(pagesCount - 2, { offsetDelay: speed, animated: false })
+      } else if (currentPageIndex === pagesCount - 1) {
+        showPage(1, { offsetDelay: speed, animated: false })
+      }
+    }
+  }
+
+  function showPage(pageIndex, { offsetDelay, animated }) {
+    store.moveToPage({ pageIndex, pagesCount })
+    setTimeout(() => {
+      offsetPage(animated)
+    }, offsetDelay)
+  }
+  function showPrevPage() {
+    store.prev({ infinite, pagesCount })
+    offsetPage(true)
+  }
+  function showNextPage() {
+    store.next({ infinite, pagesCount })
+    offsetPage(true)
+  }
+
+  // gestures
+  function handleSwipeStart() {
+    _speed = 0
+  }
+  function handleThreshold(event) {
+    directionFnDescription[event.detail.direction]()
+  }
+  function handleSwipeMove(event) {
+    offset += event.detail.dx
+  }
+  function handleSwipeEnd() {
+    showPage(currentPageIndex, { offsetDelay: 0, animated: true })
+  }
+</script>
+
+<div class="main-container">
+  <div class="carousel-container">
+    {#if arrows}
+      <slot name="prev" {showPrevPage}>
+        <div class="arrow-container">
+          <Arrow
+            direction="prev"
+            disabled={!infinite && originalCurrentPageIndex === 0}
+            on:click={showPrevPage}
+          />
+        </div>
+      </slot>
+    {/if}
+    <div
+      class="content-container"
+      bind:this={pageWindowElement}
+    >
+      <div
+        use:swipeable="{{ thresholdProvider: () => pageWidth/3 }}"
+        on:start={handleSwipeStart}
+        on:move={handleSwipeMove}
+        on:end={handleSwipeEnd}
+        on:threshold={handleThreshold}
+        style="
+          transform: translateX({offset}px);
+          transition-duration: {_speed}ms;
+        "
+        bind:this={pagesElement}
+      >
+        <slot></slot>
+      </div>    
+    </div>
+    {#if arrows}
+      <slot name="next" {showNextPage}>
+        <div class="arrow-container">
+          <Arrow
+            direction="next"
+            disabled={!infinite && originalCurrentPageIndex === originalPagesCount - 1}
+            on:click={showNextPage}
+          />
+        </div>
+      </slot>
+    {/if}
+  </div>
+  {#if dots}
+    <slot
+      name="dots"
+      currentPageIndex={originalCurrentPageIndex}
+      pagesCount={originalPagesCount}
+      showPage={pageIndex => showPage(pageIndex, { offsetDelay: 0, animated: true })}
+    >
+      <Dots
+        pagesCount={originalPagesCount}
+        currentPageIndex={originalCurrentPageIndex}
+        on:pageChange={handlePageChange}
+      ></Dots>
+    </slot>
+  {/if}
+</div>
+
+<style>
+  .main-container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+  }
+  .carousel-container {
+    display: flex;
+    width: 100%;
+  }
+  .content-container {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .content-container > div {
+    width: 100%;
+    display: flex; /* to put child elements in one row */
+    transition-timing-function: ease-in-out;
+    transition-property: transform;
+  }
+  .arrow-container {
+    padding: 5px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

src/components/Carousel/CarouselView.svelte

@@ -0,0 +1,98 @@
+<script>
+  import Carousel from './Carousel.svelte'
+  import { NEXT } from '../../direction'
+
+  /**
+   * Enable Next/Previos arrows
+   */
+  export let arrows = true;
+  
+  /**
+   * Infinite looping
+   */
+  export let infinite = true;
+
+  /**
+   * Page to start on
+   */
+  export let initialPageIndex = 1
+
+  /**
+   * Transition speed (ms)
+   */
+  export let speed = 500
+
+  /**
+   * Enables auto play of pages
+   */
+  export let autoplay = false
+
+  /**
+   * Auto play change interval
+   */
+  export let autoplaySpeed = 3000
+
+  /**
+   * Auto play change direction ('next', 'prev')
+   */
+  export let autoplayDirection = NEXT
+
+  /**
+   * Current page indicator dots
+   */
+  export let dots = true
+
+  const colors = [
+    { color: '#e5f9f0', text: '0' },
+    { color: '#ccf3e2', text: '1' },
+    { color: '#b2edd3', text: '2' },
+    { color: '#99e7c5', text: '3' },
+    { color: '#7fe1b7', text: '4' },
+    { color: '#66dba8', text: '5' },
+    { color: '#4cd59a', text: '6' },
+    { color: '#32cf8b', text: '7' },
+    { color: '#19c97d', text: '8' },
+    { color: '#00c36f', text: '9' }
+  ]
+</script>
+
+<div class="main-container">
+  <Carousel
+    {arrows}
+    {infinite}
+    {initialPageIndex}
+    {speed}
+    {autoplay}
+    {autoplaySpeed}
+    {autoplayDirection}
+    {dots}
+  >
+    {#each colors as { color, text } (color)}
+      <div
+        class="color-container"
+        style="background-color: {color};"
+      >
+        <p>{text}</p>
+      </div>
+    {/each}
+  </Carousel>
+</div>
+
+<style>
+  .main-container {
+    display: flex;
+    width: 100%;
+  }
+  .color-container {
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+  }
+  .color-container > p {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-style: italic;
+    font-size: 18px;
+  }
+</style>

src/components/Carousel/CarouselViewCustomArrows.svelte

@@ -0,0 +1,124 @@
+<script>
+  import Carousel from './Carousel.svelte'
+  import { NEXT } from '../../direction'
+
+  /**
+   * Enable Next/Previos arrows
+   */
+  export let arrows = true;
+  
+  /**
+   * Infinite looping
+   */
+  export let infinite = true;
+
+  /**
+   * Page to start on
+   */
+  export let initialPageIndex = 1
+
+  /**
+   * Transition speed (ms)
+   */
+  export let speed = 500
+
+  /**
+   * Enables auto play of pages
+   */
+  export let autoplay = false
+
+  /**
+   * Auto play change interval
+   */
+  export let autoplaySpeed = 3000
+
+  /**
+   * Auto play change direction ('next', 'prev')
+   */
+  export let autoplayDirection = NEXT
+
+  /**
+   * Current page indicator dots
+   */
+  export let dots = true
+
+  const colors = [
+    '#e5f9f0',
+    '#ccf3e2',
+    '#b2edd3',
+    '#99e7c5',
+    '#7fe1b7',
+    '#66dba8',
+    '#4cd59a',
+    '#32cf8b',
+    '#19c97d',
+    '#00c36f'
+  ]
+</script>
+
+<div class="main-container">
+  <Carousel
+    {arrows}
+    {infinite}
+    {initialPageIndex}
+    {speed}
+    {autoplay}
+    {autoplaySpeed}
+    {autoplayDirection}
+    {dots}
+    let:showPrevPage
+    let:showNextPage
+  >
+    {#each colors as color (color)}
+      <div
+        class="color-container"
+        style="background-color: {color};"
+      >
+        <p>{color}</p>
+      </div>
+    {/each}
+    <div slot="prev" class="arrow-container">
+      <div class="arrow" on:click={showPrevPage}>
+        <span>&lt;&lt;&lt;</span>
+      </div>
+    </div>
+    <div slot="next" class="arrow-container">
+      <div class="arrow" on:click={showNextPage}>
+        <span>&gt;&gt;&gt;</span>
+      </div>
+    </div>
+  </Carousel>
+</div>
+
+<style>
+  .main-container {
+    display: flex;
+    width: 100%;
+  }
+  .color-container {
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .color-container > p {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-style: italic;
+    font-size: 18px;
+  }
+
+  .arrow-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+  }
+  .arrow {
+    background-color: darkgray;
+    border-radius: 5px;
+    padding: 5px;
+    font-weight: bold;
+    cursor: pointer;
+    user-select: none;
+  }
+</style>

src/components/Carousel/CarouselViewCustomDots.svelte

@@ -0,0 +1,134 @@
+<script>
+  import Carousel from './Carousel.svelte'
+  import { NEXT } from '../../direction'
+
+  /**
+   * Enable Next/Previos arrows
+   */
+  export let arrows = true;
+
+  /**
+   * Infinite looping
+   */
+  export let infinite = true;
+
+  /**
+   * Page to start on
+   */
+  export let initialPageIndex = 1
+
+  /**
+   * Transition speed (ms)
+   */
+  export let speed = 500
+
+  /**
+   * Enables auto play of pages
+   */
+  export let autoplay = false
+
+  /**
+   * Auto play change interval
+   */
+  export let autoplaySpeed = 3000
+
+  /**
+   * Auto play change direction ('next', 'prev')
+   */
+  export let autoplayDirection = NEXT
+
+  /**
+   * Current page indicator dots
+   */
+  export let dots = true
+
+  function onPageChange(event, showPage) {
+    showPage(event.target.value)
+  }
+
+  const colors = [
+    '#e5f9f0',
+    '#ccf3e2',
+    '#b2edd3',
+    '#99e7c5',
+    '#7fe1b7',
+    '#66dba8',
+    '#4cd59a',
+    '#32cf8b',
+    '#19c97d',
+    '#00c36f'
+  ]
+</script>
+
+<div class="main-container">
+  <Carousel
+    {arrows}
+    {infinite}
+    {initialPageIndex}
+    {speed}
+    {autoplay}
+    {autoplaySpeed}
+    {autoplayDirection}
+    {dots}
+    let:currentPageIndex
+    let:pagesCount
+    let:showPage
+  >
+    {#each colors as color (color)}
+      <div
+        class="color-container"
+        style="background-color: {color};"
+      >
+        <p>{color}</p>
+      </div>
+    {/each}
+    <div slot="dots">
+      <div class="select-container">
+        <select
+          value={currentPageIndex}
+          on:change="{(event) => onPageChange(event, showPage)}"
+          on:blur="{(event) => onPageChange(event, showPage)}"
+        >
+          {#each  Array(pagesCount) as _, pageIndex (pageIndex)}
+            <option value={pageIndex} class:active={currentPageIndex === pageIndex}>
+              {pageIndex}
+            </option>
+          {/each}
+        </select>
+      </div>
+    </div>
+  </Carousel>
+</div>
+
+<style>
+  .main-container {
+    display: flex;
+    width: 100%;
+  }
+  .color-container {
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .color-container > p {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-style: italic;
+    font-size: 18px;
+  }
+  .active {
+    background-color: grey;
+    color: white;
+  }
+
+  .select-container {
+    padding: 5px 0;
+  }
+  .select-container > select {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-style: italic;
+    height: 25px;
+    width: 100px;
+    border-radius: 5px;
+  }
+</style>

src/components/Dot/Dot.stories.js

@@ -0,0 +1,13 @@
+import DotView from './DotView.svelte';
+
+export default {
+  title: 'Default Components/Dot',
+  component: DotView
+};
+
+const Template = ({ ...args }) => ({
+  Component: DotView,
+  props: args
+});
+
+export const Primary = Template.bind({});

src/components/Dot/Dot.svelte

@@ -0,0 +1,57 @@
+<script>
+  import { tweened } from 'svelte/motion';
+  import { cubicInOut } from 'svelte/easing';
+
+  const sizePx = 5
+  const sizeCurrentPx = 8
+
+  const size = tweened(sizePx, {
+    duration: 250,
+    easing: cubicInOut
+  });
+
+  /**
+   * Indicates if dot is active
+   */
+  export let active = false
+
+  $: {
+    size.set(active ? sizeCurrentPx : sizePx)
+  }
+</script>
+
+<div class="main-container">
+  <div
+    class="dot"
+    class:current="{active}"
+    style="
+      height: {$size}px;
+      width: {$size}px;
+    "
+    on:click
+  ></div>
+</div>
+
+<style>
+  .main-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 16px;
+    width: 16px;
+  }
+  .dot {
+    background-color: #5d5d5d;
+    border-radius: 50%;
+    display: inline-block;
+    opacity: 0.5;
+    cursor: pointer;
+    transition: opacity 100ms ease;
+  }
+  .dot:hover {
+    opacity: 0.9;
+  }
+  .current {
+    opacity: 0.7;
+  }
+</style>

src/components/Dot/DotView.svelte

@@ -0,0 +1,17 @@
+<script>
+  import Dot from './Dot.svelte'
+
+  /**
+   * Indicates if dot is active
+   */
+  export let active = false
+
+  function handleDotClick() {
+    active = !active
+  }
+</script>
+
+<Dot
+  {active}
+  on:click={handleDotClick}
+/>

src/components/Dots/Dots.stories.js

@@ -0,0 +1,13 @@
+import DotsView from './DotsView.svelte';
+
+export default {
+  title: 'Default Components/Dots',
+  component: DotsView
+};
+
+const Template = ({ ...args }) => ({
+  Component: DotsView,
+  props: args
+});
+
+export const Primary = Template.bind({});

src/components/Dots/Dots.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { createEventDispatcher } from 'svelte'
+  import Dot from '../Dot/Dot.svelte'
+
+  const dispatch = createEventDispatcher()
+
+  /**
+   * Amount of pages (amount of dots)
+   */
+  export let pagesCount = 1
+
+  /**
+   * Index of the current page
+   */
+  export let currentPageIndex = 0
+
+  function handleDotClick(pageIndex) {
+    dispatch('pageChange', pageIndex)
+  }
+</script>
+
+<div class="main-container">
+  {#each Array(pagesCount) as _, pageIndex (pageIndex)}
+    <div class="dot-container">
+      <Dot
+        active={currentPageIndex === pageIndex}
+        on:click={() => handleDotClick(pageIndex)}
+      ></Dot>
+    </div>
+  {/each}  
+</div>
+
+<style>
+  :root {
+    --dot-size: 10px; 
+  }
+  .main-container {
+    display: flex;
+    align-items: center;
+  }
+  .dot-container {
+    height: calc(var(--dot-size) + 10px);
+    width: calc(var(--dot-size) + 10x);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

src/components/Dots/DotsView.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Dots from './Dots.svelte'
+
+  /**
+   * Amount of pages (amount of dots)
+   */
+  export let pagesCount = 5
+
+  /**
+   * Index of the current page
+   */
+  export let currentPageIndex = 3
+
+  function handlePageChange(event) {
+    currentPageIndex = event.detail
+  }
+</script>
+
+<Dots
+  {pagesCount}
+  {currentPageIndex}
+  on:pageChange={handlePageChange}
+>
+</Dots>