Merge pull request #386 from storyblok/develop

Release new storybook

.eslintrc.js

@@ -5,12 +5,13 @@ module.exports = {
     jest: true,
   },
   extends: [
+    '@vue/eslint-config-prettier',
+    '@vue/eslint-config-typescript',
+    'eslint:recommended',
+    'plugin:jest-dom/recommended',
     'plugin:vue/vue3-essential',
     'plugin:vue/vue3-recommended',
     'plugin:vue/vue3-strongly-recommended',
-    'prettier',
-    'plugin:prettier/recommended',
-    'plugin:jest-dom/recommended',
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run pre-commit

.storybook/main.js

@@ -1,27 +1,15 @@
-const { globalStyles } = require('../config/globals')
 
-module.exports = {
-  core: {
-    builder: 'webpack5',
+const config = {
+  framework: {
+    name: '@storybook/vue3-vite',
   },
   staticDirs: ['../public'],
-  stories: ['../stories/**/*.stories.js', '../src/**/*.stories.js'],
-  addons: ['@storybook/preset-scss', '@storybook/addon-essentials', '@storybook/addon-viewport', '@storybook/addon-a11y'],
-  // https://storybook.js.org/docs/configurations/custom-webpack-config/
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.scss$/,
-      use: [
-        'sass-loader',
-        {
-          loader: 'style-resources-loader',
-          options: {
-            patterns: globalStyles,
-          },
-        },
-      ],
-    })
+  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',
+  }
+};
 
-    return config
-  },
-}
+export default config

.storybook/manager.js

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

.storybook/preview.css

@@ -21,3 +21,8 @@ body {
 .mr-20 {
   margin-right: 20px;
 }
+
+.sb-show-main.sb-main-centered #storybook-root,
+.sb-story {
+  width: 100%;
+}

.storybook/preview.js

@@ -2,8 +2,72 @@
 import '../src/assets/styles/global.scss'
 import './preview.css'
 import BlokInkPlugin from '../src/main'
-import { app } from '@storybook/vue3'
+import { setup } from '@storybook/vue3';
 
-app.use(BlokInkPlugin)
+const customViewports = {
+  xxs: {
+    name: 'XXS',
+    styles: {
+      width: '320px',
+      height: '568px',
+    },
+  },
+  xs: {
+    name: 'XS',
+    styles: {
+      width: '480px',
+      height: '800px',
+    },
+  },
+  sm: {
+    name: 'SM',
+    styles: {
+      width: '640px',
+      height: '960px',
+    },
+  },
+  md: {
+    name: 'MD',
+    styles: {
+      width: '768px',
+      height: '1024px',
+    },
+  },
+  lg: {
+    name: 'LG',
+    styles: {
+      width: '1024px',
+      height: '768px',
+    },
+  },
+  xl: {
+    name: 'XL',
+    styles: {
+      width: '1280px',
+      height: '800px',
+    },
+  },
+  '2xl': {
+    name: '2XL',
+    styles: {
+      width: '1536px',
+      height: '864px',
+    },
+  },
+}
+setup((app) => {
+  app.use(BlokInkPlugin)
+})
 
-app.config.unwrapInjectedRef = true
+export const parameters = {
+  options: {
+    storySort: {
+      method: '',
+      order: ['Introduction', 'Design', 'Basic', 'Forms', 'Navigation', 'Data', 'Interface'],
+      locales: '',
+    },
+  },
+  viewport: {
+    viewports: customViewports,
+  },
+};

.stylelintrc.json

@@ -1,10 +1,11 @@
 {
   "extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
 
-  "plugins": ["stylelint-order"],
+  "plugins": ["stylelint-order", "stylelint-a11y"],
 
   "rules": {
-    "max-nesting-depth": 4,
+    "max-nesting-depth": 3,
+    "a11y/selector-pseudo-class-focus": true,
     "selector-max-id": 1,
     "selector-max-compound-selectors": 4,
     "selector-class-pattern": null,
@@ -39,6 +40,10 @@
           "type": "at-rule",
           "name": "media"
         },
+        {
+          "type": "at-rule",
+          "name": "include"
+        },
         "rules"
       ],
       { "severity": "warning" }

README.md

@@ -27,6 +27,30 @@ import '@storyblok/design-system/dist/storyblok-design-system.css'
 app.use(BlokInk) // vue 3
 ```
 
+Then you can use all Blok.Ink components everywhere in your app.
+
+```vue
+<template>
+  <SbIcon name="search" />
+</template>
+```
+
+### Only install specific components
+
+You can also only install a few components, by specifying the option `withComponents`.
+```js
+import BlokInk from '@storyblok/design-system'
+import '@storyblok/design-system/dist/storyblok-design-system.css'
+
+app.use(BlokInk, {
+  withComponents: [
+    'SbButton',
+    'SbIcon',
+  ]
+})
+```
+
+
 For more information on the usage of the Design System go to:
 [https://www.storyblok.com/docs/guide/in-depth/design-system](https://www.storyblok.com/docs/guide/in-depth/design-system)
 

babel.config.js

@@ -1,10 +1,6 @@
 module.exports = {
   presets: [
-    [
-      '@vue/cli-plugin-babel/preset',
-      {
-        useBuiltIns: false,
-      },
-    ],
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
   ],
 }

jest.config.js

@@ -1,8 +1,38 @@
 module.exports = {
-  preset: '@vue/cli-plugin-unit-jest',
+  testEnvironment: 'jsdom',
+  moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx', 'vue'],
+  transform: {
+    '^.+\\.vue$': '@vue/vue3-jest',
+    '.+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|avif)$':
+      require.resolve('jest-transform-stub'),
+    '^.+\\.(j|t)sx?$': [
+      require.resolve('ts-jest'),
+      {
+        babelConfig: true,
+        useESM: true,
+        tsconfig: './tsconfig.jest.json',
+        diagnostics: {
+          exclude: ['**'],
+        },
+      },
+    ],
+  },
+  moduleNameMapper: {
+    '^src/(.*)$': '<rootDir>/src/$1',
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^@tests/(.*)$': '<rootDir>/src/tests/$1',
+    '^vue$': '<rootDir>/node_modules/vue',
+  },
+  testMatch: [
+    '<rootDir>/src/**/*.(test|specs|spec).(js|jsx|ts|tsx)|<rootDir>/__tests__/*.(js|jsx|ts|tsx)',
+    '<rootDir>/tests/unit/**/*.spec.[jt]s?(x)',
+  ],
   transformIgnorePatterns: [
     // ignores popper lib
     'node_modules/(?!(@popperjs)/)',
   ],
   setupFilesAfterEnv: ['<rootDir>/setup-jest.js'],
+  testEnvironmentOptions: {
+    customExportConditions: ['node', 'node-addons'],
+  },
 }