Storybook configuration - for stenciljs

addons.js

import '@storybook/addon-actions/register';
import "@storybook/addon-jest/register";
import '@storybook/addon-viewport/register';

import '@storybook/addon-a11y/register';
import 'storybook-readme/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-backgrounds/register';

config.js

import { configure, addDecorator, addParameters } from '@storybook/html';
import { withTests } from '@storybook/addon-jest';
import results from './../.jest-test-results.json';
import { addReadme } from 'storybook-readme/html';

addDecorator(addReadme);
addDecorator(
  withTests({
    results
  }),
);
const newViewports = {
  mobile: {
    name: 'Mobile',
    styles: {
      width: '320px',
      height: '568px',
    },
  },
  tablet: {
    name: 'Tablet',
    styles: {
      width: '768px',
      height: '1024px',
    },
  },
  laptop: {
    name: 'Laptop',
    styles: {
      width: '1200px',
      height: '1024px',
    },
  },
  desktop: {
    name: 'Desktop',
    styles: {
      width: '1366px',
      height: '1024px',
    },
  },
  wide: {
    name: 'Wide',
    styles: {
      width: '1920px',
      height: '1080px',
    },
  },
};

addParameters({
  viewport: {
    viewports: newViewports, // newViewports would be an ViewportMap. (see below for examples)
    defaultViewport: 'Mobile',
  },
});

const req = require.context('../src', true, /\.stories\.tsx$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);

package.json

{
  "name": "@giru/kingslanding-webcomponents",
  "version": "0.2.1",
  "description": "Libreria de Componentes para GIRU",
  "module": "dist/esm/index.js",
  "main": "dist/index.js",
  "types": "dist/types/components.d.ts",
  "collection": "dist/collection/collection-manifest.json",
  "files": [
    "dist/"
  ],
  "scripts": {
    "build": "stencil build --prod",
    "start": "npm-run-all --parallel serve",
    "start:story": "npm-run-all --parallel jest:generate serve storybook",
    "start:all": "npm-run-all --parallel jest:generate:watch serve storybook",
    "serve": "stencil build --dev --watch --serve",
    "test": "stencil test --spec",
    "test:e2e": "stencil test --e2e",
    "test:watch": "stencil test --spec --watch",
    "test:generate": "stencil test --spec --json --outputFile=.jest-test-results.json",
    "test:generate:watch": "stencil test --spec --json --outputFile=jest-test-results.json --watchAll",
    "jest:generate": "jest --json --outputFile=.jest-test-results.json",
    "jest:generate:watch": "jest --json --outputFile=.jest-test-results.json --watchAll",
    "prettier:code": "prettier-eslint --write \"{,!(node_modules)/**/}*.{ts,tsx,jsx}\"",
    "prettier:style": "prettier-stylelint --write src/**/*.{css,scss} --quiet",
    "lint:code": "eslint src/**/*.{ts,tsx,jsx}",
    "lint:style": "stylelint src/**/*.{css,scss}",
    "lint:staged": "lint-staged",
    "storybook": "start-storybook -p 3334 -c .storybook -s www",
    "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"
  },
  "dependencies": {
    "@stencil/core": "0.18.1"
  },
  "devDependencies": {
    "@babel/core": "7.2.2",
    "@stencil/postcss": "0.1.0",
    "@stencil/sass": "0.1.1",
    "@storybook/addon-a11y": "5.1.9",
    "@storybook/addon-actions": "5.1.9",
    "@storybook/addon-backgrounds": "5.1.9",
    "@storybook/addon-jest": "5.1.9",
    "@storybook/addon-knobs": "5.1.9",
    "@storybook/addon-notes": "5.1.9",
    "@storybook/addon-viewport": "5.1.9",
    "@storybook/html": "5.1.11",
    "@types/autoprefixer": "9.1.1",
    "@types/jest": "23.3.9",
    "@types/puppeteer": "1.11.1",
    "@typescript-eslint/eslint-plugin": "2.3.1",
    "@typescript-eslint/parser": "2.3.1",
    "autoprefixer": "9.3.1",
    "awesome-typescript-loader": "5.2.1",
    "babel-loader": "8.0.6",
    "conventional-changelog-cli": "2.0.23",
    "copy-webpack-plugin": "5.0.4",
    "cpr": "3.0.1",
    "eslint": "6.4.0",
    "eslint-config-prettier": "6.3.0",
    "eslint-config-react": "1.1.7",
    "eslint-config-stylelint": "11.1.0",
    "eslint-plugin-prettier": "3.1.1",
    "eslint-plugin-react": "7.15.1",
    "eslint-plugin-simple-import-sort": "4.0.0",
    "http-server": "0.11.1",
    "husky": "3.0.8",
    "jest": "23.6.0",
    "jest-cli": "23.6.0",
    "lint-staged": "9.4.1",
    "lit-html": "0.10.0",
    "npm-run-all": "4.1.5",
    "postcss-scss": "2.0.0",
    "prettier": "1.18.2",
    "prettier-eslint-cli": "5.0.0",
    "prettier-stylelint": "0.4.2",
    "puppeteer": "1.11.0",
    "stylelint": "11.0.0",
    "stylelint-config-standard": "19.0.0",
    "stylelint-no-unsupported-browser-features": "3.0.2",
    "typescript": "3.6.4",
    "write-file-webpack-plugin": "4.5.1"
  },
  "jest": {
    "roots": [
      "<rootDir>/src/components"
    ],
    "verbose": true,
    "transform": {
      "^.+\\.(ts|tsx)$": "<rootDir>/node_modules/@stencil/core/testing/jest.preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json",
      "jsx"
    ]
  },
  "browserslist": [
    "Explorer >= 11",
    "Firefox >= 63",
    "Chrome >= 60",
    "Safari >= 10",
    "Edge >= 16"
  ]
}

preview-head.html

<!-- <script src="./build/kingslanding-webcomponents"></script> -->
<!-- <link rel="stylesheet" href="./build/kingslanding-webcomponents.css"></link> -->
  <style>
    @font-face {
      font-family: 'Omnes-Regular';
      src: url('assets/fonts/Omnes-Regular.eot');
      src:
        url('assets/fonts/Omnes-Regular.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Omnes-Regular.woff2') format('woff2'),
        url('assets/fonts/Omnes-Regular.woff') format('woff'),
        url('assets/fonts/Omnes-Regular.ttf') format('truetype'),
        url('assets/fonts/Omnes-Regular.svg#Omnes-Regular') format('svg');
    }

    @font-face {
      font-family: 'Omnes-Semibold';
      src: url('assets/fonts/Omnes-Semibold.eot');
      src:
        url('assets/fonts/Omnes-Semibold.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Omnes-Semibold.woff2') format('woff2'),
        url('assets/fonts/Omnes-Semibold.woff') format('woff'),
        url('assets/fonts/Omnes-Semibold.ttf') format('truetype'),
        url('assets/fonts/Omnes-Semibold.svg#Omnes-Semibold') format('svg');
    }

    @font-face {
      font-family: 'Omnes-Light';
      src: url('assets/fonts/Omnes-Light.eot');
      src:
        url('assets/fonts/Omnes-Light.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Omnes-Light.woff2') format('woff2'),
        url('assets/fonts/Omnes-Light.woff') format('woff'),
        url('assets/fonts/Omnes-Light.ttf') format('truetype'),
        url('assets/fonts/Omnes-Light.svg#Omnes-Light') format('svg');
      font-weight: 300;
      font-style: normal;
    }

    @font-face {
      font-family: 'Omnes-Medium';
      src: url('assets/fonts/Omnes-Medium.eot');
      src:
        url('assets/fonts/Omnes-Medium.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Omnes-Medium.woff2') format('woff2'),
        url('assets/fonts/Omnes-Medium.woff') format('woff'),
        url('assets/fonts/Omnes-Medium.ttf') format('truetype'),
        url('assets/fonts/Omnes-Medium.svg#Omnes-Medium') format('svg');
    }

    @font-face {
      font-family: 'HelveticaNeue-Bold';
      src:
        url('assets/fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/HelveticaNeue-Bold.otf') format('opentype'),
        url('assets/fonts/HelveticaNeue-Bold.woff2') format('woff2'),
        url('assets/fonts/HelveticaNeue-Bold.woff') format('woff'),
        url('assets/fonts/HelveticaNeue-Bold.ttf') format('truetype'),
        url('assets/fonts/HelveticaNeue-Bold.svg#HelveticaNeue-Bold') format('svg');
    }

    @font-face {
      font-family: 'HelveticaNeue-Light';
      src: url('assets/fonts/HelveticaNeue-Light.eot');
      src:
        url('assets/fonts/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/HelveticaNeue-Light.woff2') format('woff2'),
        url('assets/fonts/HelveticaNeue-Light.woff') format('woff'),
        url('assets/fonts/HelveticaNeue-Light.ttf') format('truetype'),
        url('assets/fonts/HelveticaNeue-Light.svg#HelveticaNeue-Light') format('svg');
    }
  </style>

webpack.config.js

const fs = require('fs');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');

module.exports = async ({ config }) => {
  config.entry.push(path.join(__dirname, '../dist/kingslanding-webcomponents.js'));
  fs.readdirSync(path.join(__dirname, '../dist/collection/components')).map(function(file) {
    jsFilePath = path.join(__dirname, `../dist/collection/components/${file}/${file}.js`);
    try {
      if (fs.existsSync(jsFilePath)) {
        config.entry.push(jsFilePath);
      }
    } catch (err) {
      console.error(err);
    }

    cssFilePath = path.join(__dirname, `../dist/collection/components/${file}/${file}.css`);
    try {
      if (fs.existsSync(cssFilePath)) {
        config.entry.push(cssFilePath);
      }
    } catch (err) {
      console.error(err);
    }
  });

  config.plugins.push(
    new CopyPlugin([
      {
        from: '**/*',
        to: './',
        context: 'dist',
      },
    ]),
  );

  config.module.rules.push({
    test: /\.stories\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
      }
    ],
  });

  config.resolve.extensions.push('.tsx', '.md');
  config.plugins.push(new WriteFilePlugin());

  return config;
};

Can you provide eslintrc file?

sure, check this one https://github.com/rsurjano/workshop-stencil-storybook-testing
I've updated it with a latest configuration

wow nice repo. Thanks. Please do not make it private. I will learn allot. thanks.