[Files] Move <Image /> component to @kbn/shared-ux package

.github/CODEOWNERS

@@ -1026,6 +1026,10 @@ packages/shared-ux/button/exit_full_screen/types @elastic/kibana-global-experien
 packages/shared-ux/card/no_data/impl @elastic/kibana-global-experience
 packages/shared-ux/card/no_data/mocks @elastic/kibana-global-experience
 packages/shared-ux/card/no_data/types @elastic/kibana-global-experience
+packages/shared-ux/file/image/impl @elastic/kibana-global-experience
+packages/shared-ux/file/image/mocks @elastic/kibana-global-experience
+packages/shared-ux/file/image/types @elastic/kibana-global-experience
+packages/shared-ux/file/util @elastic/kibana-global-experience
 packages/shared-ux/link/redirect_app/impl @elastic/kibana-global-experience
 packages/shared-ux/link/redirect_app/mocks @elastic/kibana-global-experience
 packages/shared-ux/link/redirect_app/types @elastic/kibana-global-experience

examples/files_example/common/index.ts

@@ -6,7 +6,8 @@
  * Side Public License, v 1.
  */
 
-import type { FileKind, FileImageMetadata } from '@kbn/files-plugin/common';
+import type { FileKind } from '@kbn/files-plugin/common';
+import type { FileImageMetadata } from '@kbn/shared-ux-file-image-types';
 
 export const PLUGIN_ID = 'filesExample';
 export const PLUGIN_NAME = 'Files example';

examples/files_example/public/imports.ts

@@ -14,7 +14,8 @@ export {
   FilesContext,
   type ScopedFilesClient,
   FilePicker,
-  Image,
 } from '@kbn/files-plugin/public';
 
+export { FileImage as Image } from '@kbn/shared-ux-file-image';
+
 export type { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public';

package.json

@@ -385,6 +385,10 @@
     "@kbn/shared-ux-card-no-data": "link:bazel-bin/packages/shared-ux/card/no_data/impl",
     "@kbn/shared-ux-card-no-data-mocks": "link:bazel-bin/packages/shared-ux/card/no_data/mocks",
     "@kbn/shared-ux-card-no-data-types": "link:bazel-bin/packages/shared-ux/card/no_data/types",
+    "@kbn/shared-ux-file-image": "link:bazel-bin/packages/shared-ux/file/image/impl",
+    "@kbn/shared-ux-file-image-mocks": "link:bazel-bin/packages/shared-ux/file/image/mocks",
+    "@kbn/shared-ux-file-image-types": "link:bazel-bin/packages/shared-ux/file/image/types",
+    "@kbn/shared-ux-file-util": "link:bazel-bin/packages/shared-ux/file/util",
     "@kbn/shared-ux-link-redirect-app": "link:bazel-bin/packages/shared-ux/link/redirect_app/impl",
     "@kbn/shared-ux-link-redirect-app-mocks": "link:bazel-bin/packages/shared-ux/link/redirect_app/mocks",
     "@kbn/shared-ux-link-redirect-app-types": "link:bazel-bin/packages/shared-ux/link/redirect_app/types",

packages/BUILD.bazel

@@ -333,6 +333,10 @@ filegroup(
     "//packages/shared-ux/card/no_data/impl:build",
     "//packages/shared-ux/card/no_data/mocks:build",
     "//packages/shared-ux/card/no_data/types:build",
+    "//packages/shared-ux/file/image/impl:build",
+    "//packages/shared-ux/file/image/mocks:build",
+    "//packages/shared-ux/file/image/types:build",
+    "//packages/shared-ux/file/util:build",
     "//packages/shared-ux/link/redirect_app/impl:build",
     "//packages/shared-ux/link/redirect_app/mocks:build",
     "//packages/shared-ux/link/redirect_app/types:build",
@@ -681,6 +685,9 @@ filegroup(
     "//packages/shared-ux/button/exit_full_screen/mocks:build_types",
     "//packages/shared-ux/card/no_data/impl:build_types",
     "//packages/shared-ux/card/no_data/mocks:build_types",
+    "//packages/shared-ux/file/image/impl:build_types",
+    "//packages/shared-ux/file/image/mocks:build_types",
+    "//packages/shared-ux/file/util:build_types",
     "//packages/shared-ux/link/redirect_app/impl:build_types",
     "//packages/shared-ux/link/redirect_app/mocks:build_types",
     "//packages/shared-ux/markdown/impl:build_types",

packages/shared-ux/card/no_data/mocks/tsconfig.json

@@ -5,9 +5,9 @@
     "emitDeclarationOnly": true,
     "outDir": "target_types",
     "types": [
-      "jest",
       "node",
-      "react"
+      "react",
+      "jest"
     ]
   },
   "include": [

packages/shared-ux/file/image/impl/BUILD.bazel

@@ -0,0 +1,148 @@
+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 = "impl"
+PKG_REQUIRE_NAME = "@kbn/shared-ux-file-image"
+
+SOURCE_FILES = glob(
+  [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.mdx",
+  ],
+  exclude = [
+    "**/*.config.js",
+    "**/*.mock.*",
+    "**/*.test.*",
+    "**/*.stories.*",
+    "**/__snapshots__/**",
+    "**/integration_tests/**",
+    "**/mocks/**",
+    "**/scripts/**",
+    "**/storybook/**",
+    "**/test_fixtures/**",
+    "**/test_helpers/**",
+  ],
+)
+
+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 = [
+  "@npm//@elastic/eui",
+  "@npm//react",
+  "@npm//classnames",
+  "@npm//@emotion/react",
+  "@npm//@emotion/css",
+  "//packages/shared-ux/file/util",
+  "//packages/kbn-shared-ux-utility",
+]
+
+# 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 = [
+  "@npm//@elastic/eui",
+  "@npm//@types/jest",
+  "@npm//@types/node",
+  "@npm//@types/react",
+  "@npm//@types/classnames",
+  "//packages/kbn-ambient-ui-types",
+  "//packages/shared-ux/file/util:npm_module_types",
+  "//packages/shared-ux/file/image/types:npm_module_types",
+]
+
+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",
+  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"],
+)
+
+js_library(
+  name = "npm_module_types",
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":target_web", ":tsc_types"],
+  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(
+  name = "build_types",
+  deps = [":npm_module_types"],
+  visibility = ["//visibility:public"],
+)

packages/shared-ux/file/image/impl/README.mdx

@@ -0,0 +1,18 @@
+---
+id: sharedUX/Components/FileImage
+slug: /shared-ux/components/file-image
+title: File image
+description: Display images stored in Kibana files.
+tags: ['shared-ux', 'component', 'files']
+date: 2022-11-22
+---
+
+## Description
+
+A light wrapper around <EuiImage /> that introduces some "file-aware" functionality like displaying a [blurhash](https://blurha.sh/) before the final image loads.
+
+## Lazy loading
+
+It is a good practice to leverage the browser-native lazy loading of images. Depending on your use case, make sure that content can be loaded lazily where possible.
+
+For more information see the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading) for more information.

packages/shared-ux/file/image/impl/index.tsx

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export { Image as FileImage } from './src/image';
+export type { Props as FileImageProps } from './src/image';

packages/shared-ux/file/image/impl/kibana.jsonc

@@ -0,0 +1,7 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/shared-ux-file-image",
+  "owner": "@elastic/kibana-global-experience",
+  "runtimeDeps": [],
+  "typeDeps": []
+}

packages/shared-ux/file/image/impl/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@kbn/shared-ux-file-image",
+  "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",
+  "types": "./target_types/index.d.ts"
+}

src/plugins/files/public/components/image/image.stories.tsx → packages/shared-ux/file/image/impl/src/image.stories.tsx

@@ -9,14 +9,14 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { getImageMetadata } from '../util';
+import { getImageMetadata } from '@kbn/shared-ux-file-util';
+import { getImageData as getBlob, base64dLogo } from '@kbn/shared-ux-file-image-mocks';
 import { Image, Props } from './image';
-import { getImageData as getBlob, base64dLogo } from './image.constants.stories';
 
 const defaultArgs: Props = { alt: 'test', src: `data:image/png;base64,${base64dLogo}` };
 
 export default {
-  title: 'components/Image',
+  title: 'files/Image',
   component: Image,
   args: defaultArgs,
   decorators: [

src/plugins/files/public/components/image/image.tsx → packages/shared-ux/file/image/impl/src/image.tsx

@@ -9,10 +9,10 @@
 import React from 'react';
 import { useState } from 'react';
 import { EuiImage, EuiImageProps } from '@elastic/eui';
+import type { FileImageMetadata } from '@kbn/shared-ux-file-image-types';
+import { getBlurhashSrc } from '@kbn/shared-ux-file-util';
 import classNames from 'classnames';
 import { css } from '@emotion/react';
-import type { FileImageMetadata } from '../../../common';
-import { getBlurhashSrc } from '../util';
 
 export type Props = { meta?: FileImageMetadata } & EuiImageProps;
 

packages/shared-ux/file/image/impl/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../../../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "target_types",
+    "types": [
+      "node",
+      "jest",
+      "react",
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ]
+}