Storylab
The GitLab + Storybook integration
Add new issues. Quick view issues by component title.
Setup
Add environment variables
# Optional - Defaults to https://gitlab.com
SL_GL_BASE_URL<gitlab_server>
SL_GL_PROJECT_ID=<gitlab_repository_name_id>
SL_GL_USER=<gitlab_user_name>
SL_GL_TOKEN=<gitlab_personal_access_token>
Where do I find the project id?
From GitLab, click
menu
>projects
><project name>
. Your project id will be listed at the top of the page just under your project name. A future update will eliminate this env.
Develop
The Storylab addon works with GitLab by looking for any issues with matching labels. i.e. GitLab label.
Matching components and issues works out of the box. Simply follow Storybook's naming convention as normal. Storylab will automatically fetch data by the story's group title. This translates from Widget/Button
to widget-button
. And Widget/button
with the Large variant to widget-button--large
.
export default {
title: "Widget/Button",
component: Button
};
const Template = (args) => <Button {...args} />;
export const Large = Template.bind({});
Large.args = {
size: "large",
label: "Button",
};
New issues created through Storylab will add, by default, two labels needed for tying stories and issues together; <group_name>-<component_name>
and <group_name>-<component_name>--<variant_name>
. Labels are add as all lowercase. e.g. widget-button--large
.
Component & Label Naming
We recommend sticking to Storybook's naming convention for your component stories. For labels, no particular pattern is necessary except when tying an issue directly to your story. This is done automatically when creating an issue through Storylab. To tie an issue manually through GitLab, add the label group to your issue. For Widget/Button
with the Large variant, add the label widget-button
. You can optionally add the full label for large. widget-button--large
.
Making this addon more awesome! 🤘
- Add open new issue feature
- Change issue state within a board. e.g. From
In Progress
toReview
- Add support for custom labels instead of the hard coded ones prior to version 0.0.26.
- Automatically handle getting board labels rather than using env.
- Make the
SL_GL_PROJECT_ID
optional and load the first project by default~~ - Make projects selectable in the panel
- Make boards selectable in the panel
- Make component identifying labels url safe
- Provide richer set of information for the overview tab
- Added env property to set base url for users with private GitLab servers
- Label creation view for easily creating or removing labels on GitLab based on the Storybook story names
Missing a feature?
Feel free to open an issue against my repo or even contribute to the project. 🙌