Merge pull request #225 from hashicorp/refactor-form-components

Refactor form components
2020-09-25 12:40:28 -04:00
commit d879c5248f
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../templates/components/rose/anonymous';
+import layout from './index';

 /**
 * An otherwise empty component that renders a block.  Used only by components
@@ -1,11 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/checkbox';
-import ComponentAutoId from '../../../mixins/component-auto-id';
-
-/**
- * A simple HTML `<input type="checkbox">` element.
- */
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../utilities/component-auto-id';
+
+export default class RoseFormCheckboxComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
@@ -1,10 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/errors';
-
-/**
- * A container for error messages.  Yields the error message component.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,10 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/form/errors/message';
-
-/**
- * A simple, styled error message.  Do not use directly.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/helper-text';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,11 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/input';
-import ComponentAutoId from '../../../mixins/component-auto-id';
-
-/**
- * A simple HTML `<input>` element.
- */
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../utilities/component-auto-id';
+
+export default class RoseFormInputComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/form/input/input';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/label';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,10 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/form/radio/group';
-
-/**
- * A `<input type="radio" name="radio-group">` element.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,13 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/form/radio/radio';
-import ComponentAutoId from '../../../../mixins/component-auto-id';
-
-/**
- * A `<input type="radio">` element.
- * `value` and `selectedValue` must be equal to select
- *  radiofield.
- */
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../../utilities/component-auto-id';
+
+export default class RoseFormRadioRadioComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
@@ -1,11 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/select';
-import ComponentAutoId from '../../../mixins/component-auto-id';
-
-/**
- * A `<select>` element context component which yields option components.
- */
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../utilities/component-auto-id';
+
+export default class RoseFormSelectComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
@@ -1,11 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/form/select/select';
-
-/**
- * This component is used internally by rose/form/select and should not be
- * instantiated directly.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,12 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/textarea';
-import ComponentAutoId from '../../../mixins/component-auto-id';
-
-/**
- * A `<textarea>` element essentially identical to `Rose::Form::Input` except
- * for the field element.
- */
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../utilities/component-auto-id';
+
+export default class RoseFormTextareaComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/form/textarea/textarea';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/layout/centered';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/layout/global';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/layout/page';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/layout/sidebar';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,5 +1,5 @@
 import LinkComponent from '@ember/routing/link-component';
-import layout from '../../templates/components/rose/link-button';
+import layout from './index';
 import { computed } from '@ember/object';

 /**
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/list/key-value';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,8 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/list/key-value/item';
-import ComponentAutoId from '../../../../mixins/component-auto-id';
-
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../../utilities/component-auto-id';
+
+export default class RoseListKeyValueItemComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
@@ -1,10 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/nav/breadcrumbs';
-
-/**
- * A navigation component with links.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -1,11 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/nav/sidebar';
-import ComponentAutoId from '../../../mixins/component-auto-id';
-
-/**
- * A simple navigation component intended for the sidebar layout region.
- */
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../utilities/component-auto-id';
+
+export default class RoseNavSidebarComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
@@ -1,6 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/nav/tabs';
-
-export default Component.extend({
-  layout,
-});
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../templates/components/rose/table/row';
+import layout from './index';

 /**
 * A table row component that uses tr table element and
@@ -1,3 +1,3 @@
 {{yield (hash
  row=(component 'rose/table/row')
-)}}
+)}}
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../templates/components/rose/table/section';
+import layout from './index';

 /**
 * A table section component that configures a row component.
@@ -1,15 +0,0 @@
-import Mixin from '@ember/object/mixin';
-import { v1 } from 'ember-uuid';
-
-/**
- * Add this mixin to components for an auto-generated ID.
- */
-export default Mixin.create({
-  /**
-   * Generates an ID for this component and assigns it to `this.id`.
-   */
-  init() {
-    this.id = `component-${v1()}`;
-    return this._super(...arguments);
-  },
-});
@@ -0,0 +1,9 @@
+import { v1 } from 'ember-uuid';
+
+/**
+ * A function that generates a component ID, based on UUID.
+ * @return {string}
+ */
+export function generateComponentID() {
+  return `component-${v1()}`;
+}
@@ -1,11 +0,0 @@
-import EmberObject from '@ember/object';
-import ComponentAutoIdMixin from 'rose/mixins/component-auto-id';
-import { module, test } from 'qunit';
-
-module('Unit | Mixin | component-auto-id', function () {
-  test('it generates an ID and assigns it to the object', function (assert) {
-    let ComponentAutoIdObject = EmberObject.extend(ComponentAutoIdMixin);
-    let subject = ComponentAutoIdObject.create();
-    assert.ok(subject.id);
-  });
-});
@@ -0,0 +1,9 @@
+import { generateComponentID } from 'rose/utilities/component-auto-id';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | component-auto-id', function () {
+  test('it generates an ID', function (assert) {
+    const id = generateComponentID();
+    assert.ok(id);
+  });
+});