extract field components to a package

package.json

@@ -136,6 +136,7 @@
     "@kbn/logging": "link:bazel-bin/packages/kbn-logging",
     "@kbn/mapbox-gl": "link:bazel-bin/packages/kbn-mapbox-gl",
     "@kbn/monaco": "link:bazel-bin/packages/kbn-monaco",
+    "@kbn/react-field": "link:bazel-bin/packages/kbn-react-field",
     "@kbn/rule-data-utils": "link:bazel-bin/packages/kbn-rule-data-utils",
     "@kbn/securitysolution-autocomplete": "link:bazel-bin/packages/kbn-securitysolution-autocomplete",
     "@kbn/securitysolution-es-utils": "link:bazel-bin/packages/kbn-securitysolution-es-utils",

packages/BUILD.bazel

@@ -36,6 +36,7 @@ filegroup(
       "//packages/kbn-optimizer:build",
       "//packages/kbn-plugin-generator:build",
       "//packages/kbn-plugin-helpers:build",
+      "//packages/kbn-react-field:build",
       "//packages/kbn-rule-data-utils:build",
       "//packages/kbn-securitysolution-autocomplete:build",
       "//packages/kbn-securitysolution-list-constants:build",

packages/kbn-optimizer/src/worker/webpack.config.ts

@@ -28,6 +28,14 @@ const IS_CODE_COVERAGE = !!process.env.CODE_COVERAGE;
 const ISTANBUL_PRESET_PATH = require.resolve('@kbn/babel-preset/istanbul_preset');
 const BABEL_PRESET_PATH = require.resolve('@kbn/babel-preset/webpack_preset');
 
+const nodeModulesButNotKbnPackages = (path: string) => {
+  if (!path.includes('node_modules')) {
+    return false;
+  }
+
+  return !path.includes(`node_modules${Path.sep}@kbn${Path.sep}`);
+};
+
 export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: WorkerConfig) {
   const ENTRY_CREATOR = require.resolve('./entry_point_creator');
 
@@ -134,7 +142,7 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
         },
         {
           test: /\.scss$/,
-          exclude: /node_modules/,
+          exclude: nodeModulesButNotKbnPackages,
           oneOf: [
             ...worker.themeTags.map((theme) => ({
               resourceQuery: `?${theme}`,

packages/kbn-react-field/BUILD.bazel

@@ -0,0 +1,119 @@
+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-react-field"
+PKG_REQUIRE_NAME = "@kbn/react-field"
+
+SOURCE_FILES = glob(
+  [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.scss",
+    "src/**/*.svg",
+  ],
+  exclude = [
+    "**/*.test.*",
+    "**/__fixtures__/**",
+    "**/__snapshots__/**",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+  "README.md"
+]
+
+RUNTIME_DEPS = [
+  "@npm//prop-types",
+  "@npm//react",
+  "@npm//classnames",
+  "@npm//@elastic/eui",
+  "//packages/kbn-i18n",
+]
+
+TYPES_DEPS = [
+  "//packages/kbn-babel-preset",
+  "//packages/kbn-i18n",
+  "@npm//tslib",
+  "@npm//@types/jest",
+  "@npm//@types/prop-types",
+  "@npm//@types/classnames",
+  "@npm//@types/react",
+  "@npm//@elastic/eui",
+  "@npm//resize-observer-polyfill",
+]
+
+jsts_transpiler(
+  name = "target_webpack",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+  additional_args = [
+    "--copy-files",
+    "--quiet"
+  ],
+)
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  additional_args = [
+    "--copy-files",
+    "--quiet"
+  ],
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  declaration = True,
+  declaration_map = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  source_map = True,
+  root_dir = "src",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_BASE_NAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":target_webpack", ":tsc_types"],
+  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-react-field/README.md

@@ -0,0 +1 @@
+Sharable field type related React components

packages/kbn-react-field/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-react-field'],
+};

packages/kbn-react-field/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@kbn/react-field",
+  "main": "./target_node/index.js",
+  "browser": "./target_webpack/index.js",
+  "types": "./target_types/index.d.ts",
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0",
+  "private": true
+}

packages/kbn-react-field/src/field_button/field_button.scss

@@ -0,0 +1,76 @@
+.kbnFieldButton {
+  @include euiFontSizeS;
+  border-radius: $euiBorderRadius;
+  margin-bottom: $euiSizeXS;
+  display: flex;
+  align-items: center;
+  transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance,
+    background-color $euiAnimSpeedFast $euiAnimSlightResistance; // sass-lint:disable-line indentation
+
+  &:focus-within,
+  &-isActive {
+    @include euiFocusRing;
+  }
+}
+
+.kbnFieldButton--isDraggable {
+  background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade);
+
+  &:hover,
+  &:focus,
+  &:focus-within {
+    @include euiBottomShadowMedium;
+    border-radius: $euiBorderRadius;
+    z-index: 2;
+  }
+
+  .kbnFieldButton__button {
+    &:hover,
+    &:focus {
+      cursor: grab;
+    }
+  }
+}
+
+.kbnFieldButton__button {
+  flex-grow: 1;
+  text-align: left;
+  padding: $euiSizeS;
+  display: flex;
+  align-items: flex-start;
+  line-height: normal;
+}
+
+.kbnFieldButton__fieldIcon {
+  flex-shrink: 0;
+  line-height: 0;
+  margin-right: $euiSizeS;
+}
+
+.kbnFieldButton__name {
+  flex-grow: 1;
+  word-break: break-word;
+}
+
+.kbnFieldButton__infoIcon {
+  flex-shrink: 0;
+  margin-left: $euiSizeXS;
+}
+
+.kbnFieldButton__fieldAction {
+  margin-right: $euiSizeS;
+}
+
+// Reduce text size and spacing for the small size
+.kbnFieldButton--small {
+  font-size: $euiFontSizeXS;
+
+  .kbnFieldButton__button {
+    padding: $euiSizeXS;
+  }
+
+  .kbnFieldButton__fieldIcon,
+  .kbnFieldButton__fieldAction {
+    margin-right: $euiSizeXS;
+  }
+}