feat: add icons-plugin app

apps/icons-plugin/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

apps/icons-plugin/project.json

@@ -0,0 +1,89 @@
+{
+  "name": "icons-plugin",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/icons-plugin/src",
+  "tags": [],
+  "targets": {
+    "buildPlugin": {
+      "executor": "@nx/esbuild:esbuild",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "minify": true,
+        "outputPath": "apps/icons-plugin/src/assets/",
+        "main": "apps/icons-plugin/src/plugin.ts",
+        "tsConfig": "apps/icons-plugin/tsconfig.plugin.json",
+        "generatePackageJson": false,
+        "format": ["esm"],
+        "deleteOutputPath": false
+      }
+    },
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/icons-plugin",
+        "index": "apps/icons-plugin/src/index.html",
+        "browser": "apps/icons-plugin/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/icons-plugin/tsconfig.app.json",
+        "assets": [
+          "apps/icons-plugin/src/favicon.ico",
+          "apps/icons-plugin/src/assets"
+        ],
+        "styles": [
+          "libs/plugins-styles/src/lib/styles.css",
+          "apps/icons-plugin/src/styles.css"
+        ],
+        "optimization": {
+          "scripts": true,
+          "styles": true,
+          "fonts": false
+        },
+        "scripts": []
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "icons-plugin:build:production"
+        },
+        "development": {
+          "buildTarget": "icons-plugin:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "icons-plugin:build"
+      }
+    }
+  }
+}

apps/icons-plugin/src/app/app.component.ts

@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { FeatherIconNames, icons } from 'feather-icons';
+import { SafeHtmlPipe } from './pipes/safe-html.pipe';
+import { IconButtonComponent } from './components/icon-button/icon-button.component';
+import { IconSearchComponent } from './components/icon-search/icon-search.component';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    RouterModule,
+    SafeHtmlPipe,
+    IconButtonComponent,
+    IconSearchComponent,
+  ],
+  styleUrl: './app.component.css',
+  template: `<div>
+    <div>
+      <app-icon-search
+        (searchIcons)="this.searchIcons($event)"
+      ></app-icon-search>
+    </div>
+    @for (key of iconKeys; track key) {
+    <app-icon-button
+      [icon]="icons[key]"
+      (insertIcon)="this.insertIcon(key)"
+    ></app-icon-button>
+    }
+  </div>`,
+})
+export class AppComponent {
+  public icons = icons;
+  public iconKeys: FeatherIconNames[] = Object.keys(
+    icons
+  ) as FeatherIconNames[];
+
+  public insertIcon(key: FeatherIconNames): void {
+    this.sendMessage({ content: icons[key].toSvg(), name: icons[key].name });
+  }
+
+  public searchIcons(search: string): void {
+    const allKeys = Object.keys(icons) as FeatherIconNames[];
+
+    if (search === '') {
+      this.iconKeys = allKeys;
+      return;
+    }
+
+    this.iconKeys = allKeys.filter(
+      (key) =>
+        this.icons[key].tags.some((t) => t.match(search)) ||
+        this.icons[key].name.match(search)
+    ) as FeatherIconNames[];
+  }
+
+  private sendMessage(message: unknown): void {
+    parent.postMessage(message, '*');
+  }
+}

apps/icons-plugin/src/app/components/icon-button/icon-button.component.css

@@ -0,0 +1,16 @@
+.icon-button {
+  padding: 0.25rem;
+  color: #000;
+  background: transparent;
+  border-radius: 0.5rem;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  &:focus,
+  &:active {
+    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
+  }
+}

apps/icons-plugin/src/app/components/icon-button/icon-button.component.ts

@@ -0,0 +1,42 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SafeHtmlPipe } from '../../pipes/safe-html.pipe';
+import { FeatherIcon } from 'feather-icons';
+
+@Component({
+  selector: 'app-icon-button',
+  standalone: true,
+  imports: [CommonModule, SafeHtmlPipe],
+  styleUrl: './icon-button.component.css',
+  template: `<button
+    class="icon-button"
+    [attr.aria-label]="'Insert icon: ' + icon.name"
+    [title]="icon.name"
+    (click)="onInsertIcon()"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      width="24"
+      height="24"
+      view-box="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      [innerHtml]="icon.contents | safeHtml"
+    ></svg>
+  </button>`,
+})
+export class IconButtonComponent {
+  @Input({ required: true })
+  public icon!: FeatherIcon;
+
+  @Output()
+  private insertIcon = new EventEmitter<void>();
+
+  public onInsertIcon(): void {
+    this.insertIcon.emit();
+  }
+}

apps/icons-plugin/src/app/components/icon-search/icon-search.component.ts

@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { icons } from 'feather-icons';
+
+@Component({
+  selector: 'app-icon-search',
+  standalone: true,
+  imports: [CommonModule],
+  styleUrl: './icon-search.component.css',
+  template: `<input
+    type="search"
+    [placeholder]="'Search ' + iconsCount + ' icons'"
+    (input)="onSearchIcons($event)"
+  />`,
+})
+export class IconSearchComponent {
+  @Output()
+  private searchIcons = new EventEmitter<string>();
+
+  public iconsCount = Object.keys(icons).length;
+
+  public onSearchIcons(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.searchIcons.emit(target?.value || '');
+  }
+}

apps/icons-plugin/src/app/pipes/safe-html.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'safeHtml', standalone: true })
+export class SafeHtmlPipe implements PipeTransform {
+  constructor(private sanitized: DomSanitizer) {}
+
+  transform(value: string) {
+    return this.sanitized.bypassSecurityTrustHtml(value);
+  }
+}

apps/icons-plugin/src/assets/manifest.json

@@ -0,0 +1,5 @@
+{
+  "name": "Iccons plugin",
+  "code": "http://localhost:4202/assets/plugin.js",
+  "permissions": ["page:read", "file:read", "selection:read"]
+}

apps/icons-plugin/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>icons-plugin</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

apps/icons-plugin/src/main.ts

@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent).catch((err) => console.error(err));

apps/icons-plugin/src/plugin.ts

@@ -0,0 +1,13 @@
+penpot.ui.open('Icons plugin', 'http://localhost:4202', {
+  width: 500,
+  height: 600,
+});
+
+penpot.ui.onMessage<{ content: string; name: string }>((message) => {
+  const svgIcon = message.content;
+  const iconName = message.name;
+  const icon = penpot.createShapeFromSvg(svgIcon);
+  icon.name = iconName;
+  icon.x = penpot.viewport.center.x;
+  icon.y = penpot.viewport.center.y;
+});

apps/icons-plugin/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

apps/icons-plugin/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}

apps/icons-plugin/tsconfig.editor.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts"],
+  "compilerOptions": {
+    "types": []
+  }
+}

apps/icons-plugin/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.editor.json"
+    },
+    {
+      "path": "./tsconfig.plugin.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

apps/icons-plugin/tsconfig.plugin.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": []
+  },
+  "files": ["src/plugin.ts"],
+  "include": ["../../libs/plugin-types/index.d.ts"]
+}

package-lock.json

@@ -26,6 +26,7 @@
         "axios": "^1.6.0",
         "fastify": "~4.13.0",
         "fastify-plugin": "~4.5.0",
+        "feather-icons": "^4.29.2",
         "rxjs": "~7.8.0",
         "ses": "^1.1.0",
         "tslib": "^2.3.0",
@@ -59,6 +60,7 @@
         "@swc-node/register": "~1.6.7",
         "@swc/core": "~1.3.85",
         "@swc/helpers": "~0.5.2",
+        "@types/feather-icons": "^4.29.4",
         "@types/node": "20.11.16",
         "@typescript-eslint/eslint-plugin": "6.21.0",
         "@typescript-eslint/parser": "^6.21.0",
@@ -7748,6 +7750,12 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/feather-icons": {
+      "version": "4.29.4",
+      "resolved": "https://registry.npmjs.org/@types/feather-icons/-/feather-icons-4.29.4.tgz",
+      "integrity": "sha512-cvwI455PWx/gJ33XDTIZOdauRy+XCxZggkOT/tAQYZLdySPFATD4RnDC9mxOnCIEaK9kwPm3zZigkAsMkhXb5w==",
+      "dev": true
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -10520,6 +10528,11 @@
       "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==",
       "dev": true
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -11045,7 +11058,6 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.35.0.tgz",
       "integrity": "sha512-ntakECeqg81KqMueeGJ79Q5ZgQNR+6eaE8sxGCx62zMbAIj65q+uYvatToew3m6eAGdU4gNZwpZ34NMe4GYswg==",
-      "dev": true,
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -13219,6 +13231,15 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/feather-icons": {
+      "version": "4.29.2",
+      "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.29.2.tgz",
+      "integrity": "sha512-0TaCFTnBTVCz6U+baY2UJNKne5ifGh7sMG4ZC2LoBWCZdIyPa+y6UiR4lEYGws1JOFWdee8KAsAIvu0VcXqiqA==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "core-js": "^3.1.3"
+      }
+    },
     "node_modules/fflate": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.1.tgz",

package.json

@@ -9,6 +9,7 @@
     "start:contrast-plugin": "npx nx run contrast-plugin:build --watch & npx nx run contrast-plugin:preview",
     "start:rpc-api": "npx nx serve rpc-api",
     "start:styles-example": "npx nx run example-styles:serve --port 4202",
+    "start:icons-plugin": "npx nx run-many --targets=buildPlugin,serve --projects=icons-plugin --watch --port 4202",
     "build": "npx nx build plugins-runtime --emptyOutDir=true",
     "lint": "nx run-many --all --target=lint --parallel",
     "lint:affected": "npx nx affected --target=lint",
@@ -44,6 +45,7 @@
     "@swc-node/register": "~1.6.7",
     "@swc/core": "~1.3.85",
     "@swc/helpers": "~0.5.2",
+    "@types/feather-icons": "^4.29.4",
     "@types/node": "20.11.16",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
@@ -87,6 +89,7 @@
     "axios": "^1.6.0",
     "fastify": "~4.13.0",
     "fastify-plugin": "~4.5.0",
+    "feather-icons": "^4.29.2",
     "rxjs": "~7.8.0",
     "ses": "^1.1.0",
     "tslib": "^2.3.0",