A Yeoman Generator that scaffolds LeetCode problems templates into your Storybook.
https://psychobolt.github.io/leetcode-storybook
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.
npm install -g generator-leetcode-storybook vsc-leetcode-cli- 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.
- Include story paths for problem and solution for Storybook. For example,
// .storybook/main.js
module.exports = {
/* ... */
stories: [
'../**/*.(problem|solution).mdx',
/* ... */
],
/* ... */
};- Include
asset/sourcerule 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',
},
],
},
/* ... */
}),
/* ... */
};- (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',
/* ... */
],
/* ... */
};Run the Generator with Yeoman in your Storybook project and answer the generator's prompts
yo leetcode-storybookIt is recommended to run the generator at the project root in order to detect your .storybook/ configurations.
Please see DEVELOPMENT.md
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent