mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 21:01:08 +08:00
Merge branch 'next' into 16937-theming-change-normal-theme-to-light-theme
This commit is contained in:
Norbert de Langen
commit
dad261a988
@ -41,22 +41,25 @@ Interactions relies on "instrumented" versions of Jest and Testing Library, that
|
||||
`@storybook/testing-library` instead of their original package. You can then use these libraries in your `play` function.
|
||||
|
||||
```js
|
||||
import { Button } from './Button';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { within, userEvent } from '@storybook/testing-library';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
onClick: { action: true },
|
||||
},
|
||||
};
|
||||
|
||||
export const Demo = {
|
||||
play: async ({ args, canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.click(canvas.getByRole('button'));
|
||||
await expect(args.onClick).toHaveBeenCalled();
|
||||
},
|
||||
const Template = (args) => <Button {...args} />;
|
||||
|
||||
export const Demo = Template.bind({});
|
||||
Demo.play = async ({ args, canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.click(canvas.getByRole('button'));
|
||||
await expect(args.onClick).toHaveBeenCalled();
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -1,15 +1,21 @@
|
||||
import 'jest-specific-snapshot';
|
||||
import { StoryshotsTestMethod, TestMethodOptions } from './api/StoryshotsOptions';
|
||||
import {
|
||||
StoryshotsTestMethod,
|
||||
TestMethodOptions,
|
||||
StoryshotsOptions,
|
||||
} from './api/StoryshotsOptions';
|
||||
|
||||
const isFunction = (obj: any) => !!(obj && obj.constructor && obj.call && obj.apply);
|
||||
const optionsOrCallOptions = (opts: any, story: any) => (isFunction(opts) ? opts(story) : opts);
|
||||
|
||||
type SnapshotsWithOptionsArgType = Pick<StoryshotsOptions, 'renderer' | 'serializer'> | Function;
|
||||
|
||||
type SnapshotsWithOptionsReturnType = (
|
||||
options: Pick<TestMethodOptions, 'story' | 'context' | 'renderTree' | 'snapshotFileName'>
|
||||
) => any;
|
||||
|
||||
export function snapshotWithOptions(
|
||||
options: { renderer?: any; serializer?: any } | Function = {}
|
||||
options: SnapshotsWithOptionsArgType = {}
|
||||
): SnapshotsWithOptionsReturnType {
|
||||
return ({ story, context, renderTree, snapshotFileName }) => {
|
||||
const result = renderTree(story, context, optionsOrCallOptions(options, story));
|
||||
@ -44,7 +50,9 @@ export function snapshotWithOptions(
|
||||
};
|
||||
}
|
||||
|
||||
export function multiSnapshotWithOptions(options = {}): StoryshotsTestMethod {
|
||||
export function multiSnapshotWithOptions(
|
||||
options: SnapshotsWithOptionsArgType = {}
|
||||
): StoryshotsTestMethod {
|
||||
return ({ story, context, renderTree, stories2snapsConverter }) => {
|
||||
const snapshotFileName = stories2snapsConverter.getSnapshotFileName(context);
|
||||
return snapshotWithOptions(options)({ story, context, renderTree, snapshotFileName });
|
||||
|
||||
@ -50,11 +50,12 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@types/puppeteer": "^5.4.0"
|
||||
"@types/puppeteer": "^5.4.0",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "6.5.0-rc.1",
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
"puppeteer": ">=2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"puppeteer": {
|
||||
|
||||
@ -1,11 +1,7 @@
|
||||
import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
|
||||
import {
|
||||
Base64ScreenShotOptions,
|
||||
Browser,
|
||||
DirectNavigationOptions,
|
||||
Page,
|
||||
ElementHandle,
|
||||
} from 'puppeteer';
|
||||
import { ScreenshotOptions, Browser, Page, ElementHandle } from 'puppeteer';
|
||||
|
||||
type PuppeteerLifeCycleEvent = 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2';
|
||||
|
||||
export interface Context {
|
||||
kind: string;
|
||||
@ -20,6 +16,16 @@ interface Options {
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface Base64ScreenShotOptions extends ScreenshotOptions {
|
||||
encoding: 'base64';
|
||||
}
|
||||
|
||||
interface DirectNavigationOptions {
|
||||
referer?: string;
|
||||
timeout?: number;
|
||||
waitUntil?: PuppeteerLifeCycleEvent | PuppeteerLifeCycleEvent[];
|
||||
}
|
||||
|
||||
export interface CommonConfig {
|
||||
storybookUrl: string;
|
||||
chromeExecutablePath: string;
|
||||
@ -40,7 +46,7 @@ export interface ImageSnapshotConfig extends CommonConfig {
|
||||
getMatchOptions: (options: Options) => MatchImageSnapshotOptions;
|
||||
getScreenshotOptions: (options: Options) => Base64ScreenShotOptions;
|
||||
beforeScreenshot: (page: Page, options: Options) => Promise<void | ElementHandle>;
|
||||
afterScreenshot: (options: { image: string; context: Context }) => Promise<void>;
|
||||
afterScreenshot: (options: { image: string | void | Buffer; context: Context }) => Promise<void>;
|
||||
}
|
||||
|
||||
export interface AxeConfig extends CommonConfig {
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
"estraverse": "^5.2.0",
|
||||
"loader-utils": "^2.0.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-syntax-highlighter": "^15.4.5",
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"regenerator-runtime": "^0.13.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -284,4 +284,33 @@ describe('jsxDecorator', () => {
|
||||
'<div className="foo" />'
|
||||
);
|
||||
});
|
||||
|
||||
it('handles stories that trigger Suspense', async () => {
|
||||
// if a story function uses a hook or other library that triggers suspense, it will throw a Promise until it is resolved
|
||||
// and then it will return the story content after the promise is resolved
|
||||
const storyFn = jest.fn();
|
||||
storyFn
|
||||
.mockImplementationOnce(() => {
|
||||
throw Promise.resolve();
|
||||
})
|
||||
.mockImplementation(() => {
|
||||
return <div>resolved args story</div>;
|
||||
});
|
||||
const jsx = '';
|
||||
const context = makeContext('args', { __isArgsStory: true, jsx }, {});
|
||||
expect(() => {
|
||||
jsxDecorator(storyFn, context);
|
||||
}).toThrow(Promise);
|
||||
jsxDecorator(storyFn, context);
|
||||
await new Promise((r) => setTimeout(r, 0));
|
||||
|
||||
expect(mockChannel.emit).toHaveBeenCalledTimes(2);
|
||||
expect(mockChannel.emit).nthCalledWith(1, SNIPPET_RENDERED, 'jsx-test--args', '');
|
||||
expect(mockChannel.emit).nthCalledWith(
|
||||
2,
|
||||
SNIPPET_RENDERED,
|
||||
'jsx-test--args',
|
||||
'<div>\n resolved args story\n</div>'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -177,7 +177,6 @@ export const jsxDecorator = (
|
||||
) => {
|
||||
const channel = addons.getChannel();
|
||||
const skip = skipJsxRender(context);
|
||||
const story = storyFn();
|
||||
|
||||
let jsx = '';
|
||||
|
||||
@ -185,6 +184,7 @@ export const jsxDecorator = (
|
||||
if (!skip) channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
|
||||
});
|
||||
|
||||
const story = storyFn();
|
||||
// We only need to render JSX if the source block is actually going to
|
||||
// consume it. Otherwise it's just slowing us down.
|
||||
if (skip) {
|
||||
|
||||
@ -32,7 +32,7 @@ describe('framework-preset-react-docgen', () => {
|
||||
presets: ['env', 'foo-preset'],
|
||||
overrides: [
|
||||
{
|
||||
test: /\.(mjs|tsx?|jsx?)$/,
|
||||
test: /\.(cjs|mjs|tsx?|jsx?)$/,
|
||||
plugins: [
|
||||
[
|
||||
babelPluginReactDocgenPath,
|
||||
|
||||
@ -21,7 +21,7 @@ export async function babel(config: TransformOptions, options: Options) {
|
||||
overrides: [
|
||||
...(config?.overrides || []),
|
||||
{
|
||||
test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
|
||||
test: reactDocgen === 'react-docgen' ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
|
||||
plugins: [
|
||||
[
|
||||
require.resolve('babel-plugin-react-docgen'),
|
||||
|
||||
@ -66,7 +66,7 @@ We'll need to add the necessary dependencies and make some adjustments. Run the
|
||||
Initialize a local Storybook instance to allow you to test your addon.
|
||||
|
||||
```shell
|
||||
npx sb init
|
||||
npx storybook init
|
||||
```
|
||||
|
||||
<div class="aside">
|
||||
|
||||
@ -8,12 +8,12 @@ Storybook, at its core, is powered by builders such as Webpack and Vite. These b
|
||||
|
||||
## CLI basics
|
||||
|
||||
Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx sb init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack builder based on your current version.
|
||||
Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx storybook init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack builder based on your current version.
|
||||
|
||||
Additionally, you can also provide a flag to Storybook's CLI and specify the builder you want to use:
|
||||
|
||||
```shell
|
||||
npx sb init --builder <webpack4 | webpack5 | vite>
|
||||
npx storybook init --builder <webpack4 | webpack5 | vite>
|
||||
```
|
||||
|
||||
## Manual setup
|
||||
|
||||
@ -9,7 +9,7 @@ Storybook Vite builder bundles your components and stories with [Vite](https://v
|
||||
|
||||
## Setup
|
||||
|
||||
If you ran `npx sb init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.
|
||||
If you ran `npx storybook init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.
|
||||
|
||||
Run the following command to install the builder.
|
||||
|
||||
|
||||
@ -81,7 +81,7 @@ For detailed instructions on migrating from `V6` mode, please see [MIGRATION.md]
|
||||
If your app does not include a babelrc file, and you need one, you can create it by running the following command in your project directory:
|
||||
|
||||
```sh
|
||||
npx sb@next babelrc
|
||||
npx storybook@next babelrc
|
||||
```
|
||||
|
||||
Once the command completes, you should have a `.babelrc.json` file created in the root directory of your project, similar to the following example:
|
||||
|
||||
@ -11,7 +11,7 @@ The most common upgrade is Storybook itself. [Storybook releases](https://storyb
|
||||
To help ease the pain of keeping Storybook up-to-date, we provide a command-line script:
|
||||
|
||||
```sh
|
||||
npx sb upgrade
|
||||
npx storybook upgrade
|
||||
```
|
||||
|
||||
This upgrades all of the Storybook packages in your project to the latest stable version, perform confidence checks of your package versions, and checks for opportunities to run [automigrations](#automigrate) to update your configuration automatically.
|
||||
@ -27,10 +27,10 @@ In addition to running the command, we also recommend checking the [MIGRATION.md
|
||||
Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [Webpack 4 to Webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for:
|
||||
|
||||
```
|
||||
npx sb@next automigrate
|
||||
npx storybook@next automigrate
|
||||
```
|
||||
|
||||
It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`sb upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook.
|
||||
It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`storybook upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook.
|
||||
|
||||
## Prereleases
|
||||
|
||||
@ -39,11 +39,13 @@ In addition to the above, Storybook is under constant development, and we publis
|
||||
To upgrade to the latest pre-release:
|
||||
|
||||
```sh
|
||||
npx sb@next upgrade --prerelease
|
||||
npx storybook@next upgrade --prerelease
|
||||
```
|
||||
|
||||
If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
|
||||
|
||||
</div>
|
||||
|
||||
@ -136,7 +136,7 @@ We encourage bug reports to include reproductions. In the same way that it's pos
|
||||
To do so, run the following command in the root of the monorepo:
|
||||
|
||||
```shell
|
||||
npx sb@next link https://github.com/your-username/your-project.git
|
||||
npx storybook@next link https://github.com/your-username/your-project.git
|
||||
```
|
||||
|
||||
This command creates a project `../storybook-repros/your-project`, and automatically links it to your local Storybook code. After connecting it, you should be able to run Storybook and develop as mentioned [above](#start-developing).
|
||||
@ -144,11 +144,11 @@ This command creates a project `../storybook-repros/your-project`, and automatic
|
||||
If you already have a reproduction on your local machine, you can similarly link it to your monorepo dev setup with the `--local` flag:
|
||||
|
||||
```shell
|
||||
npx sb@next link --local /path/to/local-repro-directory
|
||||
npx storybook@next link --local /path/to/local-repro-directory
|
||||
```
|
||||
|
||||
<div class="aside">
|
||||
💡 The <code>sb link</code> command relies on <code>yarn 2</code> linking under the hood. It requires that the local repro is using <code>yarn 2</code>, which will be the case if you're using the [<code>sb repro</code> command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-<code>yarn 2</code> project, linking will fail.
|
||||
💡 The <code>storybook link</code> command relies on <code>yarn 2</code> linking under the hood. It requires that the local repro is using <code>yarn 2</code>, which will be the case if you're using the [<code>storybook repro</code> command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-<code>yarn 2</code> project, linking will fail.
|
||||
</div>
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
@ -21,7 +21,7 @@ Make sure you have:
|
||||
First, open a terminal and run the following command:
|
||||
|
||||
```shell
|
||||
npx sb@next repro
|
||||
npx storybook@next repro
|
||||
```
|
||||
|
||||
<div class="aside">
|
||||
|
||||
@ -14,7 +14,7 @@ A major strength of Storybook are [addons](https://storybook.js.org/addons) that
|
||||
|
||||
### Installation
|
||||
|
||||
If you ran `sb init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section.
|
||||
If you ran `storybook init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section.
|
||||
|
||||
If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal:
|
||||
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
|
||||
If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
|
||||
- Add the `--type angular` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx storybook init --type angular
|
||||
```
|
||||
|
||||
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
|
||||
|
||||
```shell
|
||||
npx storybook init --use-npm
|
||||
```
|
||||
|
||||
- Add the `--type angular` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx sb init --type angular
|
||||
```
|
||||
|
||||
- Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:
|
||||
|
||||
```shell
|
||||
npx sb@next automigrate
|
||||
npx storybook@next automigrate
|
||||
```
|
||||
|
||||
Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automigrate) for more information on how to set up Webpack 5.
|
||||
@ -26,7 +25,7 @@
|
||||
- If you need further customization to the Storybook builder configuration, you can use the following table as a reference:
|
||||
|
||||
| Configuration element | Description |
|
||||
|------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `"browserTarget"` | Build target to be served using the following format. <br/> `"example-project:builder:config"` |
|
||||
| `"tsConfig"` | Location of the TypeScript configuration file, relative to the current workspace. <br/> `"tsConfig": "./tsconfig.json"`. |
|
||||
| `"port"` | Port used by Storybook. <br/> `"port": 6006` |
|
||||
|
||||
@ -1,14 +1,7 @@
|
||||
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
|
||||
If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
|
||||
|
||||
```shell
|
||||
npx storybook init --use-npm
|
||||
```
|
||||
|
||||
- Add the `--type ember` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx sb init --type ember
|
||||
npx storybook init --type ember
|
||||
```
|
||||
|
||||
- During the install process, if you get the following warning message:
|
||||
@ -21,4 +14,10 @@
|
||||
|
||||
Update the [`@storybook/ember-cli-storybook`](https://www.npmjs.com/package/@storybook/ember-cli-storybook) package to the latest version to fix it.
|
||||
|
||||
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
|
||||
|
||||
```shell
|
||||
npx storybook init --use-npm
|
||||
```
|
||||
|
||||
- For other installation issues, check the [Ember README](../../app/ember/README.md) for additional instructions.
|
||||
@ -1,7 +1,7 @@
|
||||
- Add the `--type html` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx sb init --type html
|
||||
npx storybook init --type html
|
||||
```
|
||||
|
||||
- For other installation issues, check the [Html README](../../app/html/README.md) for additional instructions.
|
||||
@ -1,14 +1,13 @@
|
||||
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
|
||||
If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
|
||||
- Add the `--type preact` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx storybook init --type preact
|
||||
```
|
||||
|
||||
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
|
||||
|
||||
```shell
|
||||
npx storybook init --use-npm
|
||||
```
|
||||
|
||||
- Add the `--type preact` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx sb init --type preact
|
||||
```
|
||||
|
||||
- For other installation issues, check the [Preact README](../../app/preact/README.md) for additional instructions.
|
||||
@ -1,20 +1,19 @@
|
||||
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
|
||||
If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
|
||||
|
||||
```shell
|
||||
npx storybook init --use-npm
|
||||
```
|
||||
|
||||
- Add the `--type react` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx sb init --type react
|
||||
npx storybook init --type react
|
||||
```
|
||||
|
||||
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
|
||||
|
||||
```shell
|
||||
npx storybook init --use-npm
|
||||
```
|
||||
|
||||
- Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:
|
||||
|
||||
```shell
|
||||
npx sb@next automigrate
|
||||
npx storybook@next automigrate
|
||||
```
|
||||
|
||||
Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade) for more information on how to set up Webpack 5.
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
|
||||
If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
|
||||
- Add the `--type svelte` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx storybook init --type svelte
|
||||
```
|
||||
|
||||
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
|
||||
|
||||
```shell
|
||||
npx storybook init --use-npm
|
||||
```
|
||||
|
||||
- Add the `--type svelte` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx sb init --type svelte
|
||||
```
|
||||
|
||||
- For issues with Svelte Native Story Format, check the [Svelte Story Format addon repository](https://github.com/storybookjs/addon-svelte-csf) for instructions.
|
||||
- For other installation issues, check the [Svelte README](../../app/svelte/README.md) for additional instructions.
|
||||
@ -1,18 +1,17 @@
|
||||
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
|
||||
If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
|
||||
|
||||
```shell
|
||||
npx storybook init --use-npm
|
||||
```
|
||||
|
||||
- Add the `--type vue` (for Vue 2), or `--type vue3` (for Vue 3) flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
# For Vue 2 projects
|
||||
npx sb init --type vue
|
||||
npx storybook init --type vue
|
||||
|
||||
# For Vue 3 projects
|
||||
npx sb init --type vue3
|
||||
npx storybook init --type vue3
|
||||
```
|
||||
|
||||
- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
|
||||
|
||||
```shell
|
||||
npx storybook init --use-npm
|
||||
```
|
||||
|
||||
- For other installation issues, check the [Vue 2 README](../../app/vue/README.md), or the [Vue 3 README](../../app/vue3/README.md) for additional instructions.
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
- Add the `--type web_components` flag to the installation command to set up Storybook manually:
|
||||
|
||||
```shell
|
||||
npx sb init --type web_components
|
||||
npx storybook init --type web_components
|
||||
```
|
||||
|
||||
- For other installation issues, check the [Web Components README](../../app/web-components/README.md) for additional instructions.
|
||||
@ -74,12 +74,12 @@ You can also compose Storybooks based on the current development environment (e.
|
||||
So far we've seen how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow, run from your project root:
|
||||
|
||||
```shell
|
||||
npx sb extract
|
||||
npx storybook extract
|
||||
```
|
||||
|
||||
<div class="aside">
|
||||
|
||||
`sb extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Set the environment `SB_CHROMIUM_PATH` to configure your local Chromium installation.
|
||||
`storybook extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Set the environment `SB_CHROMIUM_PATH` to configure your local Chromium installation.
|
||||
|
||||
</div>
|
||||
|
||||
@ -100,7 +100,7 @@ Linking to a Storybook deployed using this approach will yield all the stories a
|
||||
If you need, you can also add additional arguments to this command. For instance, if you want to generate the stories.json file into a custom directory you can use the following:
|
||||
|
||||
```shell
|
||||
npx sb extract my-built-storybook-directory my-other-directory/stories.json
|
||||
npx storybook extract my-built-storybook-directory my-other-directory/stories.json
|
||||
```
|
||||
|
||||
When executed it will lookup a built Storybook in the `my-built-storybook-directory` and create the `stories.json` file in the `my-other-directory` with all the necessary information.
|
||||
|
||||
@ -52,7 +52,7 @@ export default {
|
||||
meshColors: {
|
||||
control: {
|
||||
type: 'color',
|
||||
presetsColors: ['#ff0000', '#00ff00', '#0000ff'],
|
||||
presetColors: ['#ff0000', '#00ff00', '#0000ff'],
|
||||
},
|
||||
},
|
||||
revisionDate: {
|
||||
|
||||
@ -60,7 +60,7 @@ import { Gizmo } from './Gizmo';
|
||||
meshColors: {
|
||||
control: {
|
||||
type: 'color',
|
||||
presetsColors: ['#ff0000', '#00ff00', '#0000ff'],
|
||||
presetColors: ['#ff0000', '#00ff00', '#0000ff'],
|
||||
},
|
||||
},
|
||||
revisionDate: {
|
||||
|
||||
21
docs/snippets/html/button-story-component-decorator.js.mdx
Normal file
21
docs/snippets/html/button-story-component-decorator.js.mdx
Normal file
@ -0,0 +1,21 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import { createButton } from './Button';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
decorators: [(story) => {
|
||||
const decorator = document.createElement('div');
|
||||
decorator.style.margin = '3em';
|
||||
decorator.appendChild(story());
|
||||
return decorator;
|
||||
}],
|
||||
};
|
||||
|
||||
export const Primary = (args) => createButton(args);
|
||||
```
|
||||
23
docs/snippets/html/button-story-component-decorator.ts.mdx
Normal file
23
docs/snippets/html/button-story-component-decorator.ts.mdx
Normal file
@ -0,0 +1,23 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta, StoryFn } from '@storybook/html';
|
||||
|
||||
import { createButton, ButtonArgs } from './Button';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
decorators: [(story) => {
|
||||
const decorator = document.createElement('div');
|
||||
decorator.style.margin = '3em';
|
||||
decorator.appendChild(story());
|
||||
return decorator;
|
||||
}],
|
||||
} as Meta<ButtonArgs>;
|
||||
|
||||
export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
|
||||
```
|
||||
13
docs/snippets/html/button-story-default-exports.js.mdx
Normal file
13
docs/snippets/html/button-story-default-exports.js.mdx
Normal file
@ -0,0 +1,13 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import { createButton } from './Button';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
};
|
||||
```
|
||||
15
docs/snippets/html/button-story-default-exports.ts.mdx
Normal file
15
docs/snippets/html/button-story-default-exports.ts.mdx
Normal file
@ -0,0 +1,15 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta } from '@storybook/html';
|
||||
|
||||
import { createButton, ButtonArgs } from './Button';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
} as Meta<ButtonArgs>;
|
||||
```
|
||||
16
docs/snippets/html/button-story-rename-story.js.mdx
Normal file
16
docs/snippets/html/button-story-rename-story.js.mdx
Normal file
@ -0,0 +1,16 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import { createButton } from './Button';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
};
|
||||
|
||||
export const Primary = (args) => createButton(args);
|
||||
Primary.storyName = 'I am the primary';
|
||||
```
|
||||
18
docs/snippets/html/button-story-rename-story.ts.mdx
Normal file
18
docs/snippets/html/button-story-rename-story.ts.mdx
Normal file
@ -0,0 +1,18 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta, StoryFn } from '@storybook/html';
|
||||
|
||||
import { createButton, ButtonArgs } from './Button';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
} as Meta<ButtonArgs>;
|
||||
|
||||
export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
|
||||
Primary.storyName = 'I am the primary';
|
||||
```
|
||||
26
docs/snippets/html/button-story-using-args.js.mdx
Normal file
26
docs/snippets/html/button-story-using-args.js.mdx
Normal file
@ -0,0 +1,26 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import { createButton } from './Button';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
};
|
||||
|
||||
//👇 We create a “template” of how args map to rendering
|
||||
const Template = (args) => createButton(args);
|
||||
|
||||
//👇 Each story then reuses that template
|
||||
export const Primary = Template.bind({});
|
||||
Primary.args = { primary: true, label: 'Button' };
|
||||
|
||||
export const Secondary = Template.bind({});
|
||||
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
|
||||
|
||||
export const Tertiary = Template.bind({});
|
||||
Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
|
||||
```
|
||||
27
docs/snippets/html/button-story-using-args.ts.mdx
Normal file
27
docs/snippets/html/button-story-using-args.ts.mdx
Normal file
@ -0,0 +1,27 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta, StoryFn } from '@storybook/html';
|
||||
import { createButton, ButtonArgs } from './Button';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
} as Meta<ButtonArgs>;
|
||||
|
||||
//👇 We create a “template” of how args map to rendering
|
||||
const Template: StoryFn<ButtonArgs> = (args): HTMLButtonElement => createButton(args);
|
||||
|
||||
//👇 Each story then reuses that template
|
||||
export const Primary = Template.bind({});
|
||||
Primary.args = { primary: true, label: 'Button' };
|
||||
|
||||
export const Secondary = Template.bind({});
|
||||
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
|
||||
|
||||
export const Tertiary = Template.bind({});
|
||||
Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
|
||||
```
|
||||
@ -1,4 +1,6 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
|
||||
@ -1,16 +1,23 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta, StoryFn } from '@storybook/html';
|
||||
|
||||
type ButtonArgs = {
|
||||
primary: boolean;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
} as Meta;
|
||||
} as Meta<ButtonArgs>;
|
||||
|
||||
//👇 We create a “template” of how args map to rendering
|
||||
const Template: StoryFn = (args): HTMLButtonElement => {
|
||||
const Template: StoryFn<ButtonArgs> = (args): HTMLButtonElement => {
|
||||
const btn = document.createElement('button');
|
||||
btn.innerText = args.label;
|
||||
|
||||
|
||||
25
docs/snippets/html/button-story-with-blue-args.js.mdx
Normal file
25
docs/snippets/html/button-story-with-blue-args.js.mdx
Normal file
@ -0,0 +1,25 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import { createButton } from './Button';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
//👇 Creates specific parameters for the story
|
||||
parameters: {
|
||||
backgrounds: {
|
||||
values: [
|
||||
{ name: 'red', value: '#f00' },
|
||||
{ name: 'green', value: '#0f0' },
|
||||
{ name: 'blue', value: '#00f' },
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Primary = (args) => createButton(args);
|
||||
```
|
||||
27
docs/snippets/html/button-story-with-blue-args.ts.mdx
Normal file
27
docs/snippets/html/button-story-with-blue-args.ts.mdx
Normal file
@ -0,0 +1,27 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta, StoryFn } from '@storybook/html';
|
||||
|
||||
import { createButton, ButtonArgs } from './Button';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
//👇 Creates specific parameters for the story
|
||||
parameters: {
|
||||
backgrounds: {
|
||||
values: [
|
||||
{ name: 'red', value: '#f00' },
|
||||
{ name: 'green', value: '#0f0' },
|
||||
{ name: 'blue', value: '#00f' },
|
||||
],
|
||||
},
|
||||
},
|
||||
} as Meta<ButtonArgs>;
|
||||
|
||||
export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
|
||||
```
|
||||
16
docs/snippets/html/button-story-with-emojis.js.mdx
Normal file
16
docs/snippets/html/button-story-with-emojis.js.mdx
Normal file
@ -0,0 +1,16 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
import { createButton } from './Button';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
};
|
||||
export const Primary = () => createButton({ backgroundColor: "#ff0", label: "Button"});
|
||||
export const Secondary = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
|
||||
export const Tertiary = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
|
||||
```
|
||||
17
docs/snippets/html/button-story-with-emojis.ts.mdx
Normal file
17
docs/snippets/html/button-story-with-emojis.ts.mdx
Normal file
@ -0,0 +1,17 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta, StoryFn } from '@storybook/html';
|
||||
import { createButton, ButtonArgs } from './Button';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
} as Meta<ButtonArgs>;
|
||||
export const Primary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "Button"});
|
||||
export const Secondary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
|
||||
export const Tertiary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
|
||||
```
|
||||
@ -1,4 +1,6 @@
|
||||
```js
|
||||
// Button.stories.js
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
```ts
|
||||
// Button.stories.ts
|
||||
|
||||
import { Meta, StoryFn } from '@storybook/html';
|
||||
|
||||
export default {
|
||||
|
||||
27
docs/snippets/html/list-story-expanded.js.mdx
Normal file
27
docs/snippets/html/list-story-expanded.js.mdx
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
```js
|
||||
// List.stories.js
|
||||
|
||||
import { createList } from './List';
|
||||
import { createListItem } from './ListItem';
|
||||
|
||||
export default {
|
||||
title: 'List',
|
||||
};
|
||||
|
||||
export const Empty = (args) => createList(args);
|
||||
|
||||
export const OneItem = (args) => {
|
||||
const list = createList(args);
|
||||
list.appendChild(createListItem());
|
||||
return list;
|
||||
};
|
||||
|
||||
export const ManyItems = (args) => {
|
||||
const list = createList(args);
|
||||
list.appendChild(createListItem());
|
||||
list.appendChild(createListItem());
|
||||
list.appendChild(createListItem());
|
||||
return list;
|
||||
};
|
||||
```
|
||||
29
docs/snippets/html/list-story-expanded.ts.mdx
Normal file
29
docs/snippets/html/list-story-expanded.ts.mdx
Normal file
@ -0,0 +1,29 @@
|
||||
|
||||
```ts
|
||||
// List.stories.ts
|
||||
|
||||
import { Meta, StoryFn } from '@storybook/html';
|
||||
|
||||
import { createList, ListArgs } from './List';
|
||||
import { createListItem } from './ListItem';
|
||||
|
||||
export default {
|
||||
title: 'List',
|
||||
} as Meta<ListArgs>;
|
||||
|
||||
export const Empty: StoryFn<ListArgs> = (args) => createList(args);
|
||||
|
||||
export const OneItem: StoryFn<ListArgs> = (args) => {
|
||||
const list = createList(args);
|
||||
list.appendChild(createListItem());
|
||||
return list;
|
||||
};
|
||||
|
||||
export const ManyItems: StoryFn<ListArgs> = (args) => {
|
||||
const list = createList(args);
|
||||
list.appendChild(createListItem());
|
||||
list.appendChild(createListItem());
|
||||
list.appendChild(createListItem());
|
||||
return list;
|
||||
};
|
||||
```
|
||||
22
docs/snippets/html/list-story-reuse-data.js.mdx
Normal file
22
docs/snippets/html/list-story-reuse-data.js.mdx
Normal file
@ -0,0 +1,22 @@
|
||||
|
||||
```js
|
||||
// List.stories.js
|
||||
|
||||
import { createList } from './List';
|
||||
import { createListItem } from './ListItem';
|
||||
|
||||
// 👇 We're importing the necessary stories from ListItem
|
||||
import { Selected, Unselected } from './ListItem.stories';
|
||||
|
||||
export default {
|
||||
title: 'List',
|
||||
};
|
||||
|
||||
export const ManyItems = (args) => {
|
||||
const list = createList(args);
|
||||
list.appendChild(createListItem(Selected.args));
|
||||
list.appendChild(createListItem(Unselected.args));
|
||||
list.appendChild(createListItem(Unselected.args));
|
||||
return list;
|
||||
};
|
||||
```
|
||||
32
docs/snippets/html/list-story-reuse-data.ts.mdx
Normal file
32
docs/snippets/html/list-story-reuse-data.ts.mdx
Normal file
@ -0,0 +1,32 @@
|
||||
|
||||
```ts
|
||||
// List.stories.ts
|
||||
|
||||
import { Meta, StoryFn } from '@storybook/html';
|
||||
|
||||
import { createList, ListArgs } from './List';
|
||||
import { createListItem } from './ListItem';
|
||||
|
||||
// 👇 We're importing the necessary stories from ListItem
|
||||
import { Selected, Unselected } from './ListItem.stories';
|
||||
|
||||
export default {
|
||||
title: 'List',
|
||||
} as Meta<ListArgs>;
|
||||
|
||||
export const Empty: StoryFn<ListArgs> = (args) => createList(args);
|
||||
|
||||
export const OneItem: StoryFn<ListArgs> = (args) => {
|
||||
const list = createList(args);
|
||||
list.appendChild(createListItem());
|
||||
return list;
|
||||
};
|
||||
|
||||
export const ManyItems: StoryFn<ListArgs> = (args) => {
|
||||
const list = createList(args);
|
||||
list.appendChild(createListItem(Selected.args));
|
||||
list.appendChild(createListItem(Unselected.args));
|
||||
list.appendChild(createListItem(Unselected.args));
|
||||
return list;
|
||||
};
|
||||
```
|
||||
12
docs/snippets/html/list-story-starter.js.mdx
Normal file
12
docs/snippets/html/list-story-starter.js.mdx
Normal file
@ -0,0 +1,12 @@
|
||||
```js
|
||||
// List.stories.js
|
||||
|
||||
import { createList } from './List';
|
||||
|
||||
export default {
|
||||
title: 'List',
|
||||
};
|
||||
|
||||
// Always an empty list, not super interesting
|
||||
const Template = (args) => createList(args);
|
||||
```
|
||||
14
docs/snippets/html/list-story-starter.ts.mdx
Normal file
14
docs/snippets/html/list-story-starter.ts.mdx
Normal file
@ -0,0 +1,14 @@
|
||||
```ts
|
||||
// List.stories.ts
|
||||
|
||||
import { Meta, StoryFn } from '@storybook/html';
|
||||
|
||||
import { createList, ListArgs } from './List';
|
||||
|
||||
export default {
|
||||
title: 'List',
|
||||
} as Meta<ListArgs>;
|
||||
|
||||
// Always an empty list, not super interesting
|
||||
const Template: StoryFn<ListArgs> = (args) => createList(args);
|
||||
```
|
||||
@ -33,6 +33,8 @@ To define the args of a single story, use the `args` CSF story key:
|
||||
'svelte/button-story-with-args.native-format.mdx',
|
||||
'svelte/button-story-with-args.mdx.mdx',
|
||||
'web-components/button-story-with-args.js.mdx',
|
||||
'html/button-story-with-args.ts.mdx',
|
||||
'html/button-story-with-args.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
@ -37,6 +37,8 @@ The _default_ export metadata controls how Storybook lists your stories and prov
|
||||
'angular/button-story-default-export-with-component.ts.mdx',
|
||||
'svelte/button-story-default-export-with-component.js.mdx',
|
||||
'web-components/button-story-default-export-with-component.js.mdx',
|
||||
'html/button-story-default-export.js.mdx',
|
||||
'html/button-story-default-export.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -59,6 +61,8 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
|
||||
'svelte/button-story.js.mdx',
|
||||
'svelte/button-story.native-format.mdx',
|
||||
'web-components/button-story.js.mdx',
|
||||
'html/button-story.js.mdx',
|
||||
'html/button-story.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -99,6 +103,8 @@ You can rename any particular story you need. For instance, to give it a more ac
|
||||
'angular/button-story-rename-story.ts.mdx',
|
||||
'svelte/button-story-rename-story.js.mdx',
|
||||
'web-components/button-story-rename-story.js.mdx',
|
||||
'html/button-story-rename-story.js.mdx',
|
||||
'html/button-story-rename-story.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -127,6 +133,8 @@ A story is a function that describes how to render a component. You can have mul
|
||||
'svelte/button-story-with-emojis.native-format.mdx',
|
||||
'svelte/button-story-with-emojis.mdx.mdx',
|
||||
'web-components/button-story-with-emojis.js.mdx',
|
||||
'html/button-story-with-emojis.js.mdx',
|
||||
'html/button-story-with-emojis.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -152,6 +160,8 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
|
||||
'svelte/button-story-using-args.js.mdx',
|
||||
'svelte/button-story-using-args.native-format.mdx',
|
||||
'web-components/button-story-using-args.js.mdx',
|
||||
'html/button-story-using-args.js.mdx',
|
||||
'html/button-story-using-args.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -254,6 +264,8 @@ For instance, suppose you wanted to test your Button component against a differe
|
||||
'svelte/button-story-with-blue-args.native-format.mdx',
|
||||
'svelte/button-story-with-blue-args.mdx.mdx',
|
||||
'web-components/button-story-with-blue-args.js.mdx',
|
||||
'html/button-story-with-blue-args.js.mdx',
|
||||
'html/button-story-with-blue-args.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -286,6 +298,8 @@ A simple example is adding padding to a component’s stories. Accomplish this u
|
||||
'svelte/button-story-component-decorator.native-format.mdx',
|
||||
'svelte/button-story-component-decorator.mdx.mdx',
|
||||
'web-components/button-story-component-decorator.js.mdx',
|
||||
'html/button-story-component-decorator.js.mdx',
|
||||
'html/button-story-component-decorator.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -310,6 +324,8 @@ When building design systems or component libraries, you may have two or more co
|
||||
'vue/list-story-starter.ts-3.ts.mdx',
|
||||
'svelte/list-story-starter.native-format.mdx',
|
||||
'web-components/list-story-starter.js.mdx',
|
||||
'html/list-story-starter.js.mdx',
|
||||
'html/list-story-starter.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -330,6 +346,8 @@ In such cases, it makes sense to render a different function for each story:
|
||||
'vue/list-story-expanded.ts-3.ts.mdx',
|
||||
'svelte/list-story-expanded.native-format.mdx',
|
||||
'web-components/list-story-expanded.js.mdx',
|
||||
'html/list-story-expanded.js.mdx',
|
||||
'html/list-story-expanded.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -349,6 +367,8 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
|
||||
'vue/list-story-reuse-data.3.js.mdx',
|
||||
'vue/list-story-reuse-data.ts-3.ts.mdx',
|
||||
'web-components/list-story-reuse-data.js.mdx',
|
||||
'html/list-story-reuse-data.js.mdx',
|
||||
'html/list-story-reuse-data.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ export default {
|
||||
component: Button,
|
||||
argTypes: {
|
||||
children: { control: 'text', name: 'Children', mapping: { basic: 'BASIC' } },
|
||||
type: { control: 'text', name: 'Type' },
|
||||
type: { name: 'Type', control: { type: 'text', maxLength: 32 } },
|
||||
json: { control: 'object', name: 'JSON' },
|
||||
imageUrls: { control: { type: 'file', accept: '.png' }, name: 'Image Urls' },
|
||||
label: {
|
||||
@ -71,8 +71,10 @@ export default {
|
||||
const DEFAULT_NESTED_OBJECT = { a: 4, b: { c: 'hello', d: [1, 2, 3] } };
|
||||
|
||||
const Template = (args) => (
|
||||
<div>
|
||||
<Button type={args.type}>{args.label || args.children}</Button>
|
||||
<div style={args.background ? { background: args.background } : undefined}>
|
||||
<Button type={args.type}>
|
||||
{args.label?.type === 'b' ? <b>{args.children}</b> : args.children}
|
||||
</Button>
|
||||
{args.json && <pre>{JSON.stringify(args.json, null, 2)}</pre>}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -10,4 +10,3 @@ export default {
|
||||
};
|
||||
|
||||
export const Basic = () => <Button label="Click me" />;
|
||||
|
||||
|
||||
@ -4,8 +4,8 @@ import { Form } from '@storybook/components';
|
||||
const { Button } = Form;
|
||||
|
||||
export default {
|
||||
title: 'CustomTitle',
|
||||
component: Button,
|
||||
title: 'CustomTitle',
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const Basic = () => <Button label="Click me" />;
|
||||
|
||||
@ -9,4 +9,4 @@ export default {
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const Basic = () => <Button label="Click me" />;
|
||||
export const Basic = () => <Button label="Click me" />;
|
||||
|
||||
@ -4,8 +4,8 @@ import { Form } from '@storybook/components';
|
||||
const { Button } = Form;
|
||||
|
||||
export default {
|
||||
title: 'CustomTitle',
|
||||
component: Button,
|
||||
title: 'CustomTitle',
|
||||
component: Button,
|
||||
};
|
||||
|
||||
export const Basic = () => <Button label="Click me" />;
|
||||
|
||||
@ -282,9 +282,12 @@ export const transformStoriesRawToStoriesHash = (
|
||||
rootAndGroups.forEach((group, index) => {
|
||||
const child = paths[index + 1];
|
||||
const { id } = group;
|
||||
// @ts-ignore
|
||||
const { parameters: originalParameters = group.parameters } = acc[id] || {};
|
||||
acc[id] = merge(acc[id] || {}, {
|
||||
...group,
|
||||
...(child && { children: [child] }),
|
||||
parameters: originalParameters,
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -84,6 +84,8 @@ describe('stories API', () => {
|
||||
});
|
||||
});
|
||||
const parameters = {};
|
||||
const firstInGroupParameters = { viewMode: 'docs' };
|
||||
const secondInGroupParameters = { viewMode: 'story' };
|
||||
const storiesHash = {
|
||||
'a--1': {
|
||||
kind: 'a',
|
||||
@ -112,7 +114,7 @@ describe('stories API', () => {
|
||||
'b-d--1': {
|
||||
kind: 'b/d',
|
||||
name: '1',
|
||||
parameters,
|
||||
parameters: firstInGroupParameters,
|
||||
path: 'b-d--1',
|
||||
id: 'b-d--1',
|
||||
args: {},
|
||||
@ -120,7 +122,7 @@ describe('stories API', () => {
|
||||
'b-d--2': {
|
||||
kind: 'b/d',
|
||||
name: '2',
|
||||
parameters,
|
||||
parameters: secondInGroupParameters,
|
||||
path: 'b-d--2',
|
||||
id: 'b-d--2',
|
||||
args: { a: 'b' },
|
||||
@ -229,6 +231,7 @@ describe('stories API', () => {
|
||||
id: 'b-d',
|
||||
parent: 'b',
|
||||
children: ['b-d--1', 'b-d--2'],
|
||||
parameters: firstInGroupParameters,
|
||||
isRoot: false,
|
||||
isComponent: true,
|
||||
});
|
||||
@ -239,7 +242,7 @@ describe('stories API', () => {
|
||||
parent: 'b-d',
|
||||
kind: 'b/d',
|
||||
name: '1',
|
||||
parameters,
|
||||
parameters: firstInGroupParameters,
|
||||
args: {},
|
||||
prepared: true,
|
||||
});
|
||||
@ -250,7 +253,7 @@ describe('stories API', () => {
|
||||
parent: 'b-d',
|
||||
kind: 'b/d',
|
||||
name: '2',
|
||||
parameters,
|
||||
parameters: secondInGroupParameters,
|
||||
args: { a: 'b' },
|
||||
prepared: true,
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@ import { getProjectRoot } from '@storybook/core-common';
|
||||
import { useBaseTsSupport } from './useBaseTsSupport';
|
||||
|
||||
export const createBabelLoader = (options: any, framework: string) => ({
|
||||
test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
|
||||
test: useBaseTsSupport(framework) ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('babel-loader'),
|
||||
|
||||
@ -10,7 +10,7 @@ export const useBaseTsSupport = (framework: string) => {
|
||||
};
|
||||
|
||||
export const createBabelLoader = (options: any, framework: string) => ({
|
||||
test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
|
||||
test: useBaseTsSupport(framework) ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('babel-loader'),
|
||||
|
||||
@ -195,7 +195,8 @@ export class PostmsgTransport {
|
||||
private handleEvent(rawEvent: MessageEvent): void {
|
||||
try {
|
||||
const { data } = rawEvent;
|
||||
const { key, event, refId } = typeof data === 'string' && isJSON(data) ? parse(data, global.CHANNEL_OPTIONS || {}) : data;
|
||||
const { key, event, refId } =
|
||||
typeof data === 'string' && isJSON(data) ? parse(data, global.CHANNEL_OPTIONS || {}) : data;
|
||||
|
||||
if (key === KEY) {
|
||||
const pageString =
|
||||
|
||||
@ -89,7 +89,9 @@ const isSimpleCSFStory = (init: t.Expression, annotations: t.ObjectProperty[]) =
|
||||
annotations.length === 0 && t.isArrowFunctionExpression(init) && init.params.length === 0;
|
||||
|
||||
function transform({ source }: { source: string }, api: any, options: { parser?: string }) {
|
||||
const makeTitle = (userTitle?: string) => { return userTitle || 'FIXME' }
|
||||
const makeTitle = (userTitle?: string) => {
|
||||
return userTitle || 'FIXME';
|
||||
};
|
||||
const csf = loadCsf(source, { makeTitle });
|
||||
|
||||
try {
|
||||
|
||||
@ -11,7 +11,22 @@ const Wrapper = styled.label({
|
||||
display: 'flex',
|
||||
});
|
||||
|
||||
export const TextControl: FC<TextProps> = ({ name, value, onChange, onFocus, onBlur }) => {
|
||||
const MaxLength = styled.div<{ isMaxed: boolean }>(({ isMaxed }) => ({
|
||||
marginLeft: '0.75rem',
|
||||
paddingTop: '0.35rem',
|
||||
color: isMaxed ? 'red' : undefined,
|
||||
}));
|
||||
|
||||
const format = (value?: TextValue) => value || '';
|
||||
|
||||
export const TextControl: FC<TextProps> = ({
|
||||
name,
|
||||
value,
|
||||
onChange,
|
||||
onFocus,
|
||||
onBlur,
|
||||
maxLength,
|
||||
}) => {
|
||||
const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
|
||||
onChange(event.target.value);
|
||||
};
|
||||
@ -34,6 +49,7 @@ export const TextControl: FC<TextProps> = ({ name, value, onChange, onFocus, onB
|
||||
<Wrapper>
|
||||
<Form.Textarea
|
||||
id={getControlId(name)}
|
||||
maxLength={maxLength}
|
||||
onChange={handleChange}
|
||||
size="flex"
|
||||
placeholder="Edit string..."
|
||||
@ -41,6 +57,11 @@ export const TextControl: FC<TextProps> = ({ name, value, onChange, onFocus, onB
|
||||
valid={isValid ? null : 'error'}
|
||||
{...{ name, value: isValid ? value : '', onFocus, onBlur }}
|
||||
/>
|
||||
{maxLength && (
|
||||
<MaxLength isMaxed={value?.length === maxLength}>
|
||||
{value?.length ?? 0} / {maxLength}
|
||||
</MaxLength>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
@ -61,7 +61,9 @@ export interface NormalizedOptionsConfig {
|
||||
}
|
||||
|
||||
export type TextValue = string;
|
||||
export interface TextConfig {}
|
||||
export interface TextConfig {
|
||||
maxLength?: number;
|
||||
}
|
||||
|
||||
export type ControlType =
|
||||
| 'array'
|
||||
|
||||
@ -237,8 +237,8 @@
|
||||
.sb-argstableBlock td:nth-of-type(3) {
|
||||
width: 15%;
|
||||
}
|
||||
.sb-argstableBlock th:laste-of-type,
|
||||
.sb-argstableBlock td:laste-of-type {
|
||||
.sb-argstableBlock th:last-of-type,
|
||||
.sb-argstableBlock td:last-of-type {
|
||||
width: 25%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
@ -62,7 +62,6 @@
|
||||
"commander": "^6.2.1",
|
||||
"compression": "^1.7.4",
|
||||
"core-js": "^3.8.2",
|
||||
"cpy": "^8.1.2",
|
||||
"detect-port": "^1.3.0",
|
||||
"express": "^4.17.1",
|
||||
"fs-extra": "^9.0.1",
|
||||
|
||||
@ -40,7 +40,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -1,262 +1,5 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`cra-ts-essentials manager dev 1`] = `
|
||||
Object {
|
||||
"entry": Array [
|
||||
"NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js",
|
||||
"ROOT/lib/core-client/dist/esm/globals/polyfills.js",
|
||||
"ROOT/lib/core-client/dist/esm/manager/index.js",
|
||||
"ROOT/addons/docs/manager.js",
|
||||
"ROOT/addons/controls/manager.js",
|
||||
"ROOT/addons/actions/manager.js",
|
||||
"ROOT/addons/backgrounds/manager.js",
|
||||
"ROOT/addons/toolbars/manager.js",
|
||||
"ROOT/addons/measure/manager.js",
|
||||
"ROOT/addons/outline/manager.js",
|
||||
],
|
||||
"keys": Array [
|
||||
"name",
|
||||
"mode",
|
||||
"bail",
|
||||
"devtool",
|
||||
"entry",
|
||||
"output",
|
||||
"watchOptions",
|
||||
"plugins",
|
||||
"module",
|
||||
"resolve",
|
||||
"resolveLoader",
|
||||
"recordsPath",
|
||||
"performance",
|
||||
"optimization",
|
||||
],
|
||||
"module": Object {
|
||||
"rules": Array [
|
||||
Object {
|
||||
"exclude": Array [
|
||||
"NODE_MODULES/",
|
||||
"/dist/",
|
||||
],
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
"options": Object {
|
||||
"babelrc": false,
|
||||
"configFile": false,
|
||||
"plugins": Array [
|
||||
"NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
|
||||
Array [
|
||||
"NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js",
|
||||
Object {
|
||||
"legacy": true,
|
||||
},
|
||||
],
|
||||
Array [
|
||||
"NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js",
|
||||
Object {
|
||||
"loose": true,
|
||||
},
|
||||
],
|
||||
Array [
|
||||
"NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js",
|
||||
Object {
|
||||
"loose": true,
|
||||
},
|
||||
],
|
||||
Array [
|
||||
"NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js",
|
||||
Object {
|
||||
"loose": true,
|
||||
},
|
||||
],
|
||||
"NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js",
|
||||
Array [
|
||||
"NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js",
|
||||
Object {
|
||||
"loose": true,
|
||||
"useBuiltIns": true,
|
||||
},
|
||||
],
|
||||
"NODE_MODULES/@babel/plugin-transform-classes/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-transform-spread/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js",
|
||||
"NODE_MODULES/babel-plugin-macros/dist/index.js",
|
||||
"NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
|
||||
Array [
|
||||
"NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js",
|
||||
Object {
|
||||
"absoluteImports": "NODE_MODULES/core-js/index.js",
|
||||
"method": "usage-global",
|
||||
"version": "*",
|
||||
},
|
||||
],
|
||||
"NODE_MODULES/@babel/plugin-transform-template-literals/lib/index.js",
|
||||
],
|
||||
"presets": Array [
|
||||
Array [
|
||||
"NODE_MODULES/@babel/preset-env/lib/index.js",
|
||||
Object {
|
||||
"loose": true,
|
||||
"shippedProposals": true,
|
||||
},
|
||||
],
|
||||
"NODE_MODULES/@babel/preset-typescript/lib/index.js",
|
||||
"NODE_MODULES/@babel/preset-react/lib/index.js",
|
||||
],
|
||||
"sourceType": "unambiguous",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"include": [Function],
|
||||
"test": "/\\\\.js$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
"options": Object {
|
||||
"plugins": Array [
|
||||
"NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
|
||||
Array [
|
||||
"NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js",
|
||||
Object {
|
||||
"legacy": true,
|
||||
},
|
||||
],
|
||||
Array [
|
||||
"NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js",
|
||||
Object {
|
||||
"loose": true,
|
||||
},
|
||||
],
|
||||
Array [
|
||||
"NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js",
|
||||
Object {
|
||||
"loose": true,
|
||||
},
|
||||
],
|
||||
Array [
|
||||
"NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js",
|
||||
Object {
|
||||
"loose": true,
|
||||
},
|
||||
],
|
||||
"NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js",
|
||||
Array [
|
||||
"NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js",
|
||||
Object {
|
||||
"loose": true,
|
||||
"useBuiltIns": true,
|
||||
},
|
||||
],
|
||||
"NODE_MODULES/@babel/plugin-transform-classes/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-transform-spread/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js",
|
||||
"NODE_MODULES/babel-plugin-macros/dist/index.js",
|
||||
"NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js",
|
||||
"NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
|
||||
Array [
|
||||
"NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js",
|
||||
Object {
|
||||
"absoluteImports": "NODE_MODULES/core-js/index.js",
|
||||
"method": "usage-global",
|
||||
"version": "*",
|
||||
},
|
||||
],
|
||||
],
|
||||
"presets": Array [
|
||||
Array [
|
||||
"NODE_MODULES/@babel/preset-env/lib/index.js",
|
||||
Object {
|
||||
"loose": true,
|
||||
"modules": false,
|
||||
"shippedProposals": true,
|
||||
"targets": "defaults",
|
||||
},
|
||||
],
|
||||
"NODE_MODULES/@babel/preset-react/lib/index.js",
|
||||
],
|
||||
"sourceType": "unambiguous",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"test": "/\\\\.css$/",
|
||||
"use": Array [
|
||||
"NODE_MODULES/style-loader/dist/cjs.js",
|
||||
Object {
|
||||
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
|
||||
"options": Object {
|
||||
"importLoaders": 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/file-loader/dist/cjs.js",
|
||||
"options": Object {
|
||||
"name": "static/media/[path][name].[ext]",
|
||||
},
|
||||
"test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/",
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/url-loader/dist/cjs.js",
|
||||
"options": Object {
|
||||
"limit": 10000,
|
||||
"name": "static/media/[path][name].[ext]",
|
||||
},
|
||||
"test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/",
|
||||
},
|
||||
Object {
|
||||
"include": "NODE_MODULES[\\\\\\\\/](@storybook[\\\\\\\\/]node_logger|@testing-library[\\\\\\\\/]dom|@testing-library[\\\\\\\\/]user-event|acorn-jsx|ansi-align|ansi-colors|ansi-escapes|ansi-regex|ansi-styles|better-opn|boxen|camelcase|chalk|color-convert|commander|find-cache-dir|find-up|fs-extra|highlight.js|json5|node-fetch|pkg-dir|prettier|pretty-format|react-dev-utils|resolve-from|semver|slash|strip-ansi|uuid)/",
|
||||
"test": "/\\\\.js$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
"options": Object {
|
||||
"presets": Array [
|
||||
Array [
|
||||
"@babel/preset-env",
|
||||
Object {
|
||||
"targets": Object {
|
||||
"ie": "11",
|
||||
},
|
||||
},
|
||||
"storybook-addon-ie11",
|
||||
],
|
||||
],
|
||||
"sourceType": "unambiguous",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
"plugins": Array [
|
||||
"VirtualModulesPlugin",
|
||||
"HtmlWebpackPlugin",
|
||||
"CaseSensitivePathsPlugin",
|
||||
"DefinePlugin",
|
||||
],
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`cra-ts-essentials manager prod 1`] = `
|
||||
Object {
|
||||
"entry": Array [
|
||||
@ -297,7 +40,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -360,7 +360,7 @@ Object {
|
||||
},
|
||||
],
|
||||
],
|
||||
"test": "/\\\\.(mjs|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|jsx?)$/",
|
||||
},
|
||||
],
|
||||
"plugins": Array [
|
||||
@ -410,7 +410,7 @@ Object {
|
||||
},
|
||||
],
|
||||
],
|
||||
"test": "/\\\\.(mjs|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|jsx?)$/",
|
||||
},
|
||||
],
|
||||
"plugins": Array [
|
||||
|
||||
@ -1,502 +1,5 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`cra-ts-essentials preview dev 1`] = `
|
||||
Object {
|
||||
"entry": Array [
|
||||
"ROOT/lib/core-client/dist/esm/globals/polyfills.js",
|
||||
"ROOT/lib/core-client/dist/esm/globals/globals.js",
|
||||
"NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js",
|
||||
"ROOT/storybook-init-framework-entry.js",
|
||||
"ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js",
|
||||
"ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js",
|
||||
"ROOT/addons/docs/preview.js-generated-config-entry.js",
|
||||
"ROOT/addons/actions/preview.js-generated-config-entry.js",
|
||||
"ROOT/addons/backgrounds/preview.js-generated-config-entry.js",
|
||||
"ROOT/addons/measure/preview.js-generated-config-entry.js",
|
||||
"ROOT/addons/outline/preview.js-generated-config-entry.js",
|
||||
"ROOT/examples/cra-ts-essentials/.storybook/preview.tsx-generated-config-entry.js",
|
||||
"ROOT/generated-stories-entry.js",
|
||||
],
|
||||
"keys": Array [
|
||||
"name",
|
||||
"mode",
|
||||
"bail",
|
||||
"devtool",
|
||||
"entry",
|
||||
"output",
|
||||
"watchOptions",
|
||||
"plugins",
|
||||
"module",
|
||||
"resolve",
|
||||
"resolveLoader",
|
||||
"optimization",
|
||||
"performance",
|
||||
],
|
||||
"module": Object {
|
||||
"rules": Array [
|
||||
Object {
|
||||
"test": "/\\\\.md$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/raw-loader/dist/cjs.js",
|
||||
},
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"parser": Object {
|
||||
"requireEnsure": false,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"oneOf": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/url-loader/dist/cjs.js",
|
||||
"options": Object {
|
||||
"limit": 10000,
|
||||
"mimetype": "image/avif",
|
||||
"name": "static/media/[name].[hash:8].[ext]",
|
||||
},
|
||||
"test": Array [
|
||||
"/\\\\.avif$/",
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/url-loader/dist/cjs.js",
|
||||
"options": Object {
|
||||
"limit": 10000,
|
||||
"name": "static/media/[name].[hash:8].[ext]",
|
||||
},
|
||||
"test": Array [
|
||||
"/\\\\.bmp$/",
|
||||
"/\\\\.gif$/",
|
||||
"/\\\\.jpe?g$/",
|
||||
"/\\\\.png$/",
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"include": Array [
|
||||
"ROOT/src",
|
||||
"ROOT/examples/cra-ts-essentials/.storybook",
|
||||
],
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
"options": Object {
|
||||
"babelrc": false,
|
||||
"cacheCompression": false,
|
||||
"cacheDirectory": true,
|
||||
"cacheIdentifier": "production:babel-plugin-named-asset-import@:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3",
|
||||
"compact": true,
|
||||
"configFile": false,
|
||||
"customize": "NODE_MODULES/babel-preset-react-app/webpack-overrides.js",
|
||||
"extends": undefined,
|
||||
"overrides": Array [
|
||||
Object {
|
||||
"plugins": Array [
|
||||
Array [
|
||||
"NODE_MODULES/babel-plugin-react-docgen/lib/index.js",
|
||||
Object {
|
||||
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
|
||||
},
|
||||
],
|
||||
],
|
||||
"test": "/\\\\.(mjs|jsx?)$/",
|
||||
},
|
||||
],
|
||||
"plugins": Array [
|
||||
Array [
|
||||
"NODE_MODULES/babel-plugin-named-asset-import/index.js",
|
||||
Object {
|
||||
"loaderMap": Object {
|
||||
"svg": Object {
|
||||
"ReactComponent": "@svgr/webpack?-svgo,+titleProp,+ref![path]",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
"presets": Array [
|
||||
Array [
|
||||
"@babel/preset-env",
|
||||
Object {
|
||||
"targets": Object {
|
||||
"ie": "11",
|
||||
},
|
||||
},
|
||||
"storybook-addon-ie11",
|
||||
],
|
||||
Array [
|
||||
"NODE_MODULES/babel-preset-react-app/index.js",
|
||||
Object {
|
||||
"runtime": "automatic",
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
"test": "/\\\\.(js|mjs|jsx|ts|tsx)$/",
|
||||
},
|
||||
Object {
|
||||
"exclude": "/@babel(?:\\\\/|\\\\\\\\{1,2})runtime/",
|
||||
"include": Array [
|
||||
"ROOT/examples/cra-ts-essentials/.storybook",
|
||||
],
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
"options": Object {
|
||||
"babelrc": false,
|
||||
"cacheCompression": false,
|
||||
"cacheDirectory": true,
|
||||
"cacheIdentifier": "production:babel-plugin-named-asset-import@:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3",
|
||||
"compact": false,
|
||||
"configFile": false,
|
||||
"inputSourceMap": true,
|
||||
"presets": Array [
|
||||
Array [
|
||||
"NODE_MODULES/babel-preset-react-app/dependencies.js",
|
||||
Object {
|
||||
"helpers": true,
|
||||
},
|
||||
],
|
||||
],
|
||||
"sourceMaps": true,
|
||||
},
|
||||
"test": "/\\\\.(js|mjs)$/",
|
||||
},
|
||||
Object {
|
||||
"exclude": Array [
|
||||
"/\\\\.module\\\\.css$/",
|
||||
"/@storybook/",
|
||||
],
|
||||
"include": undefined,
|
||||
"sideEffects": true,
|
||||
"test": "/\\\\.css$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js",
|
||||
"options": Object {
|
||||
"publicPath": "../../",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
|
||||
"options": Object {
|
||||
"importLoaders": 1,
|
||||
"sourceMap": true,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/postcss-loader/src/index.js",
|
||||
"options": Object {
|
||||
"ident": "postcss",
|
||||
"plugins": [Function],
|
||||
"sourceMap": true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"test": "/\\\\.module\\\\.css$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js",
|
||||
"options": Object {
|
||||
"publicPath": "../../",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
|
||||
"options": Object {
|
||||
"importLoaders": 1,
|
||||
"modules": Object {
|
||||
"getLocalIdent": [Function],
|
||||
},
|
||||
"sourceMap": true,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/postcss-loader/src/index.js",
|
||||
"options": Object {
|
||||
"ident": "postcss",
|
||||
"plugins": [Function],
|
||||
"sourceMap": true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"exclude": "/\\\\.module\\\\.(scss|sass)$/",
|
||||
"sideEffects": true,
|
||||
"test": "/\\\\.(scss|sass)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js",
|
||||
"options": Object {
|
||||
"publicPath": "../../",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
|
||||
"options": Object {
|
||||
"importLoaders": 3,
|
||||
"sourceMap": true,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/postcss-loader/src/index.js",
|
||||
"options": Object {
|
||||
"ident": "postcss",
|
||||
"plugins": [Function],
|
||||
"sourceMap": true,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/resolve-url-loader/index.js",
|
||||
"options": Object {
|
||||
"root": "ROOT/src",
|
||||
"sourceMap": true,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/sass-loader/dist/cjs.js",
|
||||
"options": Object {
|
||||
"sourceMap": true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"test": "/\\\\.module\\\\.(scss|sass)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js",
|
||||
"options": Object {
|
||||
"publicPath": "../../",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
|
||||
"options": Object {
|
||||
"importLoaders": 3,
|
||||
"modules": Object {
|
||||
"getLocalIdent": [Function],
|
||||
},
|
||||
"sourceMap": true,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/postcss-loader/src/index.js",
|
||||
"options": Object {
|
||||
"ident": "postcss",
|
||||
"plugins": [Function],
|
||||
"sourceMap": true,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/resolve-url-loader/index.js",
|
||||
"options": Object {
|
||||
"root": "ROOT/src",
|
||||
"sourceMap": true,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/sass-loader/dist/cjs.js",
|
||||
"options": Object {
|
||||
"sourceMap": true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"exclude": Array [
|
||||
"/\\\\.(js|mjs|jsx|ts|tsx)$/",
|
||||
"/\\\\.html$/",
|
||||
"/\\\\.json$/",
|
||||
"/\\\\.(ejs|md|mdx)$/",
|
||||
],
|
||||
"loader": "NODE_MODULES/file-loader/dist/cjs.js",
|
||||
"options": Object {
|
||||
"name": "static/media/[name].[hash:8].[ext]",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"include": "NODE_MODULES[\\\\\\\\/](@storybook[\\\\\\\\/]node_logger|@testing-library[\\\\\\\\/]dom|@testing-library[\\\\\\\\/]user-event|acorn-jsx|ansi-align|ansi-colors|ansi-escapes|ansi-regex|ansi-styles|better-opn|boxen|camelcase|chalk|color-convert|commander|find-cache-dir|find-up|fs-extra|highlight.js|json5|node-fetch|pkg-dir|prettier|pretty-format|react-dev-utils|resolve-from|semver|slash|strip-ansi|uuid)/",
|
||||
"test": "/\\\\.js$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
"options": Object {
|
||||
"presets": Array [
|
||||
Array [
|
||||
"@babel/preset-env",
|
||||
Object {
|
||||
"targets": Object {
|
||||
"ie": "11",
|
||||
},
|
||||
},
|
||||
"storybook-addon-ie11",
|
||||
],
|
||||
],
|
||||
"sourceType": "unambiguous",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"include": "NODE_MODULES\\\\/acorn-jsx/",
|
||||
"test": "/\\\\.js$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
"options": Object {
|
||||
"presets": Array [
|
||||
Array [
|
||||
"NODE_MODULES/@babel/preset-env/lib/index.js",
|
||||
Object {
|
||||
"modules": "commonjs",
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"test": "/(stories|story)\\\\.mdx$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
"options": Object {
|
||||
"babelrc": false,
|
||||
"cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
|
||||
"configFile": false,
|
||||
"overrides": Array [
|
||||
Object {
|
||||
"plugins": Array [
|
||||
Array [
|
||||
"NODE_MODULES/babel-plugin-react-docgen/lib/index.js",
|
||||
Object {
|
||||
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
|
||||
},
|
||||
],
|
||||
],
|
||||
"test": "/\\\\.(mjs|jsx?)$/",
|
||||
},
|
||||
],
|
||||
"plugins": Array [
|
||||
Array [
|
||||
"NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js",
|
||||
Object {
|
||||
"pragma": "React.createElement",
|
||||
"pragmaFrag": "React.Fragment",
|
||||
},
|
||||
],
|
||||
],
|
||||
"presets": Array [
|
||||
Array [
|
||||
"@babel/preset-env",
|
||||
Object {
|
||||
"targets": Object {
|
||||
"ie": "11",
|
||||
},
|
||||
},
|
||||
"storybook-addon-ie11",
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
|
||||
},
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"exclude": "/(stories|story)\\\\.mdx$/",
|
||||
"test": "/\\\\.mdx$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
"options": Object {
|
||||
"babelrc": false,
|
||||
"cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
|
||||
"configFile": false,
|
||||
"overrides": Array [
|
||||
Object {
|
||||
"plugins": Array [
|
||||
Array [
|
||||
"NODE_MODULES/babel-plugin-react-docgen/lib/index.js",
|
||||
Object {
|
||||
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
|
||||
},
|
||||
],
|
||||
],
|
||||
"test": "/\\\\.(mjs|jsx?)$/",
|
||||
},
|
||||
],
|
||||
"plugins": Array [
|
||||
Array [
|
||||
"NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js",
|
||||
Object {
|
||||
"pragma": "React.createElement",
|
||||
"pragmaFrag": "React.Fragment",
|
||||
},
|
||||
],
|
||||
],
|
||||
"presets": Array [
|
||||
Array [
|
||||
"@babel/preset-env",
|
||||
Object {
|
||||
"targets": Object {
|
||||
"ie": "11",
|
||||
},
|
||||
},
|
||||
"storybook-addon-ie11",
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
|
||||
"options": Object {
|
||||
"remarkPlugins": Array [
|
||||
[Function],
|
||||
[Function],
|
||||
],
|
||||
"skipCsf": true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
Object {
|
||||
"enforce": "pre",
|
||||
"loader": "ROOT/lib/source-loader/dist/cjs/index.js",
|
||||
"options": Object {
|
||||
"injectStoryParameters": true,
|
||||
"inspectLocalDependencies": true,
|
||||
},
|
||||
"test": "/\\\\.(stories|story)\\\\.[tj]sx?$/",
|
||||
},
|
||||
],
|
||||
},
|
||||
"plugins": Array [
|
||||
"FilterWarningsPlugin",
|
||||
"VirtualModulesPlugin",
|
||||
"HtmlWebpackPlugin",
|
||||
"DefinePlugin",
|
||||
"CaseSensitivePathsPlugin",
|
||||
"ProgressPlugin",
|
||||
"InlineChunkHtmlPlugin",
|
||||
"InterpolateHtmlPlugin",
|
||||
"ModuleNotFoundPlugin",
|
||||
"MiniCssExtractPlugin",
|
||||
"ManifestPlugin",
|
||||
"IgnorePlugin",
|
||||
"ForkTsCheckerWebpackPlugin",
|
||||
"ESLintWebpackPlugin",
|
||||
"IgnorePlugin",
|
||||
"DocgenPlugin",
|
||||
],
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`cra-ts-essentials preview prod 1`] = `
|
||||
Object {
|
||||
"entry": Array [
|
||||
@ -875,7 +378,7 @@ Object {
|
||||
},
|
||||
],
|
||||
],
|
||||
"test": "/\\\\.(mjs|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|jsx?)$/",
|
||||
},
|
||||
],
|
||||
"plugins": Array [
|
||||
@ -925,7 +428,7 @@ Object {
|
||||
},
|
||||
],
|
||||
],
|
||||
"test": "/\\\\.(mjs|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|jsx?)$/",
|
||||
},
|
||||
],
|
||||
"plugins": Array [
|
||||
|
||||
@ -41,7 +41,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -41,7 +41,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -39,7 +39,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -38,7 +38,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -42,7 +42,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -42,7 +42,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -41,7 +41,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -40,7 +40,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -42,7 +42,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -42,7 +42,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -40,7 +40,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -39,7 +39,7 @@ Object {
|
||||
"include": Array [
|
||||
"ROOT",
|
||||
],
|
||||
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
|
||||
"test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
|
||||
"use": Array [
|
||||
Object {
|
||||
"loader": "NODE_MODULES/babel-loader/lib/index.js",
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import chalk from 'chalk';
|
||||
import cpy from 'cpy';
|
||||
import fs from 'fs-extra';
|
||||
import path from 'path';
|
||||
import dedent from 'ts-dedent';
|
||||
@ -56,7 +55,7 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
|
||||
}
|
||||
await fs.emptyDir(options.outputDir);
|
||||
|
||||
await cpy(defaultFavIcon, options.outputDir);
|
||||
await fs.copyFile(defaultFavIcon, path.join(options.outputDir, path.basename(defaultFavIcon)));
|
||||
|
||||
const previewBuilder: Builder<unknown, unknown> = await getPreviewBuilder(options.configDir);
|
||||
const managerBuilder: Builder<unknown, unknown> = await getManagerBuilder(options.configDir);
|
||||
@ -169,7 +168,7 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
|
||||
const startTime = process.hrtime();
|
||||
// When using the prebuilt manager, we straight up copy it into the outputDir instead of building it
|
||||
const manager = prebuiltDir
|
||||
? cpy('**', options.outputDir, { cwd: prebuiltDir, parents: true }).then(() => {})
|
||||
? fs.copy(prebuiltDir, options.outputDir, { dereference: true }).then(() => {})
|
||||
: managerBuilder.build({ startTime, options: fullOptions });
|
||||
|
||||
if (options.ignorePreview) {
|
||||
@ -222,7 +221,9 @@ export async function buildStatic({ packageJson, ...loadOptions }: LoadOptions)
|
||||
try {
|
||||
await buildStaticStandalone(options);
|
||||
} catch (error) {
|
||||
logger.error(error);
|
||||
if (error instanceof Error) {
|
||||
logger.error(error.stack || error.message);
|
||||
}
|
||||
|
||||
const presets = loadAllPresets({
|
||||
corePresets: [require.resolve('./presets/common-preset')],
|
||||
|
||||
@ -83,7 +83,11 @@ jest.mock('@storybook/store', () => {
|
||||
};
|
||||
});
|
||||
|
||||
jest.mock('cpy', () => () => Promise.resolve());
|
||||
jest.mock('fs-extra', () => ({
|
||||
...jest.requireActual('fs-extra'),
|
||||
copyFile: jest.fn().mockResolvedValue(Promise.resolve()),
|
||||
copy: jest.fn().mockResolvedValue(Promise.resolve()),
|
||||
}));
|
||||
jest.mock('http', () => ({
|
||||
...jest.requireActual('http'),
|
||||
createServer: () => ({ listen: (_options, cb) => cb(), on: jest.fn() }),
|
||||
|
||||
@ -88,7 +88,7 @@ export class StoryIndexGenerator {
|
||||
const importPath = slash(normalizeStoryPath(relativePath));
|
||||
const makeTitle = (userTitle?: string) => {
|
||||
return userOrAutoTitleFromSpecifier(importPath, specifier, userTitle);
|
||||
}
|
||||
};
|
||||
const csf = (await readCsfOrMdx(absolutePath, { makeTitle })).parse();
|
||||
csf.stories.forEach(({ id, name }) => {
|
||||
fileStories[id] = {
|
||||
|
||||
@ -5,7 +5,7 @@ export const babelLoader = () => {
|
||||
const { plugins, presets } = getStorybookBabelConfig();
|
||||
|
||||
return {
|
||||
test: /\.(mjs|tsx?|jsx?)$/,
|
||||
test: /\.(cjs|mjs|tsx?|jsx?)$/,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('babel-loader'),
|
||||
|
||||
@ -5,7 +5,7 @@ export const babelLoader = () => {
|
||||
const { plugins, presets } = getStorybookBabelConfig();
|
||||
|
||||
return {
|
||||
test: /\.(mjs|tsx?|jsx?)$/,
|
||||
test: /\.(cjs|mjs|tsx?|jsx?)$/,
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('babel-loader'),
|
||||
|
||||
@ -34,6 +34,12 @@ describe('getMatch', () => {
|
||||
|
||||
expect(output).toBe(null);
|
||||
});
|
||||
|
||||
it('returns null match if "startsWith" part is in the middle', () => {
|
||||
const output = getMatch('/foo/bar', '/bar', true);
|
||||
|
||||
expect(output).toBe(null);
|
||||
});
|
||||
});
|
||||
|
||||
describe('parsePath', () => {
|
||||
|
||||
@ -148,11 +148,19 @@ type Match = { path: string };
|
||||
|
||||
export const getMatch = memoize(1000)(
|
||||
(current: string, target: string, startsWith = true): Match | null => {
|
||||
const startsWithTarget = current && startsWith && current.startsWith(target);
|
||||
if (startsWith) {
|
||||
const startsWithTarget = current && current.startsWith(target);
|
||||
if (startsWithTarget) {
|
||||
return { path: current };
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
const currentIsTarget = typeof target === 'string' && current === target;
|
||||
const matchTarget = current && target && current.match(target);
|
||||
|
||||
if (startsWithTarget || currentIsTarget || matchTarget) {
|
||||
if (currentIsTarget || matchTarget) {
|
||||
return { path: current };
|
||||
}
|
||||
|
||||
|
||||
@ -18,18 +18,25 @@ const winOptions = {
|
||||
};
|
||||
|
||||
describe('userOrAutoTitleFromSpecifier', () => {
|
||||
|
||||
describe('user title', () => {
|
||||
it('no match', () => {
|
||||
expect(
|
||||
userOrAuto('./ path / to / file.stories.js', normalizeStoriesEntry({ directory: './ other' }, options), 'title')
|
||||
userOrAuto(
|
||||
'./ path / to / file.stories.js',
|
||||
normalizeStoriesEntry({ directory: './ other' }, options),
|
||||
'title'
|
||||
)
|
||||
).toBeFalsy();
|
||||
});
|
||||
|
||||
describe('no trailing slash', () => {
|
||||
it('match with no titlePrefix', () => {
|
||||
expect(
|
||||
userOrAuto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './path' }, options), 'title')
|
||||
userOrAuto(
|
||||
'./path/to/file.stories.js',
|
||||
normalizeStoriesEntry({ directory: './path' }, options),
|
||||
'title'
|
||||
)
|
||||
).toMatchInlineSnapshot(`title`);
|
||||
});
|
||||
|
||||
@ -77,7 +84,11 @@ describe('userOrAutoTitleFromSpecifier', () => {
|
||||
describe('trailing slash', () => {
|
||||
it('match with no titlePrefix', () => {
|
||||
expect(
|
||||
userOrAuto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './path/' }, options), 'title')
|
||||
userOrAuto(
|
||||
'./path/to/file.stories.js',
|
||||
normalizeStoriesEntry({ directory: './path/' }, options),
|
||||
'title'
|
||||
)
|
||||
).toMatchInlineSnapshot(`title`);
|
||||
});
|
||||
|
||||
@ -126,14 +137,22 @@ describe('userOrAutoTitleFromSpecifier', () => {
|
||||
describe('auto title', () => {
|
||||
it('no match', () => {
|
||||
expect(
|
||||
userOrAuto('./ path / to / file.stories.js', normalizeStoriesEntry({ directory: './ other' }, options), undefined)
|
||||
userOrAuto(
|
||||
'./ path / to / file.stories.js',
|
||||
normalizeStoriesEntry({ directory: './ other' }, options),
|
||||
undefined
|
||||
)
|
||||
).toBeFalsy();
|
||||
});
|
||||
|
||||
describe('no trailing slash', () => {
|
||||
it('match with no titlePrefix', () => {
|
||||
expect(
|
||||
userOrAuto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './path' }, options), undefined)
|
||||
userOrAuto(
|
||||
'./path/to/file.stories.js',
|
||||
normalizeStoriesEntry({ directory: './path' }, options),
|
||||
undefined
|
||||
)
|
||||
).toMatchInlineSnapshot(`to/file`);
|
||||
});
|
||||
|
||||
@ -201,7 +220,11 @@ describe('userOrAutoTitleFromSpecifier', () => {
|
||||
describe('trailing slash', () => {
|
||||
it('match with no titlePrefix', () => {
|
||||
expect(
|
||||
userOrAuto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './path/' }, options), undefined)
|
||||
userOrAuto(
|
||||
'./path/to/file.stories.js',
|
||||
normalizeStoriesEntry({ directory: './path/' }, options),
|
||||
undefined
|
||||
)
|
||||
).toMatchInlineSnapshot(`to/file`);
|
||||
});
|
||||
|
||||
|
||||
@ -124,4 +124,19 @@ describe('preview.storySort', () => {
|
||||
expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0);
|
||||
expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('sorts according to the nested order array with parent wildcard', () => {
|
||||
const sortFn = storySort({
|
||||
order: ['*', ['*', 'b', 'a']],
|
||||
includeNames: true,
|
||||
});
|
||||
|
||||
expect(sortFn(fixture.a_a, fixture.a_b)).toBeGreaterThan(0);
|
||||
expect(sortFn(fixture.a_b, fixture.a_a)).toBeLessThan(0);
|
||||
expect(sortFn(fixture.a_c, fixture.a_a)).toBeLessThan(0);
|
||||
expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0);
|
||||
expect(sortFn(fixture.a_a, fixture.a_c)).toBeGreaterThan(0);
|
||||
expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0);
|
||||
expect(sortFn(fixture.a_a, fixture.a_a)).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
@ -79,7 +79,8 @@ export const storySort =
|
||||
}
|
||||
|
||||
// If a nested array is provided for a name, use it for ordering.
|
||||
const index = order.indexOf(nameA);
|
||||
let index = order.indexOf(nameA);
|
||||
if (index === -1) index = order.indexOf('*');
|
||||
order = index !== -1 && Array.isArray(order[index + 1]) ? order[index + 1] : [];
|
||||
|
||||
// We'll need to look at the next part of the name.
|
||||
|
||||
@ -27,7 +27,7 @@ export const getMonorepoType = (): MonorepoType => {
|
||||
if (monorepoType) {
|
||||
return monorepoType;
|
||||
}
|
||||
|
||||
|
||||
if (!fs.existsSync(path.join(projectRootPath, 'package.json'))) return undefined;
|
||||
|
||||
const packageJson = fs.readJsonSync(path.join(projectRootPath, 'package.json')) as PackageJson;
|
||||
|
||||
@ -569,10 +569,11 @@ class Layout extends Component<LayoutProps, LayoutState> {
|
||||
marginTop: -margin,
|
||||
}
|
||||
: {
|
||||
marginLeft: -margin,
|
||||
marginLeft: 1,
|
||||
}
|
||||
}
|
||||
axis={isPanelBottom ? 'y' : 'x'}
|
||||
reverse
|
||||
/>
|
||||
</Draggable>
|
||||
)}
|
||||
|
||||
@ -3,7 +3,7 @@ import { styled } from '@storybook/theming';
|
||||
|
||||
export type Axis = 'x' | 'y';
|
||||
|
||||
const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
|
||||
const Handle = styled.div<{ isDragging: boolean; axis: Axis; reverse?: boolean }>(
|
||||
({ theme, isDragging }) => ({
|
||||
zIndex: 10,
|
||||
position: 'absolute',
|
||||
@ -17,7 +17,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
|
||||
|
||||
overflow: 'hidden',
|
||||
transition:
|
||||
'color 0.2s linear, background-position 0.2s linear, background-size 0.2s linear, background 0.2s linear',
|
||||
'color 0.2s linear, background-size 0.2s linear, background 0.2s linear, background-position 0s linear',
|
||||
'&:hover': {
|
||||
color: theme.color.secondary,
|
||||
},
|
||||
@ -37,7 +37,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
|
||||
width: '100%',
|
||||
marginTop: 0,
|
||||
},
|
||||
({ axis, isDragging }) => {
|
||||
({ axis, isDragging, reverse = false }) => {
|
||||
if (axis === 'y') {
|
||||
const style = {
|
||||
backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
|
||||
@ -57,7 +57,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
|
||||
const style = {
|
||||
backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
|
||||
backgroundSize: '50px 100%',
|
||||
backgroundPosition: '0 50%',
|
||||
backgroundPosition: reverse ? '100% 50%' : '0 50%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
};
|
||||
return isDragging
|
||||
|
||||
@ -190,7 +190,6 @@ const Node = React.memo<NodeProps>(
|
||||
data-ref-id={refId}
|
||||
data-item-id={item.id}
|
||||
data-nodetype="root"
|
||||
aria-expanded={isExpanded}
|
||||
>
|
||||
<CollapseButton
|
||||
type="button"
|
||||
@ -199,6 +198,7 @@ const Node = React.memo<NodeProps>(
|
||||
event.preventDefault();
|
||||
setExpanded({ ids: [item.id], value: !isExpanded });
|
||||
}}
|
||||
aria-expanded={isExpanded}
|
||||
>
|
||||
<CollapseIcon isExpanded={isExpanded} />
|
||||
{item.renderLabel?.(item) || item.name}
|
||||
|
||||
208
yarn.lock
208
yarn.lock
@ -6829,10 +6829,11 @@ __metadata:
|
||||
"@types/puppeteer": ^5.4.0
|
||||
core-js: ^3.8.2
|
||||
jest-image-snapshot: ^4.3.0
|
||||
puppeteer: ^2.0.0 || ^3.0.0
|
||||
regenerator-runtime: ^0.13.7
|
||||
peerDependencies:
|
||||
"@storybook/addon-storyshots": 6.5.0-rc.1
|
||||
puppeteer: ^2.0.0 || ^3.0.0
|
||||
puppeteer: ">=2.0.0"
|
||||
peerDependenciesMeta:
|
||||
puppeteer:
|
||||
optional: true
|
||||
@ -6947,7 +6948,7 @@ __metadata:
|
||||
estraverse: ^5.2.0
|
||||
loader-utils: ^2.0.0
|
||||
prop-types: ^15.7.2
|
||||
react-syntax-highlighter: ^15.4.5
|
||||
react-syntax-highlighter: ^15.5.0
|
||||
regenerator-runtime: ^0.13.7
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
@ -7763,7 +7764,6 @@ __metadata:
|
||||
commander: ^6.2.1
|
||||
compression: ^1.7.4
|
||||
core-js: ^3.8.2
|
||||
cpy: ^8.1.2
|
||||
detect-port: ^1.3.0
|
||||
express: ^4.17.1
|
||||
fs-extra: ^9.0.1
|
||||
@ -15978,7 +15978,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"buffer@npm:^5.5.0, buffer@npm:^5.6.0":
|
||||
"buffer@npm:^5.2.1, buffer@npm:^5.5.0, buffer@npm:^5.6.0":
|
||||
version: 5.7.1
|
||||
resolution: "buffer@npm:5.7.1"
|
||||
dependencies:
|
||||
@ -18123,35 +18123,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"cp-file@npm:^7.0.0":
|
||||
version: 7.0.0
|
||||
resolution: "cp-file@npm:7.0.0"
|
||||
dependencies:
|
||||
graceful-fs: ^4.1.2
|
||||
make-dir: ^3.0.0
|
||||
nested-error-stacks: ^2.0.0
|
||||
p-event: ^4.1.0
|
||||
checksum: db3ef3e3e466742f392ae71edb9b2cdbb314e855d97630a65de57bc1097bacf6e844f6d9d44882b8678c0de26ba7e656c2c915960435970067823372e807eafa
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"cpy@npm:^8.1.2":
|
||||
version: 8.1.2
|
||||
resolution: "cpy@npm:8.1.2"
|
||||
dependencies:
|
||||
arrify: ^2.0.1
|
||||
cp-file: ^7.0.0
|
||||
globby: ^9.2.0
|
||||
has-glob: ^1.0.0
|
||||
junk: ^3.1.0
|
||||
nested-error-stacks: ^2.1.0
|
||||
p-all: ^2.1.0
|
||||
p-filter: ^2.1.0
|
||||
p-map: ^3.0.0
|
||||
checksum: 84611fdd526a0582ae501a0fa1e1d55e16348c69110eb17be5fc0c087b7b2aa6caec014286b669e4f123750d01e0c4db77d32fdcdb9840c3df4d161a137a345a
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"cra-kitchen-sink@workspace:examples/cra-kitchen-sink":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "cra-kitchen-sink@workspace:examples/cra-kitchen-sink"
|
||||
@ -20919,7 +20890,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"end-of-stream@npm:^1.0.0, end-of-stream@npm:^1.1.0":
|
||||
"end-of-stream@npm:^1.0.0, end-of-stream@npm:^1.1.0, end-of-stream@npm:^1.4.1":
|
||||
version: 1.4.4
|
||||
resolution: "end-of-stream@npm:1.4.4"
|
||||
dependencies:
|
||||
@ -22733,7 +22704,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"extract-zip@npm:2.0.1":
|
||||
"extract-zip@npm:2.0.1, extract-zip@npm:^2.0.0":
|
||||
version: 2.0.1
|
||||
resolution: "extract-zip@npm:2.0.1"
|
||||
dependencies:
|
||||
@ -23695,6 +23666,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"fs-constants@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "fs-constants@npm:1.0.0"
|
||||
checksum: a0cde99085f0872f4d244e83e03a46aa387b74f5a5af750896c6b05e9077fac00e9932fdf5aef84f2f16634cd473c63037d7a512576da7d5c2b9163d1909f3a8
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"fs-exists-sync@npm:^0.1.0":
|
||||
version: 0.1.0
|
||||
resolution: "fs-exists-sync@npm:0.1.0"
|
||||
@ -24894,15 +24872,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"has-glob@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "has-glob@npm:1.0.0"
|
||||
dependencies:
|
||||
is-glob: ^3.0.0
|
||||
checksum: 2546d20b7a667304d8b2e490c2d5a4e20e799a43eb6d97c0d47c0c737bbde082a73731001c791d445b904b3f408d584477df7d2d301183e13c4b3f0a3c81787b
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"has-symbols@npm:^1.0.1, has-symbols@npm:^1.0.2":
|
||||
version: 1.0.2
|
||||
resolution: "has-symbols@npm:1.0.2"
|
||||
@ -26982,7 +26951,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"is-glob@npm:^3.0.0, is-glob@npm:^3.1.0":
|
||||
"is-glob@npm:^3.1.0":
|
||||
version: 3.1.0
|
||||
resolution: "is-glob@npm:3.1.0"
|
||||
dependencies:
|
||||
@ -29707,13 +29676,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"junk@npm:^3.1.0":
|
||||
version: 3.1.0
|
||||
resolution: "junk@npm:3.1.0"
|
||||
checksum: 820174b9fa9a3af09aeeeeb1022df2481a2b10752ce5f65ac63924a79cb9bba83ea7c288e8d5b448951109742da5ea69a230846f4bf3c17c5c6a1d0603b63db4
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"jwa@npm:^1.4.1":
|
||||
version: 1.4.1
|
||||
resolution: "jwa@npm:1.4.1"
|
||||
@ -32779,6 +32741,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"mkdirp-classic@npm:^0.5.2":
|
||||
version: 0.5.3
|
||||
resolution: "mkdirp-classic@npm:0.5.3"
|
||||
checksum: 95371d831d196960ddc3833cc6907e6b8f67ac5501a6582f47dfae5eb0f092e9f8ce88e0d83afcae95d6e2b61a01741ba03714eeafb6f7a6e9dcc158ac85b168
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"mkdirp-promise@npm:^5.0.1":
|
||||
version: 5.0.1
|
||||
resolution: "mkdirp-promise@npm:5.0.1"
|
||||
@ -33162,13 +33131,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"nested-error-stacks@npm:^2.0.0, nested-error-stacks@npm:^2.1.0":
|
||||
version: 2.1.0
|
||||
resolution: "nested-error-stacks@npm:2.1.0"
|
||||
checksum: 8d4e8f81a66be0910d766b3a5972117b0a65bade2f18b2dcb414489e73f93d84dd2b88d5cbf3550b7f427c2f2bbfe2e6e2945b228eefe3328b1fde335df220d1
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"next-tick@npm:~1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "next-tick@npm:1.0.0"
|
||||
@ -34464,15 +34426,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"p-all@npm:^2.1.0":
|
||||
version: 2.1.0
|
||||
resolution: "p-all@npm:2.1.0"
|
||||
dependencies:
|
||||
p-map: ^2.0.0
|
||||
checksum: 874eafa2e3f38b258f8beed34549befbc8a52a63818e0981b8beff03f592e1e1f47b8aab2483f844f2745815ffa010def58bf1edbc95614466c55411f02f3049
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"p-cancelable@npm:^1.0.0":
|
||||
version: 1.1.0
|
||||
resolution: "p-cancelable@npm:1.1.0"
|
||||
@ -34510,24 +34463,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"p-event@npm:^4.1.0":
|
||||
version: 4.2.0
|
||||
resolution: "p-event@npm:4.2.0"
|
||||
dependencies:
|
||||
p-timeout: ^3.1.0
|
||||
checksum: f1b6a2fb13d47f2a8afc00150da5ece0d28940ce3d8fa562873e091d3337d298e78fee9cb18b768598ff1d11df608b2ae23868309ff6405b864a2451ccd6d25a
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"p-filter@npm:^2.1.0":
|
||||
version: 2.1.0
|
||||
resolution: "p-filter@npm:2.1.0"
|
||||
dependencies:
|
||||
p-map: ^2.0.0
|
||||
checksum: 5ac34b74b3b691c04212d5dd2319ed484f591c557a850a3ffc93a08cb38c4f5540be059c6b10a185773c479ca583a91ea00c7d6c9958c815e6b74d052f356645
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"p-finally@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "p-finally@npm:1.0.0"
|
||||
@ -34678,15 +34613,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"p-timeout@npm:^3.1.0":
|
||||
version: 3.2.0
|
||||
resolution: "p-timeout@npm:3.2.0"
|
||||
dependencies:
|
||||
p-finally: ^1.0.0
|
||||
checksum: 524b393711a6ba8e1d48137c5924749f29c93d70b671e6db761afa784726572ca06149c715632da8f70c090073afb2af1c05730303f915604fd38ee207b70a61
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"p-try@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "p-try@npm:1.0.0"
|
||||
@ -37176,6 +37102,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"prismjs@npm:^1.27.0":
|
||||
version: 1.28.0
|
||||
resolution: "prismjs@npm:1.28.0"
|
||||
checksum: bf879309e74188b424cf8bb3962f9df9e7004a71f44f82a3cfbd26f884c9a0bb91f529db79503c1bc0b570ed7b94a10c3303153642da533c1e10f51779c0617f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"private@npm:^0.1.6, private@npm:^0.1.8, private@npm:~0.1.5":
|
||||
version: 0.1.8
|
||||
resolution: "private@npm:0.1.8"
|
||||
@ -37719,6 +37652,24 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"puppeteer@npm:^2.0.0 || ^3.0.0":
|
||||
version: 3.3.0
|
||||
resolution: "puppeteer@npm:3.3.0"
|
||||
dependencies:
|
||||
debug: ^4.1.0
|
||||
extract-zip: ^2.0.0
|
||||
https-proxy-agent: ^4.0.0
|
||||
mime: ^2.0.3
|
||||
progress: ^2.0.1
|
||||
proxy-from-env: ^1.0.0
|
||||
rimraf: ^3.0.2
|
||||
tar-fs: ^2.0.0
|
||||
unbzip2-stream: ^1.3.3
|
||||
ws: ^7.2.3
|
||||
checksum: 9f8d7f00458425f9ca42580f509f5406ddf27767dbf93080d05157a7882efaf0e32c77e540c8a4d2bd295ab11584a8447d9e6593d6316bf04ce1a16d6fd11b4e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"puppeteer@npm:^2.1.1":
|
||||
version: 2.1.1
|
||||
resolution: "puppeteer@npm:2.1.1"
|
||||
@ -38670,6 +38621,21 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-syntax-highlighter@npm:^15.5.0":
|
||||
version: 15.5.0
|
||||
resolution: "react-syntax-highlighter@npm:15.5.0"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.3.1
|
||||
highlight.js: ^10.4.1
|
||||
lowlight: ^1.17.0
|
||||
prismjs: ^1.27.0
|
||||
refractor: ^3.6.0
|
||||
peerDependencies:
|
||||
react: ">= 0.14.0"
|
||||
checksum: 2bf57a1ea151f688efc7eba355677577c9bb55f05f9df7ef86627aae42f63f505486cddf3f4a628aecc51ec75e89beb9533201570d03201c4bf7d69d61d2545d
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-test-renderer@npm:^16.0.0-0, react-test-renderer@npm:^16.2.0":
|
||||
version: 16.14.0
|
||||
resolution: "react-test-renderer@npm:16.14.0"
|
||||
@ -39179,7 +39145,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"refractor@npm:^3.2.0":
|
||||
"refractor@npm:^3.2.0, refractor@npm:^3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "refractor@npm:3.6.0"
|
||||
dependencies:
|
||||
@ -43368,6 +43334,31 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"tar-fs@npm:^2.0.0":
|
||||
version: 2.1.1
|
||||
resolution: "tar-fs@npm:2.1.1"
|
||||
dependencies:
|
||||
chownr: ^1.1.1
|
||||
mkdirp-classic: ^0.5.2
|
||||
pump: ^3.0.0
|
||||
tar-stream: ^2.1.4
|
||||
checksum: 871d26a934bfb7beeae4c4d8a09689f530b565f79bd0cf489823ff0efa3705da01278160da10bb006d1a793fa0425cf316cec029b32a9159eacbeaff4965fb6d
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"tar-stream@npm:^2.1.4":
|
||||
version: 2.2.0
|
||||
resolution: "tar-stream@npm:2.2.0"
|
||||
dependencies:
|
||||
bl: ^4.0.3
|
||||
end-of-stream: ^1.4.1
|
||||
fs-constants: ^1.0.0
|
||||
inherits: ^2.0.3
|
||||
readable-stream: ^3.1.1
|
||||
checksum: 2f4c910b3ee7196502e1ff015a7ba321ec6ea837667220d7bcb8d0852d51cb04b87f7ae471008a6fb8f5b1a1b5078f62f3a82d30c706f20ada1238ac797e7692
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"tar@npm:5.0.5":
|
||||
version: 5.0.5
|
||||
resolution: "tar@npm:5.0.5"
|
||||
@ -44844,6 +44835,16 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"unbzip2-stream@npm:^1.3.3":
|
||||
version: 1.4.3
|
||||
resolution: "unbzip2-stream@npm:1.4.3"
|
||||
dependencies:
|
||||
buffer: ^5.2.1
|
||||
through: ^2.3.8
|
||||
checksum: 2ea2048f3c9db3499316ccc1d95ff757017ccb6f46c812d7c42466247e3b863fb178864267482f7f178254214247779daf68e85f50bd7736c3c97ba2d58b910a
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"undefsafe@npm:^2.0.5":
|
||||
version: 2.0.5
|
||||
resolution: "undefsafe@npm:2.0.5"
|
||||
@ -47928,6 +47929,21 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"ws@npm:^7.2.3":
|
||||
version: 7.5.8
|
||||
resolution: "ws@npm:7.5.8"
|
||||
peerDependencies:
|
||||
bufferutil: ^4.0.1
|
||||
utf-8-validate: ^5.0.2
|
||||
peerDependenciesMeta:
|
||||
bufferutil:
|
||||
optional: true
|
||||
utf-8-validate:
|
||||
optional: true
|
||||
checksum: 0d2e3f16102dc7fe7544e1f7c09a12cdd2b2ac3134ba3f9dabdc7e8c003d5a7797caa29fdb13d22cd5e2a7481d80fde779526d73a7b4b57d0480d6f62e5571d5
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"ws@npm:^8.2.3":
|
||||
version: 8.5.0
|
||||
resolution: "ws@npm:8.5.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user