diff --git a/README.md b/README.md index df9b875b9e3f..d514f050ed93 100644 --- a/README.md +++ b/README.md @@ -42,8 +42,8 @@

-[Storybook](https://storybook.js.org) is a development environment for UI components. -It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Find out more at https://storybook.js.org. +

Storybook is a development environment for UI components.
+It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
Find out more at https://storybook.js.org.

@@ -51,8 +51,9 @@ It allows you to browse a component library, view the different states of each c

View README for:
- latest - next + latest + next + future

## Table of contents diff --git a/addons/a11y/src/components/A11yContext.tsx b/addons/a11y/src/components/A11yContext.tsx index bd3c378f2659..723b4e8962c7 100644 --- a/addons/a11y/src/components/A11yContext.tsx +++ b/addons/a11y/src/components/A11yContext.tsx @@ -22,9 +22,9 @@ interface A11yContextStore { } const colorsByType = [ - convert(themes.normal).color.negative, // VIOLATION, - convert(themes.normal).color.positive, // PASS, - convert(themes.normal).color.warning, // INCOMPLETION, + convert(themes.light).color.negative, // VIOLATION, + convert(themes.light).color.positive, // PASS, + convert(themes.light).color.warning, // INCOMPLETION, ]; export const A11yContext = React.createContext({ diff --git a/addons/interactions/README.md b/addons/interactions/README.md index d3687e084f32..0cd9e62bc3a5 100644 --- a/addons/interactions/README.md +++ b/addons/interactions/README.md @@ -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) => ; +export const Basic = { + render: () => , +}; ``` \ No newline at end of file diff --git a/docs/snippets/react/button-story-with-addon-example.ts.mdx b/docs/snippets/react/button-story-with-addon-example.ts.mdx index 8c1fd7d10081..5f90996fc267 100644 --- a/docs/snippets/react/button-story-with-addon-example.ts.mdx +++ b/docs/snippets/react/button-story-with-addon-example.ts.mdx @@ -3,15 +3,15 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryObj, ComponentMeta } from '@storybook/react'; import { Button } from './Button'; export default { /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, //👇 Creates specific parameters for the story @@ -22,5 +22,12 @@ export default { }, } as ComponentMeta; -const Basic: ComponentStory = () => ; +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/react/api/csf + * to learn how to use render functions. + */ +export const Basic: ComponentStoryObj = { + render: () => , +}; ``` \ No newline at end of file diff --git a/docs/snippets/react/button-story-with-args.js.mdx b/docs/snippets/react/button-story-with-args.js.mdx index 430d0187f520..7fcf35be8bde 100644 --- a/docs/snippets/react/button-story-with-args.js.mdx +++ b/docs/snippets/react/button-story-with-args.js.mdx @@ -7,20 +7,17 @@ import { Button } from './Button'; export default { /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, }; -//👇 We create a “template” of how args map to rendering -const Template = (args) => ; +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/react/api/csf + * to learn how to use render functions. + */ +export const Primary = { + render: () => ; +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/react/api/csf + * to learn how to use render functions. + */ +export const Primary: ComponentStoryObj = { + render: () => +
+ {args.json && 
{JSON.stringify(args.json, null, 2)}
}
); diff --git a/examples/official-storybook/stories/core/args.stories.js b/examples/official-storybook/stories/core/args.stories.tsx similarity index 78% rename from examples/official-storybook/stories/core/args.stories.js rename to examples/official-storybook/stories/core/args.stories.tsx index 4ee37b44f996..2242a1d1f023 100644 --- a/examples/official-storybook/stories/core/args.stories.js +++ b/examples/official-storybook/stories/core/args.stories.tsx @@ -1,8 +1,20 @@ -import React, { useState } from 'react'; +import React, { FC, useState } from 'react'; import { useArgs } from '@storybook/client-api'; -// eslint-disable-next-line react/prop-types -const ArgUpdater = ({ args, updateArgs, resetArgs }) => { +interface CustomArgs { + first?: string; + last?: string; + foo?: string; +} + +type UpdateArgs = ReturnType[1]; +type ResetArgs = ReturnType[2]; + +const ArgUpdater: FC<{ args: CustomArgs; updateArgs: UpdateArgs; resetArgs: ResetArgs }> = ({ + args, + updateArgs, + resetArgs, +}) => { const [argsInput, updateArgsInput] = useState(JSON.stringify(args)); return ( @@ -30,7 +42,7 @@ export default { title: 'Core/Args', decorators: [ (story) => { - const [args, updateArgs, resetArgs] = useArgs(); + const [args, updateArgs, resetArgs] = useArgs(); return ( <> @@ -63,14 +75,14 @@ export const DifferentSet = Template.bind({}); DifferentSet.args = { foo: 'bar', bar: 2, -}; +} as CustomArgs; export const TestUndefinedArgs = Template.bind({}); TestUndefinedArgs.args = { first: 'Bob', last: 'Miller', foo: 'bar', -}; +} as CustomArgs; TestUndefinedArgs.argTypes = { first: { control: { type: 'select' }, diff --git a/examples/official-storybook/stories/title/AutoTitle.stories.js b/examples/official-storybook/stories/title/AutoTitle.stories.js index 3a2b02502232..125c1157c1c1 100644 --- a/examples/official-storybook/stories/title/AutoTitle.stories.js +++ b/examples/official-storybook/stories/title/AutoTitle.stories.js @@ -10,4 +10,3 @@ export default { }; export const Basic = () => +

A little text to show this is a view.

If we need to test components in a Svelte environment, for instance to test slot behaviour,

then wrapping the component up in a view

diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json index 042c6c94925d..091c11a6471a 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -37,6 +37,7 @@ "svg-url-loader": "^7.1.1", "vue-loader": "^15.9.6", "vue-style-loader": "^4.1.2", + "vue-template-compiler": "^2.6.12", "webpack": "4", "webpack-dev-server": "^3.11.2" }, diff --git a/lib/addons/src/hooks.ts b/lib/addons/src/hooks.ts index dd329046ca4e..42dab8e2a6c6 100644 --- a/lib/addons/src/hooks.ts +++ b/lib/addons/src/hooks.ts @@ -424,21 +424,21 @@ export function useParameter(parameterKey: string, defaultValue?: S): S | und } /* Returns current value of story args */ -export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: [string]) => void] { +export function useArgs(): [SpecificArgs, (newArgs: Partial) => void, (argNames?: (keyof SpecificArgs)[]) => void] { const channel = addons.getChannel(); const { id: storyId, args } = useStoryContext(); const updateArgs = useCallback( - (updatedArgs: Args) => channel.emit(UPDATE_STORY_ARGS, { storyId, updatedArgs }), + (updatedArgs: Partial) => channel.emit(UPDATE_STORY_ARGS, { storyId, updatedArgs }), [channel, storyId] ); const resetArgs = useCallback( - (argNames?: [string]) => channel.emit(RESET_STORY_ARGS, { storyId, argNames }), + (argNames?: (keyof SpecificArgs)[]) => channel.emit(RESET_STORY_ARGS, { storyId, argNames }), [channel, storyId] ); - return [args, updateArgs, resetArgs]; + return [args as SpecificArgs, updateArgs, resetArgs]; } /* Returns current value of global args */ diff --git a/lib/api/src/index.tsx b/lib/api/src/index.tsx index 20180733964a..2bdf8ff3dc3c 100644 --- a/lib/api/src/index.tsx +++ b/lib/api/src/index.tsx @@ -447,13 +447,14 @@ export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) const data = getCurrentStoryData(); const args = isStory(data) ? data.args : {}; + const { id, refId } = data; const updateArgs = useCallback( - (newArgs: Args) => updateStoryArgs(data as Story, newArgs), - [data, updateStoryArgs] + (newArgs: Args) => updateStoryArgs({ id, refId }, newArgs), + [id, refId, updateStoryArgs] ); const resetArgs = useCallback( - (argNames?: string[]) => resetStoryArgs(data as Story, argNames), - [data, resetStoryArgs] + (argNames?: string[]) => resetStoryArgs({ id, refId }, argNames), + [id, refId, resetStoryArgs] ); return [args, updateArgs, resetArgs]; diff --git a/lib/api/src/lib/stories.ts b/lib/api/src/lib/stories.ts index 38023cdd8fd3..7013c717a2dc 100644 --- a/lib/api/src/lib/stories.ts +++ b/lib/api/src/lib/stories.ts @@ -131,6 +131,11 @@ export interface StoryIndex { stories: Record; } +export interface StoryKey { + id: StoryId; + refId?: string; +} + export type SetStoriesPayload = | { v: 2; @@ -282,9 +287,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, }); }); diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts index 3fba1905012c..a76cde6ce748 100644 --- a/lib/api/src/modules/layout.ts +++ b/lib/api/src/modules/layout.ts @@ -1,7 +1,7 @@ import global from 'global'; import pick from 'lodash/pick'; import deepEqual from 'fast-deep-equal'; -import { themes } from '@storybook/theming'; +import { create } from '@storybook/theming'; import type { ThemeVars } from '@storybook/theming'; import { once } from '@storybook/client-logger'; import dedent from 'ts-dedent'; @@ -84,7 +84,7 @@ const defaultState: SubState = { showTabs: true, }, selectedPanel: undefined, - theme: themes.light, + theme: create(), }; export const focusableUIElements = { diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts index 70b3c5ba8800..7fab948b78d4 100644 --- a/lib/api/src/modules/stories.ts +++ b/lib/api/src/modules/stories.ts @@ -36,6 +36,7 @@ import type { StoriesRaw, SetStoriesPayload, StoryIndex, + StoryKey, } from '../lib/stories'; import { Args, ModuleFn } from '../index'; @@ -78,8 +79,8 @@ export interface SubAPI { parameterName?: ParameterName ) => Story['parameters'] | any; getCurrentParameter(parameterName?: ParameterName): S; - updateStoryArgs(story: Story, newArgs: Args): void; - resetStoryArgs: (story: Story, argNames?: string[]) => void; + updateStoryArgs(story: Story | StoryKey, newArgs: Args): void; + resetStoryArgs: (story: Story | StoryKey, argNames?: string[]) => void; findLeafStoryId(StoriesHash: StoriesHash, storyId: StoryId): StoryId; findSiblingStoryId( storyId: StoryId, diff --git a/lib/api/src/tests/stories.test.js b/lib/api/src/tests/stories.test.js index 97e1d15c9947..bfd3b48e0bf6 100644 --- a/lib/api/src/tests/stories.test.js +++ b/lib/api/src/tests/stories.test.js @@ -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, }); diff --git a/lib/builder-webpack4/src/preview/babel-loader-preview.ts b/lib/builder-webpack4/src/preview/babel-loader-preview.ts index 7056e71e78d2..c7eee56fae41 100644 --- a/lib/builder-webpack4/src/preview/babel-loader-preview.ts +++ b/lib/builder-webpack4/src/preview/babel-loader-preview.ts @@ -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'), diff --git a/lib/builder-webpack5/src/preview/babel-loader-preview.ts b/lib/builder-webpack5/src/preview/babel-loader-preview.ts index 7d02ca31a461..86d9a1cc713d 100644 --- a/lib/builder-webpack5/src/preview/babel-loader-preview.ts +++ b/lib/builder-webpack5/src/preview/babel-loader-preview.ts @@ -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'), diff --git a/lib/channel-postmessage/src/index.ts b/lib/channel-postmessage/src/index.ts index c4221f5509d4..6c3fb9574f91 100644 --- a/lib/channel-postmessage/src/index.ts +++ b/lib/channel-postmessage/src/index.ts @@ -35,7 +35,9 @@ export class PostmsgTransport { constructor(private readonly config: Config) { this.buffer = []; this.handler = null; - globalWindow.addEventListener('message', this.handleEvent.bind(this), false); + if (globalWindow) { + globalWindow.addEventListener('message', this.handleEvent.bind(this), false); + } // Check whether the config.page parameter has a valid value if (config.page !== 'manager' && config.page !== 'preview') { @@ -195,7 +197,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 = diff --git a/lib/cli/src/frameworks/html/ts/Button.stories.ts b/lib/cli/src/frameworks/html/ts/Button.stories.ts index e71e07a76b9c..cfbe58ebefdb 100644 --- a/lib/cli/src/frameworks/html/ts/Button.stories.ts +++ b/lib/cli/src/frameworks/html/ts/Button.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/html'; +import { StoryFn, Meta } from '@storybook/html'; import { createButton, ButtonProps } from './Button'; // More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export @@ -15,10 +15,10 @@ export default { options: ['small', 'medium', 'large'], }, }, -} as Meta; +} as Meta; // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args -const Template: Story = (args) => { +const Template: StoryFn = (args) => { // You can either use a function to create DOM elements or use a plain html string! // return `
${label}
`; return createButton(args); diff --git a/lib/cli/src/frameworks/html/ts/Button.ts b/lib/cli/src/frameworks/html/ts/Button.ts index e55ec3dd3b85..17f8c4c07cc2 100644 --- a/lib/cli/src/frameworks/html/ts/Button.ts +++ b/lib/cli/src/frameworks/html/ts/Button.ts @@ -36,12 +36,16 @@ export const createButton = ({ const btn = document.createElement('button'); btn.type = 'button'; btn.innerText = label; - btn.addEventListener('click', onClick); + if (onClick) { + btn.addEventListener('click', onClick); + } const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' '); - btn.style.backgroundColor = backgroundColor; + if (backgroundColor) { + btn.style.backgroundColor = backgroundColor; + } return btn; }; diff --git a/lib/cli/src/frameworks/html/ts/Header.stories.ts b/lib/cli/src/frameworks/html/ts/Header.stories.ts index a727dffbee22..e9096212fecc 100644 --- a/lib/cli/src/frameworks/html/ts/Header.stories.ts +++ b/lib/cli/src/frameworks/html/ts/Header.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/html'; +import { StoryFn, Meta } from '@storybook/html'; import { createHeader, HeaderProps } from './Header'; export default { @@ -13,9 +13,9 @@ export default { onLogout: { action: 'onLogout' }, onCreateAccount: { action: 'onCreateAccount' }, }, -} as Meta; +} as Meta; -const Template: Story = (args) => createHeader(args); +const Template: StoryFn = (args) => createHeader(args); export const LoggedIn = Template.bind({}); LoggedIn.args = { diff --git a/lib/cli/src/frameworks/html/ts/Page.stories.ts b/lib/cli/src/frameworks/html/ts/Page.stories.ts index bc7b6cdbe0e4..bea5705b9eff 100644 --- a/lib/cli/src/frameworks/html/ts/Page.stories.ts +++ b/lib/cli/src/frameworks/html/ts/Page.stories.ts @@ -1,5 +1,5 @@ import { within, userEvent } from '@storybook/testing-library'; -import { Story, Meta } from '@storybook/html'; +import { StoryFn, Meta } from '@storybook/html'; import { createPage } from './Page'; export default { @@ -10,7 +10,7 @@ export default { }, } as Meta; -const Template: Story = () => createPage(); +const Template: StoryFn = () => createPage(); export const LoggedOut = Template.bind({}); diff --git a/lib/cli/src/frameworks/html/ts/Page.ts b/lib/cli/src/frameworks/html/ts/Page.ts index 5c66149c82b5..4c4028ff1d99 100644 --- a/lib/cli/src/frameworks/html/ts/Page.ts +++ b/lib/cli/src/frameworks/html/ts/Page.ts @@ -7,12 +7,12 @@ type User = { export const createPage = () => { const article = document.createElement('article'); - let user: User = null; - let header = null; + let user: User | undefined; + let header: HTMLElement | null = null; const rerenderHeader = () => { const wrapper = document.getElementsByTagName('article')[0]; - wrapper.replaceChild(createHeaderElement(), wrapper.firstChild); + wrapper.replaceChild(createHeaderElement(), wrapper.firstChild as HTMLElement); }; const onLogin = () => { @@ -21,7 +21,7 @@ export const createPage = () => { }; const onLogout = () => { - user = null; + user = undefined; rerenderHeader(); }; diff --git a/lib/cli/src/generators/SVELTE/index.ts b/lib/cli/src/generators/SVELTE/index.ts index a5b5c9c0879e..d9507ce8d141 100644 --- a/lib/cli/src/generators/SVELTE/index.ts +++ b/lib/cli/src/generators/SVELTE/index.ts @@ -5,7 +5,6 @@ import { baseGenerator, Generator } from '../baseGenerator'; const generator: Generator = async (packageManager, npmOptions, options) => { let extraMain; - let commonJs = false; // svelte.config.js ? if (fse.existsSync('./svelte.config.js')) { logger.info("Configuring preprocessor from 'svelte.config.js'"); @@ -16,8 +15,6 @@ const generator: Generator = async (packageManager, npmOptions, options) => { } else if (fse.existsSync('./svelte.config.cjs')) { logger.info("Configuring preprocessor from 'svelte.config.cjs'"); - commonJs = true; - extraMain = { svelteOptions: { preprocess: '%%require("../svelte.config.cjs").preprocess%%' }, }; @@ -37,7 +34,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { extraPackages: ['svelte', 'svelte-loader'], extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'], extraMain, - commonJs, + commonJs: true, }); }; diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts index 1071db277dc2..50eb00383f3c 100644 --- a/lib/cli/src/generators/baseGenerator.ts +++ b/lib/cli/src/generators/baseGenerator.ts @@ -90,7 +90,7 @@ export async function baseGenerator( // make sure to update `canUsePrebuiltManager` in dev-server.js and build-manager-config/main.js when this list changes const addons = ['@storybook/addon-links', '@storybook/addon-essentials']; // added to package.json - const addonPackages = [...addons, '@storybook/addon-actions']; + const addonPackages = [...addons]; if (hasInteractiveStories(framework)) { addons.push('@storybook/addon-interactions'); diff --git a/lib/codemod/src/transforms/csf-2-to-3.ts b/lib/codemod/src/transforms/csf-2-to-3.ts index 97552cbd9373..18e7e272171f 100644 --- a/lib/codemod/src/transforms/csf-2-to-3.ts +++ b/lib/codemod/src/transforms/csf-2-to-3.ts @@ -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 { diff --git a/lib/components/package.json b/lib/components/package.json index e57b79742407..9fbeddc3bc1f 100644 --- a/lib/components/package.json +++ b/lib/components/package.json @@ -37,6 +37,7 @@ "*.d.ts" ], "scripts": { + "check": "tsc --noEmit", "prepare": "ts-node ../../scripts/prebundle.ts" }, "dependencies": { @@ -51,9 +52,13 @@ }, "devDependencies": { "@popperjs/core": "^2.6.0", + "@testing-library/jest-dom": "^5.16.4", "@types/color-convert": "^2.0.0", + "@types/lodash": "^4.14.182", "@types/overlayscrollbars": "^1.12.0", + "@types/qs": "^6.9.7", "@types/react-syntax-highlighter": "11.0.5", + "@types/util-deprecate": "^1.0.0", "color-convert": "^2.0.1", "css": "^3.0.0", "fast-deep-equal": "^3.1.3", diff --git a/lib/components/src/ScrollArea/ScrollArea.tsx b/lib/components/src/ScrollArea/ScrollArea.tsx index 6c329b98eeb7..22df6d6b075a 100644 --- a/lib/components/src/ScrollArea/ScrollArea.tsx +++ b/lib/components/src/ScrollArea/ScrollArea.tsx @@ -12,6 +12,7 @@ const Scroller: FunctionComponent = ({ horizontal, vertical, .. ); export interface ScrollAreaProps { + children?: React.ReactNode; horizontal?: boolean; vertical?: boolean; className?: string; diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx index f353984140e5..dd7bff89c924 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx @@ -261,6 +261,7 @@ const sortFns: Record = { }; export interface ArgsTableOptionProps { + children?: React.ReactNode; updateArgs?: (args: Args) => void; resetArgs?: (argNames?: string[]) => void; compact?: boolean; diff --git a/lib/components/src/blocks/ArgsTable/SectionRow.tsx b/lib/components/src/blocks/ArgsTable/SectionRow.tsx index d92ab2985396..362449e71975 100644 --- a/lib/components/src/blocks/ArgsTable/SectionRow.tsx +++ b/lib/components/src/blocks/ArgsTable/SectionRow.tsx @@ -6,6 +6,7 @@ import { Icons } from '../../icon/icon'; type Level = 'section' | 'subsection'; export interface SectionRowProps { + children?: React.ReactNode; label: string; level: Level; initialExpanded?: boolean; diff --git a/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx b/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx index e49baf7deb2f..58ff30b4a5e5 100644 --- a/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx +++ b/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx @@ -3,6 +3,7 @@ import { ArgsTable, ArgsTableProps, SortType } from './ArgsTable'; import { TabsState } from '../../tabs/tabs'; export interface TabbedArgsTableProps { + children?: React.ReactNode; tabs: Record; sort?: SortType; } @@ -19,12 +20,17 @@ export const TabbedArgsTable: FC = ({ tabs, ...props }) => {entries.map((entry) => { const [label, table] = entry; const id = `prop_table_div_${label}`; + const Component = 'div' as unknown as React.ElementType< + Omit & { + children: ({ active }: { active: boolean }) => React.ReactNode; + } + >; return ( -
- {({ active }: { active: boolean }) => + + {({ active }) => active ? : null } -
+ ); })} diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx index f35965c7c89b..51a9f0b67527 100644 --- a/lib/components/src/blocks/ColorPalette.tsx +++ b/lib/components/src/blocks/ColorPalette.tsx @@ -191,11 +191,15 @@ export const ColorItem: FunctionComponent = ({ title, subtitle, ); }; +interface ColorPaletteProps { + children?: React.ReactNode; +} + /** * Styleguide documentation for colors, including names, captions, and color swatches, * all specified as `ColorItem` children of this wrapper component. */ -export const ColorPalette: FunctionComponent = ({ children, ...props }) => ( +export const ColorPalette: FunctionComponent = ({ children, ...props }) => ( diff --git a/lib/components/src/blocks/DocsPage.tsx b/lib/components/src/blocks/DocsPage.tsx index 24bf4503de20..d94a235ca9ed 100644 --- a/lib/components/src/blocks/DocsPage.tsx +++ b/lib/components/src/blocks/DocsPage.tsx @@ -56,7 +56,11 @@ export const DocsWrapper = styled.div<{}>(({ theme }) => ({ [`@media (min-width: ${breakpoint}px)`]: {}, })); -export const DocsPageWrapper: FC = ({ children }) => ( +interface DocsPageWrapperProps { + children?: React.ReactNode; +} + +export const DocsPageWrapper: FC = ({ children }) => ( {children} diff --git a/lib/components/src/blocks/IconGallery.tsx b/lib/components/src/blocks/IconGallery.tsx index 7424eb235f72..045d5e5f3d02 100644 --- a/lib/components/src/blocks/IconGallery.tsx +++ b/lib/components/src/blocks/IconGallery.tsx @@ -45,6 +45,7 @@ const List = styled.div({ interface IconItemProps { name: string; + children?: React.ReactNode; } /** @@ -57,10 +58,14 @@ export const IconItem: FunctionComponent = ({ name, children }) = ); +interface IconGalleryProps { + children?: React.ReactNode; +} + /** * Show a grid of icons, as specified by `IconItem`. */ -export const IconGallery: FunctionComponent = ({ children, ...props }) => ( +export const IconGallery: FunctionComponent = ({ children, ...props }) => ( {children} diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx index 6750b49e0bda..77104f70189c 100644 --- a/lib/components/src/blocks/Preview.tsx +++ b/lib/components/src/blocks/Preview.tsx @@ -28,6 +28,7 @@ export interface PreviewProps { withToolbar?: boolean; className?: string; additionalActions?: ActionItem[]; + children?: ReactNode; } type layout = 'padded' | 'fullscreen' | 'centered'; diff --git a/lib/components/src/blocks/Source.tsx b/lib/components/src/blocks/Source.tsx index 4d79f1807b04..6a46c2d3f791 100644 --- a/lib/components/src/blocks/Source.tsx +++ b/lib/components/src/blocks/Source.tsx @@ -4,7 +4,7 @@ import { EmptyBlock } from './EmptyBlock'; import { SyntaxHighlighter } from '../syntaxhighlighter/lazy-syntaxhighlighter'; -const StyledSyntaxHighlighter = styled(SyntaxHighlighter)<{}>(({ theme }) => ({ +const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({ // DocBlocks-specific styling and overrides fontSize: `${theme.typography.size.s2 - 1}px`, lineHeight: '19px', diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx index bc466a54dd23..9fab0c9d81df 100644 --- a/lib/components/src/blocks/Story.tsx +++ b/lib/components/src/blocks/Story.tsx @@ -76,12 +76,9 @@ const IFrameStory: FunctionComponent = ({ id, title, height = * A story element, either rendered inline or in an iframe, * with configurable height. */ -const Story: FunctionComponent = ({ - children, - error, - inline, - ...props -}) => { +const Story: FunctionComponent< + StoryProps & { inline?: boolean; error?: StoryError; children?: React.ReactNode } +> = ({ children, error, inline, ...props }) => { const { id, title, height } = props; if (error) { diff --git a/lib/components/src/controls/Color.tsx b/lib/components/src/controls/Color.tsx index e6168506e8f0..09a868cc271e 100644 --- a/lib/components/src/controls/Color.tsx +++ b/lib/components/src/controls/Color.tsx @@ -285,7 +285,7 @@ const usePresets = ( return initialPresets.concat(selectedColors).filter(Boolean).slice(-27); }, [presetColors, selectedColors]); - const addPreset = useCallback( + const addPreset: (color: ParsedColor) => void = useCallback( (color) => { if (!color?.valid) return; if (presets.some((preset) => id(preset[colorSpace]) === id(color[colorSpace]))) return; @@ -307,9 +307,10 @@ export const ColorControl: FC = ({ presetColors, startOpen, }) => { + const throttledOnChange = useCallback(throttle(onChange, 200), [onChange]); const { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput( initialValue, - throttle(onChange, 200) + throttledOnChange ); const { presets, addPreset } = usePresets(presetColors, color, colorSpace); const Picker = ColorPicker[colorSpace]; diff --git a/lib/components/src/controls/Object.tsx b/lib/components/src/controls/Object.tsx index b8c18b0c0155..225b1962b09b 100644 --- a/lib/components/src/controls/Object.tsx +++ b/lib/components/src/controls/Object.tsx @@ -250,7 +250,7 @@ export const ObjectControl: FC = ({ name, value, onChange }) => { const [showRaw, setShowRaw] = useState(!hasData); const [parseError, setParseError] = useState(null); - const updateRaw = useCallback( + const updateRaw: (raw: string) => void = useCallback( (raw) => { try { if (raw) onChange(JSON.parse(raw)); diff --git a/lib/components/src/controls/Text.tsx b/lib/components/src/controls/Text.tsx index bbf18c74b015..dc76b95b05ce 100644 --- a/lib/components/src/controls/Text.tsx +++ b/lib/components/src/controls/Text.tsx @@ -11,7 +11,22 @@ const Wrapper = styled.label({ display: 'flex', }); -export const TextControl: FC = ({ 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 = ({ + name, + value, + onChange, + onFocus, + onBlur, + maxLength, +}) => { const handleChange = (event: ChangeEvent) => { onChange(event.target.value); }; @@ -34,6 +49,7 @@ export const TextControl: FC = ({ name, value, onChange, onFocus, onB = ({ name, value, onChange, onFocus, onB valid={isValid ? null : 'error'} {...{ name, value: isValid ? value : '', onFocus, onBlur }} /> + {maxLength && ( + + {value?.length ?? 0} / {maxLength} + + )} ); }; diff --git a/lib/components/src/controls/options/Options.tsx b/lib/components/src/controls/options/Options.tsx index 26a86b4b09da..c085a5d1fdd0 100644 --- a/lib/components/src/controls/options/Options.tsx +++ b/lib/components/src/controls/options/Options.tsx @@ -28,14 +28,14 @@ const normalizeOptions = (options: Options, labels?: Record) => { return options; }; -const Controls: Record = { +const Controls = { check: CheckboxControl, 'inline-check': CheckboxControl, radio: RadioControl, 'inline-radio': RadioControl, select: SelectControl, 'multi-select': SelectControl, -}; +} as const; export type OptionsProps = ControlProps & OptionsConfig; export const OptionsControl: FC = (props) => { diff --git a/lib/components/src/controls/types.ts b/lib/components/src/controls/types.ts index 668c366f8eef..aee13cc9f191 100644 --- a/lib/components/src/controls/types.ts +++ b/lib/components/src/controls/types.ts @@ -61,7 +61,9 @@ export interface NormalizedOptionsConfig { } export type TextValue = string; -export interface TextConfig {} +export interface TextConfig { + maxLength?: number; +} export type ControlType = | 'array' diff --git a/lib/components/src/form/field/field.tsx b/lib/components/src/form/field/field.tsx index 10cf3507a93a..4aa7e0581ae4 100644 --- a/lib/components/src/form/field/field.tsx +++ b/lib/components/src/form/field/field.tsx @@ -23,6 +23,7 @@ const Label = styled.span<{}>(({ theme }) => ({ })); export interface FieldProps { + children?: ReactNode; label?: ReactNode; } diff --git a/lib/components/src/placeholder/placeholder.tsx b/lib/components/src/placeholder/placeholder.tsx index 31e48adebb2b..fb9e0a1e142d 100644 --- a/lib/components/src/placeholder/placeholder.tsx +++ b/lib/components/src/placeholder/placeholder.tsx @@ -14,7 +14,11 @@ const Message = styled.div(({ theme }) => ({ fontSize: theme.typography.size.s2 - 1, })); -export const Placeholder: FunctionComponent = ({ children, ...props }) => { +export interface PlaceholderProps { + children?: React.ReactNode; +} + +export const Placeholder: FunctionComponent = ({ children, ...props }) => { const [title, desc] = Children.toArray(children); return ( diff --git a/lib/components/src/spaced/Spaced.tsx b/lib/components/src/spaced/Spaced.tsx index 90460605a6aa..02c869827558 100644 --- a/lib/components/src/spaced/Spaced.tsx +++ b/lib/components/src/spaced/Spaced.tsx @@ -53,6 +53,7 @@ const Container = styled.div( ); export interface SpacedProps { + children?: React.ReactNode; col?: number; row?: number; outer?: number | boolean; diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts b/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts index dfd948afb183..7548a537a72e 100644 --- a/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts +++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts @@ -25,15 +25,16 @@ export type SyntaxHighlighterFormatTypes = boolean | 'dedent' | BuiltInParserNam // which will not match one we've localized type-definitions type lineTagPropsFunction = (lineNumber: number) => React.HTMLProps; export interface SyntaxHighlighterBaseProps { - language?: string; - style?: any; + children?: React.ReactNode; + codeTagProps?: React.HTMLProps; customStyle?: any; + language?: string; + lineNumberStyle?: any; lineProps?: lineTagPropsFunction | React.HTMLProps; - codeTagProps?: React.HTMLProps; - useInlineStyles?: boolean; showLineNumbers?: boolean; startingLineNumber?: number; - lineNumberStyle?: any; + style?: any; + useInlineStyles?: boolean; } export type SyntaxHighlighterProps = SyntaxHighlighterBaseProps & SyntaxHighlighterCustomProps; diff --git a/lib/components/src/tabs/tabs.tsx b/lib/components/src/tabs/tabs.tsx index 57065e9dfe9f..24be8ad2943d 100644 --- a/lib/components/src/tabs/tabs.tsx +++ b/lib/components/src/tabs/tabs.tsx @@ -139,6 +139,7 @@ const childrenToList = (children: any, selected: string) => ); export interface TabsProps { + children?: FuncChildren[] | ReactNode; id?: string; tools?: ReactNode; selected?: string; @@ -202,10 +203,10 @@ Tabs.displayName = 'Tabs'; bordered: false, }; -type FuncChildren = () => void; +type FuncChildren = ({ active }: { active: boolean }) => JSX.Element; export interface TabsStateProps { - children: (ReactNode | FuncChildren)[]; + children: FuncChildren[] | ReactNode; initial: string; absolute: boolean; bordered: boolean; diff --git a/lib/components/src/tooltip/ListItem.tsx b/lib/components/src/tooltip/ListItem.tsx index c732e4663664..eb7e25a2f13f 100644 --- a/lib/components/src/tooltip/ListItem.tsx +++ b/lib/components/src/tooltip/ListItem.tsx @@ -4,6 +4,7 @@ import memoize from 'memoizerific'; import { transparentize } from 'polished'; export interface TitleProps { + children?: ReactNode; active?: boolean; loading?: boolean; disabled?: boolean; diff --git a/lib/components/src/tooltip/Tooltip.tsx b/lib/components/src/tooltip/Tooltip.tsx index 1d258b4d4e47..eeb094eb4137 100644 --- a/lib/components/src/tooltip/Tooltip.tsx +++ b/lib/components/src/tooltip/Tooltip.tsx @@ -116,6 +116,7 @@ const Wrapper = styled.div( ); export interface TooltipProps { + children?: React.ReactNode; arrowRef?: any; tooltipRef?: any; hasChrome?: boolean; diff --git a/lib/components/src/tooltip/WithTooltip.tsx b/lib/components/src/tooltip/WithTooltip.tsx index 55268dfeb189..71780fce842a 100644 --- a/lib/components/src/tooltip/WithTooltip.tsx +++ b/lib/components/src/tooltip/WithTooltip.tsx @@ -125,7 +125,7 @@ const WithToolTipState: FunctionComponent< } > = ({ startOpen, onVisibilityChange: onChange, ...rest }) => { const [tooltipShown, setTooltipShown] = useState(startOpen || false); - const onVisibilityChange = useCallback( + const onVisibilityChange: (visibility: boolean) => void = useCallback( (visibility) => { if (onChange && onChange(visibility) === false) return; setTooltipShown(visibility); diff --git a/lib/core-client/package.json b/lib/core-client/package.json index 42a78a1754c4..fdde9f327daa 100644 --- a/lib/core-client/package.json +++ b/lib/core-client/package.json @@ -63,8 +63,7 @@ }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "webpack": "*" + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { "typescript": { diff --git a/lib/core-client/src/typings.d.ts b/lib/core-client/src/typings.d.ts index 0a7386c391b9..1ef570433a55 100644 --- a/lib/core-client/src/typings.d.ts +++ b/lib/core-client/src/typings.d.ts @@ -6,6 +6,6 @@ declare module 'pnp-webpack-plugin'; declare module '@storybook/ui/paths'; declare module 'better-opn'; declare module 'open'; -declare module 'x-default-browser'; +declare module '@aw-web-design/x-default-browser'; declare module '@storybook/ui'; diff --git a/lib/core-common/package.json b/lib/core-common/package.json index 756ed0f188c4..743416e18308 100644 --- a/lib/core-common/package.json +++ b/lib/core-common/package.json @@ -72,7 +72,7 @@ "chalk": "^4.1.0", "core-js": "^3.8.2", "express": "^4.17.1", - "file-system-cache": "^1.0.5", + "file-system-cache": "^2.0.0", "find-up": "^5.0.0", "fork-ts-checker-webpack-plugin": "^6.0.4", "fs-extra": "^9.0.1", @@ -88,8 +88,7 @@ "slash": "^3.0.0", "telejson": "^6.0.8", "ts-dedent": "^2.0.0", - "util-deprecate": "^1.0.2", - "webpack": "4" + "util-deprecate": "^1.0.2" }, "devDependencies": { "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0", @@ -97,7 +96,8 @@ "@types/interpret": "^1.1.1", "@types/mock-fs": "^4.13.0", "@types/picomatch": "^2.3.0", - "mock-fs": "^4.13.0" + "mock-fs": "^4.13.0", + "webpack": "4" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts index b3ca1000ff06..2b8cd029f1b0 100644 --- a/lib/core-common/src/types.ts +++ b/lib/core-common/src/types.ts @@ -5,7 +5,7 @@ import type { Configuration, Stats } from 'webpack'; import type { TransformOptions } from '@babel/core'; import { Router } from 'express'; import { Server } from 'http'; -import { FileSystemCache } from './utils/file-cache'; +import type { FileSystemCache } from './utils/file-cache'; /** * ⚠️ This file contains internal WIP types they MUST NOT be exported outside this package for now! diff --git a/lib/core-common/src/utils/file-cache.ts b/lib/core-common/src/utils/file-cache.ts index 2f810b927a34..cc62de6dac47 100644 --- a/lib/core-common/src/utils/file-cache.ts +++ b/lib/core-common/src/utils/file-cache.ts @@ -1,65 +1,8 @@ -// @ts-ignore - this package has no typings, so we wrap it and add typings that way, because we expose it import Cache from 'file-system-cache'; -export interface Options { - basePath?: string; - ns?: string | string[]; - extension?: string; -} - -export class FileSystemCache { - constructor(options: Options) { - this.internal = Cache(options) as any as FileSystemCache; - } - - private internal: FileSystemCache; - - path(key: string): string { - return this.internal.path(key); - } - - fileExists(key: string): Promise { - return this.internal.fileExists(key); - } - - ensureBasePath(): Promise { - return this.internal.ensureBasePath(); - } - - get(key: string, defaultValue?: any): Promise { - return this.internal.get(key, defaultValue); - } - - getSync(key: string, defaultValue?: any): any | typeof defaultValue { - return this.internal.getSync(key, defaultValue); - } - - set(key: string, value: any): Promise<{ path: string }> { - return this.internal.set(key, value); - } - - setSync(key: string, value: any): this { - this.internal.setSync(key, value); - return this; - } - - remove(key: string): Promise { - return this.internal.remove(key); - } - - clear(): Promise { - return this.internal.clear(); - } - - save(): Promise<{ paths: string[] }> { - return this.internal.save(); - } - - load(): Promise<{ files: Array<{ path: string; value: any }> }> { - return this.internal.load(); - } -} +export type Options = Parameters['0']; +export type FileSystemCache = ReturnType; export function createFileSystemCache(options: Options): FileSystemCache { - return new FileSystemCache(options); + return Cache(options); } diff --git a/lib/core-common/templates/base-preview-head.html b/lib/core-common/templates/base-preview-head.html index 39baba09b3fb..45c0c3032dac 100644 --- a/lib/core-common/templates/base-preview-head.html +++ b/lib/core-common/templates/base-preview-head.html @@ -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; } diff --git a/lib/core-server/package.json b/lib/core-server/package.json index 1ad69bfb5563..d38ddac7b6cf 100644 --- a/lib/core-server/package.json +++ b/lib/core-server/package.json @@ -12,7 +12,7 @@ "repository": { "type": "git", "url": "https://github.com/storybookjs/storybook.git", - "directory": "lib/core" + "directory": "lib/core-server" }, "funding": { "type": "opencollective", @@ -39,6 +39,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { + "@aw-web-design/x-default-browser": "1.4.88", "@discoveryjs/json-ext": "^0.5.3", "@storybook/builder-webpack4": "6.5.0-rc.1", "@storybook/core-client": "6.5.0-rc.1", @@ -62,7 +63,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", @@ -82,8 +82,7 @@ "util-deprecate": "^1.0.2", "watchpack": "^2.2.0", "webpack": "4", - "ws": "^8.2.3", - "x-default-browser": "^0.4.0" + "ws": "^8.2.3" }, "devDependencies": { "@storybook/builder-webpack5": "6.5.0-rc.1", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix index 1937cd52a90a..13c335a8dc80 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix @@ -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", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix index 4bcbcf07d680..7e21d5625a97 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix @@ -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", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix index 45f3199dcaa1..74d84b599459 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix @@ -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 [ diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix index 19d3bb4c27a5..6e7e1b6c8ea4 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix @@ -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 [ diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix index 9fcbeaa6c249..e73793bb5a10 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix @@ -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", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix index 348d29de932a..88df4ac7b910 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix @@ -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", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix index fef4e5b1e09b..f05e53f9bf47 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix @@ -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", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix index d1c67aacb001..840cbdd0dc60 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix @@ -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", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix index ec8992f03346..01c529220ab8 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix @@ -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", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix index a686af760a22..a86a667481da 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix @@ -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", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix index ab76b4d0c1c7..4cf2f80e4570 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix @@ -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", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix index c769b18749c7..fe831e185d10 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix @@ -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", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix index 0676e83166fe..f3dec4361294 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix @@ -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", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix index 982723cbc1ac..be24c3d5e9fc 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix @@ -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", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix index 12efbe2571e2..5ef8867718bb 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix @@ -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", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix index 0a9453609940..51adf69ea33c 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix @@ -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", diff --git a/lib/core-server/src/build-static.ts b/lib/core-server/src/build-static.ts index e74c78f31850..402acb2dea05 100644 --- a/lib/core-server/src/build-static.ts +++ b/lib/core-server/src/build-static.ts @@ -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 = await getPreviewBuilder(options.configDir); const managerBuilder: Builder = 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')], diff --git a/lib/core-server/src/core-presets.test.ts b/lib/core-server/src/core-presets.test.ts index 4569b1dfd488..0151dfe7febc 100644 --- a/lib/core-server/src/core-presets.test.ts +++ b/lib/core-server/src/core-presets.test.ts @@ -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() }), diff --git a/lib/core-server/src/utils/StoryIndexGenerator.ts b/lib/core-server/src/utils/StoryIndexGenerator.ts index 8a0d69cb4997..80323b8cea62 100644 --- a/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -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] = { diff --git a/lib/core-server/src/utils/open-in-browser.ts b/lib/core-server/src/utils/open-in-browser.ts index bf98fbf9dd48..59f088f230aa 100644 --- a/lib/core-server/src/utils/open-in-browser.ts +++ b/lib/core-server/src/utils/open-in-browser.ts @@ -1,7 +1,7 @@ import { logger } from '@storybook/node-logger'; import betterOpn from 'better-opn'; // betterOpn alias used because also loading open import open from 'open'; -import getDefaultBrowser from 'x-default-browser'; +import getDefaultBrowser from '@aw-web-design/x-default-browser'; import dedent from 'ts-dedent'; export function openInBrowser(address: string) { diff --git a/lib/core-server/typings.d.ts b/lib/core-server/typings.d.ts index eeb489a5e71a..b539c76578d5 100644 --- a/lib/core-server/typings.d.ts +++ b/lib/core-server/typings.d.ts @@ -7,7 +7,7 @@ declare module '@storybook/theming/paths'; declare module '@storybook/ui/paths'; declare module 'better-opn'; declare module 'open'; -declare module 'x-default-browser'; +declare module '@aw-web-design/x-default-browser'; declare module '@storybook/ui'; declare module '@discoveryjs/json-ext'; declare module 'watchpack'; diff --git a/lib/manager-webpack4/src/presets/babel-loader-manager.ts b/lib/manager-webpack4/src/presets/babel-loader-manager.ts index 04ca8447de9d..72d68b591491 100644 --- a/lib/manager-webpack4/src/presets/babel-loader-manager.ts +++ b/lib/manager-webpack4/src/presets/babel-loader-manager.ts @@ -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'), diff --git a/lib/manager-webpack4/src/presets/manager-preset.ts b/lib/manager-webpack4/src/presets/manager-preset.ts index 69fd3620d3e6..b61203d48999 100644 --- a/lib/manager-webpack4/src/presets/manager-preset.ts +++ b/lib/manager-webpack4/src/presets/manager-preset.ts @@ -87,6 +87,7 @@ export async function managerWebpack( }) as any as WebpackPluginInstance) : null, new HtmlWebpackPlugin({ + title: 'Storybook loading…', filename: `index.html`, // FIXME: `none` isn't a known option chunksSortMode: 'none' as any, diff --git a/lib/manager-webpack4/typings.d.ts b/lib/manager-webpack4/typings.d.ts index 894b889ada8f..6c5e278ef73f 100644 --- a/lib/manager-webpack4/typings.d.ts +++ b/lib/manager-webpack4/typings.d.ts @@ -7,5 +7,5 @@ declare module '@storybook/theming/paths'; declare module '@storybook/ui/paths'; declare module 'better-opn'; declare module 'open'; -declare module 'x-default-browser'; +declare module '@aw-web-design/x-default-browser'; declare module '@storybook/ui'; diff --git a/lib/manager-webpack5/src/presets/babel-loader-manager.ts b/lib/manager-webpack5/src/presets/babel-loader-manager.ts index 04ca8447de9d..72d68b591491 100644 --- a/lib/manager-webpack5/src/presets/babel-loader-manager.ts +++ b/lib/manager-webpack5/src/presets/babel-loader-manager.ts @@ -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'), diff --git a/lib/manager-webpack5/src/presets/manager-preset.ts b/lib/manager-webpack5/src/presets/manager-preset.ts index 1a332ea42a65..130900c3cf68 100644 --- a/lib/manager-webpack5/src/presets/manager-preset.ts +++ b/lib/manager-webpack5/src/presets/manager-preset.ts @@ -86,6 +86,7 @@ export async function managerWebpack( }) as any as WebpackPluginInstance) : null, new HtmlWebpackPlugin({ + title: 'Storybook loading…', filename: `index.html`, // FIXME: `none` isn't a known option chunksSortMode: 'none' as any, diff --git a/lib/manager-webpack5/typings.d.ts b/lib/manager-webpack5/typings.d.ts index 70fcabe6c3bb..febd3228fce6 100644 --- a/lib/manager-webpack5/typings.d.ts +++ b/lib/manager-webpack5/typings.d.ts @@ -6,5 +6,5 @@ declare module '@storybook/theming/paths'; declare module '@storybook/ui/paths'; declare module 'better-opn'; declare module 'open'; -declare module 'x-default-browser'; +declare module '@aw-web-design/x-default-browser'; declare module '@storybook/ui'; diff --git a/lib/router/src/utils.test.ts b/lib/router/src/utils.test.ts index e7ae39173ade..adda7905ba85 100644 --- a/lib/router/src/utils.test.ts +++ b/lib/router/src/utils.test.ts @@ -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', () => { diff --git a/lib/router/src/utils.ts b/lib/router/src/utils.ts index ed84228bfa98..7d3aeca0c786 100644 --- a/lib/router/src/utils.ts +++ b/lib/router/src/utils.ts @@ -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 }; } diff --git a/lib/store/src/autoTitle.test.ts b/lib/store/src/autoTitle.test.ts index 112448ff4059..b7e95b6e7268 100644 --- a/lib/store/src/autoTitle.test.ts +++ b/lib/store/src/autoTitle.test.ts @@ -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`); }); diff --git a/lib/store/src/inferControls.ts b/lib/store/src/inferControls.ts index 3dcbbbd1c30a..4d7526bbced0 100644 --- a/lib/store/src/inferControls.ts +++ b/lib/store/src/inferControls.ts @@ -23,9 +23,11 @@ const inferControl = (argType: StrictInputType, name: string, matchers: Controls return { control: { type: 'color' } }; } - logger.warn( - `Addon controls: Control of type color only supports string, received "${controlType}" instead` - ); + if (controlType !== 'enum') { + logger.warn( + `Addon controls: Control of type color only supports string, received "${controlType}" instead` + ); + } } // args that end with date e.g. purchaseDate diff --git a/lib/store/src/storySort.test.ts b/lib/store/src/storySort.test.ts index 50976f126bd5..8ffe07a3e2b9 100644 --- a/lib/store/src/storySort.test.ts +++ b/lib/store/src/storySort.test.ts @@ -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); + }); }); diff --git a/lib/store/src/storySort.ts b/lib/store/src/storySort.ts index ec3d01e3040a..b1d49bfb2865 100644 --- a/lib/store/src/storySort.ts +++ b/lib/store/src/storySort.ts @@ -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. diff --git a/lib/telemetry/src/get-monorepo-type.ts b/lib/telemetry/src/get-monorepo-type.ts index 9f49ce41cdf8..e9c628c521dd 100644 --- a/lib/telemetry/src/get-monorepo-type.ts +++ b/lib/telemetry/src/get-monorepo-type.ts @@ -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; diff --git a/lib/ui/src/components/layout/container.tsx b/lib/ui/src/components/layout/container.tsx index 845e3a3d0754..0628723a94af 100644 --- a/lib/ui/src/components/layout/container.tsx +++ b/lib/ui/src/components/layout/container.tsx @@ -569,10 +569,11 @@ class Layout extends Component { marginTop: -margin, } : { - marginLeft: -margin, + marginLeft: 1, } } axis={isPanelBottom ? 'y' : 'x'} + reverse /> )} diff --git a/lib/ui/src/components/layout/draggers.tsx b/lib/ui/src/components/layout/draggers.tsx index 4424b084fdb0..6fe6dfed7a32 100644 --- a/lib/ui/src/components/layout/draggers.tsx +++ b/lib/ui/src/components/layout/draggers.tsx @@ -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 diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx index 222df3e2bcf3..20887cae22f2 100644 --- a/lib/ui/src/components/sidebar/Tree.tsx +++ b/lib/ui/src/components/sidebar/Tree.tsx @@ -190,7 +190,6 @@ const Node = React.memo( data-ref-id={refId} data-item-id={item.id} data-nodetype="root" - aria-expanded={isExpanded} > ( event.preventDefault(); setExpanded({ ids: [item.id], value: !isExpanded }); }} + aria-expanded={isExpanded} > {item.renderLabel?.(item) || item.name} diff --git a/scripts/dts-localize.ts b/scripts/dts-localize.ts index f3b558903147..00c6b74f3d1c 100644 --- a/scripts/dts-localize.ts +++ b/scripts/dts-localize.ts @@ -1,5 +1,5 @@ /* eslint-disable no-param-reassign */ -import path from 'path'; +import path, { dirname, isAbsolute, join, resolve } from 'path'; import fs from 'fs-extra'; import { sync } from 'read-pkg-up'; import slash from 'slash'; @@ -14,8 +14,8 @@ const parseConfigHost = { }; function getAbsolutePath(fileName: string, cwd?: string) { - if (!path.isAbsolute(fileName)) { - fileName = path.join(cwd !== undefined ? cwd : process.cwd(), fileName); + if (!isAbsolute(fileName)) { + fileName = join(cwd !== undefined ? cwd : process.cwd(), fileName); } return fileName; @@ -28,7 +28,7 @@ function getCompilerOptions(inputFileNames: string[], preferredConfigPath?: stri const compilerOptionsParseResult = ts.parseJsonConfigFileContent( configParseResult.config, parseConfigHost, - path.resolve(path.dirname(configFileName)), + resolve(dirname(configFileName)), undefined, getAbsolutePath(configFileName) ); @@ -107,17 +107,17 @@ export const run = async (entrySourceFiles: string[], outputPath: string, option */ - if (relative.includes('node_modules/')) { - const [, ...parts] = relative.split('node_modules/'); - const filename = parts.join('node_modules/').split('/').join('-'); - newPath = path.join(outputPath, '_modules', filename); - } else if (relative.includes('dist/ts-tmp/')) { - const [, ...parts] = relative.split('dist/ts-tmp/'); - const filename = parts.join('').split('/').join('-'); - newPath = path.join(outputPath, filename); + if (relative.includes(`node_modules${path.sep}`)) { + const [, ...parts] = relative.split(`node_modules${path.sep}`); + const filename = parts.join(`node_modules${path.sep}`).split(path.sep).join('-'); + newPath = join(outputPath, '_modules', filename); + } else if (relative.includes(join('dist', `ts-tmp${path.sep}`))) { + const [, ...parts] = relative.split(join('dist', `ts-tmp${path.sep}`)); + const filename = parts.join('').split(path.sep).join('-'); + newPath = join(outputPath, filename); } else { - const filename = relative.split('/').join('-'); - newPath = path.join(outputPath, filename); + const filename = relative.split(path.sep).join('-'); + newPath = join(outputPath, filename); } return newPath; } diff --git a/yarn.lock b/yarn.lock index be9ddfd72d27..e9fa5045bb35 100644 --- a/yarn.lock +++ b/yarn.lock @@ -375,6 +375,17 @@ __metadata: languageName: node linkType: hard +"@aw-web-design/x-default-browser@npm:1.4.88": + version: 1.4.88 + resolution: "@aw-web-design/x-default-browser@npm:1.4.88" + dependencies: + default-browser-id: 3.0.0 + bin: + x-default-browser: bin/x-default-browser.js + checksum: ae604e01aeb226b48cad226bfce55a88a12d759d139ede20aa71ee9ed94fefe912659678ae663bb277d9c02f281f62a965bdc0adf43817b0f95d397cbf97d8b2 + languageName: node + linkType: hard + "@axe-core/puppeteer@npm:^4.2.0": version: 4.4.0 resolution: "@axe-core/puppeteer@npm:4.4.0" @@ -6829,10 +6840,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 +6959,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 @@ -7571,9 +7583,13 @@ __metadata: "@storybook/client-logger": 6.5.0-rc.1 "@storybook/csf": 0.0.2--canary.4566f4d.1 "@storybook/theming": 6.5.0-rc.1 + "@testing-library/jest-dom": ^5.16.4 "@types/color-convert": ^2.0.0 + "@types/lodash": ^4.14.182 "@types/overlayscrollbars": ^1.12.0 + "@types/qs": ^6.9.7 "@types/react-syntax-highlighter": 11.0.5 + "@types/util-deprecate": ^1.0.0 color-convert: ^2.0.1 core-js: ^3.8.2 css: ^3.0.0 @@ -7629,7 +7645,6 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - webpack: "*" peerDependenciesMeta: typescript: optional: true @@ -7677,7 +7692,7 @@ __metadata: chalk: ^4.1.0 core-js: ^3.8.2 express: ^4.17.1 - file-system-cache: ^1.0.5 + file-system-cache: ^2.0.0 find-up: ^5.0.0 fork-ts-checker-webpack-plugin: ^6.0.4 fs-extra: ^9.0.1 @@ -7735,6 +7750,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-server@workspace:lib/core-server" dependencies: + "@aw-web-design/x-default-browser": 1.4.88 "@discoveryjs/json-ext": ^0.5.3 "@storybook/builder-webpack4": 6.5.0-rc.1 "@storybook/builder-webpack5": 6.5.0-rc.1 @@ -7763,7 +7779,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 @@ -7785,7 +7800,6 @@ __metadata: watchpack: ^2.2.0 webpack: 4 ws: ^8.2.3 - x-default-browser: ^0.4.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -7943,9 +7957,10 @@ __metadata: ts-dedent: ^2.0.0 peerDependencies: "@babel/core": "*" + "@types/ember__component": 4.0.8 babel-plugin-ember-modules-api-polyfill: ^2.12.0 babel-plugin-htmlbars-inline-precompile: 2 || 3 - ember-source: ^3.16.0 + ember-source: ~3.28.1 bin: build-storybook: ./bin/build.js start-storybook: ./bin/index.js @@ -8934,6 +8949,9 @@ __metadata: "@babel/core": "*" svelte: ^3.1.0 svelte-loader: "*" + peerDependenciesMeta: + svelte-loader: + optional: true bin: build-storybook: ./bin/build.js start-storybook: ./bin/index.js @@ -9565,6 +9583,23 @@ __metadata: languageName: node linkType: hard +"@testing-library/jest-dom@npm:^5.16.4": + version: 5.16.4 + resolution: "@testing-library/jest-dom@npm:5.16.4" + dependencies: + "@babel/runtime": ^7.9.2 + "@types/testing-library__jest-dom": ^5.9.1 + aria-query: ^5.0.0 + chalk: ^3.0.0 + css: ^3.0.0 + css.escape: ^1.5.1 + dom-accessibility-api: ^0.5.6 + lodash: ^4.17.15 + redent: ^3.0.0 + checksum: c34016bbc4865f8f9912d62ac63b409b87e785ff281a50f6eae8c1bc2364963c0831541da8a185bbd8b5964a6e3371fb623c339e8128d84706eb06f93f145801 + languageName: node + linkType: hard + "@testing-library/react@npm:12.1.2": version: 12.1.2 resolution: "@testing-library/react@npm:12.1.2" @@ -10248,6 +10283,13 @@ __metadata: languageName: node linkType: hard +"@types/lodash@npm:^4.14.182": + version: 4.14.182 + resolution: "@types/lodash@npm:4.14.182" + checksum: d6bd4789dfb3be631d5e3277e6a1be5becb21440f3364f5d15b982c2e6b6bb1f8048d46fc5bff5ef0f90bebaf4d07c49b2919ba369d07af72d3beb3fea70c61a + languageName: node + linkType: hard + "@types/mdast@npm:^3.0.0": version: 3.0.10 resolution: "@types/mdast@npm:3.0.10" @@ -10512,7 +10554,7 @@ __metadata: languageName: node linkType: hard -"@types/qs@npm:*, @types/qs@npm:^6, @types/qs@npm:^6.9.5": +"@types/qs@npm:*, @types/qs@npm:^6, @types/qs@npm:^6.9.5, @types/qs@npm:^6.9.7": version: 6.9.7 resolution: "@types/qs@npm:6.9.7" checksum: 157eb05f4c75790b0ebdcf7b0547ff117feabc8cda03c3cac3d3ea82bb19a1912e76a411df3eb0bdd01026a9770f07bc0e7e3fbe39ebb31c1be4564c16be35f1 @@ -14888,7 +14930,7 @@ __metadata: languageName: node linkType: hard -"big-integer@npm:^1.6.7": +"big-integer@npm:^1.6.44": version: 1.6.51 resolution: "big-integer@npm:1.6.51" checksum: c8139662d57f8833a44802f4b65be911679c569535ea73c5cfd3c1c8994eaead1b84b6f63e1db63833e4d4cacb6b6a9e5522178113dfdc8e4c81ed8436f1e8cc @@ -14982,7 +15024,7 @@ __metadata: languageName: node linkType: hard -"bluebird@npm:^3.1.1, bluebird@npm:^3.3.5, bluebird@npm:^3.4.6, bluebird@npm:^3.5.1, bluebird@npm:^3.5.3, bluebird@npm:^3.5.5, bluebird@npm:^3.7.2": +"bluebird@npm:^3.1.1, bluebird@npm:^3.4.6, bluebird@npm:^3.5.1, bluebird@npm:^3.5.3, bluebird@npm:^3.5.5, bluebird@npm:^3.7.2": version: 3.7.2 resolution: "bluebird@npm:3.7.2" checksum: 680de03adc54ff925eaa6c7bb9a47a0690e8b5de60f4792604aae8ed618c65e6b63a7893b57ca924beaf53eee69c5af4f8314148c08124c550fe1df1add897d2 @@ -15118,12 +15160,12 @@ __metadata: languageName: node linkType: hard -"bplist-parser@npm:^0.1.0": - version: 0.1.1 - resolution: "bplist-parser@npm:0.1.1" +"bplist-parser@npm:^0.2.0": + version: 0.2.0 + resolution: "bplist-parser@npm:0.2.0" dependencies: - big-integer: ^1.6.7 - checksum: cd50206f956e74f6e46cb5ed14be5eb00b2e14676ea3dd36703470715177a2770fc22032eca63a36adb3b56a1e51138a95bb0fc6849a78c21e92caeedf219ea7 + big-integer: ^1.6.44 + checksum: ce79c69e0f6efe506281e7c84e3712f7d12978991675b6e3a58a295b16f13ca81aa9b845c335614a545e0af728c8311b6aa3142af76ba1cb616af9bbac5c4a9f languageName: node linkType: hard @@ -15978,7 +16020,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 +18165,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" @@ -19398,16 +19411,13 @@ __metadata: languageName: node linkType: hard -"default-browser-id@npm:^1.0.4": - version: 1.0.4 - resolution: "default-browser-id@npm:1.0.4" +"default-browser-id@npm:3.0.0": + version: 3.0.0 + resolution: "default-browser-id@npm:3.0.0" dependencies: - bplist-parser: ^0.1.0 - meow: ^3.1.0 - untildify: ^2.0.0 - bin: - default-browser-id: cli.js - checksum: a00a2ab66beab70490b4d76258a1f2eadfadca6414bf67ab78aa25b33dc3de0c4c813bb8f204271aa7a08281c39474487db0229e325112456464fb97a0522a8a + bplist-parser: ^0.2.0 + untildify: ^4.0.0 + checksum: 8db3ab882eb3e1e8b59d84c8641320e6c66d8eeb17eb4bb848b7dd549b1e6fd313988e4a13542e95fbaeff03f6e9dedc5ad191ad4df7996187753eb0d45c00b7 languageName: node linkType: hard @@ -20919,7 +20929,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 +22743,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: @@ -23046,14 +23056,13 @@ __metadata: languageName: node linkType: hard -"file-system-cache@npm:^1.0.5": - version: 1.0.5 - resolution: "file-system-cache@npm:1.0.5" +"file-system-cache@npm:^2.0.0": + version: 2.0.0 + resolution: "file-system-cache@npm:2.0.0" dependencies: - bluebird: ^3.3.5 - fs-extra: ^0.30.0 - ramda: ^0.21.0 - checksum: 4898deb88303c8d54548b857920bea7227535d951ad4ec873c3b26d2b31a03b6ce112df856e9b5fc5993be6dbfb30cb40a3a8feef4054c286c1017f241f9f533 + fs-extra: ^10.1.0 + ramda: ^0.28.0 + checksum: 8ff29a9afa9edd6d0608bd345ea0e22376ff14b6bf11406ebff47877a8081263b7c20eadeb54c7f9b03404ace5743cc61eef9d262734c3b2fdb72ff9b7a468c1 languageName: node linkType: hard @@ -23695,6 +23704,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" @@ -23736,19 +23752,6 @@ __metadata: languageName: node linkType: hard -"fs-extra@npm:^0.30.0": - version: 0.30.0 - resolution: "fs-extra@npm:0.30.0" - dependencies: - graceful-fs: ^4.1.2 - jsonfile: ^2.1.0 - klaw: ^1.0.0 - path-is-absolute: ^1.0.0 - rimraf: ^2.2.8 - checksum: 24f3c966018c7bf436bf38ca3a126f1d95bf0f82598302195c4f0c8887767f045dae308f92c53a39cead74631dabbc30fcf1c71dbe96f1f0148f6de8edd114bc - languageName: node - linkType: hard - "fs-extra@npm:^10.0.0, fs-extra@npm:^10.0.1": version: 10.0.1 resolution: "fs-extra@npm:10.0.1" @@ -23760,6 +23763,17 @@ __metadata: languageName: node linkType: hard +"fs-extra@npm:^10.1.0": + version: 10.1.0 + resolution: "fs-extra@npm:10.1.0" + dependencies: + graceful-fs: ^4.2.0 + jsonfile: ^6.0.1 + universalify: ^2.0.0 + checksum: 5f579466e7109719d162a9249abbeffe7f426eb133ea486e020b89bc6d67a741134076bf439983f2eb79276ceaf6bd7b7c1e43c3fd67fe889863e69072fb0a5e + languageName: node + linkType: hard + "fs-extra@npm:^4.0.2": version: 4.0.3 resolution: "fs-extra@npm:4.0.3" @@ -24731,7 +24745,7 @@ __metadata: languageName: node linkType: hard -"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.15, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.1.9, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.2, graceful-fs@npm:^4.2.3, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9": +"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.15, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.2, graceful-fs@npm:^4.2.3, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9": version: 4.2.9 resolution: "graceful-fs@npm:4.2.9" checksum: 2a66760ce6677ca18a24a1ef15d440cfd970086446af1e78c9e9de083c48122d8bd9c3fdc37f8f80f34aae833fa0d9dd52725e75a1c3f433ddd34eece39e7376 @@ -24894,15 +24908,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 +26987,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 +29712,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" @@ -29810,18 +29808,6 @@ __metadata: languageName: node linkType: hard -"klaw@npm:^1.0.0": - version: 1.3.1 - resolution: "klaw@npm:1.3.1" - dependencies: - graceful-fs: ^4.1.9 - dependenciesMeta: - graceful-fs: - optional: true - checksum: da994768b02b3843cc994c99bad3cf1c8c67716beb4dd2834133c919e9e9ee788669fbe27d88ab0ad9a3991349c28280afccbde01c2318229b662dd7a05e4728 - languageName: node - linkType: hard - "kleur@npm:4.1.4, kleur@npm:^4.0.3": version: 4.1.4 resolution: "kleur@npm:4.1.4" @@ -31882,7 +31868,7 @@ __metadata: languageName: node linkType: hard -"meow@npm:^3.1.0, meow@npm:^3.3.0": +"meow@npm:^3.3.0": version: 3.7.0 resolution: "meow@npm:3.7.0" dependencies: @@ -32779,6 +32765,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 +33155,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 +34450,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 +34487,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 +34637,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 +37126,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 +37676,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" @@ -37906,10 +37881,10 @@ __metadata: languageName: node linkType: hard -"ramda@npm:^0.21.0": - version: 0.21.0 - resolution: "ramda@npm:0.21.0" - checksum: a5d28ef8f09f7fd024b2a92477f5356e6323c26be29992c87139757e39b20f9006b6a4c69002b952b2ddb88d983823b26ed68020257660617e3a395b7ea2d6da +"ramda@npm:^0.28.0": + version: 0.28.0 + resolution: "ramda@npm:0.28.0" + checksum: 0f9dc0cc3b0432ff047f1e2a5e58860c531a84574674c0f52fef535efc6e1e07fa3851102fff3da7dd551a592c743f6f6fa521379a6aa5fe50266f8af8f0b570 languageName: node linkType: hard @@ -38670,6 +38645,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 +39169,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 +43358,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 +44859,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" @@ -45396,7 +45421,7 @@ __metadata: languageName: node linkType: hard -"untildify@npm:^2.0.0, untildify@npm:^2.1.0": +"untildify@npm:^2.1.0": version: 2.1.0 resolution: "untildify@npm:2.1.0" dependencies: @@ -46153,6 +46178,7 @@ __metadata: vue: ^2.6.12 vue-loader: ^15.9.6 vue-style-loader: ^4.1.2 + vue-template-compiler: ^2.6.12 vuex: ^3.6.0 webpack: 4 webpack-dev-server: ^3.11.2 @@ -47928,6 +47954,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" @@ -47958,20 +47999,6 @@ __metadata: languageName: node linkType: hard -"x-default-browser@npm:^0.4.0": - version: 0.4.0 - resolution: "x-default-browser@npm:0.4.0" - dependencies: - default-browser-id: ^1.0.4 - dependenciesMeta: - default-browser-id: - optional: true - bin: - x-default-browser: bin/x-default-browser.js - checksum: a19e42ffeab19560ea05a423561f5b3b82bb3a5878dc932cfd0847fadc5890b8b685d6b39e2356c8304b3943f5a7120ba4b233365d686ff8f9bf2499ce11f052 - languageName: node - linkType: hard - "xdg-basedir@npm:^4.0.0": version: 4.0.0 resolution: "xdg-basedir@npm:4.0.0"