chore: Updates Storybook to version 6 (#712)

* Removing story.name
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Adding pre-push hook
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Updating Flag and Card
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Updating Storybook to version 6
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Updating betterer results
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Update eslint config
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Update eslint config
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Removing pre-push hook as it runs on .src-custom
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

amundsen_application/static/.betterer.results

@@ -343,8 +343,8 @@ exports[`strict null compilation`] = {
     "js/utils/navigationUtils.ts:1127210474": [
       [19, 50, 21, "Type \'undefined\' cannot be used as an index type.", "602535635"]
     ],
-    "webpack.common.ts:368637609": [
-      [34, 24, 20, "No overload matches this call.\\n  Overload 1 of 2, \'(...items: ConcatArray<never>[]): never[]\', gave the following error.\\n    Argument of type \'string\' is not assignable to parameter of type \'ConcatArray<never>\'.\\n  Overload 2 of 2, \'(...items: ConcatArray<never>[]): never[]\', gave the following error.\\n    Argument of type \'string\' is not assignable to parameter of type \'ConcatArray<never>\'.", "806093104"]
+    "webpack.common.ts:1615757453": [
+      [42, 24, 20, "No overload matches this call.\\n  Overload 1 of 2, \'(...items: ConcatArray<never>[]): never[]\', gave the following error.\\n    Argument of type \'string\' is not assignable to parameter of type \'ConcatArray<never>\'.\\n  Overload 2 of 2, \'(...items: ConcatArray<never>[]): never[]\', gave the following error.\\n    Argument of type \'string\' is not assignable to parameter of type \'ConcatArray<never>\'.", "806093104"]
     ]
   }`
 };

amundsen_application/static/.eslintignore

@@ -9,3 +9,4 @@ stylesheets/*
 vendor/*
 docs/*
 appbuilder/*
+.src-custom/*

amundsen_application/static/.storybook/main.ts

-import merge from 'webpack-merge';
+// Copyright Contributors to the Amundsen project.
+// SPDX-License-Identifier: Apache-2.0
+
+import customWebpackConfig from './webpack.config.js';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
-import devWebpackConfig from '../webpack.dev';
 
 module.exports = {
   stories: ['../js/**/*.story.tsx'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/addon-knobs',
+    '@storybook/addon-knobs'
   ],
-  webpackFinal: async (config) => {
-    return merge(devWebpackConfig, config);
+  webpackFinal: (config) => {
+    return {
+      ...config,
+      module: {
+        ...config.module,
+        rules: customWebpackConfig.module.rules,
+      },
+      resolve: {
+        ...config.resolve,
+        ...customWebpackConfig.resolve,
+      },
+      plugins: [
+        new MiniCssExtractPlugin({
+            filename: "[name].[contenthash].css",
+        }),
+        ...config.plugins
+      ]
+    };
   },
 };

amundsen_application/static/.storybook/manager.ts

@@ -13,5 +13,5 @@ addons.setConfig({
   theme: amundsenTheme,
   selectedPanel: undefined,
   initialActive: 'sidebar',
-  showRoots: false,
+  showRoots: true,
 });

amundsen_application/static/.storybook/preview.ts

-import anysort from 'anysort';
-import { addParameters } from '@storybook/react';
+// Copyright Contributors to the Amundsen project.
+// SPDX-License-Identifier: Apache-2.0
 
 import '../css/styles.scss';
 
 const categoriesOrder = [
-  'Overview/Introduction',
-  'Attributes/**',
-  'Components/**',
+  'Overview',
+  'Attributes',
+  'Components',
 ];
 
-addParameters({
+export const parameters = {
   options: {
-    showRoots: true,
-    storySort: (previous, next) => {
-      const [previousStory, previousMeta] = previous;
-      const [nextStory, nextMeta] = next;
-
-      return anysort(previousMeta.kind, nextMeta.kind, categoriesOrder);
+    storySort: {
+      order: categoriesOrder,
     },
   },
-});
+};

amundsen_application/static/.storybook/webpack.config.js

+// Copyright Contributors to the Amundsen project.
+// SPDX-License-Identifier: Apache-2.0
+
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
+
+const TSX_PATTERN = /\.ts|\.tsx$/;
+const JSX_PATTERN = /\.jsx?$/;
+const CSS_PATTERN = /\.(sa|sc|c)ss$/;
+const IMAGE_PATTERN = /\.(png|svg|jpg|gif)$/;
+const FONT_PATTERN = /\.(ttf|woff2|otf)$/;
+const RESOLVED_EXTENSIONS = ['.tsx', '.ts', '.js', '.jsx', '.css', '.scss'];
+const PATHS = {
+  dist: resolve('../dist'),
+  pages: resolve('../js/pages'),
+  components: resolve('../js/components'),
+  config: resolve('../js/config'),
+  ducks: resolve('../js/ducks'),
+  interfaces: resolve('../js/interfaces'),
+  utils: resolve('../js/utils'),
+  css: resolve('../css/'),
+};
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: TSX_PATTERN,
+        exclude: /node_modules/,
+        loader: 'ts-loader',
+      },
+      {
+        test: JSX_PATTERN,
+        exclude: /node_modules/,
+        use: 'babel-loader',
+      },
+      {
+        test: CSS_PATTERN,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                includePaths: [PATHS.css],
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: IMAGE_PATTERN,
+        use: 'file-loader',
+      },
+      {
+        test: FONT_PATTERN,
+        use: 'file-loader',
+      },
+    ]
+  },
+  resolve: {
+    extensions: RESOLVED_EXTENSIONS,
+    alias: {
+      pages: PATHS.pages,
+      components: PATHS.components,
+      config: PATHS.config,
+      ducks: PATHS.ducks,
+      interfaces: PATHS.interfaces,
+      utils: PATHS.utils,
+    },
+  },
+};

amundsen_application/static/js/components/common/Card/card.story.tsx

@@ -2,14 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 import StorySection from '../StorySection';
 import Card from '.';
 
-const stories = storiesOf('Components/Cards', module);
+export default {
+  title: 'Components/Cards',
+};
 
-stories.add('Cards', () => (
+export const Cards = () => (
   <>
     <StorySection title="Loading Card">
       <Card isLoading />
@@ -28,4 +29,6 @@ stories.add('Cards', () => (
       />
     </StorySection>
   </>
-));
+);
+
+Cards.storyName = 'Cards';

amundsen_application/static/js/components/common/Flag/Flag.story.tsx

@@ -2,15 +2,16 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 import { BadgeStyle } from 'config/config-types';
 import StorySection from '../StorySection';
 import Flag, { CaseType } from '.';
 
-const stories = storiesOf('Components/Flags', module);
+export default {
+  title: 'Components/Flags',
+};
 
-stories.add('Flags', () => (
+export const Flags = () => (
   <>
     <StorySection title="Lower Case Flag">
       <Flag caseType={CaseType.LOWER_CASE} text="Test Flag" />
@@ -64,4 +65,6 @@ stories.add('Flags', () => (
       />
     </StorySection>
   </>
-));
+);
+
+Flags.storyName = 'Flags';

amundsen_application/static/js/stories/typography.story.tsx

@@ -55,9 +55,7 @@ export const TypographyUpdated = () => {
   );
 };
 
-TypographyUpdated.story = {
-  name: 'Typography',
-};
+TypographyUpdated.storyName = 'Typography';
 
 export const Typography = () => {
   return (
@@ -102,6 +100,4 @@ export const Typography = () => {
   );
 };
 
-Typography.story = {
-  name: 'Deprecated: Headings & Body',
-};
+Typography.storyName = 'Deprecated: Headings & Body';

amundsen_application/static/package.json

@@ -56,12 +56,12 @@
     "@babel/preset-react": "^7.10.4",
     "@betterer/cli": "^3.0.3",
     "@betterer/typescript": "^3.0.1",
-    "@storybook/addon-actions": "^6.0.21",
-    "@storybook/addon-info": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
-    "@storybook/react": "^5.3.19",
-    "@storybook/theming": "^6.0.21",
+    "@storybook/addon-actions": "^6.0.26",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^6.0.26",
+    "@storybook/addons": "^6.0.26",
+    "@storybook/react": "^6.0.26",
+    "@storybook/theming": "^6.0.26",
     "@types/enzyme": "^3.10.5",
     "@types/jasmine-matchers": "^0.2.32",
     "@types/jest": "^26.0.14",
@@ -246,7 +246,8 @@
       "stylesheets/*",
       "vendor/*",
       "docs/*",
-      "appbuilder/*"
+      "appbuilder/*",
+      ".src-custom/*"
     ],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {

amundsen_application/static/webpack.common.ts

+// Copyright Contributors to the Amundsen project.
+// SPDX-License-Identifier: Apache-2.0
+
 import * as path from 'path';
 import * as fs from 'fs';
 import * as webpack from 'webpack';
@@ -9,22 +12,27 @@ import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 
 import appConfig from './js/config/config';
 
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
+
 const TSX_PATTERN = /\.ts|\.tsx$/;
 const JSX_PATTERN = /\.jsx?$/;
 const CSS_PATTERN = /\.(sa|sc|c)ss$/;
 const IMAGE_PATTERN = /\.(png|svg|jpg|gif)$/;
 const VENDORS_PATTERN = /[\\/]node_modules[\\/](react|react-dom)[\\/]/;
 const FONT_PATTERN = /\.(ttf|woff2|otf)$/;
+const RESOLVED_EXTENSIONS = ['.tsx', '.ts', '.js', '.jsx', '.css', '.scss'];
 
 const PATHS = {
-  dist: path.join(__dirname, '/dist'),
-  pages: path.join(__dirname, '/js/pages'),
-  components: path.join(__dirname, '/js/components'),
-  config: path.join(__dirname, '/js/config'),
-  ducks: path.join(__dirname, '/js/ducks'),
-  interfaces: path.join(__dirname, '/js/interfaces'),
-  utils: path.join(__dirname, '/js/utils'),
-  css: path.join(__dirname, '/css/'),
+  dist: resolve('/dist'),
+  pages: resolve('/js/pages'),
+  components: resolve('/js/components'),
+  config: resolve('/js/config'),
+  ducks: resolve('/js/ducks'),
+  interfaces: resolve('/js/interfaces'),
+  utils: resolve('/js/utils'),
+  css: resolve('/css/'),
 };
 
 // Process of Templates
@@ -48,10 +56,7 @@ const htmlWebpackPluginConfig = templatesList.map((file) => {
 
 const config: webpack.Configuration = {
   entry: {
-    main: [
-      path.join(__dirname, '/css/styles.scss'),
-      path.join(__dirname, '/js/index.tsx'),
-    ],
+    main: [resolve('/css/styles.scss'), resolve('/js/index.tsx')],
   },
   output: {
     publicPath: '/static/dist/',
@@ -68,7 +73,7 @@ const config: webpack.Configuration = {
       interfaces: PATHS.interfaces,
       utils: PATHS.utils,
     },
-    extensions: ['.tsx', '.ts', '.js', '.jsx', '.css', '.scss'],
+    extensions: RESOLVED_EXTENSIONS,
   },
   module: {
     rules: [