CopyButton: convert to TypeScript (HDS-2688) (#2100)

Co-authored-by: Alex <alex-ju@users.noreply.github.com>
Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>

.changeset/popular-eels-melt.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`CopyButton` - Converted component to TypeScript

.changeset/small-boats-tie.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`CopySnippet` - Converted component to TypeScript

packages/components/src/components/hds/copy/button/index.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

packages/components/src/components/hds/copy/button/index.js → packages/components/src/components/hds/copy/button/index.ts

@@ -7,17 +7,32 @@ import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { HdsCopyButtonSizeValues } from './types.ts';
+import type { HdsCopyButtonSizes } from './types.ts';
+import type { HdsButtonSignature } from '../../button/';
+import type { HdsClipboardModifierSignature } from '../../../../modifiers/hds-clipboard.ts';
 
-export const DEFAULT_SIZE = 'medium';
-export const SIZES = ['small', 'medium'];
+export const DEFAULT_SIZE = HdsCopyButtonSizeValues.Medium;
+export const SIZES: string[] = Object.values(HdsCopyButtonSizeValues);
 export const DEFAULT_ICON = 'clipboard-copy';
 export const SUCCESS_ICON = 'clipboard-checked';
 export const ERROR_ICON = 'clipboard-x';
 export const DEFAULT_STATUS = 'idle';
 
-export default class HdsCopyButtonComponent extends Component {
+export interface HdsCopyButtonSignature {
+  Args: HdsButtonSignature['Args'] & {
+    size?: HdsCopyButtonSizes;
+    textToCopy?: HdsClipboardModifierSignature['Args']['Named']['text'];
+    targetToCopy?: HdsClipboardModifierSignature['Args']['Named']['target'];
+    onSuccess?: HdsClipboardModifierSignature['Args']['Named']['onSuccess'];
+    onError?: HdsClipboardModifierSignature['Args']['Named']['onError'];
+  };
+  Element: HdsButtonSignature['Element'];
+}
+
+export default class HdsCopyButtonComponent extends Component<HdsCopyButtonSignature> {
   @tracked status = DEFAULT_STATUS;
-  @tracked timer;
+  @tracked timer: ReturnType<typeof setTimeout> | undefined;
 
   /**
    * @param icon
@@ -41,7 +56,7 @@ export default class HdsCopyButtonComponent extends Component {
    * @description The size of the copy/button; acceptable values are `small` and `medium`
    */
   get size() {
-    let { size = DEFAULT_SIZE } = this.args;
+    const { size = DEFAULT_SIZE } = this.args;
 
     assert(
       `@size for "Hds::Copy::Button" must be one of the following: ${SIZES.join(
@@ -59,7 +74,7 @@ export default class HdsCopyButtonComponent extends Component {
    * @return {string} The "class" attribute to apply to the component.
    */
   get classNames() {
-    let classes = ['hds-copy-button'];
+    const classes = ['hds-copy-button'];
 
     // add a class based on the @size argument
     classes.push(`hds-button--size-${this.size}`);
@@ -70,23 +85,23 @@ export default class HdsCopyButtonComponent extends Component {
   }
 
   @action
-  onSuccess(args) {
+  onSuccess(args: HdsClipboardModifierSignature['Args']['Named']['onSuccess']) {
     this.status = 'success';
     this.resetStatusDelayed();
 
-    let { onSuccess } = this.args;
+    const { onSuccess } = this.args;
 
     if (typeof onSuccess === 'function') {
       onSuccess(args);
     }
   }
 
   @action
-  onError(args) {
+  onError(args: HdsClipboardModifierSignature['Args']['Named']['onError']) {
     this.status = 'error';
     this.resetStatusDelayed();
 
-    let { onError } = this.args;
+    const { onError } = this.args;
 
     if (typeof onError === 'function') {
       onError(args);

packages/components/src/components/hds/copy/button/types.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export enum HdsCopyButtonSizeValues {
+  Small = 'small',
+  Medium = 'medium',
+}
+export type HdsCopyButtonSizes = `${HdsCopyButtonSizeValues}`;

packages/components/src/components/hds/copy/snippet/index.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
@@ -11,7 +10,7 @@
   ...attributes
 >
   <Hds::Text::Code class="hds-copy-snippet__text" @tag="span" @size="100">
-    {{@textToCopy}}
+    {{this.textToShow}}
   </Hds::Text::Code>
   <FlightIcon @name={{this.icon}} class="hds-copy-snippet__icon" />
 </button>

packages/components/src/components/hds/copy/snippet/index.js → packages/components/src/components/hds/copy/snippet/index.ts

@@ -7,17 +7,47 @@ import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { HdsCopySnippetColorValues } from './types.ts';
+import type { HdsCopySnippetColors } from './types.ts';
+import type { HdsClipboardModifierSignature } from '../../../../modifiers/hds-clipboard.ts';
+
+export const DEFAULT_COLOR = HdsCopySnippetColorValues.Primary;
+export const COLORS: string[] = Object.values(HdsCopySnippetColorValues);
 
-export const DEFAULT_COLOR = 'primary';
-export const COLORS = ['primary', 'secondary'];
 export const DEFAULT_ICON = 'clipboard-copy';
 export const SUCCESS_ICON = 'clipboard-checked';
 export const ERROR_ICON = 'clipboard-x';
 export const DEFAULT_STATUS = 'idle';
 
-export default class HdsCopySnippetIndexComponent extends Component {
+interface HdsCopySnippetSignature {
+  Args: {
+    color?: HdsCopySnippetColors;
+    isFullWidth?: boolean;
+    textToCopy: HdsClipboardModifierSignature['Args']['Named']['text'];
+    isTruncated?: boolean;
+    onSuccess?: HdsClipboardModifierSignature['Args']['Named']['onSuccess'];
+    onError?: HdsClipboardModifierSignature['Args']['Named']['onError'];
+  };
+  Element: HTMLButtonElement;
+}
+
+export default class HdsCopySnippetComponent extends Component<HdsCopySnippetSignature> {
   @tracked status = DEFAULT_STATUS;
-  @tracked timer;
+  @tracked timer: ReturnType<typeof setTimeout> | undefined;
+
+  /**
+   * @param textToCopy
+   * @type {string | number | bigint | undefined} ???
+   */
+  get textToShow() {
+    const { textToCopy = '' } = this.args;
+
+    if (typeof textToCopy === 'string') {
+      return textToCopy;
+    } else {
+      return textToCopy.toString();
+    }
+  }
 
   /**
    * @param icon
@@ -42,7 +72,7 @@ export default class HdsCopySnippetIndexComponent extends Component {
    * @description Determines the color of button to be used; acceptable values are `primary` and `secondary`
    */
   get color() {
-    let { color = DEFAULT_COLOR } = this.args;
+    const { color = DEFAULT_COLOR } = this.args;
 
     assert(
       `@color for "Hds::Copy::Snippet" must be one of the following: ${COLORS.join(
@@ -80,7 +110,7 @@ export default class HdsCopySnippetIndexComponent extends Component {
    * @return {string} The "class" attribute to apply to the component.
    */
   get classNames() {
-    let classes = ['hds-copy-snippet'];
+    const classes = ['hds-copy-snippet'];
 
     // add a class based on the @color argument
     classes.push(`hds-copy-snippet--color-${this.color}`);
@@ -102,23 +132,23 @@ export default class HdsCopySnippetIndexComponent extends Component {
   }
 
   @action
-  onSuccess(args) {
+  onSuccess(args: HdsClipboardModifierSignature['Args']['Named']['onSuccess']) {
     this.status = 'success';
     this.resetStatusDelayed();
 
-    let { onSuccess } = this.args;
+    const { onSuccess } = this.args;
 
     if (typeof onSuccess === 'function') {
       onSuccess(args);
     }
   }
 
   @action
-  onError(args) {
+  onError(args: HdsClipboardModifierSignature['Args']['Named']['onError']) {
     this.status = 'error';
     this.resetStatusDelayed();
 
-    let { onError } = this.args;
+    const { onError } = this.args;
 
     if (typeof onError === 'function') {
       onError(args);

packages/components/src/components/hds/copy/snippet/types.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export enum HdsCopySnippetColorValues {
+  Primary = 'primary',
+  Secondary = 'secondary',
+}
+export type HdsCopySnippetColors = `${HdsCopySnippetColorValues}`;

packages/components/src/template-registry.ts

@@ -26,6 +26,8 @@ import type HdsAppFrameMainComponent from './components/hds/app-frame/parts/main
 import type HdsAppFrameModalsComponent from './components/hds/app-frame/parts/modals';
 import type HdsAppFrameSidebarComponent from './components/hds/app-frame/parts/sidebar';
 import type HdsCardContainerComponent from './components/hds/card/container.ts';
+import type HdsCopyButtonComponent from './components/hds/copy/button/index';
+import type HdsCopySnippetComponent from './components/hds/copy/snippet';
 import type HdsDisclosurePrimitiveComponent from './components/hds/disclosure-primitive';
 import type HdsDismissButtonComponent from './components/hds/dismiss-button';
 import type HdsIconTileComponent from './components/hds/icon-tile';
@@ -129,6 +131,14 @@ export default interface HdsComponentsRegistry {
   'Hds::Card': typeof HdsCardContainerComponent;
   'hds/card': typeof HdsCardContainerComponent;
 
+  // Copy Button
+  'Hds::Copy::Button': typeof HdsCopyButtonComponent;
+  'hds/copy/button': typeof HdsCopyButtonComponent;
+
+  // Copy Snippet
+  'Hds::Copy::Snippet': typeof HdsCopySnippetComponent;
+  'hds/copy/snippet': typeof HdsCopySnippetComponent;
+
   // Disclosure Primitive
   'Hds::DisclosurePrimitive': typeof HdsDisclosurePrimitiveComponent;
   'hds/disclosure-primitive': typeof HdsDisclosurePrimitiveComponent;