docs(nx-dev): add MinIO icon & adjust nx powerpack cache layout (#28962)

Integrate a new MinIO icon into the UI icons library and Nx Powerpack features. Adjust the layout and styling of the Nx Powerpack features to improve flexibility and responsiveness.

nx-dev/ui-icons/src/index.ts

@@ -79,6 +79,7 @@ export * from './lib/editors/visual-studio-code';
 export * from './lib/monorepo-world';
 export * from './lib/others/amazon-s3';
 export * from './lib/others/linux';
+export * from './lib/others/min-io';
 export * from './lib/others/windows';
 
 // PODCASTS

nx-dev/ui-icons/src/lib/others/min-io.tsx

@@ -0,0 +1,17 @@
+import { FC, SVGProps } from 'react';
+
+/**
+ * Use `#C72E49` for a colored version.
+ */
+export const MinIOIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    role="img"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <title>MinIO</title>
+    <path d="M13.2072.006c-.6216-.0478-1.2.1943-1.6211.582a2.15 2.15 0 0 0-.0938 3.0352l3.4082 3.5507a3.042 3.042 0 0 1-.664 4.6875l-.463.2383V7.2853a15.4198 15.4198 0 0 0-8.0174 10.4862v.0176l6.5487-3.3281v7.621L13.7794 24V13.6817l.8965-.4629a4.4432 4.4432 0 0 0 1.2207-7.0292l-3.371-3.5254a.7489.7489 0 0 1 .037-1.0547.7522.7522 0 0 1 1.0567.0371l.4668.4863-.006.0059 4.0704 4.2441a.0566.0566 0 0 0 .082 0 .06.06 0 0 0 0-.0703l-3.1406-5.1425-.1484.1425.1484-.1445C14.4945.3926 13.8287.0538 13.2072.006Zm-.9024 9.8652v2.9941l-4.1523 2.1484a13.9787 13.9787 0 0 1 2.7676-3.9277 14.1784 14.1784 0 0 1 1.3847-1.2148z" />
+  </svg>
+);

nx-dev/ui-powerpack/src/lib/powerpack-features.tsx

@@ -21,6 +21,7 @@ import {
   AmazonS3Icon,
   AzureDevOpsIcon,
   GoogleCloudIcon,
+  MinIOIcon,
   NxIcon,
 } from '@nx/nx-dev/ui-icons';
 import Link from 'next/link';
@@ -65,7 +66,7 @@ export function PowerpackFeatures(): ReactElement {
                 </ButtonLink>
               </div>
             </div>
-            <div className="hidden w-full lg:block">
+            <div className="hidden w-full xl:block">
               <CustomRemoteCacheAnimation />
             </div>
           </div>
@@ -268,7 +269,7 @@ const Card = forwardRef<
     <div
       ref={ref}
       className={cx(
-        'z-10 flex flex-col items-center justify-between rounded-lg border border-slate-200 bg-white p-2 py-3 shadow-sm dark:border-white/10 dark:bg-slate-950',
+        'z-10 flex items-center gap-2 rounded-md border border-slate-200 bg-white p-2 py-2 shadow-sm dark:border-white/10 dark:bg-slate-950',
         className
       )}
       onMouseEnter={onMouseEnter}
@@ -286,6 +287,7 @@ export function CustomRemoteCacheAnimation(): ReactElement {
   const azureRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const gcpRef = useRef<HTMLDivElement>(null);
+  const minioRef = useRef<HTMLDivElement>(null);
   const networkDriveRef = useRef<HTMLDivElement>(null);
   const nxRef = useRef<HTMLDivElement>(null);
 
@@ -295,9 +297,9 @@ export function CustomRemoteCacheAnimation(): ReactElement {
         containerRef={containerRef}
         fromRef={awsRef}
         toRef={nxRef}
-        curvature={175}
-        startXOffset={-20}
-        endYOffset={30}
+        curvature={-75}
+        startXOffset={-75}
+        endYOffset={0}
         bidirectional={true}
         duration={5}
       />
@@ -307,9 +309,9 @@ export function CustomRemoteCacheAnimation(): ReactElement {
         containerRef={containerRef}
         fromRef={azureRef}
         toRef={nxRef}
-        curvature={175}
-        startXOffset={20}
-        endYOffset={30}
+        curvature={75}
+        startXOffset={-75}
+        endYOffset={0}
         bidirectional={true}
         reverse={true}
         duration={5}
@@ -321,21 +323,33 @@ export function CustomRemoteCacheAnimation(): ReactElement {
         fromRef={gcpRef}
         toRef={nxRef}
         bidirectional={true}
-        curvature={130}
-        startXOffset={20}
-        endXOffset={-20}
+        curvature={75}
+        startXOffset={-75}
+        endYOffset={0}
         reverse={true}
         duration={5}
       />
     ),
+    minio: (
+      <AnimatedCurvedBeam
+        containerRef={containerRef}
+        fromRef={minioRef}
+        toRef={nxRef}
+        curvature={-75}
+        startXOffset={-75}
+        endYOffset={0}
+        bidirectional={true}
+        duration={5}
+      />
+    ),
     networkDrive: (
       <AnimatedCurvedBeam
         containerRef={containerRef}
         fromRef={networkDriveRef}
         toRef={nxRef}
-        curvature={150}
-        startXOffset={-20}
-        endXOffset={20}
+        curvature={10}
+        startXOffset={-75}
+        endXOffset={0}
         bidirectional={true}
         duration={5}
       />
@@ -370,7 +384,7 @@ export function CustomRemoteCacheAnimation(): ReactElement {
 
   return (
     <div className="relative flex h-full w-full" ref={containerRef}>
-      <div className="flex w-full flex-col items-center justify-center gap-24">
+      <div className="grid w-full grid-cols-2 items-center justify-center gap-24">
         <div className="flex w-full justify-center">
           <Card
             ref={nxRef}
@@ -386,7 +400,7 @@ export function CustomRemoteCacheAnimation(): ReactElement {
             />
           </Card>
         </div>
-        <div className="grid w-full grid-cols-4 items-stretch gap-4">
+        <div className="flex w-full flex-col items-stretch gap-4">
           <Card
             ref={awsRef}
             onMouseEnter={() => {
@@ -402,18 +416,39 @@ export function CustomRemoteCacheAnimation(): ReactElement {
               { 'bg-slate-50 dark:bg-slate-800': selected === 'aws' }
             )}
           >
-            <div className="text-center text-xs text-slate-900 dark:text-white">
-              Amazon S3
-            </div>
-            <AmazonS3Icon aria-hidden="true" className="mt-1 size-6" />
-
+            <AmazonS3Icon aria-hidden="true" className="size-4" />
             <Link
               href="/nx-api/powerpack-s3-cache"
               title="Learn how to configure Amazon S3 caching"
-              className="mt-4 text-xs"
+              className="text-center text-xs text-slate-900 dark:text-white"
             >
               <span className="absolute inset-0" />
-              Get started
+              Amazon S3
+            </Link>
+          </Card>
+          <Card
+            ref={minioRef}
+            onMouseEnter={() => {
+              setAutoplay(false);
+              setSelected('minio');
+            }}
+            onMouseLeave={() => {
+              setAutoplay(true);
+              setSelected(null);
+            }}
+            className={cx(
+              'relative transition hover:bg-slate-50 dark:hover:bg-slate-800',
+              { 'bg-slate-50 dark:bg-slate-800': selected === 'minio' }
+            )}
+          >
+            <MinIOIcon aria-hidden="true" className="size-4" />
+            <Link
+              href="/nx-api/powerpack-s3-cache"
+              title="Learn how to configure Amazon S3 caching"
+              className="text-center text-xs text-slate-900 dark:text-white"
+            >
+              <span className="absolute inset-0" />
+              MinIO
             </Link>
           </Card>
           <Card
@@ -431,18 +466,15 @@ export function CustomRemoteCacheAnimation(): ReactElement {
               { 'bg-slate-50 dark:bg-slate-800': selected === 'networkDrive' }
             )}
           >
-            <div className="text-center text-xs text-slate-900 dark:text-white">
-              Network Drive
-            </div>
-            <ServerIcon aria-hidden="true" className="mt-1 size-6" />
+            <ServerIcon aria-hidden="true" className="size-4" />
 
             <Link
               href="/nx-api/powerpack-shared-fs-cache"
               title="Learn how to configure network drive caching"
-              className="mt-4 text-xs"
+              className="text-center text-xs text-slate-900 dark:text-white"
             >
               <span className="absolute inset-0" />
-              Get started
+              Network Drive
             </Link>
           </Card>
           <Card
@@ -460,18 +492,15 @@ export function CustomRemoteCacheAnimation(): ReactElement {
               { 'bg-slate-50 dark:bg-slate-800': selected === 'gcp' }
             )}
           >
-            <div className="text-center text-xs text-slate-900 dark:text-white">
-              GCP
-            </div>
-            <GoogleCloudIcon aria-hidden="true" className="mt-1 size-6" />
+            <GoogleCloudIcon aria-hidden="true" className="size-4" />
 
             <Link
               href="/nx-api/powerpack-gcs-cache"
               title="Learn how to configure Google Storage caching"
-              className="mt-4 text-xs"
+              className="text-center text-xs text-slate-900 dark:text-white"
             >
               <span className="absolute inset-0" />
-              Get started
+              GCP
             </Link>
           </Card>
           <Card
@@ -489,18 +518,15 @@ export function CustomRemoteCacheAnimation(): ReactElement {
               { 'bg-slate-50 dark:bg-slate-800': selected === 'azure' }
             )}
           >
-            <div className="text-center text-xs text-slate-900 dark:text-white">
-              Azure
-            </div>
-            <AzureDevOpsIcon aria-hidden="true" className="mt-1 size-6" />
+            <AzureDevOpsIcon aria-hidden="true" className="size-4" />
 
             <Link
               href="/nx-api/powerpack-azure-cache"
               title="Learn how to configure Azure Blob Storage caching"
-              className="mt-4 text-xs"
+              className="text-center text-xs text-slate-900 dark:text-white"
             >
               <span className="absolute inset-0" />
-              Get started
+              Azure
             </Link>
           </Card>
         </div>