chore(NA): moving @kbn/storybook to babel transpiler (#107547)

* chore(NA): moving @kbn/storybook to babel transpiler

* chore(NA): fix import from kbn/storybook

* chore(NA): fix public interface

* chore(NA): fix kbn-storybook preset

* chore(NA): update types

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

packages/kbn-storybook/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@kbn/babel-preset/node_preset"]
+}

packages/kbn-storybook/BUILD.bazel

@@ -1,14 +1,14 @@
 load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_project")
 load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler")
 
 PKG_BASE_NAME = "kbn-storybook"
 PKG_REQUIRE_NAME = "@kbn/storybook"
 
 SOURCE_FILES = glob(
   [
-    "lib/**/*.ts",
-    "lib/**/*.tsx",
-    "*.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
   ],
   exclude = ["**/*.test.*"],
 )
@@ -28,7 +28,7 @@ NPM_MODULE_EXTRA_FILES = [
   "preset.js",
 ]
 
-SRC_DEPS = [
+RUNTIME_DEPS = [
   "//packages/kbn-dev-utils",
   "//packages/kbn-ui-shared-deps",
   "@npm//@storybook/addons",
@@ -45,13 +45,27 @@ SRC_DEPS = [
 ]
 
 TYPES_DEPS = [
+  "//packages/kbn-dev-utils",
+  "//packages/kbn-ui-shared-deps",
+  "@npm//@storybook/addons",
+  "@npm//@storybook/api",
+  "@npm//@storybook/components",
+  "@npm//@storybook/core",
+  "@npm//@storybook/node-logger",
+  "@npm//@storybook/react",
+  "@npm//@storybook/theming",
   "@npm//@types/loader-utils",
   "@npm//@types/node",
+  "@npm//@types/react",
   "@npm//@types/webpack",
   "@npm//@types/webpack-merge",
 ]
 
-DEPS = SRC_DEPS + TYPES_DEPS
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
 
 ts_config(
   name = "tsconfig",
@@ -62,14 +76,16 @@ ts_config(
 )
 
 ts_project(
-  name = "tsc",
+  name = "tsc_types",
   args = ['--pretty'],
   srcs = SRCS,
-  deps = DEPS,
+  deps = TYPES_DEPS,
   declaration = True,
   declaration_map = True,
-  incremental = True,
-  out_dir = "target",
+  emit_declaration_only = True,
+  incremental = False,
+  out_dir = "target_types",
+  root_dir = "src",
   source_map = True,
   tsconfig = ":tsconfig",
 )
@@ -77,7 +93,7 @@ ts_project(
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = [":tsc"] + DEPS,
+  deps = RUNTIME_DEPS + [":target_node", ":tsc_types"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )

packages/kbn-storybook/package.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "private": true,
   "license": "SSPL-1.0 OR Elastic License 2.0",
-  "main": "./target/index.js",
-  "types": "./target/index.d.ts",
+  "main": "./target_node/index.js",
+  "types": "./target_types/index.d.ts",
   "kibana": {
     "devOnly": true
   }

packages/kbn-storybook/preset.js

@@ -7,11 +7,11 @@
  */
 
 // eslint-disable-next-line
-const webpackConfig = require('./target/webpack.config').default;
+const webpackConfig = require('./target_node/webpack.config');
 
 module.exports = {
   managerEntries: (entry = []) => {
-    return [...entry, require.resolve('./target/lib/register')];
+    return [...entry, require.resolve('./target_node/lib/register')];
   },
   webpackFinal: (config) => {
     return webpackConfig({ config });

packages/kbn-storybook/src/index.ts

@@ -8,3 +8,4 @@
 
 export { defaultConfig } from './lib/default_config';
 export { runStorybookCli } from './lib/run_storybook_cli';
+export { default as WebpackConfig } from './webpack.config';

packages/kbn-storybook/tsconfig.json

@@ -1,15 +1,19 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "incremental": true,
-    "outDir": "target",
-    "skipLibCheck": true,
     "declaration": true,
     "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "incremental": false,
+    "outDir": "target_types",
+    "rootDir": "src",
+    "skipLibCheck": true,
     "sourceMap": true,
     "sourceRoot": "../../../../packages/kbn-storybook",
     "target": "es2015",
     "types": ["node"]
   },
-  "include": ["*.ts", "lib/**/*.ts", "lib/**/*.tsx"]
+  "include": [
+    "src/**/*.ts", "src/**/*.tsx"
+  ]
 }

src/plugins/presentation_util/storybook/main.ts

@@ -7,13 +7,12 @@
  */
 
 import { Configuration } from 'webpack';
-import { defaultConfig } from '@kbn/storybook';
-import webpackConfig from '@kbn/storybook/target/webpack.config';
+import { defaultConfig, WebpackConfig } from '@kbn/storybook';
 
 module.exports = {
   ...defaultConfig,
   addons: ['@storybook/addon-essentials'],
   webpackFinal: (config: Configuration) => {
-    return webpackConfig({ config });
+    return WebpackConfig({ config });
   },
 };