Merge branch 'release/0.1.0-alpha.2'

.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  extends: [
+    'plugin:vue/recommended'
+  ]
+}

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 .DS_Store
 dist/stats.json
+dist/vue-snap.js
 storybook-static

.travis.yml

@@ -0,0 +1,14 @@
+before_install:
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH="$HOME/.yarn/bin:$PATH"
+cache:
+  yarn: true
+  directories:
+    - "node_modules"
+language: node_js
+node_js:
+  - 12
+install:
+  - yarn install
+script:
+  - yarn lint

CHANGELOG.md

@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.1.0-alpha.2] - 2020-06-13
+### Added
+- initialize eslint #8
+- initilize git hooks (husky) #8
+- initialize VuePress #6
+- Storybook Addons (docs, a11y, actions, knobs, viewport, storysource) #2
+- props/slots preview #2
+- initilize travis #7
+
 ## [0.1.0-alpha.1] - 2020-06-12
 ### Added
 - Project init

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Bartosz Dominiak
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,3 +1,12 @@
+[![npm version](https://badge.fury.io/js/vue-snap.svg)](https://badge.fury.io/js/vue-snap)
+[![Build Status](https://travis-ci.org/bartdominiak/vue-snap.svg?branch=develop)](https://travis-ci.org/bartdominiak/vue-snap)
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-snap)
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/bartdominiak/vue-snap/blob/master/LICENSE.md)
+
+<div align="center">
+  <img width="256" heigth="256" src="/static/snap.jpg" alt="vue-snap logo">
+</div>
+
 # vue-snap
 > Lightweight Slider/Carousel based on CSS Scroll Snap and Vue
 

config/storybook/main.js

@@ -1,5 +1,13 @@
 module.exports = {
   stories: ['../../src/**/*.stories.@(js|mdx)'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-actions',
+    '@storybook/addon-knobs',
+    '@storybook/addon-viewport',
+    '@storybook/addon-storysource',
+    '@storybook/addon-docs'
+  ],
   webpackFinal: async (config) => {
     config.module.rules.push({
       test: /\.scss$/,

deploy.sh

@@ -0,0 +1,19 @@
+#!/usr/bin/env sh
+
+# abort on errors
+set -e
+
+# build
+npm run docs:build
+
+# navigate into the build output directory
+cd docs/.vuepress/dist
+
+git init
+git add -A
+git commit -m 'deploy'
+
+# if you are deploying to https://<USERNAME>.github.io/<REPO>
+git push -f [email protected]:bartdominiak/vue-snap.git master:gh-pages
+
+cd -

docs/.vuepress/config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  title: 'VueSnap',
+  description: 'Lightweight Slider/Carousel based on CSS Scroll Snap',
+  themeConfig: {
+    nav: [
+      { text: 'Guide', link: '/guide/' },
+      // { text: 'Examples', link: '/examples/' },
+      // { text: 'API', link: '/api/' }
+    ],
+    repo: 'bartdominiak/vue-snap',
+    editLinks: true,
+    editLinkText: 'Help us improve this page!',
+    serviceWorker: true,
+    docsDir: 'docs',
+    docsBranch: 'master'
+  }
+}

docs/README.md

@@ -0,0 +1,14 @@
+---
+home: true
+heroImage: /snap.svg
+actionText: Get Started →
+actionLink: /guide/
+features:
+- title: Fully responsive
+  details: With the full power of CSS 💪
+- title: Optimised
+  details: Without heavy calculations 💯
+- title: Performance
+  details: Reduce the overall load time of your site 💪
+footer: MIT Licensed | Copyright © 2020 Bartosz Dominiak
+---

docs/api/README.md

@@ -0,0 +1 @@
+# Hello examples

docs/examples/README.md

@@ -0,0 +1 @@
+# Hello VuePress

docs/guide/README.md

@@ -0,0 +1,51 @@
+# Guide
+
+## Installation
+
+```
+yarn
+```
+
+or if you preffer npm
+
+```
+npm
+```
+
+## Locally
+
+```js
+import { Carousel, Slide } from 'vue-snap'
+
+export default {
+  components: {
+    Carousel,
+    Slide
+  }
+}
+```
+
+## Globally
+
+```js
+import Vue from 'vue'
+import VueSnap from 'vue-snap'
+
+Vue.use(VueSnap)
+```
+
+## HTML Markup
+
+```html
+<carousel>
+  <slide>
+    1
+  </slide>
+  <slide>
+    2
+  </slide>
+  <slide>
+    3
+  </slide>
+</carousel>
+```

package.json

@@ -1,49 +1,69 @@
 {
   "name": "vue-snap",
-  "version": "0.1.0-alpha.1",
-  "description": "Lightweight Carousel based on CSS Scroll Snap and Vue",
+  "version": "0.1.0-alpha.2",
+  "description": "Lightweight Carousel based on CSS Scroll Snap",
   "main": "dist/vue-snap.min.js",
+  "engines": {
+    "node": ">=12.13.0 <13.0.0"
+  },
+  "scripts": {
+    "dev": "webpack --config ./config/webpack/webpack.dev.js --watch",
+    "build": "webpack --config ./config/webpack/webpack.prod.js",
+    "storybook:dev": "start-storybook -s ./static -c ./config/storybook",
+    "storybook:build": "build-storybook -s ./static -c ./config/storybook",
+    "analyse": "webpack --config ./config/webpack/webpack.prod.js --profile --json > ./dist/stats.json && webpack-bundle-analyzer ./dist/stats.json -m static -r ./dist/report.html",
+    "lint": "eslint src/**/*.{js,vue}",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
+  },
   "repository": {
     "type": "git",
     "url": "git+ssh://[email protected]/bartdominiak/vue-snap.git"
   },
   "keywords": [
-    "Vue",
+    "vue",
+    "vue-snap",
     "carousel",
     "slider",
-    "responsive",
-    "scroll",
-    "snap",
-    "CSS"
+    "scroll-snap"
   ],
   "author": "[email protected]",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/bartdominiak/vue-snap/issues"
   },
   "homepage": "https://github.com/bartdominiak/vue-snap#README",
-  "scripts": {
-    "dev": "webpack --config ./config/webpack/webpack.dev.js --watch",
-    "build": "webpack --config ./config/webpack/webpack.prod.js",
-    "storybook": "start-storybook -c ./config/storybook",
-    "components": "build-storybook -c ./config/storybook",
-    "analyse": "webpack --config ./config/webpack/webpack.prod.js --profile --json > ./dist/stats.json && webpack-bundle-analyzer ./dist/stats.json -m static -r ./dist/report.html"
-  },
   "dependencies": {
     "vue": "^2.6.11"
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",
+    "@storybook/addon-a11y": "6.0.0-beta.25",
+    "@storybook/addon-actions": "^6.0.0-beta.25",
+    "@storybook/addon-docs": "^6.0.0-beta.25",
+    "@storybook/addon-knobs": "^6.0.0-beta.25",
+    "@storybook/addon-storysource": "^6.0.0-beta.25",
+    "@storybook/addon-viewport": "^6.0.0-beta.25",
     "@storybook/vue": "^6.0.0-beta.25",
     "babel-loader": "^8.1.0",
     "css-loader": "^3.5.3",
+    "eslint": "^7.2.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "husky": "^4.2.5",
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
     "vue-loader": "^15.9.2",
     "vue-template-compiler": "^2.6.11",
+    "vuepress": "^1.5.1",
     "webpack": "^4.43.0",
     "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.11",
     "webpack-merge": "^4.2.2"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn lint",
+      "pre-push": "yarn lint"
+    }
   }
 }

src/assets/_base.scss

@@ -31,7 +31,12 @@
 
     &__slide {
         flex: 0 0 100%;
+        height: 100%;
         scroll-snap-align: start;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        outline: none;
     }
 
     &__navigation {

src/assets/_examples.scss

@@ -0,0 +1,48 @@
+.example-default {
+    .vs-carousel__slide {
+        font-size: 40px;
+        color: white;
+
+        &:nth-child(n+1) {
+            background: #2e5c8a;
+        }
+
+        &:nth-child(2n+1) {
+            background: #336699;
+        }
+    }
+}
+
+.example-multiple {
+    .vs-carousel__slide {
+        flex: 0 0 100%;
+
+        @media (min-width: 500px) {
+            flex: 0 0 50%;
+        }
+
+        @media (min-width: 768px) {
+            flex: 0 0 33.33%;
+        }
+
+        @media (min-width: 1024px) {
+            flex: 0 0 25%;
+        }
+
+        @media (min-width: 1280px) and (max-width: 1440px) {
+            flex: 0 0 20%;
+        }
+    }
+}
+
+.example-images {
+    &__image {
+        height: 100%;
+        width: auto;
+    }
+
+    .vs-carousel__navigation {
+        border: 2px solid #000;
+        border-radius: 4px;
+    }
+}