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 to Review
• 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. 🙌