chore: Temporarily added realistic examples for handlebars, javascript, and typescript

Author: ijlee2

lib/rouge/demos/handlebars

@@ -1,7 +1,70 @@
-<div class="entry">
-  <h1>{{title}}</h1>
-  {{#with story}}
-    <div class="intro">{{{intro}}}</div>
-    <div class="body">{{{body}}}</div>
-  {{/with}}
-</div>
+{{#let (unique-id) as |formId|}}
+  <form
+    aria-describedby={{if
+      @instructions
+      (concat formId "-instructions")
+    }}
+    aria-labelledby={{if @title (concat formId "-title")}}
+    class={{this.styles.form}}
+    data-test-form={{if @title @title ""}}
+    {{autofocus}}
+    {{on "submit" this.submitForm}}
+  >
+    <Ui::Form::Information
+      @formId={{formId}}
+      @instructions={{@instructions}}
+      @title={{@title}}
+    />
+
+    <ContainerQuery
+      @features={{hash wide=(width min=480)}}
+      as |CQ|
+    >
+      {{yield
+        (hash
+          Checkbox=(component
+            "ui/form/checkbox"
+            data=this.data
+            isInline=true
+            isWide=CQ.features.wide
+            onUpdate=this.updateData
+          )
+          Input=(component
+            "ui/form/input"
+            data=this.data
+            isWide=CQ.features.wide
+            onUpdate=this.updateData
+          )
+          Number=(component
+            "ui/form/number"
+            data=this.data
+            isWide=CQ.features.wide
+            onUpdate=this.updatedata
+          )
+          Select=(component
+            "ui/form/select"
+            data=this.data
+            isWide=CQ.features.wide
+            onUpdate=this.updatedata
+          )
+          Textarea=(component
+            "ui/form/textarea"
+            data=this.data
+            isWide=CQ.features.wide
+            onUpdate=this.updatedata
+          )
+        )
+      }}
+    </ContainerQuery>
+
+    <div class={{this.styles.actions}}>
+      <button
+        class={{this.styles.submit-button}}
+        data-test-button="Submit"
+        type="submit"
+      >
+        {{t "components.ui.form.submit"}}
+      </button>
+    </div>
+  </form>
+{{/let}}

lib/rouge/demos/javascript

@@ -1 +1,20 @@
-$(document).ready(function() { alert('ready!'); });
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { TrackedObject } from 'tracked-built-ins';
+
+import styles from './form.css';
+
+export default class UiForm extends Component {
+  data = new TrackedObject(this.args.data ?? {});
+  styles = styles;
+
+  @action async submitForm(event) {
+    event.preventDefault();
+
+    await this.args.onSubmit(this.data);
+  }
+
+  @action updateData({ key, value }) {
+    this.data[key] = value;
+  }
+}

lib/rouge/demos/typescript

@@ -1 +1,61 @@
-$(document).ready(function() { alert('ready!'); });
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import type { WithBoundArgs } from '@glint/template';
+import { TrackedObject } from 'tracked-built-ins';
+
+import styles from './form.css';
+import UiFormCheckbox from './form/checkbox.gts';
+import UiFormInput from './form/input.gts';
+import UiFormNumber from './form/number.gts';
+import UiFormSelect from './form/select.gts';
+import UiFormTextarea from './form/textarea.gts';
+
+interface UiFormSignature {
+  Args: {
+    data?: Record<string, unknown>;
+    instructions?: string;
+    onSubmit: (data: Record<string, unknown>) => Promise<void>;
+    title?: string;
+  };
+  Blocks: {
+    default: [
+      {
+        Checkbox: WithBoundArgs<
+          typeof UiFormCheckbox,
+          'data' | 'isInline' | 'isWide' | 'onUpdate'
+        >;
+        Input: WithBoundArgs<
+          typeof UiFormInput,
+          'data' | 'isWide' | 'onUpdate'
+        >;
+        Number: WithBoundArgs<
+          typeof UiFormNumber,
+          'data' | 'isWide' | 'onUpdate'
+        >;
+        Select: WithBoundArgs<
+          typeof UiFormSelect,
+          'data' | 'isWide' | 'onUpdate'
+        >;
+        Textarea: WithBoundArgs<
+          typeof UiFormTextarea,
+          'data' | 'isWide' | 'onUpdate'
+        >;
+      },
+    ];
+  };
+}
+
+export default class UiForm extends Component<UiFormSignature> {
+  data = new TrackedObject<Record<string, unknown>>(this.args.data ?? {});
+  styles = styles;
+
+  @action async submitForm(event: SubmitEvent): Promise<void> {
+    event.preventDefault();
+
+    await this.args.onSubmit(this.data);
+  }
+
+  @action updateData({ key, value }: { key: string; value: unknown }): void {
+    this.data[key] = value;
+  }
+}

spec/visual/templates/index.erb

@@ -1,17 +1,16 @@
 <style type="text/css">
+  code {
+    font-size: 14px;
+  }
   main {
-    padding: 15px;
-    column-count: 2;
-    -webkit-column-count: 2;
-    -moz-column-count: 2;
+    display: flex;
+    flex-direction: row;
   }
   .preview {
-    display: inline-block;
-    margin-bottom: 15px;
-    padding: 15px;
+    padding: 16px;
     width: 100%;
     color: <%= @comment_color %>;
-    border: 1px dotted;
+    border: 0.5px dotted;
     break-inside: avoid-column;
     -webkit-column-break-inside: avoid;
   }