feat(website): ai experience (#3994)

* chore(website): create experiences, move nav from patterns, create ai exp

* chore: address pr feedback

* chore: add example to top of page

* chore: update website tests to include new experiences bucket

* chore: more pr feedback

* chore: chat composer container max height and side panel story

* chore: sarah pr feedback

* chore: remove ai chat log paddingX changeset from this pr

* chore: add redirect from nav pattern to experience

.changeset/chatty-garlics-rest.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/chat-composer": patch
+"@twilio-paste/core": patch
+---
+
+[Chat Composer] Increase max-height of ChatComposerContainer so that it's greater than the max-height of ChatComposer and doesn't create a vertical scrollbar when the default max-height is reached.

cypress/integration/sitemap-vrt/constants.ts

@@ -279,6 +279,9 @@ export const SITEMAP = [
   "/introduction/for-engineers/quickstart/",
   "/introduction/working-with-us/",
   "/new",
+  "/experiences",
+  "/experiences/artificial-intelligence/",
+  "/experiences/navigation/",
   "/page-templates/",
   "/page-templates/object-details/",
   "/page-templates/objects-list/",
@@ -291,7 +294,6 @@ export const SITEMAP = [
   "/patterns/",
   "/patterns/empty-state/",
   "/patterns/error-state/",
-  "/patterns/navigation/",
   "/patterns/notifications-and-feedback/",
   "/patterns/privacy/",
   "/patterns/status/",

packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx

@@ -42,7 +42,7 @@ export interface ChatComposerContainerProps {
 }
 
 export const ChatComposerContainer = React.forwardRef<HTMLDivElement, ChatComposerContainerProps>(
-  ({ variant = "default", element = "CHAT_COMPOSER_CONTAINER", maxHeight = "size30", children, ...props }, ref) => {
+  ({ variant = "default", element = "CHAT_COMPOSER_CONTAINER", maxHeight = "size40", children, ...props }, ref) => {
     const [isDisabled, setIsDisabled] = React.useState(false);
 
     return (

packages/paste-website/next.config.mjs

@@ -63,6 +63,7 @@ const nextConfig = {
         permanent: true,
       },
       { source: "/articles", destination: "/blog", permanent: true },
+      { source: "/patterns/navigation", destination: "/experiences/navigation", permanent: true },
     ];
   },
   // https://nextjs.org/docs/pages/api-reference/next-config-js/headers

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

@@ -29,7 +29,7 @@ const getCategory = (pkgPath) => {
   return "";
 };
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, consistent-return
 const getAllPatterns = async () => {
   try {
     const patterns = await systemTable
@@ -47,7 +47,7 @@ const getAllPatterns = async () => {
   }
 };
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, consistent-return
 const getAllPageTemplates = async () => {
   try {
     const patterns = await systemTable
@@ -65,7 +65,24 @@ const getAllPageTemplates = async () => {
   }
 };
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, consistent-return
+const getAllExperiences = async () => {
+  try {
+    const experiences = await systemTable
+      .select({
+        filterByFormula: 'AND({Component Category} = "experience", Documentation, status, status != "in development")',
+        sort: [{ field: "Feature" }],
+        fields: ["Feature", "status"],
+      })
+      .all();
+    return experiences.map(({ fields }) => fields);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log("getAllExperiences fetch error:", error);
+  }
+};
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 const getAllPackages = async () => {
   try {
     const root = path.resolve(process.cwd(), "../");
@@ -81,6 +98,7 @@ const getAllPackages = async () => {
       allPasteThemePackage: [],
       allPastePattern: [],
       allPastePageTemplate: [],
+      allPasteExperience: [],
     };
 
     packages.forEach(async (packageJson) => {
@@ -99,6 +117,9 @@ const getAllPackages = async () => {
     const pageTemplates = await getAllPageTemplates();
     data.allPastePageTemplate = [...pageTemplates];
 
+    const experiences = await getAllExperiences();
+    data.allPasteExperience = [...experiences];
+
     await fs.mkdir(dataPath, { recursive: true }, (err) => {
       if (err) {
         // eslint-disable-next-line no-console

packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx

@@ -60,8 +60,14 @@ const SiteSidebarNavigation = (): JSX.Element => {
   const pathname = useLocationPathname();
 
   // take airtable feature data and mutate it into navigation data
-  const { allPasteComponent, allPasteLayout, allPastePrimitive, allPastePattern, allPastePageTemplate } =
-    getNormalizedNavigationData(navigationData);
+  const {
+    allPasteComponent,
+    allPasteLayout,
+    allPastePrimitive,
+    allPastePattern,
+    allPastePageTemplate,
+    allPasteExperience,
+  } = getNormalizedNavigationData(navigationData);
 
   const allComponentSidebarItems = [...allPasteComponent, ...allPasteLayout];
   const filteredComponentSidebarItems = allComponentSidebarItems.sort(alphabetizeComponents);
@@ -201,6 +207,14 @@ const SiteSidebarNavigation = (): JSX.Element => {
           </SidebarAnchor>
         ))}
       </NavigationDisclosure>
+      <NavigationDisclosure buttonText="Experiences" categoryRoute={SidebarCategoryRoutes.EXPERIENCES}>
+        <SidebarAnchor href={SidebarCategoryRoutes.EXPERIENCES}>Overview</SidebarAnchor>
+        {allPasteExperience.map(({ name, slug }: { [key: string]: string }) => (
+          <SidebarAnchor href={`${SidebarCategoryRoutes.EXPERIENCES}/${slug}`} key={slug}>
+            {name}
+          </SidebarAnchor>
+        ))}
+      </NavigationDisclosure>
       <SidebarNavigationSeparator />
       <NavigationDisclosure
         buttonText="Components"

packages/paste-website/src/pages/components/switch/index.mdx

@@ -71,7 +71,7 @@ Use a [Checkbox](/components/checkbox) to present a user with a single binary ch
   source="Toggle-Switch Guidelines"
   sourceUrl="https://www.nngroup.com/articles/toggle-switch-guidelines/"
 >
-  [U]sers expect the same immediate results from a digital toggle as they do from their real-world counterparts (e.g.,
+  Users expect the same immediate results from a digital toggle as they do from their real-world counterparts (e.g.,
   light switches). Immediate results are a facet of toggle switches that grants users the freedom and control to update
   their preferences as needed.
 </Blockquote>