FE-756: petrinaut product walkthrough#8789
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR SummaryLow Risk Overview The petrinaut website wraps Reviewed by Cursor Bugbot for commit 204685e. Bugbot is set up for automated code reviews on this repo. Configure here. |
github-actions
Bot
added
area/libs
alex-e-leon
changed the title
github-actions
Bot
added
the
area/infra
🤖 Augment PR SummarySummary: This PR adds a first-visit product walkthrough (“tour”) to the Petrinaut website/editor. Changes:
Technical Notes: The walkthrough auto-opens on first visit (tracked via a dedicated localStorage key) and is designed so embedders provide content via 🤖 Was this summary useful? React with 👍 or 👎 |
![augmentcode[bot]](https://avatars.githubusercontent.com/in/1027498?s=60&v=4){kind=small}
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 34e2977. Configure here.
kube
left a comment
kube
left a comment
There was a problem hiding this comment.
Beautiful, just a comment on the LocalStorage usage.
| const [hasSeenWalkthrough, setHasSeenWalkthrough] = useState( | ||
| loadHasSeenWalkthrough, | ||
| ); | ||
| const [isOpen, setIsOpen] = useState(() => !hasSeenWalkthrough); | ||
|
|
||
| useEffect(() => { | ||
| if (!hasSeenWalkthrough) { | ||
| return; | ||
| } | ||
| try { | ||
| localStorage.setItem(STORAGE_KEY, "true"); | ||
| } catch { | ||
| // Ignore write failures (e.g. quota exceeded) | ||
| } | ||
| }, [hasSeenWalkthrough]); |
There was a problem hiding this comment.
Could I ask you to use UserSettings since now this code live in the Petrinaut component.
You should create the UserSetting value + setter in the UserSettingContext then:
const {
showWalkthrough
setShowWalkthrough,
} = use(UserSettingsContext);Or something with a better name.
And add it in the ViewportSettings component too.
It is a beautiful Walkthrough you created, and I want to be able to re-open it from time to time.
There was a problem hiding this comment.
Ha yes, and instead of putting that in the Provider, put it in the Dialog so you have access to UserSettingsContext.
2 participants
🌟 What is the purpose of this PR?
Adds a product walkthrough to the petrinaut website. The logic for the new walkthrough lives inside the petrinaut library so that it can be kept in sync with any changes to the petrinaut ui and/or interact with other modals - however the content (copy + any video animations + their urls) is passed in by the consuming application by including the WalkthroughProvider - not including a walkthrough provider means that no preview will be rendered.
We track whether the user has seen the walkthrough in its own localstorage variable rather than the userSettings variable in order to keep the data better co-located with the context + provider and avoid situations where a provider is added in the wrong order.
The animations in this PR are not final yet, and still need polish @kube has graciously offered to record the experiments animation over the weekend. Will update the PR once they are done.
Pre-Merge Checklist 🚀
🚢 Has this modified a publishable library?
This PR:
📜 Does this require a change to the docs?
The changes in this PR: