docs: Add pages for modifiers (#306)

* chore: Add docs page for `on-destroy`

* chore: Add docs page for `on-insert`

* chore: Add docs page for `on-click-outside`

* chore: Add docs page for `on-update`

apps/docs-app/app/components/f/modifiers/on-click-outside.gts

@@ -0,0 +1,25 @@
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { Toaster, onClickOutside } from '@nrg-ui/core';
+
+export default class OnInsertComponent extends Component {
+  @service
+  toast;
+
+  @action
+  clickOutside(evt: PointerEvent) {
+    this.toast.info('Item clicked outside');
+    console.log('Clicked outside:', evt);
+  }
+
+  <template>
+    <Toaster />
+    <div
+      class="d-flex h-100 border border-primary bg-primary-subtle align-items-center justify-content-center"
+      {{onClickOutside this.clickOutside}}
+    >
+      <span>Don't click me</span>
+    </div>
+  </template>
+}

apps/docs-app/app/components/f/modifiers/on-destroy.gts

@@ -0,0 +1,79 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { Button, TextInput, Toaster, bind, onDestroy } from '@nrg-ui/core';
+import { TrackedArray } from 'tracked-built-ins';
+
+import type { TOC } from '@glint/template';
+
+interface ItemSignature {
+  Args: {
+    label?: string;
+
+    onDestroy: () => void;
+    onRemove: () => void;
+  };
+}
+
+const Item: TOC<ItemSignature> = <template>
+  <div
+    class="item g-col-4"
+    role="button"
+    {{on "click" @onRemove}}
+    {{onDestroy @onDestroy}}
+  >
+    {{@label}}
+  </div>
+</template>;
+
+export default class OnDestroyComponent extends Component {
+  @service
+  toast;
+
+  @tracked
+  newItem;
+
+  items: string[] = new TrackedArray([
+    'Item 1',
+    'Item 2',
+    'Item 3',
+    'Item 4',
+    'Item 5',
+    'Item 6',
+    'Item 7',
+  ]);
+
+  add = () => {
+    this.items.push(this.newItem);
+
+    this.newItem = '';
+  };
+
+  remove = (index: number) => {
+    this.items.splice(index, 1);
+  };
+
+  destroy = (item: string) => {
+    this.toast.info(`Item "${item}" has been destroyed`);
+    console.log(`Item "${item}" has been destroyed`);
+  };
+
+  <template>
+    <Toaster />
+    <div class="grid-collection grid gap-2 text-center">
+      {{#each this.items as |item i|}}
+        <Item
+          @label={{item}}
+          @onDestroy={{fn this.destroy item}}
+          @onRemove={{fn this.remove i}}
+        />
+      {{/each}}
+    </div>
+    <div class="input-group mt-4">
+      <TextInput @binding={{bind this "newItem"}} />
+      <Button class="btn-primary" @onClick={{this.add}}>Add</Button>
+    </div>
+  </template>
+}

apps/docs-app/app/components/f/modifiers/on-insert.gts

@@ -0,0 +1,71 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { Button, TextInput, Toaster, bind, onInsert } from '@nrg-ui/core';
+import { TrackedArray } from 'tracked-built-ins';
+
+import type { TOC } from '@glint/template';
+
+interface ItemSignature {
+  Args: {
+    label?: string;
+
+    onInsert: () => void;
+    onRemove: () => void;
+  };
+}
+
+const Item: TOC<ItemSignature> = <template>
+  <div
+    class="item g-col-4"
+    role="button"
+    {{on "click" @onRemove}}
+    {{onInsert @onInsert}}
+  >
+    {{@label}}
+  </div>
+</template>;
+
+export default class OnInsertComponent extends Component {
+  @service
+  toast;
+
+  @tracked
+  newItem;
+
+  items: string[] = new TrackedArray();
+
+  add = () => {
+    this.items.push(this.newItem);
+
+    this.newItem = '';
+  };
+
+  remove = (index: number) => {
+    this.items.splice(index, 1);
+  };
+
+  insert = (item: string, element: HTMLElement) => {
+    this.toast.info(`Item "${item}" has been inserted`);
+    console.log(`Item "${item}":`, element);
+  };
+
+  <template>
+    <Toaster />
+    <div class="grid-collection grid gap-2 text-center">
+      {{#each this.items as |item i|}}
+        <Item
+          @label={{item}}
+          @onInsert={{fn this.insert item}}
+          @onRemove={{fn this.remove i}}
+        />
+      {{/each}}
+    </div>
+    <div class="input-group mt-4">
+      <TextInput @binding={{bind this "newItem"}} />
+      <Button class="btn-primary" @onClick={{this.add}}>Add</Button>
+    </div>
+  </template>
+}

apps/docs-app/app/components/f/modifiers/on-update.gts

@@ -0,0 +1,24 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { TextInput, Toaster, bind, onUpdate } from '@nrg-ui/core';
+
+export default class OnDestroyComponent extends Component {
+  @service
+  toast;
+
+  @tracked
+  value = 'Edit me!';
+
+  update = (element: HTMLElement, item: string) => {
+    this.toast.info(`Value updated to "${item}"`);
+    console.log(`value: "${item}"`, element);
+  };
+
+  <template>
+    <Toaster />
+    <div {{onUpdate this.update this.value}}>
+      <TextInput @binding={{bind this "value"}} />
+    </div>
+  </template>
+}

apps/docs-app/app/router.ts

@@ -46,6 +46,11 @@ Router.map(function () {
     this.route('section-header');
     this.route('service-pricing');
   });
-  this.route('modifiers');
+  this.route('modifiers', function() {
+    this.route('on-click-outside');
+    this.route('on-destroy');
+    this.route('on-insert');
+    this.route('on-update');
+  });
   this.route('services');
 });

apps/docs-app/app/styles/app.css

@@ -1,2 +1,13 @@
 @import url("marketing-theme.css");
 @import url("freestyle.css");
+
+.grid-collection {
+  & .item {
+    border: 2px solid var(--bs-primary);
+    border-radius: var(--bs-border-radius);
+
+    &:hover {
+      background-color: var(--bs-primary-bg-subtle);
+    }
+  }
+}

apps/docs-app/app/templates/modifiers.hbs

@@ -1,2 +1,17 @@
 {{page-title "Modifiers"}}
-{{outlet}}
+
+<div class="row g-0">
+  <Sidebar as |Sidebar|>
+    <Sidebar.Group @header="Modifiers">
+      <:group as |Item|>
+        <Item @name="on-click-outside" @route="modifiers.on-click-outside" />
+        <Item @name="on-destroy" @route="modifiers.on-destroy" />
+        <Item @name="on-insert" @route="modifiers.on-insert" />
+        <Item @name="on-update" @route="modifiers.on-update" />
+      </:group>
+    </Sidebar.Group>
+  </Sidebar>
+  <div class="col px-md-0 py-3">
+    {{outlet}}
+  </div>
+</div>

apps/docs-app/app/templates/modifiers/on-click-outside.hbs

@@ -0,0 +1,5 @@
+{{page-title "on-click-outside"}}
+
+<div class="container mx-auto">
+  <F::Modifiers::OnClickOutside />
+</div>

apps/docs-app/app/templates/modifiers/on-destroy.hbs

@@ -0,0 +1,5 @@
+{{page-title "on-destroy"}}
+
+<div class="container mx-auto">
+  <F::Modifiers::OnDestroy />
+</div>

apps/docs-app/app/templates/modifiers/on-insert.hbs

@@ -0,0 +1,5 @@
+{{page-title "on-insert"}}
+
+<div class="container mx-auto">
+  <F::Modifiers::OnInsert />
+</div>

apps/docs-app/app/templates/modifiers/on-update.hbs

@@ -0,0 +1,5 @@
+{{page-title "on-update"}}
+
+<div class="container mx-auto">
+  <F::Modifiers::OnUpdate />
+</div>