Generator Leetcode Storybook

A Yeoman Generator that scaffolds LeetCode problems templates into your Storybook.

Example Storybook

https://psychobolt.github.io/leetcode-storybook

Requirements

Yeoman and a React storybook (6.4+) project with Webpack 5 builder preconfigued

Alternatively, you may fork psychobolt/leetcode-storybook-starter which includes the necessary requirements and configurations.

Install

npm install -g generator-leetcode-storybook vsc-leetcode-cli

Configuration

1. Login using Leetcode CLI

leetcode user [-g]  # Log in with github account. See official docs for user login options.

Note: Leetcode CLI only supports github or linkedin logins for US accounts.

2. Include story paths for problem and solution for Storybook. For example,

// .storybook/main.js
module.exports = {
  /* ... */
  stories: [
    '../**/*.(problem|solution).mdx',
    /* ... */
  ],
  /* ... */
};

3. Include asset/source rule for Markdown (.md) files using a custom webpack config. For example,

// .storybook/main.js
module.exports = {
  /* ... */
  webpackFinal: config => ({
    ...config,
    module: {
      ...config.module,
      rules: [
        ...config.module.rules.map(rule => {
          if (test.test('.md')) {
            return { ...rule, resourceQuery: { not: [/raw/] } };
          }
          return rule;
        }),
        {
          resourceQuery: /raw/,
          type: 'asset/source',
        },
      ],
    },
    /* ... */
  }),
  /* ... */
};

4. (Optional) Configure Storybook Badges. For example,

// .storybook/preview.js
import badgesConfig from './leetcode-badges.js';

export const parameters = {
  /* ... */
  badgesConfig, // include badgesConfig
};

Include the badges addon,

// .storybook/main.js
module.exports = {
  /* ... */
  addons: [
    '@geometricpanda/storybook-addon-badges',
    /* ... */
  ],
  /* ... */
};

Usage

Run the Generator with Yeoman in your Storybook project and answer the generator's prompts

yo leetcode-storybook

It is recommended to run the generator at the project root in order to detect your .storybook/ configurations.

Development Guide

Please see DEVELOPMENT.md