Merge pull request #491 from storyblok/develop

Release 68

.prettierrc

@@ -1,4 +1,9 @@
 {
   "semi": false,
   "singleQuote": true,
-}
+  "eslintIntegration": true,
+  "stylelintIntegration": true,
+  "tabs": false,
+  "trailingComma": "all",
+  "tabWidth": 2
+}

.storybook/main.js

@@ -1,15 +1,21 @@
-
 const config = {
   framework: {
     name: '@storybook/vue3-vite',
   },
   staticDirs: ['../public'],
-  stories: ['../stories/**/*.stories.@(ts|js|mdx)', '../src/**/*.stories.@(ts|js|mdx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-storysource'],
+  stories: [
+    '../stories/**/*.stories.@(ts|js|mdx)',
+    '../src/**/*.stories.@(ts|js|mdx)',
+  ],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+    '@storybook/addon-storysource',
+  ],
   docs: {
     autodocs: true,
     defaultName: 'Documentation',
-  }
-};
+  },
+}
 
 export default config

.storybook/manager.js

@@ -4,5 +4,5 @@ import storyblokTheme from './theme'
 addons.setConfig({
   theme: storyblokTheme,
   panelPosition: 'right',
-  addons: ['@storybook/addon-a11y']
+  addons: ['@storybook/addon-a11y'],
 })

.storybook/preview.css

@@ -26,3 +26,7 @@ body {
 .sb-story {
   width: 100%;
 }
+
+#story--interface-sbuploaddialog--default--primary .sb-block-ui {
+  position: static;
+}

.storybook/preview.js

@@ -2,7 +2,7 @@
 import '../src/assets/styles/global.scss'
 import './preview.css'
 import BlokInkPlugin from '../src/main'
-import { setup } from '@storybook/vue3';
+import { setup } from '@storybook/vue3'
 
 const customViewports = {
   xxs: {
@@ -63,11 +63,19 @@ export const parameters = {
   options: {
     storySort: {
       method: '',
-      order: ['Introduction', 'Design', 'Basic', 'Forms', 'Navigation', 'Data', 'Interface'],
+      order: [
+        'Introduction',
+        'Design',
+        'Basic',
+        'Forms',
+        'Navigation',
+        'Data',
+        'Interface',
+      ],
       locales: '',
     },
   },
   viewport: {
     viewports: customViewports,
   },
-};
+}

package.json

@@ -33,71 +33,73 @@
     "dompurify": "^3.0.6",
     "lucide-vue-next": "^0.279.0",
     "maska": "^1.5.2",
-    "throttle-debounce": "^4.0.1"
+    "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.20",
-    "@babel/eslint-parser": "^7.21.8",
+    "@babel/core": "^7.23.5",
+    "@babel/eslint-parser": "^7.23.3",
     "@babel/plugin-proposal-decorators": "^7.22.15",
     "@babel/plugin-proposal-export-default-from": "^7.18.10",
     "@ronilaukkarinen/stylelint-a11y": "^1.2.7",
-    "@storybook/addon-a11y": "^7.0.27",
-    "@storybook/addon-essentials": "^7.0.27",
-    "@storybook/addon-storysource": "^7.0.27",
-    "@storybook/addon-viewport": "^7.0.27",
-    "@storybook/addons": "^7.0.27",
-    "@storybook/theming": "^7.0.27",
-    "@storybook/vue3": "^7.0.27",
-    "@storybook/vue3-vite": "^7.0.27",
+    "@storybook/addon-a11y": "^7.6.3",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-storysource": "^7.6.3",
+    "@storybook/addon-viewport": "^7.6.3",
+    "@storybook/addons": "^7.6.3",
+    "@storybook/theming": "^7.6.3",
+    "@storybook/vue3": "^7.6.3",
+    "@storybook/vue3-vite": "^7.6.3",
     "@testing-library/vue": "^7.0.0",
     "@types/jsdom": "^21.1.5",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-standard": "^8.0.1",
-    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.3.2",
     "@vue/tsconfig": "^0.4.0",
     "@vue/vue3-jest": "^29.2.6",
-    "babel-jest": "^29.5.0",
+    "babel-jest": "^29.7.0",
     "babel-preset-vue": "^2.0.2",
     "chromatic": "^6.18.2",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-n": "^16.0.2",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-n": "^16.3.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-standard": "^4.1.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-testing-library": "^5.11.1",
-    "eslint-plugin-vitest": "^0.2.8",
-    "eslint-plugin-vue": "^9.14.1",
-    "eslint-plugin-vuejs-accessibility": "^2.1.0",
+    "eslint-plugin-testing-library": "^6.2.0",
+    "eslint-plugin-vitest": "^0.3.10",
+    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-vuejs-accessibility": "^2.2.0",
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",
     "jest-transform-stub": "^2.0.0",
     "jsdom": "^22.1.0",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.8.8",
+    "lint-staged": "^13.2.3",
+    "postcss-html": "^1.5.0",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.64.2",
+    "sass": "^1.67.0",
     "sass-mq": "^6.0.0",
-    "storybook": "^7.0.27",
+    "storybook": "^7.6.3",
     "stylelint": "^15.10.3",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
-    "stylelint-config-standard-scss": "^10.0.0",
-    "stylelint-order": "^4.1.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.3.9",
+    "stylelint-config-standard-scss": "^11.0.0",
+    "stylelint-order": "^6.0.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.1",
     "vite-svg-loader": "^4.0.0",
-    "vitest": "^0.32.4",
+    "vitest": "^0.33.0",
     "vue": "^3.3.8",
     "vue-eslint-parser": "^9.3.2",
-    "vue-tsc": "^1.6.5"
+    "vue-tsc": "^1.8.22"
   },
   "lint-staged": {
     "*.{js,jsx,vue,ts,tsx}": [

src/assets/styles/_animation.scss

@@ -1,3 +1,3 @@
 
-//Transition
+// Transition
 $base-transition: all 0.1s ease-in-out;

src/assets/styles/_colors.scss

@@ -26,6 +26,7 @@ $yellow: #fbce41;
 $yellow-75: #fcdb71;
 $yellow-50: #fde6a0;
 $yellow-25: #fef3cf;
+$yellow-20: #fef5d9;
 
 // blue
 $blue: #395ece;
@@ -70,7 +71,7 @@ $color-positive: $green;
 $color-negative: $red;
 $color-warning: $orange;
 $color-white: $white;
-
+$primary-text-color: $sb-dark-blue;
 $colors: (
   'primary': $color-primary,
   'primary-dark': $color-primary-dark,

src/assets/styles/_responsive.scss

@@ -6,7 +6,6 @@ $mq-md: 768px;
 $mq-lg: 1024px;
 $mq-xl: 1280px;
 $mq-2xl: 1536px;
-
 $breakpoints: (
   'xs': $mq-xs,
   'sm': $mq-sm,

src/assets/styles/_sizes.scss

@@ -8,7 +8,6 @@ $icon-extra-large-size: 4.8rem;
 $sb-avatar-small: 26px;
 $sb-avatar-normal: 32px;
 $sb-avatar-large: 46px;
-
 $s-1: 4px;
 $s-2: 8px;
 $s-3: 12px;
@@ -17,7 +16,6 @@ $s-5: 24px;
 $s-6: 32px;
 $s-7: 40px;
 $s-8: 48px;
-
 $sizes: (
   '1': $s-1,
   '2': $s-2,
@@ -29,68 +27,6 @@ $sizes: (
   '8': $s-8
 );
 
-@each $name, $value in $sizes {
-  .sb-m-#{$name} {
-    margin: $value !important;
-  }
-
-  .sb-mt-#{$name} {
-    margin-top: $value !important;
-  }
-
-  .sb-mr-#{$name} {
-    margin-right: $value !important;
-  }
-
-  .sb-mb-#{$name} {
-    margin-bottom: $value !important;
-  }
-
-  .sb-ml-#{$name} {
-    margin-left: $value !important;
-  }
-
-  .sb-mx-#{$name} {
-    margin-left: $value !important;
-    margin-right: $value !important;
-  }
-
-  .sb-my-#{$name} {
-    margin-bottom: $value !important;
-    margin-top: $value !important;
-  }
-
-  .sb-p-#{$name} {
-    margin: $value !important;
-  }
-
-  .sb-pt-#{$name} {
-    margin-top: $value !important;
-  }
-
-  .sb-pr-#{$name} {
-    margin-right: $value !important;
-  }
-
-  .sb-pb-#{$name} {
-    margin-bottom: $value !important;
-  }
-
-  .sb-pl-#{$name} {
-    margin-left: $value !important;
-  }
-
-  .sb-px-#{$name} {
-    margin-left: $value !important;
-    margin-right: $value !important;
-  }
-
-  .sb-py-#{$name} {
-    margin-bottom: $value !important;
-    margin-top: $value !important;
-  }
-}
-
 // will be removed
 $small-size: 8px; // use $s-2
 $medium-size: 16px; // use $s-4

src/assets/styles/_typography.scss

@@ -1,6 +1,5 @@
 // Typography
 $primary-font-family: 'Roboto', sans-serif;
-$primary-text-color: $sb-dark-blue;
 $font-size-default: 1.6rem;
 $line-height-default: 1;
 
@@ -38,11 +37,6 @@ $font-size: (
   '32': $font-32,
 );
 
-@each $name, $pair in $font-size {
-  .font-#{$name} {
-    font-size: $pair !important;
-  }
-}
 
 // -- Font weight helper classes
 // E.g. .font-thin, .font-light, ..
@@ -53,11 +47,6 @@ $font-weight: (
   'bold':     $font-bold,
 );
 
-@each $name, $pair in $font-weight {
-  .font-#{$name} {
-    font-weight: $pair !important;
-  }
-}
 
 // WILL BE REMOVED SOON
 $heading-2xl: 3.2rem; // will be removed, use font-32