chore(NA): splits types from code on @kbn/i18n (#119256)

* chore(NA): auto creation of the package.json for the new types pkg rule

* chore(NA): first alpha api extractor working version

* chore(NA): support kbn-analytics

* chore(NA): correctly read tsconfig files and deps from ts_config rule

* chore(NA): layed out pkg_npm_types tree artifact custom rule

* chore(NA): missing todos

* chore(NA): node modules link mapping

* chore(NA): fully working pkg_npm_types rule

* chore(NA): fix changes on new packages using elastic datemath pkgs

* docs(NA): remove todo

* docs(NA): last todo text correction

* chore(NA): removed commented lines

* fix(NA): include missing package version

* chore(NA): include license keys

* chore(NA): change mock types package into private

* chore(NA): disable validator on ts_project rule

* chore(NA): use the wrapper for ts_project

* commit using @elastic.co

* chore(NA): commit using @elastic.co

* chore(NA): split types from code on @kbn/i18n

* chore(NA): update yarn.lock file

* chore(NA): split @kbn/i18n and @kbn/i18n-react

* chore(NA): missing import fix

* chore(NA): fix jest project configs

* chore(NA): change imports on kbn i18n

* chore(NA): change imports on kbn i18n

* chore(NA): correct loader imports

* chore(NA): missnig i18nLoader export key

* chore(NA): fix type exports

* chore(NA): export type only

* chore(NA): export type only

* fix(NA): type exports

* chore(NA): missing @Kbn/i18n/react imports

* chore(NA): missing skip path for kbn-i18n-react

Co-authored-by: Kibana Machine <[email protected]>

docs/developer/plugin/external-plugin-localization.asciidoc

@@ -120,7 +120,7 @@ To localize strings in React, use either `FormattedMessage` or `i18n.translate`.
 ["source","js"]
 -----------
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n-react';
 
 export const Component = () => {
   return (

examples/expressions_explorer/public/inspector/expressions_inspector_view.tsx

@@ -8,7 +8,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiEmptyPrompt } from '@elastic/eui';
 import { InspectorViewProps, Adapters } from '../../../../src/plugins/inspector/public';
 import { AstDebugView } from './ast_debug_view';

examples/screenshot_mode_example/public/components/app.tsx

@@ -8,7 +8,7 @@
 
 import React, { useEffect } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
 
 import {
   EuiPage,

examples/search_examples/public/application.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Route, Redirect } from 'react-router-dom';
-import { I18nProvider } from '@kbn/i18n/react';
+import { I18nProvider } from '@kbn/i18n-react';
 import { AppMountParameters, CoreStart } from '../../../src/core/public';
 import { AppPluginStartDependencies } from './types';
 import { SearchExamplePage, ExampleLink } from './common/example_page';

examples/search_examples/public/search/app.tsx

@@ -8,7 +8,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n-react';
 
 import {
   EuiButtonEmpty,

package.json

@@ -135,6 +135,7 @@
     "@kbn/es-query": "link:bazel-bin/packages/kbn-es-query",
     "@kbn/field-types": "link:bazel-bin/packages/kbn-field-types",
     "@kbn/i18n": "link:bazel-bin/packages/kbn-i18n",
+    "@kbn/i18n-react": "link:bazel-bin/packages/kbn-i18n-react",
     "@kbn/interpreter": "link:bazel-bin/packages/kbn-interpreter",
     "@kbn/io-ts-utils": "link:bazel-bin/packages/kbn-io-ts-utils",
     "@kbn/logging": "link:bazel-bin/packages/kbn-logging",
@@ -553,6 +554,8 @@
     "@types/json-stable-stringify": "^1.0.32",
     "@types/json5": "^0.0.30",
     "@types/kbn__ace": "link:bazel-bin/packages/kbn-ace/npm_module_types",
+    "@types/kbn__i18n": "link:bazel-bin/packages/kbn-i18n/npm_module_types",
+    "@types/kbn__i18n-react": "link:bazel-bin/packages/kbn-i18n-react/npm_module_types",
     "@types/license-checker": "15.0.0",
     "@types/listr": "^0.14.0",
     "@types/loader-utils": "^1.1.3",

packages/BUILD.bazel

@@ -27,6 +27,7 @@ filegroup(
       "//packages/kbn-expect:build",
       "//packages/kbn-field-types:build",
       "//packages/kbn-i18n:build",
+      "//packages/kbn-i18n-react:build",
       "//packages/kbn-interpreter:build",
       "//packages/kbn-io-ts-utils:build",
       "//packages/kbn-logging:build",
@@ -77,6 +78,8 @@ filegroup(
       "//packages/elastic-apm-synthtrace:build_types",
       "//packages/elastic-datemath:build_types",
       "//packages/kbn-ace:build_types",
+      "//packages/kbn-i18n:build_types",
+      "//packages/kbn-i18n-react:build_types",
   ],
 )
 

packages/elastic-eslint-config-kibana/.eslintrc.js

@@ -79,8 +79,8 @@ module.exports = {
         },
         {
           from: 'react-intl',
-          to: '@kbn/i18n/react',
-          disallowedMessage: `import from @kbn/i18n/react instead`
+          to: '@kbn/i18n-react',
+          disallowedMessage: `import from @kbn/i18n-react instead`
         },
         {
           from: 'styled-components',

packages/kbn-alerts/BUILD.bazel

@@ -38,9 +38,10 @@ RUNTIME_DEPS = [
 ]
 
 TYPES_DEPS = [
-  "//packages/kbn-i18n",
+  "//packages/kbn-i18n:npm_module_types",
   "@npm//@elastic/eui",
   "@npm//resize-observer-polyfill",
+  "@npm//tslib",
   "@npm//@types/enzyme",
   "@npm//@types/jest",
   "@npm//@types/node",

packages/kbn-config/BUILD.bazel

@@ -49,7 +49,7 @@ TYPES_DEPS = [
   "//packages/kbn-logging",
   "//packages/kbn-std",
   "//packages/kbn-utility-types",
-  "//packages/kbn-i18n",
+  "//packages/kbn-i18n:npm_module_types",
   "@npm//load-json-file",
   "@npm//rxjs",
   "@npm//@types/jest",

packages/kbn-es-query/BUILD.bazel

@@ -38,13 +38,13 @@ RUNTIME_DEPS = [
   "@npm//load-json-file",
   "@npm//lodash",
   "@npm//moment-timezone",
-  "@npm//tslib",
 ]
 
 TYPES_DEPS = [
   "//packages/kbn-utility-types",
-  "//packages/kbn-i18n",
+  "//packages/kbn-i18n:npm_module_types",
   "@npm//@elastic/elasticsearch",
+  "@npm//tslib",
   "@npm//@types/jest",
   "@npm//@types/lodash",
   "@npm//@types/moment-timezone",

packages/kbn-i18n-react/BUILD.bazel

@@ -0,0 +1,123 @@
+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_BASE_NAME = "kbn-i18n-react"
+PKG_REQUIRE_NAME = "@kbn/i18n-react"
+TYPES_PKG_REQUIRE_NAME = "@types/kbn__i18n-react"
+
+SOURCE_FILES = glob(
+  [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+  ],
+  exclude = [
+    "**/*.test.*",
+    "**/__snapshots__/**",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+  "README.md"
+]
+
+RUNTIME_DEPS = [
+  "//packages/kbn-i18n",
+  "@npm//prop-types",
+  "@npm//react",
+  "@npm//react-intl"
+]
+
+TYPES_DEPS = [
+  "//packages/kbn-i18n:npm_module_types",
+  "@npm//tslib",
+  "@npm//@types/jest",
+  "@npm//@types/node",
+  "@npm//@types/prop-types",
+  "@npm//@types/react",
+  "@npm//@types/react-intl",
+]
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
+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_web"],
+  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"],
+)
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = TYPES_PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [
+    ":npm_module_types",
+  ],
+  visibility = ["//visibility:public"],
+)

packages/kbn-i18n-react/README.md

@@ -0,0 +1,3 @@
+# I18n-React
+
+Please check the [@kbn/I18n README](../kbn-i18n/README.md) for all the information

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

@@ -0,0 +1,14 @@
+/*
+ * 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-i18n-react'],
+  testRunner: 'jasmine2',
+};

packages/kbn-i18n-react/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@kbn/i18n-react",
+  "browser": "./target_web/browser.js",
+  "main": "./target_node/index.js",
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0",
+  "private": true
+}

packages/kbn-i18n/src/react/provider.tsx → packages/kbn-i18n-react/src/provider.tsx

@@ -12,7 +12,7 @@ import * as React from 'react';
 // eslint-disable-next-line @kbn/eslint/module_migration
 import { IntlProvider } from 'react-intl';
 
-import * as i18n from '../core';
+import { i18n } from '@kbn/i18n';
 import { PseudoLocaleWrapper } from './pseudo_locale_wrapper';
 
 /**

packages/kbn-i18n/src/react/pseudo_locale_wrapper.tsx → packages/kbn-i18n-react/src/pseudo_locale_wrapper.tsx

@@ -8,8 +8,7 @@
 
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
-import * as i18n from '../core';
-import { isPseudoLocale, translateUsingPseudoLocale } from '../core/pseudo_locale';
+import { i18n } from '@kbn/i18n';
 
 /**
  * To translate label that includes nested `FormattedMessage` instances React Intl
@@ -26,11 +25,11 @@ function translateFormattedMessageUsingPseudoLocale(message: string) {
   if (formattedMessageDelimiter !== null) {
     return message
       .split(formattedMessageDelimiter[0])
-      .map((part) => (part.startsWith('ELEMENT-') ? part : translateUsingPseudoLocale(part)))
+      .map((part) => (part.startsWith('ELEMENT-') ? part : i18n.translateUsingPseudoLocale(part)))
       .join(formattedMessageDelimiter[0]);
   }
 
-  return translateUsingPseudoLocale(message);
+  return i18n.translateUsingPseudoLocale(message);
 }
 
 /**
@@ -51,7 +50,7 @@ export class PseudoLocaleWrapper extends React.PureComponent {
   constructor(props: { children: React.ReactNode }, context: any) {
     super(props, context);
 
-    if (isPseudoLocale(i18n.getLocale())) {
+    if (i18n.isPseudoLocale(i18n.getLocale())) {
       const formatMessage = context.intl.formatMessage;
       context.intl.formatMessage = (...args: any[]) =>
         translateFormattedMessageUsingPseudoLocale(formatMessage(...args));

packages/kbn-i18n-react/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./target_types",
+    "sourceMap": true,
+    "sourceRoot": "../../../../../packages/kbn-i18n-react/src",
+    "types": [
+      "jest",
+      "node"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+  ],
+}