Refactor the codebase

.eslintrc.js

@@ -4,11 +4,8 @@ module.exports = {
     browser: true,
     node: true
   },
-  parserOptions: {
-    parser: 'babel-eslint'
-  },
   extends: [
-    '@nuxtjs',
+    '@nuxtjs/eslint-config-typescript',
     'prettier',
     'prettier/vue',
     'plugin:prettier/recommended',
@@ -19,6 +16,8 @@ module.exports = {
   ],
   // add your custom rules here
   rules: {
-    "no-console": 0
+    'no-console': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    'camelcase': 'warn'
   }
 }

CONTRIBUTING.adoc

@@ -25,6 +25,10 @@ Additionally, prefix component names with the following:
 | UI Component that are made for user data input
 |===
 
+### No outer margins on components
+
+Components should not include any king of spacing on the component's root element: components and pages that includes a component should be responsible for its spacing relative to the other elements included.
+
 ### Inheritance
 
 [%header, cols=2*]
@@ -81,24 +85,23 @@ For each mutation, when the API request fails, handle the error by showing the u
 
 Each mutation should return...
 
-When the action succeeded :: 
-  `[true, object, null]` with `object` the value returned by the matching mutation, or the inner action's `object` return value.
+When the action succeededs :: 
+  `{ data: object, error: null]` with `object` the value returned by the matching mutation, or the inner action's `object` return value.
 
 When the action fails because of a validation error :: 
-  `[false, validation, 'validation']` with `validation` the value returned by the `validate` getter, or by the inner action's `validation` return value
+  `{ data: validation, error: 'validation'}` with `validation` the value returned by the `validate` getter, or by the inner action's `validation` return value
 
 When the action fails because of a network error ::
-  `[false, error, 'network']` with `error` the error object from the `try`/`catch` block.
+  `{ data: error, error: 'network'}` with `error` the error object from the `try`/`catch` block.
 
-More generally, the return value is an array with:
+More generally, the return value is an object with:
 
-1. whether the action succeeded or not
-2. the object/array that results from the underlying mutation
-3. the failure level, if any. If it succeeded, this is `null`.
+1. the object/array that results from the underlying mutation
+2. the failure level, if any. If it succeeded, this is `null`.
 
 Include the following actions: 
 
-load({ force: false, verbose: true }) ::
+load({ force: false, verbose: false }) ::
   - If `loaded` is false or `force` is true
   ** Do a `GET` request
   ** Use the `SET` mutation to store the response in the store
@@ -163,32 +166,10 @@ order(objects, { by: '_your_default_sorting_method_' }) ::
 ## Code clarity guidelines
 ### In vue files' <template>
 
-Language :: pug
+Language :: html
 Indentation :: 2 spaces
-
-#### Attribute shorthands order
-
-_In single-line component uses_:
-Put the class shorthand .class _after_ an attribute list and the #id shortand _before_:
-
-```pug
-ComponentName#id(attr="value").class.class2
-```
-
-_In multiline uses (eg. the attributes list is split on multiple lines)_:
-Put all of the shorthands _before_ the attribute list
-
-```pug
-component#id.class.class2(
-  :is="componentName"
-  :style="styles"
-  :class="{clickable, multiline, thin, inline}"
-  :data-variant="variant"
-  type="button"
-  @click="$emit('click')"
-  v-tooltip="tooltipContent"
-)
-```
+write component tag names in :: kebab-case
+Class for root element of every component :: .--<component-kebab-case>; eg. for <BaseCard> root element has class=--base-card
 
 #### Attribute list order
 
@@ -235,10 +216,10 @@ For object literals, don't add spaces around the braces (but do it in JS code)
 For multi-values attributes (eg. `style` or `class`), prefer an object literal of computed values instead of a single computed value returning the entire object:
 
 .`<template>`
-```pug
-component(
+```html
+<component
   :style="{backgroundColor, color: subjectNameColor}"
-)
+>
 ```
 
 .`<script>`
@@ -256,8 +237,8 @@ computed: {
 Instead of:
 
 .`<template>`
-```pug
-component(:style="styles")
+```html
+<component :style="styles">
 ```
 
 .`<script>`
@@ -277,8 +258,8 @@ computed: {
 In conditonnal directives, the value can be one of the above, or a logical-operator-separated list of variables, but there must be at most two operators.
 
 .Example
-```pug
-template(v-if="loggedIn || passwordForgotten")
+```html
+<template v-if="loggedIn || passwordForgotten">
 ```
 
 If the exact same condition is reused, make a computed property instead.
@@ -288,18 +269,19 @@ If the exact same condition is reused, make a computed property instead.
 If the element contains more than two attributes:
 
 .Bad example
-```pug
-template(v-if="thing" my-stuff :thingie="foo" bar="baz" quux)
+```html
+<template v-if="thing" my-stuff :thingie="foo" bar="baz" quux>
 ```
 
 .Good example
-```pug
-template(
+```html
+<template
   v-if="thing"
   :thingie="foo"
   bar="baz"
-  my-stuff quux
-)
+  my-stuff
+  quux
+>
 ```
 
 ### In vue _component_ file's <script>
@@ -363,7 +345,7 @@ Separate your styles into sections using the following comment decorations (incl
 
 ```
 
-Include the following sections (even if empty, except for Hack), in order:
+Include the following sections, in order:
 
 . Definitions +
   _Includes stylus variables & functions as well as CSS variables_

ORGANIZING_COMPONENTS.md

@@ -2,18 +2,16 @@
 
 Components should be stateless: this makes them easier to debug & test. Appart from utility getters defined in `store/index.js`, no component should import state/getters/actions or mutations (mutations shouldn't be called anywhere except inside actions, by the way.)
 
-Only the pages/layouts are responsible for state CRUD operations. Data should be passed by props to components via `v-bind`, or `v-model` when using inputs, 
-
-
+Only the pages/layouts are responsible for state CRUD operations. Data should be passed by props to components via `v-bind`, or `v-model` when using inputs,
 
 ## Legend
 
 | What            | it means                                   |
 | --------------- | ------------------------------------------ |
 | *(Italic text)* | Notes                                      |
 | _Subcomponent_  | Component implemented as a "variant" prop. |
-| 🚧 Component    | To-Do component                            |
-| 🗃 Component    | Stateful components.                       |
+| 🚧 Component     | To-Do component                            |
+| 🗃 Component     | Stateful components.                       |
 | ▶ Component     | Components that takes inputs               |
 
 ## The tree
@@ -37,13 +35,9 @@ Only the pages/layouts are responsible for state CRUD operations. Data should be
 - ▶ Inputs
 
   - Text input
-
     - passwords
-
     - date
-
-      - due date (smart)
-
+    - due date (smart)
     - plain text
 
       - *block variant (textarea)*
@@ -68,7 +62,7 @@ Only the pages/layouts are responsible for state CRUD operations. Data should be
 
 - Links
 
-  - inline link
+  - _inline link_
 
 - State screens
 
@@ -130,24 +124,22 @@ Only the pages/layouts are responsible for state CRUD operations. Data should be
 
     - mutation
 
-  - ▶ Pickers
+  - ▶ Pickers _"Modal" not in component names for brevity_
 
     - 🗃 subject _(Only use when using the dropdown is not possible)_
 
     - color
 
-  - dialogs
+  - dialogs _"Modal" not in component names for brevity_
 
     - confirm (w/ challenge)
 
   - context menu
 
-- Subject
-
-  - Badge
-
-  - Dot
-
+- Badges
+  - Subject
+    - _dot_
+    - _badge_
 - Schedule
 
 - Unique components (prefixed with "The") _(This is not a base component)_

assets/defaults.sass

@@ -37,8 +37,8 @@ body
     // Greys
     --black: #111111
     --white: #ffffff
-    --grey-light: #c0c0c0
-    --grey: #d4d3d3
+    --grey-light: #d4d3d3
+    --grey: #c0c0c0
     --grey-dark: #757575
     --grey-offset: #F3F3F3
     --grey-offset-dark: #e6e6e6
@@ -52,7 +52,8 @@ body
     --red: #D50000
     --red-light: #ff3519
     --red-dark: #940000
-    --red-offset: #FF9E9E
+    --red-offset: #ffdddd
+    --red-offset-dark: #ffc3c3
     // Greens
     --green: #27CE5F
     --green-light: #86e6b1
@@ -78,7 +79,7 @@ body
         --blue-light: #89c4fe
         --blue-dark: #006BD4
         --blue-offset: #0b123a
-        --blue-offset-dark: #0d143a
+        --blue-offset-dark: #060b2b
         // Reds
         --red: #ee4949
         --red-light: #ff604b
@@ -282,31 +283,6 @@ $bk-sidebar: 650px
             border-bottom-left-radius: 0
             border-bottom-right-radius: 0
 
-
-//=====================
-//        LINKS
-//=====================
-
-p, pre
-    font-family: var(--fonts-normal)
-    a:not([no-default])
-        color: var(--blue)
-        border-bottom: 2px solid var(--blue)
-        &:hover,
-        &:focus,
-        &:active
-            color: var(--blue-dark)
-            border-color: var(--blue-dark)
-
-
-p a[target=_blank]:not([no-external-link-indicator])::after
-  font-family: 'Material Icons'
-  content: '\e89e'
-  font-size: 1.2em
-  margin-left: 0.1em
-  position: relative
-  bottom: -.1em
-
 //=====================
 //    LOADING SCREEN
 //=====================

assets/fonts/Material-Icons/import.css

@@ -17,7 +17,7 @@
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;
+  font-size: 1.5em;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
@@ -33,7 +33,7 @@
   font-family: 'Material Icons Outlined';
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;
+  font-size: 1.5em;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;