
Security News
/Research
Wallet-Draining npm Package Impersonates Nodemailer to Hijack Crypto Transactions
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
@axodotdev/fringe
Advanced tools
Fringe is the Axo design system and component library.
Fringe has two main sections: the lib
directory, which contains the components themselves and the app contained in src
, which documents the components and provides a development sandbox.
To see which components are available and examples of their variations, in both dark and light mode, run Fringe locally:
# Start a dev server, see logs for address/port
# (usually http://localhost:5173/):
yarn dev
dark | light |
---|---|
![]() | ![]() |
All apps can import from Fringe using
import COMPONENT from "@axodotdev/fringe/lib/COMPONENT";
Thanks to the magic of TurboRepo, apps within the turbo-axo
repository will always point to the most updated code. Apps in different repositories will of course need to point to a new release to get new features.
See the release section for more about releasing a new version.
While the components themselves contain all the information they need to be used in an app, the colors, typography, and other design system aspects also rely on the styles defined in src/assets/main.css
and tailwind.config.js
.
To include this in your app, import from the package's tailwind.config
:
const {
plugins,
theme,
darkMode,
} = require("@axodotdev/fringe/tailwind.config");
module.exports = {
content:[
/* this lines gets styles from uncompiled Vue components */,
"./node_modules/@axodotdev/fringe/lib/*.vue",
/* other, app-specific config */,
],
theme,
plugins,
darkMode,
};
This is a Vue 3 application that uses Node 18 and yarn
for development and is
deployed as an NPM package.
#Start a dev server, see logs for address/port:
yarn dev
#Build the application for production:
yarn build
#Locally preview production build:
yarn preview
When working on a component in conjunction with work for a repository outside the TurboRepo, it is recommended to use yarn link
to make changes in package and app simple to keep together.
⚠️ Don't forget to push both branches, though!
(Note: The documentation points to the classic docs, but they are bit more explanatory and still correct for this feature.)
A few good rules for developing a component for Fringe.
src/assets/main.css
, so that things like animations and timings, etc., are easily kept consistent across components and apps.To keep churn as low as possible, new versions of Fringe should only be cut if a new release of an app depends on the new feature. That said, don't let the desire to avoid a new version prevent you from back-porting functionality that is or should be shared by multiple apps.
When you are ready to release a version, follow the checklist.
FAQs
Fringe is the Axo design system and component library.
The npm package @axodotdev/fringe receives a total of 27 weekly downloads. As such, @axodotdev/fringe popularity was classified as not popular.
We found that @axodotdev/fringe demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 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.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.