Skip to content

Added storybook check (WIP 👷‍♀️ )#16721

Closed
NidhiKJha wants to merge 8 commits intodevelopfrom
fix-test-15760
Closed

Added storybook check (WIP 👷‍♀️ )#16721
NidhiKJha wants to merge 8 commits intodevelopfrom
fix-test-15760

Conversation

@NidhiKJha
Copy link
Copy Markdown
Member

@NidhiKJha NidhiKJha commented Nov 29, 2022

Fixes #15760

  • Added test-storybook dependency

TODOS:

  1. Fix the story check issue Unexpected component id
  2. Add in the CI

@NidhiKJha NidhiKJha added area-UI Relating to the user interface. team-design-system All issues relating to design system in Extension labels Nov 29, 2022
@socket-security
Copy link
Copy Markdown

socket-security bot commented Nov 29, 2022

Socket Security Pull Request Report

Dependency issues detected. If you merge this pull request, you will not be alerted to the instances of these issues again.

📜 Install scripts

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Package Script field Source
playwright@1.29.1 (added) install package.json via @storybook/test-runner@0.9.2
😵‍💫 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
playwright@1.29.1 (added) playwright package.json via @storybook/test-runner@0.9.2
playwright-core@1.29.1 (added) playwright package.json via @storybook/test-runner@0.9.2, jest-playwright-preset@2.0.0
Pull request report summary
Issue Status
Install scripts ⚠️ 1 issue
Native code ✅ 0 issues
Bin script confusion ⚠️ 2 issues
Bin script shell injection ✅ 0 issues
Unresolved require ✅ 0 issues
Invalid package.json ✅ 0 issues
HTTP dependency ✅ 0 issues
Git dependency ✅ 0 issues
Potential typo squat ✅ 0 issues
Known Malware ✅ 0 issues
Telemetry ✅ 0 issues
Protestware/Troll package ✅ 0 issues
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 foo@1.0.0 bar@2.4.2

  • @SocketSecurity ignore playwright@1.29.1
  • @SocketSecurity ignore playwright-core@1.29.1

Powered by socket.dev

@NidhiKJha NidhiKJha force-pushed the fix-test-15760 branch 2 times, most recently from a7f7286 to 56a2f05 Compare December 16, 2022 13:04
Copy link
Copy Markdown
Contributor

@georgewrmarshall georgewrmarshall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a comment regarding what we talked about in our extension sync

export default {
title: 'Components/App/AccountListItem',
id: __filename,
id: 'ui-components-app-account-list-item-account-list-item',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we just get rid of the id field altogether? From my understanding it does 2 things

  1. Creates the file path URL schema
  2. Generates this section of links for each PR build 👇

Screenshot 2022-12-21 at 4 01 47 PM

🤔 I'm not sure it adds a huge amount of value because it seems to include stories that have no relevance to the PR https://github.com/MetaMask/metamask-extension/pull/16931/files.

Plus there is the other link to the storybook build so we could just use that for visual testing?

Screenshot 2022-12-21 at 4 02 19 PM

Pros

  • Engineers don't have to fill out another field when creating a story

Cons

  • Lose the ability to link to effected stories from the PR
  • We would have to update all stories that link to other stories and think about externally links stories from Figma

So would have to update the links in Figma and in our MDX docs

Screenshot 2022-12-21 at 3 55 46 PM

Screenshot 2022-12-21 at 3 56 42 PM

Thoughts on this @Gudahtt @kumavis?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, we can get rid of the id field altogether. @georgewrmarshall this is the current plan

  1. We will delete the id field from all the stories.js files and won't be relying on filename/id anymore.
  2. Currently URLs are generated based on the existing ids but when theidswill be gone, new URLs will be generated based on the title of each story.
  3. In the CI, we can get the URL from stories.json.
  4. The only con you mentioned will be to update the New URLs in the docs (README.mdx) files.

metamaskbot and others added 7 commits January 6, 2023 13:18
* updated colors for typography

* updated valid colors
* updated test in picker-network

* fixed import order in README

* fixed global import path

* fixed formatting
Co-authored-by: ryanml <ryanlanese@gmail.com>
…ox Component (#17085)

* added padding/margin inline-start and inline-end support

* updated story for margin
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 6, 2023

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@NidhiKJha
Copy link
Copy Markdown
Member Author

Closing it with reference to #17092

@NidhiKJha NidhiKJha closed this Jan 6, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Jan 6, 2023
@HowardBraham HowardBraham deleted the fix-test-15760 branch January 19, 2026 19:00
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area-UI Relating to the user interface. team-design-system All issues relating to design system in Extension

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add storybook check to CI

7 participants