diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 8b4beb8621..9f5988f1bc 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -19,3 +19,10 @@ updates: labels: - 'source: dependencies' - 'pr: chore' + - package-ecosystem: github-actions + directory: / + schedule: + interval: daily + labels: + - 'source: dependencies' + - 'pr: chore' diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/PackageStats.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/PackageStats.js new file mode 100644 index 0000000000..6e46ee0e2c --- /dev/null +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/PackageStats.js @@ -0,0 +1,79 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { useIntl } from 'react-intl'; +import { Typography } from '@strapi/design-system/Typography'; +import { Icon } from '@strapi/design-system/Icon'; +import { Divider } from '@strapi/design-system/Divider'; +import { Stack } from '@strapi/design-system/Stack'; +import Github from '@strapi/icons/Github'; +import Download from '@strapi/icons/Download'; +import Star from '@strapi/icons/Star'; +import { pxToRem } from '@strapi/helper-plugin'; + +const VerticalDivider = styled(Divider)` + width: ${pxToRem(12)}; + transform: rotate(90deg); +`; + +const PackageStats = ({ githubStars, npmDownloads, npmPackageType }) => { + const { formatMessage } = useIntl(); + + return ( + + {!!githubStars && ( + <> + + +

+ + {githubStars} + +

+ + + )} + +

+ + {npmDownloads} + +

+
+ ); +}; + +PackageStats.defaultProps = { + githubStars: 0, + npmDownloads: 0, +}; + +PackageStats.propTypes = { + githubStars: PropTypes.number, + npmDownloads: PropTypes.number, + npmPackageType: PropTypes.string.isRequired, +}; + +export default PackageStats; diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js index 7b7286a20e..4d7b2e16e2 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js @@ -15,6 +15,7 @@ import CheckCircle from '@strapi/icons/CheckCircle'; import { useTracking } from '@strapi/helper-plugin'; import madeByStrapiIcon from '../../../../assets/images/icon_made-by-strapi.svg'; import InstallPluginButton from './InstallPluginButton'; +import PackageStats from './PackageStats'; // Custom component to have an ellipsis after the 2nd line const EllipsisText = styled(Typography)` @@ -67,14 +68,21 @@ const NpmPackageCard = ({ data-testid="npm-package-card" > - + + + + @@ -170,6 +178,8 @@ NpmPackageCard.propTypes = { madeByStrapi: PropTypes.bool.isRequired, strapiCompatibility: PropTypes.oneOf(['v3', 'v4']), strapiVersion: PropTypes.string, + githubStars: PropTypes.number, + npmDownloads: PropTypes.number, }).isRequired, }).isRequired, isInstalled: PropTypes.bool.isRequired, diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap index 2e256b8448..5d59d29d6b 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap +++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap @@ -16,14 +16,14 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` height: 100%; } -.c83 { +.c93 { background: #ffffff; padding: 24px; border-radius: 4px; box-shadow: 0px 1px 4px rgba(33,33,52,0.1); } -.c84 { +.c94 { background: #f6ecfc; padding: 12px; border-radius: 4px; @@ -62,7 +62,25 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` justify-content: space-between; } -.c67 { +.c64 { + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c78 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -76,11 +94,11 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` flex-direction: row; } -.c71 { +.c82 { padding-top: 24px; } -.c72 { +.c66 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -94,7 +112,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` flex-direction: row; } -.c86 { +.c96 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -108,41 +126,56 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` flex-direction: column; } -.c87 > * { +.c97 > * { margin-top: 0; margin-bottom: 0; } -.c73 > * { +.c67 > * { margin-left: 0; margin-right: 0; } -.c73 > * + * { +.c67 > * + * { + margin-left: 4px; +} + +.c83 > * { + margin-left: 0; + margin-right: 0; +} + +.c83 > * + * { margin-left: 8px; } -.c66 { +.c72 { + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; +} + +.c77 { color: #32324d; font-weight: 500; font-size: 1rem; line-height: 1.25; } -.c69 { +.c80 { color: #666687; font-size: 0.875rem; line-height: 1.43; } -.c81 { +.c91 { font-weight: 600; color: #328048; font-size: 0.875rem; line-height: 1.43; } -.c88 { +.c98 { font-weight: 500; color: #32324d; font-size: 0.75rem; @@ -294,7 +327,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` fill: #32324d; } -.c75 { +.c85 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -306,7 +339,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` background: #f0f0ff; } -.c75 .c55 { +.c85 .c55 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -317,62 +350,62 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` align-items: center; } -.c75 .c58 { +.c85 .c58 { color: #ffffff; } -.c75[aria-disabled='true'] { +.c85[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } -.c75[aria-disabled='true'] .c58 { +.c85[aria-disabled='true'] .c58 { color: #666687; } -.c75[aria-disabled='true'] svg > g, -.c75[aria-disabled='true'] svg path { +.c85[aria-disabled='true'] svg > g, +.c85[aria-disabled='true'] svg path { fill: #666687; } -.c75[aria-disabled='true']:active { +.c85[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } -.c75[aria-disabled='true']:active .c58 { +.c85[aria-disabled='true']:active .c58 { color: #666687; } -.c75[aria-disabled='true']:active svg > g, -.c75[aria-disabled='true']:active svg path { +.c85[aria-disabled='true']:active svg > g, +.c85[aria-disabled='true']:active svg path { fill: #666687; } -.c75:hover { +.c85:hover { background-color: #ffffff; } -.c75:active { +.c85:active { background-color: #ffffff; border: 1px solid #4945ff; } -.c75:active .c58 { +.c85:active .c58 { color: #4945ff; } -.c75:active svg > g, -.c75:active svg path { +.c85:active svg > g, +.c85:active svg path { fill: #4945ff; } -.c75 .c58 { +.c85 .c58 { color: #271fe0; } -.c75 svg > g, -.c75 svg path { +.c85 svg > g, +.c85 svg path { fill: #271fe0; } @@ -390,31 +423,31 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` padding-bottom: 4px; } -.c64 { +.c65 { border-radius: 4px; width: 64px; height: 64px; } -.c65 { +.c76 { padding-top: 16px; } -.c68 { +.c79 { padding-top: 8px; } -.c78 { +.c88 { margin-left: 4px; width: 24px; height: auto; } -.c79 { +.c89 { padding-left: 16px; } -.c82 { +.c92 { padding-top: 32px; } @@ -561,31 +594,43 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` width: 100%; } -.c76 { +.c68 { + color: #666687; +} + +.c70 { + color: #f29d41; +} + +.c86 { color: #328048; margin-left: 8px; } -.c80 { +.c90 { color: #328048; margin-right: 8px; width: 12; height: 12; } -.c90 { +.c100 { color: #666687; margin-left: 8px; width: 12px; height: 12px; } -.c77 path { - fill: #328048; +.c69 path { + fill: #666687; } -.c91 path { - fill: #666687; +.c71 path { + fill: #f29d41; +} + +.c87 path { + fill: #328048; } .c25 { @@ -748,7 +793,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` padding-right: 8px; } -.c74 { +.c84 { padding-left: 8px; } @@ -889,16 +934,16 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` fill: #32324d; } -.c85 { +.c95 { margin-right: 24px; } -.c85 svg { +.c95 svg { width: 2rem; height: 2rem; } -.c89 { +.c99 { word-break: break-all; } @@ -1020,7 +1065,22 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` max-width: 100%; } -.c70 { +.c73 { + background: #dcdce4; +} + +.c74 { + height: 1px; + border: none; +} + +.c75 { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +.c81 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; @@ -1372,38 +1432,106 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
- Comments logo
+ Comments logo +
+ + +

+ + 323 + +

+
+ +

+ + 1123 + +

+
+
+

Comments

Powerful Strapi based comments moderation tool for you and your users

@@ -1422,7 +1550,179 @@ exports[`Marketplace page - layout renders the online layout 1`] = ` + + +
+ + + +
+
+ -
-
-
-
-
- Documentation logo +

Documentation
Made by Strapi

Create an OpenAPI Document and visualize your API with SWAGGER UI

@@ -1835,7 +2088,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `