Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Core: Support valid globs #10926

Merged
merged 22 commits into from
May 29, 2020
Merged
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .babelrc.js
Original file line number Diff line number Diff line change
@@ -31,6 +31,7 @@ module.exports = {
},
],
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-private-methods', { loose: true }],
'@babel/plugin-proposal-export-default-from',
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
19 changes: 19 additions & 0 deletions MIGRATION.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@
- [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
- [Hoisted CSF annotations](#hoisted-csf-annotations)
- [Zero config typescript](#zero-config-typescript)
- [Correct globs in main.js](#correct-globs-in-main-js)
- [Backgrounds addon has a new api](#backgrounds-addon-has-a-new-api)
- [CRA preset removed](#cra-preset-removed)
- [Args passed as first argument to story](#args-passed-as-first-argument-to-story)
@@ -158,6 +159,24 @@ Storybook has built-in Typescript support in 6.0. That means you should remove y

To migrate from an old setup, we recommend deleting any typescript-specific webpack/babel configurations in your project. If you want to override the defaults, see the [typescript configuration docs](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/typescript-config/index.md).

### Correct globs in main.js

In 5.3 we introduced the `main.js` file with a `stories` property. This property was documented as a "glob" pattern. This was our intention, however the implementation allowed for non valid globs to be specified and work. In fact, we promoted invalid globs in our documentation and CLI templates.

We've corrected this, the CLI templates have been changed to use valid globs.

We've also changed the code that resolves these globs, so that invalid globs will log a warning. They will break in the future, so if you see this warning, please ensure you're specifying a valid glob.

Example of an **invalid** glob:
```
stories: ['./**/*.stories.(ts|js)']
```

Example of a **valid** glob:
```
stories: ['./**/*.stories.@(ts|js)']
```

### Backgrounds addon has a new api

Starting in 6.0, the backgrounds addon now receives an object instead of an array as parameter, with a property to define the default background.
2 changes: 1 addition & 1 deletion addons/docs/README.md
Original file line number Diff line number Diff line change
@@ -113,7 +113,7 @@ Then add the following to your `.storybook/main.js`:

```js
module.exports = {
stories: ['../src/**/*.stories.(js|mdx)'],
stories: ['../src/**/*.stories.@(js|mdx)'],
addons: ['@storybook/addon-docs'],
};
```
2 changes: 1 addition & 1 deletion addons/docs/angular/README.md
Original file line number Diff line number Diff line change
@@ -106,7 +106,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:

```ts
module.exports = {
stories: ['../src/stories/**/*.stories.(js|ts|mdx)'],
stories: ['../src/stories/**/*.stories.@(js|ts|mdx)'],
};
```

2 changes: 1 addition & 1 deletion addons/docs/common/README.md
Original file line number Diff line number Diff line change
@@ -44,7 +44,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:

```js
module.exports = {
stories: ['../src/stories/**/*.stories.(js|mdx)'],
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
};
```

2 changes: 1 addition & 1 deletion addons/docs/docs/docspage.md
Original file line number Diff line number Diff line change
@@ -155,7 +155,7 @@ You can interleave your own components to customize the auto-generated contents

## Story file names

Unless you use a custom webpack configuration, all of your story files should have the suffix `*.stories.[jt]sx?`, e.g. `"Badge.stories.js"`, `"Badge.stories.tsx"`, etc.
Unless you use a custom webpack configuration, all of your story files should have the suffix `*.stories.@(j|t)sx?`, e.g. `"Badge.stories.js"`, `"Badge.stories.tsx"`, etc.

The docs preset assumes this naming convention for its `source-loader` setup. If you want to use a different naming convention, you'll need a [manual configuration](../README.md#manual-configuration).

2 changes: 1 addition & 1 deletion addons/docs/ember/README.md
Original file line number Diff line number Diff line change
@@ -88,7 +88,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:

```js
module.exports = {
stories: ['../src/stories/**/*.stories.(js|mdx)'],
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
};
```

2 changes: 1 addition & 1 deletion addons/docs/react/README.md
Original file line number Diff line number Diff line change
@@ -77,7 +77,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:

```js
module.exports = {
stories: ['../src/stories/**/*.stories.(js|mdx)'],
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
};
```

2 changes: 1 addition & 1 deletion addons/docs/vue/README.md
Original file line number Diff line number Diff line change
@@ -103,7 +103,7 @@ Then update your `.storybook/main.js` to make sure you load MDX files:

```js
module.exports = {
stories: ['../src/stories/**/*.stories.(js|mdx)'],
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
};
```

Original file line number Diff line number Diff line change
@@ -53,8 +53,10 @@ function getConfigPathParts(input: string): Output {
output.stories = stories.map(
(pattern: string | { path: string; recursive: boolean; match: string }) => {
const { path: basePath, recursive, match } = toRequireContext(pattern);
const regex = new RegExp(match);

// eslint-disable-next-line no-underscore-dangle
return global.__requireContext(configDir, basePath, recursive, match);
return global.__requireContext(configDir, basePath, recursive, regex);
}
);
}
4 changes: 2 additions & 2 deletions docs/src/pages/guides/guide-angular/index.md
Original file line number Diff line number Diff line change
@@ -55,11 +55,11 @@ To do that, create a file at `.storybook/main.js` with the following content:

```js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
stories: ['../src/**/*.stories.@(ts|js)'],
};
```

That will load all the stories underneath your `../src` directory that match the pattern `*.stories.[tj]s`. We recommend co-locating your stories with your source files, but you can place them wherever you choose.
That will load all the stories underneath your `../src` directory that match the pattern `*.stories.@(ts|js)`. We recommend co-locating your stories with your source files, but you can place them wherever you choose.

## Step 4: Storybook TypeScript configuration

2 changes: 1 addition & 1 deletion docs/src/pages/guides/guide-ember/index.md
Original file line number Diff line number Diff line change
@@ -60,7 +60,7 @@ To do that, create a file at `.storybook/main.js` with the following content:

```js
module.exports = {
stories: ['../app/**/*.stories.[tj]s'],
stories: ['../app/**/*.stories.@(ts|js)'],
};
```

4 changes: 2 additions & 2 deletions docs/src/pages/guides/guide-html/index.md
Original file line number Diff line number Diff line change
@@ -63,11 +63,11 @@ To do that, create a file at `.storybook/main.js` with the following content:

```js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
stories: ['../src/**/*.stories.@(ts|js)'],
};
```

That will load all the stories underneath your `../src` directory that match the pattern `*.stories.[tj]s`. We recommend co-locating your stories with your source files, but you can place them wherever you choose.
That will load all the stories underneath your `../src` directory that match the pattern `*.stories.@(ts|js)`. We recommend co-locating your stories with your source files, but you can place them wherever you choose.

## Step 4: Write your stories

2 changes: 1 addition & 1 deletion docs/src/pages/guides/guide-marko/index.md
Original file line number Diff line number Diff line change
@@ -55,7 +55,7 @@ To do that, create a file at `.storybook/main.js` with the following content:

```js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
stories: ['../src/**/*.stories.@(ts|js)'],
};
```

2 changes: 1 addition & 1 deletion docs/src/pages/guides/guide-mithril/index.md
Original file line number Diff line number Diff line change
@@ -56,7 +56,7 @@ To do that, create a file at `.storybook/main.js` with the following content:

```js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
stories: ['../src/**/*.stories.@(ts|js)'],
};
```

2 changes: 1 addition & 1 deletion docs/src/pages/guides/guide-preact/index.md
Original file line number Diff line number Diff line change
@@ -56,7 +56,7 @@ To do that, create a file at `.storybook/main.js` with the following content:

```js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
stories: ['../src/**/*.stories.@(ts|js)'],
};
```

2 changes: 1 addition & 1 deletion docs/src/pages/guides/guide-rax/index.md
Original file line number Diff line number Diff line change
@@ -56,7 +56,7 @@ To do that, create a file at `.storybook/main.js` with the following content:

```js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
stories: ['../src/**/*.stories.@(ts|js)'],
};
```

2 changes: 1 addition & 1 deletion docs/src/pages/guides/guide-react/index.md
Original file line number Diff line number Diff line change
@@ -74,7 +74,7 @@ To do that, create a file at `.storybook/main.js` with the following content:

```js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
stories: ['../src/**/*.stories.@(ts|js)'],
};
```

2 changes: 1 addition & 1 deletion docs/src/pages/guides/guide-riot/index.md
Original file line number Diff line number Diff line change
@@ -55,7 +55,7 @@ To do that, create a file at `.storybook/main.js` with the following content:

```js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
stories: ['../src/**/*.stories.@(ts|js)'],
};
```

2 changes: 1 addition & 1 deletion docs/src/pages/guides/guide-svelte/index.md
Original file line number Diff line number Diff line change
@@ -66,7 +66,7 @@ To do that, create a file at `.storybook/main.js` with the following content:

```js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
stories: ['../src/**/*.stories.@(ts|js)'],
};
```

2 changes: 1 addition & 1 deletion docs/src/pages/guides/guide-vue/index.md
Original file line number Diff line number Diff line change
@@ -81,7 +81,7 @@ To do that, create a file at `.storybook/main.js` with the following content:

```js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
stories: ['../src/**/*.stories.@(ts|js)'],
};
```

4 changes: 2 additions & 2 deletions docs/src/pages/guides/guide-web-components/index.md
Original file line number Diff line number Diff line change
@@ -62,11 +62,11 @@ To do that, create a file at `.storybook/main.js` with the following content:

```js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
stories: ['../src/**/*.stories.@(ts|js)'],
};
```

That will load all the stories underneath your `../src` directory that match the pattern `*.stories.[tj]s`. We recommend co-locating your stories with your source files, but you can place them wherever you choose.
That will load all the stories underneath your `../src` directory that match the pattern `*.stories.@(ts|js)`. We recommend co-locating your stories with your source files, but you can place them wherever you choose.

## Step 4: Write your stories

2 changes: 1 addition & 1 deletion examples/angular-cli/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
stories: ['../src/stories/**/*.stories.(ts|mdx)'],
stories: ['../src/stories/**/*.stories.@(ts|mdx)'],
addons: [
'@storybook/addon-docs',
'@storybook/addon-controls',
2 changes: 1 addition & 1 deletion examples/aurelia-kitchen-sink/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
stories: ['../src/stories/**/*.stories.(ts|mdx)'],
stories: ['../src/stories/**/*.stories.@(ts|mdx)'],
addons: [
'@storybook/addon-docs',
'@storybook/addon-storysource',
2 changes: 1 addition & 1 deletion examples/cra-kitchen-sink/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -15,5 +15,5 @@ module.exports = {
'@storybook/addon-a11y',
'@storybook/addon-jest',
],
stories: ['../src/stories/**/*.stories.(js|mdx)'],
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
};
2 changes: 1 addition & 1 deletion examples/cra-ts-kitchen-sink/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
const path = require('path');

module.exports = {
stories: ['../src/**/*.stories.(mdx|tsx|ts|jsx|js)'],
stories: ['../src/**/*.stories.@(mdx|tsx|ts|jsx|js)'],
addons: [
{
name: '@storybook/preset-create-react-app',
6 changes: 3 additions & 3 deletions examples/official-storybook/main.ts
Original file line number Diff line number Diff line change
@@ -3,9 +3,9 @@ import type { StorybookConfig } from '@storybook/core/types';
module.exports = {
stories: [
// FIXME: Breaks e2e tests './intro.stories.mdx',
'../../lib/ui/src/**/*.stories.(js|tsx|mdx)',
'../../lib/components/src/**/*.stories.(js|tsx|mdx)',
'./stories/**/*.stories.(js|ts|tsx|mdx)',
'../../lib/ui/src/**/*.stories.@(js|tsx|mdx)',
'../../lib/components/src/**/*.stories.@(js|tsx|mdx)',
'./stories/**/*.stories.@(js|ts|tsx|mdx)',
'./../../addons/docs/**/*.stories.tsx',
],
addons: [
2 changes: 1 addition & 1 deletion examples/vue-cli/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = {
stories: ['../src/**/*.stories.(ts|js|mdx)'],
stories: ['../src/**/*.stories.@(ts|js|mdx)'],
addons: ['@storybook/addon-docs', '@storybook/addon-storysource', '@storybook/preset-scss'],
};
2 changes: 1 addition & 1 deletion examples/vue-kitchen-sink/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
stories: ['../src/stories/**/*.stories.(js|mdx)'],
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
addons: [
'@storybook/addon-docs',
'@storybook/addon-storysource',
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = {
stories: ['../src/**/*.stories.(ts|mdx)'],
stories: ['../src/**/*.stories.@(ts|mdx)'],
addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links'],
};
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = {
stories: ['../src/**/*.stories.(ts|mdx)'],
stories: ['../src/**/*.stories.@(ts|mdx)'],
addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links'],
};
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = {
stories: ['../stories/**/*.stories.(js|mdx)'],
stories: ['../stories/**/*.stories.@(js|mdx)'],
addons: ['@storybook/addon-docs'],
};
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = {
stories: ['../stories/**/*.stories.(ts|tsx|js|jsx)'],
stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
stories: ['../stories/**/*.stories.(js|mdx)'],
stories: ['../stories/**/*.stories.@(js|mdx)'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-links',
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
stories: ['../src/**/*.stories.(ts|tsx|js|jsx)'],
stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)'],
addons: [
'@storybook/preset-create-react-app',
'@storybook/addon-actions',
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
stories: ['../src/**/*.stories.(js|mdx)'],
stories: ['../src/**/*.stories.@(js|mdx)'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-links',
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = {
stories: ['../src/**/*.stories.(js|mdx)'],
stories: ['../src/**/*.stories.@(js|mdx)'],
addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links'],
};
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
stories: ['../stories/**/*.stories.(js|mdx)'],
stories: ['../stories/**/*.stories.@(js|mdx)'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-links',
4 changes: 3 additions & 1 deletion lib/core/package.json
Original file line number Diff line number Diff line change
@@ -60,6 +60,8 @@
"@storybook/router": "6.0.0-beta.17",
"@storybook/theming": "6.0.0-beta.17",
"@storybook/ui": "6.0.0-beta.17",
"@types/glob-base": "^0.3.0",
"@types/micromatch": "^4.0.1",
"@types/node-fetch": "^2.5.4",
"airbnb-js-shims": "^2.2.1",
"ansi-to-html": "^0.6.11",
@@ -97,7 +99,7 @@
"ip": "^1.1.5",
"json5": "^2.1.1",
"lazy-universal-dotenv": "^3.0.1",
"nanomatch": "^1.2.13",
"micromatch": "^4.0.2",
"node-fetch": "^2.6.0",
"pkg-dir": "^4.2.0",
"pnp-webpack-plugin": "1.6.4",
13 changes: 9 additions & 4 deletions lib/core/src/server/preview/entries.js
Original file line number Diff line number Diff line change
@@ -57,13 +57,18 @@ export async function createPreviewEntry(options) {
if (stories && stories.length) {
entries.push(path.resolve(path.join(configDir, `generated-stories-entry.js`)));

const files = (await Promise.all(stories.map((g) => glob(g)))).reduce((a, b) => a.concat(b));
const files = (
await Promise.all(stories.map((g) => glob(path.join(configDir, g))))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ndelangen Is this correct? I don't think it makes sense to join the glob with the configDir. This means that all globs before this pr won't work anymore

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes this is intentional indeed.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ndelangen if this is a breaking change do we need to document it in MIGRATION.md?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is def a breaking change that should be documented. But it seems really odd to me that your glob become .storybook/**/*.stories. IDK when I would ever want that. In reality it always must be something like .storybook/../**/*.stories.

).reduce((a, b) => a.concat(b));

if (files.length === 0) {
logger.warn(dedent`
We found no files matching any of the following globs:

${stories.join('\n')}
We found no files matching any of the following globs:

${stories.join('\n')}

Maybe your glob was invalid?
see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#correct-globs-in-main-js
`);
} else {
logger.info(`=> Adding stories defined in "${path.join(configDir, 'main.js')}".`);
Loading