Add guided tour example #5

yannbf · 2023-05-25T07:30:40Z

Closes #16
Relates to #17

This PR adds the first step of onboarding:

Welcome Modal:

GuidedTour component:

Additionally, it adds a new script storybook:watch which provides a way to rerun Storybook on file changes, making it easier to test the addon, as it does not work with HMR.

📦 Published PR as canary version: 0.0.11--canary.5.486892b.0

✨ Test out this PR locally via:

npm install @storybook/[email protected]
# or 
yarn add @storybook/[email protected]

src/components/PulsatingEffect/PulsatingEffect.tsx

src/components/TitleBody/TitleBody.tsx

src/features/GuidedTour/GuidedTour.tsx

src/manager.tsx

src/App.tsx

socket-security · 2023-06-01T09:16:09Z

New dependency changes detected. Learn more about Socket for GitHub ↗︎

🚨 Potential security issues found in this pull request. To accept the risk, merge this PR and you will not be notified again.

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore [email protected] bar@* or ignore all packages with @SocketSecurity ignore-all

@SocketSecurity ignore @storybook/[email protected]
@SocketSecurity ignore [email protected]
@SocketSecurity ignore @storybook/[email protected]
@SocketSecurity ignore [email protected]
@SocketSecurity ignore [email protected]
@SocketSecurity ignore [email protected]
@SocketSecurity ignore [email protected]
@SocketSecurity ignore [email protected]
@SocketSecurity ignore [email protected]
@SocketSecurity ignore [email protected]
@SocketSecurity ignore @storybook/[email protected]
@SocketSecurity ignore @storybook/[email protected]
@SocketSecurity ignore [email protected]
@SocketSecurity ignore [email protected]
@SocketSecurity ignore @babel/[email protected]
@SocketSecurity ignore [email protected]
@SocketSecurity ignore [email protected]
@SocketSecurity ignore [email protected]

😵‍💫 Bin script confusion

This package has multiple bin scripts with the same name. This can cause non-deterministic behavior when installing or could be a sign of a supply chain attack

Consider removing one of the conflicting packages. Packages should only export bin scripts with their name

Package	Bin script	Source
@storybook/[email protected] (added)	`sb`	`package.json` via [email protected]
[email protected] (added)	`sb`	`package.json`

⚠️ Shell access

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Packages should avoid accessing the shell which can reduce portability, and make it easier for malicious shell access to be introduced.

Package	Module	Location	Source
@storybook/[email protected] (added)	child_process	dist/generate.js	`package.json` via [email protected]
@storybook/[email protected] (added)	child_process	dist/index.js	`package.json` via [email protected]
@storybook/[email protected] (added)	child_process	dist/index.mjs	`package.json` via [email protected]
[email protected] (added)	child_process	lib/address.js	`package.json` via [email protected]
[email protected] (added)	child_process	dist/index.js	`package.json` via [email protected]
[email protected] (added)	child_process	lib/monitor/run.js	`package.json`
[email protected] (added)	child_process	lib/spawn.js	`package.json`
[email protected] (added)	child_process	lib/version.js	`package.json`
[email protected] (added)	child_process	index.js	`package.json` via [email protected]
[email protected] (added)	child_process	index.js	`package.json` via [email protected]
[email protected] (added)	child_process	lib/index.js	`package.json` via [email protected]
[email protected] (added)	child_process	lib/tree.js	`package.json` via [email protected]
[email protected] (added)	child_process	lib/utils.js	`package.json` via [email protected]
[email protected] (added)	child_process	tests/fixtures/index.js	`package.json` via [email protected]
[email protected] (added)	child_process	tests/index.test.js	`package.json` via [email protected]
[email protected] (added)	child_process	lib/Launcher.js	`package.json` via [email protected]

⚠️ Uses eval

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Avoid packages that use eval, since this could potentially execute any code.

Package	Eval Type	Location	Source
@storybook/[email protected] (added)	Function	dist/chunk-5SUU3UWF.js	`package.json` via [email protected]
@storybook/[email protected] (added)	Function	dist/chunk-5SUU3UWF.js	`package.json` via [email protected]
@storybook/[email protected] (added)	Function	dist/chunk-5SUU3UWF.js	`package.json` via [email protected]
@storybook/[email protected] (added)	Function	dist/chunk-5SUU3UWF.js	`package.json` via [email protected]
@storybook/[email protected] (added)	Function	dist/chunk-5SUU3UWF.js	`package.json` via [email protected]
@storybook/[email protected] (added)	Function	dist/chunk-5SUU3UWF.js	`package.json` via [email protected]
@storybook/[email protected] (added)	Function	dist/chunk-5SUU3UWF.js	`package.json` via [email protected]
@storybook/[email protected] (added)	Function	dist/formatter-S4K5WUZV-4LPR5OBX.js	`package.json` via [email protected]
@storybook/[email protected] (added)	Function	dist/formatter-S4K5WUZV-4LPR5OBX.js	`package.json` via [email protected]
@storybook/[email protected] (added)	Function	dist/runtime.js	`package.json` via @storybook/[email protected]
@storybook/[email protected] (added)	Function	dist/runtime.js	`package.json` via @storybook/[email protected]
@storybook/[email protected] (added)	Function	dist/runtime.js	`package.json` via @storybook/[email protected]
@storybook/[email protected] (added)	Function	dist/runtime.js	`package.json` via @storybook/[email protected]
@storybook/[email protected] (added)	Function	dist/runtime.js	`package.json` via @storybook/[email protected]
[email protected] (added)	Function	index.js	`package.json` via @storybook/[email protected], @storybook/[email protected], [email protected], [email protected]
[email protected] (added)	Function	lib/Browser.js	`package.json` via [email protected]
[email protected] (added)	Function	lib/DOMWorld.js	`package.json` via [email protected]
[email protected] (added)	Function	lib/ExecutionContext.js	`package.json` via [email protected]
[email protected] (added)	Function	lib/ExecutionContext.js	`package.json` via [email protected]
[email protected] (added)	Function	dist/shared/loadConfigFile.js	`package.json` via @storybook/[email protected], @vitejs/[email protected], [email protected], [email protected]
[email protected] (added)	Function	dist/shared/loadConfigFile.js	`package.json` via @storybook/[email protected], @vitejs/[email protected], [email protected], [email protected]
@storybook/[email protected] (added)	eval	dist/chunk-5SUU3UWF.js	`package.json` via [email protected]
@storybook/[email protected] (added)	eval	dist/chunk-5SUU3UWF.js	`package.json` via [email protected]
@storybook/[email protected] (added)	eval	dist/chunk-5SUU3UWF.js	`package.json` via [email protected]
@storybook/[email protected] (added)	eval	dist/chunk-5SUU3UWF.js	`package.json` via [email protected]
@storybook/[email protected] (added)	eval	dist/OverlayScrollbars-VAV6LJAB-K3TMPSMY.js	`package.json` via [email protected]
@storybook/[email protected] (added)	eval	dist/runtime.js	`package.json` via @storybook/[email protected]
@storybook/[email protected] (added)	eval	dist/runtime.js	`package.json` via @storybook/[email protected]
@storybook/[email protected] (added)	eval	dist/runtime.js	`package.json` via @storybook/[email protected]
@storybook/[email protected] (added)	eval	dist/runtime.js	`package.json` via @storybook/[email protected]

⚠️ New author

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Scrutinize new collaborator additions to packages because they now have the ability to publish code into your dependency tree. Packages should avoid frequent or unnecessary additions or changes to publishing rights.

Package	New Author	Previous Author	Source
@babel/[email protected] (added)	jlhwung	nicolo-ribaudo	`package.json` via [email protected]
[email protected] (added)	hanselfmu	mathias	`package.json` via [email protected]
[email protected] (added)	niftylettuce	alexindigo	`package.json` via [email protected]
[email protected] (added)	sindresorhus	tmpvar	`package.json` via [email protected]

🧐 Potential typo squat

Package name is similar to other popular packages and may not be the package you want.

Use care when consuming similarly named packages and ensure that you did not intend to consume a different package. Malicious packages often publish using similar names as existing popular packages.

Package	📎 Did you mean?	Found in
[email protected] (upgraded)	auntod (35 times more downloads)	`package.json`

Pull request alert summary

Issue	Status
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script confusion	⚠️ 2 issues
Bin script shell injection	✅ 0 issues
Shell access	⚠️ 16 issues
Uses eval	⚠️ 30 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
GitHub dependency	✅ 0 issues
New author	⚠️ 4 issues
Potential typo squat	⚠️ 1 issue
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

📊 Modified Dependency Overview:

➕ Added Package	Capability Access	`+/-` Transitive Count	Publisher
@types/[email protected]	None	`+0`	types
[email protected]	None	`+201`	shilman
[email protected]	network, filesystem, shell, environment	`+9`	remy
[email protected]	environment	`+11`	gilbarbara

⬆️ Updated Package	Version Diff	Added Capability Access	`+/-` Transitive Count	Publisher
[email protected]	6.6.3...6.7.0	eval	`+30/-29`	egoist
@storybook/[email protected]	7.0.0...7.0.18	None	`+61/-115`	shilman
@storybook/[email protected]	7.0.0...7.0.18	None	`+67/-110`	shilman
[email protected]	6.17.4...6.18.0	None	`+11/-7`	ghengeveld
@storybook/[email protected]	0.0.14-next.1...0.0.14-next.2	None	`+4/-34`	yannbf
@storybook/[email protected]	7.0.0...7.0.18	None	`+2/-35`	shilman
[email protected]	2.8.4...2.8.8	None	`+0/-0`	prettier-bot
[email protected]	10.43.0...10.46.0	None	`+11/-17`	alisowski
@storybook/[email protected]	7.0.0...7.0.18	None	`+43/-81`	shilman
@storybook/[email protected]	7.0.0...7.0.18	None	`+30/-61`	shilman

🚮 Removed packages: @storybook/[email protected], @storybook/[email protected], @types/[email protected], [email protected]

valentinpalkovic · 2023-06-01T09:19:03Z

src/stories/Button.stories.ts

+export const Warnings: Story = {
+  args: {
+    primary: true,
+    backgroundColor: "red",
+    label: "Delete now",
+  },
+};


valentinpalkovic mentioned this pull request May 25, 2023

Implemented raw tooltip component #4

Closed

yannbf added 3 commits May 30, 2023 14:57

add guided tour example

ac0876b

register addon correctly + introduce new components

23da8fb

introduce feature components

a7dd5e3

yannbf force-pushed the feat/guided-tour branch from 5d4ec86 to a7dd5e3 Compare May 31, 2023 11:10

valentinpalkovic reviewed May 31, 2023

View reviewed changes

src/components/PulsatingEffect/PulsatingEffect.tsx Show resolved Hide resolved

src/components/TitleBody/TitleBody.tsx Outdated Show resolved Hide resolved

src/features/GuidedTour/GuidedTour.tsx Outdated Show resolved Hide resolved

src/manager.tsx Outdated Show resolved Hide resolved

valentinpalkovic suggested changes May 31, 2023

View reviewed changes

src/App.tsx Outdated Show resolved Hide resolved

yannbf added 3 commits May 31, 2023 14:57

fix sidebar selector

2337253

add missing dependencies

d86997d

change mdx story title

75c6c56

yannbf force-pushed the feat/guided-tour branch from d133007 to 75c6c56 Compare May 31, 2023 13:00

yannbf added 8 commits May 31, 2023 15:04

ignore things for now

2fe1ddb

fix docs selector

975d0cb

refactor step management

20de877

lazy load app

24c7b81

improve highlighting on controls step

c72beae

improve styles

479d025

center button stories

6dd960e

add final step

fdfcd23

storybookjs deleted a comment from socket-security bot May 31, 2023

yannbf requested a review from valentinpalkovic May 31, 2023 16:31

refactor styles

d668cf5

valentinpalkovic reviewed Jun 1, 2023

View reviewed changes

valentinpalkovic approved these changes Jun 1, 2023

View reviewed changes

yannbf added 2 commits June 1, 2023 11:24

delete duplicated story

22fcefc

fix story

486892b

valentinpalkovic merged commit c849901 into main Jun 1, 2023

valentinpalkovic deleted the feat/guided-tour branch June 1, 2023 09:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add guided tour example #5

Add guided tour example #5

yannbf commented May 25, 2023 •

edited by github-actions bot

Loading

socket-security bot commented Jun 1, 2023

valentinpalkovic Jun 1, 2023

Add guided tour example #5

Add guided tour example #5

Conversation

yannbf commented May 25, 2023 • edited by github-actions bot Loading

socket-security bot commented Jun 1, 2023

valentinpalkovic Jun 1, 2023

Choose a reason for hiding this comment

yannbf commented May 25, 2023 •

edited by github-actions bot

Loading