Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@biotope/preview
Advanced tools
Readme
npm install @biotope/preview --save
The components you would like to see inside of the preview need configurations. The preview parses your components src directory for all files called "index.ts" inside folders called "preview".
{
"title": "Component Title",
"docs": `
# Markdown
## To describe my component.
I can write as much markdown as I want.
`,
"htmlTagName": "your-component-html-tag",
"resources": [
"path/to/component-script.js"
],
"configurations": [
{
"title": "Title for your Component in Storybook",
"props": [
{
"name": "text-prop",
"value": "Lorem ipsum",
"knob": {
"type": "text",
"label": "Component Text",
}
},
{
"name": "number-prop",
"value": 123
}
],
"innerHtml": "Lorem ipsum",
"innerHtmlAsKnob": true,
"children": [
{
"htmlTagName": "slotted-component-html-tag",
"resources": [...],
"props": [...],
"children": [...],
"innerHtml": "HTML content",
}
]
}
]
}
Please make sure that your configuration matches the TypeScript interface IComponentConfiguration defined in the preview package.
Since @biotope/preview uses your components' compiled source code inside the dist folder, before generating the preview you need to run
npm run build
Then you can use either
npx biotope-preview-build
to create a preview folder in your project with a index.html you then can serve somewhere, or
npx biotope-preview-serve
to only serve a temporary storybook preview.
To further configure the biotope preview, you can create a preview-config.js on your project's base level. You can the define the following (optional) parameters to adjust the process to your project structure:
Here you can see a examplary preview-config.js:
module.exports = {
globalResources: [
"css/styles.css",
],
componentsSrcDir: "src/components",
resourcesDir: "dist/resources",
outputDir: "preview",
};
The theme can be defined in the preview-config.js in the root of your project. There are different parameters to adapt the theme. Here's an example:
module.exports = {
theme: {
base: 'light',
colorPrimary: '#607DBE',
colorSecondary: '#F07D61',
brandTitle: '@biotope/preview',
brandUrl: 'https://biotope.sh/',
brandImage: 'https://biotope.sh/_assets/biotope-logo.svg',
}
};
There's a fallback theme, so you don't have to change the theme. You can also pass just one parameter, for example the colorSecondary:
module.exports = {
theme: {
colorSecondary: '#ff238d'
}
};
For all available theming parameters, please check out the Storybook documentation.
FAQs
A package to preview all your biotope components
The npm package @biotope/preview receives a total of 0 weekly downloads. As such, @biotope/preview popularity was classified as not popular.
We found that @biotope/preview demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.