GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 16:11:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into fix/decoratestory

Browse Source
This commit is contained in:
Norbert de Langen 2019-07-10 15:48:27 +02:00
commit fa8c49fe74
277 changed files with 4664 additions and 4788 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
.circleci/config.yml
View File

@ -321,29 +321,6 @@ jobs:
- run:
name: Upload coverage
command: yarn coverage
cli-test:
<<: *defaults
environment:
BASH_ENV: ~/.bashrc
steps:
- checkout
- attach_workspace:
at: .
- run:
name: Test
command: yarn test --cli
no_output_timeout: 1800
cli-test-latest-cra:
<<: *defaults
environment:
BASH_ENV: ~/.bashrc
steps:
- checkout
- attach_workspace:
at: .
- run:
name: Test CLI with latest CR(N)A
command: yarn test-latest-cra
workflows:
version: 2
build_test_deploy:
@ -373,12 +350,6 @@ workflows:
- coverage:
requires:
- test
- cli-test:
requires:
- build
- cli-test-latest-cra:
requires:
- build
- chromatic:
requires:
- examples

17
.travis.yml Normal file
View File

@ -0,0 +1,17 @@
language: node_js
node_js:
- "8"
cache:
yarn: true
install:
- yarn install
- yarn bootstrap --core
script:
jobs:
include:
- script: yarn test --cli
- script: yarn test-latest-cra

47
CHANGELOG.md
View File

@ -1,3 +1,48 @@
## 5.2.0-alpha.40 (July 10, 2019)
### Bug Fixes
* Addon-knobs: Revert entrypoint deletion ([#7369](https://github.com/storybookjs/storybook/pull/7369))
* Typescript: Fix types in api package ([#7072](https://github.com/storybookjs/storybook/pull/7072))
* UI: Fix settings page route (about, shortcuts) ([#7241](https://github.com/storybookjs/storybook/pull/7241))
### Maintenance
* Linting: ADD an ignore for an eslint error about a missing dependency (puppeteer) ([#7239](https://github.com/storybookjs/storybook/pull/7239))
* CI: ADD travis ([#7252](https://github.com/storybookjs/storybook/pull/7252))
* Typescript: Migrate @storybook/angular ([#6570](https://github.com/storybookjs/storybook/pull/6570))
### Dependency Upgrades
* Bump express-graphql from 0.7.1 to 0.8.0 ([#7345](https://github.com/storybookjs/storybook/pull/7345))
* Bump react-native-modal-datetime-picker from 6.1.0 to 7.4.2 ([#6844](https://github.com/storybookjs/storybook/pull/6844))
## 5.2.0-alpha.39 (July 10, 2019)
### Bug Fixes
* UI: Fix Sidebar input refresh on 'Enter' ([#7342](https://github.com/storybookjs/storybook/pull/7342))
* Addon-knobs: Fix select options types to allow string[] and null ([#7356](https://github.com/storybookjs/storybook/pull/7356))
### Maintenance
* Typescript: Migrate @storybook/react ([#7054](https://github.com/storybookjs/storybook/pull/7054))
* Build: delete tests & snapshots from dist ([#7358](https://github.com/storybookjs/storybook/pull/7358))
## 5.2.0-alpha.38 (July 9, 2019)
### Bug Fixes
* Addon-storysource: Replace loader with source-loader ([#7272](https://github.com/storybookjs/storybook/pull/7272))
### Maintenance
* Typescript: Migrate @storybook/addon-knobs ([#7180](https://github.com/storybookjs/storybook/pull/7180))
### Dependency Upgrades
* Upgrade all dependencies ([#7329](https://github.com/storybookjs/storybook/pull/7329))
## 5.2.0-alpha.37 (July 8, 2019)
### Bug Fixes
@ -458,7 +503,7 @@ Publish failed
- Addon-docs: Docs page bugfix
- Addon-docs: Fix source block for legacy stories
NOTE: use `@storybook/addon-storysource/loader` with option `injectParameters: true` for legacy source
NOTE: use `@storybook/source-loader` with option `injectParameters: true` for legacy source
## 5.2.0-alpha.6 (May 14, 2019)

14
addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
@ -26,12 +26,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/api": "5.2.0-alpha.37",
"@storybook/client-logger": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/theming": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/api": "5.2.0-alpha.40",
"@storybook/client-logger": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"@storybook/theming": "5.2.0-alpha.40",
"axe-core": "^3.2.2",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",

6
addons/a11y/src/components/A11YPanel.tsx
View File

@ -34,15 +34,15 @@ const Icon = styled(Icons)(
: {}
);
const Passes = styled.span(({ theme }) => ({
const Passes = styled.span<{}>(({ theme }) => ({
color: theme.color.positive,
}));
const Violations = styled.span(({ theme }) => ({
const Violations = styled.span<{}>(({ theme }) => ({
color: theme.color.negative,
}));
const Incomplete = styled.span(({ theme }) => ({
const Incomplete = styled.span<{}>(({ theme }) => ({
color: theme.color.warning,
}));

2
addons/a11y/src/components/Report/Elements.tsx
View File

@ -11,7 +11,7 @@ const Item = styled.li({
fontWeight: 600,
});
const ItemTitle = styled.span(({ theme }) => ({
const ItemTitle = styled.span<{}>(({ theme }) => ({
borderBottom: `1px solid ${theme.appBorderColor}`,
width: '100%',
display: 'flex',

2
addons/a11y/src/components/Report/HighlightToggle.tsx
View File

@ -31,7 +31,7 @@ enum CheckBoxStates {
INDETERMINATE,
}
const Checkbox = styled.input(({ disabled }) => ({
const Checkbox = styled.input<{ disabled: boolean }>(({ disabled }) => ({
cursor: disabled ? 'not-allowed' : 'pointer',
}));

4
addons/a11y/src/components/Report/Item.tsx
View File

@ -10,7 +10,7 @@ import { Tags } from './Tags';
import { RuleType } from '../A11YPanel';
import HighlightToggle from './HighlightToggle';
const Wrapper = styled.div(({ theme }) => ({
const Wrapper = styled.div<{}>(({ theme }) => ({
display: 'flex',
width: '100%',
borderBottom: `1px solid ${theme.appBorderColor}`,
@ -30,7 +30,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
display: 'inline-flex',
}));
const HeaderBar = styled.div(({ theme }) => ({
const HeaderBar = styled.div<{}>(({ theme }) => ({
padding: theme.layoutMargin,
paddingLeft: theme.layoutMargin - 3,
background: 'none',

2
addons/a11y/src/components/Report/Tags.tsx
View File

@ -9,7 +9,7 @@ const Wrapper = styled.div({
margin: '12px 0',
});
const Item = styled.div(({ theme }) => ({
const Item = styled.div<{}>(({ theme }) => ({
margin: '0 6px',
padding: '5px',
border: `1px solid ${theme.appBorderColor}`,

4
addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap
View File

@ -321,7 +321,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
}
}
>
<ConnectFunction>
<Connect(HighlightToggle)>
<HighlightToggle
addElement={[Function]}
elementsToHighlight={Array []}
@ -346,7 +346,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
/>
</Styled(input)>
</HighlightToggle>
</ConnectFunction>
</Connect(HighlightToggle)>
</ThemeProvider>
</ThemedHighlightToggle>
</Provider>

4
addons/a11y/src/components/Tabs.tsx
View File

@ -15,7 +15,7 @@ const Container = styled.div({
minHeight: '100%',
});
const HighlightToggleLabel = styled.label(({ theme }) => ({
const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
cursor: 'pointer',
userSelect: 'none',
marginBottom: '3px',
@ -77,7 +77,7 @@ const Item = styled.button(
const TabsWrapper = styled.div({});
const List = styled.div(({ theme }) => ({
const List = styled.div<{}>(({ theme }) => ({
boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
background: 'rgba(0, 0, 0, .05)',
display: 'flex',

12
addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
@ -21,11 +21,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/api": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/theming": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/api": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"@storybook/theming": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",

2
addons/actions/src/components/ActionLogger/style.tsx
View File

@ -10,7 +10,7 @@ export const Action = styled.div({
alignItems: 'flex-start',
});
export const Counter = styled.div(({ theme }) => ({
export const Counter = styled.div<{}>(({ theme }) => ({
backgroundColor: opacify(0.5, theme.appBorderColor),
color: theme.color.inverseText,
fontSize: theme.typography.size.s1,

14
addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "A storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@ -25,12 +25,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/api": "5.2.0-alpha.37",
"@storybook/client-logger": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/theming": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/api": "5.2.0-alpha.40",
"@storybook/client-logger": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"@storybook/theming": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"memoizerific": "^1.11.3",
"react": "^16.8.3",

10
addons/centered/angular.d.ts vendored
View File

@ -1,3 +1,5 @@
import { StoryFn } from "@storybook/addons";
export interface ICollection {
[p: string]: any;
}
@ -11,11 +13,13 @@ export interface NgModuleMetadata {
}
export interface IStory {
props?: ICollection;
moduleMetadata?: Partial<NgModuleMetadata>;
component?: any;
props?: ICollection;
propsMeta?: ICollection;
moduleMetadata?: NgModuleMetadata;
template?: string;
styles?: string[];
}
declare module '@storybook/addon-centered/angular' {
export function centered(story: IStory): IStory;
export function centered(story: StoryFn<IStory>): IStory;
}

3
addons/centered/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-centered",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Storybook decorator to center components",
"keywords": [
"addon",
@ -23,6 +23,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"global": "^4.3.2",
"util-deprecate": "^1.0.2"

4
addons/centered/src/angular.ts
View File

@ -1,3 +1,5 @@
import { StoryFn } from '@storybook/addons';
import { IStory } from '../angular.d';
import styles from './styles';
function getComponentSelector(component: any) {
@ -43,7 +45,7 @@ function getModuleMetadata(metadata: any) {
return moduleMetadata;
}
export default function(metadataFn: any) {
export default function(metadataFn: StoryFn<IStory>) {
const metadata = metadataFn();
return {

10
addons/contexts/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-contexts",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Storybook Addon Contexts",
"keywords": [
"storybook",
@ -28,10 +28,10 @@
"dev:check-types": "tsc --noEmit"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/api": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/api": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"core-js": "^3.0.1"
},
"peerDependencies": {

10
addons/cssresources/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-cssresources",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "A storybook addon to switch between css resources at runtime for your story",
"keywords": [
"addon",
@ -25,10 +25,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/api": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/api": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3"

14
addons/design-assets/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-design-assets",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Design asset preview for storybook",
"keywords": [
"addon",
@ -27,12 +27,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/api": "5.2.0-alpha.37",
"@storybook/client-logger": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/theming": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/api": "5.2.0-alpha.40",
"@storybook/client-logger": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"@storybook/theming": "5.2.0-alpha.40",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

12
addons/docs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Superior documentation for your components",
"keywords": [
"addon",
@ -28,11 +28,11 @@
"@mdx-js/loader": "^1.0.0",
"@mdx-js/mdx": "^1.0.0",
"@mdx-js/react": "^1.0.16",
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/api": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/router": "5.2.0-alpha.37",
"@storybook/theming": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/api": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/router": "5.2.0-alpha.40",
"@storybook/theming": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"global": "^4.3.2",
"lodash": "^4.17.11",

10
addons/events/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-events",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",
@ -24,10 +24,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/api": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/theming": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/api": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"@storybook/theming": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"format-json": "^1.0.3",
"lodash": "^4.17.11",

2
addons/events/src/components/Event.tsx
View File

@ -17,7 +17,7 @@ interface StyledTextareaProps {
const StyledTextarea = styled(({ shown, failed, ...rest }: StyledTextareaProps) => (
<Textarea {...rest} />
))(
))<{ shown: boolean; failed: boolean }>(
{
flex: '1 0 0',
boxSizing: 'border-box',

6
addons/google-analytics/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-google-analytics",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Storybook addon for google analytics",
"keywords": [
"addon",
@ -20,8 +20,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react-ga": "^2.5.7"

6
addons/graphql/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-graphql",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"addon",
@ -22,8 +22,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/api": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/api": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"global": "^4.3.2",
"graphiql": "^0.13.0",

10
addons/info/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-info",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "A Storybook addon to show additional information for your stories.",
"keywords": [
"addon",
@ -22,10 +22,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/client-logger": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/theming": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/client-logger": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/theming": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"global": "^4.3.2",
"jsx-to-string": "^1.4.0",

4
addons/info/src/__snapshots__/index.test.js.snap
View File

@ -310,7 +310,7 @@ exports[`addon Info should render <Info /> for memoized component 1`] = `
<div>
It's a
story:
<TestComponent
<Memo(TestComponent)
array={
Array [
1,
@ -368,7 +368,7 @@ exports[`addon Info should render <Info /> for memoized component 1`] = `
</li>
</ul>
</div>
</TestComponent>
</Memo(TestComponent)>
</div>
</div>
<button

12
addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -28,11 +28,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/api": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/theming": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/api": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"@storybook/theming": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",

4
addons/jest/src/index.ts
View File

@ -1,9 +1,9 @@
import addons from '@storybook/addons';
import addons, { Parameters } from '@storybook/addons';
import deprecate from 'util-deprecate';
import { normalize, sep } from 'upath';
import { ADD_TESTS } from './shared';
interface AddonParameters {
interface AddonParameters extends Parameters {
jest?: string | string[] | { disable: true };
}

1
addons/knobs/angular.js vendored Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/deprecated');

1
addons/knobs/angular.ts
View File

@ -1 +0,0 @@
export * from './dist/deprecated';

1
addons/knobs/html.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/deprecated');

1
addons/knobs/html.ts
View File

@ -1 +0,0 @@
export * from './dist/deprecated';

1
addons/knobs/marko.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/deprecated');

1
addons/knobs/marko.ts
View File

@ -1 +0,0 @@
export * from './dist/deprecated';

1
addons/knobs/mithril.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/deprecated');

1
addons/knobs/mithril.ts
View File

@ -1 +0,0 @@
export * from './dist/deprecated';

12
addons/knobs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-knobs",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Storybook Addon Prop Editor Component",
"keywords": [
"addon",
@ -22,11 +22,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/client-api": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/theming": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/client-api": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"@storybook/theming": "5.2.0-alpha.40",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",
"escape-html": "^1.0.3",

1
addons/knobs/polymer.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/deprecated');

1
addons/knobs/polymer.ts
View File

@ -1 +0,0 @@
export * from './dist/deprecated';

1
addons/knobs/react.js vendored Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/deprecated');

1
addons/knobs/react.ts
View File

@ -1 +0,0 @@
export * from './dist/deprecated';

2
addons/knobs/src/KnobStore.ts
View File

@ -48,7 +48,7 @@ export default class KnobStore {
callbacks: Callback[] = [];
timer: number;
timer: NodeJS.Timeout;
has(key: string) {
return this.store[key] !== undefined;

2
addons/knobs/src/components/Panel.tsx
View File

@ -225,8 +225,6 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
render: ({ active }) => (
<TabWrapper key={knobKeyGroupId} active={active}>
<PropForm
// false positive
// eslint-disable-next-line no-use-before-define
knobs={knobsArray.filter(
knob => (knob.groupId || DEFAULT_GROUP_ID) === knobKeyGroupId
)}

2
addons/knobs/src/components/types/Color.tsx
View File

@ -32,7 +32,7 @@ interface ColorButtonProps {
const { Button } = Form;
const Swatch = styled.div(({ theme }) => ({
const Swatch = styled.div<{}>(({ theme }) => ({
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',

8
addons/knobs/src/components/types/Select.tsx
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { Form } from '@storybook/components';
type SelectTypeKnobValue = string;
export type SelectTypeKnobValue = string | number | null | undefined;
export interface SelectTypeKnob {
name: string;
@ -11,9 +11,9 @@ export interface SelectTypeKnob {
options: SelectTypeOptionsProp;
}
export interface SelectTypeOptionsProp {
[key: string]: SelectTypeKnobValue;
}
export type SelectTypeOptionsProp =
| Record<string, SelectTypeKnobValue>
| NonNullable<SelectTypeKnobValue>[];
export interface SelectTypeProps {
knob: SelectTypeKnob;

2
addons/knobs/src/components/types/index.ts
View File

@ -31,7 +31,7 @@ export { NumberTypeKnob, NumberTypeKnobOptions } from './Number';
export { ColorTypeKnob } from './Color';
export { BooleanTypeKnob } from './Boolean';
export { ObjectTypeKnob } from './Object';
export { SelectTypeKnob, SelectTypeOptionsProp } from './Select';
export { SelectTypeKnob, SelectTypeOptionsProp, SelectTypeKnobValue } from './Select';
export { RadiosTypeKnob, RadiosTypeOptionsProp } from './Radio';
export { ArrayTypeKnob } from './Array';
export { DateTypeKnob } from './Date';

0
addons/knobs/src/deprecated.ts → addons/knobs/src/deprecated.js
View File

3
addons/knobs/src/index.ts
View File

@ -7,6 +7,7 @@ import {
ButtonTypeOnClickProp,
RadiosTypeOptionsProp,
SelectTypeOptionsProp,
SelectTypeKnobValue,
OptionsTypeOptionsProp,
OptionsKnobOptions,
} from './components/types';
@ -63,7 +64,7 @@ export function object<T>(name: string, value: T, groupId?: string) {
export function select(
name: string,
options: SelectTypeOptionsProp,
value: string,
value: SelectTypeKnobValue,
groupId?: string
) {
return manager.knob(name, { type: 'select', selectV2: true, options, value, groupId });

1
addons/knobs/vue.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/deprecated');

1
addons/knobs/vue.ts
View File

@ -1 +0,0 @@
export * from './dist/deprecated';

8
addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Story Links addon for storybook",
"keywords": [
"addon",
@ -22,9 +22,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/router": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"@storybook/router": "5.2.0-alpha.40",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

16
addons/notes/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-notes",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
@ -23,13 +23,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/api": "5.2.0-alpha.37",
"@storybook/client-logger": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/router": "5.2.0-alpha.37",
"@storybook/theming": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/api": "5.2.0-alpha.40",
"@storybook/client-logger": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"@storybook/router": "5.2.0-alpha.40",
"@storybook/theming": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"global": "^4.3.2",
"markdown-to-jsx": "^6.9.3",

2
addons/notes/src/Panel.tsx
View File

@ -19,7 +19,7 @@ import { formatter } from './formatter';
import { PARAM_KEY, Parameters } from './shared';
const Panel = styled.div(({ theme }) => ({
const Panel = styled.div<{}>(({ theme }) => ({
padding: '3rem 40px',
boxSizing: 'border-box',
width: '100%',

8
addons/ondevice-actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-actions",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Action Logger addon for react-native storybook",
"keywords": [
"storybook"
@ -19,13 +19,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"core-js": "^2.5.7",
"fast-deep-equal": "^2.0.1"
},
"devDependencies": {
"@storybook/addon-actions": "5.2.0-alpha.37"
"@storybook/addon-actions": "5.2.0-alpha.40"
},
"peerDependencies": {
"@storybook/addon-actions": "*",

4
addons/ondevice-backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-backgrounds",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "A react-native storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@ -24,7 +24,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"prop-types": "^15.7.2"
},

8
addons/ondevice-knobs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-knobs",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Display storybook story knobs on your deviced.",
"keywords": [
"addon",
@ -21,13 +21,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"deep-equal": "^1.0.1",
"prop-types": "^15.7.2",
"react-native-color-picker": "^0.4.0",
"react-native-modal-datetime-picker": "^6.0.0",
"react-native-modal-datetime-picker": "^7.4.2",
"react-native-modal-selector": "^1.0.2",
"react-native-switch": "^1.5.0"
},

12
addons/ondevice-knobs/src/PropField.js
View File

@ -31,6 +31,18 @@ PropField.propTypes = {
knob: PropTypes.shape({
name: PropTypes.string,
value: PropTypes.any,
hideLabel: PropTypes.bool,
type: PropTypes.oneOf([
'text',
'number',
'color',
'boolean',
'object',
'select',
'array',
'date',
'button',
]),
}).isRequired,
onChange: PropTypes.func.isRequired,
onPress: PropTypes.func.isRequired,

1
addons/ondevice-knobs/src/types/Array.js
View File

@ -37,6 +37,7 @@ ArrayType.propTypes = {
knob: PropTypes.shape({
name: PropTypes.string,
value: PropTypes.array,
separator: PropTypes.string,
}),
onChange: PropTypes.func,
};

4
addons/ondevice-knobs/src/types/Number.js
View File

@ -62,6 +62,10 @@ NumberType.propTypes = {
knob: PropTypes.shape({
name: PropTypes.string,
value: PropTypes.number,
step: PropTypes.number,
min: PropTypes.number,
max: PropTypes.number,
range: PropTypes.bool,
}),
onChange: PropTypes.func,
};

4
addons/ondevice-notes/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-notes",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Write notes for your react-native Storybook stories.",
"keywords": [
"addon",
@ -20,7 +20,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"prop-types": "^15.7.2",
"react-native-simple-markdown": "^1.1.0"

4
addons/options/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-options",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Options addon for storybook",
"keywords": [
"addon",
@ -22,7 +22,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"util-deprecate": "^1.0.2"
},

3
addons/options/tsconfig.json
View File

@ -1,7 +1,8 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src"
"rootDir": "./src",
"types": ["webpack-env"]
},
"include": [
"src/**/*"

14
addons/queryparams/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-queryparams",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "parameter addon for storybook",
"keywords": [
"addon",
@ -23,12 +23,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/api": "5.2.0-alpha.37",
"@storybook/client-logger": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/theming": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/api": "5.2.0-alpha.40",
"@storybook/client-logger": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"@storybook/theming": "5.2.0-alpha.40",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

4
addons/storyshots/storyshots-core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"keywords": [
"addon",
@ -25,7 +25,7 @@
"storybook": "start-storybook -p 6006"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"glob": "^7.1.3",
"global": "^4.3.2",

2
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
View File

@ -166,7 +166,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
onClick={[Function]}
>
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "transparent",
@ -273,7 +272,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
"textDecoration": "none",
}
}
target="_blank"
>
Writing Stories
</a>

2
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
View File

@ -139,7 +139,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
See these sample
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "transparent",
@ -234,7 +233,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
"textDecoration": "none",
}
}
target="_blank"
>
Writing Stories
</a>

2
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
View File

@ -43,7 +43,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
See these sample
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "transparent",
@ -138,7 +137,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
"textDecoration": "none",
}
}
target="_blank"
>
Writing Stories
</a>

2
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
View File

@ -43,7 +43,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
<p>
See these sample
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "transparent",
@ -138,7 +137,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
"textDecoration": "none",
}
}
target="_blank"
>
Writing Stories
</a>

2
addons/storyshots/storyshots-core/stories/storyshot.test.js
View File

@ -1,6 +1,8 @@
import path from 'path';
import initStoryshots, { multiSnapshotWithOptions } from '../src';
jest.mock('@storybook/node-logger');
// with react-test-renderer
initStoryshots({
framework: 'react',

10
addons/storyshots/storyshots-puppeteer/.eslintrc.js Normal file
View File

@ -0,0 +1,10 @@
const error = 2;
const warn = 1;
const ignore = 0;
module.exports = {
rules: {
'import/no-unresolved': ignore,
'import/extensions': ignore,
},
};

8
addons/storyshots/storyshots-puppeteer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Image snappshots addition to StoryShots base on puppeteer",
"keywords": [
"addon",
@ -22,8 +22,8 @@
"prepare": "node ../../../scripts/prepare.js"
},
"dependencies": {
"@storybook/node-logger": "5.2.0-alpha.37",
"@storybook/router": "5.2.0-alpha.37",
"@storybook/node-logger": "5.2.0-alpha.40",
"@storybook/router": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"jest-image-snapshot": "^2.8.2",
"regenerator-runtime": "^0.12.1"
@ -32,7 +32,7 @@
"puppeteer": "^1.12.2"
},
"peerDependencies": {
"@storybook/addon-storyshots": "5.2.0-alpha.36",
"@storybook/addon-storyshots": "5.2.0-alpha.37",
"puppeteer": "^1.12.2"
},
"publishConfig": {

2
addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.js
View File

@ -1,5 +1,7 @@
import { constructUrl } from '../url';
jest.mock('@storybook/node-logger');
describe('Construct URL for Storyshots', () => {
it('can use a url without path and without query params', () => {
expect(constructUrl('http://localhost:9001', 'someKind', 'someStory')).toEqual(

12
addons/storysource/README.md
View File

@ -26,7 +26,7 @@ Use this hook to a custom webpack.config. This will generate a decorator call in
module.exports = function({ config }) {
config.module.rules.push({
test: /\.stories\.jsx?$/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
loaders: [require.resolve('@storybook/source-loader')],
enforce: 'pre',
});
@ -56,7 +56,7 @@ module.exports = function({ config }) {
test: /\.stories\.jsx?$/,
loaders: [
{
loader: require.resolve('@storybook/addon-storysource/loader'),
loader: require.resolve('@storybook/source-loader'),
options: { parser: 'typescript' },
},
],
@ -91,7 +91,7 @@ module.exports = function({ config }) {
test: /\.stories\.jsx?$/,
loaders: [
{
loader: require.resolve('@storybook/addon-storysource/loader'),
loader: require.resolve('@storybook/source-loader'),
options: {
prettierConfig: {
printWidth: 100,
@ -125,7 +125,7 @@ module.exports = function({ config }) {
test: /\.stories\.jsx?$/,
loaders: [
{
loader: require.resolve('@storybook/addon-storysource/loader'),
loader: require.resolve('@storybook/source-loader'),
options: {
uglyCommentsRegex: [/^eslint-.*/, /^global.*/],
},
@ -140,7 +140,7 @@ module.exports = function({ config }) {
### injectDecorator
Tell storysource whether you need inject decorator.If false, you need to add the decorator by yourself;
Tell storysource whether you need inject decorator. If false, you need to add the decorator by yourself;
Defaults: true
@ -152,7 +152,7 @@ module.exports = function({ config }) {
test: /\.stories\.jsx?$/,
loaders: [
{
loader: require.resolve('@storybook/addon-storysource/loader'),
loader: require.resolve('@storybook/source-loader'),
options: { injectDecorator: false },
},
],

2
addons/storysource/loader.js
View File

@ -1 +1 @@
module.exports = require('./dist/loader');
module.exports = require('@storybook/source-loader');

11
addons/storysource/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Stories addon for storybook",
"keywords": [
"addon",
@ -22,10 +22,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/router": "5.2.0-alpha.37",
"@storybook/theming": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/router": "5.2.0-alpha.40",
"@storybook/theming": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"estraverse": "^4.2.0",
"loader-utils": "^1.2.3",
@ -35,6 +35,7 @@
"regenerator-runtime": "^0.12.1"
},
"peerDependencies": {
"@storybook/source-loader": "*",
"react": "*"
},
"publishConfig": {

3
addons/storysource/src/StoryPanel.js
View File

@ -66,9 +66,8 @@ export default class StoryPanel extends Component {
this.selectedStoryRef = ref;
};
listener = ({ source, currentLocation, locationsMap }) => {
listener = ({ edition: { source }, location: { currentLocation, locationsMap } }) => {
const locationsKeys = getLocationKeys(locationsMap);
this.setState({
source,
currentLocation,

2
addons/storysource/src/events.js
View File

@ -1,3 +1,3 @@
export const ADDON_ID = 'storybook/storysource';
export const ADDON_ID = 'storybook/source-loader';
export const PANEL_ID = `${ADDON_ID}/panel`;
export const EVENT_ID = `${ADDON_ID}/set`;

732
addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap
View File

@ -1,732 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`inject-decorator injectDecorator option is false - angular does not inject stories decorator after the all "storiesOf" functions 1`] = `
"import { Component } from '@angular/core';
import { storiesOf } from '@storybook/angular';
@Component({
selector: 'storybook-with-ng-content',
template: \`<div style=\\"color: #1e88e5;\\"><ng-content></ng-content></div>\`,
})
class WithNgContentComponent {}
storiesOf('Custom|ng-content', module).add('Default', () => ({
template: \`<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>\`,
moduleMetadata: {
declarations: [WithNgContentComponent],
},
}));
"
`;
exports[`inject-decorator injectDecorator option is false - flow does not inject stories decorator after the all "storiesOf" functions 1`] = `
"// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import TableComponent from '../components/TableComponent';
import type { JssClasses } from '../types';
type State = {
value: any,
};
type Props = {
classes: JssClasses,
name: string,
};
class Table extends React.Component<Props, State> {
constructor(props) {
super(props);
this.state = {
value: undefined,
};
}
state: State;
render() {
return <TableComponent />;
}
}
const stories = storiesOf('Table', module);
stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
"
`;
exports[`inject-decorator injectDecorator option is false - ts does not inject stories decorator after the all "storiesOf" functions 1`] = `
"import { Component } from '@angular/core';
import { Store, StoreModule } from '@ngrx/store';
import { storiesOf, moduleMetadata } from '@storybook/angular';
@Component({
selector: 'storybook-comp-with-store',
template: '<div>{{this.getSotreState()}}</div>',
})
class WithStoreComponent {
private store: Store<any>;
constructor(store: Store<any>) {
this.store = store;
}
getSotreState(): string {
return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
}
}
storiesOf('ngrx|Store', module)
.addDecorator(
moduleMetadata({
imports: [StoreModule.forRoot({})],
declarations: [WithStoreComponent],
})
)
.add('With component', () => {
return {
component: WithStoreComponent,
};
});"
`;
exports[`inject-decorator injectDecorator option is false does not inject stories decorator after the all "storiesOf" functions 1`] = `
"import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import DocgenButton from '../components/DocgenButton';
import FlowTypeButton from '../components/FlowTypeButton';
import BaseButton from '../components/BaseButton';
import TableComponent from '../components/TableComponent';
storiesOf('Addons|Info.React Docgen', module)
.add(
'Comments from PropType declarations',
withInfo(
'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
)(() => <DocgenButton onClick={action('clicked')} label=\\"Docgen Button\\" />)
)
.add(
'Comments from Flow declarations',
withInfo(
'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
)(() => <FlowTypeButton onClick={action('clicked')} label=\\"Flow Typed Button\\" />)
)
.add(
'Comments from component declaration',
withInfo(
'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
);
const markdownDescription = \`
#### You can use markdown in your withInfo() description.
Sometimes you might want to manually include some code examples:
~~~js
const Button = () => <button />;
~~~
Maybe include a [link](http://storybook.js.org) to your project as well.
\`;
storiesOf('Addons|Info.Markdown', module).add(
'Displays Markdown in description',
withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.inline', module).add(
'Inlines component inside story',
withInfo({
text: 'Component should be inlined between description and PropType table',
inline: true, // Displays info inline vs click button to view
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.header', module).add(
'Shows or hides Info Addon header',
withInfo({
text: 'The Info Addon header should be hidden',
header: false, // Toggles display of header with component name and description
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.source', module).add(
'Shows or hides Info Addon source',
withInfo({
text: 'The Info Addon source section should be hidden',
source: false, // Displays the source of story Component
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.propTables', module).add(
'Shows additional component prop tables',
withInfo({
text: 'There should be a prop table added for a component not included in the story',
propTables: [FlowTypeButton],
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.propTablesExclude', module).add(
'Exclude component from prop tables',
withInfo({
text: 'This can exclude extraneous components from being displayed in prop tables.',
propTablesExclude: [FlowTypeButton],
})(() => (
<div>
<BaseButton label=\\"Button\\" />
<FlowTypeButton label=\\"Flow Typed Button\\" />
</div>
))
);
storiesOf('Addons|Info.Options.styles', module)
.add(
'Extend info styles with an object',
withInfo({
styles: {
button: {
base: {
background: 'purple',
},
},
header: {
h1: {
color: 'green',
},
},
},
})(() => <BaseButton label=\\"Button\\" />)
)
.add(
'Full control over styles using a function',
withInfo({
styles: stylesheet => ({
...stylesheet,
header: {
...stylesheet.header,
h1: {
...stylesheet.header.h1,
color: 'red',
},
},
}),
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.TableComponent', module).add(
'Use a custom component for the table',
withInfo({
TableComponent,
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Decorator', module)
.addDecorator((story, context) =>
withInfo('Info could be used as a global or local decorator as well.')(story)(context)
)
.add('Use Info as story decorator', () => <BaseButton label=\\"Button\\" />);
const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
const Input = hoc(() => <input type=\\"text\\" />);
const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
storiesOf('Addons|Info.GitHub issues', module).add(
'#1814',
withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
<div>
<Input />
<TextArea />
</div>
))
);
"
`;
exports[`inject-decorator positive - angular calculates "adds" map 1`] = `
Object {
"custom-ng-content--default": Object {
"endLoc": Object {
"col": 2,
"line": 17,
},
"startLoc": Object {
"col": 43,
"line": 12,
},
},
}
`;
exports[`inject-decorator positive - angular injects stories decorator after the all "storiesOf" functions 1`] = `
"import { Component } from '@angular/core';
import { storiesOf } from '@storybook/angular';
@Component({
selector: 'storybook-with-ng-content',
template: \`<div style=\\"color: #1e88e5;\\"><ng-content></ng-content></div>\`,
})
class WithNgContentComponent {}
storiesOf('Custom|ng-content', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__)).add('Default', () => ({
template: \`<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>\`,
moduleMetadata: {
declarations: [WithNgContentComponent],
},
}));
"
`;
exports[`inject-decorator positive - flow calculates "adds" map 1`] = `Object {}`;
exports[`inject-decorator positive - flow injects stories decorator after the all "storiesOf" functions 1`] = `
"// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import TableComponent from '../components/TableComponent';
import type { JssClasses } from '../types';
type State = {
value: any,
};
type Props = {
classes: JssClasses,
name: string,
};
class Table extends React.Component<Props, State> {
constructor(props) {
super(props);
this.state = {
value: undefined,
};
}
state: State;
render() {
return <TableComponent />;
}
}
const stories = storiesOf('Table', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__));
stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
"
`;
exports[`inject-decorator positive - ts calculates "adds" map 1`] = `
Object {
"ngrx-store--with-component": Object {
"endLoc": Object {
"col": 3,
"line": 32,
},
"startLoc": Object {
"col": 7,
"line": 28,
},
},
}
`;
exports[`inject-decorator positive - ts injects stories decorator after the all "storiesOf" functions 1`] = `
"import { Component } from '@angular/core';
import { Store, StoreModule } from '@ngrx/store';
import { storiesOf, moduleMetadata } from '@storybook/angular';
@Component({
selector: 'storybook-comp-with-store',
template: '<div>{{this.getSotreState()}}</div>',
})
class WithStoreComponent {
private store: Store<any>;
constructor(store: Store<any>) {
this.store = store;
}
getSotreState(): string {
return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
}
}
storiesOf('ngrx|Store', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__))
.addDecorator(
moduleMetadata({
imports: [StoreModule.forRoot({})],
declarations: [WithStoreComponent],
})
)
.add('With component', () => {
return {
component: WithStoreComponent,
};
});"
`;
exports[`inject-decorator positive calculates "adds" map 1`] = `
Object {
"addons-info-decorator--use-info-as-story-decorator": Object {
"endLoc": Object {
"col": 73,
"line": 137,
},
"startLoc": Object {
"col": 7,
"line": 137,
},
},
"addons-info-github-issues--1814": Object {
"endLoc": Object {
"col": 4,
"line": 152,
},
"startLoc": Object {
"col": 2,
"line": 146,
},
},
"addons-info-markdown--displays-markdown-in-description": Object {
"endLoc": Object {
"col": 96,
"line": 44,
},
"startLoc": Object {
"col": 2,
"line": 43,
},
},
"addons-info-options-header--shows-or-hides-info-addon-header": Object {
"endLoc": Object {
"col": 41,
"line": 60,
},
"startLoc": Object {
"col": 2,
"line": 56,
},
},
"addons-info-options-inline--inlines-component-inside-story": Object {
"endLoc": Object {
"col": 41,
"line": 52,
},
"startLoc": Object {
"col": 2,
"line": 48,
},
},
"addons-info-options-proptables--shows-additional-component-prop-tables": Object {
"endLoc": Object {
"col": 41,
"line": 76,
},
"startLoc": Object {
"col": 2,
"line": 72,
},
},
"addons-info-options-proptablesexclude--exclude-component-from-prop-tables": Object {
"endLoc": Object {
"col": 4,
"line": 89,
},
"startLoc": Object {
"col": 2,
"line": 80,
},
},
"addons-info-options-source--shows-or-hides-info-addon-source": Object {
"endLoc": Object {
"col": 41,
"line": 68,
},
"startLoc": Object {
"col": 2,
"line": 64,
},
},
"addons-info-options-styles--extend-info-styles-with-an-object": Object {
"endLoc": Object {
"col": 43,
"line": 108,
},
"startLoc": Object {
"col": 4,
"line": 94,
},
},
"addons-info-options-styles--full-control-over-styles-using-a-function": Object {
"endLoc": Object {
"col": 43,
"line": 123,
},
"startLoc": Object {
"col": 4,
"line": 111,
},
},
"addons-info-options-tablecomponent--use-a-custom-component-for-the-table": Object {
"endLoc": Object {
"col": 41,
"line": 130,
},
"startLoc": Object {
"col": 2,
"line": 127,
},
},
"addons-info-react-docgen--comments-from-component-declaration": Object {
"endLoc": Object {
"col": 70,
"line": 28,
},
"startLoc": Object {
"col": 4,
"line": 25,
},
},
"addons-info-react-docgen--comments-from-flow-declarations": Object {
"endLoc": Object {
"col": 85,
"line": 22,
},
"startLoc": Object {
"col": 4,
"line": 19,
},
},
"addons-info-react-docgen--comments-from-proptype-declarations": Object {
"endLoc": Object {
"col": 79,
"line": 16,
},
"startLoc": Object {
"col": 4,
"line": 13,
},
},
}
`;
exports[`inject-decorator positive injects stories decorator after the all "storiesOf" functions 1`] = `
"import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import DocgenButton from '../components/DocgenButton';
import FlowTypeButton from '../components/FlowTypeButton';
import BaseButton from '../components/BaseButton';
import TableComponent from '../components/TableComponent';
storiesOf('Addons|Info.React Docgen', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__))
.add(
'Comments from PropType declarations',
withInfo(
'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
)(() => <DocgenButton onClick={action('clicked')} label=\\"Docgen Button\\" />)
)
.add(
'Comments from Flow declarations',
withInfo(
'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
)(() => <FlowTypeButton onClick={action('clicked')} label=\\"Flow Typed Button\\" />)
)
.add(
'Comments from component declaration',
withInfo(
'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
);
const markdownDescription = \`
#### You can use markdown in your withInfo() description.
Sometimes you might want to manually include some code examples:
~~~js
const Button = () => <button />;
~~~
Maybe include a [link](http://storybook.js.org) to your project as well.
\`;
storiesOf('Addons|Info.Markdown', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__)).add(
'Displays Markdown in description',
withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.inline', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__)).add(
'Inlines component inside story',
withInfo({
text: 'Component should be inlined between description and PropType table',
inline: true, // Displays info inline vs click button to view
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.header', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__)).add(
'Shows or hides Info Addon header',
withInfo({
text: 'The Info Addon header should be hidden',
header: false, // Toggles display of header with component name and description
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.source', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__)).add(
'Shows or hides Info Addon source',
withInfo({
text: 'The Info Addon source section should be hidden',
source: false, // Displays the source of story Component
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.propTables', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__)).add(
'Shows additional component prop tables',
withInfo({
text: 'There should be a prop table added for a component not included in the story',
propTables: [FlowTypeButton],
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.propTablesExclude', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__)).add(
'Exclude component from prop tables',
withInfo({
text: 'This can exclude extraneous components from being displayed in prop tables.',
propTablesExclude: [FlowTypeButton],
})(() => (
<div>
<BaseButton label=\\"Button\\" />
<FlowTypeButton label=\\"Flow Typed Button\\" />
</div>
))
);
storiesOf('Addons|Info.Options.styles', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__))
.add(
'Extend info styles with an object',
withInfo({
styles: {
button: {
base: {
background: 'purple',
},
},
header: {
h1: {
color: 'green',
},
},
},
})(() => <BaseButton label=\\"Button\\" />)
)
.add(
'Full control over styles using a function',
withInfo({
styles: stylesheet => ({
...stylesheet,
header: {
...stylesheet.header,
h1: {
...stylesheet.header.h1,
color: 'red',
},
},
}),
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Options.TableComponent', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__)).add(
'Use a custom component for the table',
withInfo({
TableComponent,
})(() => <BaseButton label=\\"Button\\" />)
);
storiesOf('Addons|Info.Decorator', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__))
.addDecorator((story, context) =>
withInfo('Info could be used as a global or local decorator as well.')(story)(context)
)
.add('Use Info as story decorator', () => <BaseButton label=\\"Button\\" />);
const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
const Input = hoc(() => <input type=\\"text\\" />);
const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
storiesOf('Addons|Info.GitHub issues', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__)).add(
'#1814',
withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
<div>
<Input />
<TextArea />
</div>
))
);
"
`;
exports[`inject-decorator stories with ugly comments in ts should delete ugly comments from the generated story source 1`] = `
"import React from 'react';
@Component({
selector: 'storybook-comp-with-store',
template: '<div>{{this.getSotreState()}}</div>',
})
class WithStoreComponent {
private store: Store<any>;
constructor(store: Store<any>) {
this.store = store;
}
getSotreState(): string {
return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
}
}
import { storiesOf } from '@storybook/react';
const x = 0;
storiesOf('Foo', module).add('bar', () => <div>baz</div>);
/*
This is actually a good comment that will help
users to understand what's going on here.
*/
"
`;
exports[`inject-decorator stories with ugly comments should delete ugly comments from the generated story source 1`] = `
"import React from 'react';
import { storiesOf } from '@storybook/react';
const x = 0;
storiesOf('Foo', module).add('bar', () => <div>baz</div>);
/*
This is actually a good comment that will help
users to understand what's going on here.
*/
"
`;
exports[`inject-decorator will not change the source when there are no "storiesOf" functions 1`] = `
"while(true) {
console.log(\\"it's a kind of magic\\");
}"
`;

12
addons/storysource/src/loader/default-options.js
View File

@ -1,12 +0,0 @@
const defaultOptions = {
prettierConfig: {
printWidth: 100,
tabWidth: 2,
bracketSpacing: true,
trailingComma: 'es5',
singleQuote: true,
},
uglyCommentsRegex: [/^eslint-.*/, /^global.*/],
};
export default defaultOptions;

99
addons/storysource/src/loader/generate-helpers.js
View File

@ -1,99 +0,0 @@
import prettier from 'prettier';
import { patchNode } from './parse-helpers';
import { splitSTORYOF, findAddsMap } from './traverse-helpers';
import getParser from './parsers';
function isUglyComment(comment, uglyCommentsRegex) {
return uglyCommentsRegex.some(regex => regex.test(comment));
}
function generateSourceWithoutUglyComments(source, { comments, uglyCommentsRegex }) {
let lastIndex = 0;
const parts = [source];
comments
.filter(comment => isUglyComment(comment.value.trim(), uglyCommentsRegex))
.map(patchNode)
.forEach(comment => {
parts.pop();
const start = source.slice(lastIndex, comment.start);
const end = source.slice(comment.end);
parts.push(start, end);
lastIndex = comment.end;
});
return parts.join('');
}
function prettifyCode(source, { prettierConfig, parser, filepath }) {
let config = prettierConfig;
if (!config.parser) {
if (parser) {
config = {
...prettierConfig,
parser: parser === 'javascript' ? 'babel' : parser,
};
} else if (filepath) {
config = {
...prettierConfig,
filepath,
};
} else {
config = {
...prettierConfig,
parser: 'babel',
};
}
}
return prettier.format(source, config);
}
export function generateSourceWithDecorators(source, decorator, parserType) {
const parser = getParser(parserType);
const ast = parser.parse(source);
const { comments = [] } = ast;
const parts = splitSTORYOF(ast, source);
const newSource = parts.join(decorator);
return {
changed: parts.length > 1,
source: newSource,
comments,
};
}
export function generateSourceWithoutDecorators(source, parserType) {
const parser = getParser(parserType);
const ast = parser.parse(source);
const { comments = [] } = ast;
return {
changed: true,
source,
comments,
};
}
export function generateAddsMap(source, parserType) {
const parser = getParser(parserType);
const ast = parser.parse(source);
return findAddsMap(ast);
}
export function generateStorySource({ source, ...options }) {
let storySource = source;
storySource = generateSourceWithoutUglyComments(storySource, options);
storySource = prettifyCode(storySource, options);
return storySource;
}

29
addons/storysource/src/loader/index.js
View File

@ -1,29 +0,0 @@
import { getOptions } from 'loader-utils';
import injectDecorator from './inject-decorator';
const ADD_DECORATOR_STATEMENT = '.addDecorator(withStorySource(__STORY__, __ADDS_MAP__))';
function transform(source) {
const options = getOptions(this) || {};
const result = injectDecorator(source, ADD_DECORATOR_STATEMENT, this.resourcePath, options);
if (!result.changed) {
return source;
}
const sourceJson = JSON.stringify(result.storySource)
.replace(/\u2028/g, '\\u2028')
.replace(/\u2029/g, '\\u2029');
const addsMap = JSON.stringify(result.addsMap);
return `
export var withStorySource = require('@storybook/addon-storysource').withStorySource;
export var __STORY__ = ${sourceJson};
export var __ADDS_MAP__ = ${addsMap};
${result.source}
`;
}
export default transform;

46
addons/storysource/src/loader/inject-decorator.js
View File

@ -1,46 +0,0 @@
import defaultOptions from './default-options';
import {
generateSourceWithDecorators,
generateSourceWithoutDecorators,
generateStorySource,
generateAddsMap,
} from './generate-helpers';
function extendOptions(source, comments, filepath, options) {
return {
...defaultOptions,
...options,
source,
comments,
filepath,
};
}
function inject(source, decorator, filepath, options = {}) {
const { injectDecorator = true } = options;
const { changed, source: newSource, comments } =
injectDecorator === true
? generateSourceWithDecorators(source, decorator, options.parser)
: generateSourceWithoutDecorators(source, options.parser);
if (!changed) {
return {
source: newSource,
addsMap: {},
changed,
};
}
const storySource = generateStorySource(extendOptions(source, comments, filepath, options));
const addsMap = generateAddsMap(storySource, options.parser);
return {
source: newSource,
storySource,
addsMap,
changed,
};
}
export default inject;

216
addons/storysource/src/loader/inject-decorator.test.js
View File

@ -1,216 +0,0 @@
import fs from 'fs';
import path from 'path';
import injectDecorator from './inject-decorator';
const ADD_DECORATOR_STATEMENT = '.addDecorator(withStorySource(__STORY__, __ADDS_MAP__))';
describe('inject-decorator', () => {
describe('positive', () => {
const mockFilePath = './__mocks__/inject-decorator.stories.txt';
const source = fs.readFileSync(mockFilePath, 'utf-8');
const result = injectDecorator(
source,
ADD_DECORATOR_STATEMENT,
path.resolve(__dirname, mockFilePath),
{ parser: 'javascript' }
);
it('returns "changed" flag', () => {
expect(result.changed).toBeTruthy();
});
it('injects stories decorator after the all "storiesOf" functions', () => {
expect(result.source).toMatchSnapshot();
});
it('calculates "adds" map', () => {
expect(result.addsMap).toMatchSnapshot();
});
});
describe('positive - angular', () => {
const mockFilePath = './__mocks__/inject-decorator.angular-stories.txt';
const source = fs.readFileSync(mockFilePath, 'utf-8');
const result = injectDecorator(
source,
ADD_DECORATOR_STATEMENT,
path.resolve(__dirname, mockFilePath),
{ parser: 'typescript' }
);
it('returns "changed" flag', () => {
expect(result.changed).toBeTruthy();
});
it('injects stories decorator after the all "storiesOf" functions', () => {
expect(result.source).toMatchSnapshot();
});
it('calculates "adds" map', () => {
expect(result.addsMap).toMatchSnapshot();
});
});
describe('positive - flow', () => {
const mockFilePath = './__mocks__/inject-decorator.flow-stories.txt';
const source = fs.readFileSync(mockFilePath, 'utf-8');
const result = injectDecorator(
source,
ADD_DECORATOR_STATEMENT,
path.resolve(__dirname, mockFilePath),
{ parser: 'flow' }
);
it('returns "changed" flag', () => {
expect(result.changed).toBeTruthy();
});
it('injects stories decorator after the all "storiesOf" functions', () => {
expect(result.source).toMatchSnapshot();
});
it('calculates "adds" map', () => {
expect(result.addsMap).toMatchSnapshot();
});
});
describe('positive - ts', () => {
const mockFilePath = './__mocks__/inject-decorator.ts.txt';
const source = fs.readFileSync(mockFilePath, 'utf-8');
const result = injectDecorator(
source,
ADD_DECORATOR_STATEMENT,
path.resolve(__dirname, mockFilePath),
{ parser: 'typescript' }
);
it('returns "changed" flag', () => {
expect(result.changed).toBeTruthy();
});
it('injects stories decorator after the all "storiesOf" functions', () => {
expect(result.source).toMatchSnapshot();
});
it('calculates "adds" map', () => {
expect(result.addsMap).toMatchSnapshot();
});
});
describe('stories with ugly comments', () => {
const mockFilePath = './__mocks__/inject-decorator.ugly-comments-stories.txt';
const source = fs.readFileSync(mockFilePath, 'utf-8');
const result = injectDecorator(
source,
ADD_DECORATOR_STATEMENT,
path.resolve(__dirname, mockFilePath),
{ parser: 'javascript' }
);
it('should delete ugly comments from the generated story source', () => {
expect(result.storySource).toMatchSnapshot();
});
});
describe('stories with ugly comments in ts', () => {
const mockFilePath = './__mocks__/inject-decorator.ts.ugly-comments-stories.txt';
const source = fs.readFileSync(mockFilePath, 'utf-8');
const result = injectDecorator(
source,
ADD_DECORATOR_STATEMENT,
path.resolve(__dirname, mockFilePath),
{ parser: 'typescript' }
);
it('should delete ugly comments from the generated story source', () => {
expect(result.storySource).toMatchSnapshot();
});
});
it('will not change the source when there are no "storiesOf" functions', () => {
const mockFilePath = './__mocks__/inject-decorator.no-stories.txt';
const source = fs.readFileSync(mockFilePath, 'utf-8');
const result = injectDecorator(
source,
ADD_DECORATOR_STATEMENT,
path.resolve(__dirname, mockFilePath)
);
expect(result.changed).toBeFalsy();
expect(result.addsMap).toEqual({});
expect(result.source).toMatchSnapshot();
});
describe('injectDecorator option is false', () => {
const mockFilePath = './__mocks__/inject-decorator.stories.txt';
const source = fs.readFileSync(mockFilePath, 'utf-8');
const result = injectDecorator(
source,
ADD_DECORATOR_STATEMENT,
path.resolve(__dirname, mockFilePath),
{
injectDecorator: false,
parser: 'javascript',
}
);
it('does not inject stories decorator after the all "storiesOf" functions', () => {
expect(result.source).toMatchSnapshot();
});
});
describe('injectDecorator option is false - angular', () => {
const mockFilePath = './__mocks__/inject-decorator.angular-stories.txt';
const source = fs.readFileSync(mockFilePath, 'utf-8');
const result = injectDecorator(
source,
ADD_DECORATOR_STATEMENT,
path.resolve(__dirname, mockFilePath),
{
injectDecorator: false,
parser: 'typescript',
}
);
it('does not inject stories decorator after the all "storiesOf" functions', () => {
expect(result.source).toMatchSnapshot();
});
});
describe('injectDecorator option is false - flow', () => {
const mockFilePath = './__mocks__/inject-decorator.flow-stories.txt';
const source = fs.readFileSync(mockFilePath, 'utf-8');
const result = injectDecorator(
source,
ADD_DECORATOR_STATEMENT,
path.resolve(__dirname, mockFilePath),
{
injectDecorator: false,
parser: 'flow',
}
);
it('does not inject stories decorator after the all "storiesOf" functions', () => {
expect(result.source).toMatchSnapshot();
});
});
describe('injectDecorator option is false - ts', () => {
const mockFilePath = './__mocks__/inject-decorator.ts.txt';
const source = fs.readFileSync(mockFilePath, 'utf-8');
const result = injectDecorator(
source,
ADD_DECORATOR_STATEMENT,
path.resolve(__dirname, mockFilePath),
{
injectDecorator: false,
parser: 'typescript',
}
);
it('does not inject stories decorator after the all "storiesOf" functions', () => {
expect(result.source).toMatchSnapshot();
});
});
});

110
addons/storysource/src/loader/parse-helpers.js
View File

@ -1,110 +0,0 @@
const { toId } = require('@storybook/router/utils');
const STORIES_OF = 'storiesOf';
function pushParts(source, parts, from, to) {
const start = source.slice(from, to);
parts.push(start);
const end = source.slice(to);
parts.push(end);
}
function getKindFromStoryOfNode(object) {
if (object.arguments.length < 1) {
return '';
}
const kindArgument = object.arguments[0];
if (kindArgument.type === 'Literal' || kindArgument.type === 'StringLiteral') {
return kindArgument.value;
}
if (kindArgument.type === 'TemplateLiteral') {
// we can generate template, but it will not be a real value
// until the full template compilation. probably won't fix.
return '';
}
// other options may include some complex usages.
return '';
}
function findRelatedKind(object) {
if (!object || !object.callee) {
return '';
}
if (object.callee.name === STORIES_OF) {
return getKindFromStoryOfNode(object);
}
return findRelatedKind(object.callee.object);
}
export function patchNode(node) {
if (node.range && node.range.length === 2 && node.start === undefined && node.end === undefined) {
const [start, end] = node.range;
// eslint-disable-next-line no-param-reassign
node.start = start;
// eslint-disable-next-line no-param-reassign
node.end = end;
}
if (!node.range && node.start !== undefined && node.end !== undefined) {
// eslint-disable-next-line no-param-reassign
node.range = [node.start, node.end];
}
return node;
}
export function handleADD(node, parent, adds) {
if (!node.property || !node.property.name || node.property.name.indexOf('add') !== 0) {
return;
}
const addArgs = parent.arguments;
if (!addArgs || addArgs.length < 2) {
return;
}
const storyName = addArgs[0];
const lastArg = addArgs[addArgs.length - 1];
if (storyName.type !== 'Literal' && storyName.type !== 'StringLiteral') {
// if story name is not literal, it's much harder to extract it
return;
}
const kind = findRelatedKind(node.object) || '';
if (kind && storyName.value) {
const key = toId(kind, storyName.value);
// eslint-disable-next-line no-param-reassign
adds[key] = {
// Debug: code: source.slice(storyName.start, lastArg.end),
startLoc: {
col: storyName.loc.start.column,
line: storyName.loc.start.line,
},
endLoc: {
col: lastArg.loc.end.column,
line: lastArg.loc.end.line,
},
};
}
}
export function handleSTORYOF(node, parts, source, lastIndex) {
if (!node.callee || !node.callee.name || node.callee.name !== STORIES_OF) {
return lastIndex;
}
parts.pop();
pushParts(source, parts, lastIndex, node.end);
return node.end;
}

20
addons/storysource/src/loader/parsers/index.js
View File

@ -1,20 +0,0 @@
function getParser(type) {
if (type === 'javascript' || !type) {
// eslint-disable-next-line global-require
return require('./parser-js').default;
}
if (type === 'typescript') {
// eslint-disable-next-line global-require
return require('./parser-ts').default;
}
if (type === 'flow') {
// eslint-disable-next-line global-require
return require('./parser-flow').default;
}
throw new Error(`Parser of type "${type}" is not supported`);
}
export default getParser;

9
addons/storysource/src/loader/parsers/parser-flow.js
View File

@ -1,9 +0,0 @@
import parseFlow from 'prettier/parser-flow';
function parse(source) {
return parseFlow.parsers.flow.parse(source);
}
export default {
parse,
};

9
addons/storysource/src/loader/parsers/parser-js.js
View File

@ -1,9 +0,0 @@
import parseJs from 'prettier/parser-babylon';
function parse(source) {
return parseJs.parsers.babel.parse(source);
}
export default {
parse,
};

9
addons/storysource/src/loader/parsers/parser-ts.js
View File

@ -1,9 +0,0 @@
import parseTs from 'prettier/parser-typescript';
function parse(source) {
return parseTs.parsers.typescript.parse(source);
}
export default {
parse,
};

38
addons/storysource/src/loader/traverse-helpers.js
View File

@ -1,38 +0,0 @@
import { handleADD, handleSTORYOF, patchNode } from './parse-helpers';
const estraverse = require('estraverse');
export function splitSTORYOF(ast, source) {
let lastIndex = 0;
const parts = [source];
estraverse.traverse(ast, {
fallback: 'iteration',
enter: node => {
patchNode(node);
if (node.type === 'CallExpression') {
lastIndex = handleSTORYOF(node, parts, source, lastIndex);
}
},
});
return parts;
}
export function findAddsMap(ast) {
const adds = {};
estraverse.traverse(ast, {
fallback: 'iteration',
enter: (node, parent) => {
patchNode(node);
if (node.type === 'MemberExpression') {
handleADD(node, parent, adds);
}
},
});
return adds;
}

14
addons/viewport/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Storybook addon to change the viewport size to mobile",
"keywords": [
"addon",
@ -21,12 +21,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.37",
"@storybook/api": "5.2.0-alpha.37",
"@storybook/client-logger": "5.2.0-alpha.37",
"@storybook/components": "5.2.0-alpha.37",
"@storybook/core-events": "5.2.0-alpha.37",
"@storybook/theming": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/api": "5.2.0-alpha.40",
"@storybook/client-logger": "5.2.0-alpha.40",
"@storybook/components": "5.2.0-alpha.40",
"@storybook/core-events": "5.2.0-alpha.40",
"@storybook/theming": "5.2.0-alpha.40",
"core-js": "^3.0.1",
"global": "^4.3.2",
"memoizerific": "^1.11.3",

4
addons/viewport/src/Tool.tsx
View File

@ -118,7 +118,7 @@ const ActiveViewportSize = styled.div(() => ({
display: 'inline-flex',
}));
const ActiveViewportLabel = styled.div(({ theme }) => ({
const ActiveViewportLabel = styled.div<{}>(({ theme }) => ({
display: 'inline-block',
textDecoration: 'none',
padding: '10px',
@ -137,7 +137,7 @@ const IconButtonWithLabel = styled(IconButton)(() => ({
alignItems: 'center',
}));
const IconButtonLabel = styled.div(({ theme }) => ({
const IconButtonLabel = styled.div<{}>(({ theme }) => ({
fontSize: theme.typography.size.s2 - 1,
marginLeft: '10px',
}));

74
app/angular/index.d.ts vendored
View File

@ -1,74 +0,0 @@
/*
* ATTENTION:
* - moduleMetadata
* - NgModuleMetadata
* - ICollection
*
* These typings are coped out of decorators.d.ts and types.d.ts in order to fix a bug with tsc
* It was imported out of dist before which was not the proper way of exporting public API
*
* This can be fixed by migrating app/angular to typescript
*/
export declare const moduleMetadata: (
metadata: Partial<NgModuleMetadata>
) => (storyFn: () => any) => any;
export interface NgModuleMetadata {
declarations?: any[];
entryComponents?: any[];
imports?: any[];
schemas?: any[];
providers?: any[];
}
export interface ICollection {
[p: string]: any;
}
export interface IStorybookStory {
name: string;
render: () => any;
}
/** @todo typo in Storibook */
export interface IStoribookSection {
kind: string;
stories: IStorybookStory[];
}
export interface IStoryContext {
kind: string;
name: string;
parameters: any;
}
export interface IStory {
props?: ICollection;
moduleMetadata?: Partial<NgModuleMetadata>;
component?: any;
template?: string;
}
export type IGetStory = (context: IStoryContext) => IStory;
export interface IApi {
kind: string;
addDecorator: (decorator: any) => IApi;
addParameters: (parameters: any) => IApi;
add: (storyName: string, getStory: IGetStory, parameters?: any) => IApi;
}
declare module '@storybook/angular' {
export function storiesOf(kind: string, module: NodeModule): IApi;
export function setAddon(addon: any): void;
export function addDecorator(decorator: any): IApi;
export function addParameters(parameters: any): IApi;
export function configure(loaders: () => void, module: NodeModule): void;
export function getStorybook(): IStoribookSection[];
export function forceReRender(): void;
}

18
app/angular/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
"version": "5.2.0-alpha.37",
"version": "5.2.0-alpha.40",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -16,7 +16,7 @@
},
"license": "MIT",
"main": "dist/client/index.js",
"jsnext:main": "src/client/index.js",
"types": "dist/client/index.d.ts",
"bin": {
"build-storybook": "./bin/build.js",
"start-storybook": "./bin/index.js",
@ -26,8 +26,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.2.0-alpha.37",
"@storybook/node-logger": "5.2.0-alpha.37",
"@storybook/addons": "5.2.0-alpha.40",
"@storybook/core": "5.2.0-alpha.40",
"@storybook/node-logger": "5.2.0-alpha.40",
"angular2-template-loader": "^0.6.2",
"core-js": "^3.0.1",
"fork-ts-checker-webpack-plugin": "^1.3.4",
@ -35,10 +36,15 @@
"regenerator-runtime": "^0.12.1",
"sass-loader": "^7.1.0",
"ts-loader": "^6.0.1",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"tsconfig-paths-webpack-plugin": "^3.2.0"
},
"devDependencies": {
"@types/autoprefixer": "^9.4.0",
"@types/webpack-env": "^1.13.9",
"webpack": "^4.33.0"
},
"peerDependencies": {
"@angular-devkit/build-angular": ">=6.0.0",
"@angular-devkit/core": "^0.6.1 || >=7.0.0",
"@angular/common": ">=6.0.0",
"@angular/compiler": ">=6.0.0",
@ -49,6 +55,8 @@
"autoprefixer": "^8.1.0",
"babel-loader": "^7.0.0 || ^8.0.0",
"rxjs": "^6.0.0",
"typescript": "^3.4.0",
"webpack": "^4.32.2",
"zone.js": "^0.8.29 || ^0.9.0"
},
"engines": {

2
app/angular/src/client/index.js → app/angular/src/client/index.ts
View File

@ -12,6 +12,8 @@ export {
export { moduleMetadata } from './preview/angular/decorators';
// tsc wants to use NodeModule instead of WebpackModule
declare const module: any;
if (module && module.hot && module.hot.decline) {
module.hot.decline();
}

0
app/angular/src/client/preview/angular-polyfills.js → app/angular/src/client/preview/angular-polyfills.ts
View File

4
app/angular/src/client/preview/angular/app.token.ts
View File

@ -1,4 +1,4 @@
import { InjectionToken } from '@angular/core';
import { NgStory } from './types';
import { StoryFnAngularReturnType } from '../types';
export const STORY = new InjectionToken<NgStory>('story');
export const STORY = new InjectionToken<StoryFnAngularReturnType>('story');

8
app/angular/src/client/preview/angular/components/app.component.ts
View File

@ -21,7 +21,7 @@ import {
import { Observable, Subscription } from 'rxjs';
import { first } from 'rxjs/operators';
import { STORY } from '../app.token';
import { NgStory, ICollection } from '../types';
import { StoryFnAngularReturnType, ICollection } from '../../types';
@Component({
selector: 'storybook-dynamic-app-root',
@ -36,11 +36,11 @@ export class AppComponent implements OnInit, OnDestroy {
constructor(
private cfr: ComponentFactoryResolver,
private changeDetectorRef: ChangeDetectorRef,
@Inject(STORY) private data: Observable<NgStory>
@Inject(STORY) private data: Observable<StoryFnAngularReturnType>
) {}
ngOnInit(): void {
this.data.pipe(first()).subscribe((data: NgStory) => {
this.data.pipe(first()).subscribe((data: StoryFnAngularReturnType) => {
this.target.clear();
const compFactory = this.cfr.resolveComponentFactory(data.component);
const componentRef = this.target.createComponent(compFactory);
@ -69,7 +69,7 @@ export class AppComponent implements OnInit, OnDestroy {
/**
* Set inputs and outputs
*/
private setProps(instance: any, { props = {} }: NgStory): void {
private setProps(instance: any, { props = {} }: StoryFnAngularReturnType): void {
const changes: SimpleChanges = {};
const hasNgOnChangesHook = !!instance.ngOnChanges;

2
app/angular/src/client/preview/angular/decorators.ts
View File

@ -1,5 +1,5 @@
/* eslint-disable no-param-reassign */
import { NgModuleMetadata } from './types';
import { NgModuleMetadata } from '../types';
export const moduleMetadata = (metadata: Partial<NgModuleMetadata>) => (storyFn: () => any) => {
const story = storyFn();

9
app/angular/src/client/preview/angular/helpers.ts
View File

@ -5,9 +5,10 @@ import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { ReplaySubject } from 'rxjs';
import { StoryFn } from '@storybook/addons';
import { AppComponent } from './components/app.component';
import { STORY } from './app.token';
import { NgModuleMetadata, IStoryFn, NgStory } from './types';
import { NgModuleMetadata, StoryFnAngularReturnType } from '../types';
declare global {
interface Window {
@ -29,7 +30,7 @@ const getModule = (
declarations: (Type<any> | any[])[],
entryComponents: (Type<any> | any[])[],
bootstrap: (Type<any> | any[])[],
data: NgStory,
data: StoryFnAngularReturnType,
moduleMetadata: NgModuleMetadata
) => {
storyData.next(data);
@ -100,7 +101,7 @@ const getExistenceOfComponentInModules = (
});
};
const initModule = (storyFn: IStoryFn) => {
const initModule = (storyFn: StoryFn<StoryFnAngularReturnType>) => {
const storyObj = storyFn();
const { component, template, props, styles, moduleMetadata = {} } = storyObj;
@ -167,7 +168,7 @@ const draw = (newModule: DynamicComponentType): void => {
}
};
export const renderNgApp = (storyFn: IStoryFn, forced: boolean) => {
export const renderNgApp = (storyFn: StoryFn<StoryFnAngularReturnType>, forced: boolean) => {
if (!forced) {
draw(initModule(storyFn));
} else {

Some files were not shown because too many files have changed in this diff Show More