-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(qwik-nx): storybook generator (#110)
* feat(qwik-nx): storybook generator * refactor: cleanup storybook config * test(qwik-nx): tests for storybook
- Loading branch information
1 parent
9456a9d
commit a07d5e8
Showing
27 changed files
with
693 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,113 @@ | ||
import { | ||
checkFilesExist, | ||
ensureNxProject, | ||
runNxCommandAsync, | ||
uniq, | ||
} from '@nrwl/nx-plugin/testing'; | ||
|
||
import { | ||
runCommandUntil, | ||
promisifiedTreeKill, | ||
killPort, | ||
killPorts, | ||
} from '@qwikifiers/e2e/utils'; | ||
|
||
const STORYBOOK_PORT = 4400; | ||
|
||
describe('qwikNxVite plugin e2e', () => { | ||
beforeAll(async () => { | ||
await killPorts(STORYBOOK_PORT); | ||
ensureNxProject('qwik-nx', 'dist/packages/qwik-nx'); | ||
}, 10000); | ||
|
||
afterAll(async () => { | ||
// `nx reset` kills the daemon, and performs | ||
// some work which can help clean up e2e leftovers | ||
await runNxCommandAsync('reset'); | ||
}); | ||
|
||
describe('should be able to import components from libraries', () => { | ||
const appProject = uniq('qwik-nx'); | ||
const libProject = uniq('qwik-nx'); | ||
const secondLibProject = uniq('qwik-nx'); | ||
beforeAll(async () => { | ||
await runNxCommandAsync( | ||
`generate qwik-nx:app ${appProject} --e2eTestRunner=none --no-interactive` | ||
); | ||
await runNxCommandAsync( | ||
`generate qwik-nx:library ${libProject} --no-interactive` | ||
); | ||
await runNxCommandAsync( | ||
`generate qwik-nx:storybook-configuration ${appProject} --no-interactive` | ||
); | ||
await runNxCommandAsync( | ||
`generate qwik-nx:storybook-configuration ${libProject} --no-interactive` | ||
); | ||
}, 200000); | ||
|
||
describe('Applying storybook for existing application', () => { | ||
checkStorybookIsBuiltAndServed(appProject, 'apps', false); | ||
}); | ||
describe('Applying storybook for existing library', () => { | ||
checkStorybookIsBuiltAndServed(libProject, 'libs', false); | ||
}); | ||
|
||
describe('Generating a new library with storybook configuration', () => { | ||
beforeAll(async () => { | ||
await runNxCommandAsync( | ||
`generate qwik-nx:library ${secondLibProject} --storybookConfiguration=true --no-interactive` | ||
); | ||
}, 200000); | ||
checkStorybookIsBuiltAndServed(secondLibProject, 'libs', true); | ||
}); | ||
}); | ||
}); | ||
|
||
function checkStorybookIsBuiltAndServed( | ||
projectName: string, | ||
type: 'apps' | 'libs', | ||
hasTsStories: boolean | ||
) { | ||
it(`should be able to build storybook for the "${projectName}"`, async () => { | ||
const result = await runNxCommandAsync(`build-storybook ${projectName}`); | ||
expect(result.stdout).toContain( | ||
`Successfully ran target build-storybook for project ${projectName}` | ||
); | ||
expect(() => | ||
checkFilesExist(`dist/storybook/${projectName}/index.html`) | ||
).not.toThrow(); | ||
}, 200000); | ||
|
||
it(`should serve storybook for the "${projectName}"`, async () => { | ||
let resultOutput: string | undefined; | ||
const p = await runCommandUntil( | ||
`run ${projectName}:storybook`, | ||
(output) => { | ||
if ( | ||
output.includes('Local:') && | ||
output.includes(`:${STORYBOOK_PORT}`) | ||
) { | ||
resultOutput = output; | ||
return true; | ||
} | ||
return false; | ||
} | ||
); | ||
|
||
// it is expected that projects won't have stories by default and storybook should recognize it. | ||
expect(resultOutput).toContain( | ||
`No story files found for the specified pattern: ${type}/${projectName}/**/*.stories.mdx` | ||
); | ||
if (!hasTsStories) { | ||
expect(resultOutput).toContain( | ||
`No story files found for the specified pattern: ${type}/${projectName}/**/*.stories.@(js|jsx|ts|tsx)` | ||
); | ||
} | ||
try { | ||
await promisifiedTreeKill(p.pid!, 'SIGKILL'); | ||
await killPort(STORYBOOK_PORT); | ||
} catch { | ||
// ignore | ||
} | ||
}, 200000); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
packages/qwik-nx/src/generators/component/files/storybook/__fileName__.doc.mdx.template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import { Canvas, Story } from '@storybook/addon-docs'; | ||
import { <%- className %> } from './<%- fileName %>'; | ||
|
||
# <%- className %> Component | ||
|
||
## Purpose | ||
|
||
{/* Why the component is needed */} | ||
|
||
## Example | ||
|
||
{/* Common copy/paste example that people can throw into their templates and ts */} | ||
|
||
~~~tsx | ||
<<%- className %> param="value" /> | ||
~~~ | ||
|
||
## Use case examples | ||
|
||
{/* Examples based on use cases */} | ||
|
||
### Primary | ||
|
||
<Canvas> | ||
<Story id="<%- className.toLowerCase() %>--primary" /> | ||
</Canvas> |
21 changes: 21 additions & 0 deletions
21
packages/qwik-nx/src/generators/component/files/storybook/__fileName__.stories.tsx.template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import type { Meta } from 'storybook-framework-qwik'; | ||
import { <%- className %> } from './<%- fileName %>'; | ||
import doc from './<%- fileName %>.doc.mdx'; | ||
|
||
export default { | ||
title: '<%- className %>', | ||
tags: ['autodocs'], | ||
parameters: { | ||
docs: { | ||
page: doc, | ||
}, | ||
}, | ||
argTypes: { | ||
// put component params here | ||
}, | ||
render(args) { | ||
return <<%- className %> {...args}/>; | ||
}, | ||
} as Meta; | ||
|
||
export const Primary = {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.