chore: Updates Storybook to version 6 (#712)

* Removing story.name

Signed-off-by: Marcos Iglesias <[email protected]>

* Adding pre-push hook

Signed-off-by: Marcos Iglesias <[email protected]>

* Updating Flag and Card

Signed-off-by: Marcos Iglesias <[email protected]>

* Updating Storybook to version 6

Signed-off-by: Marcos Iglesias <[email protected]>

* Updating betterer results

Signed-off-by: Marcos Iglesias <[email protected]>

* Update eslint config

Signed-off-by: Marcos Iglesias <[email protected]>

* Update eslint config

Signed-off-by: Marcos Iglesias <[email protected]>

* Removing pre-push hook as it runs on .src-custom

Signed-off-by: Marcos Iglesias <[email protected]>
Signed-off-by: dikshathakur3119 <[email protected]>

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

@@ -1,15 +1,34 @@
-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

@@ -1,22 +1,18 @@
-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

@@ -0,0 +1,77 @@
+// 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';