Deprecate the AddItems icon

.changeset/sweet-mice-swim.md

@@ -0,0 +1,5 @@
+---
+'@sumup/icons': minor
+---
+
+Deprecated the AddItems icon. Use the Add or Items icons instead.

packages/icons/manifest.json

@@ -13,7 +13,8 @@
     {
       "name": "add_items",
       "category": "Action",
-      "size": "24"
+      "size": "24",
+      "deprecation": "Use the `Add` or `Items` icons instead."
     },
     {
       "name": "chevron_down",

packages/icons/package.json

@@ -35,11 +35,9 @@
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@types/babel__core": "^7.20.0",
-    "@types/dedent": "^0.7.0",
-    "@types/lodash": "^4.14.194",
+    "@types/prettier": "^2.7.2",
     "babel-plugin-inline-react-svg": "^2.0.2",
-    "dedent": "^0.7.0",
-    "lodash": "^4.17.21",
+    "prettier": "^2.8.8",
     "ts-node": "^10.9.1",
     "ts-node-dev": "^2.0.0",
     "typescript": "^5.0.4"

packages/icons/scripts/web.ts

@@ -16,8 +16,7 @@
 import fs from 'fs';
 import path from 'path';
 
-import dedent from 'dedent';
-import { entries, flow, groupBy, map } from 'lodash/fp';
+import prettier from 'prettier';
 import { transformSync } from '@babel/core';
 
 import manifest from '../manifest.json';
@@ -26,23 +25,29 @@ const BASE_DIR = path.join(__dirname, '..');
 const ICON_DIR = path.join(BASE_DIR, './web/v2');
 const DIST_DIR = path.join(BASE_DIR, 'dist');
 
-enum IconSize {
-  SIZE_16 = '16',
-  SIZE_24 = '24',
-  SIZE_32 = '32',
-}
-
 type Icon = {
   name: string;
   category: string;
-  size: IconSize;
+  size: '16' | '24' | '32';
+  deprecation?: string;
 };
 
 type Component = {
   name: string;
   icons: Icon[];
+  deprecation?: string;
 };
 
+function createDeprecationComment(deprecation?: string) {
+  if (!deprecation) {
+    return '';
+  }
+  return `
+    /**
+     * @deprecated ${deprecation}
+     */`;
+}
+
 function getComponentName(name: string): string {
   // Split on non-word characters
   const words = name.split(/[^a-z0-9]/i);
@@ -78,17 +83,16 @@ function buildComponentFile(component: Component): string {
   /**
    * TODO look into whether we still need the React import here
    */
-  return dedent`
+  return `
     import React from 'react';
     ${iconImports.join('\n')}
 
     const sizeMap = {
       ${sizeMap.join('\n')}
     }
 
-    export const ${
-      component.name
-    } = ({ size = '${defaultSize}', ...props }) => {
+    ${createDeprecationComment(component.deprecation)}
+    export function ${component.name}({ size = '${defaultSize}', ...props }) {
       const Icon = sizeMap[size] || sizeMap['${defaultSize}'];
 
       if (
@@ -114,11 +118,13 @@ function buildDeclarationFile(components: Component[]): string {
   const declarationStatements = components.map((component) => {
     const sizes = component.icons.map(({ size }) => `'${size}'`).sort();
     const SizesType = sizes.join(' | ');
-    return `declare const ${component.name}: FC<IconProps<${SizesType}>>;`;
+    return `
+      ${createDeprecationComment(component.deprecation)}
+      declare const ${component.name}: FC<IconProps<${SizesType}>>;`;
   });
   const exportNames = components.map((file) => file.name);
-  return dedent`
-    import { FC, SVGProps } from 'react';
+  return `
+    import type { FC, SVGProps } from 'react';
 
     export interface IconProps<Sizes = '16' | '24' | '32'> extends SVGProps<SVGSVGElement> {
       /**
@@ -136,6 +142,7 @@ function buildDeclarationFile(components: Component[]): string {
         name: string;
         category: string;
         size: '16' | '24' | '32';
+        deprecation?: boolean;
       }[];
     };
   `;
@@ -166,25 +173,31 @@ function transpileModule(fileName: string, code: string): void {
 function writeFile(dir: string, fileName: string, fileContent: string): void {
   const filePath = path.join(dir, fileName);
   const directory = path.dirname(filePath);
+  const formattedContent = prettier.format(fileContent, { filepath: filePath });
   if (directory && directory !== '.') {
     fs.mkdirSync(directory, { recursive: true });
   }
-  return fs.writeFile(filePath, fileContent, { flag: 'w' }, (err) => {
+  return fs.writeFile(filePath, formattedContent, { flag: 'w' }, (err) => {
     if (err) {
       throw err;
     }
   });
 }
 
 function main(): void {
-  const components = flow(
-    groupBy('name'),
-    entries,
-    map((group: [string, Icon[]]) => ({
-      name: getComponentName(group[0]),
-      icons: group[1],
-    })),
-  )(manifest.icons) as Component[];
+  const icons = manifest.icons as Icon[];
+  const iconsByName = icons.reduce((acc, icon) => {
+    acc[icon.name] = acc[icon.name] || [];
+    acc[icon.name].push(icon);
+    return acc;
+  }, {} as Record<string, Icon[]>);
+  const components = Object.entries(iconsByName).map(
+    ([name, icons]): Component => ({
+      name: getComponentName(name),
+      icons,
+      deprecation: icons.find((icon) => icon.deprecation)?.deprecation,
+    }),
+  );
 
   const indexRaw = buildIndexFile(components);
   const declarationFile = buildDeclarationFile(components);