-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Files] Move <Image /> component to
@kbn/shared-ux package (#145995)
## Summary * Creates new packages `@kbn/shared-ux-file-image`, `@kbn/shared-ux-file-image-types`, `@kbn/shared-ux-file-image-mocks` * Replace all instance of usage to import from package (for now, just files example plugin) * Created a `@kbn/shared-ux-file-util` package for the helpers shared across components ## How to test See `yarn storbook shared_ux`'s new section "Files" ## Additional notes First step just focussed on moving `Image` component, we still need to move `FilePicker` and `UploadFile` Co-authored-by: kibanamachine <[email protected]>
- Loading branch information
1 parent
105a15c
commit 95c4d73
Showing
49 changed files
with
942 additions
and
39 deletions.
There are no files selected for viewing
Validating CODEOWNERS rules …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"], | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "shared-common", | ||
| "id": "@kbn/shared-ux-file-image", | ||
| "owner": "@elastic/kibana-global-experience", | ||
| "runtimeDeps": [], | ||
| "typeDeps": [] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| { | ||
| "extends": "../../../../../tsconfig.bazel.json", | ||
| "compilerOptions": { | ||
| "declaration": true, | ||
| "emitDeclarationOnly": true, | ||
| "outDir": "target_types", | ||
| "types": [ | ||
| "node", | ||
| "jest", | ||
| "react", | ||
| ] | ||
| }, | ||
| "include": [ | ||
| "**/*.ts", | ||
| "**/*.tsx", | ||
| ] | ||
| } |
Oops, something went wrong.