miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Benjamin Cabanes 2024-11-15 14:01:34 -05:00 committed by GitHub
parent fc2016cc8a
commit 090cadf866
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 85 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
nx-dev/ui-icons/src/index.ts
View File

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

17
nx-dev/ui-icons/src/lib/others/min-io.tsx Normal file
View File

@ -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>
);

108
nx-dev/ui-powerpack/src/lib/powerpack-features.tsx
View File

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