ember-freestyle 0.17.0 → 0.19.0

package/CHANGELOG.md

@@ -4,10 +4,46 @@ All notable changes to this project will be documented in this file.
 
 
 
+## v0.19.0 (2023-09-28)
+
+#### :boom: Breaking Change
+* [#957](https://github.com/chrislopresto/ember-freestyle/pull/957) Add `@ember/string` as a peer dependency ([@bertdeblock](https://github.com/bertdeblock))
+
+#### :rocket: Enhancement
+* [#963](https://github.com/chrislopresto/ember-freestyle/pull/963) Add an Api type to Freestyle::Usage for when you expect a component as argument ([@lukemelia](https://github.com/lukemelia))
+
+#### :bug: Bug Fix
+* [#957](https://github.com/chrislopresto/ember-freestyle/pull/957) Add `@ember/string` as a peer dependency ([@bertdeblock](https://github.com/bertdeblock))
+
+#### Committers: 2
+- Bert De Block ([@bertdeblock](https://github.com/bertdeblock))
+- Luke Melia ([@lukemelia](https://github.com/lukemelia))
+
+## v0.18.0 (2023-07-18)
+
+#### :rocket: Enhancement
+* [#929](https://github.com/chrislopresto/ember-freestyle/pull/929) Support `ember-modifier` v4 ([@bertdeblock](https://github.com/bertdeblock))
+
+#### :bug: Bug Fix
+* [#928](https://github.com/chrislopresto/ember-freestyle/pull/928) Fix compatibility with `ember-cli` v5 ([@bertdeblock](https://github.com/bertdeblock))
+
+#### :house: Internal
+* [#950](https://github.com/chrislopresto/ember-freestyle/pull/950) Update versions of ember-qunit and ember-test-helpers ([@lukemelia](https://github.com/lukemelia))
+* [#949](https://github.com/chrislopresto/ember-freestyle/pull/949) Fix type errors ([@bertdeblock](https://github.com/bertdeblock))
+
+#### Committers: 2
+- Bert De Block ([@bertdeblock](https://github.com/bertdeblock))
+- Luke Melia ([@lukemelia](https://github.com/lukemelia))
 
 ## v0.17.0 (2022-10-18)
 
-## v0.17.0-alpha-css-vars-api.0 (2022-10-17)
+#### :rocket: Enhancement
+* [#856](https://github.com/chrislopresto/ember-freestyle/pull/856) Make the navigation menu sticky ([@bertdeblock](https://github.com/bertdeblock))
+* [#867](https://github.com/chrislopresto/ember-freestyle/pull/867) Add an optional "CSS Variables" block to Freestyle::Usage ([@lukemelia](https://github.com/lukemelia))
+
+#### Committers: 1
+- Bert De Block ([@bertdeblock](https://github.com/bertdeblock))
+- Luke Melia ([@lukemelia](https://github.com/lukemelia))
 
 #### :rocket: Enhancement
 * [#856](https://github.com/chrislopresto/ember-freestyle/pull/856) Make the navigation menu sticky ([@bertdeblock](https://github.com/bertdeblock))

package/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}}

package/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);
+  }
+}

package/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>

package/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;

package/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")
                 )

package/addon/components/freestyle/usage/index.ts

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

package/addon/components/freestyle/usage/number/index.ts

@@ -1,5 +1,4 @@
 import templateOnlyComponent from '@ember/component/template-only';
-import { type EmptyObject } from '@ember/component/helper';
 
 interface Signature {
   Args: {
@@ -14,7 +13,6 @@ interface Signature {
     step?: number;
     onInput: (val: number) => void;
   };
-  Blocks: EmptyObject;
 }
 const FreestyleUsageNumberComponent = templateOnlyComponent<Signature>();
 export default FreestyleUsageNumberComponent;

package/addon/components/freestyle/usage/object/index.ts

@@ -1,5 +1,4 @@
 import templateOnlyComponent from '@ember/component/template-only';
-import { type EmptyObject } from '@ember/component/helper';
 
 interface Signature {
   Args: {
@@ -13,7 +12,6 @@ interface Signature {
     hideControls?: boolean;
     jsonCollapseDepth?: number;
   };
-  Blocks: EmptyObject;
 }
 const FreestyleUsageObjectComponent = templateOnlyComponent<Signature>();
 export default FreestyleUsageObjectComponent;

package/addon/components/freestyle/usage/string/index.ts

@@ -1,5 +1,4 @@
 import templateOnlyComponent from '@ember/component/template-only';
-import { type EmptyObject } from '@ember/component/helper';
 
 interface Signature {
   Args: {
@@ -12,7 +11,6 @@ interface Signature {
     options?: string[];
     onInput: (val: string | null | undefined) => void;
   };
-  Blocks: EmptyObject;
 }
 const FreestyleUsageStringComponent = templateOnlyComponent<Signature>();
 export default FreestyleUsageStringComponent;

package/addon/components/freestyle-collection/index.ts

@@ -20,7 +20,7 @@ interface Signature {
   };
   Blocks: {
     default: [
-      { variant: WithBoundArgs<typeof FreestyleVariant, 'collection'> }
+      { variant: WithBoundArgs<typeof FreestyleVariant, 'collection'> },
     ];
   };
 }

package/addon/components/freestyle-dynamic/index.ts

@@ -46,7 +46,7 @@ export default class FreestyleDynamic extends Component<Signature> {
     if (this.args.dynamicProperties) {
       assert(
         `dynamicProperties passed into freestyle-dynamic must be an object.  You passed: ${this.args.dynamicProperties}`,
-        typeof this.args.dynamicProperties === 'object'
+        typeof this.args.dynamicProperties === 'object',
       );
       this._dynamicProperties = this.args.dynamicProperties;
     }
@@ -63,7 +63,7 @@ export default class FreestyleDynamic extends Component<Signature> {
     Object.keys(dynamicProperties).forEach((propertyName) => {
       dynamicPropertyValues[propertyName] = get(
         dynamicProperties,
-        `${propertyName}.value`
+        `${propertyName}.value`,
       ) as SupportedValue;
     });
     return dynamicPropertyValues;

package/addon/components/freestyle-dynamic-input/index.ts

@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { guidFor } from '@ember/object/internals';
-import { type EmptyObject } from '@ember/component/helper';
 import { InputType, SupportedValue } from '../freestyle-dynamic';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { action } from '@ember/object';
@@ -19,7 +18,6 @@ interface Signature {
     max?: number;
     changeValueTo: (val: SupportedValue) => void;
   };
-  Blocks: EmptyObject;
 }
 
 export default class FreestyleDynamicInput extends Component<Signature> {

package/addon/components/freestyle-dynamic-input-select-option/index.ts

@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { type EmptyObject } from '@ember/component/helper';
 import { AttrValue } from '@glint/template';
 
 interface Signature {
@@ -8,7 +7,6 @@ interface Signature {
     optionValue: AttrValue;
     selectedValue: AttrValue;
   };
-  Blocks: EmptyObject;
 }
 
 export default class FreestyleDynamicInputSelectOption extends Component<Signature> {

package/addon/components/freestyle-focus-button/index.ts

@@ -1,10 +1,7 @@
 import templateOnlyComponent from '@ember/component/template-only';
-import { type EmptyObject } from '@ember/component/helper';
 
 interface Signature {
   Element: HTMLSpanElement;
-  Args: EmptyObject;
-  Blocks: EmptyObject;
 }
 
 const FreestyleFocusButton = templateOnlyComponent<Signature>();

package/addon/components/freestyle-palette/index.ts

@@ -36,7 +36,7 @@ export default class FreestylePalette extends Component<Signature> {
     return A(
       Object.keys(colorPalette).map((k) => {
         return colorPalette[k];
-      })
+      }),
     );
   }
 }

package/addon/components/freestyle-palette-item/index.ts

@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
-import { type EmptyObject } from '@ember/component/helper';
 import { SafeString } from '@ember/template/-private/handlebars';
 import { PaletteItem } from '../freestyle-palette';
 
@@ -9,7 +8,6 @@ interface Signature {
   Args: {
     color: PaletteItem;
   };
-  Blocks: EmptyObject;
 }
 
 export default class FreestylePaletteItem extends Component<Signature> {

package/addon/components/freestyle-section/index.ts

@@ -12,7 +12,7 @@ interface Signature {
   };
   Blocks: {
     default: [
-      { subsection: WithBoundArgs<typeof FreestyleSubsection, 'section'> }
+      { subsection: WithBoundArgs<typeof FreestyleSubsection, 'section'> },
     ];
   };
 }

package/addon/components/freestyle-source/index.ts

@@ -42,15 +42,15 @@ export default class FreestyleSource extends Component<Signature> {
       // First, replace in-block dynamic properties
       sourceCode = sourceCode.replace(
         `={{dynamic.${property}}}`,
-        `=${angleAssignmentVal}`
+        `=${angleAssignmentVal}`,
       );
       sourceCode = sourceCode.replace(
         `=dynamic.${property}`,
-        `=${curlyAssignmentVal}`
+        `=${curlyAssignmentVal}`,
       );
       sourceCode = sourceCode.replace(
         `{{dynamic.${property}}}`,
-        expressionVal as string
+        expressionVal as string,
       );
     });
 

package/addon/components/freestyle-subsection/index.ts

@@ -18,7 +18,7 @@ export default class FreestyleSubsection extends Component<Signature> {
   get show(): boolean {
     return this.emberFreestyle.shouldShowSubsection(
       this.args.section,
-      this.args.name
+      this.args.name,
     );
   }
 }

package/addon/components/freestyle-typeface/index.ts

@@ -1,13 +1,11 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
-import { type EmptyObject } from '@ember/component/helper';
 
 interface Signature {
   Element: HTMLDivElement;
   Args: {
     fontFamily: string;
   };
-  Blocks: EmptyObject;
 }
 
 export default class FreestyleTypeface extends Component<Signature> {

package/addon/components/freestyle-usage-controls/index.ts

@@ -2,19 +2,13 @@ import Component from '@glimmer/component';
 import { schedule } from '@ember/runloop';
 import { capitalize } from '@ember/string';
 import type EmberFreestyleService from '../../services/ember-freestyle';
-import { type EmptyObject } from '@ember/component/helper';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { inject as service } from '@ember/service';
 import { action, get, set } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 /* eslint-enable @typescript-eslint/no-unused-vars */
 
-interface Signature {
-  Args: EmptyObject;
-  Blocks: EmptyObject;
-}
-
-export default class FreestyleUsageControls extends Component<Signature> {
+export default class FreestyleUsageControls extends Component {
   @service('ember-freestyle') declare emberFreestyle: EmberFreestyleService;
 
   get showLabels(): boolean {

package/addon/components/freestyle-variant-list/index.ts

@@ -1,5 +1,4 @@
 import templateOnlyComponent from '@ember/component/template-only';
-import { type EmptyObject } from '@ember/component/helper';
 
 interface Signature {
   Element: HTMLUListElement;
@@ -8,7 +7,6 @@ interface Signature {
     activeKey: string;
     onClickVariant: (key: string) => void;
   };
-  Blocks: EmptyObject;
 }
 
 const FreestyleVariantList = templateOnlyComponent<Signature>();

package/addon/decorators/css-variable.ts

@@ -37,7 +37,7 @@ export function cssVariable(target: TargetInstance, key: string): any;
 export function cssVariable(options: Partial<CSSVariableDecoratorOptions>): any;
 export function cssVariable(
   targetOrOptions: TargetInstance | CSSVariableDecoratorOptions,
-  key?: string
+  key?: string,
 ): any {
   if (typeof key === 'string') {
     return {
@@ -77,7 +77,7 @@ export class CSSVariableInfo {
 
     let computed: string | undefined = cssVarComputedValue(
       variableName,
-      cssClassName
+      cssClassName,
     );
     computed = computed?.trim() ?? undefined;
     computed = computed === '' ? undefined : computed;
@@ -114,7 +114,7 @@ interface CSSVariableDecoratorOptions {
 function getCssVariableInfoMemoized(
   target: TargetInstance,
   key: string,
-  options: CSSVariableDecoratorOptions
+  options: CSSVariableDecoratorOptions,
 ): CSSVariableInfo {
   if (!memoizationMap.get(target)) {
     memoizationMap.set(target, new Map());
@@ -130,21 +130,21 @@ function getCssVariableInfoMemoized(
     return result;
   } else {
     throw new Error(
-      'Unexpected missing key in cssVariable decorator implementation'
+      'Unexpected missing key in cssVariable decorator implementation',
     );
   }
 }
 
 function prepareOptions(
   targetInstance: TargetInstance,
-  userSpecifiedOptions: Partial<CSSVariableDecoratorOptions>
+  userSpecifiedOptions: Partial<CSSVariableDecoratorOptions>,
 ): CSSVariableDecoratorOptions {
   let options = userSpecifiedOptions;
   if (!options.cssClassName) {
     const cssClassName = targetInstance['cssClassName'];
     if (!cssClassName) {
       throw new Error(
-        'Must specify `cssClassName` as an option to @cssVariable decorator or define `cssClassName` on the class owning the decorated property'
+        'Must specify `cssClassName` as an option to @cssVariable decorator or define `cssClassName` on the class owning the decorated property',
       );
     }
     options = Object.assign({}, options, { cssClassName });
@@ -154,6 +154,6 @@ function prepareOptions(
       toVariableName: dasherize,
     },
     options as Pick<CSSVariableDecoratorOptions, 'cssClassName'> &
-      Partial<CSSVariableDecoratorOptions>
+      Partial<CSSVariableDecoratorOptions>,
   );
 }

package/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;

package/addon/modifiers/freestyle-highlight.ts

@@ -1,14 +1,9 @@
 import Modifier from 'ember-modifier';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { inject as service } from '@ember/service';
-import { type EmptyObject } from '@ember/component/helper';
 import type EmberFreestyleService from '../services/ember-freestyle';
 
-interface Signature {
-  Args: EmptyObject;
-}
-
-export default class FreestyleHighlight extends Modifier<Signature> {
+export default class FreestyleHighlight extends Modifier {
   @service declare emberFreestyle: EmberFreestyleService;
 
   modify(element: HTMLElement): void {

package/addon/utils/css-rules.ts

@@ -26,7 +26,7 @@ function getStyleDeclarations(selector: string): CSSStyleDeclaration[] {
 
 export function getCssVariableDefinition(
   variableName: string,
-  selector: string
+  selector: string,
 ): string {
   // find the last declaration of the selector that contains a value
   // for the CSS variable we're interested in
@@ -40,7 +40,7 @@ export function getCssVariableDefinition(
 
 export function getComputedValueForCssVariable(
   variableName: string,
-  cssClassName: string
+  cssClassName: string,
 ): string {
   let element = document.querySelector('.' + cssClassName);
   let tempElement;
@@ -54,7 +54,7 @@ export function getComputedValueForCssVariable(
     element = tempElement;
   }
   const result = getComputedStyle(element).getPropertyValue(
-    `--${variableName}`
+    `--${variableName}`,
   );
   tempElement?.remove();
   return result;

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

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

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

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

package/app/styles/components/freestyle-collection.scss

@@ -1,7 +1,8 @@
 $FreestyleCollection-maxWidth: $FreestyleGuide-maxWidth !default;
 $FreestyleCollection-shadow1: rgba(0, 0, 0, 0.16);
 $FreestyleCollection-shadow2: rgba(0, 0, 0, 0.12);
-$FreestyleCollection-boxShadow: 0 2px 5px 0 $FreestyleCollection-shadow1,
+$FreestyleCollection-boxShadow:
+  0 2px 5px 0 $FreestyleCollection-shadow1,
   0 2px 10px 0 $FreestyleCollection-shadow2;
 
 .FreestyleCollection {

package/app/styles/components/freestyle-guide.scss

@@ -8,7 +8,8 @@ $FreestyleGuide-maxWidth: 1200px !default;
 $FreestyleGuide-asideBackgroundColor: #fff !default;
 $FreestyleGuide-shadow1: rgba(0, 0, 0, 0.16);
 $FreestyleGuide-shadow2: rgba(0, 0, 0, 0.12);
-$FreestyleGuide-boxShadow: 0 2px 5px 0 $FreestyleGuide-shadow1,
+$FreestyleGuide-boxShadow:
+  0 2px 5px 0 $FreestyleGuide-shadow1,
   0 2px 10px 0 $FreestyleGuide-shadow2;
 
 .FreestyleGuide {

package/app/styles/components/freestyle-usage-controls.scss

@@ -1,7 +1,8 @@
 $FreestyleUsageControls-backgroundColor: #fff !default;
 $FreestyleUsageControls-shadow1: rgba(0, 0, 0, 0.16);
 $FreestyleUsageControls-shadow2: rgba(0, 0, 0, 0.12);
-$FreestyleUsageControls-boxShadow: 0 2px 5px 0 $FreestyleUsageControls-shadow1,
+$FreestyleUsageControls-boxShadow:
+  0 2px 5px 0 $FreestyleUsageControls-shadow1,
   0 2px 10px 0 $FreestyleUsageControls-shadow2;
 
 .FreestyleUsageControls {

package/components/freestyle/usage/array/index.d.ts

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import MutableArray from '@ember/array/mutable';
-declare type ItemArray = MutableArray<any>;
+type ItemArray = MutableArray<any>;
 interface Signature {
     Args: {
         items: ItemArray;

package/components/freestyle/usage/component-like/control/index.d.ts

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+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> {
+    callOnChange(event: InputEvent): void;
+}
+export {};

package/components/freestyle/usage/component-like/index.d.ts

@@ -0,0 +1,15 @@
+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;
+    };
+}
+declare const FreestyleUsageComponentLikeComponent: import("@ember/component/template-only").TemplateOnlyComponent<Signature>;
+export default FreestyleUsageComponentLikeComponent;

package/components/freestyle/usage/index.d.ts

@@ -14,13 +14,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;
             }
         ];

package/components/freestyle/usage/number/index.d.ts

@@ -1,4 +1,3 @@
-import { type EmptyObject } from '@ember/component/helper';
 interface Signature {
     Args: {
         name?: string;
@@ -12,7 +11,6 @@ interface Signature {
         step?: number;
         onInput: (val: number) => void;
     };
-    Blocks: EmptyObject;
 }
 declare const FreestyleUsageNumberComponent: import("@ember/component/template-only").TemplateOnlyComponent<Signature>;
 export default FreestyleUsageNumberComponent;

package/components/freestyle/usage/object/index.d.ts

@@ -1,4 +1,3 @@
-import { type EmptyObject } from '@ember/component/helper';
 interface Signature {
     Args: {
         name?: string;
@@ -9,7 +8,6 @@ interface Signature {
         hideControls?: boolean;
         jsonCollapseDepth?: number;
     };
-    Blocks: EmptyObject;
 }
 declare const FreestyleUsageObjectComponent: import("@ember/component/template-only").TemplateOnlyComponent<Signature>;
 export default FreestyleUsageObjectComponent;

package/components/freestyle/usage/string/index.d.ts

@@ -1,4 +1,3 @@
-import { type EmptyObject } from '@ember/component/helper';
 interface Signature {
     Args: {
         name?: string;
@@ -10,7 +9,6 @@ interface Signature {
         options?: string[];
         onInput: (val: string | null | undefined) => void;
     };
-    Blocks: EmptyObject;
 }
 declare const FreestyleUsageStringComponent: import("@ember/component/template-only").TemplateOnlyComponent<Signature>;
 export default FreestyleUsageStringComponent;

package/components/freestyle-dynamic/index.d.ts

@@ -1,8 +1,8 @@
 import Component from '@glimmer/component';
 import Owner from '@ember/owner';
 import { AttrValue } from '@glint/template';
-export declare type SupportedValue = boolean | string | AttrValue | number;
-export declare type InputType = 'checkbox' | 'textarea' | 'select' | 'number' | 'range';
+export type SupportedValue = boolean | string | AttrValue | number;
+export type InputType = 'checkbox' | 'textarea' | 'select' | 'number' | 'range';
 interface PropertyHash {
     value?: SupportedValue;
     options?: SupportedValue[];
@@ -11,8 +11,8 @@ interface PropertyHash {
     min?: number;
     max?: number;
 }
-export declare type DynamicProperties = Record<string, PropertyHash>;
-declare type DynamicPropertyValues = Record<string, SupportedValue>;
+export type DynamicProperties = Record<string, PropertyHash>;
+type DynamicPropertyValues = Record<string, SupportedValue>;
 interface ComponentArgs {
     slug: string;
     dynamicProperties: DynamicProperties;

package/components/freestyle-dynamic-input/index.d.ts

@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { type EmptyObject } from '@ember/component/helper';
 import { InputType, SupportedValue } from '../freestyle-dynamic';
 interface Signature {
     Element: HTMLDivElement;
@@ -13,7 +12,6 @@ interface Signature {
         max?: number;
         changeValueTo: (val: SupportedValue) => void;
     };
-    Blocks: EmptyObject;
 }
 export default class FreestyleDynamicInput extends Component<Signature> {
     isCheckbox: boolean;

package/components/freestyle-dynamic-input-select-option/index.d.ts

@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { type EmptyObject } from '@ember/component/helper';
 import { AttrValue } from '@glint/template';
 interface Signature {
     Element: HTMLOptionElement;
@@ -7,7 +6,6 @@ interface Signature {
         optionValue: AttrValue;
         selectedValue: AttrValue;
     };
-    Blocks: EmptyObject;
 }
 export default class FreestyleDynamicInputSelectOption extends Component<Signature> {
     get selected(): boolean;

package/components/freestyle-focus-button/index.d.ts

@@ -1,8 +1,5 @@
-import { type EmptyObject } from '@ember/component/helper';
 interface Signature {
     Element: HTMLSpanElement;
-    Args: EmptyObject;
-    Blocks: EmptyObject;
 }
 declare const FreestyleFocusButton: import("@ember/component/template-only").TemplateOnlyComponent<Signature>;
 export default FreestyleFocusButton;

package/components/freestyle-palette/index.d.ts

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-declare type Color = string;
+type Color = string;
 export interface PaletteItem {
     name: string;
     description?: string;
@@ -7,7 +7,7 @@ export interface PaletteItem {
     light?: Color;
     dark?: Color;
 }
-export declare type ColorPalette = Record<string, PaletteItem>;
+export type ColorPalette = Record<string, PaletteItem>;
 interface Signature {
     Element: HTMLDivElement;
     Args: {

package/components/freestyle-palette-item/index.d.ts

@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { type EmptyObject } from '@ember/component/helper';
 import { SafeString } from '@ember/template/-private/handlebars';
 import { PaletteItem } from '../freestyle-palette';
 interface Signature {
@@ -7,7 +6,6 @@ interface Signature {
     Args: {
         color: PaletteItem;
     };
-    Blocks: EmptyObject;
 }
 export default class FreestylePaletteItem extends Component<Signature> {
     get paletteStyle(): SafeString;

package/components/freestyle-typeface/index.d.ts

@@ -1,12 +1,10 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
-import { type EmptyObject } from '@ember/component/helper';
 interface Signature {
     Element: HTMLDivElement;
     Args: {
         fontFamily: string;
     };
-    Blocks: EmptyObject;
 }
 export default class FreestyleTypeface extends Component<Signature> {
     get fontFamilyStyle(): ReturnType<typeof htmlSafe>;

package/components/freestyle-usage-controls/index.d.ts

@@ -1,11 +1,6 @@
 import Component from '@glimmer/component';
 import type EmberFreestyleService from '../../services/ember-freestyle';
-import { type EmptyObject } from '@ember/component/helper';
-interface Signature {
-    Args: EmptyObject;
-    Blocks: EmptyObject;
-}
-export default class FreestyleUsageControls extends Component<Signature> {
+export default class FreestyleUsageControls extends Component {
     emberFreestyle: EmberFreestyleService;
     get showLabels(): boolean;
     set showLabels(val: boolean);
@@ -22,4 +17,3 @@ export default class FreestyleUsageControls extends Component<Signature> {
     toggleUsage(usageType: 'labels' | 'notes' | 'code' | 'api'): void;
     setFocus(): void;
 }
-export {};

package/components/freestyle-variant-list/index.d.ts

@@ -1,4 +1,3 @@
-import { type EmptyObject } from '@ember/component/helper';
 interface Signature {
     Element: HTMLUListElement;
     Args: {
@@ -6,7 +5,6 @@ interface Signature {
         activeKey: string;
         onClickVariant: (key: string) => void;
     };
-    Blocks: EmptyObject;
 }
 declare const FreestyleVariantList: import("@ember/component/template-only").TemplateOnlyComponent<Signature>;
 export default FreestyleVariantList;

package/glint.d.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';
@@ -50,6 +52,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;

package/index.js

@@ -32,7 +32,7 @@ module.exports = {
   },
 
   setupPreprocessorRegistry(type, registry) {
-    if (type === 'self' && registry.app.name === 'ember-freestyle') {
+    if (type !== 'parent') {
       return;
     }
     let pluginObj = this._buildPlugin();

package/lib/ast-transform.js

@@ -30,11 +30,11 @@ function cleanupNamedBlocksPolyfillSyntax(sourceString) {
   sourceString = sourceString.trim();
   sourceString = sourceString.replace(
     /({{#if \(-is-named-block-invocation __arg0 "(.+?)"\)}})(\s*)(.*?)(\s*){{\/if}}/gs,
-    '\n  <:$2>$3$4$5</:$2>\n'
+    '\n  <:$2>$3$4$5</:$2>\n',
   );
   sourceString = sourceString.replace(
     / @namedBlocksInfo={{hash .+?=0}} as \|__arg0\|/,
-    ''
+    '',
   );
   sourceString = sourceString.replace(/(\s\s+)/g, '\n$1');
   sourceString = sourceString.replace(/ @(\w+)=/g, '\n  @$1=');
@@ -95,11 +95,11 @@ module.exports = function ({ contents, syntax }) {
       BlockStatement(node) {
         if (
           ['freestyle-usage', 'freestyle-dynamic'].includes(
-            node.path.original
+            node.path.original,
           ) &&
           (!node.loc.source ||
             !node.loc.source.includes(
-              'templates/components/freestyle-dynamic.hbs'
+              'templates/components/freestyle-dynamic.hbs',
             ))
         ) {
           const sourceString = extractSource(node.program.body, contents);

package/modifiers/freestyle-highlight.d.ts

@@ -1,11 +1,6 @@
 import Modifier from 'ember-modifier';
-import { type EmptyObject } from '@ember/component/helper';
 import type EmberFreestyleService from '../services/ember-freestyle';
-interface Signature {
-    Args: EmptyObject;
-}
-export default class FreestyleHighlight extends Modifier<Signature> {
+export default class FreestyleHighlight extends Modifier {
     emberFreestyle: EmberFreestyleService;
     modify(element: HTMLElement): void;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-freestyle",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Create a living styleguide for your Ember app.",
   "keywords": [
     "ember-addon"
@@ -23,6 +23,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
+    "lint:glint": "glint",
     "prepare": "husky install",
     "start": "ember serve",
     "test": "npm-run-all lint test:*",
@@ -38,12 +39,12 @@
     "@ember/render-modifiers": "^2.0.4",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "ember-auto-import": "^2.4.2",
+    "ember-auto-import": "^2.4.3",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.1.1",
     "ember-cli-typescript": "^5.1.1",
     "ember-focus-trap": "^1.0.1",
-    "ember-modifier": "^3.2.7",
+    "ember-modifier": "^3.2.7 || ^4.0.0",
     "ember-named-blocks-polyfill": "^0.2.5",
     "ember-truth-helpers": "^3.1.1",
     "json-formatter-js": "^2.3.4",
@@ -53,22 +54,23 @@
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.8.1",
-    "@embroider/test-setup": "^1.8.3",
-    "@glint/core": "^0.9.4",
-    "@glint/environment-ember-loose": "^0.9.4",
+    "@ember/string": "^3.1.1",
+    "@ember/test-helpers": "^3.2.0",
+    "@embroider/test-setup": "^3.0.1",
+    "@glint/core": "^1.2.0",
+    "@glint/template": "^1.2.0",
+    "@glint/environment-ember-loose": "^1.2.0",
     "@release-it-plugins/lerna-changelog": "^5.0.0",
     "@tsconfig/ember": "^1.0.1",
     "@types/ember": "^4.0.1",
-    "@types/ember-qunit": "^5.0.2",
     "@types/ember-resolver": "^5.0.11",
     "@types/ember__application": "^4.0.2",
     "@types/ember__array": "^4.0.2",
     "@types/ember__component": "^4.0.10",
-    "@types/ember__controller": "^4.0.1",
+    "@types/ember__controller": "^4.0.4",
     "@types/ember__debug": "^4.0.1",
-    "@types/ember__engine": "^4.0.2",
-    "@types/ember__error": "^4.0.0",
+    "@types/ember__engine": "^4.0.4",
+    "@types/ember__error": "^4.0.3",
     "@types/ember__helper": "^4.0.0",
     "@types/ember__modifier": "^4.0.2",
     "@types/ember__object": "^4.0.4",
@@ -79,7 +81,6 @@
     "@types/ember__string": "^3.0.9",
     "@types/ember__template": "^4.0.0",
     "@types/ember__test": "^4.0.0",
-    "@types/ember__test-helpers": "^2.8.1",
     "@types/ember__utils": "^4.0.1",
     "@types/qunit": "^2.19.3",
     "@types/remarkable": "^2.0.3",
@@ -88,11 +89,11 @@
     "@typescript-eslint/parser": "^5.40.1",
     "all-contributors-cli": "^6.24.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~4.7.0",
+    "ember-cli": "~4.11.0",
     "ember-cli-autoprefixer": "^2.0.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-deploy": "^1.0.2",
-    "ember-cli-deploy-build": "^2.0.0",
+    "ember-cli-deploy-build": "^3.0.0",
     "ember-cli-deploy-git": "^1.3.4",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sass": "^11.0.1",
@@ -103,43 +104,47 @@
     "ember-code-snippet": "^3.0.0",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^7.0.0",
-    "ember-qunit": "^5.1.5",
+    "ember-qunit": "^7.0.0",
     "ember-resolver": "^8.0.3",
-    "ember-source": "~4.7.0",
+    "ember-source": "~4.12.3",
     "ember-source-channel-url": "^3.0.0",
     "ember-style-modifier": "^0.8.0",
-    "ember-template-imports": "^3.1.1",
-    "ember-template-lint": "^4.14.0",
+    "ember-template-imports": "^3.3.1",
+    "ember-template-lint": "^5.11.2",
     "ember-try": "^2.0.0",
-    "eslint": "^8.25.0",
+    "eslint": "^8.35.0",
     "eslint-config-ember": "0.3.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-ember": "^11.0.6",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-ember": "^11.10.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-qunit": "^7.3.1",
     "husky": "^8.0.1",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
-    "qunit": "^2.19.1",
+    "prettier": "^3.0.3",
+    "prettier-plugin-ember-template-tag": "^1.1.0",
+    "qunit": "^2.19.3",
     "qunit-dom": "^2.0.0",
-    "release-it": "^15.5.0",
+    "release-it": "^14.10.0",
     "remarkable": "^2.0.1",
     "sass": "^1.55.0",
-    "stylelint": "^14.14.0",
-    "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-recommended-scss": "^7.0.0",
-    "stylelint-prettier": "^2.0.0",
+    "stylelint": "^15.10.1",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-recommended-scss": "^13.0.0",
+    "stylelint-prettier": "^4.0.2",
     "stylelint-scss": "^4.3.0",
-    "typescript": "^4.8.3",
-    "webpack": "^5.74.0"
+    "typescript": "^4.9.5",
+    "webpack": "^5.76.0"
+  },
+  "peerDependencies": {
+    "@ember/string": "^3.1.1"
   },
   "engines": {
     "node": "14.* || >= 16"
   },
   "volta": {
-    "node": "14.19.3",
+    "node": "16.20.1",
     "yarn": "1.22.19"
   },
   "publishConfig": {

package/types/ember-truth-helpers/helpers/and.d.ts

@@ -23,5 +23,5 @@ export default class AndHelper<
   B = UnsetValue,
   C = UnsetValue,
   D = UnsetValue,
-  E = UnsetValue
+  E = UnsetValue,
 > extends Helper<AndHelperSignature<A, B, C, D, E>> {}

package/types/ember-truth-helpers/helpers/or.d.ts

@@ -25,5 +25,5 @@ export default class OrHelper<
   B = UnsetValue,
   C = UnsetValue,
   D = UnsetValue,
-  E = UnsetValue
+  E = UnsetValue,
 > extends Helper<OrHelperSignature<A, B, C, D, E>> {}