How to use the @storybook/html.configure function in @storybook/html

addDecorator(
  withOptions({
    hierarchyRootSeparator: /\|/
  })
);

// automatically import all files ending in *.stories.js
const req = require.context("../stories", true, /.stories.js$/);
function loadStories() {
  // Make welcome story default
  require("../stories/index.stories");
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

});

addDecorator(withA11y);
addDecorator(stylesDecorator());

const req = require.context('../components', true, /\.examples\.js$/);

function loadStories() {
  return [
    // Make welcome stories default
    require('../components/welcome.examples'),
    ...req.keys().map(filename => req(filename))
  ];
}

configure(loadStories, module);

event = document.createEvent('Event')
    event.initEvent('reload', true, true)
  }

  window.dispatchEvent(event)

  return story()
})

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/)
function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

/**
     * enable/disable shortcuts
     * @type {Boolean}
     */
    enableShortcuts: true, // true by default
  }
} );


// automatically import all files ending in *.stories.js
const req = require.context('./stories', true, /.stories.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

import { configure, addParameters, addDecorator } from '@storybook/html';
import centered from '@storybook/addon-centered/html';
import theme from './theme';

addDecorator(centered);
addParameters({
  backgrounds: [
    { name: 'Light', value: '#f8f8f8', default: true }
  ],
  options: {
    theme,
     isToolshown: false,
  }
});

configure(require.context('../src/components', true, /\.stories\.js$/), module);

theme: create({
      base: 'light',
      brandTitle: 'AXA Living Styleguide',
      brandUrl: 'https://github.com/axa-ch/patterns-library/tree/develop',
      brandImage: logo,
    }),
  },
});

addDecorator(addReadme);

const landingpage = require.context('../src/landingpage', true, /(story\.(js|jsx)|demo.(js|jsx))$/);
const components = require.context('../src/components', true, /(story\.(js|jsx)|demo.(js|jsx))$/);
const demos = require.context('../src/demo', true, /(story\.(js|jsx)|demo.(js|jsx))$/);

configure(() => {
  landingpage.keys().forEach(landingpage);
  components.keys().forEach(components);
  demos.keys().forEach(demos);
}, module);

import { configure, addDecorator } from '@storybook/html';
import { makeDecorator } from '@storybook/addons';
import Grid from '../src/grid';

const withDefaultConfig =  makeDecorator({
  name: 'withDefaultConfig',
  wrapper: (getStory, context) => {
    Grid.setLanguage('en');
    Grid.applyTheme({ preset: 'default' });
    return getStory(context);
  }
});

addDecorator(withDefaultConfig);
configure(require.context('../stories', true, /.stories.tsx?$/), module);

const COLLECTIONS = [
  {
    name: 'Stencil Components',
    loader: require('../loader/index.cjs.js'),
    componentsCtx: require.context('../dist/collection', true, /\/components\/([^/]+)\/\1\.js$/),
    storiesCtx: require.context('../src', true, /\.story\.tsx$/)
  }
];

function loadStories() {
  COLLECTIONS.forEach(({ name, loader, componentsCtx, storiesCtx }) => {
    buildStencilStories(name, loader, componentsCtx, storiesCtx);
  });
}

configure(loadStories, module);

import { configure } from "@storybook/html";
const req = require.context("../src/", true, /\.stories\.ts$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);