DEV: makes discourse-styleguide core (styleguide) (#10847)

DEV: makes discourse-styleguide core (styleguide) (#10847)

This plugin is only useful for developers, however, making it core allows us to centralize any component modification in one commit.

This integration also adds a new site_setting: styleguide_admin_only which allows to enable a styleguide on a live site while restricting visibility to admins only.

By default, styleguide is disabled.

diff --git a/.gitignore b/.gitignore
index 6322b83..421c63a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -53,6 +53,7 @@ bootsnap-compile-cache/
 !/plugins/discourse-nginx-performance-report
 !/plugins/discourse-narrative-bot
 !/plugins/discourse-presence
+!/plugins/styleguide
 !/plugins/discourse-local-dates
 /plugins/*/auto_generated/
 
diff --git a/lib/plugin/metadata.rb b/lib/plugin/metadata.rb
index 0dfcc5d..6f5b06a 100644
--- a/lib/plugin/metadata.rb
+++ b/lib/plugin/metadata.rb
@@ -63,7 +63,7 @@ class Plugin::Metadata
     "discourse-solved",
     "discourse-spoiler-alert",
     "discourse-user-notes",
-    "discourse-styleguide",
+    "styleguide",
     "discourse-tooltips",
     "discourse-translator",
     "discourse-user-card-badges",
diff --git a/plugins/styleguide/README.md b/plugins/styleguide/README.md
new file mode 100644
index 0000000..e070fd3
--- /dev/null
+++ b/plugins/styleguide/README.md
@@ -0,0 +1,6 @@
+# styleguide
+
+Adds a URL of `/styleguide` to discourse that renders widgets in various
+configurations to aid in styling.
+
+![Screenshot](screenshot.png)
diff --git a/plugins/styleguide/app/controllers/styleguide/styleguide_controller.rb b/plugins/styleguide/app/controllers/styleguide/styleguide_controller.rb
new file mode 100644
index 0000000..94f853c
--- /dev/null
+++ b/plugins/styleguide/app/controllers/styleguide/styleguide_controller.rb
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Styleguide
+  class StyleguideController < ApplicationController
+    requires_plugin Styleguide::PLUGIN_NAME
+    skip_before_action :check_xhr
+
+    def index
+      ensure_admin if SiteSetting.styleguide_admin_only
+
+      render 'default/empty'
+    end
+  end
+end
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/color-example.js.es6 b/plugins/styleguide/assets/javascripts/discourse/components/color-example.js.es6
new file mode 100644
index 0000000..52f4e4e
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/components/color-example.js.es6
@@ -0,0 +1,4 @@
+export default Ember.Component.extend({
+  tagName: "section",
+  classNameBindings: [":color-example"],
+});
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js.es6 b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js.es6
new file mode 100644
index 0000000..b5fa446
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js.es6
@@ -0,0 +1,4 @@
+export default Ember.Component.extend({
+  tagName: "section",
+  classNames: ["styleguide-example"],
+});
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js.es6 b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js.es6
new file mode 100644
index 0000000..a11836c
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js.es6
@@ -0,0 +1,21 @@
+import { later } from "@ember/runloop";
+
+export default Ember.Component.extend({
+  tagName: "section",
+  classNames: ["styleguide-icons"],
+  iconIDs: [],
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    later(() => {
+      let IDs = $("#svg-sprites symbol")
+        .map(function () {
+          return this.id;
+        })
+        .get();
+
+      this.set("iconIDs", IDs);
+    }, 2000);
+  },
+});
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.js.es6 b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.js.es6
new file mode 100644
index 0000000..eed7fd0
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.js.es6
@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  tagName: "",
+});
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-markdown.js.es6 b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-markdown.js.es6
new file mode 100644
index 0000000..b62b056
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-markdown.js.es6
@@ -0,0 +1,10 @@
+import { cookAsync } from "discourse/lib/text";
+
+export default Ember.Component.extend({
+  didInsertElement() {
+    this._super(...arguments);
+
+    const contents = $(this.element).html();
+    cookAsync(contents).then((cooked) => $(this.element).html(cooked.string));
+  },
+});
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js.es6 b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js.es6
new file mode 100644
index 0000000..d1db7eb
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js.es6
@@ -0,0 +1,18 @@
+import computed from "discourse-common/utils/decorators";
+
+export default Ember.Component.extend({
+  tagName: "section",
+  classNameBindings: [":styleguide-section", "sectionClass"],
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+    window.scrollTo(0, 0);
+  },
+
+  @computed("section")
+  sectionClass(section) {
+    if (section) {
+      return `${section.id}-examples`;
+    }
+  },
+});
diff --git a/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide-show.js.es6 b/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide-show.js.es6
new file mode 100644
index 0000000..6c67440
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide-show.js.es6
@@ -0,0 +1,5 @@
+export default Ember.Controller.extend({
+  actions: {
+    dummy() {},
+  },
+});
diff --git a/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide.js.es6 b/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide.js.es6
new file mode 100644
index 0000000..6f3f001
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide.js.es6
@@ -0,0 +1,3 @@
+export default Ember.Controller.extend({
+  sections: null,
+});
diff --git a/plugins/styleguide/assets/javascripts/discourse/helpers/section-title.js.es6 b/plugins/styleguide/assets/javascripts/discourse/helpers/section-title.js.es6
new file mode 100644
index 0000000..2426ccf
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/helpers/section-title.js.es6
@@ -0,0 +1,5 @@
+import I18n from "I18n";
+
+export default Ember.Helper.helper(function (params) {
+  return I18n.t(`styleguide.sections.${params[0].replace(/\-/g, "_")}.title`);
+});
diff --git a/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6 b/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6
new file mode 100644
index 0000000..1ace401
--- /dev/null
+++ b/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6
@@ -0,0 +1,269 @@
+import NavItem from "discourse/models/nav-item";
+
+let topicId = 2000000;
+let userId = 1000000;
+
+let _data;
+
+export function createData(store) {
+  if (_data) {
+    return _data;
+  }
+
+  let categories = [
+    {
+      id: 1234,
+      name: "Fruit",
+      description_excerpt: "All about various kinds of fruit",
+      color: "ff0",
+      slug: "fruit",
+    },
+    {
+      id: 2345,
+      name: "Vegetables",
+      description_excerpt: "Full of delicious vitamins",
+      color: "f00",
+      slug: "vegetables",
+    },
+    {
+      id: 3456,
+      name: "Beverages",
+      description_excerpt: "Thirsty?",
+      color: "99f",
+      slug: "beverages",
+      read_restricted: true,
+    },
+  ].map((c) => store.createRecord("category", c));
+
+  let createUser = (attrs) => {
+    userId++;
+
+    let userData = {
+      id: userId,
+      username: `user_${userId}`,
+      name: "John Doe",
+      avatar_template: "/images/avatar.png",
+      website: "discourse.com",
+      website_name: "My Website is Discourse",
+      location: "Toronto",
+      suspend_reason: "Some reason",

[... diff too long, it was truncated ...]

GitHub sha: 82031aaf

This commit appears in #10847 which was approved by CvX and davidtaylorhq. It was merged by jjaffeux.