feat: adding color picker component (#1325)

* feat: adding color picker component

* refactor: downgrading version and fixing tests

Author: anandtiwary

package-lock.json

@@ -64,6 +64,7 @@
     "iso8601-duration": "^1.3.0",
     "lodash-es": "^4.17.21",
     "mixpanel-browser": "^2.42.0",
+    "ngx-color": "7.0.0",
     "rxjs": "~6.6.7",
     "tslib": "^2.3.1",
     "uuid": "^8.3.2",

package.json

@@ -27,7 +27,8 @@
     "d3-axis": "^2.1.0",
     "d3-scale": "^3.3.0",
     "d3-selection": "^1.4.2",
-    "d3-shape": "^1.3.5"
+    "d3-shape": "^1.3.5",
+    "ngx-color": "7.0.0"
   },
   "devDependencies": {
     "@hypertrace/test-utils": "^0.0.0"

projects/components/package.json

@@ -0,0 +1,31 @@
+@import 'color-palette';
+@import 'mixins';
+
+.color-picker {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+
+  .color {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    margin-right: 6px;
+    cursor: pointer;
+
+    &.selected {
+      border: 2px solid $blue-4;
+    }
+  }
+}
+
+.container {
+  width: 200px;
+  height: 200px;
+  cursor: pointer;
+}
+
+.color-sketch {
+  width: 200px;
+  height: 200px;
+}

projects/components/src/color-picker/color-picker.component.scss

@@ -0,0 +1,54 @@
+import { CommonModule } from '@angular/common';
+import { fakeAsync } from '@angular/core/testing';
+import { IconType } from '@hypertrace/assets-library';
+import { Color, NavigationService } from '@hypertrace/common';
+import { IconComponent } from '@hypertrace/components';
+import { createHostFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { SketchComponent } from 'ngx-color/sketch';
+import { NEVER, Observable } from 'rxjs';
+import { NotificationService } from '../notification/notification.service';
+import { PopoverModule } from '../popover/popover.module';
+import { ColorPickerComponent } from './color-picker.component';
+
+describe('Color Picker component', () => {
+  let spectator: Spectator<ColorPickerComponent>;
+
+  const createHost = createHostFactory({
+    component: ColorPickerComponent,
+    imports: [CommonModule, PopoverModule],
+    providers: [
+      mockProvider(NotificationService, { withNotification: (x: Observable<unknown>) => x }),
+      mockProvider(NavigationService, {
+        navigation$: NEVER
+      })
+    ],
+    declarations: [MockComponent(SketchComponent), MockComponent(IconComponent)]
+  });
+
+  test('should render color picker with default colors', fakeAsync(() => {
+    const onSelectionChangeSpy = jest.fn();
+    spectator = createHost(
+      `<ht-color-picker (selectedChange)="onSelectionChange($event)">
+      </ht-color-picker>`,
+      {
+        hostProps: {
+          onSelectionChange: onSelectionChangeSpy
+        }
+      }
+    );
+
+    const colors = spectator.queryAll('.color-picker .color');
+    expect(colors.length).toBe(7);
+    expect(spectator.query(IconComponent)?.icon).toBe(IconType.Add);
+
+    spectator.click(colors[1]);
+    expect(spectator.component.selected).toEqual(Color.Blue3);
+    expect(onSelectionChangeSpy).toHaveBeenCalledWith(Color.Blue3);
+
+    spectator.click('.add-icon');
+    spectator.tick();
+
+    expect(spectator.query('.color-sketch', { root: true })).toExist();
+  }));
+});

projects/components/src/color-picker/color-picker.component.test.ts

@@ -0,0 +1,89 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { IconType } from '@hypertrace/assets-library';
+import { Color } from '@hypertrace/common';
+import { IconSize } from '../icon/icon-size';
+
+@Component({
+  selector: 'ht-color-picker',
+  styleUrls: ['./color-picker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: ColorPickerComponent
+    }
+  ],
+  template: `
+    <div class="color-picker">
+      <div
+        class="color"
+        *ngFor="let color of this.paletteColors"
+        [ngClass]="{ selected: color === this.selected }"
+        [style.backgroundColor]="color"
+        (click)="this.selectColor(color)"
+      ></div>
+      <ht-popover>
+        <ht-popover-trigger>
+          <ht-icon class="add-icon" icon="${IconType.Add}" size="${IconSize.Small}"></ht-icon>
+        </ht-popover-trigger>
+        <ht-popover-content>
+          <div class="container">
+            <color-sketch class="color-sketch" (onChange)="this.onAddColorToPalette($event.color.hex)"></color-sketch>
+          </div>
+        </ht-popover-content>
+      </ht-popover>
+    </div>
+  `
+})
+export class ColorPickerComponent {
+  @Input()
+  public selected?: string;
+
+  @Output()
+  private readonly selectedChange: EventEmitter<string> = new EventEmitter<string>();
+
+  private readonly paletteSet: Set<string> = new Set<string>([
+    Color.Brown1,
+    Color.Blue3,
+    Color.Green3,
+    Color.Orange3,
+    Color.Purple3,
+    Color.Red3,
+    Color.Yellow3
+  ]);
+  public paletteColors: string[] = Array.from(this.paletteSet);
+
+  private propagateControlValueChange?: (value: string | undefined) => void;
+  private propagateControlValueChangeOnTouch?: (value: string | undefined) => void;
+
+  public onAddColorToPalette(color: string): void {
+    this.paletteSet.add(color);
+    this.paletteColors = Array.from(this.paletteSet);
+    this.selectColor(color);
+  }
+
+  public selectColor(color: string): void {
+    this.selected = color;
+    this.selectedChange.emit(color);
+    this.propagateValueChangeToFormControl(color);
+  }
+
+  private propagateValueChangeToFormControl(value?: string): void {
+    this.propagateControlValueChange?.(value);
+    this.propagateControlValueChangeOnTouch?.(value);
+  }
+
+  public writeValue(color?: string): void {
+    this.selected = color;
+  }
+
+  public registerOnChange(onChange: (value?: string) => void): void {
+    this.propagateControlValueChange = onChange;
+  }
+
+  public registerOnTouched(onTouch: (value?: string) => void): void {
+    this.propagateControlValueChangeOnTouch = onTouch;
+  }
+}

projects/components/src/color-picker/color-picker.component.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ColorSketchModule } from 'ngx-color/sketch';
+import { IconModule } from '../icon/icon.module';
+import { PopoverModule } from './../popover/popover.module';
+import { ColorPickerComponent } from './color-picker.component';
+
+@NgModule({
+  imports: [CommonModule, FormsModule, IconModule, ColorSketchModule, PopoverModule],
+  declarations: [ColorPickerComponent],
+  exports: [ColorPickerComponent]
+})
+export class ColorPickerModule {}

projects/components/src/color-picker/color-picker.module.ts

@@ -31,6 +31,7 @@
 
   .content {
     flex: 1 1 auto;
+    display: flex;
     width: 100%;
     background: white;
 

projects/components/src/form-field/form-field.component.scss

@@ -37,6 +37,10 @@ export * from './tabs/content/tab-group.component';
 export * from './tabs/content/tab.module';
 export * from './tabs/content/tab/tab.component';
 
+// Color picker
+export * from './color-picker/color-picker.component';
+export * from './color-picker/color-picker.module';
+
 // Copy to Clipboard
 export * from './copy-to-clipboard/copy-to-clipboard.component';
 export * from './copy-to-clipboard/copy-to-clipboard.module';

projects/components/src/public-api.ts

@@ -16,6 +16,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "downlevelIteration": true,
+    "allowJs": true,
     "lib": ["es2015", "es2016", "es2017", "esnext.string", "esnext.array", "esnext.asynciterable", "dom"],
     "paths": {
       "@hypertrace/assets-library": ["projects/assets-library/src/public-api.ts"],