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-vscode-component
Advanced tools
Readme
A simple storybook addon that opens the source file of the component directly. In local/dev, it opens vs code
and in prod deployment, it opens the file in github
repository.
Prerequistive: A working storybook setup
yarn add -D storybook-vscode-component babel-plugin-macros paths.macro
Note: We are using babel-plugin-macros
& paths.macro
for getting file paths easily. It is optional if you choose to hardcode the path of the file.
If you are using paths.macro
be sure to enable macro in .babelrc
as below:
// .babelrc
{
"plugins": [
"macros"
]
}
.storybook/addon.js
or .storybook/main.js
)//.storybook/addon.js [deprecated]
import 'storybook-vscode-component/register';
// or
// .storybook/main.js
module.exports = {
stories: [
// ....
],
addons: [
'@storybook/addon-links',
//...
'storybook-vscode-component/register',
],
};
storySource
.You may set three global parameters:
Parameter | Description | |
---|---|---|
workingDir | Path of curent working/root directory | Required |
repository | Url of github repository - to open the files in github | Optional |
branch | The default branch of github repo | Optional, points to master by default |
// .storybook/preview.js
import { wd } from 'paths.macro';
export const parameters = {
storySource: {
repository: 'https://github.com/example/repo-name',
workingDir: wd || '/Usr/vilva/Desktop/project-name',
branch: 'branch1',
},
};
Now you can start writing your stories and pass story level or component level parameters.
There are two possible parameters:
Parameter | Description | Value |
---|---|---|
componentPath | Path of the component used in the story | Either the Absolute path of the component file or path of the file path from the root |
storyPath | Path of the story file assuming both story and component stays in same folder with naming conventions - component: Button.js and story: Button.stories.js | Either the Absolute path of the story file or path of the file path from the root |
One of the above two parameters are mandatory and without these, the addon will disappear.
// Component level parameters
import { Button } from './Button';
export default {
title: 'Example/Button',
component: Button,
parameters: {
storySource: {
componentPath:
'/src/Button/Button.js' ||
'/Usr/vilva/Desktop/storybook/src/Button/Button.js',
},
},
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
// or
storiesOf('Button', module)
.addParameters({
storySource: {
componentPath:
'/src/Button/Button.js' ||
'/Usr/vilva/Desktop/storybook/src/Button/Button.js',
},
})
.add('Primary', () => <Button />);
import { Button } from './Button';
export default {
title: 'Example/Button',
component: Button,
parameters: {
storySource: {
componentPath:
'/src/Button/Button.js' ||
'/Usr/vilva/Desktop/storybook/src/Button/Button.js',
},
},
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.parameters = {
storySource: {
componentPath: '/src/Button/Button.js',
},
};
storyPath
Note: This parameter should be used only when the story and corresponding component are in same folder and with same name. Assume if the component is in
src/Button/Button.js
file, and only if the story is insrc/Button/Button.stories.js
file, this parameter will work. But it works for all types of files,.js
,.ts
,.tsx
.
import { Button } from './Button';
import { fileAbsolute } from 'paths.macro';
export default {
title: 'Example/Button',
component: Button,
parameters: {
storySource: {
componentPath:
'/src/Button/Button.js' ||
'/Usr/vilva/Desktop/storybook/src/Button/Button.js',
},
},
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.parameters = {
storySource: {
storyPath:
fileAbsolute ||
'/Usr/vilva/Desktop/storybook/src/Button/Button.stories.js' ||
'/src/Button/Button.stories.js',
},
};
FAQs
A simple Storybook addon to open the component source in VS Code
The npm package storybook-vscode-component receives a total of 3,760 weekly downloads. As such, storybook-vscode-component popularity was classified as popular.
We found that storybook-vscode-component 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.