diff --git a/.babelrc b/.babelrc index cb456f1ef..fdc09d9fa 100644 --- a/.babelrc +++ b/.babelrc @@ -8,7 +8,7 @@ "test": { "presets": [ [ - "babel-preset-env", + "@babel/preset-env", { "targets": { "node": "current" diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 000000000..214388fe4 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,3 @@ +> 1% +last 2 versions +not dead diff --git a/.storybook/main.js b/.storybook/main.js index fec5b4099..20c5c0879 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,13 +1,16 @@ -const path = require('path'); - module.exports = { stories: ['../src/**/*.stories.@(js|mdx)'], addons: [ - '@storybook/addon-docs', '@storybook/addon-a11y', - '@storybook/addon-storysource', - '@storybook/addon-knobs', - '@storybook/addon-actions', - '@storybook/addon-essentials' + '@storybook/addon-links', + '@storybook/addon-essentials', + { + name: '@storybook/addon-postcss', + options: { + postcssLoaderOptions: { + implementation: require('postcss'), + }, + }, + }, ] } diff --git a/.storybook/preview.js b/.storybook/preview.js index dbea2381c..bba0b9834 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -3,12 +3,10 @@ import { addDecorator, addParameters } from '@storybook/vue' import 'focus-visible' import 'svgxuse' -import { withKnobs } from '@storybook/addon-knobs' - +import '../assets/styles/tailwind.css' // Wrap every story in Alpaca App component import AApp from '../src/atoms/app/App.vue' -addDecorator(withKnobs) addDecorator(() => ({ components: { AApp }, template: ` diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 6f13ac62e..68babb62b 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -2,39 +2,16 @@ const StyleLintPlugin = require('stylelint-webpack-plugin') const path = require('path') module.exports = ({ config }) => { - config.module.rules.push({ - test: /\.scss$/, - use: [ - 'vue-style-loader', - 'css-loader', - 'sass-loader' - ] - }) - - config.module.rules.push({ - test: /\.scss$/, - use: [ - { - loader: 'postcss-loader', - options: { - ident: 'postcss', - syntax: 'postcss-scss', - plugins: [ - require('tailwindcss'), - require('autoprefixer') - ] - } - } - ] - }) config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, exclude: /node_modules/, - loader: 'eslint-loader' + loader: 'eslint-loader', + options: { + emitWarning: true + } }) - config.plugins.push(new StyleLintPlugin({ files: [ 'src/**/*.vue', diff --git a/.stylelintrc b/.stylelintrc index 8be3f9e95..a88a99005 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -4,7 +4,19 @@ "stylelint-config-rational-order" ], "rules": { - "at-rule-no-unknown": null, + "at-rule-no-unknown": [ + true, + { + ignoreAtRules: [ + 'tailwind', + 'apply', + 'variants', + 'responsive', + 'screen', + ] + } + ], + "declaration-block-trailing-semicolon": null, "no-descending-specificity": null, "block-no-empty": null, "color-no-invalid-hex": true, diff --git a/assets/styles/_focus-visible.scss b/assets/styles/_focus-visible.scss deleted file mode 100644 index 1c3ab9aa1..000000000 --- a/assets/styles/_focus-visible.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Global styles to remove focus for mouse events -.js-focus-visible :focus:not([data-focus-visible-added]) { - outline: none; -} - -.js-focus-visible .focus-visible { - @include focus(); -} diff --git a/assets/styles/_globals.scss b/assets/styles/_globals.scss deleted file mode 100644 index 99125fd3e..000000000 --- a/assets/styles/_globals.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import 'variables'; -@import 'mixins/mq'; -@import 'mixins/focus'; -@import 'mixins/visually-hidden'; diff --git a/assets/styles/_reset.scss b/assets/styles/_reset.scss deleted file mode 100644 index cdb845786..000000000 --- a/assets/styles/_reset.scss +++ /dev/null @@ -1,46 +0,0 @@ -*, -*::after, -*::before { - box-sizing: border-box; -} - -*:focus { - outline: 0; -} - -html, -body { - min-width: 320px; - height: 100%; - margin: 0; - color: $font-color-base; - font-weight: $font-weight-base; - font-size: $font-size-base; - font-family: $font-family-base; - line-height: $font-line-height; - scroll-behavior: smooth; -} - -body { - display: flex; - flex-direction: column; -} - -.page-wrapper { - flex: 1 0 auto; -} - -p { - margin: 0; - padding: 0; -} - -dl, -dt, -dd { - margin: 0; -} - -form { - margin: 0; -} diff --git a/assets/styles/_variables.scss b/assets/styles/_variables.scss deleted file mode 100644 index 7c29def75..000000000 --- a/assets/styles/_variables.scss +++ /dev/null @@ -1,140 +0,0 @@ -// Colors -$white : #fff !default; -$black : #000 !default; -$red : #e62325 !default; -$orange : #fab216 !default; -$yellow : #ffd500 !default; -$green : #31e37d !default; -$blue : #0075e4 !default; -$bright-sky-blue : #00b8ff !default; -$teal : #0194ab !default; -$pink : #ff5b77 !default; -$seafoam-blue : #77ccb9 !default; - -// Grayscale colors -$gray-darkest : #1a1b1d !default; -$gray-darker : #393243 !default; -$gray-dark : #6e7577 !default; -$gray : #d8d8d8 !default; -$gray-light : #eaeaea !default; -$gray-lighter : #fbfbfb !default; -$gray-lightest : #f7f7f9 !default; - -// Semantic color scheme -$color-primary : $gray-darkest !default; -$color-secondary : $gray-dark !default; -$color-success : $green !default; -$color-info : $blue !default; -$color-warning : $red !default; -$color-danger : $red !default; -$color-inverse : $gray-dark !default; -$color-focus : $bright-sky-blue !default; - -// Background -$bg-color-base : $white !default; -$bg-color-secondary : $gray-lighter !default; -$bg-color-dark : $gray-darkest !default; - -// Border -$border-color-base : $gray !default; -$border-width-base : 1px !default; -$border-style-base : solid !default; -$border-color-secondary : $gray-dark !default; -$border-width-secondary : 1px !default; -$border-style-secondary : solid !default; -$border-radius : 0 !default; - -$border-base : $border-width-base $border-style-base $border-color-base !default; -$border-secondary : $border-width-secondary $border-style-secondary $border-color-secondary !default; - -// Outline -$outline-base : none !default; - -// Focus -$border-focus : 2px solid $color-focus !default; -$border-focus-dark : 2px solid $color-primary !default; - -// Focus inline -$color-focus-inline : $color-primary !default; -$color-focus-inline-dark : $color-primary !default; -$bg-focus-inline : $color-focus !default; -$bg-focus-inline-dark : $color-primary !default; -$outline-focus-inline : 0 !default; -$text-decoration-focus-inline: underline !default; -$focus-outline-offset : -1px !default; -$focus-input-border : $border-focus-dark; - -// Spacers -$spacer--extra-small : 4px !default; -$spacer : 8px !default; -$spacer--small : 12px !default; -$spacer--medium : 16px !default; -$spacer--semi-medium : 24px !default; -$spacer--large : 32px !default; -$spacer--semi-large : 40px !default; -$spacer--extra-large : 48px !default; - -// Typography -$font-family-sans-serif : 'Work Sans', sans-serif !default; -$font-family-serif : 'Playfair Display', serif !default; -$font-family-monospace : menlo, monaco, consolas, 'Liberation Mono', 'Courier New', monospace !default; - -$font-family-base : $font-family-sans-serif !default; -$font-family-secondary : $font-family-serif !default; - -$font-color-base : $color-primary !default; -$font-weight-normal : 400 !default; -$font-weight-medium : 500 !default; -$font-weight-bold : 700 !default; -$font-weight-base : $font-weight-normal !default; -$font-line-height : 1.6 !default; - -$font-size-super-extra-large : 32px !default; -$font-size-extra-large : 24px !default; -$font-size-large : 18px !default; -$font-size-medium : 16px !default; -$font-size-base : 14px !default; -$font-size-small : 12px !default; -$font-size-extra-small : 10px !default; - -// Z-index -$z-index-lowest : -1 !default; -$z-index-initial : auto !default; -$z-index-low : 1 !default; -$z-index-normal : 10 !default; -$z-index-high : 50 !default; -$z-index-highest : 99 !default; // reserved for modals - check _modal-variables.scss for more - -// Layout -$max-content-width : 1328px !default; - -// Layout - breakpoints -$screen-xs : 320px !default; -$screen-s : 480px !default; -$screen-m : 768px !default; -$screen-l : 1024px !default; -$screen-xl : 1200px !default; -$screen-xxl : 1600px !default; - -// shadow -$shadow : 0 2px 6px 0 rgba(0, 0, 0, 0.1) !default; -$darken-layout-hover : rgba($black, 0.2) !default; - -// animations -$animation-position-top : -300px !default; -$animation-position-right : -300px !default; -$animation-position-left : -300px !default; - -// form elements -$form-elements-radius : 0 !default; -$form-elements-radius--small : 0 !default; -$form-elements-border-color : $border-color-secondary !default; -$form-element-border-width : 1px !default; -$form-element-border-style : solid !default; -$form-elements-border : $form-element-border-width $form-element-border-style $form-elements-border-color !default; -$form-elements-border-focus : 2px solid $color-primary !default; -$form-input-box-shadow-focus : none !default; - -// Transition -$transition-base : all 0.3s ease-in-out !default; -$transition-fade : opacity 0.25s linear !default; diff --git a/assets/styles/mixins/_focus.scss b/assets/styles/mixins/_focus.scss deleted file mode 100644 index 863edfcd4..000000000 --- a/assets/styles/mixins/_focus.scss +++ /dev/null @@ -1,33 +0,0 @@ -@mixin focus($mode: '') { - outline-offset: $focus-outline-offset; - - @if $mode == 'dark' { - outline: $border-focus-dark; - } - - @else { - outline: $border-focus; - } -} - -@mixin focus-inline($mode: '') { - text-decoration: $text-decoration-focus-inline; - outline: $outline-focus-inline; - - @if $mode == 'dark' { - color: $color-focus-inline-dark; - background-color: $bg-focus-inline-dark; - } - - @else { - color: $color-focus-inline; - background-color: $bg-focus-inline; - } -} - -@mixin focus-input() { - outline: $form-elements-border-focus; - outline-offset: -1px; - box-shadow: $form-input-box-shadow-focus; - transition: $transition-base; -} diff --git a/assets/styles/mixins/_mq.scss b/assets/styles/mixins/_mq.scss deleted file mode 100644 index 11964b7c9..000000000 --- a/assets/styles/mixins/_mq.scss +++ /dev/null @@ -1,19 +0,0 @@ -@mixin mq($min-screen: false, $max-screen: false) { - @if ($min-screen and $max-screen) { - @media all and (min-width: $min-screen) and (max-width: $max-screen) { - @content; - } - } - - @else if ($max-screen and not $min-screen) { - @media all and (max-width: $max-screen) { - @content; - } - } - - @else { - @media all and (min-width: $min-screen) { - @content; - } - } -} diff --git a/assets/styles/mixins/_visually-hidden.scss b/assets/styles/mixins/_visually-hidden.scss deleted file mode 100644 index ee7d1ed17..000000000 --- a/assets/styles/mixins/_visually-hidden.scss +++ /dev/null @@ -1,22 +0,0 @@ -@mixin visually-hidden($usePseudo: '') { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - border: 0; - clip: rect(0 0 0 0); - - @if $usePseudo != '' { - &:focus, - &:active { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; - } - } -} diff --git a/src/atoms/app/App.css b/assets/styles/tailwind.css similarity index 100% rename from src/atoms/app/App.css rename to assets/styles/tailwind.css diff --git a/assets/styles/transitions/_fade.scss b/assets/styles/transitions/_fade.scss deleted file mode 100644 index 1a678141c..000000000 --- a/assets/styles/transitions/_fade.scss +++ /dev/null @@ -1,31 +0,0 @@ -@-webkit-keyframes fade-enter { - from { - opacity: 0; - } -} - -@keyframes fade-enter { - from { - opacity: 0; - } -} - -.fade-enter-active { - animation: fade-enter 400ms both ease-in; -} - -@-webkit-keyframes fade-leave { - to { - opacity: 0; - } -} - -@keyframes fade-leave { - to { - opacity: 0; - } -} - -.fade-leave-active { - animation: fade-leave 400ms both ease-out; -} diff --git a/assets/styles/transitions/_slide-down.scss b/assets/styles/transitions/_slide-down.scss deleted file mode 100644 index cfee778d7..000000000 --- a/assets/styles/transitions/_slide-down.scss +++ /dev/null @@ -1,38 +0,0 @@ -$offset: -50px; -$animationDuration: 400ms; - -@-webkit-keyframes slide-down-enter { - from { - transform: translate3d(0, $offset, 0); - opacity: 0; - } -} - -@keyframes slide-down-enter { - from { - transform: translate3d(0, $offset, 0); - opacity: 0; - } -} - -.slide-down-enter-active { - animation: slide-down-enter $animationDuration both cubic-bezier(0.4, 0, 0, 0); -} - -@-webkit-keyframes slide-down-leave { - to { - transform: translate3d(0, $offset, 0); - opacity: 0; - } -} - -@keyframes slide-down-leave { - to { - transform: translate3d(0, $offset, 0); - opacity: 0; - } -} - -.slide-down-leave-active { - animation: slide-down-leave $animationDuration both; -} diff --git a/assets/styles/transitions/_slide-left.scss b/assets/styles/transitions/_slide-left.scss deleted file mode 100644 index 966af28ba..000000000 --- a/assets/styles/transitions/_slide-left.scss +++ /dev/null @@ -1,38 +0,0 @@ -$offset: 150px; -$animationDuration: 400ms; - -@-webkit-keyframes slide-left-enter { - from { - transform: translate3d($offset, 0, 0); - opacity: 0; - } -} - -@keyframes slide-left-enter { - from { - transform: translate3d($offset, 0, 0); - opacity: 0; - } -} - -.slide-left-enter-active { - animation: slide-left-enter $animationDuration both cubic-bezier(0.4, 0, 0, 0); -} - -@-webkit-keyframes slide-left-leave { - to { - transform: translate3d($offset, 0, 0); - opacity: 0; - } -} - -@keyframes slide-left-leave { - to { - transform: translate3d($offset, 0, 0); - opacity: 0; - } -} - -.slide-left-leave-active { - animation: slide-left-leave $animationDuration both; -} diff --git a/assets/styles/transitions/_slide-right.scss b/assets/styles/transitions/_slide-right.scss deleted file mode 100644 index 187646384..000000000 --- a/assets/styles/transitions/_slide-right.scss +++ /dev/null @@ -1,38 +0,0 @@ -$offset: -150px; -$animationDuration: 400ms; - -@-webkit-keyframes slide-right-enter { - from { - transform: translate3d($offset, 0, 0); - opacity: 0; - } -} - -@keyframes slide-right-enter { - from { - transform: translate3d($offset, 0, 0); - opacity: 0; - } -} - -.slide-right-enter-active { - animation: slide-right-enter $animationDuration both cubic-bezier(0.4, 0, 0, 0); -} - -@-webkit-keyframes slide-right-leave { - to { - transform: translate3d($offset, 0, 0); - opacity: 0; - } -} - -@keyframes slide-right-leave { - to { - transform: translate3d($offset, 0, 0); - opacity: 0; - } -} - -.slide-right-leave-active { - animation: slide-right-leave $animationDuration both; -} diff --git a/assets/styles/transitions/_slide-up.scss b/assets/styles/transitions/_slide-up.scss deleted file mode 100644 index cf44f47f5..000000000 --- a/assets/styles/transitions/_slide-up.scss +++ /dev/null @@ -1,38 +0,0 @@ -$offset: 50px; -$animationDuration: 400ms; - -@-webkit-keyframes slide-up-enter { - from { - transform: translate3d(0, $offset, 0); - opacity: 0; - } -} - -@keyframes slide-up-enter { - from { - transform: translate3d(0, $offset, 0); - opacity: 0; - } -} - -.slide-up-enter-active { - animation: slide-up-enter $animationDuration both cubic-bezier(0.4, 0, 0, 0); -} - -@-webkit-keyframes slide-up-leave { - to { - transform: translate3d(0, $offset, 0); - opacity: 0; - } -} - -@keyframes slide-up-leave { - to { - transform: translate3d(0, $offset, 0); - opacity: 0; - } -} - -.slide-up-leave-active { - animation: slide-up-leave $animationDuration both; -} diff --git a/assets/styles/transitions/_slide.scss b/assets/styles/transitions/_slide.scss deleted file mode 100644 index 4b03e40bf..000000000 --- a/assets/styles/transitions/_slide.scss +++ /dev/null @@ -1,40 +0,0 @@ -$animation-time : 300ms; -$animation-delay: 310ms; - -.slide-ltr-enter, -.slide-rtl-enter { - opacity: 0; -} - -.slide-ltr-enter-active, -.slide-rtl-enter-active { - transition: all $animation-time ease-in-out $animation-delay; -} - -.slide-ltr-leave-active, -.slide-rtl-leave-active { - transition: all $animation-time ease-in-out; -} - -.slide-ltr-enter-to, -.slide-ltr-leave, -.slide-rtl-enter-to, -.slide-rtl-leave { - transform: translate(0, 0); -} - -.slide-ltr-enter { - transform: translate(100%, 0); -} - -.slide-ltr-leave-to { - transform: translate(-100%, 0); -} - -.slide-rtl-enter { - transform: translate(-100%, 0); -} - -.slide-rtl-leave-to { - transform: translate(100%, 0); -} diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 000000000..e9558405f --- /dev/null +++ b/babel.config.js @@ -0,0 +1,5 @@ +module.exports = { + presets: [ + '@vue/cli-plugin-babel/preset' + ] +} diff --git a/jest.config.js b/jest.config.js index e101e6463..07452ff48 100644 --- a/jest.config.js +++ b/jest.config.js @@ -14,7 +14,7 @@ module.exports = { testMatch: ['/src/**/?(*.)+(spec|test).(ts|tsx|mjs|js|jsx)'], transform: { '^.+\\.js$': '/node_modules/babel-jest', - '.*\\.(vue)$': '/node_modules/jest-vue-preprocessor' + '.*\\.(vue)$': '/node_modules/vue-jest' }, collectCoverage: true, coverageDirectory: './coverage/', diff --git a/package.json b/package.json index 5ad3fc6ed..389117065 100644 --- a/package.json +++ b/package.json @@ -13,57 +13,37 @@ "codcov": "./node_modules/codcov/bin/codcov" }, "dependencies": { - "@tailwindcss/postcss7-compat": "^2.0.2", - "focus-visible": "^5.0.2", - "normalize.css": "^8.0.1", - "tailwindcss": "npm:@tailwindcss/postcss7-compat", - "vue": "^2.6.11", - "vue-carousel": "^0.18.0-alpha", - "vue-router": "^3.1.3", - "vue-slider-component": "^3.0.40" + "core-js": "^3.15.2", + "focus-visible": "^5.2.0", + "vue": "^2.6.14" }, "devDependencies": { - "@storybook/addon-a11y": "6.1.17", - "@storybook/addon-actions": "6.1.17", - "@storybook/addon-docs": "6.1.17", - "@storybook/addon-essentials": "^6.1.17", - "@storybook/addon-knobs": "6.1.17", - "@storybook/addon-storysource": "6.1.17", - "@storybook/vue": "6.1.17", - "@vue/babel-preset-app": "^3.11.0", - "@vue/test-utils": "^1.0.0-beta.29", - "babel-core": "^6.26.3", - "babel-eslint": "^10.0.3", - "babel-jest": "^24.9.0", - "babel-loader": "^8.0.5", - "babel-plugin-require-context-hook": "^1.0.0", - "babel-preset-env": "^1.7.0", - "babel-preset-vue": "^2.0.2", - "codecov": "^3.5.0", - "css-loader": "^3.2.0", - "eslint": "^6.4.0", - "eslint-config-standard": "^14.1.0", - "eslint-loader": "3.0.2", - "eslint-plugin-import": "^2.18.2", - "eslint-plugin-node": "^10.0.0", - "eslint-plugin-promise": "^4.2.1", - "eslint-plugin-standard": "^4.0.1", - "eslint-plugin-vue": "^7.7.0", - "fs-extra": "^8.1.0", - "glob": "^7.1.4", - "jest": "^24.9.0", - "jest-vue-preprocessor": "^1.5.0", - "storybook-addon-vue-info": "1.4.2", - "storybook-vue-router": "^1.0.7", - "stylelint": "^11.0.0", + "@storybook/addon-a11y": "^6.3.6", + "@storybook/addon-essentials": "^6.3.6", + "@storybook/addon-links": "^6.3.6", + "@storybook/addon-postcss": "^2.0.0", + "@storybook/vue": "^6.3.6", + "@vue/cli-plugin-babel": "^4.5.13", + "@vue/cli-plugin-eslint": "^4.5.13", + "@vue/cli-plugin-unit-jest": "^4.5.13", + "@vue/cli-service": "^4.5.13", + "@vue/eslint-config-standard": "^6.0.0", + "@vue/test-utils": "^1.2.2", + "autoprefixer": "^10.3.1", + "babel-eslint": "^10.1.0", + "eslint": "^7.31.0", + "eslint-plugin-import": "^2.23.4", + "eslint-plugin-node": "^11.1.0", + "eslint-plugin-promise": "^5.1.0", + "eslint-plugin-vue": "^7.14.0", + "postcss": "^8.3.6", + "stylelint": "^13.13.1", "stylelint-config-rational-order": "^0.1.2", - "stylelint-config-standard": "^19.0.0", - "stylelint-scss": "^3.11.0", - "stylelint-webpack-plugin": "^0.10.5", + "stylelint-config-standard": "^22.0.0", + "stylelint-webpack-plugin": "^3.0.1", "svgxuse": "^1.2.6", - "vue-eslint-parser": "^6.0.4", - "vue-loader": "^15.9.1", - "vue-style-loader": "^4.1.2", - "vue-template-compiler": "^2.6.11" + "tailwindcss": "^2.2.7", + "vue-loader": "^15.9.6", + "vue-template-compiler": "^2.6.14" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 000000000..85f717cc0 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {} + } +} diff --git a/src/atoms/app/App.vue b/src/atoms/app/App.vue index 3eee0b089..96ce27762 100644 --- a/src/atoms/app/App.vue +++ b/src/atoms/app/App.vue @@ -1,5 +1,4 @@