segmentio · catligad · Apr 29, 2022 · Apr 28, 2022 · Apr 28, 2022 · Apr 28, 2022
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
     "evergreen-ui": "^6.9.3",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
@@ -43,6 +44,7 @@
     ]
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.182",
     "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
     "@types/react-router-dom": "^5.3.3",

diff --git a/public/index.html b/public/index.html
@@ -33,7 +33,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Segment Example</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/examples/shared/BaseApp.tsx b/src/examples/shared/BaseApp.tsx
@@ -1,7 +1,6 @@
 import React from "react"
 import Navbar from "./NavBar"
 import { Pane, majorScale } from "evergreen-ui"
-import Header from "./Header"
 import AnalyticsEventSection from "./ExampleSection"
 import analyticsEventSections from "./example-sections/constants"
 import TableOfContents from "./TableOfContents"
@@ -23,24 +22,30 @@ const App: React.FC = () => {
   return (
     <Pane paddingBottom={majorScale(20)}>
       <Navbar />
-      <Pane paddingX={majorScale(30)}>
-        <Header />
-        <TableOfContents onContentClick={scrollIntoRefView} />
-        {analyticsEventSections.map((section, i) => {
-          const { title, description, example: Example, type } = section
+      <Pane display="flex" justifyContent="center" marginTop={majorScale(4)}>
+        <Pane
+          width={majorScale(93)}
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+        >
+          {analyticsEventSections.map((section, i) => {
+            const { title, example: Example, type, specLink } = section
 
-          return (
-            <AnalyticsEventSection
-              key={i}
-              innerRef={getSectionRef(i)}
-              title={title}
-              description={description}
-              type={type}
-            >
-              {Example && <Example />}
-            </AnalyticsEventSection>
-          )
-        })}
+            return (
+              <AnalyticsEventSection
+                key={i}
+                innerRef={getSectionRef(i)}
+                title={title}
+                type={type}
+                specLink={specLink}
+              >
+                {Example && <Example />}
+              </AnalyticsEventSection>
+            )
+          })}
+        </Pane>
+        <TableOfContents onContentClick={scrollIntoRefView} />
       </Pane>
     </Pane>
   )

diff --git a/src/examples/shared/ExampleSection.tsx b/src/examples/shared/ExampleSection.tsx
@@ -1,37 +1,56 @@
 import React from "react"
-import { Pane, Heading, majorScale, Text } from "evergreen-ui"
+import { Pane, Heading, majorScale, Button, ShareIcon } from "evergreen-ui"
 import { Ref } from "react"
 import { AnalyticsEventSection } from "./example-sections/constants"
 
 interface ExampleSectionProps extends AnalyticsEventSection {
   innerRef: Ref<HTMLDivElement>
   children: React.ReactNode
+  specLink?: string
 }
 
 const ExampleSection: React.FC<ExampleSectionProps> = ({
   title,
-  description,
   children,
   innerRef,
   type,
+  specLink,
 }) => {
   const isHeader = type === "header"
+  const isPageHeader = type === "page header"
+
+  let textSize = 700
+  if (isPageHeader) {
+    textSize = 900
+  } else if (isHeader) {
+    textSize = 800
+  }
+
+  const handleClickSpec = () => {
+    window.open(specLink, "_blank")
+  }
   return (
     <Pane
       ref={innerRef}
       display="flex"
       flexDirection="column"
-      borderTop={isHeader ? "1px solid black" : true}
-      paddingY={majorScale(4)}
+      marginBottom={majorScale(5)}
+      width="100%"
     >
-      <Heading size={isHeader ? 800 : 600}>{title}</Heading>
-      <Text
-        marginTop={majorScale(1)}
-        marginBottom={description ? majorScale(3) : majorScale(1)}
-      >
-        {description}
-      </Text>
-      {children}
+      <Pane display="flex">
+        <Heading size={textSize}>{title}</Heading>
+        {specLink && (
+          <Button
+            onClick={handleClickSpec}
+            iconAfter={ShareIcon}
+            appearance="minimal"
+            marginLeft={majorScale(1)}
+          >
+            View full spec
+          </Button>
+        )}
+      </Pane>
+      <Pane>{children}</Pane>
     </Pane>
   )
 }

diff --git a/src/examples/shared/FormField.tsx b/src/examples/shared/FormField.tsx
@@ -6,13 +6,17 @@ interface Props {
   onFormSubmit: (value: string) => void
   buttonText?: string
   formLabel?: string
+  placeholder?: string
+  isCompact?: boolean
 }
 
 const FormField: React.FC<Props> = ({
   onFormSubmit,
   onInputChange = () => null,
   buttonText = "Submit",
   formLabel = "Name",
+  placeholder,
+  isCompact,
 }) => {
   const [formValue, setFormValue] = useState<string>("")
   const [isFormInvalid, setIsFormInvalid] = useState<boolean>(false)
@@ -30,19 +34,25 @@ const FormField: React.FC<Props> = ({
     onFormSubmit(formValue)
   }
   return (
-    <Pane display="flex" alignItems="center">
+    <Pane
+      display="flex"
+      flexDirection={isCompact ? "row" : "column"}
+      alignItems={isCompact ? "center" : undefined}
+    >
       <TextInputField
         width={majorScale(30)}
         isInvalid={isFormInvalid}
         required
         label={formLabel}
         value={formValue}
         onChange={handleInputChange}
+        placeholder={placeholder}
       />
       <Button
         appearance="primary"
         onClick={handleFormSubmit}
-        marginLeft={majorScale(1)}
+        width={majorScale(15)}
+        marginLeft={isCompact ? majorScale(1) : undefined}
       >
         {buttonText}
       </Button>

diff --git a/src/examples/shared/Header.tsx b/src/examples/shared/Header.tsx
@@ -1,17 +1,20 @@
 import React from "react"
-import { Pane, Heading, majorScale, Text } from "evergreen-ui"
+import { Pane, majorScale, Text, Link } from "evergreen-ui"
 
 const Header: React.FC = () => (
-  <Pane
-    display="flex"
-    flexDirection="column"
-    paddingY={majorScale(4)}
-    borderBottom
-  >
-    <Heading size={800}>Getting Started</Heading>
-    <Text marginTop={majorScale(1)}>
-      This page has examples implementing Segment’s Page, Track, Identify, and
-      Group calls.
+  <Pane display="flex" flexDirection="column">
+    <Text marginTop={majorScale(4)}>
+      We’ve implemented dummy data on this site so that when you click different
+      buttons on the page, you’ll be able to see each test event flow through
+      your Segment debugger. In order to make this happen, you’ll need to
+      <Link
+        href="https://github.com/segmentio/react-example#using-this-repository-as-a-segment-source"
+        target="_blank"
+      >
+        {" "}
+        fork the repository{" "}
+      </Link>
+      and add it as a Source in the Segment app.
     </Text>
   </Pane>
 )

diff --git a/src/examples/shared/NavBar.tsx b/src/examples/shared/NavBar.tsx
@@ -1,28 +1,5 @@
 import React from "react"
-import {
-  Pane,
-  Button,
-  GlobeIcon,
-  GitRepoIcon,
-  BookIcon,
-  majorScale,
-  IconButton,
-} from "evergreen-ui"
-
-const NavButton: React.FC<{
-  icon: typeof GlobeIcon | typeof GitRepoIcon
-  href: string
-}> = ({ icon, href }) => (
-  <IconButton
-    icon={icon}
-    outline="none"
-    appearance="minimal"
-    is="a"
-    marginRight={majorScale(1)}
-    href={href}
-    target="blank_"
-  />
-)
+import { Pane, Button, GlobeIcon, majorScale } from "evergreen-ui"
 
 const Navbar: React.FC = () => (
   <Pane
@@ -50,13 +27,6 @@ const Navbar: React.FC = () => (
         Segment
       </Button>
     </Pane>
-    <Pane>
-      <NavButton
-        icon={GitRepoIcon}
-        href="https://github.com/segmentio/react-example"
-      />
-      <NavButton icon={BookIcon} href="https://segment.com/docs/" />
-    </Pane>
   </Pane>
 )
 

diff --git a/src/examples/shared/TableOfContents.tsx b/src/examples/shared/TableOfContents.tsx
@@ -1,33 +1,93 @@
 import React from "react"
-import { Pane, majorScale, Link } from "evergreen-ui"
+import {
+  Pane,
+  majorScale,
+  Link,
+  Heading,
+  GitRepoIcon,
+  ManualIcon,
+  Text,
+  minorScale,
+} from "evergreen-ui"
 import analyticsEventSections from "./example-sections/constants"
 
 const TableOfContents: React.FC<{
   onContentClick: (index: number) => void
 }> = ({ onContentClick }) => {
+  const handleClickExternalLink = (link: string) => {
+    window.open(link, "_blank")
+  }
   return (
-    <Pane
-      display="flex"
-      flexDirection="column"
-      paddingY={majorScale(4)}
-      borderBottom
-    >
-      {analyticsEventSections.map((eventSection, i) => {
-        const { title, type } = eventSection
-        return (
-          <Link
-            key={i}
+    <Pane>
+      <Pane
+        width={majorScale(24)}
+        marginLeft={majorScale(8)}
+        position="sticky"
+        top={majorScale(4)}
+      >
+        <Pane
+          display="flex"
+          flexDirection="column"
+          alignItems="flex-start"
+          justifyContent="center"
+          paddingBottom={majorScale(5)}
+        >
+          <Pane
+            marginBottom={minorScale(3)}
+            display="flex"
+            alignItems="center"
             cursor="pointer"
-            onClick={() => {
-              onContentClick(i)
-            }}
-            marginTop={i === 0 ? undefined : majorScale(1)}
-            marginLeft={type === "header" ? undefined : majorScale(2)}
+            onClick={() =>
+              handleClickExternalLink(
+                "https://github.com/segmentio/react-example"
+              )
+            }
           >
-            {title}
-          </Link>
-        )
-      })}
+            <GitRepoIcon marginRight={minorScale(1)} color="muted" />
+            <Text color="muted">Github Repository</Text>
+          </Pane>
+          <Pane
+            display="flex"
+            alignItems="center"
+            cursor="pointer"
+            onClick={() => handleClickExternalLink("https://segment.com/docs/")}
+          >
+            <ManualIcon marginRight={minorScale(1)} color="muted" />
+            <Text color="muted">Segment Documentation</Text>
+          </Pane>
+        </Pane>
+        <Pane
+          display="flex"
+          flexDirection="column"
+          paddingTop={majorScale(5)}
+          borderTop
+        >
+          <Heading size={400} marginBottom={majorScale(1)}>
+            On this site
+          </Heading>
+          {analyticsEventSections.map((eventSection, i) => {
+            const { title, type } = eventSection
+            return (
+              <Link
+                key={i}
+                cursor="pointer"
+                onClick={() => {
+                  onContentClick(i)
+                }}
+                marginTop={i === 0 ? undefined : majorScale(1)}
+                marginLeft={
+                  type === "header" || type === "page header"
+                    ? undefined
+                    : majorScale(2)
+                }
+                color="neutral"
+              >
+                {title}
+              </Link>
+            )
+          })}
+        </Pane>
+      </Pane>
     </Pane>
   )
 }