[docs] Add a progress tracker for EAS Tutorial (#27971)

# Why

<!--
Please describe the motivation for this PR, and link to relevant GitHub
issues, forums posts, or feature requests.
-->

Fixes ENG-11468

Add a Progress Tracker component to track progress when a chapter is
completed in the EAS Tutorial. It:
- shows a success message when the user reaches the end of the chapter
with the summary of that chapter
- allows the user to mark a chapter read/unread
- syncs the state of chapter (read/unread) with the sidebar
- adds and updates the sidebar circular progress on reaching tutorial
complition
- allows user to reset the progress on reaching tutorial complition

Also, handles Google Analytics 4 event to send a custom event when all
chapters in a tutorial are completed. The event added is called
`eas_tutorial`.

# Test Plan

To test it, see the **Summary** section of a chapter. For example:
http://docs.expo.dev-pr-27971.s3-website-us-east-1.amazonaws.com/tutorial/eas/configure-development-build/#summary.

## Preview

### Saving Progress Tracker for a chapter



https://github.com/expo/expo/assets/10234615/ced38210-e4ea-4c6e-b7d9-578f1a4ee5db



### Completed Progress Tracker and reset tutorial functionality



https://github.com/expo/expo/assets/10234615/3d671c8b-6f79-4c5c-a166-b88a03f6afbd






<!--
Please describe how you tested this change and how a reviewer could
reproduce your test, especially if this PR does not include automated
tests! If possible, please also provide terminal output and/or
screenshots demonstrating your test/reproduction.
-->


# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).

docs/pages/_app.tsx

@@ -10,6 +10,7 @@ import { useNProgress } from '~/common/use-nprogress';
 import DocumentationElements from '~/components/page-higher-order/DocumentationElements';
 import { AnalyticsProvider } from '~/providers/Analytics';
 import { CodeBlockSettingsProvider } from '~/providers/CodeBlockSettingsProvider';
+import { TutorialChapterCompletionProvider } from '~/providers/TutorialChapterCompletionProvider';
 import { markdownComponents } from '~/ui/components/Markdown';
 
 import 'global-styles/global.css';
@@ -57,21 +58,23 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <AnalyticsProvider>
       <ThemeProvider>
-        <CodeBlockSettingsProvider>
-          <MDXProvider components={rootMarkdownComponents}>
-            <Global
-              styles={css({
-                'html, body, kbd, button, input, select': {
-                  fontFamily: regularFont.style.fontFamily,
-                },
-                'code, pre, table.diff': {
-                  fontFamily: monospaceFont.style.fontFamily,
-                },
-              })}
-            />
-            <Component {...pageProps} />
-          </MDXProvider>
-        </CodeBlockSettingsProvider>
+        <TutorialChapterCompletionProvider>
+          <CodeBlockSettingsProvider>
+            <MDXProvider components={rootMarkdownComponents}>
+              <Global
+                styles={css({
+                  'html, body, kbd, button, input, select': {
+                    fontFamily: regularFont.style.fontFamily,
+                  },
+                  'code, pre, table.diff': {
+                    fontFamily: monospaceFont.style.fontFamily,
+                  },
+                })}
+              />
+              <Component {...pageProps} />
+            </MDXProvider>
+          </CodeBlockSettingsProvider>
+        </TutorialChapterCompletionProvider>
       </ThemeProvider>
     </AnalyticsProvider>
   );

docs/pages/tutorial/eas/android-development-build.mdx

@@ -8,8 +8,7 @@ import { Step } from '~/ui/components/Step';
 import { Terminal } from '~/ui/components/Snippet';
 import ImageSpotlight from '~/components/plugins/ImageSpotlight';
 import { Collapsible } from '~/ui/components/Collapsible';
-import { BoxLink } from '~/ui/components/BoxLink';
-import { BookOpen02Icon } from '@expo/styleguide-icons';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
 
 In this chapter, we're going to create a development build that can run Android devices and [emulators](/workflow/android-studio-emulator/) with EAS Build.
 
@@ -172,18 +171,16 @@ Press <kbd>a</kbd> in the terminal window to open the project on the Android Emu
 
 ## Summary
 
-In this chapter, we:
-
-- Learned about prerequisites to generate a development build for Android devices or emulators.
-- Created and triggered a cloud build using EAS Build for Android.
-- Learned about the difference between the **.apk** and **.aab** file formats for Android.
-- Explored various approaches to install and launch development builds on Android devices and emulators.
-
-## Next step
-
-<BoxLink
-  title="Create and run a cloud build for iOS Simulator"
-  Icon={BookOpen02Icon}
-  description="In the next chapter, Learn how to configure a development build for iOS Simulators using EAS Build."
-  href="/tutorial/eas/ios-development-build-for-simulators/"
+<ProgressTracker
+  currentChapterIndex={1}
+  name="EAS_TUTORIAL"
+  summary={
+    <>
+      We successfully used EAS Build to create and deploy development builds on Android devices and
+      emulators, and learned about <strong>.apk</strong> and <strong>.aab</strong> file formats.
+    </>
+  }
+  nextChapterDescription="In the next chapter, Learn how to configure a development build for iOS Simulators using EAS Build."
+  nextChapterTitle="Create and run a cloud build for iOS Simulator"
+  nextChapterLink="/tutorial/eas/ios-development-build-for-simulators/"
 />

docs/pages/tutorial/eas/android-production-build.mdx

@@ -8,8 +8,8 @@ import { Step } from '~/ui/components/Step';
 import { Terminal } from '~/ui/components/Snippet';
 import ImageSpotlight from '~/components/plugins/ImageSpotlight';
 import { Collapsible } from '~/ui/components/Collapsible';
-import { BoxLink } from '~/ui/components/BoxLink';
-import { BookOpen02Icon } from '@expo/styleguide-icons';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
+import { CODE } from '~/ui/components/Text';
 
 In this chapter, we're going to create our app's production version and submit it to the Google Play Store. We'll also explore how to automate the creation and release of new app versions.
 
@@ -301,18 +301,18 @@ For future releases, we can streamline the process by combining build creation a
 
 ## Summary
 
-In this chapter, we:
-
-- Created a production-ready Android build for our project.
-- Manually uploaded the app binary (`.aab`).
-- Learned about automating the process of building and submitting to the Google Play Store Console with Google Service Account credentials and `eas submit`.
-- Learned about automating the release process using the `--auto-submit` flag with `eas build`.
-
-## Next step
-
-<BoxLink
-  title="Create a production build for iOS"
-  Icon={BookOpen02Icon}
-  description="In the next chapter, learn about the process of creating a production build for iOS."
-  href="/tutorial/eas/ios-production-build/"
+<ProgressTracker
+  currentChapterIndex={7}
+  name="EAS_TUTORIAL"
+  summary={
+    <>
+      We successfully created a production-ready Android build, discussed manual and automated
+      uploading to Google Play Store using <CODE>eas submit</CODE>, and automated the release
+      process with the <CODE>--auto-submit</CODE> flag.
+    </>
+  }
+  nextChapterDescription="
+In the next chapter, learn about the process of creating a production build for iOS."
+  nextChapterTitle="Create a production build for iOS"
+  nextChapterLink="/tutorial/eas/ios-production-build/"
 />

docs/pages/tutorial/eas/configure-development-build.mdx

@@ -9,8 +9,7 @@ import { Terminal } from '~/ui/components/Snippet';
 import ImageSpotlight from '~/components/plugins/ImageSpotlight';
 import { Collapsible } from '~/ui/components/Collapsible';
 import { CODE } from '~/ui/components/Text';
-import { BoxLink } from '~/ui/components/BoxLink';
-import { BookOpen02Icon } from '@expo/styleguide-icons';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
 
 In this chapter, we're going to learn about the setup required to configure a development build with EAS for our example app.
 
@@ -200,20 +199,12 @@ Currently, our focus is on the `development` profile, which includes the followi
 
 ## Summary
 
-In this chapter, we:
-
-- Installed the EAS CLI and logged into our Expo account.
-- Initialized our sample project with the EAS CLI.
-- Linked our local project to EAS servers using the EAS CLI.
-- Prepared our project for a development build using EAS Build.
-- Went through **eas.json** and its default configuration.
-- Explored `development` build profile and its purpose.
-
-## Next step
-
-<BoxLink
-  title="Create and run a cloud build for Android"
-  Icon={BookOpen02Icon}
-  description="In the next chapter, let's create a development build for Android, install it on a device and an emulator, and get it running."
-  href="/tutorial/eas/android-development-build/"
+<ProgressTracker
+  currentChapterIndex={0}
+  name="EAS_TUTORIAL"
+  summary="
+We successfully the EAS CLI to install, initialize, and configure our project, linking the project to EAS servers and preparing a development build."
+  nextChapterDescription="In the next chapter, let's create a development build for Android, install it on a device and an emulator, and get it running."
+  nextChapterTitle="Create and run a cloud build for Android"
+  nextChapterLink="/tutorial/eas/android-development-build/"
 />

docs/pages/tutorial/eas/internal-distribution-builds.mdx

@@ -10,8 +10,7 @@ import ImageSpotlight from '~/components/plugins/ImageSpotlight';
 import { Collapsible } from '~/ui/components/Collapsible';
 import { Tabs, Tab } from '~/ui/components/Tabs';
 import { CODE } from '~/ui/components/Text';
-import { BoxLink } from '~/ui/components/BoxLink';
-import { BookOpen02Icon } from '@expo/styleguide-icons';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
 
 In this chapter, we're going to learn how to set up [internal distribution builds](/guides/sharing-preview-releases/#internal-distribution). Creating an internal build is quite similar to creating a development build. The difference is that you don't need to run the development server locally for it to work.
 
@@ -174,18 +173,11 @@ Since we have set up multiple app variants, we can see both the development and
 
 ## Summary
 
-In this chapter, we:
-
-- Configured and created internal distribution builds for both Android and iOS.
-- Used ad hoc provisioning profiles for registering multiple iOS devices.
-- Installed preview builds using shareable links.
-- Learned that development and preview builds of the same app can exist simultaneously on one device using multiple variants.
-
-## Next step
-
-<BoxLink
-  title="Manage different app versions"
-  Icon={BookOpen02Icon}
-  description="In the next chapter, learn about developer-facing and user-facing app versions and how to manage them automatically."
-  href="/tutorial/eas/manage-app-versions/"
+<ProgressTracker
+  currentChapterIndex={5}
+  name="EAS_TUTORIAL"
+  summary="We successfully created internal distribution builds for Android and iOS, used ad hoc provisioning for iOS, and installed multiple app variants using shareable links."
+  nextChapterDescription="In the next chapter, learn about developer-facing and user-facing app versions and how to manage them automatically."
+  nextChapterTitle="Manage different app versions"
+  nextChapterLink="/tutorial/eas/manage-app-versions/"
 />

docs/pages/tutorial/eas/introduction.mdx

@@ -50,9 +50,10 @@ While we'll only modify our project's code one or two times, our emphasis will b
 
 We're ready for this journey after setting up an Expo project locally.
 
+If you're already familiar with Expo, feel free to jump ahead to specific chapters. However, if you'd like to start from scratch, continue to the next chapter in which we will learn how to create your first build with EAS Build.
+
 <BoxLink
-  title="Configure a development in cloud"
+  title="Next: Configure a development in cloud"
   Icon={BookOpen02Icon}
-  description="If you're already familiar with Expo, feel free to jump ahead to specific chapters. However, if you'd like to start from scratch, continue to the next chapter in which we will learn how to create your first app with Expo."
   href="/tutorial/eas/configure-development-build/"
 />

docs/pages/tutorial/eas/ios-development-build-for-devices.mdx

@@ -8,8 +8,7 @@ import { Step } from '~/ui/components/Step';
 import { Terminal } from '~/ui/components/Snippet';
 import ImageSpotlight from '~/components/plugins/ImageSpotlight';
 import { Collapsible } from '~/ui/components/Collapsible';
-import { BoxLink } from '~/ui/components/BoxLink';
-import { BookOpen02Icon } from '@expo/styleguide-icons';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
 
 In this chapter, we're going to create our development build for iOS devices with EAS Build.
 
@@ -209,17 +208,11 @@ Start the development server by running the `npx expo start` command from the pr
 
 ## Summary
 
-In this chapter, we:
-
-- Learned about prerequisites for generating a development build for iOS devices and steps to create a provisioning profile with EAS CLI.
-- Created and triggered a cloud build using EAS Build for iOS devices.
-- Explored various approaches for installing and launching development builds on iOS devices.
-
-## Next step
-
-<BoxLink
-  title="Create and run a cloud build for iOS device"
-  Icon={BookOpen02Icon}
-  description="In the next chapter, let's create a development build for iOS, install it on a device, and get it running."
-  href="/tutorial/eas/ios-development-build-for-devices/"
+<ProgressTracker
+  currentChapterIndex={3}
+  name="EAS_TUTORIAL"
+  summary="We successfully used EAS Build to create and deploy development builds on iOS devices."
+  nextChapterDescription="In the next chapter, learn how to configure our app config to install multiple app variants on a single device."
+  nextChapterTitle="Configure multiple app variants"
+  nextChapterLink="/tutorial/eas/multiple-app-variants/"
 />

docs/pages/tutorial/eas/ios-development-build-for-simulators.mdx

@@ -8,8 +8,7 @@ import { Step } from '~/ui/components/Step';
 import { Terminal } from '~/ui/components/Snippet';
 import ImageSpotlight from '~/components/plugins/ImageSpotlight';
 import { Collapsible } from '~/ui/components/Collapsible';
-import { BoxLink } from '~/ui/components/BoxLink';
-import { BookOpen02Icon } from '@expo/styleguide-icons';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
 
 In this chapter, let's create our development build for iOS Simulators with EAS Build.
 
@@ -136,16 +135,11 @@ Press <kbd>i</kbd> in the terminal window to open the project on the iOS Simulat
 
 ## Summary
 
-In this chapter, we:
-
-- Created and triggered a cloud build using EAS Build for iOS Simulators.
-- Explored various approaches for installing and launching development builds on iOS Simulators.
-
-## Next step
-
-<BoxLink
-  title="Configure multiple app variants"
-  Icon={BookOpen02Icon}
-  description="In the next chapter, learn how to configure our app config to install multiple app variants on a single device."
-  href="/tutorial/eas/multiple-app-variants/"
+<ProgressTracker
+  currentChapterIndex={2}
+  name="EAS_TUTORIAL"
+  summary="We successfully used EAS Build to create and deploy development builds on iOS Simulators."
+  nextChapterDescription="In the next chapter, let's create a development build for iOS, install it on a device, and get it running."
+  nextChapterTitle="Create and run a cloud build for iOS device"
+  nextChapterLink="/tutorial/eas/ios-development-build-for-devices/"
 />

docs/pages/tutorial/eas/ios-production-build.mdx

@@ -7,8 +7,8 @@ description: Learn about the process of creating a production build for iOS.
 import { Step } from '~/ui/components/Step';
 import { Terminal } from '~/ui/components/Snippet';
 import ImageSpotlight from '~/components/plugins/ImageSpotlight';
-import { BoxLink } from '~/ui/components/BoxLink';
-import { BookOpen02Icon } from '@expo/styleguide-icons';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
+import { CODE } from '~/ui/components/Text';
 
 In this chapter, we're going to our app's production version and submit it for testing using TestFlight. After that, we'll submit them for App Store review to get it on the App Store.
 
@@ -163,18 +163,17 @@ For future releases, we can streamline the process by combining build creation a
 
 ## Summary
 
-In this chapter, we learned about:
-
-- Created a production-ready iOS build for our project.
-- Distributed a production build using TestFlight or the Apple App Store.
-- Learned about submitting the app to the App Store using `eas submit`.
-- Learned about automating the submission process using the `--auto-submit` flag with `eas build`.
-
-## Next step
-
-<BoxLink
-  title="Develop with your team"
-  Icon={BookOpen02Icon}
-  description="In the next chapter, learn how to use the EAS Update to send OTA updates and share previews with our team."
-  href="/tutorial/eas/team-development/"
+<ProgressTracker
+  currentChapterIndex={8}
+  name="EAS_TUTORIAL"
+  summary={
+    <>
+      We successfully created a production-ready iOS build, discussed distribution using TestFlight
+      and Apple App Store using <CODE>eas submit</CODE>, and automated the release process with the{' '}
+      <CODE>--auto-submit</CODE> flag.
+    </>
+  }
+  nextChapterDescription="In the next chapter, learn how to use the EAS Update to send OTA updates and share previews with our team."
+  nextChapterTitle="Share previews with your team"
+  nextChapterLink="/tutorial/eas/team-development/"
 />

docs/pages/tutorial/eas/manage-app-versions.mdx

@@ -4,8 +4,7 @@ sidebar_title: Manage app versions
 description: Learn about developer-facing and user-facing app versions and how to manage them automatically.
 ---
 
-import { BoxLink } from '~/ui/components/BoxLink';
-import { BookOpen02Icon } from '@expo/styleguide-icons';
+import { ProgressTracker } from '~/ui/components/ProgressTracker';
 
 In this chapter, we're going to configure our app to auto-increment the developer-facing app version. Learning about it will be useful before we dive into production build in the next few chapters.
 
@@ -70,15 +69,17 @@ When we create a new production build in the next chapter, the `versionCode` or
 
 ## Summary
 
-In this chapter, we:
-
-- Learned the difference between developer-facing (`android.versionCode` and `ios.buildNumber`) and user-facing (`version`) app version values.
-- Identified the importance of unique app versions to avoid app store rejections.
-- Updated **eas.json** to automatically increment developer-facing versions for production builds, using a remote version source for developer convenience.
-
-<BoxLink
-  title="Create a production build for Android"
-  Icon={BookOpen02Icon}
-  description="In the next chapter, learn about the process of creating a production build for Android."
-  href="/tutorial/eas/android-production-build/"
+<ProgressTracker
+  currentChapterIndex={6}
+  name="EAS_TUTORIAL"
+  summary={
+    <>
+      We successfully explored app versioning differences, addressed the importance of unique
+      versions to prevent store rejections, and enabled automated version updates in{' '}
+      <strong>eas.json</strong> for production.
+    </>
+  }
+  nextChapterDescription="In the next chapter, learn about the process of creating a production build for Android."
+  nextChapterTitle="Create a production build for Android"
+  nextChapterLink="/tutorial/eas/android-production-build/"
 />