Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@box/blueprint-web
Advanced tools
<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
Blueprint web is a comprehensive collection of UI components that can be used by engineering teams for product development. You can check out already delivered components in our Portal.
Blueprint web is next step after BUIE library which currently has a list of disadvantages. Learn more about the investigation and decision on Blueprint web from the initial investigation.
The main benefits of Blueprint web:
Create a branch with a descriptive name, such as add-icon-button
.
We use semantic-release and the conventional commit message format.
Keep a separate feature branch for each issue you want to address. As you develop code, continue to push code to your feature branch.
The commit message summary should be a one-sentence description of the change, and it must be 72 characters in length or shorter. For a list of tags, please click here. See the default release rules based on the commit tag. Note that you must include the exact keyword "BREAKING CHANGE" for breaking changes, to learn more click here.
Shown below are examples of the release type that will be done based on a commit message.
Make sure the title of your PR includes a Jira ticket number - this will automatically update your Jira ticket and move it to 'In Review' status.
Add a pull request description - describe the expected outcome and motivation for your change. Link to the PR will be included in the changelog, so a good description will make it easy to understand and provide migration/usage guidelines for your code.
"Semantic versioning" means that changes to the version number of the package (e.g. 3.42.11
to 3.43.0
) are done
according to rules that indicate how the change will affect consumers. Read more on
the npm page.
The version number is broken into 3 positions — Major.Minor.Patch
. In semantic release terms, changes to the
numbers follow Breaking.Feature.Fix
. The semantic-release
script parses commit messages and decides what type of
release to make based on the types of commits detected since the last release.
The rules for commit types are:
BREAKING CHANGE
.feat
). Consumers have to upgrade to
the new version to use the feature, but nothing will break if they do so.fix
) for existing behavior are a patch. Consumers don't have to do anything but upgrade.
perf
) and reverts (revert
) are treated as patch releases.fix(moji): ***
.docs
, don't trigger releases and don't appear in the changelog. These tags signal that there
are no external changes to any APIs (including non-breaking ones).
Changes from these types of commits will get released only when the release script detects other releasable commits (
feat/fix) going out at the same time.
build
, ci
, chore
, docs
, refactor
, style
, test
In most cases, commits will be a feat
or fix
. Make sure to include the BREAKING CHANGE
string in the summary if
there are non-backwards-compatible changes in the commit.
See more in Contribution docs.
If you want to use Blueprint web as a package, you need to install it as a dependency:
yarn add @box/blueprint-web
Blueprint web requires certain peer dependencies to be installed manually to prevent library duplication. For a list of required peer dependencies, see package.json.
If you want to start developing and adding your own components, you need to set up the project first. The library is generated with Nx.
node
version is >=18.16 < 19.0.0.To set up the development environment, perform the following steps:
Clone the repository using SSH protocol by following the guide here
At the root directory, run the following commands to run the storybook:
yarn install
yarn bootstrap
yarn nx storybook blueprint-web
This example shows a way you can use the Button
component in your app.
Styles are automatically imported when you import any Blueprint web component.
import { Button } from '@box/blueprint-web';
function App() {
return (
<div className="App">
<Button>Button</Button>
</div>
);
}
export default App;
You also need to extend your project webpack.config.js
with next rule:
module: {
rules: [
{
test: /\.(js|mjs)$/,
resolve: {
fullySpecified: false, // don't require .mjs extension for module packages
},
},
];
}
yarn nx storybook blueprint-web
to build and run Storybookyarn nx test blueprint-web
to execute unit&accessibility tests via Jestyarn nx lint blueprint-web
to check lintingyarn nx g @nx/react:component MyNewComponentName --project=blueprint-web --export
to generate new
component (Documentation)yarn nx g @nx/react:component-story --project=blueprint-web --componentPath lib/MyNewComponentName/MyNewComponentName.tsx
to generate new Storybook story for your componentThis repo is owned and maintained by the Design System Team, you can reach out to us in the #blueprint Slack channel.
See more in Testing docs.
FAQs
<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
We found that @box/blueprint-web demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.