Merge branch 'wvffle/vui' into 'main'

Implement all components Closes #1 See merge request funkwhale/vui!1

Merge branch 'wvffle/vui' into 'main'
Implement all components Closes #1 See merge request funkwhale/vui!1
3b29686f · Ciarán Ainsworth · af9203eb · a9eac5cf · af9203eb · 3b29686f
Commit 3b29686f authored 2 years ago by Ciarán Ainsworth
--- a/.browserslistrc
+++ b/.browserslistrc
-> 1%
-last 2 versions
-not dead
--- a/.editorconfig
+++ b/.editorconfig
+# http://editorconfig.org
+root = true
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+[*.{html,js,vue,css,scss,json,yml,ts,md}]
+indent_style = space
+indent_size = 2
+[*.md]
+trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 node_modules
 /dist
 /coverage
+junit.xml
 # local env files
 .env.local
@@ -22,5 +23,6 @@ pnpm-debug.log*
 *.sln
 *.sw?
 # vitepress
 public
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
+include:
+  - project: 'funkwhale/gitlab-ci-templates'
+    file: '/static_pages/jobs.yaml'
 stages:
  - build
  - test
@@ -5,14 +9,14 @@ stages:
 default:
  image: node:16-slim
-  before_script: 
+  before_script:
    - yarn install
 build:
  stage: build
  script: yarn build
-pages:
+docs:
  stage: build
  script: yarn docs:build
  artifacts:
@@ -28,6 +32,14 @@ test:
        coverage_format: cobertura
        path: coverage/cobertura-coverage.xml
+deploy:
+  extends: .ssh_access
+  dependencies:
+    - docs
+  script:
+    - rsync -r -e "ssh -p 2281" $CI_PROJECT_DIR/public/ ui@ui.funkwhale.audio:/htdocs/
+  only:
+    - main@funkwhale/vui
 publish:
  stage: deploy

--- a/.gitpod.yml
+++ b/.gitpod.yml
+tasks:
+  - name: Docs
+    init: yarn install
+    command: yarn docs:dev
+vscode:
+  extensions:
+    - ZixuanChen.vitest-explorer
+    - lukashass.volar
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
+import { defineConfig } from 'vitepress'
+export default defineConfig({
+	title: "Funkwhale Vue Components",
+	outDir: "../public",
+  cleanUrls: 'with-subfolders',
+	themeConfig: {
+		nav: [
+			{ text: "Home", link: "https://funkwhale.audio" },
+			{ text: "Gitlab", link: "https://dev.funkwhale.audio/funkwhale/vui" }
+		],
+		sidebar: [
+			{
+        text: "Components",
+        items: [
+			    { text: "Pill", link: "/components/pill/" },
+			    { text: "Loader", link: "/components/loader/" },
+			    { text: "Activity", link: "/components/activity/" },
+			    { text: "Card", items: [
+            { text: "Basic Card", link: "/components/card/basic" },
+            { text: "Radio Card", link: "/components/card/radio" },
+            { text: "Artist Card", link: "/components/card/artist" },
+            { text: "Album Card", link: "/components/card/album" },
+            { text: "Playlist Card", link: "/components/card/playlist" },
+            { text: "Podcast Card", link: "/components/card/podcast" },
+          ] },
+			    { text: "Form", items: [
+            { text: "Input", link: "/components/input/" },
+            { text: "Textarea", link: "/components/textarea/" },
+            { text: "Toggle", link: "/components/toggle/" },
+            { text: "Popover", link: "/components/popover/" },
+            { text: "Button", items: [
+              { text: "Basic Button", link: "/components/button/basic" },
+              { text: "Play Button", link: "/components/button/play" },
+            ] },
+          ] },
+			    { text: "Content Navigation", items: [
+            { text: "Table of Contents", link: "/components/toc/" },
+            { text: "Pagination", link: "/components/pagination/" },
+            { text: "Tabs", link: "/components/tabs/" },
+          ] },
+        ]
+      }
+		]
+	}
+})
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
+import { createI18n } from 'vue-i18n'
+import DefaultTheme from 'vitepress/theme'
+import en from '~/locales/en.yaml'
+import Funkwhale from '~/main'
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }) {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      fallbackLocale: 'en',
+      messages: { en }
+    })
+    app.use(Funkwhale)
+    app.use(i18n)
+  }
+}
--- a/docs/components/activity/index.md
+++ b/docs/components/activity/index.md
+<script setup lang="ts">
+const track = {
+  name: 'Some lovely track',
+  artist: {
+    name: 'Artist'
+  },
+  cover: {
+    urls: {
+      original: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
+    }
+  }
+}
+const user = {
+  username: 'username'
+}
+</script>
+# Activity
+```html
+<fw-activity :track="track" :user="user" />
+```
+<fw-activity :track="track" :user="user" />
+::: info
+Whenever there is more than 1 activity entry in a row, there would be a 1px border to separate the entries
+:::
+```html
+<fw-activity :track="track" :user="user" v-for="i in 3" :key="i" />
+```
+<fw-activity :track="track" :user="user" v-for="i in 3" :key="i" />
--- a/docs/components/button/basic.md
+++ b/docs/components/button/basic.md
+<script setup>
+const click = () => new Promise(resolve => setTimeout(resolve, 1000))
+</script>
+# Button
+## Button colors
+### Primary button
+```html
+<fw-button>
+  Primary button
+</fw-button>
+```
+<fw-button>
+  Primary button
+</fw-button>
+### Secondary button
+```html
+<fw-button secondary>
+  Secondary button
+</fw-button>
+```
+<fw-button secondary>
+  Secondary button
+</fw-button>
+### Destructive button
+```html
+<fw-button destructive>
+  Destructive button
+</fw-button>
+```
+<fw-button destructive>
+  Destructive button
+</fw-button>
+## Button types
+### Filled
+```html
+<fw-button>
+  Filled button
+</fw-button>
+```
+<fw-button>
+  Filled button
+</fw-button>
+### Outline
+```html
+<fw-button outline>
+  Outline button
+</fw-button>
+```
+<fw-button outline>
+  Outline button
+</fw-button>
+## Button shapes
+### Normal
+```html
+<fw-button>
+  Normal button
+</fw-button>
+```
+<fw-button>
+  Normal button
+</fw-button>
+### Round
+```html
+<fw-button round>
+  Round button
+</fw-button>
+```
+<fw-button round>
+  Round button
+</fw-button>
+## Button states
+### Disabled
+```html
+<fw-button disabled>
+  Disabled button
+</fw-button>
+```
+<fw-button disabled>
+  Disabled button
+</fw-button>
+### Active
+```html
+<fw-button is-active>
+  Active button
+</fw-button>
+```
+<fw-button is-active>
+  Active button
+</fw-button>
+### Loading
+```html
+<fw-button is-loading>
+  Loading button
+</fw-button>
+```
+<fw-button is-loading>
+  Loading button
+</fw-button>
+&nbsp;
+#### Promise handling in @click
+When a function passed to `@click` returns a promise, the button will automatically toggle it's loading state on click, and when promise resolves/rejects, it will toggle it off.
+::: danger
+The `<fw-button>` component does not have any promise rejection mechanism implemented. Make sure, that the `@click` handler never rejects.
+:::
+```vue
+<script setup lang="ts">
+const click = () => new Promise(resolve => setTimeout(resolve, 1000))
+</script>
+<template>
+  <fw-button @click="click">
+    Click me
+  </fw-button>
+</template>
+```
+<fw-button @click="click">
+  Click me
+</fw-button>
+## Icons
+You can use [Bootstrap Icons](https://icons.getbootstrap.com/) in your button component
+::: info
+When the button doesn't have any contents or it's contents are empty, it will shrink down to the icon size.
+To avoid this, you can add `&nbsp;`.
+:::
+```html
+<fw-button secondary icon="bi-three-dots-vertical" />
+<fw-button secondary is-round icon="bi-x" />
+<fw-button icon="bi-save">&nbsp;</fw-button>
+<fw-button destructive icon="bi-trash">
+  Delete
+</fw-button>
+```
+<fw-button secondary icon="bi-three-dots-vertical" />
+<fw-button secondary round icon="bi-x" />
+<fw-button icon="bi-save">&nbsp;</fw-button>
+<fw-button destructive icon="bi-trash">
+  Delete
+</fw-button>
--- a/docs/components/button/play.md
+++ b/docs/components/button/play.md
+# Play Button
+```html
+<fw-play-button @play="play" />
+```
+<fw-play-button />
--- a/docs/components/card/album.md
+++ b/docs/components/card/album.md
+<script setup lang="ts">
+const album = {
+  name: 'Relatively Long Album Name',
+  artist: {
+    name: 'Artist Name'
+  },
+  tracks: [{}, {}, {}, {}],
+  cover: {
+    urls: {
+      original: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
+    }
+  }
+}
+</script>
+# Album card
+## Normal card
+```html
+<fw-album-card :album="album" />
+```
+<fw-album-card :album="album" />
--- a/docs/components/card/artist.md
+++ b/docs/components/card/artist.md
+<script setup lang="ts">
+const artist = {
+  name: 'Artist Name',
+  tags: ['Electro'],
+  albums: [{}, {}, {}, {}],
+  cover: {
+    urls: {
+      original: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
+    }
+  }
+}
+</script>
+# Artist card
+## Normal card
+```html
+<fw-artist-card :artist="artist" />
+```
+<fw-artist-card :artist="artist" />
--- a/docs/components/card/basic.md
+++ b/docs/components/card/basic.md
+<script setup lang="ts">
+const alert = (message: string) => window.alert(message)
+</script>
+# Card
+## Basic card
+```html
+<fw-card title="For music lovers">
+  Access your personnal music collection from anywhere. Beeing focused on the promotion of Free licensed content, Funkwhale sports advanced sharing features.
+</fw-card>
+```
+<fw-card title="For music lovers">
+  Access your personnal music collection from anywhere. Beeing focused on the promotion of Free licensed content, Funkwhale sports advanced sharing features.
+</fw-card>
+## Interactive card
+```html
+<fw-card 
+  title="Frequently Asked Questions" 
+  @click="alert('hello')"
+>
+  You have a question about Funkwhale? Get a quick answer!
+</fw-card>
+```
+<fw-card 
+  title="Frequently Asked Questions" 
+  @click="alert('hello')"
+>
+  You have a question about Funkwhale? Get a quick answer!
+</fw-card>
+## Category card
+```html
+<fw-card 
+  category 
+  title="Example Translations" 
+  @click="alert('hello')"
+/>
+```
+<fw-card 
+  category 
+  title="Example Translations" 
+  @click="alert('hello')"
+/>
+## Card with an image
+```html
+<fw-card 
+  title="For music lovers"
+  image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
+>
+  Access your personnal music collection from anywhere. Beeing focused on the promotion of Free licensed content, Funkwhale sports advanced sharing features.
+</fw-card>
+```
+<fw-card 
+  title="For music lovers"
+  image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
+>
+  Access your personnal music collection from anywhere. Beeing focused on the promotion of Free licensed content, Funkwhale sports advanced sharing features.
+</fw-card>
+## Card with a button
+```html
+<fw-card 
+  title="Join an existing pod"
+  button-title="Find a pod"
+  @click="alert('hello')"
+>
+  The easiest way to start using Funkwhale is to register an account on one of the many available pods.
+</fw-card>
+```
+<fw-card 
+  title="Join an existing pod"
+  button-title="Find a pod"
+  @click="alert('hello')"
+>
+  The easiest way to start using Funkwhale is to register an account on one of the many available pods.
+</fw-card>
--- a/docs/components/card/playlist.md
+++ b/docs/components/card/playlist.md
+<script setup lang="ts">
+const playlist = {
+  name: 'Incredible Playlist',
+  user: {
+    full_username: '@username:example.com',
+    username: 'username'
+  },
+  tracks_count: 27,
+  album_covers: [
+    'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
+    'https://unsplash.com/photos/SVGan4GCopM/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTV8fG11c2ljaWFufGVufDB8Mnx8fDE2NjI5NzQwNjI&force=true&w=640',
+    'https://unsplash.com/photos/P4gXe-RsEXI/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8Nnx8cGVyZm9ybWVyfGVufDB8Mnx8fDE2NjMwMTM3OTE&force=true&w=640'
+  ]
+}
+</script>
+# Playlist card
+## Normal card
+```html
+<fw-playlist-card :playlist="playlist" />
+```
+<div style="display: grid; grid-template-columns: auto auto 1fr; grid-gap: 2rem;">
+<fw-playlist-card :playlist="playlist" />
+<fw-playlist-card :playlist="{ ...playlist, album_covers: [] }" />
+</div>
--- a/docs/components/card/podcast.md
+++ b/docs/components/card/podcast.md
+<script setup lang="ts">
+const podcast = {
+  name: 'Podcast title',
+  tracks_count: 8,
+  artist: {
+    name: 'Podcast owner',
+    modification_date: '2022-09-11',
+    cover: {
+      urls: {
+        original: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
+      }
+    }
+  },
+}
+</script>
+# Podcast card
+## Normal card
+```html
+<fw-podcast-card :podcast="podcast" />
+```
+<fw-podcast-card :podcast="podcast" />
--- a/docs/components/card/radio.md
+++ b/docs/components/card/radio.md
+<script setup lang="ts">
+const radio = {
+  name: 'Less Listened',
+  description: 'First artist, Second Artist, One Other Artist, Yet Another One'
+}
+</script>
+# Radio card
+## Card colors
+### Blue
+This is the default color
+```html
+<fw-radio-card blue :radio="radio" />
+```
+<fw-radio-card blue :radio="radio" />
+### Red
+```html
+<fw-radio-card red :radio="radio" />
+```
+<fw-radio-card red :radio="radio" />
+### Purple
+```html
+<fw-radio-card purple :radio="radio" />
+```
+<fw-radio-card purple :radio="radio" />
+### Green
+```html
+<fw-radio-card green :radio="radio" />
+```
+<fw-radio-card green :radio="radio" />
+### Yellow
+```html
+<fw-radio-card yellow :radio="radio" />
+```
+<fw-radio-card yellow :radio="radio" />
+## Card sizes
+### Normal card
+```html
+<fw-radio-card :radio="radio" />
+```
+<fw-radio-card :radio="radio" />
+### Small card
+```html
+<fw-radio-card small :radio="radio" />
+```
+<fw-radio-card small :radio="radio" />
--- a/docs/components/input/index.md
+++ b/docs/components/input/index.md
+# Input
+## Input model
+```html
+<fw-input v-model="value" placeholder="Search" />
+```
+<fw-input placeholder="Search" />
+## Input icons
+You can use bootstrap icons
+```html
+<fw-input v-model="value" icon="bi-search" placeholder="Search" />
+```
+<fw-input icon="bi-search" placeholder="Search" />
+## Input-right slot
+```html
+<fw-input v-model="value" placeholder="Search">
+  <template #input-right>
+    suffix
+  </template>
+</fw-input>
+```
+<fw-input placeholder="Search">
+  <template #input-right>
+    suffix
+  </template>
+</fw-input>
--- a/docs/components/loader/index.md
+++ b/docs/components/loader/index.md
+<style>
+.docs-loader-container div[style^=width] {
+  border: 1px solid #666;
+  height: 2em;
+}
+</style>
+# Loader
+```html
+<div style="width: 50%">
+  <fw-loader />
+</div>
+```
+<div class="docs-loader-container">
+  <div style="width: 50%">
+    <fw-loader />
+  </div>
+</div>
+## No container
+By default the `<fw-loader />` component creates a container that is 100% height of component's parent. Sometimes we do not want such behavior. In those cases we can disable this using `:container="false"` property. The loader will then be centered in the middle of the first parent that has `position: relative` set.
+```html
+<div style="position: relative">
+  <div style="width: 50%">
+    <fw-loader :container="false" />
+  </div>
+</div>
+```
+<div class="docs-loader-container">
+  <div style="position: relative">
+    <div style="width: 50%">
+      <fw-loader :container="false" />
+    </div>
+  </div>
+</div>
--- a/docs/components/pagination/index.md
+++ b/docs/components/pagination/index.md
+<script setup lang="ts">
+import { ref } from 'vue'
+const page = ref(1)
+</script>
+# Pagination
+## Pagination model
+```html
+<fw-pagination :pages="8" v-model:page="page" />
+```
+<fw-pagination :pages="8" v-model:page="page" />
--- a/docs/components/pill/index.md
+++ b/docs/components/pill/index.md
+# Pill
+## Pill colors
+### Primary pill
+```html
+<fw-pill primary>
+  Primary pill
+</fw-pill>
+```
+<fw-pill primary>
+  Primary pill
+</fw-pill>
+### Secondary pill
+This is the default pill color
+```html
+<fw-pill>
+  Secondary pill
+</fw-pill>
+```
+<fw-pill>
+  Secondary pill
+</fw-pill>
+### Destructive pill
+```html
+<fw-pill destructive>
+  Destructive pill
+</fw-pill>
+```
+<fw-pill destructive>
+  Destructive pill
+</fw-pill>
+### Blue
+```html
+<fw-pill blue>
+  Blue pill
+</fw-pill>
+```
+<fw-pill blue>
+  Blue pill
+</fw-pill>
+### Red
+```html
+<fw-pill red>
+  Red pill
+</fw-pill>
+```
+<fw-pill red>
+  Red pill
+</fw-pill>
+### Purple
+```html
+<fw-pill purple>
+  Purple pill
+</fw-pill>
+```
+<fw-pill purple>
+  Purple pill
+</fw-pill>
+### Green
+```html
+<fw-pill green>
+  Green pill
+</fw-pill>
+```
+<fw-pill green>
+  Green pill
+</fw-pill>
+### Yellow
+```html
+<fw-pill yellow>
+  Yellow pill
+</fw-pill>
+```
+<fw-pill yellow>
+  Yellow pill
+</fw-pill>
+## Images
+```html
+<fw-pill>
+  <template #image>
+    <img src="/images/awesome-artist.png" />
+  </template>
+  Awesome artist
+</fw-pill>
+```
+<fw-pill>
+  <template #image>
+    <div style="background-color: #0004" />
+  </template>
+  Awesome artist
+</fw-pill>