Add an Api type to Freestyle::Usage for when you expect a component a…

…s argument

addon/components/freestyle/usage/component-like/control/index.hbs

@@ -0,0 +1,12 @@
+{{! template-lint-disable require-input-label }}
+
+{{#if @options}}
+  <select {{on 'change' this.callOnChange}}>
+    {{#each @options as |componentLike|}}
+      <option
+        value={{componentLike.name}}
+        selected={{eq componentLike.name @value.name}}
+      >{{componentLike.name}}</option>
+    {{/each}}
+  </select>
+{{/if}}

addon/components/freestyle/usage/component-like/control/index.ts

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import type { ComponentLike } from '@glint/template';
+
+interface Signature {
+  Args: {
+    value?: ComponentLike;
+    onChange: (c: ComponentLike | undefined) => void;
+    options?: ComponentLike[];
+  };
+}
+export default class FreestyleUsageComponentLikeControlComponent extends Component<Signature> {
+  @action
+  callOnChange(event: InputEvent): void {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const eventTarget = event.target as any;
+    const componentName = eventTarget?.value;
+    const value = this.args.options?.find((c) => c.name === componentName);
+    this.args.onChange(value);
+  }
+}

addon/components/freestyle/usage/component-like/index.hbs

@@ -0,0 +1,14 @@
+<Freestyle::Usage::Argument
+  @type="ComponentLike"
+  @name={{@name}}
+  @description={{@description}}
+  @required={{@required}}
+  @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
+>
+  <Freestyle::Usage::ComponentLike::Control
+    @options={{@options}}
+    @value={{@value}}
+    @onChange={{@onChange}}
+  />
+</Freestyle::Usage::Argument>

addon/components/freestyle/usage/component-like/index.ts

@@ -0,0 +1,17 @@
+import templateOnlyComponent from '@ember/component/template-only';
+import type { ComponentLike } from '@glint/template';
+
+interface Signature {
+  Args: {
+    name?: string;
+    description?: string;
+    required?: boolean;
+    defaultValue?: ComponentLike;
+    hideControls?: boolean;
+    value?: ComponentLike;
+    options?: ComponentLike[];
+    onChange: (val: ComponentLike | null | undefined) => void;
+  };
+}
+const FreestyleUsageComponentLikeComponent = templateOnlyComponent<Signature>();
+export default FreestyleUsageComponentLikeComponent;

addon/components/freestyle/usage/index.hbs

@@ -46,6 +46,7 @@
                   Number=(component 'freestyle/usage/number')
                   Object=(component 'freestyle/usage/object')
                   String=(component 'freestyle/usage/string')
+                  Component=(component 'freestyle/usage/component-like')
                   Action=(component 'freestyle/usage/argument' type="Action")
                   Yield=(component 'freestyle/usage/argument' type="Yield")
                 )

addon/components/freestyle/usage/index.ts

@@ -20,13 +20,14 @@ interface Signature {
     example: [];
     api: [
       {
+        Action: any;
         Array: any;
         Base: any;
         Bool: any;
+        Component: any;
         Number: any;
         Object: any;
         String: any;
-        Action: any;
         Yield: any;
       }
     ];

addon/glint.ts

@@ -10,6 +10,8 @@ import type FreestyleUsageObject from 'ember-freestyle/components/freestyle/usag
 import type FreestyleUsageObjectControl from 'ember-freestyle/components/freestyle/usage/object/control';
 import type FreestyleUsageString from 'ember-freestyle/components/freestyle/usage/string';
 import type FreestyleUsageStringControl from 'ember-freestyle/components/freestyle/usage/string/control';
+import type FreestyleUsageComponentLike from 'ember-freestyle/components/freestyle/usage/component-like';
+import type FreestyleUsageComponentLikeControl from 'ember-freestyle/components/freestyle/usage/component-like/control';
 import type FreestyleAnnotation from 'ember-freestyle/components/freestyle-annotation';
 import type FreestyleCollection from 'ember-freestyle/components/freestyle-collection';
 import type FreestyleDynamic from 'ember-freestyle/components/freestyle-dynamic';
@@ -51,6 +53,9 @@ declare module '@glint/environment-ember-loose/registry' {
     'Freestyle::Usage::String': typeof FreestyleUsageString;
     'freestyle/usage/string': typeof FreestyleUsageString;
     'Freestyle::Usage::String::Control': typeof FreestyleUsageStringControl;
+    'Freestyle::Usage::ComponentLike': typeof FreestyleUsageComponentLike;
+    'freestyle/usage/component-like': typeof FreestyleUsageComponentLike;
+    'Freestyle::Usage::ComponentLike::Control': typeof FreestyleUsageComponentLikeControl;
     FreestyleAnnotation: typeof FreestyleAnnotation;
     FreestyleCollection: typeof FreestyleCollection;
     FreestyleDynamic: typeof FreestyleDynamic;

app/components/freestyle/usage/component-like.js

@@ -0,0 +1 @@
+export { default } from 'ember-freestyle/components/freestyle/usage/component-like';

app/components/freestyle/usage/component-like/control.js

@@ -0,0 +1 @@
+export { default } from 'ember-freestyle/components/freestyle/usage/component-like/control';

package.json

@@ -57,6 +57,7 @@
     "@ember/test-helpers": "^3.2.0",
     "@embroider/test-setup": "^1.8.3",
     "@glint/core": "^0.9.4",
+    "@glint/template": "^0.9.4",
     "@glint/environment-ember-loose": "^0.9.7",
     "@release-it-plugins/lerna-changelog": "^5.0.0",
     "@tsconfig/ember": "^1.0.1",

tests/dummy/app/components/markdown-content/index.ts

@@ -7,7 +7,7 @@ import { action } from '@ember/object';
 import { Remarkable } from 'remarkable';
 import stripIndent from 'strip-indent';
 
-export default class extends Component {
+export default class MarkdownContent extends Component {
   @tracked rawMarkdown: string | undefined;
 
   @action

tests/integration/components/freestyle/usage/component-like-test.ts

@@ -0,0 +1,55 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, select } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { TestContext } from '@ember/test-helpers';
+import ProgressIcon from 'dummy/components/progress-icon';
+import MarkdownContent from 'dummy/components/markdown-content';
+import type { ComponentLike } from '@glint/template';
+
+interface Context extends TestContext {
+  value: ComponentLike;
+  options?: ComponentLike[];
+  onChange: (val?: ComponentLike) => void;
+}
+
+const ARGUMENT = '.FreestyleUsageArgument';
+const NAME = `${ARGUMENT}-name`;
+const CONTROL = `${ARGUMENT}-controls--ComponentLike input`;
+const SELECT_CONTROL = `${ARGUMENT}-controls--ComponentLike select`;
+
+module(
+  'Integration | Component | freestyle/usage/component-like',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('renders a select list', async function (this: Context, assert) {
+      assert.expect(4);
+      this.set('value', ProgressIcon);
+      this.set('options', [ProgressIcon, MarkdownContent]);
+      this.set('onChange', function (value: ComponentLike) {
+        assert.strictEqual(value, MarkdownContent);
+      });
+      await render<Context>(hbs`<Freestyle::Usage::ComponentLike
+      @name="Name"
+      @value={{this.value}}
+      @options={{this.options}}
+      @onChange={{this.onChange}}
+    />`);
+
+      assert.dom(NAME).hasText('Name');
+      assert.dom(SELECT_CONTROL).exists();
+      assert.dom(SELECT_CONTROL).hasValue('ProgressIcon');
+      await select(SELECT_CONTROL, 'MarkdownContent');
+    });
+
+    test('Does not render the controls', async function (this: Context, assert) {
+      await render<Context>(hbs`<Freestyle::Usage::ComponentLike 
+      @hideControls={{true}}
+      @onChange={{this.onChange}}
+    />`);
+
+      assert.dom(CONTROL).doesNotExist();
+    });
+  }
+);

yarn.lock

@@ -1369,7 +1369,7 @@
     "@glint/config" "^0.9.7"
     "@glint/template" "^0.9.7"
 
-"@glint/template@^0.9.7":
+"@glint/template@^0.9.4", "@glint/template@^0.9.7":
   version "0.9.7"
   resolved "https://registry.yarnpkg.com/@glint/template/-/template-0.9.7.tgz#8736f357482841962bc66e75831f189f33677165"
   integrity sha512-MCp8GxQDIbH8ZzfNxHhVqCSKlydBgQfBEwJLDpN81lgFRCldSDPueIbk8sz3EhpGiZJVdNQbpGeYIDsUXe1ocg==