[BBC-7095] Storybook 5.3+ Config

.storybook/main.js

@@ -0,0 +1,40 @@
+const path = require('path')
+
+module.exports = {
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('babel-loader'),
+          options: {
+            presets: [['react-app', { flow: false, typescript: true }]],
+          },
+        },
+        {
+          loader: require.resolve('react-docgen-typescript-loader'),
+          options: {
+            tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
+            shouldExtractLiteralValuesFromEnum: true,
+          },
+        },
+      ],
+    })
+    config.resolve.extensions.push('.ts', '.tsx')
+    return config
+  },
+  stories: ['../src/**/story.(tsx|mdx)', '../src/**/*.story.(tsx|mdx)'],
+  addons: [
+    '@storybook/addon-knobs',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-viewport',
+    '@storybook/addon-a11y',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+      },
+    },
+  ],
+}

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons'
+import theme from './theme'
+
+addons.setConfig({
+  theme,
+})

.storybook/preview.js

@@ -0,0 +1,23 @@
+import { withSmartKnobs } from 'storybook-addon-smart-knobs'
+import { addDecorator, addParameters } from '@storybook/react'
+import { withKnobs } from '@storybook/addon-knobs'
+import { withA11y } from '@storybook/addon-a11y'
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+
+import '../stories/stories.css'
+
+addParameters({
+  options: {
+    showPanel: true,
+    isToolshown: true,
+    storySort: (a, b) =>
+      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+  },
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+  },
+})
+
+addDecorator(withSmartKnobs())
+addDecorator(withKnobs)
+addDecorator(withA11y)

.storybook/theme.js

@@ -0,0 +1,25 @@
+import { create } from '@storybook/theming/create'
+
+export default create({
+  base: 'light',
+  brandTitle: 'BlaBlaCar',
+  brandUrl: 'https://www.blablacar.fr/',
+  brandImage:
+    'https://dxxbxu0f802py.cloudfront.net/wp-content/uploads/2020/03/17104851/BLOG%20THUMBNAIL-300x300.png',
+  fontBase: 'gt-eesti, sans-serif',
+  colorPrimary: 'hotpink',
+  colorSecondary: '#00AFF5',
+  textColor: '#708c91',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+  appBg: 'white',
+  appContentBg: 'white',
+  appBorderColor: '#dae1e7',
+  appBorderRadius: 4,
+  barTextColor: '#00AFF5',
+  barSelectedColor: '#054752',
+  barBg: 'white',
+  inputBg: 'white',
+  inputBorder: '#dae1e7',
+  inputTextColor: '#054752',
+  inputBorderRadius: 8,
+})