From 424eaa9e8098cef762b1a2a7565d37944bb25306 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Mon, 21 Oct 2019 18:25:12 +0200
Subject: Add storybook

---
 .storybook/addons.js |  2 ++
 .storybook/config.js | 10 ++++++++++
 2 files changed, 12 insertions(+)
 create mode 100644 .storybook/addons.js
 create mode 100644 .storybook/config.js

(limited to '.storybook')

diff --git a/.storybook/addons.js b/.storybook/addons.js
new file mode 100644
index 0000000..6aed412
--- /dev/null
+++ b/.storybook/addons.js
@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
diff --git a/.storybook/config.js b/.storybook/config.js
new file mode 100644
index 0000000..7126515
--- /dev/null
+++ b/.storybook/config.js
@@ -0,0 +1,10 @@
+import { configure } from '@storybook/vue'
+
+import '../assets/css/main.css'
+
+const req = require.context('../components', true, /\.stories.js$/)
+function loadStories() {
+  req.keys().forEach(filename => req(filename))
+}
+
+configure(loadStories, module)
-- 
cgit 1.4.1


From 17fc6a6b4507e5535d8b6989b66da5bac323e87b Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Mon, 21 Oct 2019 19:53:02 +0200
Subject: Add PostList

---
 .gitignore                                  |  1 +
 .storybook/decorators/index.js              |  6 +++
 assets/css/main.css                         |  3 ++
 components/PostLink.stories.js              |  8 +--
 components/PostLink.vue                     |  1 +
 components/PostList/PostList.vue            | 49 +++++++++++++++++++
 components/PostList/PurePostList.stories.js | 31 ++++++++++++
 components/PostList/PurePostList.vue        | 76 +++++++++++++++++++++++++++++
 components/PostList/index.js                |  3 ++
 components/PurePostList.stories.js          | 16 ------
 components/PurePostList.vue                 | 38 ---------------
 pages/index.vue                             | 19 +++++---
 pages/kronika/index.vue                     | 33 ++-----------
 13 files changed, 186 insertions(+), 98 deletions(-)
 create mode 100644 .storybook/decorators/index.js
 create mode 100644 components/PostList/PostList.vue
 create mode 100644 components/PostList/PurePostList.stories.js
 create mode 100644 components/PostList/PurePostList.vue
 create mode 100644 components/PostList/index.js
 delete mode 100644 components/PurePostList.stories.js
 delete mode 100644 components/PurePostList.vue

(limited to '.storybook')

diff --git a/.gitignore b/.gitignore
index 53c3292..6937f9e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 content
+static/api
 
 # Created by .ignore support plugin (hsz.mobi)
 ### Node template
diff --git a/.storybook/decorators/index.js b/.storybook/decorators/index.js
new file mode 100644
index 0000000..acea431
--- /dev/null
+++ b/.storybook/decorators/index.js
@@ -0,0 +1,6 @@
+export const center = () => {
+  return {
+    template:
+      '<div style="display: flex; align-items: center; justify-content: center"><story/></div>'
+  }
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index 21bcffb..7da562e 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -8,6 +8,9 @@ body {
 
 * {
   box-sizing: border-box;
+}
+
+body {
   font-family: 'Roboto Slab', serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/components/PostLink.stories.js b/components/PostLink.stories.js
index 71d04ed..a824b35 100644
--- a/components/PostLink.stories.js
+++ b/components/PostLink.stories.js
@@ -1,4 +1,5 @@
 import { storiesOf } from '@storybook/vue'
+import { center } from '../.storybook/decorators'
 
 import PostLink from './PostLink'
 
@@ -9,13 +10,6 @@ export const postLink = {
   route: '/kronika/2019/20/11/test'
 }
 
-const center = () => {
-  return {
-    template:
-      '<div style="display: flex; align-items: center; justify-content: center"><story/></div>'
-  }
-}
-
 storiesOf('PostLink', module)
   .addDecorator(center)
   .add('default', () => {
diff --git a/components/PostLink.vue b/components/PostLink.vue
index b0aeb5a..5bc5127 100644
--- a/components/PostLink.vue
+++ b/components/PostLink.vue
@@ -40,6 +40,7 @@ export default {
   margin: 20px;
   flex-basis: 410px;
   max-width: 410px;
+  height: 250px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
   background: #ffffff;
   text-align: left;
diff --git a/components/PostList/PostList.vue b/components/PostList/PostList.vue
new file mode 100644
index 0000000..206a73f
--- /dev/null
+++ b/components/PostList/PostList.vue
@@ -0,0 +1,49 @@
+<template>
+  <pure-post-list :posts="posts" :loading="loading" />
+</template>
+
+<script>
+import PurePostList from './PurePostList'
+
+export default {
+  name: 'PostList',
+  components: { PurePostList },
+  props: {
+    max: {
+      type: Number,
+      required: false
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      rawPosts: []
+    }
+  },
+  mounted() {
+    this.loadPostsClient()
+  },
+  computed: {
+    posts() {
+      if (this.max) {
+        return this.rawPosts.slice(0, this.max)
+      }
+      return this.rawPosts
+    }
+  },
+  methods: {
+    async loadPostsClient() {
+      let posts = await this.$axios.get(
+        `${window.location.origin}/api/posts.json`
+      )
+      this.rawPosts = posts.data
+      this.rawPosts = this.rawPosts.map(post => ({
+        title: post.content.meta.title,
+        description: post.content.description,
+        route: post.route
+      }))
+      this.loading = false
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/components/PostList/PurePostList.stories.js b/components/PostList/PurePostList.stories.js
new file mode 100644
index 0000000..cf812f7
--- /dev/null
+++ b/components/PostList/PurePostList.stories.js
@@ -0,0 +1,31 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import { postLink } from '../PostLink.stories'
+
+import PurePostList from './PurePostList'
+
+export const posts = Array(5).fill(postLink)
+console.log(posts)
+
+storiesOf('PurePostList', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { PurePostList },
+      template: `<pure-post-list :posts="posts"/>`,
+      data: () => ({ posts })
+    }
+  })
+  .add('loading', () => {
+    return {
+      components: { PurePostList },
+      template: `<pure-post-list :posts="posts" loading/>`
+    }
+  })
+  .add('no posts', () => {
+    return {
+      components: { PurePostList },
+      template: `<pure-post-list :posts="posts"/>`
+    }
+  })
diff --git a/components/PostList/PurePostList.vue b/components/PostList/PurePostList.vue
new file mode 100644
index 0000000..7e70db8
--- /dev/null
+++ b/components/PostList/PurePostList.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="post-list">
+    <div v-if="loading" class="post-list-container">
+      <div class="loading-post" v-for="(_, index) in 4" :key="index"></div>
+    </div>
+    <div v-else-if="posts" class="post-list-container">
+      <post-link
+        v-for="(post, index) in posts"
+        :key="index"
+        :route="post.route"
+        :title="post.title"
+        :description="post.description"
+      />
+    </div>
+    <div v-else class="no-posts">Brak wpisów</div>
+  </div>
+</template>
+
+<script>
+import PostLink from '../PostLink'
+
+export default {
+  name: 'PurePostList',
+  components: { PostLink },
+  props: {
+    posts: {
+      type: Array,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: () => false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.post-list {
+  width: 100%;
+  max-width: 900px;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.post-list-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: initial;
+}
+
+@keyframes loading {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.loading-post {
+  background: #efefef;
+  animation: loading 1.5s ease-in-out infinite;
+  margin: 20px;
+  flex-basis: 410px;
+  width: 410px;
+  height: 250px;
+  text-align: left;
+}
+
+.no-posts {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/components/PostList/index.js b/components/PostList/index.js
new file mode 100644
index 0000000..dbb515e
--- /dev/null
+++ b/components/PostList/index.js
@@ -0,0 +1,3 @@
+import PostList from './PostList'
+
+export default PostList
diff --git a/components/PurePostList.stories.js b/components/PurePostList.stories.js
deleted file mode 100644
index 134cd68..0000000
--- a/components/PurePostList.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-
-import { postLink } from './PostLink.stories'
-
-import PurePostList from './PurePostList'
-
-export const posts = Array(5).fill(postLink)
-console.log(posts)
-
-storiesOf('PurePostList', module).add('default', () => {
-  return {
-    components: { PurePostList },
-    template: `<pure-post-list :posts="posts"/>`,
-    data: () => ({ posts })
-  }
-})
diff --git a/components/PurePostList.vue b/components/PurePostList.vue
deleted file mode 100644
index a93360d..0000000
--- a/components/PurePostList.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div>
-    <div v-if="posts" class="post-list">
-      <post-link
-        v-for="(post, index) in posts"
-        :key="index"
-        :route="post.route"
-        :title="post.title"
-        :description="post.description"
-      />
-    </div>
-    <div v-else>Brak wpisów</div>
-  </div>
-</template>
-
-<script>
-import PostLink from './PostLink'
-
-export default {
-  name: 'PurePostList',
-  components: { PostLink },
-  props: {
-    posts: {
-      type: Array,
-      required: true
-    }
-  }
-}
-</script>
-
-<style scoped>
-.post-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  max-width: 900px;
-}
-</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 736e7f4..8b093df 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,16 +1,21 @@
 <template>
   <div>
-    <JoinUs />
-    <FacebookFeed />
+    <join-us />
+    <div style="width: 100%; padding-top: 50px">
+      <h1>Ostatnie wpisy z kroniki</h1>
+      <post-list :max="4" />
+    </div>
+    <facebook-feed />
   </div>
 </template>
 
 <script>
-import JoinUs from "../components/JoinUs.vue";
-import FacebookFeed from "../components/FacebookFeed.vue";
+import JoinUs from '~/components/JoinUs.vue'
+import FacebookFeed from '~/components/FacebookFeed.vue'
+import PostList from '~/components/PostList'
 
 export default {
-  name: "HomeView",
-  components: { JoinUs, FacebookFeed }
-};
+  name: 'HomeView',
+  components: { JoinUs, FacebookFeed, PostList }
+}
 </script>
\ No newline at end of file
diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue
index cff3551..d9685c1 100644
--- a/pages/kronika/index.vue
+++ b/pages/kronika/index.vue
@@ -1,43 +1,16 @@
 <template>
   <div style="padding-top: 20px">
     <h2>Ostatnie wpisy</h2>
-    <div class="post-list">
-      <chronicle-post
-        v-for="(post, index) in posts"
-        :key="index"
-        :route="post.route"
-        :title="post.content.meta.title"
-        :description="post.content.description"
-      />
-    </div>
+    <post-list />
   </div>
 </template>
 
 <script>
-import ChroniclePost from '~/components/ChroniclePost'
-import k from '~/api'
+import PostList from '~/components/PostList'
 
 export default {
   components: {
-    ChroniclePost
-  },
-  async asyncData() {
-    return {
-      posts: k.getPosts()
-    }
-  },
-  mounted() {
-    this.getPosts()
-  },
-  methods: {
-    getPosts() {
-      if (this.posts.length < 1) {
-        this.$axios
-          .get(`${window.location.origin}/api/posts.json`)
-          .then(r => (this.posts = r.data))
-      }
-      console.log(this.posts)
-    }
+    PostList
   }
 }
 </script>
-- 
cgit 1.4.1


From 82cd395bf7deb8f1df95be5a0bb3f59d0b1108e1 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Mon, 21 Oct 2019 20:06:48 +0200
Subject: Add Facebook components

---
 .storybook/decorators/index.js                     |  2 +-
 components/Facebook/FacebookFeed.stories.js        | 13 ++++++++
 components/Facebook/FacebookFeed.vue               | 29 ++++++++++++++++++
 .../Facebook/FacebookFindUsButton.stories.js       | 13 ++++++++
 components/Facebook/FacebookFindUsButton.vue       | 35 ++++++++++++++++++++++
 components/FacebookFeed.vue                        | 25 ----------------
 components/FacebookFindUsButton.vue                | 35 ----------------------
 components/PostList/PurePostList.stories.js        |  3 --
 package.json                                       |  2 +-
 pages/index.vue                                    |  2 +-
 10 files changed, 93 insertions(+), 66 deletions(-)
 create mode 100644 components/Facebook/FacebookFeed.stories.js
 create mode 100644 components/Facebook/FacebookFeed.vue
 create mode 100644 components/Facebook/FacebookFindUsButton.stories.js
 create mode 100644 components/Facebook/FacebookFindUsButton.vue
 delete mode 100644 components/FacebookFeed.vue
 delete mode 100644 components/FacebookFindUsButton.vue

(limited to '.storybook')

diff --git a/.storybook/decorators/index.js b/.storybook/decorators/index.js
index acea431..518f966 100644
--- a/.storybook/decorators/index.js
+++ b/.storybook/decorators/index.js
@@ -1,6 +1,6 @@
 export const center = () => {
   return {
     template:
-      '<div style="display: flex; align-items: center; justify-content: center"><story/></div>'
+      '<div style="height: 100vh; display: flex; align-items: center; justify-content: center"><story/></div>'
   }
 }
diff --git a/components/Facebook/FacebookFeed.stories.js b/components/Facebook/FacebookFeed.stories.js
new file mode 100644
index 0000000..4eced7f
--- /dev/null
+++ b/components/Facebook/FacebookFeed.stories.js
@@ -0,0 +1,13 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import FacebookFeed from './FacebookFeed'
+
+storiesOf('FacebookFeed', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { FacebookFeed },
+      template: `<facebook-feed />`
+    }
+  })
diff --git a/components/Facebook/FacebookFeed.vue b/components/Facebook/FacebookFeed.vue
new file mode 100644
index 0000000..56172f4
--- /dev/null
+++ b/components/Facebook/FacebookFeed.vue
@@ -0,0 +1,29 @@
+<template>
+  <section class="feed">
+    <h1>Zobacz co się dzieje!</h1>
+    <facebook-find-us-button />
+  </section>
+</template>
+
+<script>
+import FacebookFindUsButton from './FacebookFindUsButton.vue'
+
+export default {
+  components: {
+    FacebookFindUsButton
+  },
+  props: {
+    pageId: String
+  }
+}
+</script>
+
+<style scoped>
+.feed {
+  margin: 50px 0;
+}
+
+.feed > h1 {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/components/Facebook/FacebookFindUsButton.stories.js b/components/Facebook/FacebookFindUsButton.stories.js
new file mode 100644
index 0000000..e76f8f9
--- /dev/null
+++ b/components/Facebook/FacebookFindUsButton.stories.js
@@ -0,0 +1,13 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import FacebookFindUsButton from './FacebookFindUsButton'
+
+storiesOf('FacebookFindUsButton', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { FacebookFindUsButton },
+      template: `<facebook-find-us-button />`
+    }
+  })
diff --git a/components/Facebook/FacebookFindUsButton.vue b/components/Facebook/FacebookFindUsButton.vue
new file mode 100644
index 0000000..9a27c11
--- /dev/null
+++ b/components/Facebook/FacebookFindUsButton.vue
@@ -0,0 +1,35 @@
+<template>
+  <a href="https://facebook.com/19pdhpuszcza" target="_blank" rel="noopener">
+    <div class="button">
+      <img class="image" src="/assets/social/find_us_fb.png" alt="Find us on Facebook" />
+    </div>
+  </a>
+</template>
+
+<style scoped>
+.button {
+  border: 2px solid #c4c4c4;
+  border-radius: 4px;
+
+  padding: 15px 40px;
+  margin: 10px;
+}
+
+.button:hover {
+  background-color: #efefef;
+}
+
+.image {
+  width: 200px;
+}
+
+@media (max-width: 500px) {
+  a {
+    width: 100%;
+  }
+
+  .image {
+    width: 150px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/FacebookFeed.vue b/components/FacebookFeed.vue
deleted file mode 100644
index 9d2d251..0000000
--- a/components/FacebookFeed.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <section class="feed">
-    <h1>Zobacz co się dzieje!</h1>
-    <FacebookFindUsButton />
-  </section>
-</template>
-
-<script>
-import FacebookFindUsButton from "./FacebookFindUsButton.vue";
-
-export default {
-  components: {
-    FacebookFindUsButton
-  },
-  props: {
-    pageId: String
-  }
-};
-</script>
-
-<style scoped>
-.feed {
-  margin: 50px 0;
-}
-</style>
\ No newline at end of file
diff --git a/components/FacebookFindUsButton.vue b/components/FacebookFindUsButton.vue
deleted file mode 100644
index 9a27c11..0000000
--- a/components/FacebookFindUsButton.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <a href="https://facebook.com/19pdhpuszcza" target="_blank" rel="noopener">
-    <div class="button">
-      <img class="image" src="/assets/social/find_us_fb.png" alt="Find us on Facebook" />
-    </div>
-  </a>
-</template>
-
-<style scoped>
-.button {
-  border: 2px solid #c4c4c4;
-  border-radius: 4px;
-
-  padding: 15px 40px;
-  margin: 10px;
-}
-
-.button:hover {
-  background-color: #efefef;
-}
-
-.image {
-  width: 200px;
-}
-
-@media (max-width: 500px) {
-  a {
-    width: 100%;
-  }
-
-  .image {
-    width: 150px;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/components/PostList/PurePostList.stories.js b/components/PostList/PurePostList.stories.js
index cf812f7..00516f8 100644
--- a/components/PostList/PurePostList.stories.js
+++ b/components/PostList/PurePostList.stories.js
@@ -1,15 +1,12 @@
 import { storiesOf } from '@storybook/vue'
-import { center } from '../../.storybook/decorators'
 
 import { postLink } from '../PostLink.stories'
 
 import PurePostList from './PurePostList'
 
 export const posts = Array(5).fill(postLink)
-console.log(posts)
 
 storiesOf('PurePostList', module)
-  .addDecorator(center)
   .add('default', () => {
     return {
       components: { PurePostList },
diff --git a/package.json b/package.json
index 4c6ff52..63620e0 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "postbuild": "./scripts/postbuild.sh",
     "start": "nuxt start",
     "test": "jest",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006 -s static",
     "build-storybook": "build-storybook"
   },
   "dependencies": {
diff --git a/pages/index.vue b/pages/index.vue
index 8b093df..12caa0c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,7 +11,7 @@
 
 <script>
 import JoinUs from '~/components/JoinUs.vue'
-import FacebookFeed from '~/components/FacebookFeed.vue'
+import FacebookFeed from '~/components/Facebook/FacebookFeed.vue'
 import PostList from '~/components/PostList'
 
 export default {
-- 
cgit 1.4.1


From 440afcb2f5b13982ea93b3fcb8854cdb61722442 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Wed, 4 Dec 2019 08:28:38 +0100
Subject: Fix storyshots

---
 .storybook/config.js                         | 4 +++-
 components/Facebook/FacebookFindUsButton.vue | 2 ++
 components/Ranking/RankingFirstEntry.vue     | 1 +
 components/Ranking/RankingList.stories.js    | 5 +----
 4 files changed, 7 insertions(+), 5 deletions(-)

(limited to '.storybook')

diff --git a/.storybook/config.js b/.storybook/config.js
index 7126515..45f33c0 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,6 +1,8 @@
 import { configure } from '@storybook/vue'
 
-import '../assets/css/main.css'
+if (!process.env.JEST_WORKER_ID) {
+  require('../assets/css/main.css')
+}
 
 const req = require.context('../components', true, /\.stories.js$/)
 function loadStories() {
diff --git a/components/Facebook/FacebookFindUsButton.vue b/components/Facebook/FacebookFindUsButton.vue
index 05aa9f6..b955b0b 100644
--- a/components/Facebook/FacebookFindUsButton.vue
+++ b/components/Facebook/FacebookFindUsButton.vue
@@ -32,6 +32,8 @@
 
 .image {
   width: 200px;
+  display: block;
+  margin: auto;
 }
 
 @media (max-width: 500px) {
diff --git a/components/Ranking/RankingFirstEntry.vue b/components/Ranking/RankingFirstEntry.vue
index d9f290b..ad0bea0 100644
--- a/components/Ranking/RankingFirstEntry.vue
+++ b/components/Ranking/RankingFirstEntry.vue
@@ -44,6 +44,7 @@ export default {
 
 .ranking-first-entry__troop {
   grid-column: 2;
+  text-align: center;
 }
 
 .ranking-first-entry__points {
diff --git a/components/Ranking/RankingList.stories.js b/components/Ranking/RankingList.stories.js
index 830dd6a..ad3576b 100644
--- a/components/Ranking/RankingList.stories.js
+++ b/components/Ranking/RankingList.stories.js
@@ -18,9 +18,6 @@ storiesOf('Ranking/RankingList', module)
     return {
       components: { RankingList },
       template: `<ranking-list :scores="scores" />`,
-      data: () => {
-        console.log(rankingList)
-        return rankingList
-      }
+      data: () => rankingList
     }
   })
-- 
cgit 1.4.1