Plugin | Badge |
---|---|
@geometricpanda/storybook-addon-badges |
|
@geometricpanda/storybook-addon-iframe |
Purpose | Badge |
---|---|
Build | |
Inclusive Language | |
Code Coverage | |
Security Vulnerabilities | |
License Check |
An addon for Storybook which allows the addition of badges to your Stories
Home Page: https://geometricpanda.github.io/storybook-addon-badges/
License: MIT License
I was wondering if a custom badge would be possible? For example, if I would like to show that a component is available for v1.2+
?
Regardless, thank you for making an awesome add-on for Storybook.
Hi @geometricpanda raising this comment as its own issue as a possibly annoying attempt to get your attention. I believe that updating your package to work with tags would close all three open issues on your repo.
Originally posted by @shilman in #17 (comment)
I'm currently writing up the release post for the 8.1 tags feature and would like to highlight the updated badges addon if we can figure out out in the next month so. If not, we can always come back to it again later. Sorry for the noise and thanks for all your hard work on this high quality addon!
Hi,
Thanks for all the work developing this plugin.
at my place we decided to already upgrade to Storybook v7 due to better Vue support. We're wondering if there are already plans here to make the plugin ready for Storybook 7. Considering it's already on release candidates I doubt there will be any big changes.
From the migrations notes
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#70-core-addons-changes
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#70-addon-authors-changes
add the ability to attach links to badges
This release action kicked off by #24 failed. It looks like it's try
npm notice === Tarball Details ===
npm notice name: @geometricpanda/storybook-addon-badges
npm notice version: 2.0.3
npm notice filename: geometricpanda-storybook-addon-badges-2.0.3.tgz
npm notice package size: 31.3 kB
npm notice unpacked size: 187.8 kB
npm notice shasum: 2a7c546d8c5aa6f0aaeef7f[84](https://github.com/geometricpanda/storybook-addon-badges/actions/runs/8745338894/job/24000144951#step:7:85)950ceb0ffe6744a
npm notice integrity: sha512-eNTCFrsq1EPaV[...]WI9hfwVhfs71w==
npm notice total files: 16
npm notice
npm notice Publishing to https://registry.yarnpkg.com/ with tag latest and public access
npm ERR! code E404
npm ERR! 404 Not Found - PUT https://registry.yarnpkg.com/@geometricpanda%2fstorybook-addon-badges - Not found
npm ERR! 404
npm ERR! 404 '@geometricpanda/[email protected]' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
It also looks like there is an error with the npm package according to the logs as well.
✔ success Wrote authentication token string to /home/runner/.npmrc
Error: Running command 'npm' with args [publish] failed
npm WARN publish npm auto-corrected some errors in your package.json when publishing. Please run "npm pkg fix" to address these errors.
npm WARN publish errors corrected:
npm WARN publish "repository.url" was normalized to "git+https://github.com/geometricpanda/storybook-addon-badges.git"
Hi,
Thanks again for this awesome addon.
In Storybook v7 they splitted the docs/canvas view differently. This plugin only shows on the canvas views.
Since Storybook v7 we find ourselves using the Docs view in favor of the canvas view, but because of the limitation of the addon, we find ourselves missing the badges.
So the feature request is: is it possible to show the badges on the docs view in Storybook?
The add-on always renders two separators (vertical bars), even if there are no badges to render.
The add-on renders no (or only one) separator if there are no badges to render.
I don't know if there is a best practice regarding separators in storybook add-ons, but those two separators without content definitely look wrong.
How do you pass in tooltip config? In the example is only using badges. Also facing same problem after upgrading to 1.0.1, downgrading back to 0.2.2 #4
import { Meta } from '@storybook/addon-docs/blocks';
import { BADGE } from '@geometricpanda/storybook-addon-badges';
<Meta title="Path/To/MyComponent" parameters={{ badges: [BADGE.BETA] }} />;
Storybook version: v7.0.6
Hovering badge with mouse show tooltips. ✅
(optionally, clicking on the badge hides the visible tooltip)
Demo when using the add-on in Storybook v6:
Hovering badge with mouse does not show tooltip. ❌
(optionally, clicking on the badge toggles the tooltip visibility)
Demo when using the add-on in Storybook v7:
Looking to upgrade to 1.0.1 and I'm hitting the following TS error:
file.tsx:1:10 - error TS2614: Module '"@geometricpanda/storybook-addon-badges"' has no exported member 'BADGE'. Did you mean to use 'import BADGE from "@geometricpanda/storybook-addon-badges"' instead?
1 import { BADGE } from '@geometricpanda/storybook-addon-badges';
When I inspect the export, it's just default: {}
, so if I were to do:
import foo from '@geometricpanda/storybook-addon-badges';
then foo
is going to be {}
which doesn't seem useful.
I think that src/index.ts
should be re-exporting src/shared.ts
?
Hey @geometricpanda! I’m reaching out from the core SB team :)
Storybook 8 (our next major release) is coming soon, and it introduces some breaking changes that your addon might need to account for.
We’ve listed all the key changes in a new Storybook 8 migration guide, and we’d encourage you to check it out and see if your addon is impacted.
We also have an addons channel in our Discord community, which we’d like to use to better communicate with addon authors in the future. If you’re not part of the server, consider joining here and message me (@joevaugh4n) so that I can give you the addon creator role! If you’re already in the server, please just ping me and I’ll respond to you there.
Thanks for being a part of our addon community!
Joe
Likely caused by a lack of Metadata
investigate ability to consume the Badge component within an MDX file
If you're targeting TS 5+, you should be able to do export type * from 'typings.interface.ts';
in the index.
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html#support-for-export-type-
Otherwise, I think you'd have to enumerate them.
This is a feature request.
Are there any plans to allow showing the badges in the labels of the stories in the sidebar as well?
I saw this for mui for example:
Currently, this is not possible from what I see, so we would just use the sidebar roots to put the components with the same badges in their own group.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.