ember-freestyle 0.15.0 → 0.17.0-alpha-css-vars-api.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 
 
+
+
+## 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))
+
+#### Committers: 1
+- Bert De Block ([@bertdeblock](https://github.com/bertdeblock))
+
+## v0.16.0-beta.0 (2022-09-22)
+
+#### :boom: Breaking Change
+* [#847](https://github.com/chrislopresto/ember-freestyle/pull/847) Convert to Glimmer, Typescript, & Glint ([@lukemelia](https://github.com/lukemelia))
+
+#### Committers: 1
+- Luke Melia ([@lukemelia](https://github.com/lukemelia))
+
 ## v0.15.0 (2022-09-14)
 
 #### :rocket: Enhancement

package/README.md

@@ -23,11 +23,13 @@ To see Ember Freestyle in action, visit [https://chrislopresto.github.io/ember-f
 
 ## Compatibility
 
-* Ember.js v3.16 or above
-* Ember CLI v3.16 or above
+* Ember.js v3.24 or above
+* Ember CLI v3.24 or above
 * Node.js v14 or above
 * Ember Auto Import v2 or above
 
+ember-freestyle includes Typescript types and provides `addon/glint.ts` for Glint usage
+
 ## Installation
 
 This installation process is opinionated in order to get you going quickly.

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

@@ -0,0 +1,28 @@
+import { isPresent } from '@ember/utils';
+import Component from '@glimmer/component';
+
+interface Signature {
+  Args: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    defaultValue?: any;
+    description?: string;
+    name?: string;
+    type?: string;
+    typeLabel?: string;
+    required?: boolean;
+    hideControls?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class FreestyleUsageArgumentComponent extends Component<Signature> {
+  get shouldRenderDefaultValue(): boolean {
+    return isPresent(this.args.defaultValue);
+  }
+
+  get typeLabel(): string | undefined {
+    return this.args.typeLabel || this.args.type;
+  }
+}

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

@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import MutableArray from '@ember/array/mutable';
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { action } from '@ember/object';
+import { equal } from 'macro-decorators';
+
+const STRING = 'String';
+const BOOL = 'Boolean';
+const NUMBER = 'Number';
+const OBJECT = 'Object';
+/* eslint-enable @typescript-eslint/no-unused-vars */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ItemArray = MutableArray<any>;
+
+interface Signature {
+  Args: {
+    items: ItemArray;
+    identity?: string;
+    type: string;
+    name?: string;
+    description?: string;
+    required?: boolean;
+    defaultValue?: unknown;
+    hideControls?: boolean;
+    readOnly?: boolean;
+    jsonCollapseDepth?: number;
+    onChange: (items: ItemArray) => void;
+  };
+}
+
+export default class FreestyleUsageArrayComponent extends Component<Signature> {
+  @action addItem(): void {
+    const { onChange, items } = this.args;
+    items.pushObject('');
+    onChange && onChange(items);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+  @action updateItem(index: number, value: any): void {
+    const { onChange, items } = this.args;
+    items.replace(index, 1, [value]);
+    onChange && onChange(items);
+  }
+
+  @action removeItem(index: number): void {
+    const { onChange, items } = this.args;
+    items.removeAt(index, 1);
+    onChange && onChange(items);
+  }
+
+  @equal('args.type', STRING) declare useStringControl: boolean;
+  @equal('args.type', BOOL) declare useBooleanControl: boolean;
+  @equal('args.type', NUMBER) declare useNumberControl: boolean;
+  @equal('args.type', OBJECT) declare useObjectControl: boolean;
+}

package/addon/components/freestyle/usage/basic-css-variable/index.hbs

@@ -0,0 +1,34 @@
+<tr class="FreestyleUsageCssVar">
+  <td class="FreestyleUsageCssVar-name">
+    {{@name}}
+  </td>
+
+  <td class="FreestyleUsageCssVar-description">
+    <span class="FreestyleUsageCssVar-type u-codePill">
+      {{@type}}
+    </span>
+
+    {{@description}}
+  </td>
+
+  <td class="FreestyleUsageCssVar-details">
+    {{#if this.shouldRenderDefaultValue}}
+      <span class="FreestyleUsageCssVar-default u-codePill">
+        {{@defaultValue.raw}}
+      </span>
+      {{#if this.shouldRenderDefaultComputed}}
+        ({{@defaultValue.computed}})
+      {{/if}}
+    {{/if}}
+  </td>
+
+  <td class="FreestyleUsageCssVar-controls FreestyleUsageCssVar-controls--string">
+    {{#unless @hideControls}}
+      <Freestyle::Usage::String::Control
+        @options={{@options}}
+        @value={{@value}}
+        @onInput={{@onInput}}
+      />
+    {{/unless}}
+  </td>
+</tr>

package/addon/components/freestyle/usage/basic-css-variable/index.ts

@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+import { type CSSVariableDefaults } from 'ember-freestyle';
+
+interface Signature {
+  Args: {
+    name?: string;
+    description?: string;
+    defaultValue?: CSSVariableDefaults;
+    type?: string;
+    hideControls?: boolean;
+    value?: string;
+    options?: string[];
+    onInput: (val: string | null | undefined) => void;
+  };
+}
+
+export default class FreestyleUsageBasicCssVariableComponent extends Component<Signature> {
+  get shouldRenderDefaultValue(): boolean {
+    return this.args.defaultValue !== undefined;
+  }
+  get shouldRenderDefaultComputed(): boolean {
+    const { defaultValue } = this.args;
+    return (
+      defaultValue?.computed !== undefined &&
+      defaultValue.computed !== defaultValue.raw
+    );
+  }
+}

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

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { action } from '@ember/object';
+
+interface Signature {
+  Args: {
+    value?: boolean;
+    onInput: (val: boolean) => void;
+  };
+}
+
+export default class FreestyleUsageBoolControlComponent extends Component<Signature> {
+  @action
+  callOnInput(event: InputEvent): void {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const eventTarget = event.target as any;
+    this.args.onInput(eventTarget.checked);
+  }
+}

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

@@ -0,0 +1,25 @@
+import Component from '@glimmer/component';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { action } from '@ember/object';
+
+interface Signature {
+  Args: {
+    name?: string;
+    description?: string;
+    required?: boolean;
+    defaultValue?: boolean;
+    hideControls?: boolean;
+    value?: boolean;
+    onInput: (val: boolean) => void;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+export default class FreestyleUsageBoolComponent extends Component<Signature> {
+  @action onInput(event: InputEvent): void {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const eventTarget = event.target as any;
+    this.args.onInput(eventTarget.checked);
+  }
+}

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

@@ -56,9 +56,35 @@
       {{/if}}
     {{/if}}
 
+    {{#if (has-block 'cssVars')}}
+      {{#if this.showApi}}
+        <div class="FreestyleUsage-cssVars">
+          <h3 class="FreestyleUsage-cssVarsTitle">CSS Variables API</h3>
+
+          <table class="FreestyleUsage-cssVarsTable">
+            <thead>
+              <tr>
+                <th>Variable</th>
+                <th>Description</th>
+                <th>Default</th>
+                <th>Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{yield
+                (hash
+                  Basic=(component 'freestyle/usage/basic-css-variable' )
+                )
+              to="cssVars"}}
+            </tbody>
+          </table>
+        </div>
+      {{/if}}
+    {{/if}}
+
     {{#if this.showSource}}
       <div class="FreestyleUsage-sourceContainer" {{did-insert this.highlightSource}}>
-        <FreestyleSource @source={{@source}} @title="Source" />
+        <FreestyleSource @source={{@source}} />
       </div>
     {{/if}}
   </div>

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

@@ -0,0 +1,84 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import Component from '@glimmer/component';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+/* eslint-enable @typescript-eslint/no-unused-vars */
+import type EmberFreestyleService from '../../../services/ember-freestyle';
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    name?: string;
+    description?: string;
+    slug?: string;
+    source?: string;
+    highlightJsTheme?: string;
+  };
+  Blocks: {
+    description: [];
+    example: [];
+    api: [
+      {
+        Array: any;
+        Base: any;
+        Bool: any;
+        Number: any;
+        Object: any;
+        String: any;
+        Action: any;
+        Yield: any;
+      }
+    ];
+    cssVars: [
+      {
+        Basic: any;
+      }
+    ];
+  };
+}
+
+export default class extends Component<Signature> {
+  @service('ember-freestyle') declare emberFreestyle: EmberFreestyleService;
+
+  get showName(): boolean {
+    return this.emberFreestyle.showLabels && !!this.args.name;
+  }
+  get showNotes(): boolean {
+    return this.emberFreestyle.showNotes;
+  }
+  get showSource(): boolean {
+    return !!this.args.source && this.emberFreestyle.showCode;
+  }
+  get showApi(): boolean {
+    return this.emberFreestyle.showApi;
+  }
+  get show(): boolean {
+    const {
+      effectiveSlug,
+      emberFreestyle: { focus },
+    } = this;
+
+    if (effectiveSlug && focus) {
+      return !!effectiveSlug.match(focus);
+    } else {
+      return true;
+    }
+  }
+
+  get effectiveSlug(): string | undefined {
+    return this.args.slug || this.args.name;
+  }
+
+  get computedTheme(): string {
+    return this.args.highlightJsTheme || this.emberFreestyle.defaultTheme;
+  }
+
+  @action highlightSource(): void {
+    this.emberFreestyle.ensureHljsTheme(this.computedTheme);
+  }
+
+  @action setFocus(): void {
+    this.emberFreestyle.focus = this.effectiveSlug ?? null;
+  }
+}

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

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { action } from '@ember/object';
+import { isPresent } from '@ember/utils';
+
+interface Signature {
+  Args: {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onInput: (val: number | null) => void;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class FreestyleUsageNumberControlComponent extends Component<Signature> {
+  get shouldRenderRangeInput(): boolean {
+    return isPresent(this.args.min) && isPresent(this.args.max);
+  }
+
+  @action onInput(event: InputEvent): void {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const eventTarget = event.target as any;
+    const value = eventTarget?.value;
+    this.args.onInput(value ? parseFloat(value) : null);
+  }
+}

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

@@ -0,0 +1,20 @@
+import templateOnlyComponent from '@ember/component/template-only';
+import { type EmptyObject } from '@ember/component/helper';
+
+interface Signature {
+  Args: {
+    name?: string;
+    description?: string;
+    required?: boolean;
+    defaultValue?: number;
+    hideControls?: boolean;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onInput: (val: number) => void;
+  };
+  Blocks: EmptyObject;
+}
+const FreestyleUsageNumberComponent = templateOnlyComponent<Signature>();
+export default FreestyleUsageNumberComponent;

package/addon/components/freestyle/usage/object/control/{index.js → index.ts}

@@ -1,14 +1,23 @@
 import Component from '@glimmer/component';
-import JsonFormatter from 'json-formatter-js';
+import JsonFormatter, {
+  type JSONFormatterConfiguration,
+} from 'json-formatter-js';
 
-const OPTIONS = {
+const OPTIONS: JSONFormatterConfiguration = {
   animateClose: false,
   animateOpen: false,
   theme: 'dark',
 };
 
-export default class FreestyleUsageObjectControlComponent extends Component {
-  get jsonTree() {
+interface Signature {
+  Args: {
+    value: Record<string, unknown>;
+    jsonCollapseDepth?: number;
+  };
+}
+
+export default class FreestyleUsageObjectControlComponent extends Component<Signature> {
+  get jsonTree(): HTMLDivElement {
     const json = this.args.value;
     const openDepth = this.args.jsonCollapseDepth;
     const jsonFormatter = new JsonFormatter(json, openDepth, OPTIONS);

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

@@ -0,0 +1,19 @@
+import templateOnlyComponent from '@ember/component/template-only';
+import { type EmptyObject } from '@ember/component/helper';
+
+interface Signature {
+  Args: {
+    name?: string;
+    description?: string;
+    required?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value?: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    defaultValue?: any;
+    hideControls?: boolean;
+    jsonCollapseDepth?: number;
+  };
+  Blocks: EmptyObject;
+}
+const FreestyleUsageObjectComponent = templateOnlyComponent<Signature>();
+export default FreestyleUsageObjectComponent;

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

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { action } from '@ember/object';
+
+interface Signature {
+  Args: {
+    value?: string;
+    inputEvent?: string;
+    onInput: (s: string | null) => void;
+    options?: string[];
+  };
+}
+export default class FreestyleUsageStringControlComponent extends Component<Signature> {
+  get inputEvent(): string {
+    return this.args.inputEvent || 'input';
+  }
+
+  @action
+  callOnInput(event: InputEvent): void {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const eventTarget = event.target as any;
+    this.args.onInput(eventTarget?.value);
+  }
+}

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

@@ -3,7 +3,6 @@
   @name={{@name}}
   @description={{@description}}
   @required={{@required}}
-  @array={{@array}}
   @defaultValue={{@defaultValue}}
   @hideControls={{@hideControls}}
 >

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

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

package/addon/components/freestyle-annotation/index.hbs

@@ -1,4 +1,4 @@
-<div class="FreestyleAnnotation {{if this.showNotes 'is-showing' 'is-hidden'}}">
+<div class="FreestyleAnnotation {{if this.showNotes 'is-showing' 'is-hidden'}}" ...attributes>
   {{#if this.showNotes}}
     {{yield}}
   {{/if}}

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

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import EmberFreestyleService from '../../services/ember-freestyle';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { inject as service } from '@ember/service';
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    slug?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+export default class FreestyleAnnotation extends Component<Signature> {
+  @service('ember-freestyle') declare emberFreestyle: EmberFreestyleService;
+
+  get showNotes(): boolean {
+    const slug = this.args.slug;
+    const focus = this.emberFreestyle.focus;
+    if (focus && slug) {
+      return !!slug.match(focus);
+    }
+    return this.emberFreestyle.showNotes;
+  }
+}

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

@@ -1,4 +1,4 @@
-<div class="FreestyleCollection {{if @inline 'FreestyleCollection--inline'}}">
+<div class="FreestyleCollection {{if @inline 'FreestyleCollection--inline'}}" ...attributes>
   {{#if this.hasLabels}}
     <div class="FreestyleCollection-title">
       {{@title}}

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

@@ -0,0 +1,61 @@
+import Component from '@glimmer/component';
+import { next } from '@ember/runloop';
+import type EmberFreestyleService from '../../services/ember-freestyle';
+import { TrackedArray } from 'tracked-built-ins';
+import type { WithBoundArgs } from '@glint/template';
+import type FreestyleVariant from '../freestyle-variant';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { and, not, reads } from 'macro-decorators';
+import { action } from '@ember/object';
+/* eslint-enable @typescript-eslint/no-unused-vars */
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    inline?: boolean;
+    title?: string;
+    defaultKey?: string;
+  };
+  Blocks: {
+    default: [
+      { variant: WithBoundArgs<typeof FreestyleVariant, 'collection'> }
+    ];
+  };
+}
+
+export default class FreestyleCollection extends Component<Signature> {
+  @service('ember-freestyle') declare emberFreestyle: EmberFreestyleService;
+  @and('emberFreestyle.notFocused', 'emberFreestyle.showLabels')
+  declare showLabels: boolean;
+  @and('showLabels', 'args.title') declare hasLabels: boolean;
+  @not('emberFreestyle.focus') declare showVariantList: boolean;
+  @reads('args.defaultKey', 'all') declare defaultKey: string;
+
+  @tracked key: string | null = null;
+  @tracked variants = new TrackedArray(['all']);
+
+  get activeKey(): string {
+    if (this.emberFreestyle.focus) {
+      return 'all';
+    }
+    return this.key || this.defaultKey;
+  }
+
+  registerVariant(variantKey: string): void {
+    next(() => {
+      if (this.isDestroyed) {
+        return;
+      }
+      if (!this.variants.includes(variantKey)) {
+        this.variants.push(variantKey);
+      }
+    });
+  }
+
+  @action
+  setKey(key: string): void {
+    this.key = key;
+  }
+}

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

@@ -21,7 +21,6 @@
     @slug={{@slug}}
     @title={{@title}}
     @isDynamic={{true}}
-    @componentName={{@componentName}}
     @source={{@source}}
     @dynamicProperties={{@dynamicProperties}}
   >