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

* 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

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

package.json

@@ -468,7 +468,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",

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",

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"],
+)

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"
   }
 }

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 = {

packages/kbn-storybook/preset/package.json

@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "main": "../preset.js"
+}

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"]
 }

packages/kbn-storybook/typings.d.ts → 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';

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');
   }
 
   return webpackMerge(storybookConfig, config);

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": {

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 ""