Merge pull request #5 from bigcommerce/refactor/page-pattern

Refactor/page pattern
bigcommerce · Sep 19, 2024 · c1754b3 · c1754b3
2 parents 604a806 + b304974
commit c1754b3
Show file tree

Hide file tree

Showing 23 changed files with 3,008 additions and 1,179 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,6 @@
     "publish": "pnpm publish packages/patterns"
   },
   "devDependencies": {
-    "lerna": "^8.1.6"
-  },
-  "dependencies": {}
+    "lerna": "^8.1.7"
+  }
 }
diff --git a/packages/examples-site/package.json b/packages/examples-site/package.json
@@ -1,32 +1,34 @@
 {
-    "name": "examples-site",
-    "version": "0.5.0",
-    "scripts": {
-      "dev": "vite",
-      "build": "vite build",
-      "serve": "vite preview"
-    },
-    "dependencies": {
-      "@bigcommerce/big-design": "^1.0.0",
-      "@bigcommerce/big-design-icons": "^0.24.0",
-      "@bigcommerce/big-design-theme": "^0.19.2",
-      "react": "^18.0.0",
-      "react-code-blocks": "^0.1.6",
-      "react-dom": "^18.0.0",
-      "react-router": "^6.15.0",
-      "react-router-dom": "^6.15.0",
-      "styled-components": "^5.3.11",
-      "bigcommerce-design-patterns": "workspace:*"
-    },
-    "devDependencies": {
-      "@types/react": "^18.0.0",
-      "@types/react-dom": "^18.0.0",
-      "@types/styled-components": "^5.1.26",
-      "typescript": "^4.1.2",
-      "vite": "^5.2.11",
-      "@vitejs/plugin-react": "^4.2.1"
-    },
-    "keywords": [],
-    "description": "@vitejs/create-app v2.4.1"
-  }
-
+  "name": "examples-site",
+  "version": "0.5.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@babel/core": "^7.0.0-0",
+    "@bigcommerce/big-design": "^1.4.1",
+    "@bigcommerce/big-design-icons": "^1.0.3",
+    "@bigcommerce/big-design-patterns": "^1.1.1",
+    "@bigcommerce/big-design-theme": "^1.1.0",
+    "bigcommerce-design-patterns": "workspace:*",
+    "react": "^18.0.0",
+    "react-code-blocks": "^0.1.6",
+    "react-dom": "^18.0.0",
+    "react-is": "^18.3.1",
+    "react-router": "^6.15.0",
+    "react-router-dom": "^6.15.0",
+    "styled-components": "^5.3.11"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^4.1.2",
+    "vite": "^5.2.11"
+  },
+  "keywords": [],
+  "description": "@vitejs/create-app v2.4.1"
+}
diff --git a/packages/examples-site/src/App.tsx b/packages/examples-site/src/App.tsx
@@ -22,7 +22,6 @@ const RouteFC = () => {
     { path: "/page-list", element: <PageList /> },
     { path: "/page-form", element: <PageForm /> },
     { path: "/page-featured-content", element: <PageFeaturedContent /> },
-    { path: "/header", element: <PageHeader /> },
     { path: "/info-illustration", element: <PageInfoIllustration /> },
     { path: "/feature-tag", element: <PageFeatureTags /> },
     { path: "/select-sample", element: <SelectPage /> },

diff --git a/packages/examples-site/src/pages/AnchorNavPage/AnchorNavPage.tsx b/packages/examples-site/src/pages/AnchorNavPage/AnchorNavPage.tsx
@@ -1,36 +1,32 @@
 import React, { FunctionComponent } from "react";
 import { Panel, Text, Box } from "@bigcommerce/big-design";
-import { AnchorNav, Page } from "bigcommerce-design-patterns"
+import { AnchorNav } from "bigcommerce-design-patterns";
 import { useNavigate } from "react-router";
-import { theme } from "@bigcommerce/big-design-theme";
+import { Header, Page } from "@bigcommerce/big-design-patterns";
 
 const PageAnchorNav: FunctionComponent = () => {
   const navigate = useNavigate();
 
-  const backButtonClickHandler = () => {
-    navigate("/");
-  };
-
   return (
     <Page
-      headerTitle="Anchor Navigation Page"
-      headerBackButtonLabel="Back to patterns"
-      onHeaderBackButtonClick={backButtonClickHandler}
-      pageDescription={
-        <>
-          When a page has a lot of content, it can be helpful to provide an
-          anchor navigation to help users quickly
-        </>
+      header={
+        <Header
+          description="When a page has a lot of content, it can be helpful to provide an anchor navigation to help users quickly"
+          title="Anchor Navigation Page"
+          backLink={{
+            text: "Back to patterns",
+            onClick: () => navigate("/"),
+            href: "#",
+          }}
+        />
       }
     >
       <AnchorNav
         elements={[
           {
             label: "First Section",
             element: (
-              <Panel
-                header="First Section"
-              >
+              <Panel header="First Section">
                 <Box style={{ minHeight: "101vh" }}>
                   <Text>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -88,9 +84,7 @@ const PageAnchorNav: FunctionComponent = () => {
           {
             label: "Second Section",
             element: (
-              <Panel
-                header="Second Section"
-              >
+              <Panel header="Second Section">
                 <Box style={{ minHeight: "101vh" }}>
                   <Text>
                     Etiam id velit tincidunt, feugiat arcu quis, venenatis
@@ -148,9 +142,7 @@ const PageAnchorNav: FunctionComponent = () => {
           {
             label: "Third Section",
             element: (
-              <Panel
-                header="Third Section"
-              >
+              <Panel header="Third Section">
                 <Box style={{ minHeight: "101vh" }}>
                   <Text>
                     Nulla porttitor luctus malesuada. Pellentesque est leo,

diff --git a/packages/examples-site/src/pages/CRUDAddEditPage/CRUDAddEditPage.tsx b/packages/examples-site/src/pages/CRUDAddEditPage/CRUDAddEditPage.tsx
@@ -1,8 +1,4 @@
-import React, {
-  FunctionComponent,
-  useEffect,
-  useState,
-} from "react";
+import React, { FunctionComponent, useEffect, useState } from "react";
 import {
   Box,
   Flex,
@@ -21,7 +17,13 @@ import {
   Grid,
   ProgressCircle,
 } from "@bigcommerce/big-design";
-import { Page, Scroller } from "bigcommerce-design-patterns";
+import { Scroller } from "bigcommerce-design-patterns";
+import {
+  ActionBar,
+  ActionBarProps,
+  Header,
+  Page,
+} from "@bigcommerce/big-design-patterns";
 import { useNavigate } from "react-router";
 import { useLocation } from "react-router-dom";
 import { theme } from "@bigcommerce/big-design-theme";
@@ -195,7 +197,8 @@ const CRUDAddEditPage: FunctionComponent = () => {
 
     const fv = nameIsValid && priceIsValid && filesAreValid;
 
-    if (!fv) { // if form is not valid
+    if (!fv) {
+      // if form is not valid
       // set the form error messages
       const errorMessages: DescriptionLink[] = [
         { text: "Please correct the form errors before submitting." },
@@ -229,7 +232,8 @@ const CRUDAddEditPage: FunctionComponent = () => {
       }
 
       setFormErrorMessages(errorMessages);
-    } else { // if form is valid
+    } else {
+      // if form is valid
       // clear form error messages
       setFormErrorMessages([]);
     }
@@ -243,7 +247,6 @@ const CRUDAddEditPage: FunctionComponent = () => {
 
   // store item through service
   const storeItem = async () => {
-
     // let's get the store method based on the page type
     const storeMethod = isEditPage ? updateProduct : storeProduct;
 
@@ -327,35 +330,37 @@ const CRUDAddEditPage: FunctionComponent = () => {
   };
 
   // Action bar buttons with event handlers for cancel and save operations.
-  const ActionBarButtons = (
-    <>
-      <Button
-        variant="secondary"
-        onClick={backToListingHandler}
-        disabled={isSubmitting}
-        mobileWidth="auto"
-      >
-        Cancel
-      </Button>
-      <Button
-        mobileWidth="auto"
-        variant="primary"
-        onClick={handleSubmit}
-        disabled={isSubmitting}
-        isLoading={isSubmitting}
-      >
-        Save
-      </Button>
-    </>
-  );
+  const actionBarProps: ActionBarProps = {
+    actions: [
+      {
+        text: "Save",
+        onClick: handleSubmit,
+        disabled: isSubmitting,
+        isLoading: isSubmitting,
+      },
+      {
+        text: "Cancel",
+        onClick: backToListingHandler,
+        disabled: isSubmitting,
+        variant: "secondary",
+      },
+    ],
+  };
 
   return (
     <Page
-      headerTitle={isEditPage ? name : "Add item"}
-      headerBackButtonLabel="Back to items list"
-      onHeaderBackButtonClick={backToListingHandler}
-      pageDescription={<>Description of what's going to be added.</>}
-      actionBar={ActionBarButtons}
+      header={
+        <Header
+          title={isEditPage ? name : "Add item"}
+          description={`Description of what's going to be added.`}
+          backLink={{
+            text: "Back to items list",
+            onClick: () => backToListingHandler(),
+            href: "#",
+          }}
+        />
+      }
+      actionBar={<ActionBar {...actionBarProps} />}
     >
       <Flex
         flexDirection="column"