wip

Signed-off-by: Patrick Pircher <[email protected]>

carbon-components-ember/.eslintrc.cjs

@@ -14,6 +14,7 @@ module.exports = {
   extends: ['plugin:ember/recommended', 'plugin:prettier/recommended'],
   globals: {
     WithRequired: true,
+    'ensure-safe-component': true
   },
   env: {
     browser: true,

carbon-components-ember/src/components/accordion.gts

@@ -3,7 +3,7 @@ import { guidFor } from '@ember/object/internals';
 import { type WithBoundArgs } from '@glint/template';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import or from '/helpers/or.ts';
+import or from '../helpers/or.ts';
 import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 

carbon-components-ember/src/components/breadcrumbs.gts

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { defaultArgs } from '/utils/decorators.ts';
+import { defaultArgs } from '../utils/decorators.ts';
 import { action } from '@ember/object';
 import eq from 'ember-truth-helpers/helpers/eq';
 import { on } from '@ember/modifier';

carbon-components-ember/src/components/button.gts

@@ -1,13 +1,13 @@
 import Component from '@glimmer/component';
-import { bxClassNames, classPrefix, defaultArgs } from '/utils/decorators.ts';
-import DialogManagerService from '/services/dialog-manager.js';
+import { bxClassNames, classPrefix, defaultArgs } from '../utils/decorators.ts';
+import DialogManagerService from '../services/dialog-manager.ts';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import ConfirmDialogComponent from '/components/dialogs/confirm.gts';
-import or from '/helpers/or.ts';
-import Confirm from '/components/dialogs/confirm.gts';
-import Loading from '/components/loading.gts';
+import ConfirmDialogComponent from './dialogs/confirm.gts';
+import or from '../helpers/or.ts';
+import Confirm from './dialogs/confirm.gts';
+import Loading from './loading.gts';
 import { stylesheet } from 'astroturf';
 
 /** @documenter yuidoc */

carbon-components-ember/src/components/checkbox.gts

@@ -2,11 +2,11 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
-import { defaultArgs } from '/utils/decorators.ts';
+import { defaultArgs } from '../utils/decorators.ts';
 import didInsert from '@ember/render-modifiers/modifiers/did-insert';
 import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
-import set from '/helpers/set.ts';
+import set from '../helpers/set.ts';
 
 type Args = {
   name?: string;

carbon-components-ember/src/components/code-snippet.gts

@@ -1,14 +1,14 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { defaultArgs } from '/utils/decorators.ts';
-import CopyButton from '/components/copy-button.gts';
+import { defaultArgs } from '../utils/decorators.ts';
+import CopyButton from '../components/copy-button.gts';
 import { concat, fn } from '@ember/helper';
 import didInsert from '@ember/render-modifiers/modifiers/did-insert';
 import eq from 'ember-truth-helpers/helpers/eq';
 import { on } from '@ember/modifier';
-import set from '/helpers/set.ts';
+import set from '../helpers/set.ts';
 import not from 'ember-truth-helpers/helpers/not';
-import htmlSafe from '/helpers/html-safe.ts';
+import htmlSafe from '../helpers/html-safe.ts';
 import { type TemplateOnlyComponent } from '@ember/component/template-only';
 
 type Args = {

carbon-components-ember/src/components/copy-button.gts

@@ -3,8 +3,8 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import didInsert from '@ember/render-modifiers/modifiers/did-insert';
 import EmberTooltip from 'ember-tooltips/components/ember-tooltip';
-import Button from '/components/button.gts';
-import or from '/helpers/or.ts';
+import Button from '../components/button.gts';
+import or from '../helpers/or.ts';
 
 type Args = {
   targetElementId?: string;

carbon-components-ember/src/components/data-table.gts

@@ -10,20 +10,20 @@ import { default as didInsert } from '@ember/render-modifiers/modifiers/did-inse
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { defaultArgs } from '/utils/decorators.ts';
+import { defaultArgs } from '../utils/decorators.ts';
 import { A, type NativeArray } from '@ember/array';
 import { task } from 'ember-concurrency';
-import TableToolbarComponent from '/components/data-table/-toolbar.gts';
-import TableSearchComponent from '/components/data-table/-search-input.gts';
-import CarbonPagination from '/components/pagination.gts';
-import TableComponent from '/components/data-table/-table.gts';
-import DataTableBody from '/components/data-table/-body.gts';
-import TableMenuComponent from '/components/data-table/-menu.gts';
-import TableColumn from '/components/data-table/-column.gts';
+import TableToolbarComponent from '../components/data-table/-toolbar.gts';
+import TableSearchComponent from '../components/data-table/-search-input.gts';
+import CarbonPagination from '../components/pagination.gts';
+import TableComponent from '../components/data-table/-table.gts';
+import DataTableBody from '../components/data-table/-body.gts';
+import TableMenuComponent from '../components/data-table/-menu.gts';
+import TableColumn from '../components/data-table/-column.gts';
 import { type WithBoundArgs } from '@glint/template';
 import ListHeaderComponent, {
   type Header,
-} from '/components/data-table/-header.gts';
+} from '../components/data-table/-header.gts';
 import { hash } from '@ember/helper';
 import { runTask } from 'ember-lifeline';
 

carbon-components-ember/src/components/dialogs/confirm.gts

@@ -9,8 +9,8 @@ import type DialogManagerService from '/services/dialog-manager';
 type Args = {
   onAccept: () => void;
   onCancel: () => void;
-  body: string;
-  header: string;
+  body?: string;
+  header?: string;
   type: string;
   cancelText?: string;
   label?: string;

carbon-components-ember/src/components/form-input.gts

@@ -1,4 +1,4 @@
-import { default as defaultTo } from '/helpers/default-to.ts';
+import { default as defaultTo } from '../helpers/default-to.ts';
 import { on } from '@ember/modifier';
 import Component from '@glimmer/component';
 import { guidFor } from '@ember/object/internals';

carbon-components-ember/src/components/icon.gts

@@ -3,15 +3,15 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import * as icons from '@carbon/icons/es/index.js';
-import { bxClassNames, classPrefix } from '/utils/decorators.ts';
+import { bxClassNames, classPrefix } from '../utils/decorators.ts';
 import { on } from '@ember/modifier';
-import Loading from '/components/loading.gts';
-import or from '/helpers/or.ts';
-import renderSvgPart from '/components/icon/render-svg-part.ts';
+import Loading from '../components/loading.gts';
+import or from '../helpers/or.ts';
+import renderSvgPart from '../components/icon/render-svg-part.ts';
 import { array } from '@ember/helper';
-import htmlSafe from '/helpers/html-safe.ts';
+import htmlSafe from '../helpers/html-safe.ts';
 import { stylesheet } from 'astroturf';
-import type DialogManagerService from '/services/dialog-manager';
+import type DialogManagerService from '../services/dialog-manager';
 
 type Icon = { name: IconNames; size: number };
 

carbon-components-ember/src/services/dialog-manager.ts

@@ -1,8 +1,9 @@
 import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
+import type Component from '@glimmer/component';
 
 export default class DialogManagerService extends Service {
-  @tracked currentDialog = null;
+  @tracked currentDialog?: typeof Component<any>;
   @tracked options = null;
   id = 'carbon-components-dialog-id';
 
@@ -16,7 +17,7 @@ export default class DialogManagerService extends Service {
   }
 
   close() {
-    this.currentDialog = null;
+    this.currentDialog = undefined;
     this.options = null;
   }
 }

carbon-components-ember/tsconfig.json

@@ -44,14 +44,8 @@
       We want our tooling to know how to resolve our custom files so the appropriate plugins
       can do the proper transformations on those files.
     */
-    "allowImportingTsExtensions": true,
-    "paths": {
-      "/*": ["./src/*", "./src/*.gts", "./src/*.gjsyml"]
-    }
+    "allowImportingTsExtensions": true
   },
-  "exclude": [
-    "../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@glint+environment-ember-lo_xalztx43ppp5parmi4bzokibly/node_modules/ember-basic-dropdown/addon/components/basic-dropdown.ts"
-  ],
   "include": [
     "node_modules/@gavant/glint-template-types/types/ember-power-select/components/power-select.d.ts",
     "node_modules/@gavant/glint-template-types/types/ember-power-select/components/power-select-multiple.d.ts",

carbon-components-ember/types/glint.d.ts

@@ -1,24 +1,3 @@
-declare module 'ember-cli-addon-docs/components/docs-demo' {
-  import Component from '@glimmer/component';
-  export default class extends Component {}
-}
-
-declare module 'ember-cli-addon-docs/components/docs-viewer' {
-  import Component from '@glimmer/component';
-  export default class extends Component {}
-}
-
-declare module 'ember-cli-addon-docs/components/docs-hero' {
-  import Component from '@glimmer/component';
-  type Args = {
-    prefix: string;
-    heading: string;
-    byline: string;
-  };
-
-  export default class extends Component<Args> {}
-}
-
 declare module 'ember-tooltips/components/ember-tooltip' {
   import Component from '@glimmer/component';
   type Args = {
@@ -102,3 +81,10 @@ declare module '@ember/render-modifiers/modifiers/will-destroy' {
 }
 
 declare module '@carbon/icons/es/index.js';
+
+declare module '@glint/environment-ember-loose/registry' {
+  import type { EmbroiderUtilRegistry } from '@embroider/util';
+  export default interface Registry extends EmbroiderUtilRegistry {
+    // ...
+  }
+}

doc-app/.eslintrc.js

@@ -2,45 +2,74 @@
 
 module.exports = {
   root: true,
-  parser: '@babel/eslint-parser',
+  parser: 'ember-eslint-parser',
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
-    requireConfigFile: false,
     babelOptions: {
-      plugins: [
-        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
-      ],
+      root: __dirname,
     },
   },
   plugins: ['ember'],
-  extends: [
-    'eslint:recommended',
-    'plugin:ember/recommended',
-    'plugin:prettier/recommended',
-  ],
+  extends: ['plugin:ember/recommended', 'plugin:prettier/recommended'],
+  globals: {
+    WithRequired: true,
+  },
   env: {
     browser: true,
   },
-  rules: {},
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
   overrides: [
     {
-      files: ['**/*.{gts,gjs}'],
+      files: ['**/*.ts'],
+      parser: '@typescript-eslint/parser',
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:ember/recommended',
+      ],
+      rules: {
+        'ember/no-at-ember-render-modifiers': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        'ember/no-empty-glimmer-component-classes': 'off',
+      },
+    },
+    {
+      files: ['**/*.gts'],
       parser: 'ember-eslint-parser',
+      plugins: ['ember'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:ember/recommended',
+        'plugin:ember/recommended-gts',
+      ],
+      rules: {
+        'ember/no-at-ember-render-modifiers': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        'ember/no-empty-glimmer-component-classes': 'off',
+      },
+    },
+    {
+      files: ['**/*.gjs'],
+      parser: 'ember-eslint-parser',
+      plugins: ['ember'],
+      extends: [
+        'eslint:recommended',
+        'plugin:ember/recommended',
+        'plugin:ember/recommended-gjs',
+      ],
     },
     // node files
     {
       files: [
-        './.eslintrc.js',
-        './.prettierrc.js',
-        './.stylelintrc.js',
-        './.template-lintrc.js',
-        './ember-cli-build.js',
-        './testem.js',
-        './blueprints/*/index.js',
-        './config/**/*.js',
-        './lib/*/index.js',
-        './server/**/*.js',
+        './.eslintrc.cjs',
+        './.prettierrc.cjs',
+        './.template-lintrc.cjs',
+        './addon-main.cjs',
+        './babel.config.js',
       ],
       parserOptions: {
         sourceType: 'script',
@@ -49,12 +78,8 @@ module.exports = {
         browser: false,
         node: true,
       },
+      plugins: ['n'],
       extends: ['plugin:n/recommended'],
     },
-    {
-      // test files
-      files: ['tests/**/*-test.{js,ts}'],
-      extends: ['plugin:qunit/recommended'],
-    },
   ],
 };

doc-app/app/pods/application/route.gts

@@ -3,9 +3,23 @@ import Notification from 'carbon-components-ember/components/notification';
 import RouteTemplate from 'ember-routable-component';
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
+import Controller from '@ember/controller';
+import DialogManagerService from 'carbon-components-ember/services/dialog-manager';
 
-class RouteComponent extends Component {
-  @service('carbon-components-ember@dialog-manager') dialogManager;
+interface Signature<T> {
+  Args: {
+    controller: typeof Controller<T>;
+    model: T;
+  };
+  Blocks: {
+    default: [];
+    outlet: [];
+  };
+}
+
+class RouteComponent extends Component<Signature<any>> {
+  @service('carbon-components-ember@dialog-manager')
+  dialogManager: DialogManagerService;
   @service('carbon-components-ember@notifications') notifications;
 
   <template>
@@ -23,10 +37,9 @@ class RouteComponent extends Component {
     </div>
     <div id='{{this.dialogManager.id}}'>
       {{#if this.dialogManager.currentDialog}}
-        {{component
-          (this.dialogManager.currentDialog)
-          options=this.dialogManager.options
-        }}
+        {{#let (component this.dialogManager.currentDialog) as |Current|}}
+          <Current @options={{this.dialogManager.options}} />
+        {{/let}}
       {{/if}}
     </div>
   </template>

doc-app/app/pods/docs/components/accordion/route.gts

@@ -10,10 +10,10 @@ import Toggle from 'carbon-components-ember/components/toggle';
 import Select from 'carbon-components-ember/components/select';
 import RadioButtonGroup from 'carbon-components-ember/components/radio/group';
 import Radio from 'carbon-components-ember/components/radio';
-import RouteTemplate from 'ember-routable-component';
+import RouteTemplate, { RoutableComponent } from 'ember-routable-component';
 import Component from '@glimmer/component';
 
-class RouteComponent extends Component {
+class RouteComponent extends RoutableComponent {
   <template>
     <h1>
       Carbon Accordion