diff --git a/README.md b/README.md index 9f353115772..d042adec0ad 100644 --- a/README.md +++ b/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 diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index bf71d44e0b1..dfca4127c32 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -108,6 +108,11 @@ const config = { position: 'left', label: 'API', }, + { + to: "/marketplace", + label: "Marketplace", + position: "left", + }, { type: "docsVersionDropdown", position: "right", diff --git a/website/src/data/marketplace.js b/website/src/data/marketplace.js new file mode 100644 index 00000000000..0bbb4fe6b54 --- /dev/null +++ b/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. + */ +]; diff --git a/website/src/pages/marketplace/_components/MarketplaceCard/index.jsx b/website/src/pages/marketplace/_components/MarketplaceCard/index.jsx new file mode 100644 index 00000000000..aac5d07aaf4 --- /dev/null +++ b/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 ( +
  • +
    +
    +

    + {extension.title} +

    +
      + {extension.tags.map((tag) => ( +
    • + +
    • + ))} +
    + + Source + +
    +
    + {extension.repo} +

    {extension.description}

    + {extension.rules && ( +

    +

    Rules
    +

    + Uses type resolution:{" "} + {extension.usesTypeResolution.toString()} +

    +

    +

      + {extension.rules.map((rule) => ( +
    • + {rule} +
    • + ))} +
    +

    +

    + )} +
    +
    +
  • + ); +} + +export default React.memo(MarketplaceCard); diff --git a/website/src/pages/marketplace/_components/MarketplaceCard/styles.module.css b/website/src/pages/marketplace/_components/MarketplaceCard/styles.module.css new file mode 100644 index 00000000000..541f9ca952d --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/website/src/pages/marketplace/_components/MarketplaceCardTag/index.jsx b/website/src/pages/marketplace/_components/MarketplaceCardTag/index.jsx new file mode 100644 index 00000000000..b56a780c292 --- /dev/null +++ b/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 ( +
  • + {input.tag.toLowerCase()} + +
  • + ); +} + +export default React.memo(MarketplaceCardTag); diff --git a/website/src/pages/marketplace/_components/MarketplaceCardTag/styles.module.css b/website/src/pages/marketplace/_components/MarketplaceCardTag/styles.module.css new file mode 100644 index 00000000000..5c171555201 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/website/src/pages/marketplace/index.jsx b/website/src/pages/marketplace/index.jsx new file mode 100644 index 00000000000..07eb11e94cc --- /dev/null +++ b/website/src/pages/marketplace/index.jsx @@ -0,0 +1,87 @@ +import React from "react"; +import clsx from "clsx"; +import Layout from "@theme/Layout"; +import { extensions } from "@site/src/data/marketplace"; +import MarketplaceCard from "./_components/MarketplaceCard"; +import styles from "./styles.module.css"; + +const TITLE = "Detekt 3rd-party Marketplace"; +const DESCRIPTION = + "List of Detekt Rules that have been built by the community 🎉"; +const SUBMIT_URL = + "https://github.com/detekt/detekt/blob/main/website/src/data/marketplace.js"; +const SEARCH_RULES_URL = "https://github.com/topics/detekt-rules"; + +function MarketplaceHeader() { + return ( +
    +

    {TITLE}

    +

    + List of Detekt Rules, Extensions & Plugins that have been built by the community. +

    + + 🙏 Please add your ruleset + + + Find more rules on Github + +
    + ); +} + +function MarketplaceCards() { + // No Results scenario + if (extensions.length === 0) { + return ( +
    +
    +

    No results

    +
    +
    + ); + } + + return ( +
    + <> +
    +

    All extensions

    + +
    + +
    + ); +} + +export default function Marketplace() { + return ( + +
    + + +
    +
    + ); +} diff --git a/website/src/pages/marketplace/styles.module.css b/website/src/pages/marketplace/styles.module.css new file mode 100644 index 00000000000..a216c6dcb15 --- /dev/null +++ b/website/src/pages/marketplace/styles.module.css @@ -0,0 +1,9 @@ +.marketplaceList { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); + gap: 24px; +} + +.marketplaceHeaderButton { + margin: 8px; +} \ No newline at end of file