DEV: various improvements to devex on chat (#21612)

- Improves styleguide support
- Adds toggle color scheme to styleguide
- Adds properties mutators to styleguide
- Attempts to quit a session as soon as done with it in system specs, this should at least free resources faster
- Refactors fabricators to simplify them
- Adds more fabricators (uploads for example)
- Starts implementing components pattern in system specs
- Uses Chat::Message creator to create messages in system specs, this should help to have more real specs as the side effects should now happen

plugins/styleguide/assets/javascripts/discourse/components/styleguide/component.hbs

@@ -0,0 +1,3 @@
+<div class="component">
+  {{yield}}
+</div>

plugins/styleguide/assets/javascripts/discourse/components/styleguide/component.js

@@ -0,0 +1,3 @@
+import Component from "@glimmer/component";
+
+export default class StyleguideComponent extends Component {}

plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls.hbs

@@ -0,0 +1,5 @@
+<table class="component-properties">
+  <tbody>
+    {{yield}}
+  </tbody>
+</table>

plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls.js

@@ -0,0 +1,3 @@
+import Component from "@glimmer/component";
+
+export default class StyleguideControls extends Component {}

plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls/row.hbs

@@ -0,0 +1,6 @@
+<tr class="component-properties__row">
+  <td class="component-properties__cell">{{@name}}</td>
+  <td class="component-properties__cell">
+    {{yield}}
+  </td>
+</tr>

plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls/toggle.hbs

@@ -0,0 +1 @@
+<DToggleSwitch @state={{@enabled}} {{on "click" @action}} />

plugins/styleguide/assets/javascripts/discourse/components/styleguide/controls/toggle.js

@@ -0,0 +1,3 @@
+import Component from "@glimmer/component";
+
+export default class StyleguideControlsToggle extends Component {}

plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.hbs

@@ -0,0 +1 @@
+<DButton @action={{this.toggle}} class="toggle-color-mode">Toggle color</DButton>

plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js

@@ -0,0 +1,45 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+
+const DARK = "dark";
+const LIGHT = "light";
+
+function colorSchemeOverride(type) {
+  const lightScheme = document.querySelector("link.light-scheme");
+  const darkScheme = document.querySelector("link.dark-scheme");
+
+  if (!lightScheme || !darkScheme) {
+    return;
+  }
+
+  switch (type) {
+    case DARK:
+      lightScheme.media = "none";
+      darkScheme.media = "all";
+      break;
+    case LIGHT:
+      lightScheme.media = "all";
+      darkScheme.media = "none";
+      break;
+  }
+}
+
+export default class ToggleColorMode extends Component {
+  @service keyValueStore;
+
+  @tracked colorSchemeOverride = this.default;
+
+  get default() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? DARK
+      : LIGHT;
+  }
+
+  @action
+  toggle() {
+    this.colorSchemeOverride = this.colorSchemeOverride === DARK ? LIGHT : DARK;
+    colorSchemeOverride(this.colorSchemeOverride);
+  }
+}

plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs

@@ -1,5 +1,6 @@
 <section class="styleguide">
   <section class="styleguide-menu">
+    <ToggleColorMode />
     {{#each this.categories as |c|}}
       <ul>
         <li class="styleguide-heading">{{i18n

plugins/styleguide/assets/stylesheets/styleguide.scss

@@ -73,6 +73,36 @@
 
       .rendered {
         width: 100%;
+        position: relative;
+
+        .component {
+          padding: 2rem;
+          border: 2px dotted var(--primary-low);
+          margin-bottom: 2rem;
+        }
+
+        .component-properties {
+          width: 100%;
+
+          &__cell {
+            padding: 0.5rem 0;
+
+            &:first-child {
+              width: 30%;
+            }
+
+            textarea,
+            input {
+              box-sizing: border-box;
+              margin: 0;
+              width: 100%;
+            }
+
+            textarea {
+              height: 100px;
+            }
+          }
+        }
       }
 
       margin-bottom: 2em;