Add basic styleguide

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/DateCalendarIcon.vue

@@ -1,3 +1,16 @@
+<docs>
+### Example
+```vue
+  <DateCalendarIcon date="2019-10-05T18:41:11.720Z" />
+```
+
+```vue
+  <DateCalendarIcon
+    :date="new Date()"
+  />
+```
+</docs>
+
 <template>
     <time class="datetime-container" :datetime="dateObj.getUTCSeconds()">
         <span class="month">{{ month }}</span>
@@ -9,6 +22,9 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 
 @Component
 export default class DateCalendarIcon extends Vue {
+  /**
+   * `date` can be a string or an actual date object.
+   */
   @Prop({ required: true }) date!: string;
 
   get dateObj() {

js/src/components/Event/DateTimePicker.vue

@@ -1,3 +1,16 @@
+<docs>
+### Datetime Picker
+
+> We're wrapping the Buefy datepicker & an input
+
+### Defaults
+- step: 10
+
+### Example
+```vue
+  <DateTimePicker :value="new Date()" />
+```
+</docs>
 <template>
     <b-field grouped horizontal :label="label">
         <b-datepicker expanded v-model="date" :placeholder="$t('Click to select')" icon="calendar"></b-datepicker>
@@ -8,8 +21,20 @@
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 @Component
 export default class DateTimePicker extends Vue {
-  @Prop({ required: true, type: Date }) value!: Date;
+  /**
+   * @model
+   * The DateTime value
+   */
+  @Prop({ required: true, type: Date, default: () => new Date() }) value!: Date;
+
+  /**
+   * What's shown besides the picker
+   */
   @Prop({ required: false, type: String, default: 'Datetime' }) label!: string;
+
+  /**
+   * The step for the time input
+   */
   @Prop({ required: false, type: Number, default: 1 }) step!: number;
 
   date: Date = this.value;
@@ -23,19 +48,24 @@ export default class DateTimePicker extends Vue {
   }
 
   @Watch('time')
-  updateTime(time) {
+  updateTime(time: string) {
     const [hours, minutes] = time.split(':', 2);
-    this.date.setHours(hours);
-    this.date.setMinutes(minutes);
+    this.date.setHours(parseInt(hours, 10));
+    this.date.setMinutes(parseInt(minutes, 10));
     this.updateDateTime();
   }
 
   @Watch('date')
-    updateDate() {
+  updateDate() {
     this.updateDateTime();
   }
 
   updateDateTime() {
+    /**
+     * Returns the updated date
+     *
+     * @type {DateTime}
+     */
     this.$emit('input', this.date);
   }
 }

js/src/components/Event/EventCard.vue

@@ -1,3 +1,31 @@
+<docs>
+### EventCard
+
+A simple card for an event
+
+```vue
+<EventCard
+  :event="{ 
+    title: 'Vue Styleguidist first meetup: learn the basics!',
+    beginsOn: new Date(),
+    tags: [
+      {
+        slug: 'test', title: 'Test'
+      },
+      {
+        slug: 'mobilizon', title: 'Mobilizon'
+      },
+    ],
+    organizerActor: {
+      preferredUsername: 'tcit',
+      name: 'Some Random Dude',
+      domain: null
+    }
+  }"
+  />
+```
+</docs>
+
 <template>
   <router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
     <div class="card-image" v-if="!event.image">

js/src/components/Event/EventFullDate.vue

@@ -1,3 +1,22 @@
+<docs>
+#### Give a translated and localized text that give the starting and ending datetime for an event.
+
+##### Start date with no ending
+```vue
+<EventFullDate beginsOn="2015-10-06T18:41:11.720Z" />
+```
+
+##### Start date with an ending the same day
+```vue
+<EventFullDate beginsOn="2015-10-06T18:41:11.720Z" endsOn="2015-10-06T20:41:11.720Z" />
+```
+
+##### Start date with an ending on a different day
+```vue
+<EventFullDate beginsOn="2015-10-06T18:41:11.720Z" endsOn="2032-10-06T18:41:11.720Z" />
+```
+</docs>
+
 <template>
     <span v-if="!endsOn">{{ beginsOn | formatDateTimeString }}</span>
     <span v-else-if="isSameDay()">

js/src/components/Event/EventListCard.vue

@@ -1,3 +1,55 @@
+<docs>
+A simple card for a participation (we should rename it)
+
+```vue
+<template>
+  <div>
+    <EventListCard
+      :participation="participation"
+      />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      participation: {
+        event: { 
+          title: 'Vue Styleguidist first meetup: learn the basics!',
+          id: 5,
+          uuid: 'some uuid',
+          beginsOn: new Date(),
+          organizerActor: {
+            preferredUsername: 'tcit',
+            name: 'Some Random Dude',
+            domain: null,
+            id: 4,
+            displayName() { return 'Some random dude' }
+          },
+          options: {
+            maximumAttendeeCapacity: 4
+          },
+          participantStats: {
+            approved: 1,
+            unapproved: 2
+          }
+        },
+        actor: {
+          preferredUsername: 'tcit',
+            name: 'Some Random Dude',
+            domain: null,
+            id: 4,
+            displayName() { return 'Some random dude' }
+        },
+        role: 'CREATOR',
+      }
+    }
+  }
+}
+</script>
+```
+</docs>
+
 <template>
   <article class="box">
     <div class="title-wrapper">
@@ -79,6 +131,13 @@ import { ICurrentUser } from '@/types/current-user.model';
 import { IEventCardOptions } from './EventCard.vue';
 const lineClamp = require('line-clamp');
 
+const defaultOptions: IEventCardOptions = {
+  hideDate: true,
+  loggedPerson: false,
+  hideDetails: false,
+  organizerActor: null,
+};
+
 @Component({
   components: {
     DateCalendarIcon,
@@ -93,8 +152,14 @@ const lineClamp = require('line-clamp');
   },
 })
 export default class EventListCard extends mixins(ActorMixin, EventMixin) {
+  /**
+   * The participation associated
+   */
   @Prop({ required: true }) participation!: IParticipant;
-  @Prop({ required: false }) options!: IEventCardOptions;
+  /**
+   * Options are merged with default options
+   */
+  @Prop({ required: false, default: () => defaultOptions }) options!: IEventCardOptions;
 
   currentActor!: IPerson;
 
@@ -102,15 +167,8 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
   EventVisibility = EventVisibility;
   RouteName = RouteName;
 
-  defaultOptions: IEventCardOptions = {
-    hideDate: true,
-    loggedPerson: false,
-    hideDetails: false,
-    organizerActor: null,
-  };
-
   get mergedOptions(): IEventCardOptions {
-    return { ...this.defaultOptions, ...this.options };
+    return { ...defaultOptions, ...this.options };
   }
 
   /**

js/src/components/Event/ParticipationButton.vue

@@ -1,3 +1,27 @@
+<docs>
+A button to set your participation
+
+##### If the participant has been confirmed
+```vue
+<ParticipationButton :participation="{ role: 'PARTICIPANT' }" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
+```
+
+##### If the participant has not being approved yet
+```vue
+<ParticipationButton :participation="{ role: 'NOT_APPROVED' }" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
+```
+
+##### If the participant has been rejected
+```vue
+<ParticipationButton :participation="{ role: 'REJECTED' }" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
+```
+
+##### If the participant doesn't exist yet
+```vue
+<ParticipationButton :participation="null" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
+```
+</docs>
+
 <template>
     <div class="participation-button">
         <b-dropdown aria-role="list" position="is-bottom-left" v-if="participation && participation.role === ParticipantRole.PARTICIPANT">

js/src/components/Event/TagInput.vue

@@ -1,3 +1,29 @@
+<docs>
+### Tag input
+A special input to manage event tags
+
+```vue
+<tag-input :value="[{ title: 'toto' }]" path="title" />
+```
+
+```vue
+<template>
+  <tag-input v-model="tags" :data="sourceTags" path="title" />
+</template>
+<script>
+export default {
+  data() {
+    return {
+      sourceTags: [{ title: 'my tag'}, { title: 'my second tag' }, { title: 'another example'}],
+      tags: []
+    }
+  }
+}
+</script>
+```
+
+</docs>
+
 <template>
     <b-field :label="$t('Enter some tags')">
         <b-taginput