From cba2fddd65a98f10fc1cf317bbf0a244305bfd2d Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Wed, 18 Sep 2024 13:26:21 -0400
Subject: [PATCH] feat(nx-dev): clean up enterprise section

Removed temporary components declared on the enterprise library to use the common ones.
---
 .../src/lib/enterprise-addons.tsx             |   3 +-
 nx-dev/ui-enterprise/src/lib/hero.tsx         |   3 +-
 .../src/lib/scale-ci-and-teams.tsx            |  59 -------
 .../src/lib/scale-your-people.tsx             |  25 +--
 nx-dev/ui-enterprise/src/lib/security.tsx     |   2 +-
 .../ui-enterprise/src/lib/solve-your-ci.tsx   |   2 +-
 nx-dev/ui-enterprise/src/lib/statistics.tsx   | 150 ------------------
 .../ui-enterprise/src/lib/temp/typography.tsx |  59 -------
 8 files changed, 5 insertions(+), 298 deletions(-)
 delete mode 100644 nx-dev/ui-enterprise/src/lib/scale-ci-and-teams.tsx
 delete mode 100644 nx-dev/ui-enterprise/src/lib/statistics.tsx
 delete mode 100644 nx-dev/ui-enterprise/src/lib/temp/typography.tsx

diff --git a/nx-dev/ui-enterprise/src/lib/enterprise-addons.tsx b/nx-dev/ui-enterprise/src/lib/enterprise-addons.tsx
index 22f9bd1e79ed7..7fde9872ff399 100644
--- a/nx-dev/ui-enterprise/src/lib/enterprise-addons.tsx
+++ b/nx-dev/ui-enterprise/src/lib/enterprise-addons.tsx
@@ -1,10 +1,9 @@
-import { SectionHeading } from './temp/typography';
 import {
   BoltIcon,
   ChevronDoubleRightIcon,
   UsersIcon,
-  WrenchIcon,
 } from '@heroicons/react/24/outline';
+import { SectionHeading } from '@nx/nx-dev/ui-common';
 
 export function EnterpriseAddons(): JSX.Element {
   return (
diff --git a/nx-dev/ui-enterprise/src/lib/hero.tsx b/nx-dev/ui-enterprise/src/lib/hero.tsx
index b83b0089e64ca..530caff564cee 100644
--- a/nx-dev/ui-enterprise/src/lib/hero.tsx
+++ b/nx-dev/ui-enterprise/src/lib/hero.tsx
@@ -1,5 +1,4 @@
-import { SectionHeading } from './temp/typography';
-import { ButtonLink } from '@nx/nx-dev/ui-common';
+import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
 import Link from 'next/link';
 
 export function Hero(): JSX.Element {
diff --git a/nx-dev/ui-enterprise/src/lib/scale-ci-and-teams.tsx b/nx-dev/ui-enterprise/src/lib/scale-ci-and-teams.tsx
deleted file mode 100644
index 12d332d8fcc35..0000000000000
--- a/nx-dev/ui-enterprise/src/lib/scale-ci-and-teams.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { BoltIcon } from '@heroicons/react/24/outline';
-import { SectionHeading } from '@nx/nx-dev/ui-common';
-import { NxAgentsIcon, NxReplayIcon } from '@nx/nx-dev/ui-icons';
-
-const features = [
-  {
-    name: 'Cache with Nx Replay',
-    description:
-      'Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.',
-    icon: NxReplayIcon,
-  },
-  {
-    name: 'Distribution with Nx Agents',
-    description:
-      'Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.',
-    icon: NxAgentsIcon,
-  },
-  {
-    name: 'Split tasks with Atomizer',
-    description:
-      'Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.',
-    icon: BoltIcon,
-  },
-];
-
-export function ScaleCiAndTeams(): JSX.Element {
-  return (
-    <div className="mx-auto max-w-7xl px-6 lg:px-8">
-      <div className="max-w-3xl">
-        <SectionHeading as="h2" variant="display" id="scale-ci-and-teams">
-          Scale CI & teams
-        </SectionHeading>
-        <p className="mt-6 text-lg leading-8">
-          Quis tellus eget adipiscing convallis sit sit eget aliquet quis.
-          Suspendisse eget egestas a elementum pulvinar et feugiat blandit at.
-          In mi viverra elit nunc.
-        </p>
-      </div>
-      <div className="mx-auto mt-16 max-w-2xl lg:max-w-none">
-        <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
-          {features.map((feature) => (
-            <div key={feature.name} className="flex flex-col">
-              <dt className="flex items-center gap-x-3 text-base font-semibold leading-7">
-                <feature.icon
-                  className="h-5 w-5 flex-none"
-                  aria-hidden="true"
-                />
-                {feature.name}
-              </dt>
-              <dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-slate-500">
-                <p className="flex-auto">{feature.description}</p>
-              </dd>
-            </div>
-          ))}
-        </dl>
-      </div>
-    </div>
-  );
-}
diff --git a/nx-dev/ui-enterprise/src/lib/scale-your-people.tsx b/nx-dev/ui-enterprise/src/lib/scale-your-people.tsx
index 235e6fb3ffdd7..a20f61ce61c26 100644
--- a/nx-dev/ui-enterprise/src/lib/scale-your-people.tsx
+++ b/nx-dev/ui-enterprise/src/lib/scale-your-people.tsx
@@ -3,11 +3,10 @@ import {
   Cog6ToothIcon,
   CubeTransparentIcon,
   IdentificationIcon,
-  PhotoIcon,
   SquaresPlusIcon,
   UserGroupIcon,
 } from '@heroicons/react/24/outline';
-import { SectionHeading } from './temp/typography';
+import { SectionHeading } from '@nx/nx-dev/ui-common';
 
 export function ScaleYourPeople(): JSX.Element {
   return (
@@ -250,28 +249,6 @@ export function ScaleYourPeople(): JSX.Element {
             </div>
           </div>
         </div>
-        {/*<div className="mt-16">*/}
-        {/*  <picture className="block py-12">*/}
-        {/*    <img*/}
-        {/*      src="/images/enterprise/graphs.jpg"*/}
-        {/*      alt="Product screenshot"*/}
-        {/*      className="mx-auto max-w-full rounded-xl shadow-xl ring-1 ring-slate-400/10"*/}
-        {/*      width={2500}*/}
-        {/*      height={1616}*/}
-        {/*    />*/}
-        {/*  </picture>*/}
-        {/*  <div className="mx-auto mt-4 max-w-2xl">*/}
-        {/*    <h4 className="relative text-base font-medium capitalize leading-6 text-slate-900 dark:text-slate-100">*/}
-        {/*      Crystal clear organizations*/}
-        {/*    </h4>*/}
-        {/*    <p>*/}
-        {/*      Regardless of how many Nx Workspaces your company has, Nx Enterprise*/}
-        {/*      can give you the visibility you need to understand what they have in*/}
-        {/*      common, how they relate, and how they differ. Developers are no*/}
-        {/*      longer relegated to contributing to one Nx Workspace.*/}
-        {/*    </p>*/}
-        {/*  </div>*/}
-        {/*</div>*/}
       </div>
     </section>
   );
diff --git a/nx-dev/ui-enterprise/src/lib/security.tsx b/nx-dev/ui-enterprise/src/lib/security.tsx
index 0a820a56394f9..29d5e4460fe3d 100644
--- a/nx-dev/ui-enterprise/src/lib/security.tsx
+++ b/nx-dev/ui-enterprise/src/lib/security.tsx
@@ -1,4 +1,4 @@
-import { SectionHeading } from './temp/typography';
+import { SectionHeading } from '@nx/nx-dev/ui-common';
 
 export function Security(): JSX.Element {
   return (
diff --git a/nx-dev/ui-enterprise/src/lib/solve-your-ci.tsx b/nx-dev/ui-enterprise/src/lib/solve-your-ci.tsx
index 1240510cc953e..8d1f91cb66713 100644
--- a/nx-dev/ui-enterprise/src/lib/solve-your-ci.tsx
+++ b/nx-dev/ui-enterprise/src/lib/solve-your-ci.tsx
@@ -12,9 +12,9 @@ import {
 } from '@heroicons/react/24/outline';
 import { animate, motion, useMotionValue, useTransform } from 'framer-motion';
 import { useEffect } from 'react';
-import { SectionHeading } from './temp/typography';
 import { BentoGrid, BentoGridItem } from './bento-grid';
 import { cx } from '@nx/nx-dev/ui-primitives';
+import { SectionHeading } from '@nx/nx-dev/ui-common';
 
 export function SolveYourCi(): JSX.Element {
   return (
diff --git a/nx-dev/ui-enterprise/src/lib/statistics.tsx b/nx-dev/ui-enterprise/src/lib/statistics.tsx
deleted file mode 100644
index 05a921930a188..0000000000000
--- a/nx-dev/ui-enterprise/src/lib/statistics.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { motion } from 'framer-motion';
-import { useEffect, useState } from 'react';
-import { SectionHeading } from './temp/typography';
-
-/**
- * Calculate the total number of years worth of compute.
- *
- * @param {number} millis - The total number of seconds.
- * @return {number} The total number of years.
- */
-function getTotalYears(millis: number): number {
-  /**
-   * The number of millis in a year is approximately:
-   * 86 400 000 millis/day * 365.25 days/year ≈ 31 557 600 000 seconds/year.
-   */
-  const yearMillis = Number(31557600000);
-  return Math.round(millis / yearMillis);
-}
-
-/**
- * Fetches the time saved from a remote API.
- *
- * @returns {Promise} A promise that resolves to an object containing the time saved data.
- * @returns {Date} The date the time saved data was retrieved.
- * @returns {number} The time saved in the last 7 days.
- * @returns {number} The time saved in the last 30 days.
- * @returns {number} The time's saved since the start.
- */
-function fetchTimeSaved(): Promise<{
-  date: Date;
-  last7days: number;
-  last30days: number;
-  sinceStart: number;
-}> {
-  const apiUrl = 'https://cloud.nx.app/time-saved';
-
-  return fetch(apiUrl)
-    .then((response) => response.json())
-    .catch(() => ({
-      date: new Date(),
-      last7days: Math.round(Math.random() * 1000000000),
-      last30days: Math.round(Math.random() * 100000000000),
-      sinceStart: Math.round(Math.random() * 10000000000000),
-    }));
-}
-
-const stats = [
-  {
-    id: 1,
-    name: 'Developers using Nx',
-    value: 2,
-    suffix: 'M+',
-  },
-  {
-    id: 3,
-    name: 'Active workspaces',
-    value: '4k',
-    suffix: '+',
-  },
-  { id: 2, name: 'Compute time saved', value: 800, suffix: '+ years' },
-  { id: 4, name: 'Runs daily', value: 100, suffix: 'k+' },
-];
-
-export function Statistics(): JSX.Element {
-  const variants = {
-    hidden: {
-      opacity: 0,
-      transition: {
-        when: 'afterChildren',
-      },
-    },
-    visible: (i: number) => ({
-      opacity: 1,
-      transition: {
-        delay: i || 0,
-      },
-    }),
-  };
-  const itemVariants = {
-    visible: (i: number) => ({
-      opacity: 1,
-      y: 0,
-      transition: {
-        delay: i * 0.25,
-        duration: 0.65,
-        ease: 'easeOut',
-        when: 'beforeChildren',
-        staggerChildren: 0.3,
-      },
-    }),
-    hidden: {
-      opacity: 0,
-      y: 4,
-      transition: {
-        when: 'afterChildren',
-      },
-    },
-  };
-  const [timeSaved, setTimeSaved] = useState<number>(800);
-
-  useEffect(() => {
-    let ignore = false;
-    fetchTimeSaved().then((data) => {
-      if (!ignore) {
-        setTimeSaved(getTotalYears(data.sinceStart));
-      }
-    });
-    return () => {
-      ignore = true;
-    };
-  }, []);
-
-  return (
-    <section className="mx-auto max-w-7xl px-6 lg:px-8">
-      <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
-        <SectionHeading as="h2" variant="title" id="statistics">
-          Trusted by startups and Fortune 500 companies
-        </SectionHeading>
-        {/*<SectionHeading as="p" variant="subtitle" className="mt-6">*/}
-        {/*  Nx Cloud provides plans for open source projects, startups, and large*/}
-        {/*  enterprises.*/}
-        {/*</SectionHeading>*/}
-      </div>
-      <motion.dl
-        initial="hidden"
-        variants={variants}
-        whileInView="visible"
-        viewport={{ once: true }}
-        className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-10 text-slate-950 sm:mt-20 sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-4 dark:text-white"
-      >
-        {stats.map((stat, idx) => (
-          <motion.div
-            key={`statistic-${idx}`}
-            custom={idx}
-            variants={itemVariants}
-            className="flex flex-col gap-y-3 border-l border-black/10 pl-6 dark:border-white/10"
-          >
-            <dt className="text-sm leading-6 text-slate-600 dark:text-slate-500">
-              {stat.name}
-            </dt>
-            <dd className="order-first text-3xl font-semibold tracking-tight">
-              {stat.name === 'Compute time saved' ? timeSaved : stat.value}
-              {stat.suffix}
-            </dd>
-          </motion.div>
-        ))}
-      </motion.dl>
-    </section>
-  );
-}
diff --git a/nx-dev/ui-enterprise/src/lib/temp/typography.tsx b/nx-dev/ui-enterprise/src/lib/temp/typography.tsx
deleted file mode 100644
index 8006bca76672d..0000000000000
--- a/nx-dev/ui-enterprise/src/lib/temp/typography.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { cx } from '@nx/nx-dev/ui-primitives';
-import { ElementType, ReactNode } from 'react';
-
-type AllowedVariants = 'title' | 'display' | 'subtitle';
-
-type Headings = {
-  as: ElementType;
-  className?: string;
-  children: ReactNode | ReactNode[];
-  id?: string;
-  variant: AllowedVariants;
-};
-
-type Description = {
-  as: ElementType;
-  className?: string;
-  children: ReactNode | ReactNode[];
-  id?: string;
-};
-
-const variants: Record<AllowedVariants, string> = {
-  title:
-    'text-3xl font-medium tracking-tight text-slate-950 dark:text-white sm:text-5xl',
-  display:
-    'text-4xl font-medium tracking-tight text-slate-950 dark:text-white sm:text-7xl',
-  subtitle: 'text-lg leading-8 text-slate-700 dark:text-slate-300 sm:text-2xl',
-};
-
-export function SectionHeading({
-  as = 'div',
-  children,
-  className,
-  variant,
-  ...rest
-}: Headings): JSX.Element {
-  const Tag = as;
-  return (
-    <Tag className={cx(variants[variant], className)} {...rest}>
-      {children}
-    </Tag>
-  );
-}
-
-export function SectionDescription({
-  as = 'div',
-  children,
-  className,
-  ...rest
-}: Description): JSX.Element {
-  const Tag = as;
-  return (
-    <Tag
-      className={cx('text-slate-700 dark:text-slate-400', className)}
-      {...rest}
-    >
-      {children}
-    </Tag>
-  );
-}