[typescript] Create Ambient Types package (#129368)

* WIP

* tweak @kbn/ambient-ui-types for special usecase

* remove @types/ for ambient-ui-types, the package is a types package

* Split types; remove duplicate types in packages

* Adjust README

* Update CODEOWNERS

* Addressing feedback

* Move to tsconfig.base.json

* Fix missing types array in kbn/field-types

* Addressing errors

* Return declaration

* move storybook types to storybook specific package

* add codeowner for new package

Co-authored-by: spalger <spencer@elastic.co>

.github/CODEOWNERS

@@ -220,21 +220,23 @@
 /src/setup_node_env/ @elastic/kibana-operations
 /packages/*eslint*/ @elastic/kibana-operations
 /packages/*babel*/ @elastic/kibana-operations
+/packages/kbn-ambient-ui-types/ @elastic/kibana-operations
+/packages/kbn-ambient-storybook-types/ @elastic/kibana-operations
+/packages/kbn-bazel-packages/ @elastic/kibana-operations
+/packages/kbn-cli-dev-mode/ @elastic/kibana-operations
 /packages/kbn-dev-utils*/ @elastic/kibana-operations
+/packages/kbn-es-archiver/ @elastic/kibana-operations
 /packages/kbn-es/ @elastic/kibana-operations
 /packages/kbn-eslint-plugin-imports/ @elastic/kibana-operations
+/packages/kbn-generate/ @elastic/kibana-operations
 /packages/kbn-optimizer/ @elastic/kibana-operations
+/packages/kbn-plugin-discovery/ @elastic/kibana-operations
 /packages/kbn-pm/ @elastic/kibana-operations
 /packages/kbn-test/ @elastic/kibana-operations
 /packages/kbn-type-summarizer/ @elastic/kibana-operations
 /packages/kbn-ui-shared-deps-npm/ @elastic/kibana-operations
 /packages/kbn-ui-shared-deps-src/ @elastic/kibana-operations
-/packages/kbn-bazel-packages/ @elastic/kibana-operations
-/packages/kbn-es-archiver/ @elastic/kibana-operations
 /packages/kbn-utils/ @elastic/kibana-operations
-/packages/kbn-cli-dev-mode/ @elastic/kibana-operations
-/packages/kbn-generate/ @elastic/kibana-operations
-/packages/kbn-plugin-discovery/ @elastic/kibana-operations
 /src/cli/keystore/ @elastic/kibana-operations
 /.ci/es-snapshots/ @elastic/kibana-operations
 /.github/workflows/ @elastic/kibana-operations

package.json

@@ -131,6 +131,8 @@
     "@hapi/wreck": "^17.1.0",
     "@kbn/ace": "link:bazel-bin/packages/kbn-ace",
     "@kbn/alerts": "link:bazel-bin/packages/kbn-alerts",
+    "@kbn/ambient-storybook-types": "link:bazel-bin/packages/kbn-ambient-storybook-types",
+    "@kbn/ambient-ui-types": "link:bazel-bin/packages/kbn-ambient-ui-types",
     "@kbn/analytics": "link:bazel-bin/packages/kbn-analytics",
     "@kbn/apm-config-loader": "link:bazel-bin/packages/kbn-apm-config-loader",
     "@kbn/apm-utils": "link:bazel-bin/packages/kbn-apm-utils",

packages/BUILD.bazel

@@ -16,6 +16,8 @@ filegroup(
     "//packages/elastic-safer-lodash-set:build",
     "//packages/kbn-ace:build",
     "//packages/kbn-alerts:build",
+    "//packages/kbn-ambient-storybook-types:build",
+    "//packages/kbn-ambient-ui-types:build",
     "//packages/kbn-analytics:build",
     "//packages/kbn-apm-config-loader:build",
     "//packages/kbn-apm-utils:build",

packages/kbn-ambient-storybook-types/BUILD.bazel

@@ -0,0 +1,59 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
+
+PKG_DIRNAME = "kbn-ambient-storybook-types"
+PKG_REQUIRE_NAME = "@kbn/ambient-storybook-types"
+
+SRCS = glob(
+  [
+    "*.d.ts",
+  ]
+)
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+]
+
+# In this array place runtime dependencies, including other packages and NPM packages
+# which must be available for this code to run.
+#
+#  To reference other packages use:
+#    "//repo/relative/path/to/package"
+#    eg. "//packages/kbn-utils"
+#
+#  To reference a NPM package use:
+#    "@npm//name-of-package"
+#    eg. "@npm//lodash"
+RUNTIME_DEPS = [
+]
+
+js_library(
+  name = PKG_DIRNAME,
+  srcs = SRCS + NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS,
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+alias(
+  name = "npm_module_types",
+  actual = ":" + PKG_DIRNAME,
+  visibility = ["//visibility:public"],
+)

packages/kbn-ambient-storybook-types/README.md

@@ -0,0 +1,3 @@
+# @kbn/ambient-storybook-types
+
+Ambient types needed to use storybook.

packages/kbn-ambient-storybook-types/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/ambient-storybook-types",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/kbn-ambient-storybook-types/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "target_types",
+    "rootDir": "src",
+    "stripInternal": false,
+    "types": []
+  },
+  "include": [
+    "*.d.ts"
+  ]
+}

packages/kbn-ambient-ui-types/BUILD.bazel

@@ -0,0 +1,59 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
+
+PKG_DIRNAME = "kbn-ambient-ui-types"
+PKG_REQUIRE_NAME = "@kbn/ambient-ui-types"
+
+SRCS = glob(
+  [
+    "*.d.ts",
+  ]
+)
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+]
+
+# In this array place runtime dependencies, including other packages and NPM packages
+# which must be available for this code to run.
+#
+#  To reference other packages use:
+#    "//repo/relative/path/to/package"
+#    eg. "//packages/kbn-utils"
+#
+#  To reference a NPM package use:
+#    "@npm//name-of-package"
+#    eg. "@npm//lodash"
+RUNTIME_DEPS = [
+]
+
+js_library(
+  name = PKG_DIRNAME,
+  srcs = SRCS + NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS,
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+alias(
+  name = "npm_module_types",
+  actual = ":" + PKG_DIRNAME,
+  visibility = ["//visibility:public"],
+)

packages/kbn-ambient-ui-types/README.mdx

@@ -0,0 +1,12 @@
+# @kbn/ambient-ui-types
+
+This is a package of Typescript types for files that might get imported by Webpack and therefore need definitions.
+
+These types will automatically be included for plugins.
+
+## Packages
+
+To include these types in a package:
+
+- add `"//packages/kbn-ambient-ui-types"` to the `RUNTIME_DEPS` portion of the `BUILD.bazel` file.
+- add `"@kbn/ambient-ui-types"` to the `types` portion of the `tsconfig.json` file.

packages/kbn-ambient-ui-types/index.d.ts

@@ -6,7 +6,24 @@
  * Side Public License, v 1.
  */
 
-// Importing MDX files requires a type definition not currently included in the stack.
+declare module '*.html' {
+  const template: string;
+  // eslint-disable-next-line import/no-default-export
+  export default template;
+}
+
+declare module '*.png' {
+  const content: string;
+  // eslint-disable-next-line import/no-default-export
+  export default content;
+}
+
+declare module '*.svg' {
+  const content: string;
+  // eslint-disable-next-line import/no-default-export
+  export default content;
+}
+
 declare module '*.mdx' {
   let MDXComponent: (props: any) => JSX.Element;
   // eslint-disable-next-line import/no-default-export

packages/kbn-ambient-ui-types/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/ambient-ui-types",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/kbn-ambient-ui-types/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "target_types",
+    "stripInternal": false,
+    "types": [
+      "@types/react",
+    ]
+  },
+  "include": [
+    "*.d.ts"
+  ]
+}

packages/kbn-field-types/tsconfig.json

@@ -5,6 +5,11 @@
     "declaration": true,
     "emitDeclarationOnly": true,
     "rootDir": "src",
+    "types": [
+      "jest",
+    ],
   },
-  "include": ["src/**/*"]
+  "include": [
+    "src/**/*"
+  ]
 }

packages/kbn-shared-ux-components/BUILD.bazel

@@ -69,6 +69,7 @@ TYPES_DEPS = [
   "//packages/kbn-shared-ux-services:npm_module_types",
   "//packages/kbn-shared-ux-storybook:npm_module_types",
   "//packages/kbn-shared-ux-utility:npm_module_types",
+  "//packages/kbn-ambient-ui-types",
   "@npm//@types/node",
   "@npm//@types/jest",
   "@npm//@types/react",

packages/kbn-shared-ux-components/src/svg.d.ts

@@ -1,13 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-declare module '*.svg' {
-  const content: string;
-  // eslint-disable-next-line import/no-default-export
-  export default content;
-}

packages/kbn-shared-ux-components/tsconfig.json

@@ -9,7 +9,8 @@
     "types": [
       "jest",
       "node",
-      "@emotion/react/types/css-prop"
+      "@emotion/react/types/css-prop",
+      "@kbn/ambient-ui-types",
     ]
   },
   "include": [

packages/kbn-shared-ux-storybook/BUILD.bazel

@@ -55,6 +55,8 @@ RUNTIME_DEPS = [
 TYPES_DEPS = [
   "//packages/kbn-shared-ux-services:npm_module_types",
   "//packages/kbn-storybook:npm_module_types",
+  "//packages/kbn-ambient-ui-types:npm_module_types",
+  "//packages/kbn-ambient-storybook-types:npm_module_types",
   "@npm//@types/node",
   "@npm//@types/jest",
   "@npm//@storybook/react",

packages/kbn-shared-ux-storybook/src/file_system_cache.d.ts

@@ -1,31 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-// Storybook uses this module and its types are defined in the source but not in the type output
-declare module 'file-system-cache' {
-  interface Options {
-    basePath?: string;
-    ns?: string | string[];
-    extension?: string;
-  }
-
-  class FileSystemCache {
-    constructor(options: Options);
-    path(key: string): string;
-    fileExists(key: string): Promise<boolean>;
-    ensureBasePath(): Promise<void>;
-    get(key: string, defaultValue?: any): Promise<any | typeof defaultValue>;
-    getSync(key: string, defaultValue?: any): any | typeof defaultValue;
-    set(key: string, value: any): Promise<{ path: string }>;
-    setSync(key: string, value: any): this;
-    remove(key: string): Promise<void>;
-    clear(): Promise<void>;
-    save(): Promise<{ paths: string[] }>;
-    load(): Promise<{ files: Array<{ path: string; value: any }> }>;
-  }
-}

packages/kbn-shared-ux-storybook/src/mdx.d.ts

@@ -1,14 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-// Importing MDX files requires a type definition not currently included in the stack.
-declare module '*.mdx' {
-  let MDXComponent: (props: any) => JSX.Element;
-  // eslint-disable-next-line import/no-default-export
-  export default MDXComponent;
-}

packages/kbn-shared-ux-storybook/tsconfig.json

@@ -8,7 +8,8 @@
     "stripInternal": false,
     "types": [
       "jest",
-      "node"
+      "node",
+      "@kbn/ambient-storybook-types",
     ]
   },
   "include": [

packages/kbn-storybook/BUILD.bazel

@@ -54,6 +54,7 @@ TYPES_DEPS = [
   "//packages/kbn-ui-shared-deps-npm:npm_module_types",
   "//packages/kbn-ui-shared-deps-src:npm_module_types",
   "//packages/kbn-utils:npm_module_types",
+  "//packages/kbn-ambient-storybook-types:npm_module_types",
   "@npm//@elastic/eui",
   "@npm//@emotion/cache",
   "@npm//@storybook/addons",

packages/kbn-storybook/tsconfig.json

@@ -8,9 +8,13 @@
     "rootDir": "src",
     "skipLibCheck": true,
     "target": "es2015",
-    "types": ["node"]
+    "types": [
+      "node",
+      "@kbn/ambient-storybook-types"
+    ]
   },
   "include": [
-    "src/**/*.ts", "src/**/*.tsx"
+    "src/**/*.ts",
+    "src/**/*.tsx"
   ]
 }

test/tsconfig.json

@@ -5,7 +5,11 @@
     "emitDeclarationOnly": true,
     "declaration": true,
     "declarationMap": true,
-    "types": ["node", "@emotion/react/types/css-prop"]
+    "types": [
+      "node", 
+      "@emotion/react/types/css-prop",
+      "@kbn/ambient-ui-types",
+    ]
   },
   "include": [
     "**/*",

tsconfig.base.json

@@ -69,7 +69,9 @@
       "flot",
       "jest-styled-components",
       "@testing-library/jest-dom",
-      "@emotion/react/types/css-prop"
+      "@emotion/react/types/css-prop",
+      "@kbn/ambient-ui-types",
+      "@kbn/ambient-storybook-types",
     ]
   }
 }

typings/index.d.ts

@@ -6,24 +6,6 @@
  * Side Public License, v 1.
  */
 
-declare module '*.html' {
-  const template: string;
-  // eslint-disable-next-line import/no-default-export
-  export default template;
-}
-
-declare module '*.png' {
-  const content: string;
-  // eslint-disable-next-line import/no-default-export
-  export default content;
-}
-
-declare module '*.svg' {
-  const content: string;
-  // eslint-disable-next-line import/no-default-export
-  export default content;
-}
-
 declare module 'axios/lib/adapters/xhr';
 
 // Storybook references this module. It's @ts-ignored in the codebase but when
@@ -38,27 +20,3 @@ declare module 'react-syntax-highlighter/dist/cjs/prism-light';
 declare module 'monaco-editor/esm/vs/basic-languages/markdown/markdown';
 declare module 'monaco-editor/esm/vs/basic-languages/css/css';
 declare module 'monaco-editor/esm/vs/basic-languages/yaml/yaml';
-
-// Storybook uses this module and its types are defined in the source but not in the type output
-declare module 'file-system-cache' {
-  interface Options {
-    basePath?: string;
-    ns?: string | string[];
-    extension?: string;
-  }
-
-  class FileSystemCache {
-    constructor(options: Options);
-    path(key: string): string;
-    fileExists(key: string): Promise<boolean>;
-    ensureBasePath(): Promise<void>;
-    get(key: string, defaultValue?: any): Promise<any | typeof defaultValue>;
-    getSync(key: string, defaultValue?: any): any | typeof defaultValue;
-    set(key: string, value: any): Promise<{ path: string }>;
-    setSync(key: string, value: any): this;
-    remove(key: string): Promise<void>;
-    clear(): Promise<void>;
-    save(): Promise<{ paths: string[] }>;
-    load(): Promise<{ files: Array<{ path: string; value: any }> }>;
-  }
-}

yarn.lock

@@ -2924,6 +2924,14 @@
   version "0.0.0"
   uid ""
 
+"@kbn/ambient-storybook-types@link:bazel-bin/packages/kbn-ambient-storybook-types":
+  version "0.0.0"
+  uid ""
+
+"@kbn/ambient-ui-types@link:bazel-bin/packages/kbn-ambient-ui-types":
+  version "0.0.0"
+  uid ""
+
 "@kbn/analytics@link:bazel-bin/packages/kbn-analytics":
   version "0.0.0"
   uid ""