[sharedUX] Move to Package-based Architecture (elastic#127546)

* [shared-ux][packages] 1. Create Services Package

* Address review feedback

* [shared-ux][packages] 2. Create Storybook Package (elastic#127548)

* [shared-ux][packages] 2. Create Storybook Package

* [shared-ux][packages] 3. Create Utility Package (elastic#127549)

* [shared-ux][packages] 3. Create Utility Package

* [shared-ux][packages] 4. Create Components Package (elastic#127551)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

* Merging

* Adding docs

* A few fixes

* Fix TS types

* Fix TS types

* Fix i18n

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

.i18nrc.json

@@ -60,6 +60,7 @@
     "server": "src/legacy/server",
     "share": "src/plugins/share",
     "sharedUX": "src/plugins/shared_ux",
+    "sharedUXComponents": "packages/kbn-shared-ux-components/src",
     "statusPage": "src/legacy/core_plugins/status_page",
     "telemetry": ["src/plugins/telemetry", "src/plugins/telemetry_management_section"],
     "timelion": ["src/plugins/vis_types/timelion"],

package.json

@@ -167,6 +167,10 @@
     "@kbn/securitysolution-utils": "link:bazel-bin/packages/kbn-securitysolution-utils",
     "@kbn/server-http-tools": "link:bazel-bin/packages/kbn-server-http-tools",
     "@kbn/server-route-repository": "link:bazel-bin/packages/kbn-server-route-repository",
+    "@kbn/shared-ux-components": "link:bazel-bin/packages/kbn-shared-ux-components",
+    "@kbn/shared-ux-services": "link:bazel-bin/packages/kbn-shared-ux-services",
+    "@kbn/shared-ux-storybook": "link:bazel-bin/packages/kbn-shared-ux-storybook",
+    "@kbn/shared-ux-utility": "link:bazel-bin/packages/kbn-shared-ux-utility",
     "@kbn/std": "link:bazel-bin/packages/kbn-std",
     "@kbn/timelion-grammar": "link:bazel-bin/packages/kbn-timelion-grammar",
     "@kbn/tinymath": "link:bazel-bin/packages/kbn-tinymath",
@@ -196,6 +200,10 @@
     "@turf/helpers": "6.0.1",
     "@turf/length": "^6.0.2",
     "@types/jsonwebtoken": "^8.5.6",
+    "@types/kbn__shared-ux-components": "link:bazel-bin/packages/kbn-shared-ux-components/npm_module_types",
+    "@types/kbn__shared-ux-services": "link:bazel-bin/packages/kbn-shared-ux-services/npm_module_types",
+    "@types/kbn__shared-ux-storybook": "link:bazel-bin/packages/kbn-shared-ux-storybook/npm_module_types",
+    "@types/kbn__shared-ux-utility": "link:bazel-bin/packages/kbn-shared-ux-utility/npm_module_types",
     "@types/moment-duration-format": "^2.2.3",
     "JSONStream": "1.3.5",
     "abort-controller": "^3.0.0",

packages/BUILD.bazel

@@ -66,6 +66,10 @@ filegroup(
     "//packages/kbn-securitysolution-utils:build",
     "//packages/kbn-server-http-tools:build",
     "//packages/kbn-server-route-repository:build",
+    "//packages/kbn-shared-ux-components:build",
+    "//packages/kbn-shared-ux-services:build",
+    "//packages/kbn-shared-ux-storybook:build",
+    "//packages/kbn-shared-ux-utility:build",
     "//packages/kbn-spec-to-console:build",
     "//packages/kbn-std:build",
     "//packages/kbn-storybook:build",
@@ -139,6 +143,10 @@ filegroup(
     "//packages/kbn-securitysolution-utils:build_types",
     "//packages/kbn-server-http-tools:build_types",
     "//packages/kbn-server-route-repository:build_types",
+    "//packages/kbn-shared-ux-components:build_types",
+    "//packages/kbn-shared-ux-services:build_types",
+    "//packages/kbn-shared-ux-storybook:build_types",
+    "//packages/kbn-shared-ux-utility:build_types",
     "//packages/kbn-std:build_types",
     "//packages/kbn-storybook:build_types",
     "//packages/kbn-telemetry-tools:build_types",

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

@@ -0,0 +1,150 @@
+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-shared-ux-components"
+PKG_REQUIRE_NAME = "@kbn/shared-ux-components"
+
+SOURCE_FILES = glob(
+  [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.scss",
+    "src/**/*.mdx",
+  ],
+  exclude = [
+    "**/*.test.*",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+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 = [
+  "//packages/kbn-i18n",
+  "//packages/kbn-i18n-react",
+  "//packages/kbn-shared-ux-services",
+  "//packages/kbn-shared-ux-storybook",
+  "//packages/kbn-shared-ux-utility",
+  "@npm//@elastic/eui",
+  "@npm//@emotion/react",
+  "@npm//@emotion/css",
+  "@npm//classnames",
+  "@npm//react-use",
+  "@npm//react",
+]
+
+# In this array place dependencies necessary to build the types, which will include the
+# :npm_module_types target of other packages and packages from NPM, including @types/*
+# packages.
+#
+#  To reference the types for another package use:
+#    "//repo/relative/path/to/package:npm_module_types"
+#    eg. "//packages/kbn-utils:npm_module_types"
+#
+#  References to NPM packages work the same as RUNTIME_DEPS
+TYPES_DEPS = [
+  "//packages/kbn-i18n:npm_module_types",
+  "//packages/kbn-i18n-react:npm_module_types",
+  "//packages/kbn-shared-ux-services:npm_module_types",
+  "//packages/kbn-shared-ux-storybook:npm_module_types",
+  "//packages/kbn-shared-ux-utility:npm_module_types",
+  "@npm//@types/node",
+  "@npm//@types/jest",
+  "@npm//@types/react",
+  "@npm//@types/classnames",
+  "@npm//@emotion/react",
+  "@npm//@emotion/css",
+  "@npm//@elastic/eui",
+  "@npm//react-use",
+]
+
+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,
+  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,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  root_dir = "src",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_DIRNAME,
+  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 = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [":npm_module_types"],
+  visibility = ["//visibility:public"],
+)

packages/kbn-shared-ux-components/README.mdx

@@ -0,0 +1,10 @@
+---
+id: kibSharedUXComponents
+slug: /kibana-dev-docs/shared-ux/packages/kbn-shared-ux-components
+title: Shared UX Components
+summary: 
+date: 2022-03-11
+tags: ['kibana', 'dev', 'sharedUX']
+---
+
+> TODO

packages/kbn-shared-ux-components/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-shared-ux-components'],
+};

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

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

src/plugins/shared_ux/public/components/empty_state/assets/index.tsx → packages/kbn-shared-ux-components/src/empty_state/assets/index.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 
 import { EuiLoadingSpinner } from '@elastic/eui';
 
-import { withSuspense } from '../../utility';
+import { withSuspense } from '@kbn/shared-ux-utility';
 
 export const LazyDataViewIllustration = React.lazy(() =>
   import('../assets/data_view_illustration').then(({ DataViewIllustration }) => ({

src/plugins/shared_ux/public/components/empty_state/no_data_views/documentation_link.tsx → packages/kbn-shared-ux-components/src/empty_state/no_data_views/documentation_link.tsx

@@ -20,7 +20,7 @@ export function DocumentationLink({ href }: Props) {
       <EuiTitle size="xxs">
         <dt className="eui-displayInline">
           <FormattedMessage
-            id="sharedUX.noDataViews.learnMore"
+            id="sharedUXComponents.noDataViews.learnMore"
             defaultMessage="Want to learn more?"
           />
         </dt>
@@ -29,7 +29,7 @@ export function DocumentationLink({ href }: Props) {
       <dd className="eui-displayInline">
         <EuiLink href={href} target="_blank" external>
           <FormattedMessage
-            id="sharedUX.noDataViews.readDocumentation"
+            id="sharedUXComponents.noDataViews.readDocumentation"
             defaultMessage="Read the docs"
           />
         </EuiLink>

src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.component.tsx → packages/kbn-shared-ux-components/src/empty_state/no_data_views/no_data_views.component.tsx

@@ -23,7 +23,7 @@ export interface Props {
   emptyPromptColor?: EuiEmptyPromptProps['color'];
 }
 
-const createDataViewText = i18n.translate('sharedUX.noDataViewsPage.addDataViewText', {
+const createDataViewText = i18n.translate('sharedUXComponents.noDataViewsPage.addDataViewText', {
   defaultMessage: 'Create Data View',
 });
 
@@ -62,20 +62,20 @@ export const NoDataViews = ({
       title={
         <h2>
           <FormattedMessage
-            id="sharedUX.noDataViews.youHaveData"
+            id="sharedUXComponents.noDataViews.youHaveData"
             defaultMessage="You have data in Elasticsearch."
           />
           <br />
           <FormattedMessage
-            id="sharedUX.noDataViews.nowCreate"
+            id="sharedUXComponents.noDataViews.nowCreate"
             defaultMessage="Now, create a data view."
           />
         </h2>
       }
       body={
         <p>
           <FormattedMessage
-            id="sharedUX.noDataViews.dataViewExplanation"
+            id="sharedUXComponents.noDataViews.dataViewExplanation"
             defaultMessage="Kibana requires a data view to identify which data streams,
             indices, and index aliases you want to explore. A data view can point to a
             specific index, for example, your log data from yesterday, or all indices

src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.stories.tsx → packages/kbn-shared-ux-components/src/empty_state/no_data_views/no_data_views.stories.tsx

@@ -8,13 +8,15 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import { docLinksServiceFactory } from '../../../services/storybook/doc_links';
+import { servicesFactory } from '@kbn/shared-ux-storybook';
 
 import { NoDataViews as NoDataViewsComponent, Props } from './no_data_views.component';
 import { NoDataViews } from './no_data_views';
 
 import mdx from './no_data_views.mdx';
 
+const services = servicesFactory({});
+
 export default {
   title: 'No Data Views',
   description: 'A component to display when there are no user-created data views available.',
@@ -26,12 +28,7 @@ export default {
 };
 
 export const ConnectedComponent = () => {
-  return (
-    <NoDataViews
-      onDataViewCreated={action('onDataViewCreated')}
-      dataViewsDocLink={docLinksServiceFactory().dataViewsDocsLink}
-    />
-  );
+  return <NoDataViews onDataViewCreated={action('onDataViewCreated')} />;
 };
 
 type Params = Pick<Props, 'canCreateNewDataView' | 'dataViewsDocLink'>;
@@ -46,7 +43,7 @@ PureComponent.argTypes = {
     defaultValue: true,
   },
   dataViewsDocLink: {
-    options: [docLinksServiceFactory().dataViewsDocsLink, undefined],
+    options: [services.docLinks.dataViewsDocLink, undefined],
     control: { type: 'radio' },
   },
 };

src/plugins/shared_ux/public/components/empty_state/no_data_views/no_data_views.test.tsx → packages/kbn-shared-ux-components/src/empty_state/no_data_views/no_data_views.test.tsx

@@ -12,31 +12,29 @@ import { ReactWrapper } from 'enzyme';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { EuiButton } from '@elastic/eui';
 
-import { ServicesProvider, SharedUXServices } from '../../../services';
-import { servicesFactory } from '../../../services/mocks';
+import {
+  SharedUxServicesProvider,
+  SharedUxServices,
+  mockServicesFactory,
+} from '@kbn/shared-ux-services';
 import { NoDataViews } from './no_data_views';
 
 describe('<NoDataViewsPageTest />', () => {
-  let services: SharedUXServices;
+  let services: SharedUxServices;
   let mount: (element: JSX.Element) => ReactWrapper;
 
   beforeEach(() => {
-    services = servicesFactory();
+    services = mockServicesFactory();
     mount = (element: JSX.Element) =>
-      mountWithIntl(<ServicesProvider {...services}>{element}</ServicesProvider>);
+      mountWithIntl(<SharedUxServicesProvider {...services}>{element}</SharedUxServicesProvider>);
   });
 
   afterEach(() => {
     jest.resetAllMocks();
   });
 
   test('on dataView created', () => {
-    const component = mount(
-      <NoDataViews
-        onDataViewCreated={jest.fn()}
-        dataViewsDocLink={services.docLinks.dataViewsDocsLink}
-      />
-    );
+    const component = mount(<NoDataViews onDataViewCreated={jest.fn()} />);
 
     expect(services.editors.openDataViewEditor).not.toHaveBeenCalled();
     component.find(EuiButton).simulate('click');