Detekt Rules Marketplace (#5191)

* Initial draft of Rules Marketplace

* Include all the marketplace feedbacks

* Cleanup the code

* Add URL to body

* Rename rulesmarketplace.js to marketplace.js

* Add twitter/compose-rules to the Marketplace

README.md

@@ -171,12 +171,7 @@ Integrations:
 - [GitHub Action: Setup detekt](https://github.com/marketplace/actions/setup-detekt)
 - [Sonatype Lift](https://github.com/marketplace/muse-dev)
 
-Custom rules and reports from 3rd parties:
-
-- [detekt-verify-implementation](https://github.com/cph-cachet/detekt-verify-implementation) by cph-cachet
-- [detekt-hint](https://github.com/mkohm/detekt-hint) by mkohm is a plugin to detekt that provides detection of design principle violations through integration with Danger
-- [GitLab report format](https://gitlab.com/cromefire_/detekt-gitlab-report)
-- There are more third-party plugins out there. You can find some of them [in this list](https://github.com/topics/detekt-plugin).
+Custom rules and reports from 3rd parties can be found on our [**Detekt Marketplace**](https://detekt.dev/marketplace).
 
 #### Credits
 

website/docusaurus.config.js

@@ -108,6 +108,11 @@ const config = {
             position: 'left',
             label: 'API',
           },
+          {
+            to: "/marketplace",
+            label: "Marketplace",
+            position: "left",
+          },
           {
             type: "docsVersionDropdown",
             position: "right",

website/src/data/marketplace.js

@@ -0,0 +1,165 @@
+/*
+ * ADD YOUR REPOSITORY TO THE DETEKT MARKETPLACE
+ *
+ * We're allowing third-party repositories that contains rulesets,
+ * custom processors, custom reporters and external plugins that work with Detekt.
+ *
+ * You can read more about how to extend Detekt here:
+ * https://detekt.dev/docs/introduction/extensions
+ *
+ * Instructions for adding your repository:
+ *
+ * - Add your third-party repository in the json array below
+ * - `title` is the repository name
+ * - `description` is a short (≤120 characters) description of the repository.
+ * - `repo` is the repository URL
+ * - `ruleset` (Optional) is the ID of the ruleset
+ * - `rules` (Optional) is an array of rules your ruleset is offering
+ * - `usesTypeResolution` (Optional) a boolean weather or not your ruleset uses type resolution.
+ * - Open a PR and check for reported CI errors
+ */
+
+export const tagTypes = {
+  ruleset: {
+    color: "#39ca30",
+    description: "A collection of custom rules for Detekt",
+  },
+  processor: {
+    color: "#e9669e",
+    description: "A custom processor for Detekt",
+  },
+  reporter: {
+    color: "#fe6829",
+    description: "A custom reporter for Detekt",
+  },
+  plugin: {
+    color: "#a44fb7",
+    description: "A plugin or a tool built on top of Detekt",
+  },
+};
+
+// Add sites to this list
+export const extensions = [
+  {
+    title: "Compiler",
+    description:
+      "A ruleset that wraps the warnings and info messages of the Kotlin compiler as detekt findings..",
+    repo: "https://github.com/BraisGabin/detekt-compiler-rules",
+    ruleset: "compiler",
+    rules: ["CompilerInfo", "CompilerWarning"],
+    usesTypeResolution: true,
+    tags: ["ruleset"],
+  },
+  {
+    title: "Compose by appKODE",
+    description:
+      "A set of Detekt rules to help prevent common errors in projects using Jetpack Compose.",
+    repo: "https://github.com/appKODE/detekt-rules-compose",
+    ruleset: "compose",
+    rules: [
+      "ReusedModifierInstance",
+      "UnnecessaryEventHandlerParameter",
+      "ComposableEventParameterNaming",
+      "ModifierHeightWithText",
+      "ModifierParameterPosition",
+      "ModifierDefaultValue",
+      "MissingModifierDefaultValue",
+      "PublicComposablePreview",
+    ],
+    usesTypeResolution: false,
+    tags: ["ruleset"],
+  },
+  {
+    title: "Compose by Twitter",
+    description:
+      "Static checks to aid with a healthy adoption of Jetpack Compose.",
+    repo: "https://github.com/twitter/compose-rules/",
+    ruleset: "TwitterCompose",
+    rules: [
+      "ComposableNaming",
+      "ComposableParamOrder",
+      "ContentEmitterReturningValues",
+      "ModifierComposable",
+      "ModifierMissing",
+      "ModifierReused",
+      "ModifierWithoutDefault",
+      "MultipleEmitters",
+      "MutableParams",
+      "PreviewPublic",
+      "RememberMissing",
+      "ViewModelForwarding",
+      "ViewModelInjection",
+    ],
+    usesTypeResolution: false,
+    tags: ["ruleset"],
+  },
+  {
+    title: "Doist detekt-rules",
+    description:
+      "This repository contains custom detekt rules based on Doist internal coding conventions.",
+    repo: "https://github.com/Doist/detekt-rules",
+    ruleset: "DoistRuleSet",
+    rules: [
+      "NoBlankNewLineAfterClassHeader",
+      "ConsistentWhenEntries",
+      "SingleLineWhenEntryExpressionsAreWrapped",
+      "MutableObservablePropertyIsPrivate",
+      "NoNotNullOperator",
+      "TodoPattern",
+    ],
+    usesTypeResolution: false,
+    tags: ["ruleset"],
+  },
+  {
+    title: "Hint",
+    description:
+      "A ruleset to implement detection of violation of programming principles. detekt-hint offers also instructions on how to integrate with Danger and Github Actions",
+    repo: "https://github.com/mkohm/detekt-hint",
+    tags: ["plugin", "ruleset"],
+    ruleset: "detekt-hint",
+    rules: [
+      "InterfaceSegregationPrinciple",
+      "LackOfCohesionMethods",
+      "OpenClosedPrinciple",
+      "UseCompositionInsteadOfInheritance",
+    ],
+    usesTypeResolution: true,
+  },
+  {
+    title: "Gitlab Report",
+    description:
+      "A reporter to export Detekt findings to GitLab Code Quality (and other code climate compatible tools).\nThis is designed for use with GitLab, but should also work fine with everything else that accepts the code climate format.",
+    repo: "https://gitlab.com/cromefire/detekt-gitlab-report",
+    tags: ["reporter"],
+  },
+  {
+    title: "Operator",
+    description:
+      "Rules to prefer expressions over named functions for kotlin operators.",
+    repo: "https://github.com/colematthew4/detekt-operator",
+    ruleset: "detekt-operator",
+    rules: [
+      "PreferInOverContainsSyntax",
+      "PreferUnaryPrefixOverFunctionSyntax",
+      "PreferUnaryPostfixOverFunctionSyntax",
+      "PreferArithmeticSymbolSyntax",
+      "PreferBracketAccessorOverFunctionSyntax",
+    ],
+    usesTypeResolution: false,
+    tags: ["ruleset"],
+  },
+  {
+    title: "Verify Implementation",
+    description:
+      "A ruleset which enables verifying whether concrete classes are implemented as specified according to annotations applied to base types.",
+    repo: "https://github.com/cph-cachet/detekt-verify-implementation",
+    ruleset: "verify-implementation",
+    rules: ["Immutable", "DataClass"],
+    usesTypeResolution: true,
+    tags: ["ruleset"],
+  },
+  /*
+  Pro Tip: add your ruleset in alphabetical order.
+  Appending your ruleset here (at the end) is more likely to produce Git conflicts.
+   */
+];

website/src/pages/marketplace/_components/MarketplaceCard/index.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.css";
+import MarketplaceCardTag from "../MarketplaceCardTag";
+
+function MarketplaceCard(input) {
+  const extension = input.extension;
+  return (
+    <li key={extension.title} className="card shadow--md">
+      <div className="card__body">
+        <div className={styles.marketplaceCardHeader}>
+          <h3 className={styles.marketplaceCardTitle}>
+            {extension.title}
+          </h3>
+          <ul className={styles.tagContainer}>
+            {extension.tags.map((tag) => (
+              <li>
+                <MarketplaceCardTag tag={tag} />
+              </li>
+            ))}
+          </ul>
+          <Link
+            href={extension.repo}
+            className={clsx(
+              "button",
+              "button--secondary",
+              "button--sm",
+              styles.marketplaceHeaderButton
+            )}
+          >
+            Source
+          </Link>
+        </div>
+        <div className={styles.marketplaceCardBody}>
+          <Link href={extension.repo}>{extension.repo}</Link>
+          <p>{extension.description}</p>
+          {extension.rules && (
+            <p>
+              <h5>Rules</h5>
+              <p>
+                Uses type resolution:{" "}
+                <strong>{extension.usesTypeResolution.toString()}</strong>
+              </p>
+              <p>
+                <ul>
+                  {extension.rules.map((rule) => (
+                    <li>
+                      <code>{rule}</code>
+                    </li>
+                  ))}
+                </ul>
+              </p>
+            </p>
+          )}
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export default React.memo(MarketplaceCard);

website/src/pages/marketplace/_components/MarketplaceCard/styles.module.css

@@ -0,0 +1,38 @@
+.marketplaceCardHeader {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.marketplaceCardTitle {
+    margin-bottom: 0;
+    flex: 1 1 auto;
+}
+
+.marketplaceCardButton {
+    margin-bottom: 0;
+    flex: 1 1 auto;
+}
+
+.marketplaceCardTitle a {
+    text-decoration: none;
+    background: linear-gradient(var(--ifm-color-primary),
+            var(--ifm-color-primary)) 0% 100% / 0% 1px no-repeat;
+    transition: background-size ease-out 200ms;
+}
+
+.marketplaceCardTitle a:not(:focus):hover {
+    background-size: 100% 1px;
+}
+
+.marketplaceCardBody {
+    font-size: smaller;
+    line-height: 1.66;
+}
+
+.tagContainer {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+}

website/src/pages/marketplace/_components/MarketplaceCardTag/index.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { tagTypes } from "@site/src/data/marketplace";
+import styles from "./styles.module.css";
+
+function MarketplaceCardTag(input) {
+
+  const tag = input.tag;
+
+  function getColorForTag(tag) {
+    if (tag in tagTypes) {
+      return tagTypes[tag].color;
+    } else {
+      return null;
+    }
+  }
+
+  function getDescriptionForTag(tag) {
+    if (tag in tagTypes) {
+      return tagTypes[tag].description;
+    } else {
+      return null;
+    }
+  }
+
+  return (
+    <li title={getDescriptionForTag(tag)} className={styles.tag}>
+      <span className={styles.textLabel}>{input.tag.toLowerCase()}</span>
+      <span
+        className={styles.colorLabel}
+        style={{ backgroundColor: getColorForTag(tag) }}
+      />
+    </li>
+  );
+}
+
+export default React.memo(MarketplaceCardTag);

website/src/pages/marketplace/_components/MarketplaceCardTag/styles.module.css

@@ -0,0 +1,22 @@
+.tag {
+    font-size: 0.675rem;
+    border: 1px solid var(--ifm-color-secondary-darkest);
+    cursor: default;
+    margin-right: 6px;
+    margin-bottom: 6px !important;
+    border-radius: 12px;
+    display: inline-flex;
+    align-items: center;
+}
+
+.tag .textLabel {
+    margin-left: 8px;
+}
+
+.tag .colorLabel {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    margin-left: 6px;
+    margin-right: 6px;
+}