From a736965e91ea2bc76974496f3f05dad3242da686 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Sat, 5 Oct 2019 21:17:18 +0200 Subject: [PATCH] Add basic styleguide Signed-off-by: Thomas Citharel --- .gitlab-ci.yml | 147 +- js/.gitignore | 2 + js/config/global.requires.js | 19 + js/config/styleguide.root.js | 18 + js/docs/components.md | 0 js/docs/directives.md | 1 + js/docs/index.md | 3 + js/package.json | 3 + js/src/components/Account/ActorLink.vue | 57 +- js/src/components/Account/Identities.vue | 48 +- js/src/components/Account/ParticipantCard.vue | 19 +- js/src/components/Event/DateCalendarIcon.vue | 16 + js/src/components/Event/DateTimePicker.vue | 40 +- js/src/components/Event/EventCard.vue | 28 + js/src/components/Event/EventFullDate.vue | 19 + js/src/components/Event/EventListCard.vue | 76 +- .../components/Event/ParticipationButton.vue | 24 + js/src/components/Event/TagInput.vue | 26 + js/src/components/Report/ReportCard.vue | 5 + js/src/mixins/event.ts | 5 + js/styleguide.config.js | 45 + js/yarn.lock | 2078 +++++++++++++++-- 22 files changed, 2321 insertions(+), 358 deletions(-) create mode 100644 js/config/global.requires.js create mode 100644 js/config/styleguide.root.js create mode 100644 js/docs/components.md create mode 100644 js/docs/directives.md create mode 100644 js/docs/index.md create mode 100644 js/styleguide.config.js diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index ab9fcdfd6..abeea8dcd 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -1,10 +1,8 @@ image: tcitworld/mobilizon-ci stages: - - deps - - front - - back - - e2e + - check + - test - deploy variables: @@ -22,117 +20,37 @@ variables: GEOLITE_CITIES_PATH: "/usr/share/GeoIP/GeoLite2-City.mmdb" MOBILIZON_INSTANCE_REGISTRATIONS_OPEN: "true" -setup_elixir_deps: - stage: deps +lint: + stage: check script: - mix deps.get - - mix compile - cache: - paths: - - deps - - _build - -setup_js_deps: - stage: deps - before_script: - - cd js - script: - - yarn install - after_script: - - cd ../ - cache: - paths: - - js/node_modules - -js: - stage: front - before_script: - - cd js - - yarn install - script: - - yarn run build - after_script: - - cd ../ - cache: - paths: - - js/node_modules - artifacts: - paths: - - priv/static - untracked: false - expire_in: 30 days - - -js_deps: - stage: front - before_script: - - cd js - - yarn install - script: - - yarn outdated - after_script: - - cd ../ - cache: - paths: - - js/node_modules - allow_failure: true - -js_check: - stage: front - before_script: - - cd js - - yarn install - script: - - yarn run lint - after_script: - - cd ../ - cache: - paths: - - js/node_modules - -elixir_check: - stage: back - before_script: - - mix deps.get - script: - mix credo list - mix format --check-formatted --dry-run + - cd js + - yarn install + - yarn run lint cache: paths: - deps + - js/node_modules -elixir_deps: - stage: back - before_script: - - mix deps.get +deps: + stage: check script: + - mix deps.get - mix hex.outdated + - cd js + - yarn outdated allow_failure: true cache: paths: - deps + - js/node_modules -pages: - stage: deploy - before_script: - - mix deps.get - script: - - mix docs - - mv doc public - cache: - paths: - - deps - only: - - master - artifacts: - expire_in: 1 hour - paths: - - public - -mix: - stage: back +exunit: + stage: test services: - - name: mdillon/postgis:10 + - name: mdillon/postgis:11 alias: postgres dependencies: - js @@ -147,10 +65,10 @@ mix: - deps - _build -e2e: - stage: e2e +cypress: + stage: test services: - - name: mdillon/postgis:10 + - name: mdillon/postgis:11 alias: postgres script: - mix deps.get @@ -168,4 +86,27 @@ e2e: expire_in: 2 day paths: - js/tests/e2e/screenshots/**/*.png - - js/tests/e2e/videos/**/*.mp4 \ No newline at end of file + - js/tests/e2e/videos/**/*.mp4 + + +pages: + stage: deploy + script: + - mkdir public + - mix deps.get + - mix docs + - mv doc public/backend + - cd js + - yarn install + - yarn run styleguide:build + - mv styleguide ../public/frontend + cache: + paths: + - deps + - js/node_modules + only: + - master + artifacts: + expire_in: 1 hour + paths: + - public \ No newline at end of file diff --git a/js/.gitignore b/js/.gitignore index 40fba83f0..10ca88b8c 100644 --- a/js/.gitignore +++ b/js/.gitignore @@ -7,6 +7,8 @@ node_modules /tests/e2e/videos/ selenium-debug.log +styleguide/ + # local env files .env.local .env.*.local diff --git a/js/config/global.requires.js b/js/config/global.requires.js new file mode 100644 index 000000000..78d2d03d1 --- /dev/null +++ b/js/config/global.requires.js @@ -0,0 +1,19 @@ +import Vue from 'vue'; +import VueI18n from 'vue-i18n'; +import Buefy from 'buefy'; +import 'bulma/css/bulma.min.css'; +import 'buefy/dist/buefy.min.css'; +import filters from '@/filters'; + +Vue.use(VueI18n); +Vue.use(Buefy); +Vue.use(filters); + +Vue.component('router-link', { + props: { + tag: { type: String, default: 'a' } + }, + render(createElement) { + return createElement(this.tag, {}, this.$slots.default) + } +}); diff --git a/js/config/styleguide.root.js b/js/config/styleguide.root.js new file mode 100644 index 000000000..c7d1f17c4 --- /dev/null +++ b/js/config/styleguide.root.js @@ -0,0 +1,18 @@ +import VueI18n from 'vue-i18n' +import messages from '@/i18n/index'; + +const language = (window.navigator).userLanguage || window.navigator.language; +const i18n = new VueI18n({ + locale: language.replace('-', '_'), // set locale + messages, // set locale messages + }); + + export default previewComponent => { + // https://vuejs.org/v2/guide/render-function.html + return { + i18n, + render(createElement) { + return createElement(previewComponent) + } + } + } \ No newline at end of file diff --git a/js/docs/components.md b/js/docs/components.md new file mode 100644 index 000000000..e69de29bb diff --git a/js/docs/directives.md b/js/docs/directives.md new file mode 100644 index 000000000..d4b74e360 --- /dev/null +++ b/js/docs/directives.md @@ -0,0 +1 @@ +No directives right now. \ No newline at end of file diff --git a/js/docs/index.md b/js/docs/index.md new file mode 100644 index 000000000..b9e7ea8ef --- /dev/null +++ b/js/docs/index.md @@ -0,0 +1,3 @@ +# Introduction + +This page presents the various Vue.js components used in the front-end for Mobilizon. \ No newline at end of file diff --git a/js/package.json b/js/package.json index f34498b43..df3fb72ff 100644 --- a/js/package.json +++ b/js/package.json @@ -9,6 +9,8 @@ "lint": "vue-cli-service lint", "analyze-bundle": "yarn run build -- --report-json && webpack-bundle-analyzer ../priv/static/report.json", "dev": "vue-cli-service build --watch", + "styleguide": "vue-cli-service styleguidist", + "styleguide:build": "vue-cli-service styleguidist:build", "vue-i18n-extract": "vue-i18n-extract" }, "dependencies": { @@ -61,6 +63,7 @@ "tslint": "^5.20.0", "tslint-config-airbnb": "^5.11.2", "typescript": "^3.6.3", + "vue-cli-plugin-styleguidist": "^3.24.2", "vue-cli-plugin-webpack-bundle-analyzer": "^1.3.0", "vue-i18n-extract": "^1.0.2", "vue-svg-inline-loader": "^1.3.0", diff --git a/js/src/components/Account/ActorLink.vue b/js/src/components/Account/ActorLink.vue index 9d39e6926..7769cf3cb 100644 --- a/js/src/components/Account/ActorLink.vue +++ b/js/src/components/Account/ActorLink.vue @@ -1,11 +1,63 @@ + +A simple link to an actor, local or remote link + +```vue + + +``` + +```vue + + +``` + + + - - + + \ No newline at end of file diff --git a/js/src/components/Account/ParticipantCard.vue b/js/src/components/Account/ParticipantCard.vue index 0a56b9420..e333d41b0 100644 --- a/js/src/components/Account/ParticipantCard.vue +++ b/js/src/components/Account/ParticipantCard.vue @@ -1,3 +1,20 @@ + +```vue + +``` + +```vue + +``` + +```vue + +``` + +```vue + +``` +