chore: add workos gold sponsor to package search (#4049)

* chore: add workos gold sponsor to package search

* refactor: select new sponsor to show first on each component creation

Author: paul-soporan

.pnp.cjs

@@ -72,6 +72,7 @@
     "react-icons": "^3.10.0",
     "react-instantsearch-dom": "^6.6.0",
     "react-monaco-editor": "^0.36.0",
+    "react-responsive-carousel": "^3.2.22",
     "react-scroll-into-view-if-needed": "^2.1.7",
     "react-select": "^3.1.0",
     "react-spinners": "^0.8.3",

.yarn/cache/react-easy-swipe-npm-0.0.21-b711aee7dc-225f12a9dd.zip

@@ -1,13 +1,28 @@
+import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import styled                             from '@emotion/styled';
 import {connectHits, connectStateResults} from 'react-instantsearch-dom';
 import {Stats}                            from 'react-instantsearch-dom';
-import React                              from 'react';
+import {Carousel}                         from 'react-responsive-carousel';
+import ReactTooltip                       from 'react-tooltip';
+import React, {useRef}                    from 'react';
 
 import {Hit}                              from '../hit';
 import {isEmpty}                          from '../util';
 
 import {Pagination}                       from './Pagination';
 
+const SPONSORS = [{
+  name: `Doppler`,
+  description: `Universal Secrets Platform`,
+  icon: `https://dashboard.doppler.com/imgs/logo_color.png`,
+  url: `https://www.doppler.com/?utm_campaign=github_repo&utm_medium=referral&utm_content=yarn&utm_source=github`,
+}, {
+  name: `WorkOS`,
+  description: `all-in-one solution for enterprise-ready apps`,
+  icon: `https://assets-global.website-files.com/5ef26797488fe01cc1b89848/61426734f2f4a013c6f2d774_Favicon%2032x32.png`,
+  url: `https://workos.com/?utm_campaign=github_repo&utm_medium=referral&utm_content=berry&utm_source=github`,
+}];
+
 const Hits = connectHits(({hits, onTagClick, onOwnerClick, searchState}) =>
   hits.map(hit => (
     <Hit
@@ -42,17 +57,38 @@ const StatsText = styled.div`
   margin-right: 1rem;
 `;
 
-const Sponsors = styled.a`
-  padding: 0.7rem 0;
+const SponsorCarousel = styled(Carousel)`
+  margin: auto 0 auto auto;
 
-  flex: none;
-  margin-left: auto;
+  .carousel {
+    display: flex;
+    flex-direction: row-reverse;
+
+    .slide {
+      text-align: right;
+
+      img {
+        width: 1.2em;
+        height: 1.2em;
+
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .control-dots {
+    position: relative;
 
+    flex: 1;
+    margin: 0;
+    line-height: 1em;
+  }
+`;
+
+const SponsorContainer = styled.a`
   color: inherit;
 
   span {
-    display: inline-block;
-
     color: #85ecf7;
     text-decoration: underline;
     text-underline-offset: 2px;
@@ -71,30 +107,59 @@ const SearchFooter = styled.div`
   margin-bottom: 50px;
 `;
 
-const ResultsFound = ({pagination, onTagClick, onOwnerClick, searchState}) => <>
-  <InfoBar>
-    <InfoContainer>
-      <StatsText>
-        <Stats translations={{stats: (num, time) => `found ${num.toLocaleString(`en`)} packages in ${time}ms`}}/>
-      </StatsText>
-      <Sponsors href={`https://www.doppler.com/?utm_campaign=github_repo&utm_medium=referral&utm_content=yarn&utm_source=github`}>
-        Thanks to <span>Doppler</span>, the Universal Secrets Platform, for sponsoring Yarn!
-      </Sponsors>
-    </InfoContainer>
-  </InfoBar>
-  <ResultsContainer>
-    <Hits onTagClick={onTagClick} onOwnerClick={onOwnerClick} searchState={searchState} />
-    <Pagination pagination={pagination} />
-    <SearchFooter>
+const Sponsor = ({name, description, icon, url}) => <>
+  <SponsorContainer href={url} data-tip={`<a style="font-size: 17px;" href="https://opencollective.com/yarnpkg/contribute/gold-tier-24218">Become a Gold sponsor</a>`}>
+    Thanks to <img src={icon} alt={`${name} icon`}/> <span>{name}</span>, the {description}, for sponsoring Yarn!
+  </SponsorContainer>
+</>;
+
+const ResultsFound = ({pagination, onTagClick, onOwnerClick, searchState}) => {
+  // We use a ref to have a new selection on each component creation rather than on each rerender
+  const selectedItem = useRef(Math.trunc(Math.random() * SPONSORS.length));
+
+  return <>
+    <InfoBar>
+      <InfoContainer>
+        <StatsText>
+          <Stats translations={{stats: (num, time) => `found ${num.toLocaleString(`en`)} packages in ${time}ms`}}/>
+        </StatsText>
+        <SponsorCarousel
+          axis={`vertical`}
+          autoPlay={true}
+          infiniteLoop={true}
+          interval={4000}
+          showArrows={false}
+          showStatus={false}
+          showThumbs={false}
+          selectedItem={selectedItem.current}
+        >
+          {SPONSORS.map(sponsor => <Sponsor key={sponsor.name} {...sponsor} />)}
+        </SponsorCarousel>
+        <ReactTooltip
+          place={`right`}
+          offset={{right: 20}}
+          effect={`solid`}
+          backgroundColor={`#ffac33`}
+          delayHide={4000}
+          html={true}
+          clickable={true}
+        />
+      </InfoContainer>
+    </InfoBar>
+    <ResultsContainer>
+      <Hits onTagClick={onTagClick} onOwnerClick={onOwnerClick} searchState={searchState} />
+      <Pagination pagination={pagination} />
+      <SearchFooter>
       Search by Algolia
-      {` - `}
-      <a href={`https://discourse.algolia.com/t/2016-algolia-community-gift-yarn-package-search/319`}>
+        {` - `}
+        <a href={`https://discourse.algolia.com/t/2016-algolia-community-gift-yarn-package-search/319`}>
         read how it works
-      </a>
+        </a>
       .
-    </SearchFooter>
-  </ResultsContainer>
-</>;
+      </SearchFooter>
+    </ResultsContainer>
+  </>;
+};
 
 const NoPackagesFound = styled.div`
   padding: 0 15px;

.yarn/cache/react-responsive-carousel-npm-3.2.22-803c5f85bf-6e6ef7a2c1.zip

@@ -5643,6 +5643,7 @@ __metadata:
     react-icons: ^3.10.0
     react-instantsearch-dom: ^6.6.0
     react-monaco-editor: ^0.36.0
+    react-responsive-carousel: ^3.2.22
     react-scroll-into-view-if-needed: ^2.1.7
     react-select: ^3.1.0
     react-spinners: ^0.8.3
@@ -21708,6 +21709,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-easy-swipe@npm:^0.0.21":
+  version: 0.0.21
+  resolution: "react-easy-swipe@npm:0.0.21"
+  dependencies:
+    prop-types: ^15.5.8
+  checksum: 225f12a9dd410db1c790220867ab1eb58e2ef0a2bdae8541330805fc5b9905e242ab307b019f9aaed76473849a753f363baff03fa8a77e7a1860d7b41dc83ec0
+  languageName: node
+  linkType: hard
+
 "react-error-overlay@npm:^6.0.9":
   version: 6.0.9
   resolution: "react-error-overlay@npm:6.0.9"
@@ -21836,6 +21846,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-responsive-carousel@npm:^3.2.22":
+  version: 3.2.22
+  resolution: "react-responsive-carousel@npm:3.2.22"
+  dependencies:
+    classnames: ^2.2.5
+    prop-types: ^15.5.8
+    react-easy-swipe: ^0.0.21
+  checksum: 6e6ef7a2c140494bb0186af292dd8327ecb8626a3e93fb188923881c760bc996ab84346370066913481d9a4e967555e3c6386046c2aadde69496d1f41ffd5096
+  languageName: node
+  linkType: hard
+
 "react-scroll-into-view-if-needed@npm:^2.1.7":
   version: 2.1.7
   resolution: "react-scroll-into-view-if-needed@npm:2.1.7"