From b9b42ba10f8f7f2b930316c5a4768cb086909b7e Mon Sep 17 00:00:00 2001 From: Alex Khomenko Date: Wed, 20 Mar 2024 16:03:40 +0100 Subject: [PATCH] Grafana/icons: Add icons package (#82314) * Add separate icons package * Update package.json * Codeformat * Use the new icon * Sanitize SVGs * Sync deps * Add publish script * Add pre-commit hook * Test pre-commit * Rename * Comment out local dev configs * Add generate action * Update readme * Update script * Add license * Rename icons to icons-generated * Codeformat * Update lerna * Remove fill attribute from SVG path elements * Revert lerna upgrade * Update codeowners * Add lint scripts * Exclude more attributes * Add missing deps * Update lockfile * Remove CI actions * Remove generated components from VC * Fix path * Build ESM only * Include cjs * Update lockfile * Move generated icons into src * Update lockfile * Sync deps with grafana * Update lockfile * Update lockfile * Update package name * Cleanup * Memoize the components * Publish esm only * Do not overwrite props * Add generate script to build * Update comment * Generate typedefs from index.ts * test * test * Restore * Add more complex icons * Add readme * Update lockfile * Make the package private * Move package exclusion to lerna.json * Remove exclusion * Revert * test packages * Fix * Fix * Revert * Move generate icons script to the root * Update script * Remove icons script * Move icons exclusion to package.json --- package.json | 5 +- packages/grafana-icons/.gitignore | 7 + packages/grafana-icons/.svgrrc.js | 32 ++ packages/grafana-icons/CHANGELOG.md | 0 packages/grafana-icons/LICENSE_APACHE2 | 202 ++++++++++++ packages/grafana-icons/README.md | 14 + packages/grafana-icons/package.json | 64 ++++ packages/grafana-icons/rollup.config.ts | 30 ++ packages/grafana-icons/src/IconBase.tsx | 52 ++++ packages/grafana-icons/svg/ai.svg | 27 ++ packages/grafana-icons/svg/angle-right.svg | 1 + packages/grafana-icons/svg/apps.svg | 1 + packages/grafana-icons/svg/book.svg | 1 + packages/grafana-icons/svg/cancel.svg | 1 + packages/grafana-icons/svg/traces.svg | 7 + packages/grafana-icons/templates/icon.js | 45 +++ packages/grafana-icons/templates/index.js | 12 + packages/grafana-icons/tsconfig.build.json | 4 + packages/grafana-icons/tsconfig.json | 13 + yarn.lock | 343 ++++++++++++++++++++- 20 files changed, 852 insertions(+), 9 deletions(-) create mode 100644 packages/grafana-icons/.gitignore create mode 100644 packages/grafana-icons/.svgrrc.js create mode 100644 packages/grafana-icons/CHANGELOG.md create mode 100644 packages/grafana-icons/LICENSE_APACHE2 create mode 100644 packages/grafana-icons/README.md create mode 100644 packages/grafana-icons/package.json create mode 100644 packages/grafana-icons/rollup.config.ts create mode 100644 packages/grafana-icons/src/IconBase.tsx create mode 100644 packages/grafana-icons/svg/ai.svg create mode 100644 packages/grafana-icons/svg/angle-right.svg create mode 100644 packages/grafana-icons/svg/apps.svg create mode 100644 packages/grafana-icons/svg/book.svg create mode 100644 packages/grafana-icons/svg/cancel.svg create mode 100644 packages/grafana-icons/svg/traces.svg create mode 100644 packages/grafana-icons/templates/icon.js create mode 100644 packages/grafana-icons/templates/index.js create mode 100644 packages/grafana-icons/tsconfig.build.json create mode 100644 packages/grafana-icons/tsconfig.json diff --git a/package.json b/package.json index 17884f597a1..1ad6228405f 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,8 @@ "generate-icons-bundle-cache-file": "node ./scripts/generate-icon-bundle.js", "plugin:build": "nx run-many -t build --projects='@grafana-plugins/*' --exclude \"@grafana-plugins/input-datasource\"", "plugin:build:commit": "nx run-many -t build:commit --projects='@grafana-plugins/*' --exclude \"@grafana-plugins/input-datasource\"", - "plugin:build:dev": "nx run-many -t dev --projects='@grafana-plugins/*' --exclude \"@grafana-plugins/input-datasource\"" + "plugin:build:dev": "nx run-many -t dev --projects='@grafana-plugins/*' --exclude \"@grafana-plugins/input-datasource\"", + "generate-icons": "yarn workspace @grafana/saga-icons generate" }, "grafana": { "whatsNewUrl": "https://grafana.com/docs/grafana/next/whatsnew/whats-new-in-v11-0/", @@ -250,6 +251,7 @@ "@grafana/o11y-ds-frontend": "workspace:*", "@grafana/prometheus": "workspace:*", "@grafana/runtime": "workspace:*", + "@grafana/saga-icons": "workspace:*", "@grafana/scenes": "3.13.3", "@grafana/schema": "workspace:*", "@grafana/sql": "workspace:*", @@ -426,6 +428,7 @@ "workspaces": { "packages": [ "packages/*", + "packages/!(grafana-icons)/**", "plugins-bundled/internal/*", "public/app/plugins/*/*" ] diff --git a/packages/grafana-icons/.gitignore b/packages/grafana-icons/.gitignore new file mode 100644 index 00000000000..61e79a90563 --- /dev/null +++ b/packages/grafana-icons/.gitignore @@ -0,0 +1,7 @@ +.idea +dist +node_modules +compiled +/icons-gen/ +/src/icons-gen/ +/src/index.ts diff --git a/packages/grafana-icons/.svgrrc.js b/packages/grafana-icons/.svgrrc.js new file mode 100644 index 00000000000..54882c8e9c3 --- /dev/null +++ b/packages/grafana-icons/.svgrrc.js @@ -0,0 +1,32 @@ +/** + * Reference: https://react-svgr.com/docs/options/ + */ +module.exports = { + icon: '{dir}/[name].gen.js', + typescript: true, + jsxRuntime: 'automatic', + outDir: './src/icons-gen', + template: require('./templates/icon'), + indexTemplate: require('./templates/index'), + memo: true, + svgoConfig: { + plugins: [ + // Sanitise the SVGs + 'removeScriptElement', + ], + }, + jsx: { + babelConfig: { + plugins: [ + // Remove fill and id attributes from SVG child elements + [ + '@svgr/babel-plugin-remove-jsx-attribute', + { + elements: ['path', 'g', 'clipPath'], + attributes: ['id', 'fill'], + }, + ], + ], + }, + }, +}; diff --git a/packages/grafana-icons/CHANGELOG.md b/packages/grafana-icons/CHANGELOG.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/grafana-icons/LICENSE_APACHE2 b/packages/grafana-icons/LICENSE_APACHE2 new file mode 100644 index 00000000000..373dde574a0 --- /dev/null +++ b/packages/grafana-icons/LICENSE_APACHE2 @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright 2015 Grafana Labs + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/packages/grafana-icons/README.md b/packages/grafana-icons/README.md new file mode 100644 index 00000000000..78cbf4bf9e3 --- /dev/null +++ b/packages/grafana-icons/README.md @@ -0,0 +1,14 @@ +# Grafana Saga Icons + +This package contains the icon React components used in Grafana and Grafana plugins. + +## Uploading a new icon + +To add a new icon to the library, open a PR which adds the SVG file for the icon into the `svg` directory. The file should be named with the icon name in kebab-case. For example, if the icon name is `MyIcon`, the file should be named `my-icon.svg`. Once the PR is merged, the icon will be automatically generated and added to the library. + +## Development + +1. Clone the repository +2. Run `yarn install` +3. After the installation, the icon components can be found in the `src/icons-gen` directory. +4. To regenerate/update the components, run `yarn generate`. diff --git a/packages/grafana-icons/package.json b/packages/grafana-icons/package.json new file mode 100644 index 00000000000..31fc409dbd7 --- /dev/null +++ b/packages/grafana-icons/package.json @@ -0,0 +1,64 @@ +{ + "name": "@grafana/saga-icons", + "version": "0.0.0", + "private": true, + "description": "Icons for Grafana", + "author": "Grafana Labs", + "license": "Apache-2.0", + "sideEffects": false, + "repository": { + "type": "git", + "url": "https://github.com/grafana/grafana.git", + "directory": "packages/grafana-icons" + }, + "main": "src/index.ts", + "types": "src/index.ts", + "publishConfig": { + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "access": "public" + }, + "files": [ + "./dist", + "./README.md", + "./CHANGELOG.md", + "./LICENSE_APACHE2" + ], + "scripts": { + "clean": "rimraf ./dist ./compiled ./package.tgz ./src/icons-gen", + "generate": "yarn clean && npx @svgr/cli ./svg && mv ./src/icons-gen/index.ts ./src", + "typecheck": "tsc --emitDeclarationOnly false --noEmit", + "lint": "eslint --ext .ts,.tsx ./src", + "prettier:check": "prettier --check --list-different=false --log-level=warn \"**/*.{ts,tsx,scss,md,mdx,json}\"", + "build": "yarn generate && rollup -c rollup.config.ts" + }, + "devDependencies": { + "@grafana/tsconfig": "^1.3.0-rc1", + "@rollup/plugin-node-resolve": "^15.2.3", + "@rollup/plugin-typescript": "^11.1.6", + "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0", + "@svgr/cli": "^8.1.0", + "@svgr/plugin-jsx": "^8.1.0", + "@svgr/plugin-prettier": "^8.1.0", + "@svgr/plugin-svgo": "^8.1.0", + "@types/node": "20.11.19", + "@types/react": "18.2.55", + "@types/react-dom": "18.2.19", + "esbuild": "0.18.12", + "prettier": "3.2.5", + "react": "18.2.0", + "react-dom": "18.2.0", + "rimraf": "5.0.5", + "rollup": "2.79.1", + "rollup-plugin-dts": "^6.1.0", + "rollup-plugin-esbuild": "5.0.0", + "rollup-plugin-node-externals": "5.0.0", + "ts-node": "10.9.2", + "typescript": "5.3.3" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } +} diff --git a/packages/grafana-icons/rollup.config.ts b/packages/grafana-icons/rollup.config.ts new file mode 100644 index 00000000000..c812043094d --- /dev/null +++ b/packages/grafana-icons/rollup.config.ts @@ -0,0 +1,30 @@ +import resolve from '@rollup/plugin-node-resolve'; +import path from 'path'; +import dts from 'rollup-plugin-dts'; +import esbuild from 'rollup-plugin-esbuild'; +import externals from 'rollup-plugin-node-externals'; + +import pkg from './package.json'; + +export default [ + { + input: 'src/index.ts', + plugins: [externals({ deps: true, packagePath: './package.json' }), resolve(), esbuild()], + output: [ + { + format: 'esm', + sourcemap: true, + dir: path.dirname(pkg.publishConfig.module), + preserveModules: true, + }, + ], + }, + { + input: 'src/index.ts', + plugins: [dts()], + output: { + file: pkg.publishConfig.types, + format: 'es', + }, + }, +]; diff --git a/packages/grafana-icons/src/IconBase.tsx b/packages/grafana-icons/src/IconBase.tsx new file mode 100644 index 00000000000..cc4149e7413 --- /dev/null +++ b/packages/grafana-icons/src/IconBase.tsx @@ -0,0 +1,52 @@ +import React, { SVGProps } from 'react'; + +export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'; + +export interface IconProps extends Omit, 'onLoad' | 'onError' | 'ref'> { + /** Size (width and height) of the icon. Defaults to "md" or 16x16px */ + size?: IconSize; + /** Render the title element with the provided text. + * More info: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title + */ + title?: string; + /** Color of the icon. Defaults to "currentColor" */ + color?: string; +} + +function getSvgSize(size: IconSize) { + const sizeMap = { + xs: 12, + sm: 14, + md: 16, + lg: 18, + xl: 24, + xxl: 36, + xxxl: 48, + }; + + return sizeMap[size] || 16; +} + +export const IconBase = ({ title, size = 'md', color = 'currentColor', ...props }: IconProps) => { + const svgSize = getSvgSize(size); + + return ( + + {title && {title}} + {props.children} + + ); +}; diff --git a/packages/grafana-icons/svg/ai.svg b/packages/grafana-icons/svg/ai.svg new file mode 100644 index 00000000000..7ea7ce6376b --- /dev/null +++ b/packages/grafana-icons/svg/ai.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/grafana-icons/svg/angle-right.svg b/packages/grafana-icons/svg/angle-right.svg new file mode 100644 index 00000000000..b21121fe607 --- /dev/null +++ b/packages/grafana-icons/svg/angle-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/grafana-icons/svg/apps.svg b/packages/grafana-icons/svg/apps.svg new file mode 100644 index 00000000000..f6f6ffe2eaa --- /dev/null +++ b/packages/grafana-icons/svg/apps.svg @@ -0,0 +1 @@ + diff --git a/packages/grafana-icons/svg/book.svg b/packages/grafana-icons/svg/book.svg new file mode 100644 index 00000000000..8e59539d7a4 --- /dev/null +++ b/packages/grafana-icons/svg/book.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/grafana-icons/svg/cancel.svg b/packages/grafana-icons/svg/cancel.svg new file mode 100644 index 00000000000..138499ab728 --- /dev/null +++ b/packages/grafana-icons/svg/cancel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/grafana-icons/svg/traces.svg b/packages/grafana-icons/svg/traces.svg new file mode 100644 index 00000000000..a58acc03951 --- /dev/null +++ b/packages/grafana-icons/svg/traces.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/grafana-icons/templates/icon.js b/packages/grafana-icons/templates/icon.js new file mode 100644 index 00000000000..2514571e00e --- /dev/null +++ b/packages/grafana-icons/templates/icon.js @@ -0,0 +1,45 @@ +/** + * Modify the JSX to use the IconBase component as a wrapper + */ +const modifyJSX = (jsx) => { + jsx.openingElement.name.name = 'IconBase'; + jsx.openingElement.attributes = [ + { + type: 'JSXSpreadAttribute', + argument: { + type: 'Identifier', + name: 'props', + }, + }, + ]; + + jsx.closingElement.name.name = 'IconBase'; + + return jsx; +}; + +const comments = ` +// This is an auto-generated file, created by svgr-cli. +// Do not edit this file manually. +// To update the component, modify the template in templates/icon.js. +// Run "yarn generate" to update. +`; +const imports = ` +import React, { memo } from 'react'; + +import { IconBase, IconProps } from '../IconBase'; +`; +const template = ({ exports, jsx, componentName }, { tpl }) => { + return tpl` +${comments} +${imports} + +const ${componentName} = (props: IconProps) => ( + ${modifyJSX(jsx)} +); + +${exports}; +`; +}; + +module.exports = template; diff --git a/packages/grafana-icons/templates/index.js b/packages/grafana-icons/templates/index.js new file mode 100644 index 00000000000..9bbd0507a39 --- /dev/null +++ b/packages/grafana-icons/templates/index.js @@ -0,0 +1,12 @@ +const path = require('path'); + +function defaultIndexTemplate(filePaths) { + const exportEntries = filePaths.map(({ path: filePath }) => { + const basename = path.basename(filePath, path.extname(filePath)); + const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename; + return `export { default as ${exportName} } from './icons-gen/${basename}'`; + }); + return ["export { type IconProps } from './IconBase';", ...exportEntries].join('\n'); +} + +module.exports = defaultIndexTemplate; diff --git a/packages/grafana-icons/tsconfig.build.json b/packages/grafana-icons/tsconfig.build.json new file mode 100644 index 00000000000..54309163ebc --- /dev/null +++ b/packages/grafana-icons/tsconfig.build.json @@ -0,0 +1,4 @@ +{ + "exclude": ["dist", "node_modules", "test", "**/*.test.ts*"], + "extends": "./tsconfig.json" +} diff --git a/packages/grafana-icons/tsconfig.json b/packages/grafana-icons/tsconfig.json new file mode 100644 index 00000000000..06210e1a227 --- /dev/null +++ b/packages/grafana-icons/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "baseUrl": "./", + "declarationDir": "./compiled", + "emitDeclarationOnly": true, + "isolatedModules": true, + "rootDirs": ["."], + "resolveJsonModule": true + }, + "exclude": ["dist/**/*"], + "extends": "@grafana/tsconfig", + "include": ["src/**/*.ts"] +} diff --git a/yarn.lock b/yarn.lock index be7362fb9cc..8fdd8cf269e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -80,7 +80,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:7.24.3, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.22.9, @babel/core@npm:^7.7.5": +"@babel/core@npm:7.24.3, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.21.3, @babel/core@npm:^7.22.9, @babel/core@npm:^7.7.5": version: 7.24.3 resolution: "@babel/core@npm:7.24.3" dependencies: @@ -1723,7 +1723,7 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.24.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.24.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": version: 7.24.0 resolution: "@babel/types@npm:7.24.0" dependencies: @@ -4085,6 +4085,38 @@ __metadata: languageName: unknown linkType: soft +"@grafana/saga-icons@workspace:*, @grafana/saga-icons@workspace:packages/grafana-icons": + version: 0.0.0-use.local + resolution: "@grafana/saga-icons@workspace:packages/grafana-icons" + dependencies: + "@grafana/tsconfig": "npm:^1.3.0-rc1" + "@rollup/plugin-node-resolve": "npm:^15.2.3" + "@rollup/plugin-typescript": "npm:^11.1.6" + "@svgr/babel-plugin-remove-jsx-attribute": "npm:^8.0.0" + "@svgr/cli": "npm:^8.1.0" + "@svgr/plugin-jsx": "npm:^8.1.0" + "@svgr/plugin-prettier": "npm:^8.1.0" + "@svgr/plugin-svgo": "npm:^8.1.0" + "@types/node": "npm:20.11.19" + "@types/react": "npm:18.2.55" + "@types/react-dom": "npm:18.2.19" + esbuild: "npm:0.18.12" + prettier: "npm:3.2.5" + react: "npm:18.2.0" + react-dom: "npm:18.2.0" + rimraf: "npm:5.0.5" + rollup: "npm:2.79.1" + rollup-plugin-dts: "npm:^6.1.0" + rollup-plugin-esbuild: "npm:5.0.0" + rollup-plugin-node-externals: "npm:5.0.0" + ts-node: "npm:10.9.2" + typescript: "npm:5.3.3" + peerDependencies: + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + languageName: unknown + linkType: soft + "@grafana/scenes@npm:3.13.3": version: 3.13.3 resolution: "@grafana/scenes@npm:3.13.3" @@ -7018,7 +7050,7 @@ __metadata: languageName: node linkType: hard -"@rollup/plugin-node-resolve@npm:15.2.3": +"@rollup/plugin-node-resolve@npm:15.2.3, @rollup/plugin-node-resolve@npm:^15.2.3": version: 15.2.3 resolution: "@rollup/plugin-node-resolve@npm:15.2.3" dependencies: @@ -7053,6 +7085,25 @@ __metadata: languageName: node linkType: hard +"@rollup/plugin-typescript@npm:^11.1.6": + version: 11.1.6 + resolution: "@rollup/plugin-typescript@npm:11.1.6" + dependencies: + "@rollup/pluginutils": "npm:^5.1.0" + resolve: "npm:^1.22.1" + peerDependencies: + rollup: ^2.14.0||^3.0.0||^4.0.0 + tslib: "*" + typescript: ">=3.7.0" + peerDependenciesMeta: + rollup: + optional: true + tslib: + optional: true + checksum: 10/4ae4d6cfc929393171288df2f18b5eb837fa53d8689118d9661b3064567341f6f6cf8389af55f1d5f015e3682abf30a64ab609fdf75ecb5a84224505e407eb69 + languageName: node + linkType: hard + "@rollup/pluginutils@npm:^3.0.9": version: 3.1.0 resolution: "@rollup/pluginutils@npm:3.1.0" @@ -7066,7 +7117,7 @@ __metadata: languageName: node linkType: hard -"@rollup/pluginutils@npm:^5.0.1": +"@rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.1.0": version: 5.1.0 resolution: "@rollup/pluginutils@npm:5.1.0" dependencies: @@ -8342,6 +8393,178 @@ __metadata: languageName: node linkType: hard +"@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0": + version: 8.0.0 + resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/3fc8e35d16f5abe0af5efe5851f27581225ac405d6a1ca44cda0df064cddfcc29a428c48c2e4bef6cebf627c9ac2f652a096030edb02cf5a120ce28d3c234710 + languageName: node + linkType: hard + +"@svgr/babel-plugin-remove-jsx-attribute@npm:8.0.0, @svgr/babel-plugin-remove-jsx-attribute@npm:^8.0.0": + version: 8.0.0 + resolution: "@svgr/babel-plugin-remove-jsx-attribute@npm:8.0.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/ff992893c6c4ac802713ba3a97c13be34e62e6d981c813af40daabcd676df68a72a61bd1e692bb1eda3587f1b1d700ea462222ae2153bb0f46886632d4f88d08 + languageName: node + linkType: hard + +"@svgr/babel-plugin-remove-jsx-empty-expression@npm:8.0.0": + version: 8.0.0 + resolution: "@svgr/babel-plugin-remove-jsx-empty-expression@npm:8.0.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/0fb691b63a21bac00da3aa2dccec50d0d5a5b347ff408d60803b84410d8af168f2656e4ba1ee1f24dab0ae4e4af77901f2928752bb0434c1f6788133ec599ec8 + languageName: node + linkType: hard + +"@svgr/babel-plugin-replace-jsx-attribute-value@npm:8.0.0": + version: 8.0.0 + resolution: "@svgr/babel-plugin-replace-jsx-attribute-value@npm:8.0.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/1edda65ef4f4dd8f021143c8ec276a08f6baa6f733b8e8ee2e7775597bf6b97afb47fdeefd579d6ae6c959fe2e634f55cd61d99377631212228c8cfb351b8921 + languageName: node + linkType: hard + +"@svgr/babel-plugin-svg-dynamic-title@npm:8.0.0": + version: 8.0.0 + resolution: "@svgr/babel-plugin-svg-dynamic-title@npm:8.0.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/876cec891488992e6a9aebb8155e2bea4ec461b4718c51de36e988e00e271c6d9d01ef6be17b9effd44b2b3d7db0b41c161a5904a46ae6f38b26b387ad7f3709 + languageName: node + linkType: hard + +"@svgr/babel-plugin-svg-em-dimensions@npm:8.0.0": + version: 8.0.0 + resolution: "@svgr/babel-plugin-svg-em-dimensions@npm:8.0.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/be0e2d391164428327d9ec469a52cea7d93189c6b0e2c290999e048f597d777852f701c64dca44cd45b31ed14a7f859520326e2e4ad7c3a4545d0aa235bc7e9a + languageName: node + linkType: hard + +"@svgr/babel-plugin-transform-react-native-svg@npm:8.1.0": + version: 8.1.0 + resolution: "@svgr/babel-plugin-transform-react-native-svg@npm:8.1.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/85b434a57572f53bd2b9f0606f253e1fcf57b4a8c554ec3f2d43ed17f50d8cae200cb3aaf1ec9d626e1456e8b135dce530ae047eb0bed6d4bf98a752d6640459 + languageName: node + linkType: hard + +"@svgr/babel-plugin-transform-svg-component@npm:8.0.0": + version: 8.0.0 + resolution: "@svgr/babel-plugin-transform-svg-component@npm:8.0.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/86ca139c0be0e7df05f103c5f10874387ada1434ca0286584ba9cd367c259d74bf9c86700b856449f46cf674bd6f0cf18f8f034f6d3f0e2ce5e5435c25dbff4b + languageName: node + linkType: hard + +"@svgr/babel-preset@npm:8.1.0": + version: 8.1.0 + resolution: "@svgr/babel-preset@npm:8.1.0" + dependencies: + "@svgr/babel-plugin-add-jsx-attribute": "npm:8.0.0" + "@svgr/babel-plugin-remove-jsx-attribute": "npm:8.0.0" + "@svgr/babel-plugin-remove-jsx-empty-expression": "npm:8.0.0" + "@svgr/babel-plugin-replace-jsx-attribute-value": "npm:8.0.0" + "@svgr/babel-plugin-svg-dynamic-title": "npm:8.0.0" + "@svgr/babel-plugin-svg-em-dimensions": "npm:8.0.0" + "@svgr/babel-plugin-transform-react-native-svg": "npm:8.1.0" + "@svgr/babel-plugin-transform-svg-component": "npm:8.0.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/3a67930f080b8891e1e8e2595716b879c944d253112bae763dce59807ba23454d162216c8d66a0a0e3d4f38a649ecd6c387e545d1e1261dd69a68e9a3392ee08 + languageName: node + linkType: hard + +"@svgr/cli@npm:^8.1.0": + version: 8.1.0 + resolution: "@svgr/cli@npm:8.1.0" + dependencies: + "@svgr/core": "npm:8.1.0" + "@svgr/plugin-jsx": "npm:8.1.0" + "@svgr/plugin-prettier": "npm:8.1.0" + "@svgr/plugin-svgo": "npm:8.1.0" + camelcase: "npm:^6.2.0" + chalk: "npm:^4.1.2" + commander: "npm:^9.4.1" + dashify: "npm:^2.0.0" + glob: "npm:^8.0.3" + snake-case: "npm:^3.0.4" + bin: + svgr: bin/svgr + checksum: 10/b3478ebcbc3783160b548af5bfe352decdf6255b54d9256b752b2fabc296d743d55805eb596b82110e482b176fc3eab9ad91f979e92a505f224b27c1b9e3dbb1 + languageName: node + linkType: hard + +"@svgr/core@npm:8.1.0": + version: 8.1.0 + resolution: "@svgr/core@npm:8.1.0" + dependencies: + "@babel/core": "npm:^7.21.3" + "@svgr/babel-preset": "npm:8.1.0" + camelcase: "npm:^6.2.0" + cosmiconfig: "npm:^8.1.3" + snake-case: "npm:^3.0.4" + checksum: 10/bc98cd5fc349ab9dcf0c13c2279164726d45878cdac8999090765379c6e897a1b24aca641c12a3c33f578d06f7a09252fb090962a4695c753fb02b627a56bfe6 + languageName: node + linkType: hard + +"@svgr/hast-util-to-babel-ast@npm:8.0.0": + version: 8.0.0 + resolution: "@svgr/hast-util-to-babel-ast@npm:8.0.0" + dependencies: + "@babel/types": "npm:^7.21.3" + entities: "npm:^4.4.0" + checksum: 10/243aa9c92d66aa3f1fc82851fe1fa376808a08fcc02719fed38ebfb4e25cf3e3c1282c185300c29953d047c36acb9e3ac588d46b0af55a3b7a5186a6badec8a9 + languageName: node + linkType: hard + +"@svgr/plugin-jsx@npm:8.1.0, @svgr/plugin-jsx@npm:^8.1.0": + version: 8.1.0 + resolution: "@svgr/plugin-jsx@npm:8.1.0" + dependencies: + "@babel/core": "npm:^7.21.3" + "@svgr/babel-preset": "npm:8.1.0" + "@svgr/hast-util-to-babel-ast": "npm:8.0.0" + svg-parser: "npm:^2.0.4" + peerDependencies: + "@svgr/core": "*" + checksum: 10/0418a9780753d3544912ee2dad5d2cf8d12e1ba74df8053651b3886aeda54d5f0f7d2dece0af5e0d838332c4f139a57f0dabaa3ca1afa4d1a765efce6a7656f2 + languageName: node + linkType: hard + +"@svgr/plugin-prettier@npm:8.1.0, @svgr/plugin-prettier@npm:^8.1.0": + version: 8.1.0 + resolution: "@svgr/plugin-prettier@npm:8.1.0" + dependencies: + deepmerge: "npm:^4.3.1" + prettier: "npm:^2.8.7" + peerDependencies: + "@svgr/core": "*" + checksum: 10/834373d7d34906cfa67191933153c8c71bb5c13eff71e113730c8642b2abcce136cb0e1869d52642fe305593a84c1d54d39543f24091f6b8a2620c1333691638 + languageName: node + linkType: hard + +"@svgr/plugin-svgo@npm:8.1.0, @svgr/plugin-svgo@npm:^8.1.0": + version: 8.1.0 + resolution: "@svgr/plugin-svgo@npm:8.1.0" + dependencies: + cosmiconfig: "npm:^8.1.3" + deepmerge: "npm:^4.3.1" + svgo: "npm:^3.0.2" + peerDependencies: + "@svgr/core": "*" + checksum: 10/59d9d214cebaacca9ca71a561f463d8b7e5a68ca9443e4792a42d903acd52259b1790c0680bc6afecc3f00a255a6cbd7ea278a9f625bac443620ea58a590c2d0 + languageName: node + linkType: hard + "@swc/core-darwin-arm64@npm:1.4.2": version: 1.4.2 resolution: "@swc/core-darwin-arm64@npm:1.4.2" @@ -9706,6 +9929,15 @@ __metadata: languageName: node linkType: hard +"@types/node@npm:20.11.19": + version: 20.11.19 + resolution: "@types/node@npm:20.11.19" + dependencies: + undici-types: "npm:~5.26.4" + checksum: 10/c7f4705d6c84aa21679ad180c33c13ca9567f650e66e14bcee77c7c43d14619c7cd3b4d7b2458947143030b7b1930180efa6d12d999b45366abff9fed7a17472 + languageName: node + linkType: hard + "@types/node@npm:^14.14.31": version: 14.18.36 resolution: "@types/node@npm:14.18.36" @@ -9845,6 +10077,15 @@ __metadata: languageName: node linkType: hard +"@types/react-dom@npm:18.2.19": + version: 18.2.19 + resolution: "@types/react-dom@npm:18.2.19" + dependencies: + "@types/react": "npm:*" + checksum: 10/98eb760ce78f1016d97c70f605f0b1a53873a548d3c2192b40c897f694fd9c8bb12baeada16581a9c7b26f5022c1d2613547be98284d8f1b82d1611b1e3e7df0 + languageName: node + linkType: hard + "@types/react-grid-layout@npm:1.3.5": version: 1.3.5 resolution: "@types/react-grid-layout@npm:1.3.5" @@ -9971,6 +10212,17 @@ __metadata: languageName: node linkType: hard +"@types/react@npm:18.2.55": + version: 18.2.55 + resolution: "@types/react@npm:18.2.55" + dependencies: + "@types/prop-types": "npm:*" + "@types/scheduler": "npm:*" + csstype: "npm:^3.0.2" + checksum: 10/bf8fe19e73575489e63c0726355f164157cd69e75f2a862436ad2c0586e732cb953a7255a6bc73145e8f9506ee7a723f9a569ca9a39c53984e5b12b84e1c718a + languageName: node + linkType: hard + "@types/reactcss@npm:*": version: 1.2.6 resolution: "@types/reactcss@npm:1.2.6" @@ -13316,6 +13568,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:^9.4.1": + version: 9.5.0 + resolution: "commander@npm:9.5.0" + checksum: 10/41c49b3d0f94a1fbeb0463c85b13f15aa15a9e0b4d5e10a49c0a1d58d4489b549d62262b052ae0aa6cfda53299bee487bfe337825df15e342114dde543f82906 + languageName: node + linkType: hard + "commander@npm:~11.1.0": version: 11.1.0 resolution: "commander@npm:11.1.0" @@ -13729,7 +13988,7 @@ __metadata: languageName: node linkType: hard -"cosmiconfig@npm:^8.2.0": +"cosmiconfig@npm:^8.1.3, cosmiconfig@npm:^8.2.0": version: 8.3.6 resolution: "cosmiconfig@npm:8.3.6" dependencies: @@ -14689,6 +14948,13 @@ __metadata: languageName: node linkType: hard +"dashify@npm:^2.0.0": + version: 2.0.0 + resolution: "dashify@npm:2.0.0" + checksum: 10/f13233f38fc39ea8dabe3a5bef51421906aa8a52e4403fcb56e3e6464428f5c0bdd75562706929a245c698bceccf68a82e30e9e327a0c582469868522a163f8c + languageName: node + linkType: hard + "data-urls@npm:^3.0.2": version: 3.0.2 resolution: "data-urls@npm:3.0.2" @@ -14908,7 +15174,7 @@ __metadata: languageName: node linkType: hard -"deepmerge@npm:^4.0, deepmerge@npm:^4.2.2": +"deepmerge@npm:^4.0, deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1": version: 4.3.1 resolution: "deepmerge@npm:4.3.1" checksum: 10/058d9e1b0ff1a154468bf3837aea436abcfea1ba1d165ddaaf48ca93765fdd01a30d33c36173da8fbbed951dd0a267602bc782fe288b0fc4b7e1e7091afc4529 @@ -18115,7 +18381,7 @@ __metadata: languageName: node linkType: hard -"glob@npm:^8.0.1": +"glob@npm:^8.0.1, glob@npm:^8.0.3": version: 8.1.0 resolution: "glob@npm:8.1.0" dependencies: @@ -18293,6 +18559,7 @@ __metadata: "@grafana/plugin-e2e": "npm:^0.21.0" "@grafana/prometheus": "workspace:*" "@grafana/runtime": "workspace:*" + "@grafana/saga-icons": "workspace:*" "@grafana/scenes": "npm:3.13.3" "@grafana/schema": "workspace:*" "@grafana/sql": "workspace:*" @@ -22042,6 +22309,15 @@ __metadata: languageName: node linkType: hard +"magic-string@npm:^0.30.4": + version: 0.30.8 + resolution: "magic-string@npm:0.30.8" + dependencies: + "@jridgewell/sourcemap-codec": "npm:^1.4.15" + checksum: 10/72ab63817af600e92c19dc8489c1aa4a9599da00cfd59b2319709bd48fb0cf533fdf354bf140ac86e598dbd63e6b2cc83647fe8448f864a3eb6061c62c94e784 + languageName: node + linkType: hard + "make-dir@npm:4.0.0": version: 4.0.0 resolution: "make-dir@npm:4.0.0" @@ -25128,6 +25404,15 @@ __metadata: languageName: node linkType: hard +"prettier@npm:^2.8.7": + version: 2.8.8 + resolution: "prettier@npm:2.8.8" + bin: + prettier: bin-prettier.js + checksum: 10/00cdb6ab0281f98306cd1847425c24cbaaa48a5ff03633945ab4c701901b8e96ad558eb0777364ffc312f437af9b5a07d0f45346266e8245beaf6247b9c62b24 + languageName: node + linkType: hard + "pretty-bytes@npm:^5.6.0": version: 5.6.0 resolution: "pretty-bytes@npm:5.6.0" @@ -27548,6 +27833,22 @@ __metadata: languageName: node linkType: hard +"rollup-plugin-dts@npm:^6.1.0": + version: 6.1.0 + resolution: "rollup-plugin-dts@npm:6.1.0" + dependencies: + "@babel/code-frame": "npm:^7.22.13" + magic-string: "npm:^0.30.4" + peerDependencies: + rollup: ^3.29.4 || ^4 + typescript: ^4.5 || ^5.0 + dependenciesMeta: + "@babel/code-frame": + optional: true + checksum: 10/2ecbda8eb0644ce98ee3a795bf5b99368d80e357972c227b07c382c4af34e03fe681c0f6674e1967330b69e79f2ddf288a672f8964441d5f98e9998c50f41a01 + languageName: node + linkType: hard + "rollup-plugin-esbuild@npm:5.0.0": version: 5.0.0 resolution: "rollup-plugin-esbuild@npm:5.0.0" @@ -27564,6 +27865,15 @@ __metadata: languageName: node linkType: hard +"rollup-plugin-node-externals@npm:5.0.0": + version: 5.0.0 + resolution: "rollup-plugin-node-externals@npm:5.0.0" + peerDependencies: + rollup: ^2.60.0 + checksum: 10/745df84e554dc8b779ade79d88e1e21b30780653b9e454f8591163d87d55519bc71219a7f7a994ed32a3f2d5f9eb498be0649a78b42992806c272597bf49f207 + languageName: node + linkType: hard + "rollup-plugin-node-externals@npm:^5.0.0": version: 5.0.2 resolution: "rollup-plugin-node-externals@npm:5.0.2" @@ -28339,6 +28649,16 @@ __metadata: languageName: node linkType: hard +"snake-case@npm:^3.0.4": + version: 3.0.4 + resolution: "snake-case@npm:3.0.4" + dependencies: + dot-case: "npm:^3.0.4" + tslib: "npm:^2.0.3" + checksum: 10/0a7a79900bbb36f8aaa922cf111702a3647ac6165736d5dc96d3ef367efc50465cac70c53cd172c382b022dac72ec91710608e5393de71f76d7142e6fd80e8a3 + languageName: node + linkType: hard + "sockjs@npm:^0.3.24": version: 0.3.24 resolution: "sockjs@npm:0.3.24" @@ -29268,6 +29588,13 @@ __metadata: languageName: node linkType: hard +"svg-parser@npm:^2.0.4": + version: 2.0.4 + resolution: "svg-parser@npm:2.0.4" + checksum: 10/ec196da6ea21481868ab26911970e35488361c39ead1c6cdd977ba16c885c21a91ddcbfd113bfb01f79a822e2a751ef85b2f7f95e2cb9245558ebce12c34af1f + languageName: node + linkType: hard + "svg-pathdata@npm:^6.0.3": version: 6.0.3 resolution: "svg-pathdata@npm:6.0.3" @@ -29282,7 +29609,7 @@ __metadata: languageName: node linkType: hard -"svgo@npm:^3.2.0": +"svgo@npm:^3.0.2, svgo@npm:^3.2.0": version: 3.2.0 resolution: "svgo@npm:3.2.0" dependencies: