chore(website): next round of website redesign updates (#3789)

* chore: finish component primitive editor

* chore: add one more try catch to website fetch script

* chore: design efficiency section plus other minor improvements

* chore: simons theme changer icon titles

* chore: 2 more improvements

* chore: templates section

* chore: minor responsiveness improvements

* chore: make themeable section responsive

* chore: themeable update

* chore: add all links

* fix: footer content positioning when image first is set hidden

* chore: cut strange screen-edge doodle

* chore: remove unused import

* chore: fix forTwilioCustomers section fix

* chore: design effeciency section cleanup

* chore: animate and improve ColorGradient component

* chore: improve responsiveness of Templates and Design Efficiency

* fix: move /new homepage to /

* fix: theme on homepage codeblocks

---------

Co-authored-by: TheSisb <[email protected]>

packages/paste-website/scripts/fetch-data.mjs

@@ -67,45 +67,50 @@ const getAllPageTemplates = async () => {
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
 const getAllPackages = async () => {
-  const root = path.resolve(process.cwd(), "../");
-  const packages = await globby(["**/package.json", "!**/node_modules", "!**/core-bundle/**"], {
-    cwd: root,
-  });
-  const data = {
-    allPasteComponent: [],
-    allPasteDesignTokensPackage: [],
-    allPasteLayout: [],
-    allPasteLibraries: [],
-    allPastePrimitive: [],
-    allPasteThemePackage: [],
-    allPastePattern: [],
-    allPastePageTemplate: [],
-  };
-
-  packages.forEach(async (packageJson) => {
-    const category = getCategory(packageJson);
-    if (category) {
-      // eslint-disable-next-line unicorn/prefer-json-parse-buffer
-      const fileContents = await fs.readFile(`${root}/${packageJson}`, "utf8");
-      const { name, status, version, description } = JSON.parse(fileContents);
-      data[category].push({ name, status: status || null, version, description });
-    }
-  });
-
-  const patterns = await getAllPatterns();
-  data.allPastePattern = [...patterns];
-
-  const pageTemplates = await getAllPageTemplates();
-  data.allPastePageTemplate = [...pageTemplates];
-
-  await fs.mkdir(dataPath, { recursive: true }, (err) => {
-    if (err) {
-      // eslint-disable-next-line no-console
-      console.log(err);
-    }
-  });
-
-  await fs.writeFile(path.join(dataPath, "package-data.json"), JSON.stringify(data, null, 2), "utf8");
+  try {
+    const root = path.resolve(process.cwd(), "../");
+    const packages = await globby(["**/package.json", "!**/node_modules", "!**/core-bundle/**"], {
+      cwd: root,
+    });
+    const data = {
+      allPasteComponent: [],
+      allPasteDesignTokensPackage: [],
+      allPasteLayout: [],
+      allPasteLibraries: [],
+      allPastePrimitive: [],
+      allPasteThemePackage: [],
+      allPastePattern: [],
+      allPastePageTemplate: [],
+    };
+
+    packages.forEach(async (packageJson) => {
+      const category = getCategory(packageJson);
+      if (category) {
+        // eslint-disable-next-line unicorn/prefer-json-parse-buffer
+        const fileContents = await fs.readFile(`${root}/${packageJson}`, "utf8");
+        const { name, status, version, description } = JSON.parse(fileContents);
+        data[category].push({ name, status: status || null, version, description });
+      }
+    });
+
+    const patterns = await getAllPatterns();
+    data.allPastePattern = [...patterns];
+
+    const pageTemplates = await getAllPageTemplates();
+    data.allPastePageTemplate = [...pageTemplates];
+
+    await fs.mkdir(dataPath, { recursive: true }, (err) => {
+      if (err) {
+        // eslint-disable-next-line no-console
+        console.log(err);
+      }
+    });
+
+    await fs.writeFile(path.join(dataPath, "package-data.json"), JSON.stringify(data, null, 2), "utf8");
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log("getAllPatterns fetch error:", error);
+  }
 };
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type

packages/paste-website/src/components/color-swatch/ColorGradient.tsx

@@ -1,13 +1,17 @@
+import { animated, useSpring } from "@twilio-paste/animation-library";
 import { Box } from "@twilio-paste/box";
 import DarkRawTokens from "@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.raw.json";
 import DefaultRawTokens from "@twilio-paste/design-tokens/dist/themes/twilio/tokens.raw.json";
 import { styled, themeGet } from "@twilio-paste/styling-library";
 import { useUID } from "@twilio-paste/uid-library";
 import * as React from "react";
+import VisibilitySensor from "react-visibility-sensor";
 
 import { useDarkModeContext } from "../../context/DarkModeContext";
 import type { Themes } from "../../types";
 
+const AnimatedBox = animated(Box);
+
 type ThemeShape = Record<string, Record<string, string | number>>;
 
 const aliasPrefixes = [
@@ -40,22 +44,31 @@ export const getAliasValuesFromPrefix = (prefix: string, theme: Themes): string[
 
 // Need to use styled div because the alias names aren't valid backgroundColors on Box
 const StyledGradientSwatch = styled.div<{ backgroundColor: string }>`
-  background-color: ${(props) => props.backgroundColor};
+  background-color: ${(props: any) => props.backgroundColor};
   height: ${themeGet("space.space60")};
 `;
 
-// Need to use styled div because Box doesn't support CSS grid
-const StyledGrid = styled.div`
-  display: grid;
-  column-gap: ${themeGet("space.space40")};
-  margin-bottom: ${themeGet("space.space70")};
-  grid-template-columns: repeat(7, 1fr);
+const StyledGradientSwatchTall = styled.div<{ backgroundColor: string }>`
+background-color: ${(props: any) => props.backgroundColor};
+height: ${themeGet("space.space120")};
 `;
 
-export const ColorGradient: React.FC<React.PropsWithChildren<{ aliasPrefix: string }>> = ({ aliasPrefix }) => {
+export const ColorGradient: React.FC<React.PropsWithChildren<{ aliasPrefix: string; makeTall?: boolean }>> = ({
+  aliasPrefix,
+  makeTall = "false",
+}) => {
   const { theme } = useDarkModeContext();
   const aliasValues = getAliasValuesFromPrefix(aliasPrefix, theme);
 
+  if (makeTall) {
+    return (
+      <Box borderRadius="borderRadius20" overflow="hidden">
+        {aliasValues.map((aliasValue) => (
+          <StyledGradientSwatchTall backgroundColor={aliasValue} key={useUID()} />
+        ))}
+      </Box>
+    );
+  }
   return (
     <Box borderRadius="borderRadius20" overflow="hidden">
       {aliasValues.map((aliasValue) => (
@@ -65,12 +78,43 @@ export const ColorGradient: React.FC<React.PropsWithChildren<{ aliasPrefix: stri
   );
 };
 
-export const ColorGradientRainbow = (): JSX.Element => {
+export const ColorGradientRainbow: React.FC<{ omitGrays?: boolean }> = ({ omitGrays = false }): JSX.Element => {
+  const [show, setShow] = React.useState(false);
+
+  function handleVisibilityChange(isVisible: boolean): void {
+    if (!show) {
+      setShow(isVisible);
+    }
+  }
+
+  const styles = useSpring({
+    opacity: show ? 1 : 0.1,
+  });
+
+  if (omitGrays)
+    return (
+      <VisibilitySensor onChange={handleVisibilityChange} partialVisibility offset={{ bottom: 150 }}>
+        <AnimatedBox
+          display="grid"
+          columnGap="space40"
+          marginBottom="space70"
+          gridTemplateColumns="repeat(6, 1fr)"
+          gridTemplateRows="max-content"
+          style={styles}
+        >
+          {aliasPrefixes
+            .filter((prefix) => prefix !== "palette-gray")
+            .map((prefix) => (
+              <ColorGradient makeTall aliasPrefix={prefix} key={useUID()} />
+            ))}
+        </AnimatedBox>
+      </VisibilitySensor>
+    );
   return (
-    <StyledGrid>
+    <Box display="grid" columnGap="space40" marginBottom="space70" gridTemplateColumns="repeat(7, 1fr)">
       {aliasPrefixes.map((prefix) => (
         <ColorGradient aliasPrefix={prefix} key={useUID()} />
       ))}
-    </StyledGrid>
+    </Box>
   );
 };