Merge pull request #514 from storyblok/develop

Release: 71 - Tommy

.github/workflows/tests.yml

@@ -6,20 +6,17 @@ name: 'Unit Tests'
 # and a push to develop and master branches
 on:
   push:
-    branches: [ master, develop, next ]
+    branches: [ master, develop, main ]
   pull_request:
-    branches: [ master, develop, next ]
+    branches: [ master, develop, main ]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
-
     steps:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
         node-version: 18
-        cache: 'yarn'
     - run: yarn
     - run: yarn test:unit

.storybook/main.js

@@ -1,16 +1,18 @@
+import { dirname, join } from "path";
 const config = {
   framework: {
-    name: '@storybook/vue3-vite',
+    name: getAbsolutePath("@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',
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-storysource"),
+    getAbsolutePath("@storybook/addon-mdx-gfm")
   ],
   docs: {
     autodocs: true,
@@ -19,3 +21,7 @@ const config = {
 }
 
 export default config
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

.storybook/preview.js

@@ -1,6 +1,6 @@
 // adding global.css to Storybook Preview Area
 import '../src/assets/styles/global.scss'
-import './preview.css'
+import './preview.scss'
 import BlokInkPlugin from '../src/main'
 import { setup } from '@storybook/vue3'
 

.storybook/preview.css → .storybook/preview.scss

@@ -1,3 +1,5 @@
+@import '../src/assets/styles/helper-classes.scss';
+
 body {
   margin: 20px;
 }
@@ -22,11 +24,19 @@ body {
   margin-right: 20px;
 }
 
+.list-none {
+  list-style: none;
+}
+
+.align-self-center {
+  align-self: center !important;
+}
+
 .sb-show-main.sb-main-centered #storybook-root,
 .sb-story {
   width: 100%;
 }
 
 #story--interface-sbuploaddialog--default--primary .sb-block-ui {
   position: static;
-}
+}

package.json

@@ -12,7 +12,6 @@
     "dev": "yarn storybook",
     "build": "vite build",
     "test:unit": "vitest run --config ./vitest.config.ts",
-    "generate:types": "vue-tsc --declaration --emitDeclarationOnly --outdir ./dist",
     "lint": "eslint src src/ tests/ .storybook/",
     "lint:style": "stylelint 'src/**/*.{vue,scss}' --config ./.stylelintrc.json --fix",
     "build-storybook": "storybook build",
@@ -22,6 +21,7 @@
   },
   "main": "dist/storyblok-design-system.js",
   "module": "dist/storyblok-design-system.mjs",
+  "types": "dist/src/main.d.ts",
   "files": [
     "dist",
     "src"
@@ -33,6 +33,7 @@
     "dompurify": "^3.0.6",
     "lucide-vue-next": "^0.279.0",
     "maska": "^1.5.2",
+    "primevue": "^3.43.0",
     "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {
@@ -41,14 +42,15 @@
     "@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.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",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-mdx-gfm": "^7.6.10",
+    "@storybook/addon-storysource": "^7.6.10",
+    "@storybook/addon-viewport": "^7.6.10",
+    "@storybook/addons": "^7.6.10",
+    "@storybook/theming": "^7.6.10",
+    "@storybook/vue3": "^7.6.10",
+    "@storybook/vue3-vite": "^7.6.10",
     "@testing-library/vue": "^7.0.0",
     "@types/jsdom": "^21.1.5",
     "@vitejs/plugin-vue": "^4.2.3",
@@ -61,6 +63,7 @@
     "babel-jest": "^29.7.0",
     "babel-preset-vue": "^2.0.2",
     "chromatic": "^6.18.2",
+    "colord": "^2.9.3",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.0",
@@ -86,15 +89,16 @@
     "react-dom": "^18.2.0",
     "sass": "^1.67.0",
     "sass-mq": "^6.0.0",
-    "storybook": "^7.6.3",
+    "storybook": "^7.6.10",
     "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": "^11.0.0",
     "stylelint-order": "^6.0.3",
     "typescript": "^5.2.2",
-    "vite": "^4.5.1",
+    "vite": "^4.5.2",
+    "vite-plugin-dts": "^3.7.2",
     "vite-svg-loader": "^4.0.0",
     "vitest": "^0.33.0",
     "vue": "^3.3.8",

setup-vitest.ts

@@ -3,3 +3,12 @@ import * as SbComponents from './src/components/index.js'
 
 config.global.components = { ...SbComponents }
 config.global.renderStubDefaultSlot = true
+
+// see https://github.com/jsdom/jsdom/issues/2177
+const originalConsoleError = console.error
+const jsDomCssError = 'Error: Could not parse CSS stylesheet'
+console.error = (...params) => {
+  if (!params.find((p) => p.toString().includes(jsDomCssError))) {
+    originalConsoleError(...params)
+  }
+}

src/assets/styles/_border.scss

@@ -1,8 +1,7 @@
-
-$light-border: 1px solid #dfe3e8;
+$base-border: 1px solid $border-gray-light;
 
 // Box-shadow
-$box-shadow-default: 0 2px 17px 3px rgb(34 42 69 / 7%);
+$box-shadow-default: 0 2px 17px 3px $shadow-dark-blue-transparent;
 
 // Border radius
 $base-border-radius: 8px;