convert to gts

doc-app/.prettierrc.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  plugins: ['prettier-plugin-ember-template-tag'],
+  singleQuote: true,
+};

doc-app/app/pods/application/route.gts

@@ -0,0 +1,32 @@
+import DocsHeader from 'ember-cli-addon-docs/components/docs-header';
+import Notification from 'carbon-components-ember/components/notification';
+import RouteTemplate from 'ember-route-template';
+import Component from '@glimmer/component';
+
+class RouteComponent extends Component {
+  <template>
+    <DocsHeader />
+
+    {{outlet}}
+
+    <div style='position: fixed; top: 0; right: 0; width: 350px; z-index: 9999'>
+      {{#each this.notifications.queue as |notification|}}
+        <Notification
+          style='word-wrap: break-word; width: 350px;'
+          @notification={{notification}}
+        />
+        <div style='height: 2px'></div>
+      {{/each}}
+    </div>
+    <div id='{{this.dialogManager.id}}'>
+      {{#if this.dialogManager.currentDialog}}
+        {{component
+          (ensure-safe-component this.dialogManager.currentDialog)
+          options=this.dialogManager.options
+        }}
+      {{/if}}
+    </div>
+  </template>
+}
+
+export default RouteTemplate(RouteComponent);

doc-app/app/pods/docs/components/accordion/route.gts

@@ -0,0 +1,92 @@
+import Checkbox from 'carbon-components-ember/components/checkbox';
+import Input from 'carbon-components-ember/components/form-input';
+import Demo from 'ember-cli-addon-docs/components/docs-demo';
+import set from 'carbon-components-ember/helpers/set';
+import Breadcrumbs from 'carbon-components-ember/components/breadcrumbs';
+import { array, get, fn } from '@ember/helper';
+import Accordion from 'carbon-components-ember/components/accordion';
+import newObj from 'carbon-components-ember/helpers/new-obj';
+import Toggle from 'carbon-components-ember/components/toggle';
+import Select from 'carbon-components-ember/components/select';
+import RadioButtonGroup from 'carbon-components-ember/components/radio/group';
+import Radio from 'carbon-components-ember/components/radio';
+import RouteTemplate from 'ember-route-template';
+import Component from '@glimmer/component';
+
+class RouteComponent extends Component {
+  <template>
+    <h1>
+      Carbon Accordion
+    </h1>
+
+    <Demo as |demo|>
+      <demo.example @name='accordion-simple.hbs'>
+        {{!import Accordion from 'carbon-components-ember/components/accordion'}}
+        {{#let (newObj) as |context|}}
+          <RadioButtonGroup @onSelect={{fn (set context 'align')}}>
+            <:heading>
+              orientation
+            </:heading>
+            <:default as |Radio|>
+              <Radio @value='start'>
+                start
+              </Radio>
+              <Radio @isDefault={{true}} @value='end'>
+                end
+              </Radio>
+            </:default>
+          </RadioButtonGroup>
+          <br />
+          <Checkbox
+            @name='disabled'
+            @label='disabled'
+            @checked={{context.disabled}}
+            @onChange={{fn (set context 'disabled')}}
+          />
+          <Checkbox
+            @name='open'
+            @label='open'
+            @checked={{context.open}}
+            @onChange={{fn (set context 'open')}}
+          />
+          <br />
+
+          <Accordion
+            @align={{context.align}}
+            @disabled={{context.disabled}}
+            @open={{context.open}}
+            as |Item|
+          >
+            <Item @title='Title 1'>
+              The accordion component delivers large amounts of content in a
+              small space through progressive disclosure. The user gets key
+              details about the underlying content and can choose to expand that
+              content within the constraints of the accordion. Accordions work
+              especially well on mobile interfaces or whenever vertical space is
+              at a premium.
+            </Item>
+            <Item @title='Title 2'>
+              The accordion component delivers large amounts of content in a
+              small space through progressive disclosure. The user gets key
+              details about the underlying content and can choose to expand that
+              content within the constraints of the accordion. Accordions work
+              especially well on mobile interfaces or whenever vertical space is
+              at a premium.
+            </Item>
+            <Item @title='Title 3'>
+              The accordion component delivers large amounts of content in a
+              small space through progressive disclosure. The user gets key
+              details about the underlying content and can choose to expand that
+              content within the constraints of the accordion. Accordions work
+              especially well on mobile interfaces or whenever vertical space is
+              at a premium.
+            </Item>
+          </Accordion>
+        {{/let}}
+      </demo.example>
+      <demo.snippet @name='accordion-simple.hbs' />
+    </Demo>
+  </template>
+}
+
+export default RouteTemplate(RouteComponent);

doc-app/app/pods/docs/components/button/route.gts

@@ -0,0 +1,118 @@
+import Checkbox from 'carbon-components-ember/components/checkbox';
+import Button from 'carbon-components-ember/components/button';
+import Input from 'carbon-components-ember/components/form-input';
+import Demo from 'ember-cli-addon-docs/components/docs-demo';
+import set from 'carbon-components-ember/helpers/set';
+import not from 'ember-truth-helpers/helpers/not';
+import eq from 'ember-truth-helpers/helpers/eq';
+import { fn } from '@ember/helper';
+import RouteTemplate from 'ember-route-template';
+import Component from '@glimmer/component';
+
+class RouteComponent extends Component {
+  <template>
+    <h1>
+      Carbon Button
+    </h1>
+
+    <Demo as |demo|>
+      <demo.example @name='button-simple.hbs'>
+        {{!import Button from 'carbon-components-ember/components/button'}}
+
+        <Button @type='primary' @onClick={{fn (set this 'clicked') true}}>
+          Primary Button
+        </Button>
+        <Button
+          @type='primary'
+          @ghost={{true}}
+          @onClick={{fn (set this 'clicked') true}}
+        >
+          Ghost Button
+        </Button>
+        <Button
+          @type='primary'
+          @tertiary={{true}}
+          @onClick={{fn (set this 'clicked') true}}
+        >
+          Tertiary Button
+        </Button>
+        <Button
+          @type='secondary'
+          @size='sm'
+          @onClick={{fn (set this 'clicked') true}}
+        >
+          Secondary Small Button
+        </Button>
+        <Button @type='primary' @size='xl' @onClick={{this.doSomething}}>
+          Button with loading indicator if onClick returns a promise
+        </Button>
+      </demo.example>
+      <demo.snippet @name='button-simple.hbs' />
+      <demo.snippet @name='button.js' />
+    </Demo>
+
+    <Demo as |demo|>
+      <Checkbox
+        @checked={{eq this.type 'primary'}}
+        @onChange={{fn (set this 'type') 'primary'}}
+      >
+        Primary
+      </Checkbox>
+      <Checkbox
+        @checked={{eq this.type 'secondary'}}
+        @onChange={{fn (set this 'type') 'secondary'}}
+      >
+        Secondary
+      </Checkbox>
+      <Checkbox
+        @checked={{eq this.type 'danger'}}
+        @onChange={{fn (set this 'type') 'danger'}}
+      >
+        Is Danger
+      </Checkbox>
+      <Checkbox
+        @checked={{this.isSmall}}
+        @onChange={{fn (set this 'isSmall') (not this.isSmall)}}
+      >
+        Is Small
+      </Checkbox>
+      <Checkbox
+        @checked={{this.isTertiary}}
+        @onChange={{fn (set this 'isTertiary') (not this.isTertiary)}}
+      >
+        Is Tertiary
+      </Checkbox>
+      <Checkbox
+        @checked={{this.isDisabled}}
+        @onChange={{fn (set this 'isDisabled') (not this.isDisabled)}}
+      >
+        Is Disabled
+      </Checkbox>
+      <label for='confirm-text'>
+        Confirm Text
+      </label>
+      <Input
+        id='confirm-text'
+        {{! template-lint-disable }}
+        @onChange={{fn (set this 'confirmText')}}
+        @value={{this.confirmText}}
+      />
+
+      <demo.example @name='button-all.hbs'>
+        <Button
+          @disabled={{this.isDisabled}}
+          @type={{this.type}}
+          @tertiary={{this.isTertiary}}
+          @size='sm'
+          @onClick={{fn (set this 'clicked') true}}
+          @bubbles={{this.bubbles}}
+          @confirmText={{this.confirmText}}
+        >
+          Button Text
+        </Button>
+      </demo.example>
+    </Demo>
+  </template>
+}
+
+export default RouteTemplate(RouteComponent);