Measure user usage of the Cribbage Trainer automatically deployed to GitHub Pages

[markafitzgerald1]

At present there is no available measure of how much traffic the automatically deployed to GitHub Pages version of Cribbage Trainer is getting, if any.

Add some sort of tracker so that once the application is getting traffic, it's application development and roadmap can be adjusted and fine-tuned based on its global usage information and trends.

[markafitzgerald1]

I'm currently investigating whether Google Analytics will suffice as a starting point to provide basic user usage info.

[markafitzgerald1]

Consider adding per user action tracking as well for:

• [ ] discard selection, and
• [ ] discard deselection

in order to measure how much users use the app per page load. (#6 will affect these analytics, allowing users to stay on the same page without reloading for multiple hands.)

[markafitzgerald1]

The Google Analytics Terms and Conditions requires a Privacy Policy and user consent to Google Analytics cookies and/or local storage in section 7. Privacy:

You will have and abide by an appropriate Privacy Policy and will comply with all applicable laws, policies, and regulations relating to the collection of information from Users. You must post a Privacy Policy and that Privacy Policy must provide notice of Your use of cookies, identifiers for mobile devices (e.g., Android Advertising Identifier or Advertising Identifier for iOS) or similar technology used to collect data. You must disclose the use of Google Analytics, and how it collects and processes data. This can be done by displaying a prominent link to the site "How Google uses information from sites or apps that use our services", (located at www.google.com/policies/privacy/partners/, or any other URL that Google may provide from time to time). You will use commercially reasonable efforts to ensure that a User is provided with clear and comprehensive information about, and consents to, the storing and accessing of cookies or other information on the User’s device where such activity occurs in connection with the Service and where providing such information and obtaining such consent is required by law.

Working on that now.

• [x] Create a Privacy Policy component
• [ ] Add the Privacy Policy component to the main application user interface
• [ ] Create and add a user consent to the use of Google Analytics user interface

[markafitzgerald1]

Adding Storybook to more effectively iterate on the Google Analytics consent widget before incorporating it into the main user interface.

• [x] Add Storybook
• [x] Create Analytics consent widget

[markafitzgerald1]

Branch and draft PR created with dependencies updated and deploy to production disabled for non-main branches.

GitHub repository settings updated to require PR passing build and test check before merge to main to avoid any future production outages due to GitHub Actions detectable issues.

[markafitzgerald1]

Storybook does not appear to support Parcel. Default Storybook instructions only show how to use it with Webpack and Vite. Vite seems to be more future-proof and its use of ECMAScript modules very likely works with the evergreen browsers this project is targeting. Perhaps consider a move to Vite via this migration guide from Parcel) as a supported path to using Storybook? There's no obvious sign of Parcel support coming to Storybook and a move to Vite would buy some local development performance gains. Also, Storybook based UI component development looks rather awesome!

• [x] Prototype migration from Parcel to Vite to enable use of Storybook (to enable ease of development of this new UI component in Cribbage Trainer).

[markafitzgerald1]

TIL: The GitHub Pages Action has a feature in development to:

deploy a pull request as a GitHub Pages preview site

The feature is still in non-public alpha, but let's monitor to enable the possibility of deploys to a preview site from PRs.

[markafitzgerald1]

Install and use of Vite followed by disuse and uninstall of Parcel may be easier and another than using a third party migration guide.

[markafitzgerald1]

Replaced Parcel with Vite in 633c7d6bd66cf2c6898183d46d2e39082ad202b2.

[markafitzgerald1]

The Package production dependency looks like an accidental error. Please remove in this PR if it is the next one to merge into main.

• [x] Remove Package dependency.

[markafitzgerald1]

Storybook with Card stories added in 4281a13c95087af80a10579c59fde3c097b4cbec.

[markafitzgerald1]

Package dependency removed in 8aaa89a6d56748e9473c263a326f17bfa1b374e7.

[markafitzgerald1]

Storybook Test Runner incorporated in local and GitHub Actions checks in 81f6df8.

[markafitzgerald1]

PR branch getting too big: 9,654 lines added and 3,421 lines removed. I think I'll start merging the supporting changes for the resolution of this issue into main one at a time to reduce PR size and branch duration (currently 25 days old) in order to keep non-merged work in progress size more manageable and understandable.

[markafitzgerald1]

Automated local serving of Storybook for Storybook tests in the 21-measure-cribbage-trainer-github-pages-usage branch to automate one sometimes needed local development separate step.

[markafitzgerald1]

Adding Storybook well will likely require modifying how the existing components work as stories are added.

TODO:

• [x] Change Card to only fire events on change - not actually modify app state.
• [x] Add stories for:
  • [x] Hand,
  • [x] SortOrderInput,
  • [x] SortableHand,
  • [x] CardLabel (formerly PossibleHandCard, which was inlined 20231204),
  • [x] PossibleHand,
  • [x] ScoredPossibleKeepDiscard (formerly Calculation, which was renamed 20231204),
  • [x] ScoredPossibleKeepDiscards (formerly Calculations, which was renamed 20231204), and
  • [x] Trainer

[markafitzgerald1]

822cfae pushed to this branch and draft PR to simplify the Card component to fire events instead of directly modifying state via parent component overall hand state hook calls.

[markafitzgerald1]

CardLabel stories added in 127963b8a34fc7f9f2b33ca17c209f879a3f18c9.

[markafitzgerald1]

Probably PossibleHand is next to get Storybook stories, or perhaps Hand.

[markafitzgerald1]

PR has gotten too big. Will merge it into main, then continue on this issue using trunk-based development to reduce cognitive load (only one branch) and keep the tip of development production tested.

Issue resolution strategy remains the same: supporting technical infrastructure before feature + issue remains open until both technical support and the feature are complete with minimal technical debt, where all technical debt is captured in Issues.

[markafitzgerald1]

TODO:

• [x] merge and close PR

[markafitzgerald1]

First three commits of the PR (#27) now exist in main:

• move to Node.js 20,
• restrict of deploy to occur from main only, and
• move from Parcel to Vite (to enable add of Storybook).

Next: add Storybook in main.

[markafitzgerald1]

Next three commits of the PR (#27) now exist in main:

• add Storybook and Card stories,
• ensure test screenshots up to date on Linux, and
• remove unused Package dependency.

Next: use the Storybook Test Runner.

[markafitzgerald1]

TODO:

• [x] Publish built storybook to GitHub Pages alongside SPA if readily possible.

[markafitzgerald1]

test(Storybook): Use test runner and the five commits after it to fix its issues in CI and local development all now in main and deployed to production.

Commits left to get into main:

• [x] 🐞 fix(Card): Minimize per components props
• [x] 🤖 test(CardLabel): Add stories

Then chances are PR #27 can be closed as it should equal or be very close to equal to main.

[markafitzgerald1]

🐞 fix(Card): Minimize per components props is now in main, but it contains the regression where clicking between the card border and the card text does not result in card select/deselect happening. I believe it's fixed in the last commit - will try merging that commit in now.

[markafitzgerald1]

Pausing work on this until some known bugs get fixed: #33, #31, #12.

[markafitzgerald1]

31 closed.

12 deferred until after #26, which will happen naturally a little after this Issue (#21).

33 in progress and will get closed during next PR or two of this Issue (#21).

Resuming work on this Issue (#21), which will naturally result in #33 closing out before #21 anyways.

[markafitzgerald1]

PossibleHand feels like the next candidate component for which Storybook stories should be added.

[markafitzgerald1]

PossibleHand stories added in #44.

[markafitzgerald1]

ScoredPossibleKeepDiscard stories added in #48.

[markafitzgerald1]

Hand stories added in https://github.com/markafitzgerald1/cribbage-trainer/pull/58.

[markafitzgerald1]

SortOrderInput stories added in #59.

[markafitzgerald1]

TODO inherited from #70:

• [x] Add a Storybook interaction test to prevent this from re-occurring once SortableHand Stortbook stories exist (via #21 work).

[markafitzgerald1]

SortableHand stories added in #78.

[markafitzgerald1]

ScoredPossibleKeepDiscards stories added in https://github.com/markafitzgerald1/cribbage-trainer/pull/79.

[markafitzgerald1]

Trainer story added in #80.

[markafitzgerald1]

Storybook static site now automatically published to https://markafitzgerald1.github.io/cribbage-trainer/storybook/ with #81 and #82.

[markafitzgerald1]

Minor glitch with Docs view of Trainer Story acceptable for now - can fix it in https://github.com/markafitzgerald1/cribbage-trainer/issues/83 later.

[markafitzgerald1]

Next up:

• [x] Review https://storybook.js.org/docs/writing-tests/interaction-testing before adding the regression test that was preventing sort from working in #70 before starting to create the analytics consent widget.
• [x] Compare Storybook Interaction test with Playwright test doing the same for speed and ease of use and regression detection before implementing.
• [x] Ensure that the test does in fact detect the #70 regression when it occurs.

[markafitzgerald1]

Locally wrote a Storybook Interaction Test of hand sort in Trainer. It warns in the browser console, but passes npx test-storybook.

A Storybook test may be required here as the development version of the component is used in Storybook, and that version of the component does not fail to work during test execution.

TODO:

• [x] Write Playwright test of changing sort order to see if that would catch #70 if it happened again.

[markafitzgerald1]

Confirmed that act() in code + Playwright test using production preview server catches the use of act() due to UI not changing or looking as expected after click on different sort order radio button.

[markafitzgerald1]

Bottom line: both the Storybook Interaction test and the Playwright test can catch the issue when run against production app servers.

[markafitzgerald1]

Regression test for #70 added in https://github.com/markafitzgerald1/cribbage-trainer/pull/86.

Next up: analytics consent UI create!

[markafitzgerald1]

Privacy Policy component created and added to Storybook but not added to main user interface in https://github.com/markafitzgerald1/cribbage-trainer/pull/87.

[markafitzgerald1]

The privacy policy was created with Google Bard using the parts of Google Analytics Terms of Service Section 7, Privacy that require a Privacy Policy from using applications as input.

[markafitzgerald1]

One missing TODO item once the Privacy Policy and a working user consent are on the GitHub Pages deployed site:

• [ ] Use Google Analytics in the GitHub Pages deployed version of Cribbage Trainer when consented to by the user.

[markafitzgerald1]

There are plenty of user consent to the user of analytics examples on the Internet that can be used to form one for this app. See the Images tab at https://www.google.com/search?q=analytics+user+consent+dialog+examples for some of them.

[markafitzgerald1]

Analytics Consent dialog with Accept and Decline buttons progressing nicely in local development. Close to ready to push as a Storybook only component before integration work begins.

[markafitzgerald1]

Pushed Analytics Consent dialog in 68d8854eb06b12cd9257a725057622feb8553e4e.