From 875af978284cede3a808b55cd3d865b13af214d4 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Mon, 21 Jun 2021 17:25:18 -0400
Subject: [PATCH] chore(NA): moving @kbn/storybook into bazel (#102731)
 (#102806)

* chore(NA): moving @kbn/storybook into bazel

* chore(NA): add some typing changes

* chore(NA): rename typings file

* chore(NA): fix typescript configs to build storybooks

* chore(NA): fix eslint and typechecking

Co-authored-by: Tiago Costa <tiagoffcc@hotmail.com>
---
 .../monorepo-packages.asciidoc                |  1 +
 package.json                                  |  2 +-
 packages/BUILD.bazel                          |  1 +
 packages/kbn-storybook/BUILD.bazel            | 98 +++++++++++++++++++
 packages/kbn-storybook/package.json           |  5 -
 packages/kbn-storybook/preset.js              |  1 +
 packages/kbn-storybook/preset/package.json    |  4 +
 .../{lib => }/templates/index.ejs             |  0
 packages/kbn-storybook/tsconfig.json          |  7 +-
 .../{typings.d.ts => typings.ts}              |  8 ++
 packages/kbn-storybook/webpack.config.ts      |  2 +-
 x-pack/package.json                           |  1 -
 yarn.lock                                     |  2 +-
 13 files changed, 120 insertions(+), 12 deletions(-)
 create mode 100644 packages/kbn-storybook/BUILD.bazel
 create mode 100644 packages/kbn-storybook/preset/package.json
 rename packages/kbn-storybook/{lib => }/templates/index.ejs (100%)
 rename packages/kbn-storybook/{typings.d.ts => typings.ts} (56%)

diff --git a/docs/developer/getting-started/monorepo-packages.asciidoc b/docs/developer/getting-started/monorepo-packages.asciidoc
index c211751c09b49a..ebab9de66032fd 100644
--- a/docs/developer/getting-started/monorepo-packages.asciidoc
+++ b/docs/developer/getting-started/monorepo-packages.asciidoc
@@ -100,6 +100,7 @@ yarn kbn watch-bazel
 - @kbn/server-http-tools
 - @kbn/server-route-repository
 - @kbn/std
+- @kbn/storybook
 - @kbn/telemetry-utils
 - @kbn/tinymath
 - @kbn/ui-shared-deps
diff --git a/package.json b/package.json
index bc040960b23dc4..f1f2e233f134de 100644
--- a/package.json
+++ b/package.json
@@ -465,7 +465,7 @@
     "@kbn/plugin-generator": "link:bazel-bin/packages/kbn-plugin-generator",
     "@kbn/plugin-helpers": "link:packages/kbn-plugin-helpers",
     "@kbn/pm": "link:packages/kbn-pm",
-    "@kbn/storybook": "link:packages/kbn-storybook",
+    "@kbn/storybook": "link:bazel-bin/packages/kbn-storybook",
     "@kbn/telemetry-tools": "link:bazel-bin/packages/kbn-telemetry-tools",
     "@kbn/test": "link:packages/kbn-test",
     "@kbn/test-subj-selector": "link:packages/kbn-test-subj-selector",
diff --git a/packages/BUILD.bazel b/packages/BUILD.bazel
index 6208910729625f..61034c562b4475 100644
--- a/packages/BUILD.bazel
+++ b/packages/BUILD.bazel
@@ -44,6 +44,7 @@ filegroup(
       "//packages/kbn-server-http-tools:build",
       "//packages/kbn-server-route-repository:build",
       "//packages/kbn-std:build",
+      "//packages/kbn-storybook:build",
       "//packages/kbn-telemetry-tools:build",
       "//packages/kbn-tinymath:build",
       "//packages/kbn-ui-shared-deps:build",
diff --git a/packages/kbn-storybook/BUILD.bazel b/packages/kbn-storybook/BUILD.bazel
new file mode 100644
index 00000000000000..e18256aeb8da46
--- /dev/null
+++ b/packages/kbn-storybook/BUILD.bazel
@@ -0,0 +1,98 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_project")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm")
+
+PKG_BASE_NAME = "kbn-storybook"
+PKG_REQUIRE_NAME = "@kbn/storybook"
+
+SOURCE_FILES = glob(
+  [
+    "lib/**/*.ts",
+    "lib/**/*.tsx",
+    "*.ts",
+  ],
+  exclude = ["**/*.test.*"],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "preset/package.json",
+  "templates/index.ejs",
+  "package.json",
+  "README.md",
+  "preset.js",
+]
+
+SRC_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//loader-utils",
+  "@npm//react",
+  "@npm//webpack",
+  "@npm//webpack-merge",
+]
+
+TYPES_DEPS = [
+  "@npm//@types/loader-utils",
+  "@npm//@types/node",
+  "@npm//@types/webpack",
+  "@npm//@types/webpack-merge",
+]
+
+DEPS = SRC_DEPS + TYPES_DEPS
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+  ],
+)
+
+ts_project(
+  name = "tsc",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = DEPS,
+  declaration = True,
+  declaration_map = True,
+  incremental = True,
+  out_dir = "target",
+  source_map = True,
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_BASE_NAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = [":tsc"] + DEPS,
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [
+    ":%s" % PKG_BASE_NAME,
+  ]
+)
+
+filegroup(
+  name = "build",
+  srcs = [
+    ":npm_module",
+  ],
+  visibility = ["//visibility:public"],
+)
diff --git a/packages/kbn-storybook/package.json b/packages/kbn-storybook/package.json
index f2e4c9b3418b1e..f3c12f19a07934 100644
--- a/packages/kbn-storybook/package.json
+++ b/packages/kbn-storybook/package.json
@@ -7,10 +7,5 @@
   "types": "./target/index.d.ts",
   "kibana": {
     "devOnly": true
-  },
-  "scripts": {
-    "build": "../../node_modules/.bin/tsc",
-    "kbn:bootstrap": "yarn build",
-    "kbn:watch": "yarn build --watch"
   }
 }
\ No newline at end of file
diff --git a/packages/kbn-storybook/preset.js b/packages/kbn-storybook/preset.js
index c1b7195c141b46..be0012a3818b17 100644
--- a/packages/kbn-storybook/preset.js
+++ b/packages/kbn-storybook/preset.js
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+// eslint-disable-next-line
 const webpackConfig = require('./target/webpack.config').default;
 
 module.exports = {
diff --git a/packages/kbn-storybook/preset/package.json b/packages/kbn-storybook/preset/package.json
new file mode 100644
index 00000000000000..7cd7517d64dde0
--- /dev/null
+++ b/packages/kbn-storybook/preset/package.json
@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "main": "../preset.js"
+}
\ No newline at end of file
diff --git a/packages/kbn-storybook/lib/templates/index.ejs b/packages/kbn-storybook/templates/index.ejs
similarity index 100%
rename from packages/kbn-storybook/lib/templates/index.ejs
rename to packages/kbn-storybook/templates/index.ejs
diff --git a/packages/kbn-storybook/tsconfig.json b/packages/kbn-storybook/tsconfig.json
index 586f5ea32c0560..1f6886c45c505f 100644
--- a/packages/kbn-storybook/tsconfig.json
+++ b/packages/kbn-storybook/tsconfig.json
@@ -1,14 +1,15 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "incremental": false,
+    "incremental": true,
     "outDir": "target",
     "skipLibCheck": true,
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
     "sourceRoot": "../../../../packages/kbn-storybook",
+    "target": "es2015",
     "types": ["node"]
   },
-  "include": ["*.ts", "lib/**/*.ts", "lib/**/*.tsx", "../../typings/index.d.ts"]
+  "include": ["*.ts", "lib/**/*.ts", "lib/**/*.tsx"]
 }
diff --git a/packages/kbn-storybook/typings.d.ts b/packages/kbn-storybook/typings.ts
similarity index 56%
rename from packages/kbn-storybook/typings.d.ts
rename to packages/kbn-storybook/typings.ts
index b940de28299092..6c5d8f4da57097 100644
--- a/packages/kbn-storybook/typings.d.ts
+++ b/packages/kbn-storybook/typings.ts
@@ -8,3 +8,11 @@
 
 // Storybook react doesn't declare this in its typings, but it's there.
 declare module '@storybook/react/standalone';
+
+// Storybook references this module. It's @ts-ignored in the codebase but when
+// built into its dist it strips that out. Add it here to avoid a type checking
+// error.
+//
+// See https://github.com/storybookjs/storybook/issues/11684
+declare module 'react-syntax-highlighter/dist/cjs/create-element';
+declare module 'react-syntax-highlighter/dist/cjs/prism-light';
diff --git a/packages/kbn-storybook/webpack.config.ts b/packages/kbn-storybook/webpack.config.ts
index f25e87a7f2f4fa..4af3496768734c 100644
--- a/packages/kbn-storybook/webpack.config.ts
+++ b/packages/kbn-storybook/webpack.config.ts
@@ -94,7 +94,7 @@ export default function ({ config: storybookConfig }: { config: Configuration })
     return plugin.options && typeof plugin.options.template === 'string';
   });
   if (htmlWebpackPlugin) {
-    htmlWebpackPlugin.options.template = require.resolve('../lib/templates/index.ejs');
+    htmlWebpackPlugin.options.template = require.resolve('../templates/index.ejs');
   }
 
   // @ts-ignore There's a long error here about the types of the
diff --git a/x-pack/package.json b/x-pack/package.json
index 6824a1346d6d8a..59b9b21e239dd0 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -27,7 +27,6 @@
   },
   "devDependencies": {
     "@kbn/plugin-helpers": "link:../packages/kbn-plugin-helpers",
-    "@kbn/storybook": "link:../packages/kbn-storybook",
     "@kbn/test": "link:../packages/kbn-test"
   },
   "dependencies": {
diff --git a/yarn.lock b/yarn.lock
index d648c885d5b709..c5ce5fbd0265c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2768,7 +2768,7 @@
   version "0.0.0"
   uid ""
 
-"@kbn/storybook@link:packages/kbn-storybook":
+"@kbn/storybook@link:bazel-bin/packages/kbn-storybook":
   version "0.0.0"
   uid ""