Merge pull request #2911 from bryceosterhaus/2891

 chore: update storybook dependencies and config

.storybook/main.js

@@ -0,0 +1,47 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+module.exports = {
+	addons: [
+		{
+			name: '@storybook/addon-storysource',
+			options: {
+				rule: {
+					test: /stories\/.*\.tsx$/,
+				},
+				loaderOptions: {
+					parser: 'typescript',
+				},
+			},
+		},
+
+		'@storybook/addon-a11y/register',
+		'@storybook/addon-knobs/register',
+	],
+	webpackFinal: config => {
+		config.module.rules.push({
+			test: /\.(ts|tsx)$/,
+			loader: require.resolve('babel-loader'),
+		});
+
+		config.module.rules.push({
+			test: /\.scss$/,
+			use: [
+				require.resolve('style-loader'),
+				require.resolve('css-loader'),
+				require.resolve('sass-loader'),
+			],
+		});
+
+		config.resolve.mainFields = ['ts:main', 'module', 'main'];
+
+		config.resolve.extensions.push('.ts', '.tsx');
+
+		config.plugins.push(
+			new ForkTsCheckerWebpackPlugin({
+				reportFiles: ['packages/**/*.{ts,tsx}'],
+			})
+		);
+
+		return config;
+	},
+};

package.json

@@ -27,18 +27,10 @@
 		"@babel/preset-env": "^7.0.0",
 		"@babel/preset-react": "^7.0.0",
 		"@babel/preset-typescript": "^7.0.0",
-		"@clayui/button": "^3.0.0",
-		"@clayui/data-provider": "^3.0.0",
-		"@clayui/drop-down": "^3.0.0",
-		"@clayui/form": "^3.0.0",
-		"@clayui/icon": "^3.0.0",
-		"@clayui/label": "^3.0.0",
-		"@clayui/progress-bar": "^3.0.0",
-		"@clayui/shared": "^3.0.1",
-		"@storybook/addon-a11y": "^5.0.6",
-		"@storybook/addon-knobs": "^5.0.6",
-		"@storybook/addon-storysource": "^5.0.6",
-		"@storybook/react": "^5.0.6",
+		"@storybook/addon-a11y": "^5.3.12",
+		"@storybook/addon-knobs": "^5.3.12",
+		"@storybook/addon-storysource": "^5.3.12",
+		"@storybook/react": "^5.3.12",
 		"@testing-library/jest-dom": "^4.0.1",
 		"@testing-library/react": "^9.1.3",
 		"@types/classnames": "^2.2.7",
@@ -50,14 +42,13 @@
 		"@types/react": "^16.8.0",
 		"@types/react-dom": "^16.8.0",
 		"@types/react-test-renderer": "^16.8.0",
-		"@types/storybook__addon-a11y": "5.0.0",
-		"@types/storybook__addon-knobs": "^5.0.4",
-		"@types/storybook__react": "^4.0.1",
+		"@types/storybook__addon-a11y": "5.1.2",
+		"@types/storybook__addon-knobs": "^5.2.1",
+		"@types/storybook__react": "^5.2.1",
 		"@types/tinycolor2": "^1.4.1",
 		"@types/warning": "^3.0.0",
 		"@typescript-eslint/eslint-plugin": "^1.10.2",
 		"@typescript-eslint/parser": "^2.3.1",
-		"awesome-typescript-loader": "^5.2.1",
 		"babel-loader": "^7.0.0",
 		"babel-plugin-dev-expression": "^0.2.1",
 		"babel-plugin-react-remove-properties": "^0.3.0",
@@ -67,6 +58,7 @@
 		"css-loader": "^2.1.1",
 		"eslint": "^6.5.1",
 		"eslint-config-liferay": "^13.0.0",
+		"fork-ts-checker-webpack-plugin": "^4.0.3",
 		"jest": "^24.1.0",
 		"jest-fetch-mock": "^2.0.1",
 		"lerna": "^3.4.0",

packages/clay-modal/stories/index.tsx

@@ -80,7 +80,7 @@ storiesOf('Components|ClayModal', module)
 						</ClayModal.Header>
 						<ClayModal.Body
 							scrollable={boolean('scrollable', false)}
-							url={text('Url', null)}
+							url={text('Url', '')}
 						>
 							<h1>{'Hello world!'}</h1>
 							<div>

tsconfig.json

@@ -15,11 +15,7 @@
 			"*": ["custom-types/*", "node_modules/*", "packages/*"]
 		}
 	},
-	"awesomeTypescriptLoaderOptions": {
-		"useBabel": true,
-		"babelCore": "@babel/core"
-	},
-	"include": ["packages/*"],
+	"include": ["packages/**/*"],
 	"exclude": [
 		"node_modules",
 		"packages/**/lib",