CC-6167: Export all types from an index file (#48)

* Export all types from an index file * Major changeset * Add headers
hashicorp · Aug 24, 2023 · 2c5af5f · 2c5af5f · vercel · Aug 24, 2023
1 parent 0cc3e3c
commit 2c5af5f
Show file tree

Hide file tree

Showing 26 changed files with 369 additions and 306 deletions.
diff --git a/.changeset/selfish-poets-share.md b/.changeset/selfish-poets-share.md
@@ -0,0 +1,5 @@
+---
+'@hashicorp/consul-ui-toolkit': major
+---
+
+Update where types are declared and how they are exported
diff --git a/toolkit/package.json b/toolkit/package.json
@@ -16,6 +16,7 @@
     "addon-main.cjs",
     "dist"
   ],
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup --config",
     "cleanup:local": "yalc installations clean @hashicorp/consul-ui-toolkit",
@@ -87,6 +88,7 @@
     "main": "addon-main.cjs",
     "app-js": {
       "./components/cut/copy-block/index.js": "./dist/_app_/components/cut/copy-block/index.js",
+      "./components/cut/copy-block/types.js": "./dist/_app_/components/cut/copy-block/types.js",
       "./components/cut/filter-bar/filter-group.js": "./dist/_app_/components/cut/filter-bar/filter-group.js",
       "./components/cut/filter-bar/filter/checkbox.js": "./dist/_app_/components/cut/filter-bar/filter/checkbox.js",
       "./components/cut/filter-bar/filter/checkmark.js": "./dist/_app_/components/cut/filter-bar/filter/checkmark.js",
@@ -100,6 +102,7 @@
       "./components/cut/filter-bar/sort-group.js": "./dist/_app_/components/cut/filter-bar/sort-group.js",
       "./components/cut/filter-bar/sort/checkmark.js": "./dist/_app_/components/cut/filter-bar/sort/checkmark.js",
       "./components/cut/filter-bar/sort/index.js": "./dist/_app_/components/cut/filter-bar/sort/index.js",
+      "./components/cut/filter-bar/types.js": "./dist/_app_/components/cut/filter-bar/types.js",
       "./components/cut/list-item/action-generic.js": "./dist/_app_/components/cut/list-item/action-generic.js",
       "./components/cut/list-item/content.js": "./dist/_app_/components/cut/list-item/content.js",
       "./components/cut/list-item/index.js": "./dist/_app_/components/cut/list-item/index.js",
@@ -109,16 +112,21 @@
       "./components/cut/list-item/service-instance/index.js": "./dist/_app_/components/cut/list-item/service-instance/index.js",
       "./components/cut/list-item/service/index.js": "./dist/_app_/components/cut/list-item/service/index.js",
       "./components/cut/list-item/template/index.js": "./dist/_app_/components/cut/list-item/template/index.js",
+      "./components/cut/list-item/types.js": "./dist/_app_/components/cut/list-item/types.js",
       "./components/cut/list/contents/empty.js": "./dist/_app_/components/cut/list/contents/empty.js",
       "./components/cut/list/contents/generic.js": "./dist/_app_/components/cut/list/contents/generic.js",
       "./components/cut/list/index.js": "./dist/_app_/components/cut/list/index.js",
       "./components/cut/list/pagination.js": "./dist/_app_/components/cut/list/pagination.js",
+      "./components/cut/list/types.js": "./dist/_app_/components/cut/list/types.js",
       "./components/cut/metadata/external-source/index.js": "./dist/_app_/components/cut/metadata/external-source/index.js",
       "./components/cut/metadata/health-check-badge-set/index.js": "./dist/_app_/components/cut/metadata/health-check-badge-set/index.js",
       "./components/cut/metadata/in-service-mesh/index.js": "./dist/_app_/components/cut/metadata/in-service-mesh/index.js",
       "./components/cut/metadata/tags/index.js": "./dist/_app_/components/cut/metadata/tags/index.js",
+      "./components/cut/metadata/types.js": "./dist/_app_/components/cut/metadata/types.js",
       "./components/cut/text-with-icon/index.js": "./dist/_app_/components/cut/text-with-icon/index.js",
+      "./components/cut/text-with-icon/types.js": "./dist/_app_/components/cut/text-with-icon/types.js",
       "./helpers/titlecase.js": "./dist/_app_/helpers/titlecase.js",
+      "./utils/index.js": "./dist/_app_/utils/index.js",
       "./utils/service-list-item.js": "./dist/_app_/utils/service-list-item.js"
     }
   },

diff --git a/toolkit/src/components/cut/copy-block/index.ts b/toolkit/src/components/cut/copy-block/index.ts
@@ -6,16 +6,9 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { timeout } from 'ember-concurrency';
 import { dropTask } from 'ember-concurrency-decorators';
+import { CopyBlockSignature } from 'src/types';
 
-export interface ComponentSignature {
-  Args: {
-    clipboardText: string;
-    timeout?: number;
-    onSuccess(): void;
-  };
-}
-
-export default class CopyBlockComponent extends Component<ComponentSignature> {
+export default class CopyBlockComponent extends Component<CopyBlockSignature> {
   @tracked isSuccessfullyCopied = false;
 
   get timeout() {

diff --git a/toolkit/src/components/cut/copy-block/types.ts b/toolkit/src/components/cut/copy-block/types.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ */
+
+export interface CopyBlockSignature {
+  Args: {
+    clipboardText: string;
+    timeout?: number;
+    onSuccess(): void;
+  };
+}
diff --git a/toolkit/src/components/cut/filter-bar/filter/checkbox.ts b/toolkit/src/components/cut/filter-bar/filter/checkbox.ts
@@ -3,24 +3,9 @@
  */
 
 import Component from '@glimmer/component';
-import { FilterConfig, ToggleArgs } from '..';
+import { FilterBarCheckboxSignature } from 'src/types';
 
-interface FilterBarCheckbox {
-  Args: {
-    filterName: string;
-    name: string;
-    value: unknown;
-    localConfig: FilterConfig;
-    toggle: (toggle: ToggleArgs) => void;
-    isChecked: (
-      localConfig: FilterConfig,
-      name: string,
-      value: unknown
-    ) => boolean;
-  };
-}
-
-export default class CheckboxComponent extends Component<FilterBarCheckbox> {
+export default class CheckboxComponent extends Component<FilterBarCheckboxSignature> {
   get isChecked() {
     return this.args.isChecked(
       this.args.localConfig,

diff --git a/toolkit/src/components/cut/filter-bar/filter/checkmark.ts b/toolkit/src/components/cut/filter-bar/filter/checkmark.ts
@@ -3,24 +3,9 @@
  */
 
 import Component from '@glimmer/component';
-import { FilterConfig, ToggleArgs } from '..';
+import { FilterBarCheckboxSignature } from 'src/types';
 
-interface FilterBarCheckbox {
-  Args: {
-    filterName: string;
-    name: string;
-    value: unknown;
-    localConfig: FilterConfig;
-    toggle: (toggle: ToggleArgs) => void;
-    isChecked: (
-      localConfig: FilterConfig,
-      name: string,
-      value: unknown
-    ) => boolean;
-  };
-}
-
-export default class CheckmarkComponent extends Component<FilterBarCheckbox> {
+export default class CheckmarkComponent extends Component<FilterBarCheckboxSignature> {
   get isChecked() {
     return this.args.isChecked(
       this.args.localConfig,

diff --git a/toolkit/src/components/cut/filter-bar/filter/index.ts b/toolkit/src/components/cut/filter-bar/filter/index.ts
@@ -3,28 +3,7 @@
  */
 
 import Component from '@glimmer/component';
-import { FilterConfig, ToggleArgs } from '..';
-
-interface FilterInterface {
-  Args: {
-    name: string;
-    config: FilterConfig;
-    localConfig: FilterConfig;
-    toggle: (toggle: ToggleArgs) => void;
-    softToggle: (toggle: ToggleArgs) => void;
-    applyFilter: (name: string) => void;
-    clearPendingFilter: () => void;
-    isChecked: (
-      localConfig: FilterConfig,
-      name: string,
-      value: unknown
-    ) => boolean;
-    isMultiSelect?: boolean;
-    batch?: boolean;
-    dropdown?: unknown;
-    listPosition?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
-  };
-}
+import { FilterSignature, ToggleArgs } from 'src/types';
 
 /**
  * `Cut::FilterBar::Filter` is a wrapper of the HDS::Dropdown component that exposes wrapped dropdown list items
@@ -43,7 +22,7 @@ interface FilterInterface {
  * @class Cut::FilterComponent
  *
  */
-export default class FilterComponent extends Component<FilterInterface> {
+export default class FilterComponent extends Component<FilterSignature> {
   get toggle(): (toggle: ToggleArgs) => void {
     return this.args.batch ? this.args.softToggle : this.args.toggle;
   }

diff --git a/toolkit/src/components/cut/filter-bar/filter/radio.ts b/toolkit/src/components/cut/filter-bar/filter/radio.ts
@@ -3,24 +3,9 @@
  */
 
 import Component from '@glimmer/component';
-import { FilterConfig, ToggleArgs } from '..';
+import { FilterBarCheckboxSignature } from 'src/types';
 
-interface FilterBarCheckbox {
-  Args: {
-    filterName: string;
-    name: string;
-    value: unknown;
-    localConfig: FilterConfig;
-    toggle: (toggle: ToggleArgs) => void;
-    isChecked: (
-      localConfig: FilterConfig,
-      name: string,
-      value: unknown
-    ) => boolean;
-  };
-}
-
-export default class CheckmarkComponent extends Component<FilterBarCheckbox> {
+export default class CheckmarkComponent extends Component<FilterBarCheckboxSignature> {
   get isChecked() {
     return this.args.isChecked(
       this.args.localConfig,

diff --git a/toolkit/src/components/cut/filter-bar/index.ts b/toolkit/src/components/cut/filter-bar/index.ts
@@ -6,59 +6,15 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import structuredClone from '@ungap/structured-clone';
-
-export interface ComponentSignature {
-  Args: {
-    config: FilterConfig;
-    count?: number;
-    totalCount?: number;
-    onChange: (config: FilterConfig) => void;
-  };
-}
-
-export interface FilterConfig {
-  search?: Search;
-  filters?: Filters;
-  sort?: Sort;
-}
-
-interface Sort {
-  value?: string;
-}
-
-interface Search {
-  value?: string;
-}
-
-export interface Filter {
-  text: string;
-  value: unknown;
-  isRequired?: boolean;
-}
-
-export interface Filters {
-  [name: string]: Filter | Filter[] | undefined;
-}
-
-export interface AppliedFilter {
-  name: string;
-  value: Filter[];
-  isMultiSelect?: boolean;
-  isRequired?: boolean;
-}
-
-export type HTMLElementEvent<T extends HTMLElement> = Event & {
-  target: T;
-  currentTarget: T;
-};
-
-export interface ToggleArgs {
-  filterName: string;
-  value: unknown;
-  text: string;
-  isMultiSelect?: boolean;
-  isRequired?: boolean;
-}
+import {
+  AppliedFilter,
+  Filter,
+  FilterBarSignature,
+  FilterConfig,
+  Filters,
+  HTMLElementEvent,
+  ToggleArgs,
+} from 'src/types';
 
 /**
  * `Cut::FilterBar` provides the UI building blocks for building a FilterBar while also managing state for you.
@@ -89,7 +45,7 @@ export interface ToggleArgs {
  * in the `localConfig` but not yet in the `config`. Once you apply the pending changes, they will be applied to the
  * `config` and the `onChange` function will be called.
  */
-export default class FilterBarComponent extends Component<ComponentSignature> {
+export default class FilterBarComponent extends Component<FilterBarSignature> {
   @tracked pendingFilterChange: Filters = {};
 
   get localConfig(): FilterConfig {
@@ -244,7 +200,9 @@ export default class FilterBarComponent extends Component<ComponentSignature> {
     const config = structuredClone(this.args.config);
 
     // apply the filter from filterChanges
-    if (Object.hasOwn(this.pendingFilterChange || {}, name)) {
+    if (
+      Object.prototype.hasOwnProperty.call(this.pendingFilterChange || {}, name)
+    ) {
       config.filters = Object.assign({}, config.filters, {
         [name]: this.pendingFilterChange?.[name],
       });

diff --git a/toolkit/src/components/cut/filter-bar/sort/checkmark.ts b/toolkit/src/components/cut/filter-bar/sort/checkmark.ts
@@ -4,17 +4,9 @@
  */
 
 import Component from '@glimmer/component';
-import { FilterConfig } from '..';
+import { SortCheckmarkSignature } from 'src/types';
 
-interface SortCheckmarkInterface {
-  checkmark: unknown;
-  config: FilterConfig;
-  value: string;
-  name: string;
-  onSortChange: (value: string, text: string) => void;
-}
-
-export default class SortCheckmarkComponent extends Component<SortCheckmarkInterface> {
+export default class SortCheckmarkComponent extends Component<SortCheckmarkSignature> {
   get isSelected(): boolean {
     return this.args.config?.sort?.value === this.args.value;
   }