storybook to 5.3

packages/react-scripts/scripts/utils/frontierInit.js

@@ -46,11 +46,11 @@ function installFrontierDependencies(appPath, appName, ownPath) {
  '@storybook/addon-knobs@5',
  '@storybook/addon-viewport@5',
  '@storybook/addons@5',
+ "@storybook/preset-create-react-app@1",
  '@storybook/react@5',
  '@storybook/theming@5',
  'storybook-readme@5',
  '@fs/eslint-config-frontier-react@4',
- '@fs/babel-preset-frontier@2',
  '@fs/storybook-addons@2.0.0',
  '@fs/zion-testing-library@3',
  'eslint@6',

packages/react-scripts/template-hf/server.js

@@ -26,7 +26,7 @@ const snowConfig = {
  },
  {
  name: 'header2019',
- default: true
+ default: true,
  },
  ],
  proxyUser: false,

packages/react-scripts/template/.storybook/main.js

@@ -0,0 +1,17 @@
+module.exports = {
+ stories: ['../src/**/*.stories.js'],
+ addons: [
+ '@storybook/preset-create-react-app',
+ '@storybook/addon-docs/preset',
+
+ '@storybook/addon-knobs/register',
+ '@storybook/addon-actions/register',
+ '@storybook/addon-a11y/register',
+ '@storybook/addon-viewport/register',
+ '@fs/storybook-addons/dist/grid/register',
+ '@fs/storybook-addons/dist/locale-switcher/register',
+ '@fs/storybook-addons/dist/sign-in/register',
+ '@fs/storybook-addons/dist/env/register',
+ '@fs/storybook-addons/dist/theme-switcher/register',
+ ],
+}

packages/react-scripts/template/.storybook/config.js → packages/react-scripts/template/.storybook/preview.js

@@ -2,7 +2,6 @@
 import React, { Suspense } from 'react'
 import { css } from '@emotion/core'
 import { configure, addParameters, addDecorator } from '@storybook/react'
-import { addReadme } from 'storybook-readme'
 import '@storybook/addon-console'
 import { withA11y } from '@storybook/addon-a11y'
 import { withKnobs } from '@storybook/addon-knobs'
@@ -16,7 +15,6 @@ import withThemeSwitcher from '@fs/storybook-addons/dist/theme-switcher/withThem
 
 addDecorator(withKnobs)
 addDecorator(withA11y)
-addDecorator(addReadme)
 addDecorator((storyFn) => (
  <Suspense fallback={<div>Storybook Wrapper Loading...</div>}>
  <I18nProvider i18nInstance={i18n}>
@@ -31,17 +29,9 @@ addDecorator((storyFn) => (
 ))
 addDecorator(withThemeSwitcher({ themes }))
 
-// eslint-disable-next-line no-extend-native
-String.prototype.injectInnerMarkdown = function injectInnerMarkdown(innerMarkdown) {
- return this.replace('<!-- INNER_MARKDOWN -->', innerMarkdown)
-}
-
 addParameters({
- readme: { sidebar: '<!-- PROPS -->' },
  options: {
  showPanel: true,
  theme: window.localStorage.getItem('themeId') === 'nightfall' ? darkMode : lightMode,
  },
 })
-
-configure(require.context('../src', true, /\.stories\.(js|mdx)$/), module)

packages/react-scripts/template/.storybook/theme.js

@@ -7,13 +7,13 @@ const defaultOptions = {
 }
 
 export const lightMode = create({
-  base: 'light',
-  ...defaultOptions
+ base: 'light',
+ ...defaultOptions,
 })
 
 export const darkMode = create({
  base: 'dark',
- ...defaultOptions
+ ...defaultOptions,
 })
 
-export default lightMode
+export default lightMode

packages/react-scripts/template/.storybook/webpack.config.js

@@ -1,8 +1,6 @@
 require('dotenv').config()
 
 module.exports = async ({ config }) => {
- config.module.rules = config.module.rules.filter(isNotStorybookBabelLoader)
-
  const localesLoader = {
  test: /locales/,
  loader: '@alienfast/i18next-loader',
@@ -24,23 +22,18 @@ module.exports = async ({ config }) => {
  config.entry = config.entry.filter((singleEntry) => !singleEntry.includes('/webpack-hot-middleware/'))
  }
 
+ printRules(config.module.rules)
  return config
 }
 
-function isNotStorybookBabelLoader(rule) {
- let babelLoader
- if (rule.use && rule.use.length) {
- babelLoader = rule.use.find(({ loader }) => loader === 'babel-loader')
- }
- // the storybook babel-loader for js files has both an include and an exclude on the rule
- return !babelLoader || !(rule.include && rule.exclude)
-}
-
-function printRules(config) {
- config.module.rules.forEach((rule) => {
- console.log('rule.test: ', rule.test)
- console.log('rule.include: ', rule.include)
- console.log('rule.exclude: ', rule.exclude)
+function printRules(rules) {
+ rules.forEach((rule) => {
+ if (rule.oneOf) {
+ return printRules(rule.oneOf)
+ }
+ console.log('rule.test: ', rule.test && rule.test.toString())
+ console.log('rule.include: ', rule.include && rule.include.toString())
+ console.log('rule.exclude: ', rule.exclude && rule.exclude.toString())
  console.log('JSON.stringify(rule, null, 2): ', JSON.stringify(rule, null, 2))
  console.log('\n')
  })