Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
storybook-addon-rem
Advanced tools
Readme
A storybook addon which helps you to test how your REM sized components behave.
Aleksandr Hovhannisyan wrote an awesome article about rems for font size. Check it out if you want to learn more about this CSS unit.
Install the addon:
npm i storybook-addon-rem --dev
Add following content to .storybook/main.(js|mjs|cjs)
:
module.exports = {
addons: ['storybook-addon-rem']
};
Add some css rem declerations to your component styling, e.g.:
.your-component-button {
font-size: 1rem;
}
Run your storybook instance. You should be able to see and use this addon in the toolbar 🚀
If you want to pass custom sizes you can do this by adding something like this in the .storybook/preview.(js|mjs|cjs)
file:
export const parameters = {
// ...
rem: {
// ...
sizes: [
{ value: 6, title: 'Tiny' },
{ value: 12, title: 'Standard' },
{ value: 72, title: 'Huge' },
]
},
}
By default storybook-rem-addon
removes storybooks rem paddings on the canvas and docs pages. If you want to keep the rem padding you can configure this in the .storybook/preview.(js|mjs|cjs)
file:
export const parameters = {
// ...
rem: {
// ...
canvasRemPadding: true,
docsRemPadding: true,
}
};
You can listen for the rem-update
event via the addons channel:
const channel = api.getChannel();
// On mount
useEffect(() => {
channel.addListener( 'rem-update', onRemUpdate );
return () => {
// On unmount
channel.removeListener( 'rem-update', onRemUpdate );
};
});
const onRemUpdate = ( data ) => {
console.log( data.title, data.value );
}
run the build:watch process:
npm build:watch
open a second terminal. Go to examples/basic
:
cd example/basic/
this is a plain storybook setup where this addon has been integrated. Install dependencies with
npm i
then start storybook with
npm run storybook
Notice: This storybook instance requires a lower node version than 18.
If needed: Install NVM and switch to a
lower version of nodejs e.g. v16.19.0
also known as lts/gallium
:
nvm i lts/gallium
nvm use lts/gallium
FAQs
A storybook addon which helps you to test how your REM sized components behave.
The npm package storybook-addon-rem receives a total of 3,992 weekly downloads. As such, storybook-addon-rem popularity was classified as popular.
We found that storybook-addon-rem demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.