Fct 1311 - icons bundle 2 (#3014)

* feat(icons): [publish_preview] update icon template with new imports, remove unnecessary styling boilerplate from icons template

* feat(icons): [publish_preview] work?

* chore(rebase): update yarn.lock

* feat(icons): add CustomIcon LeadingIcon and InlineSvg to @commercetools-ui-kit/icons namespace, remove unnecessary pure annotations from icon template in svgr.config.js, add CONTRIBUTING.md file explaining how to add/update/remove icons in ui kit

* feat(icons): update documentation, remove unnecessary eslint plugin, add preview branch name check back into preview-release github workflow

* feat(icons): don't namespace CustomIcon, LeadingIcon, and InlineSvg to @commercetools-uikit/icons for backwards compatibility reasons

* feat(icons): update docs

.changeset/quiet-turkeys-smell.md

@@ -0,0 +1,7 @@
+---
+'@commercetools-uikit/rich-text-utils': minor
+'@commercetools-uikit/checkbox-input': minor
+'@commercetools-uikit/icons': minor
+---
+
+Update handling of icons to reduce file size of each icon, update bundling of icons package so that each icon has its own entrypoint to allow for better tree shaking in consuming applications

.eslintrc.js

@@ -7,6 +7,7 @@ const path = require('path');
  */
 module.exports = {
   extends: ['@commercetools-frontend/eslint-config-mc-app'],
+
   rules: {
     'testing-library/no-node-access': 'off',
     'testing-library/no-container': 'off',

CONTRIBUTING.md

@@ -123,7 +123,10 @@ If you want to modify an existing translation, you will need to manually edit th
 To add new icons in the `@commercetools-uikit/icons` package:
 
 1. Add the raw SVG file to the `packages/components/icons/src/svg` folder. Make sure the file name ends with `.react.svg`.
-2. Run the `yarn generate-icons` command to generate the React component files. The components are generated using the `svgo` CLI and the template file `packages/components/icons/src/templates/icon.styles.tsx`.
+2. Run the `yarn generate-icons` command to generate the React component files. The components are generated using the `svgr` CLI and the template file in `svgr/config.js`
+3. Run `yarn preconstruct dev` to generate the necessary entrypoint folders for the icon.
+
+See `packages/components/icons/src/CONTRIBUTING.md` for more details.
 
 ## Adding changesets
 

packages/components/icons/CONTRIBUTING.md

@@ -0,0 +1,29 @@
+# Contributing SVG Icons
+
+## How svg's are defined and built
+
+All icons that are available in UI Kit are stored as `*.react.svg` files in the `src/svg` folder. This folder is meant to be the single source of truth for all icons.
+
+To make the svg files consumable by react applications, we run each icon in `src/svg` through [svgr](https://react-svgr.com/docs/cli/). Svgr uses a custom template defined in `svgr.config.js` to transpile each svg into a react component defined in `src/generated`.
+
+Each `tsx` file generated by svgr in `src/generated` is specified as an entrypoint in the `preconstruct.entrypoints` array in `./package.json` in order to allow for [tree shaking](https://webpack.js.org/guides/tree-shaking/) of individual icons in applications that consume them.
+
+For all icons to have an entrypoint in the `icons` package, there must be a folder in `./generated` for each icon that contains a `package.json` file and `dist/` folder. Preconstruct handles adding this folder for any `tsx` file that does not have one when you run `preconstruct dev` or `yarn build` from the root of this repository.
+
+### Adding an svg
+
+- Add the raw SVG file ending in `.react.svg` to `./src/svg`.
+- Run `yarn build` from the root of the application.
+- Say yes to the prompt that asks: `? @commercetools-uikit/icons/generated/AatestReact A package.json file does not exist for this entrypoint, would you like to create one automatically? (Y/n) `.
+
+### Updating an svg
+
+- update the svg file in `./src/svg`
+- run `yarn build` from the repository root
+
+### Deleting an svg
+
+- delete the raw svg from `./src/svg`
+- delete the `./generated` and `./src/generated` folders. This insures that the deleted icon does not persist in the generated files.
+- run `yarn build`
+- Hit `a` to select all packages when the prompt asks `🎁 ? A package.json file does not exist for this entrypoint, would you like to create one automatically? … `. This insures that there is an entrypoint package for each icon in `src/generated`.

packages/components/icons/generated/AngleDownReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-AngleDownReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-AngleDownReact.esm.js"
+}

packages/components/icons/generated/AngleLeftReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-AngleLeftReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-AngleLeftReact.esm.js"
+}

packages/components/icons/generated/AngleRightReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-AngleRightReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-AngleRightReact.esm.js"
+}

packages/components/icons/generated/AngleThinLeftReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-AngleThinLeftReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-AngleThinLeftReact.esm.js"
+}

packages/components/icons/generated/AngleThinRightReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-AngleThinRightReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-AngleThinRightReact.esm.js"
+}

packages/components/icons/generated/AngleUpDownReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-AngleUpDownReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-AngleUpDownReact.esm.js"
+}

packages/components/icons/generated/AngleUpReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-AngleUpReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-AngleUpReact.esm.js"
+}

packages/components/icons/generated/ArrowDownReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ArrowDownReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ArrowDownReact.esm.js"
+}

packages/components/icons/generated/ArrowLeftReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ArrowLeftReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ArrowLeftReact.esm.js"
+}

packages/components/icons/generated/ArrowLongDownReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ArrowLongDownReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ArrowLongDownReact.esm.js"
+}

packages/components/icons/generated/ArrowRightReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ArrowRightReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ArrowRightReact.esm.js"
+}

packages/components/icons/generated/ArrowTriangleDownReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ArrowTriangleDownReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ArrowTriangleDownReact.esm.js"
+}

packages/components/icons/generated/ArrowTriangleUpReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ArrowTriangleUpReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ArrowTriangleUpReact.esm.js"
+}

packages/components/icons/generated/ArrowUpReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ArrowUpReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ArrowUpReact.esm.js"
+}

packages/components/icons/generated/ArrowsMinimizeReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ArrowsMinimizeReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ArrowsMinimizeReact.esm.js"
+}

packages/components/icons/generated/ArrowsReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ArrowsReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ArrowsReact.esm.js"
+}

packages/components/icons/generated/BackReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-BackReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-BackReact.esm.js"
+}

packages/components/icons/generated/BidirectionalArrowReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-BidirectionalArrowReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-BidirectionalArrowReact.esm.js"
+}

packages/components/icons/generated/BinFilledReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-BinFilledReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-BinFilledReact.esm.js"
+}

packages/components/icons/generated/BinLinearReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-BinLinearReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-BinLinearReact.esm.js"
+}

packages/components/icons/generated/BoxReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-BoxReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-BoxReact.esm.js"
+}

packages/components/icons/generated/BrainReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-BrainReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-BrainReact.esm.js"
+}

packages/components/icons/generated/CalendarReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CalendarReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CalendarReact.esm.js"
+}

packages/components/icons/generated/CameraReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CameraReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CameraReact.esm.js"
+}

packages/components/icons/generated/CaretDownReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CaretDownReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CaretDownReact.esm.js"
+}

packages/components/icons/generated/CaretDownSmallReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CaretDownSmallReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CaretDownSmallReact.esm.js"
+}

packages/components/icons/generated/CaretUpReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CaretUpReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CaretUpReact.esm.js"
+}

packages/components/icons/generated/CaretUpSmallReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CaretUpSmallReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CaretUpSmallReact.esm.js"
+}

packages/components/icons/generated/CartReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CartReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CartReact.esm.js"
+}

packages/components/icons/generated/ChainBrokenReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ChainBrokenReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ChainBrokenReact.esm.js"
+}

packages/components/icons/generated/ChainReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ChainReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ChainReact.esm.js"
+}

packages/components/icons/generated/CheckActiveReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CheckActiveReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CheckActiveReact.esm.js"
+}

packages/components/icons/generated/CheckBoldReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CheckBoldReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CheckBoldReact.esm.js"
+}

packages/components/icons/generated/CheckInactiveReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CheckInactiveReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CheckInactiveReact.esm.js"
+}

packages/components/icons/generated/CheckThinReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CheckThinReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CheckThinReact.esm.js"
+}

packages/components/icons/generated/CircleReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CircleReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CircleReact.esm.js"
+}

packages/components/icons/generated/ClipboardReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ClipboardReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ClipboardReact.esm.js"
+}

packages/components/icons/generated/ClockReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ClockReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ClockReact.esm.js"
+}

packages/components/icons/generated/ClockWithArrowReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ClockWithArrowReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ClockWithArrowReact.esm.js"
+}

packages/components/icons/generated/CloseBoldReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CloseBoldReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CloseBoldReact.esm.js"
+}

packages/components/icons/generated/CloseReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CloseReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CloseReact.esm.js"
+}

packages/components/icons/generated/CodeViewReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CodeViewReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CodeViewReact.esm.js"
+}

packages/components/icons/generated/CoinsReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CoinsReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CoinsReact.esm.js"
+}

packages/components/icons/generated/ColumnsReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ColumnsReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ColumnsReact.esm.js"
+}

packages/components/icons/generated/ConnectedSquareReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ConnectedSquareReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ConnectedSquareReact.esm.js"
+}

packages/components/icons/generated/ConnectedTriangleReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ConnectedTriangleReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ConnectedTriangleReact.esm.js"
+}

packages/components/icons/generated/CopyReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CopyReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CopyReact.esm.js"
+}

packages/components/icons/generated/CtCheckoutReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CtCheckoutReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CtCheckoutReact.esm.js"
+}

packages/components/icons/generated/CubeReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CubeReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CubeReact.esm.js"
+}

packages/components/icons/generated/CubesReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-CubesReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-CubesReact.esm.js"
+}

packages/components/icons/generated/DiamondReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-DiamondReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-DiamondReact.esm.js"
+}

packages/components/icons/generated/DomainReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-DomainReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-DomainReact.esm.js"
+}

packages/components/icons/generated/DotReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-DotReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-DotReact.esm.js"
+}

packages/components/icons/generated/DownloadReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-DownloadReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-DownloadReact.esm.js"
+}

packages/components/icons/generated/DragDropReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-DragDropReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-DragDropReact.esm.js"
+}

packages/components/icons/generated/DragReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-DragReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-DragReact.esm.js"
+}

packages/components/icons/generated/EditReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-EditReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-EditReact.esm.js"
+}

packages/components/icons/generated/ErrorReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ErrorReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ErrorReact.esm.js"
+}

packages/components/icons/generated/ExpandReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ExpandReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ExpandReact.esm.js"
+}

packages/components/icons/generated/ExportReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ExportReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ExportReact.esm.js"
+}

packages/components/icons/generated/ExternalLinkReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-ExternalLinkReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-ExternalLinkReact.esm.js"
+}

packages/components/icons/generated/EyeCrossedReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-EyeCrossedReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-EyeCrossedReact.esm.js"
+}

packages/components/icons/generated/EyeReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-EyeReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-EyeReact.esm.js"
+}

packages/components/icons/generated/FilterAndListReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-FilterAndListReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-FilterAndListReact.esm.js"
+}

packages/components/icons/generated/FilterReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-FilterReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-FilterReact.esm.js"
+}

packages/components/icons/generated/FlagFilledReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-FlagFilledReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-FlagFilledReact.esm.js"
+}

packages/components/icons/generated/FlagLinearReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-FlagLinearReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-FlagLinearReact.esm.js"
+}

packages/components/icons/generated/FlameReact/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-icons-generated-FlameReact.cjs.js",
+  "module": "dist/commercetools-uikit-icons-generated-FlameReact.esm.js"
+}