fix(ui kit icons): create icon-utils file and export getIconStyles, T…

…IconProps, and TSVGProps from design system package to enable importing these methods/types in a defined namespace in svgr template, remove unnecessary index.tsx files from all generated icon folders (#3009)

.changeset/late-nails-tell.md

@@ -0,0 +1,8 @@
+---
+'@commercetools-uikit/rich-text-utils': minor
+'@commercetools-uikit/checkbox-input': minor
+'@commercetools-uikit/icons': minor
+'@commercetools-uikit/design-system': minor
+---
+
+Add icon-utils to design-system package so that icon styling boilerplate can be standardized and reduced, remove extraneous index.tsx in favor of index.ts files in each generated icon file"

design-system/src/icon-utils.ts

@@ -0,0 +1,118 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { css } from '@emotion/react';
+import designTokens from './design-tokens';
+
+export type TIconProps = {
+  color?:
+    | 'solid'
+    | 'neutral60'
+    | 'surface'
+    | 'info'
+    | 'primary'
+    | 'primary40'
+    | 'warning'
+    | 'error'
+    | 'success';
+  /**
+   * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
+   */
+  size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
+};
+export type TSVGProps = TIconProps & { className: string };
+
+const iconSizes = {
+  small: 12,
+  medium: 16,
+  big: 24,
+  '10': 12,
+  '20': 16,
+  '30': 20,
+  '40': 24,
+} as const;
+const getSizeDimensions = (size: TIconProps['size']) => {
+  switch (size) {
+    case 'scale':
+      return { width: '100%', height: 'auto' };
+    case 'small':
+    case 'medium':
+    case 'big':
+    case '10':
+    case '20':
+    case '30':
+    case '40':
+      return { width: `${iconSizes[size]}px`, height: `${iconSizes[size]}px` };
+    default:
+      return { width: `${iconSizes['40']}px`, height: `${iconSizes['40']}px` };
+  }
+};
+const getSizeStyle = (size: TIconProps['size']) => {
+  const dimensions = getSizeDimensions(size);
+  switch (size) {
+    case 'scale':
+      return `
+        &:not(:root) {
+          width: ${dimensions.width};
+          height: ${dimensions.height};
+        }
+      `;
+    default:
+      return `
+        width: ${dimensions.width};
+        height: ${dimensions.height};
+      `;
+  }
+};
+
+const getColor = (color: TIconProps['color']) => {
+  if (!color) return 'inherit';
+
+  let iconColor;
+  switch (color) {
+    case 'solid':
+      iconColor = designTokens.colorSolid;
+      break;
+    case 'neutral60':
+      iconColor = designTokens.colorNeutral60;
+      break;
+    case 'surface':
+      iconColor = designTokens.colorSurface;
+      break;
+    case 'info':
+      iconColor = designTokens.colorInfo;
+      break;
+    case 'primary':
+      iconColor = designTokens.colorPrimary;
+      break;
+    case 'primary40':
+      iconColor = designTokens.colorPrimary40;
+      break;
+    case 'warning':
+      iconColor = designTokens.colorWarning;
+      break;
+    case 'error':
+      iconColor = designTokens.colorError;
+      break;
+    case 'success':
+      iconColor = designTokens.colorSuccess;
+      break;
+    default:
+      break;
+  }
+
+  if (!iconColor) {
+    return 'inherit';
+  }
+
+  return iconColor;
+};
+
+export const getIconStyles = (props: TIconProps) => css`
+  *:not([fill='none']) {
+    fill: ${getColor(props.color)};
+  }
+  &,
+  image {
+    ${getSizeStyle(props.size)};
+  }
+  flex-shrink: 0;
+`;

design-system/src/index.ts

@@ -7,5 +7,6 @@ export {
 export { ThemeProvider, useTheme, withThemeContext } from './theme-provider';
 export * from './export-types';
 export * from './utils';
+export * from './icon-utils';
 
 export { default as version } from './version';

package.json

@@ -11,7 +11,7 @@
     "auth": "npm_config_registry=https://registry.npmjs.org npm whoami",
     "clean": "manypkg exec rm -rf dist",
     "generate-readmes": "yarn generate-readme --all-workspace-packages",
-    "generate-icons": "manypkg run icons generate-icons && manypkg run checkbox-input generate-icons && manypkg run rich-text-utils generate-icons && prettier --write '**/generated/*.tsx'",
+    "generate-icons": "manypkg run icons generate-icons && manypkg run checkbox-input generate-icons && manypkg run rich-text-utils generate-icons && prettier --write '**/generated/*.{ts,tsx}'",
     "design-tokens:build": "manypkg run design-system build:tokens",
     "design-tokens:build:watch": "manypkg run design-system build:tokens:watch",
     "build": "./scripts/build.sh",

packages/components/icons/src/export-types.ts

@@ -1 +1,17 @@
-export type { Props, SVGProps } from './templates/icon.styles';
+export type Props = {
+  color?:
+    | 'solid'
+    | 'neutral60'
+    | 'surface'
+    | 'info'
+    | 'primary'
+    | 'primary40'
+    | 'warning'
+    | 'error'
+    | 'success';
+  /**
+   * The size of the icon. 'small', 'medium', 'big' have been deprecated in favor of '10', '20', '30', '40'.
+   */
+  size?: 'small' | 'medium' | 'big' | 'scale' | '10' | '20' | '30' | '40';
+};
+export type SVGProps = Props & { className: string };