Revert "Support @type=multi toggle"

This reverts commit c760838.
universal-ember · Mar 19, 2024 · 8d31814 · 8d31814
1 parent c760838
commit 8d31814
Show file tree

Hide file tree

Showing 12 changed files with 1,287 additions and 534 deletions.
diff --git a/docs-app/app/app.ts b/docs-app/app/app.ts
@@ -1,4 +1,3 @@
-import 'decorator-transforms/globals';
 import './css/styles.css';
 
 import Application from '@ember/application';

diff --git a/docs-app/ember-cli-build.js b/docs-app/ember-cli-build.js
@@ -8,13 +8,6 @@ module.exports = function (defaults) {
     // Add options here
     'ember-cli-babel': {
       enableTypeScriptTransform: true,
-      disableDecoratorTransforms: true,
-    },
-    babel: {
-      plugins: [
-        // add the new transform.
-        require.resolve('decorator-transforms'),
-      ],
     },
   });
 
@@ -50,7 +43,7 @@ module.exports = function (defaults) {
     // staticEmberSource: true,
     packagerOptions: {
       webpackConfig: {
-        devtool: 'source-map',
+        devtool: process.env.CI ? 'source-map' : 'eval',
         resolve: {
           alias: {
             path: 'path-browserify',

diff --git a/docs-app/package.json b/docs-app/package.json
@@ -28,7 +28,6 @@
   },
   "dependencies": {
     "assert": "^2.0.0",
-    "decorator-transforms": "^1.1.0",
     "docs-api": "workspace:*",
     "ember-focus-trap": "^1.1.0",
     "ember-headless-form": "^1.0.0",

diff --git a/docs-app/public/docs/3-ui/toggle-group.md b/docs-app/public/docs/3-ui/toggle-group.md
@@ -21,32 +21,10 @@ import { ToggleGroup } from 'ember-primitives';
         <AlignRight />
       </t.Item> 
     </ToggleGroup>
-
-    <ToggleGroup @type="multi" class="toggle-group" as |t|>
-      <t.Item @value="bold" aria-label="Bold text">
-        B
-      </t.Item> 
-      <t.Item @value="italic" aria-label="Italicize text">
-        I
-      </t.Item> 
-      <t.Item @value="underline" aria-label="Underline text">
-        U
-      </t.Item> 
-    </ToggleGroup>
   </div>
 
   <style>
-    button[aria-label="Bold text"] { font-weight: bold; }
-    button[aria-label="Italicize text"] { font-style: italic; }
-    button[aria-label="Underline text"] { text-decoration: underline; } 
-
-    .demo { 
-      display: flex; 
-      justify-content: center; 
-      align-items: center; 
-      gap: 1rem; 
-    }
-
+    .demo { display: flex; justify-content: center; align-items: center;}
     .toggle-group {
       display: inline-flex;
       background-color: #fff;
@@ -56,7 +34,7 @@ import { ToggleGroup } from 'ember-primitives';
 
     .toggle-group > button {
       background-color: white;
-      color: #black;
+      color: #fff;
       height: 35px;
       width: 35px;
       display: flex;
@@ -139,30 +117,19 @@ import { ToggleGroup } from 'ember-primitives';
 </template>
 ```
 
-## API Reference: `@type='single'` (default)
-
-```gjs live no-shadow
-import { ComponentSignature } from 'docs-app/docs-support';
-
-<template>
-  <ComponentSignature @module="components/toggle-group" @name="SingleSignature" />
-</template>
-```
-
-## API Reference: `@type='multi'` 
+## API Reference
 
 ```gjs live no-shadow
 import { ComponentSignature } from 'docs-app/docs-support';
 
 <template>
-  <ComponentSignature @module="components/toggle-group" @name="MultiSignature" />
+  <ComponentSignature @module="components/toggle-group" @name="ToggleGroup" />
 </template>
 ```
 
-
 <hr>
 
-## API Reference: `Item`
+### Item
 
 ```gjs live no-shadow
 import { ComponentSignature } from 'docs-app/docs-support';

diff --git a/ember-primitives/.eslintrc.cjs b/ember-primitives/.eslintrc.cjs
@@ -19,12 +19,5 @@ module.exports = {
       plugins: ['ember'],
       parser: 'ember-eslint-parser',
     },
-
-    {
-      files: ['./src/components/toggle-group.gts'],
-      rules: {
-        '@typescript-eslint/no-explicit-any': 'off',
-      },
-    },
   ],
 };
diff --git a/ember-primitives/.template-lintrc.cjs b/ember-primitives/.template-lintrc.cjs
@@ -5,13 +5,4 @@ module.exports = {
   rules: {
     'no-forbidden-elements': 'off',
   },
-  overrides: [
-    {
-      files: ['src/components/toggle-group.gts'],
-      rules: {
-        // https://github.com/typed-ember/glint/issues/715
-        'no-args-paths': 'off',
-      },
-    },
-  ],
 };
diff --git a/ember-primitives/package.json b/ember-primitives/package.json
@@ -44,7 +44,6 @@
     "ember-velcro": "^2.1.3",
     "reactiveweb": "^1.2.0",
     "tabster": "^7.0.1",
-    "tracked-built-ins": "^3.2.0",
     "tracked-toolbox": "^2.0.0"
   },
   "devDependencies": {

diff --git a/ember-primitives/src/components/-private/utils.ts b/ember-primitives/src/components/-private/utils.ts
@@ -4,8 +4,7 @@
  */
 export function toggleWithFallback(
   uncontrolledToggle: (...args: unknown[]) => void,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  controlledToggle?: (...args: any[]) => void,
+  controlledToggle?: (...args: unknown[]) => void,
   ...args: unknown[]
 ) {
   if (controlledToggle) {

diff --git a/ember-primitives/src/components/toggle-group.gts b/ember-primitives/src/components/toggle-group.gts
@@ -1,9 +1,7 @@
 import Component from '@glimmer/component';
-import { cached } from '@glimmer/tracking';
 import { hash } from '@ember/helper';
 
 import { Types } from 'tabster';
-import { TrackedSet } from 'tracked-built-ins';
 // The consumer will need to provide types for tracked-toolbox.
 // Or.. better yet, we PR to trakcked-toolbox to provide them
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -21,6 +19,7 @@ const TABSTER_CONFIG = JSON.stringify({
   },
 });
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface ItemSignature<Value = any> {
   /**
    * The button element will have aria-pressed="true" on it when the button is in the pressed state.
@@ -46,9 +45,11 @@ export interface ItemSignature<Value = any> {
   };
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Item<Value = any> = ComponentLike<ItemSignature<Value>>;
 
-export interface SingleSignature<Value> {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class ToggleGroup<Value = any> extends Component<{
   Element: HTMLDivElement;
   Args: {
     /**
@@ -63,136 +64,16 @@ export interface SingleSignature<Value> {
      *
      * When none of the toggles are selected, undefined will be passed.
      */
-    onChange?: (value: Value | undefined) => void;
+    onChange: (value: Value | undefined) => void;
   };
   Blocks: {
     default: [
       {
-        /**
-         * The Toggle Switch
-         */
         Item: Item;
       },
     ];
   };
-}
-
-export interface MultiSignature<Value = any> {
-  Element: HTMLDivElement;
-  Args: {
-    /**
-     * Optionally set the initial toggle state
-     */
-    value?: Value[] | Set<Value> | Value;
-    /**
-     * Callback for when the toggle-group's state is changed.
-     *
-     * Can be used to control the state of the component.
-     *
-     *
-     * When none of the toggles are selected, undefined will be passed.
-     */
-    onChange?: (value: Set<Value>) => void;
-  };
-  Blocks: {
-    default: [
-      {
-        /**
-         * The Toggle Switch
-         */
-        Item: Item;
-      },
-    ];
-  };
-}
-
-interface PrivateSingleSignature<Value = any> {
-  Element: HTMLDivElement;
-  Args: {
-    type?: 'single';
-
-    /**
-     * Optionally set the initial toggle state
-     */
-    value?: Value;
-    /**
-     * Callback for when the toggle-group's state is changed.
-     *
-     * Can be used to control the state of the component.
-     *
-     *
-     * When none of the toggles are selected, undefined will be passed.
-     */
-    onChange?: (value: Value | undefined) => void;
-  };
-  Blocks: {
-    default: [
-      {
-        Item: Item;
-      },
-    ];
-  };
-}
-
-interface PrivateMultiSignature<Value = any> {
-  Element: HTMLDivElement;
-  Args: {
-    type: 'multi';
-    /**
-     * Optionally set the initial toggle state
-     */
-    value?: Value[] | Set<Value> | Value;
-    /**
-     * Callback for when the toggle-group's state is changed.
-     *
-     * Can be used to control the state of the component.
-     *
-     *
-     * When none of the toggles are selected, undefined will be passed.
-     */
-    onChange?: (value: Set<Value>) => void;
-  };
-  Blocks: {
-    default: [
-      {
-        Item: Item;
-      },
-    ];
-  };
-}
-
-function isMulti(x: 'single' | 'multi' | undefined): x is 'multi' {
-  return x === 'multi';
-}
-
-export class ToggleGroup<Value = any> extends Component<
-  PrivateSingleSignature<Value> | PrivateMultiSignature<Value>
-> {
-  // See: https://github.com/typed-ember/glint/issues/715
-  <template>
-    {{#if (isMulti this.args.type)}}
-      <MultiToggleGroup
-        @value={{this.args.value}}
-        @onChange={{this.args.onChange}}
-        ...attributes
-        as |x|
-      >
-        {{yield x}}
-      </MultiToggleGroup>
-    {{else}}
-      <SingleToggleGroup
-        @value={{this.args.value}}
-        @onChange={{this.args.onChange}}
-        ...attributes
-        as |x|
-      >
-        {{yield x}}
-      </SingleToggleGroup>
-    {{/if}}
-  </template>
-}
-
-class SingleToggleGroup<Value = any> extends Component<SingleSignature<Value>> {
+}> {
   @localCopy('args.value') activePressed?: Value;
 
   handleToggle = (value: Value) => {
@@ -215,47 +96,3 @@ class SingleToggleGroup<Value = any> extends Component<SingleSignature<Value>> {
     </div>
   </template>
 }
-
-class MultiToggleGroup<Value = any> extends Component<MultiSignature<Value>> {
-  /**
-   * Normalizes @value to a Set
-   * and makes sure that even if the input Set is reactive,
-   * we don't mistakenly dirty it.
-   */
-  @cached
-  get activePressed(): TrackedSet<Value> {
-    let value = this.args.value;
-
-    if (!value) {
-      return new TrackedSet();
-    }
-
-    if (Array.isArray(value)) {
-      return new TrackedSet(value);
-    }
-
-    if (value instanceof Set) {
-      return new TrackedSet(value);
-    }
-
-    return new TrackedSet([value]);
-  }
-
-  handleToggle = (value: Value) => {
-    if (this.activePressed.has(value)) {
-      this.activePressed.delete(value);
-    } else {
-      this.activePressed.add(value);
-    }
-
-    this.args.onChange?.(new Set<Value>(this.activePressed.values()));
-  };
-
-  isPressed = (value: Value) => this.activePressed.has(value);
-
-  <template>
-    <div data-tabster={{TABSTER_CONFIG}} ...attributes>
-      {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}
-    </div>
-  </template>
-}
diff --git a/ember-primitives/src/components/toggle.gts b/ember-primitives/src/components/toggle.gts
@@ -1,4 +1,3 @@
-// import Component from '@glimmer/component';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 
@@ -29,7 +28,7 @@ export interface Signature<Value = any> {
      * This can be useful when using the same function for the `@onChange`
      * handler with multiple `<Toggle>` components.
      */
-    onChange?: (value: Value | undefined, pressed: boolean) => void;
+    onChange?: (value?: Value | undefined) => void;
 
     /**
      * When used in a group of Toggles, this option will be helpful to