diff --git a/.github/renovate.json5 b/.github/renovate.json5 index f27f505b060d..1b14b5e35f3d 100644 --- a/.github/renovate.json5 +++ b/.github/renovate.json5 @@ -1,113 +1,83 @@ { - "$schema": "https://docs.renovatebot.com/renovate-schema.json", - "extends": [ - "config:base", - "group:allNonMajor" - ], - "prHourlyLimit": 1, - "prConcurrentLimit": 1, + $schema: 'https://docs.renovatebot.com/renovate-schema.json', + extends: ['config:base', 'group:allNonMajor'], + prHourlyLimit: 1, + prConcurrentLimit: 1, // Custom ignore paths to include our `examples/` directory - "ignorePaths": [ - "**/node_modules/**", - "**/bower_components/**", - "**/vendor/**", - "**/__tests__/**", - "**/test/**", - "**/tests/**", - "**/__fixtures__/**" - ], - "enabledManagers": [ - "npm" + ignorePaths: [ + '**/node_modules/**', + '**/bower_components/**', + '**/vendor/**', + '**/__tests__/**', + '**/test/**', + '**/tests/**', + '**/__fixtures__/**', ], + enabledManagers: ['npm'], // Ignore release notes for non-breaking changes - "fetchReleaseNotes": false, + fetchReleaseNotes: false, // Always bump minor/patch to latest - "rangeStrategy": "bump", - "major": { + rangeStrategy: 'bump', + major: { // Replace ranges when there is a major - "rangeStrategy": "replace", + rangeStrategy: 'replace', // Get us the release notes for breaking changes - "fetchReleaseNotes": true + fetchReleaseNotes: true, }, - "packageRules": [ + packageRules: [ // Leave peerDependencies and engines alone { - "depTypeList": [ - "peerDependencies", - "engines" - ], - "enabled": false + depTypeList: ['peerDependencies', 'engines'], + enabled: false, }, // Handle patch updates under 0.1.0 as potentially breaking // Workaround for https://github.com/renovatebot/renovate/issues/3588 { - "managers": [ - "npm" - ], - "matchCurrentVersion": "<0.1.0", - "rangeStrategy": "replace", - "groupName": "maybe breaking patch updates", - "groupSlug": "maybe-breaking-patch", + managers: ['npm'], + matchCurrentVersion: '<0.1.0', + rangeStrategy: 'replace', + groupName: 'maybe breaking patch updates', + groupSlug: 'maybe-breaking-patch', // Get us the release notes for potentially breaking changes - "fetchReleaseNotes": true + fetchReleaseNotes: true, }, // Handle minor updates under 1.0.0 as potentially breaking // Workaround for https://github.com/renovatebot/renovate/issues/3588 { - "managers": [ - "npm" - ], - "matchCurrentVersion": "<1.0.0 >=0.1.0", - "minor": { - "rangeStrategy": "replace", - "groupName": "maybe breaking minor updates", - "groupSlug": "maybe-breaking-minor", + managers: ['npm'], + matchCurrentVersion: '<1.0.0 >=0.1.0', + minor: { + // FIXME: "rangeStrategy": "replace", + groupName: 'maybe breaking minor updates', + groupSlug: 'maybe-breaking-minor', // Get us the release notes for potentially breaking changes - "fetchReleaseNotes": true - } + fetchReleaseNotes: true, + }, }, // Group Storybook's linter configs together { - "packageNames": [ - "@storybook/eslint-config-storybook", - "@storybook/linter-config" - ], - "groupName": "storybook linting" + packageNames: ['@storybook/eslint-config-storybook', '@storybook/linter-config'], + groupName: 'storybook linting', }, // Group Puppeteer packages together { - "packagePatterns": [ - "^puppeteer", - "^@types/puppeteer" - ], - "groupName": "puppeteer" + packagePatterns: ['^puppeteer', '^@types/puppeteer'], + groupName: 'puppeteer', }, // Group Acorn packages together { - "packagePatterns": [ - "^acorn" - ], - "groupName": "acorn" + packagePatterns: ['^acorn'], + groupName: 'acorn', }, // Group React packages together { - "packageNames": [ - "react", - "@types/react", - "react-dom", - "@types/react-dom" - ], - "groupName": "react" - } + packageNames: ['react', '@types/react', 'react-dom', '@types/react-dom'], + groupName: 'react', + }, ], // Simplifies the PR body - "prBodyTemplate": "{{{table}}}{{{notes}}}{{{changelogs}}}", - "prBodyColumns": [ - "Package", - "Change" - ], + prBodyTemplate: '{{{table}}}{{{notes}}}{{{changelogs}}}', + prBodyColumns: ['Package', 'Change'], // https://docs.renovatebot.com/merge-confidence/#enabling-and-disabling - "ignorePresets": [ - "github>whitesource/merge-confidence:beta" - ] + ignorePresets: ['github>whitesource/merge-confidence:beta'], } diff --git a/.gitignore b/.gitignore index e65518a167ec..f26ad5e56c3a 100644 --- a/.gitignore +++ b/.gitignore @@ -40,4 +40,4 @@ examples/angular-cli/addon-jest.testresults.json !/.yarn/plugins !/.yarn/sdks !/.yarn/versions -/.pnp.* +.pnp.* diff --git a/README.md b/README.md index 24d0bcd8f678..8d88e5e93457 100644 --- a/README.md +++ b/README.md @@ -82,7 +82,7 @@ Documentation can be found [Storybook's docs site](https://storybook.js.org/docs Here are some featured examples that you can reference to see how Storybook works: -Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native development for mobile. +Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile. ### Community @@ -108,6 +108,7 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story | [Marko](app/marko) | [v6.2.x](https://storybookjs.netlify.com/marko-cli/) | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko) | | [Riot](app/riot) | [v6.2.x](https://storybookjs.netlify.com/riot-kitchen-sink/) | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot) | | [Rax](app/rax) | [v6.2.x](https://storybookjs.netlify.com/rax-kitchen-sink/) | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax) | +| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.2.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Rax](https://img.shields.io/npm/dm/@storybook/native.svg)](https://github.com/storybookjs/native) | ### Sub Projects diff --git a/addons/actions/src/register.tsx b/addons/actions/src/register.tsx index 769c1033f3c8..50790327f4ed 100644 --- a/addons/actions/src/register.tsx +++ b/addons/actions/src/register.tsx @@ -8,7 +8,7 @@ addons.register(ADDON_ID, (api) => { addons.addPanel(PANEL_ID, { title() { const [actionsCount, setActionsCount] = useState(0); - const onEvent = () => setActionsCount(previous => previous + 1); + const onEvent = () => setActionsCount((previous) => previous + 1); const onChange = () => setActionsCount(0); useEffect(() => { diff --git a/addons/cssresources/README.md b/addons/cssresources/README.md deleted file mode 100644 index fad0c977444b..000000000000 --- a/addons/cssresources/README.md +++ /dev/null @@ -1,50 +0,0 @@ -# Storybook Addon Cssresources - -Storybook Addon Cssresources to switch between css resources at runtime for your story [Storybook](https://storybook.js.org). - -[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md) - -![Storybook Addon Cssresources Demo](docs/demo.gif) - -## Installation - -```sh -yarn add -D @storybook/addon-cssresources -``` - -## Configuration - -Then create a file called `main.js` in your storybook config. - -Add following content to it: - -```js -module.exports = { - addons: ['@storybook/addon-cssresources'], -}; -``` - -## Usage - -You need add the all the css resources at compile time using the `withCssResources` decorator. They can be added globally or per story. You can then choose which ones to load from the cssresources addon UI: - -```js -import { withCssResources } from '@storybook/addon-cssresources'; - -export default { - title: 'CssResources', - parameters: { - cssresources: [ - { - id: `bluetheme`, - code: ``, - picked: false, - hideCode: false, // Defaults to false, this enables you to hide the code snippet and only displays the style selector - }, - ], - }, - decorators: [withCssResources], -}; - -export const defaultView = () =>
; -``` diff --git a/addons/cssresources/docs/demo.gif b/addons/cssresources/docs/demo.gif deleted file mode 100644 index 75bc3685edf6..000000000000 Binary files a/addons/cssresources/docs/demo.gif and /dev/null differ diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json deleted file mode 100644 index a75a76d3097e..000000000000 --- a/addons/cssresources/package.json +++ /dev/null @@ -1,81 +0,0 @@ -{ - "name": "@storybook/addon-cssresources", - "version": "6.3.0-alpha.21", - "description": "A storybook addon to switch between css resources at runtime for your story", - "keywords": [ - "addon", - "cssresources", - "react", - "storybook", - "style" - ], - "homepage": "https://storybook.js.org", - "bugs": { - "url": "https://github.com/storybookjs/storybook/issues" - }, - "repository": { - "type": "git", - "url": "https://github.com/storybookjs/storybook.git", - "directory": "addons/cssresources" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "license": "MIT", - "author": "nm123github", - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "types": "dist/ts3.9/index.d.ts", - "typesVersions": { - "<3.8": { - "*": [ - "dist/ts3.4/*" - ] - } - }, - "files": [ - "dist/**/*", - "README.md", - "*.js", - "*.d.ts" - ], - "scripts": { - "prepare": "node ../../scripts/prepare.js" - }, - "dependencies": { - "@storybook/addons": "6.3.0-alpha.21", - "@storybook/api": "6.3.0-alpha.21", - "@storybook/components": "6.3.0-alpha.21", - "@storybook/core-events": "6.3.0-alpha.21", - "@storybook/theming": "6.3.0-alpha.21", - "core-js": "^3.8.2", - "global": "^4.4.0", - "regenerator-runtime": "^0.13.7" - }, - "devDependencies": { - "@types/webpack-env": "^1.16.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0", - "react-dom": "^16.8.0 || ^17.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, - "publishConfig": { - "access": "public" - }, - "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a", - "storybook": { - "displayName": "CSS Resources", - "unsupportedFrameworks": [ - "react-native" - ] - } -} diff --git a/addons/cssresources/preset.js b/addons/cssresources/preset.js deleted file mode 100644 index a1382ab7c27c..000000000000 --- a/addons/cssresources/preset.js +++ /dev/null @@ -1,5 +0,0 @@ -function managerEntries(entry = [], options) { - return [...entry, require.resolve('./dist/esm/register')]; -} - -module.exports = { managerEntries }; diff --git a/addons/cssresources/register.js b/addons/cssresources/register.js deleted file mode 100644 index 257d32c01f8f..000000000000 --- a/addons/cssresources/register.js +++ /dev/null @@ -1 +0,0 @@ -require('./dist/esm/register.js'); diff --git a/addons/cssresources/src/CssResource.ts b/addons/cssresources/src/CssResource.ts deleted file mode 100644 index ee67b93e2a7c..000000000000 --- a/addons/cssresources/src/CssResource.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface CssResource { - id: string; - code: string; - picked: boolean; - hideCode: boolean; -} diff --git a/addons/cssresources/src/constants.ts b/addons/cssresources/src/constants.ts deleted file mode 100644 index 1a0f36540353..000000000000 --- a/addons/cssresources/src/constants.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const ADDON_ID = 'storybook/cssresources'; -export const PANEL_ID = `${ADDON_ID}/panel`; -export const PARAM_KEY = 'cssresources'; - -export const EVENTS = { - SET: `${ADDON_ID}:set`, - UNSET: `${ADDON_ID}:unset`, -}; diff --git a/addons/cssresources/src/css-resource-panel.test.tsx b/addons/cssresources/src/css-resource-panel.test.tsx deleted file mode 100644 index e189d865118a..000000000000 --- a/addons/cssresources/src/css-resource-panel.test.tsx +++ /dev/null @@ -1,214 +0,0 @@ -import React from 'react'; -import userEvent from '@testing-library/user-event'; -import { render, screen } from '@testing-library/react'; -import { STORY_RENDERED } from '@storybook/core-events'; -import { ThemeProvider, themes, convert } from '@storybook/theming'; -import { API } from '@storybook/api'; -import { EVENTS, PARAM_KEY } from './constants'; -import { CssResourcePanel } from './css-resource-panel'; - -const defaultParameters = [ - { - id: 'fake-css-id-1', - code: 'fake-css-code-1', - picked: true, - }, - { - id: 'fake-css-id-2', - code: 'fake-css-code-2', - picked: false, - }, -]; - -const mockedApi = ({ - emit: jest.fn(), - on: jest.fn(), - off: jest.fn(), - getCurrentParameter: jest.fn(() => defaultParameters), -} as unknown) as API; - -function ThemedCSSResourcePanel({ api }: { api: API }) { - return ( - - - - ); -} - -const renderWithData = (api: Partial = {}) => { - const apiAdd = jest.fn(); - render( - - ); - apiAdd.mock.calls[0][1]('fake-story-id'); - return { - onStoryChange: apiAdd.mock.calls[0][1], - }; -}; - -describe('CSSResourcePanel', () => { - it('should mount', () => { - const { container } = render(); - expect(container).toBeInTheDocument(); - }); - - it('should add STORY_RENDERED listener to the api', () => { - const apiAdd = jest.fn(); - render( - - ); - expect(apiAdd).toHaveBeenCalledWith(STORY_RENDERED, expect.any(Function)); - }); - - it('should remove STORY_RENDERED listener from the api', () => { - const apiRemove = jest.fn(); - const { unmount } = render( - - ); - unmount(); - expect(apiRemove).toHaveBeenCalledWith(STORY_RENDERED, expect.any(Function)); - }); - - it('should populate list with the default items', () => { - const apiAdd = jest.fn(); - render( - - ); - apiAdd.mock.calls[0][1]('fake-story-id'); - expect(screen.getByText(/fake-css-id-1/)).toBeInTheDocument(); - expect(screen.getByText(/fake-css-id-2/)).toBeInTheDocument(); - }); - - it('should pull default items from getCurrentParameter', () => { - const getCurrentParameter = jest.fn(); - const apiAdd = jest.fn(); - render( - - ); - apiAdd.mock.calls[0][1]('fake-story-id'); - expect(getCurrentParameter).toHaveBeenCalledWith(PARAM_KEY); - }); - - // it('should maintain picked attribute for matching ids', () => { - // const getCurrentParameter = jest.fn(() => [ - // { - // ...defaultParameters[0], - // picked: !defaultParameters[0].picked, - // }, - // ]); - // const { onStoryChange } = renderWithData({ - // getCurrentParameter: getCurrentParameter as any, - // }); - // expect( - // screen.getByRole('checkbox', { name: `# ${defaultParameters[0].id}` }) - // ).not.toBeChecked(); - // getCurrentParameter.mockReturnValueOnce([ - // { - // ...defaultParameters[0], - // picked: defaultParameters[0].picked, - // }, - // ]); - // onStoryChange('fake-story-id'); - // expect( - // screen.getByRole('checkbox', { name: `# ${defaultParameters[0].id}` }) - // ).not.toBeChecked(); - // }); - - // it('should update the list with new picked items', () => { - // renderWithData(); - // expect(screen.getByRole('checkbox', { name: `# ${defaultParameters[0].id}` })).toBeChecked(); - // userEvent.click(screen.getByRole('checkbox', { name: `# ${defaultParameters[0].id}` })); - // expect( - // screen.getByRole('checkbox', { name: `# ${defaultParameters[0].id}` }) - // ).not.toBeChecked(); - // }); - - // it('should call emit method with updated list', () => { - // const emit = jest.fn(); - // renderWithData({ emit }); - // userEvent.click(screen.getByRole('checkbox', { name: `# ${defaultParameters[0].id}` })); - // expect(emit).toHaveBeenLastCalledWith(EVENTS.SET, []); - // }); - - it('should not render anything when not active', () => { - const { container } = render(); - expect(container.firstChild).toBeFalsy(); - }); - - // it('should render list items', () => { - // renderWithData(); - - // defaultParameters.forEach((param) => { - // expect(screen.getByText(new RegExp(param.id))).toBeInTheDocument(); - // const checkbox = screen.getByRole('checkbox', { name: `# ${param.id}` }); - // if (param.picked) { - // expect(checkbox).toBeChecked(); - // } else { - // expect(checkbox).not.toBeChecked(); - // } - // }); - // }); - - // it('should render code for items with the `hideCode` flag', () => { - // const getCurrentParameter = jest.fn(() => [ - // { - // id: 'local-fake-id-1', - // code: 'local-fake-code-1', - // picked: true, - // hideCode: false, - // }, - // ]); - - // renderWithData({ - // getCurrentParameter: getCurrentParameter as any, - // }); - - // expect(screen.queryByText('local-fake-code-1')).toBeInTheDocument(); - // }); - - it('should not render code for items /w the `hideCode` flag', () => { - const getCurrentParameter = jest.fn(() => [ - { - id: 'local-fake-id-1', - code: 'local-fake-code-1', - picked: true, - hideCode: true, - }, - ]); - - renderWithData({ - getCurrentParameter: getCurrentParameter as any, - }); - - expect(screen.queryByText('local-fake-code-1')).not.toBeInTheDocument(); - }); -}); diff --git a/addons/cssresources/src/css-resource-panel.tsx b/addons/cssresources/src/css-resource-panel.tsx deleted file mode 100644 index a2780acefe7c..000000000000 --- a/addons/cssresources/src/css-resource-panel.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import React, { Component } from 'react'; -import { SyntaxHighlighter, Placeholder, Spaced, Icons } from '@storybook/components'; -import { STORY_RENDERED } from '@storybook/core-events'; -import { API } from '@storybook/api'; -import { styled } from '@storybook/theming'; - -import { EVENTS, PARAM_KEY } from './constants'; -import { CssResource } from './CssResource'; - -interface Props { - active: boolean; - api: API; -} - -interface State { - currentStoryId: string; - list: CssResource[]; -} - -interface CssResourceLookup { - [key: string]: CssResource; -} - -const maxLimitToUseSyntaxHighlighter = 100000; - -const PlainCode = styled.pre({ - textAlign: 'left', - fontWeight: 'normal', -}); - -const Warning = styled.div({ - display: 'flex', - padding: '10px', - justifyContent: 'center', - alignItems: 'center', - background: '#fff3cd', - fontSize: 12, - '& svg': { - marginRight: 10, - width: 24, - height: 24, - }, -}); - -export class CssResourcePanel extends Component { - constructor(props: Props) { - super(props); - - this.state = { - currentStoryId: '', - list: [], - }; - } - - componentDidMount() { - const { api } = this.props; - api.on(STORY_RENDERED, this.onStoryChange); - } - - componentWillUnmount() { - const { api } = this.props; - api.off(STORY_RENDERED, this.onStoryChange); - } - - onStoryChange = (id: string) => { - const { list: currentList, currentStoryId } = this.state; - const { api } = this.props; - const list = api.getCurrentParameter(PARAM_KEY); - - if (list && currentStoryId !== id) { - const existingIds = currentList.reduce((lookup: CssResourceLookup, res) => { - // eslint-disable-next-line no-param-reassign - lookup[res.id] = res; - return lookup; - }, {}) as CssResourceLookup; - const mergedList = list.map((res) => { - const existingItem = existingIds[res.id]; - return existingItem - ? { - ...res, - picked: existingItem.picked, - } - : res; - }); - const picked = mergedList.filter((res) => res.picked); - this.setState({ list: mergedList, currentStoryId: id }, () => this.emit(picked)); - } - }; - - onChange = (event: any) => { - const { list: oldList } = this.state; - const list = oldList.map((i) => ({ - ...i, - picked: i.id === event.target.id ? event.target.checked : i.picked, - })); - this.setState({ list }, () => this.emit(list.filter((res: any) => res.picked))); - }; - - emit(list: CssResource[]) { - const { api } = this.props; - api.emit(EVENTS.SET, list); - } - - render() { - const { list } = this.state; - const { active } = this.props; - - if (!active) { - return null; - } - - return ( -
- {list && - list.map(({ id, code, picked, hideCode = false }) => ( -
- - {code && !hideCode && code.length < maxLimitToUseSyntaxHighlighter && ( - {code} - )} - {code && !hideCode && code.length >= maxLimitToUseSyntaxHighlighter && ( - - - {code.substring(0, maxLimitToUseSyntaxHighlighter)} ... - - - Rest of the content cannot be displayed - - - - )} -
- ))} -
- ); - } -} diff --git a/addons/cssresources/src/index.ts b/addons/cssresources/src/index.ts deleted file mode 100644 index 98f9c9387d5a..000000000000 --- a/addons/cssresources/src/index.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { document } from 'global'; -import { addons, makeDecorator } from '@storybook/addons'; -import { EVENTS, PARAM_KEY } from './constants'; - -const changeMediaAttribute = (element: HTMLElement, enabled: boolean) => { - const current = element.getAttribute('media'); - if ((enabled && !current) || (!enabled && current === 'max-width: 1px')) { - // don't do anything - } else if (enabled && current === 'max-width: 1px') { - // remove the attribute - element.removeAttribute('media'); - } else if (enabled) { - // add the disable attribute - const value = current.replace(' and max-width: 1px', ''); - element.setAttribute('media', value); - } else { - // modify the existing attribute so it disables - const value = current ? `${current} and max-width: 1px` : 'max-width: 1px'; - element.setAttribute('media', value); - } -}; - -const createElement = (id: string, code: string): HTMLDivElement => { - const element: HTMLDivElement = document.createElement('div'); - element.setAttribute('id', `storybook-addon-resource_${id}`); - element.innerHTML = code; - return element; -}; - -const getElement = (id: string, code: string) => { - const found: Element = document.querySelector(`[id="storybook-addon-resource_${id}"]`); - return { element: found || createElement(id, code), created: !found }; -}; - -const updateElement = (id: string, code: string, value: boolean) => { - const { element, created } = getElement(id, code); - - element.querySelectorAll('link').forEach((child) => changeMediaAttribute(child, value)); - element.querySelectorAll('style').forEach((child) => changeMediaAttribute(child, value)); - - if (created) { - document.body.appendChild(element); - } -}; - -const list: any[] = []; - -const setResources = (resources: { code: string; id: string }[]) => { - const added = resources.filter((i) => !list.find((r) => r.code === i.code)); - const removed = list.filter((i) => !resources.find((r) => r.code === i.code)); - - added.forEach((r) => list.push(r)); - - resources.forEach((r) => { - const { id, code } = r; - updateElement(id, code, true); - }); - removed.forEach((r) => { - const { id, code } = r; - updateElement(id, code, false); - }); -}; - -export const withCssResources = makeDecorator({ - name: 'withCssResources', - parameterName: PARAM_KEY, - skipIfNoParametersOrOptions: true, - - wrapper: (getStory, context, { options, parameters }) => { - const storyOptions = parameters || options; - addons.getChannel().on(EVENTS.SET, setResources); - - if (!Array.isArray(storyOptions) && !Array.isArray(storyOptions.cssresources)) { - throw new Error('The `cssresources` parameter needs to be an Array'); - } - - return getStory(context); - }, -}); - -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} diff --git a/addons/cssresources/src/register.tsx b/addons/cssresources/src/register.tsx deleted file mode 100644 index e34e1fc64494..000000000000 --- a/addons/cssresources/src/register.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import { addons, types } from '@storybook/addons'; - -import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants'; -import { CssResourcePanel } from './css-resource-panel'; - -addons.register(ADDON_ID, (api) => { - // Need to cast as any as it's not matching Addon type, to investigate - addons.add(PANEL_ID, { - type: types.PANEL, - title: 'CSS resources', - render: ({ active }) => , - paramKey: PARAM_KEY, - }); -}); diff --git a/addons/cssresources/src/typings.d.ts b/addons/cssresources/src/typings.d.ts deleted file mode 100644 index a41bf8a45b79..000000000000 --- a/addons/cssresources/src/typings.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -// TODO: following packages need definition files or a TS migration -declare module 'global'; diff --git a/addons/cssresources/tsconfig.json b/addons/cssresources/tsconfig.json deleted file mode 100644 index b17b463e1da1..000000000000 --- a/addons/cssresources/tsconfig.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "rootDir": "./src", - "types": ["webpack-env", "jest", "@testing-library/jest-dom"] - }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/**/*.test.*", - "src/**/tests/**/*", - "src/**/__tests__/**/*", - "src/**/*.stories.*", - "src/**/*.mockdata.*", - "src/**/__testfixtures__/**" - ] -} diff --git a/addons/design-assets/README.md b/addons/design-assets/README.md deleted file mode 100644 index 9f33edf6063b..000000000000 --- a/addons/design-assets/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# Storybook addon for design assets - -This addon for storybook allows you to link to image files, other files, and even url's for embedding in the storybook panel! - -You can add as many assets to a single story as you want. - -## Install - -```sh -npm install @storybook/addon-design-assets -``` - -## Usage -within `.storybook/main.js`: - -```js -module.exports = { - addons: ['@storybook/addon-design-assets'] -} -``` - -within your stories: -```js -import React from 'react'; - -import imageUrl from './images/my-image.jpg'; - -export default { - title: 'Design Assets', - parameters: { - assets: [ - imageUrl, // link to a file imported - 'https://via.placeholder.com/300/09f/fff.png', // link to an external image - 'https://www.example.com', // link to a webpage - 'https://www.example.com?id={id}', // link to a webpage with the current story's id in the url - ], - }, -}; - -export const defaultView = () => ( -
your story here
-); diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json deleted file mode 100644 index 92c44b6ec779..000000000000 --- a/addons/design-assets/package.json +++ /dev/null @@ -1,82 +0,0 @@ -{ - "name": "@storybook/addon-design-assets", - "version": "6.3.0-alpha.21", - "description": "Design asset preview for storybook", - "keywords": [ - "addon", - "assets", - "design", - "files", - "parameter", - "storybook", - "viewer" - ], - "homepage": "https://github.com/storybookjs/storybook#readme", - "bugs": { - "url": "https://github.com/storybookjs/storybook/issues" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/storybookjs/storybook.git", - "directory": "addons/design-assets" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "license": "MIT", - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "types": "dist/ts3.9/index.d.ts", - "typesVersions": { - "<3.8": { - "*": [ - "dist/ts3.4/*" - ] - } - }, - "files": [ - "dist/**/*", - "README.md", - "*.js", - "*.d.ts" - ], - "scripts": { - "prepare": "node ../../scripts/prepare.js" - }, - "dependencies": { - "@storybook/addons": "6.3.0-alpha.21", - "@storybook/api": "6.3.0-alpha.21", - "@storybook/client-logger": "6.3.0-alpha.21", - "@storybook/components": "6.3.0-alpha.21", - "@storybook/core-events": "6.3.0-alpha.21", - "@storybook/theming": "6.3.0-alpha.21", - "core-js": "^3.8.2", - "global": "^4.4.0", - "regenerator-runtime": "^0.13.7", - "ts-dedent": "^2.0.0", - "use-image": "^1.0.7" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0", - "react-dom": "^16.8.0 || ^17.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - }, - "publishConfig": { - "access": "public" - }, - "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a", - "storybook": { - "displayName": "Design assets", - "unsupportedFrameworks": [ - "react-native" - ] - } -} diff --git a/addons/design-assets/preset.js b/addons/design-assets/preset.js deleted file mode 100644 index a1382ab7c27c..000000000000 --- a/addons/design-assets/preset.js +++ /dev/null @@ -1,5 +0,0 @@ -function managerEntries(entry = [], options) { - return [...entry, require.resolve('./dist/esm/register')]; -} - -module.exports = { managerEntries }; diff --git a/addons/design-assets/register.js b/addons/design-assets/register.js deleted file mode 100644 index f209c0eb3703..000000000000 --- a/addons/design-assets/register.js +++ /dev/null @@ -1 +0,0 @@ -require('./dist/esm/register'); diff --git a/addons/design-assets/src/constants.ts b/addons/design-assets/src/constants.ts deleted file mode 100755 index 67d462acd8a6..000000000000 --- a/addons/design-assets/src/constants.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const ADDON_ID = 'storybook/design-assets'; -export const PANEL_ID = `${ADDON_ID}/panel`; -export const PARAM_KEY = `assets`; diff --git a/addons/design-assets/src/panel.tsx b/addons/design-assets/src/panel.tsx deleted file mode 100644 index 120a7b701c41..000000000000 --- a/addons/design-assets/src/panel.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React, { Fragment, useMemo, ReactElement } from 'react'; - -import { useParameter, useAddonState, useStorybookState } from '@storybook/api'; -import { styled } from '@storybook/theming'; -import { ActionBar } from '@storybook/components'; -import { PARAM_KEY, ADDON_ID } from './constants'; - -interface AssetDescription { - url: string; - name: string; -} - -type Results = (string | AssetDescription)[]; -type Selected = number; - -const Iframe = styled.iframe({ - width: '100%', - height: '100%', - border: '0 none', -}); -const Img = styled.img({ - width: '100%', - height: '100%', - border: '0 none', - objectFit: 'contain', -}); - -const Asset = ({ url }: { url: string | undefined }): ReactElement => { - if (!url) { - return null; - } - if (url.match(/\.(png|apng|gif|jpeg|tiff|svg|webp)/)) { - // do image viewer - return ; - } - if (url.match(/\.(mp4|ogv|webm)/)) { - // do video viewer - return
not implemented yet, sorry
; - } - - return