Skip to content

Commit 8ed86d8

Browse files
snowystingersnowystinger
authored
Storybook 7 (#6150)
* Storybook 7
1 parent d157bbd commit 8ed86d8

File tree

179 files changed

+3479
-4991
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

179 files changed

+3479
-4991
lines changed

‎.chromatic-fc/.parcelrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "@parcel/config-default",
3+
"resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
4+
"transformers": {
5+
"packages/*/*/intl/*.json": ["parcel-transformer-intl"],
6+
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
7+
"@parcel/transformer-js",
8+
"@parcel/transformer-react-refresh-wrap"
9+
]
10+
}
11+
}

‎.chromatic-fc/custom-addons/chromatic/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {expressThemes, locales, scales, themes} from '../../constants';
2-
import {makeDecorator} from '@storybook/addons';
2+
import {makeDecorator} from '@storybook/preview-api';
33
import {Provider, View} from '@adobe/react-spectrum';
44
import React, {useEffect} from 'react';
55
import './disableAnimations.css';

‎.chromatic-fc/main.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11

22
module.exports = {
3-
core: {
4-
builder: "storybook-builder-parcel",
3+
framework: {
4+
name: "storybook-react-parcel",
5+
options: {},
56
},
6-
stories: ['../packages/**/chromatic/**/*.chromatic-fc.{js,jsx,ts,tsx}'],
7+
stories: ['../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}'],
78
addons: process.env.NODE_ENV === 'production' ? [] : [
89
'@storybook/addon-actions',
910
'@storybook/addon-a11y'

‎.chromatic-fc/manager.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import addons from '@storybook/addons';
1+
import {addons} from '@storybook/manager-api';
22

33
addons.setConfig({
4-
showRoots: false,
5-
enableShortcuts: false
4+
enableShortcuts: false,
5+
sidebar: {
6+
showRoots: false,
7+
}
68
});

‎.chromatic-fc/preview.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@ configureActions({
1212

1313
export const parameters = {
1414
options: {
15-
storySort: (a, b) =>
16-
a[1].kind === b[1].kind
15+
storySort: (a, b) => {
16+
return a.title === b.title
1717
? 0
18-
: a[1].id.localeCompare(b[1].id, undefined, {numeric: true})
18+
: a.id.localeCompare(b.id, undefined, { numeric: true });
19+
}
1920
},
2021
a11y: {},
2122
layout: 'fullscreen',

‎.chromatic/.parcelrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "@parcel/config-default",
3+
"resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
4+
"transformers": {
5+
"packages/*/*/intl/*.json": ["parcel-transformer-intl"],
6+
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
7+
"@parcel/transformer-js",
8+
"@parcel/transformer-react-refresh-wrap"
9+
]
10+
}
11+
}

‎.chromatic/custom-addons/chromatic/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {expressThemes, locales, scales, themes} from '../../constants';
2-
import {makeDecorator} from '@storybook/addons';
2+
import {makeDecorator} from '@storybook/preview-api';
33
import {Provider, View} from '@adobe/react-spectrum';
44
import React, {useEffect} from 'react';
55
import './disableAnimations.css';

‎.chromatic/main.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11

22
module.exports = {
3-
core: {
4-
builder: "storybook-builder-parcel",
3+
framework: {
4+
name: "storybook-react-parcel",
5+
options: {},
56
},
6-
stories: ['../packages/**/chromatic/**/*.chromatic.{js,jsx,ts,tsx}'],
7+
stories: ['../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)'],
78
addons: process.env.NODE_ENV === 'production' ? [] : [
89
'@storybook/addon-actions',
910
'@storybook/addon-a11y'

‎.chromatic/manager.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import addons from '@storybook/addons';
1+
import {addons} from '@storybook/manager-api';
22

33
addons.setConfig({
4-
showRoots: false,
5-
enableShortcuts: false
4+
enableShortcuts: false,
5+
sidebar: {
6+
showRoots: false,
7+
}
68
});

‎.chromatic/preview.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ configureActions({
1212

1313
export const parameters = {
1414
options: {
15-
storySort: (a, b) => a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
15+
storySort: (a, b) => {
16+
return a.title === b.title
17+
? 0
18+
: a.id.localeCompare(b.id, undefined, { numeric: true });
19+
}
1620
},
1721
a11y: {},
1822
layout: 'fullscreen'

‎.circleci/comment.js

+1
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ async function run() {
7676
body: `Build successful! 🎉
7777
7878
* [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
79+
* [View the storybook-canary](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-canary/index.html)
7980
* [View the storybook-17](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-17/index.html)
8081
* [View the storybook-16](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-16/index.html)
8182
* [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)`

‎.circleci/config.yml

+19
Original file line numberDiff line numberDiff line change
@@ -412,6 +412,21 @@ jobs:
412412
paths:
413413
- '*/storybook-17/'
414414

415+
storybook-canary:
416+
executor: rsp-large
417+
steps:
418+
- restore_cache:
419+
key: react-spectrum-canary-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
420+
421+
- run:
422+
name: build storybook-canary
423+
command: make storybook-canary
424+
425+
- persist_to_workspace:
426+
root: dist
427+
paths:
428+
- '*/storybook-canary/'
429+
415430
docs:
416431
executor: rsp-xlarge
417432
steps:
@@ -588,6 +603,9 @@ workflows:
588603
- storybook-17:
589604
requires:
590605
- install-17
606+
- storybook-canary:
607+
requires:
608+
- install-canary
591609
- docs:
592610
requires:
593611
- install
@@ -610,6 +628,7 @@ workflows:
610628
- storybook
611629
- storybook-16
612630
- storybook-17
631+
- storybook-canary
613632
- docs
614633
- deploy-verdaccio:
615634
requires:

‎.eslintignore

+4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1+
packages/@react-aria/i18n/server
12
packages/@spectrum-icons/color/**
23
packages/@spectrum-icons/ui/**
34
packages/@spectrum-icons/workflow/**
45
packages/@spectrum-icons/illustrations/**
56
packages/@spectrum-icons/express/**
67
node_modules
78
packages/*/*/dist
9+
packages/*/*/i18n
810
packages/react-aria/dist
11+
packages/react-aria/i18n
912
packages/react-aria-components/dist
13+
packages/react-aria-components/i18n
1014
packages/react-stately/dist
1115
packages/dev/storybook-builder-parcel/preview.js
1216
packages/dev/optimize-locales-plugin/LocalesPlugin.d.ts

‎.eslintrc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ module.exports = {
5151
}]
5252
}
5353
}, {
54-
files: ['**/test/**', '**/stories/**', '**/docs/**', '**/chromatic/**', '**/__tests__/**'],
54+
files: ['**/test/**', '**/stories/**', '**/docs/**', '**/chromatic/**', '**/chromatic-fc/**', '**/__tests__/**'],
5555
rules: {
5656
'rsp-rules/no-react-key': [ERROR],
5757
'rsp-rules/act-events-test': ERROR,

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,5 @@ npm-debug.log
1313
public
1414
storybook-static
1515
test-reports.xml
16+
packages/dev/storybook-builder-parcel/iframe.html
17+
packages/dev/storybook-builder-parcel/preview.js

‎.storybook/.parcelrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "@parcel/config-default",
3+
"resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
4+
"transformers": {
5+
"packages/*/*/intl/*.json": ["parcel-transformer-intl"],
6+
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
7+
"@parcel/transformer-js",
8+
"@parcel/transformer-react-refresh-wrap"
9+
]
10+
}
11+
}

‎.storybook/custom-addons/descriptions/register.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import { addons, types } from '@storybook/addons';
2+
import {addons, types} from '@storybook/manager-api';
33
import { AddonPanel } from '@storybook/components';
44
import React from 'react';
55
import { useParameter } from '@storybook/api';

‎.storybook/custom-addons/provider/index.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, {useEffect, useState} from 'react';
2-
import addons, { makeDecorator } from '@storybook/addons';
3-
import {getQueryParams} from '@storybook/client-api';
2+
import {addons} from '@storybook/preview-api';
3+
import {makeDecorator} from '@storybook/preview-api';
4+
import {getQueryParams} from '@storybook/preview-api';
45
import {Provider} from '@react-spectrum/provider';
56
import {expressThemes, themes, defaultTheme} from '../../constants';
67

‎.storybook/custom-addons/provider/register.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import addons, { types } from '@storybook/addons';
2-
import {getQueryParams} from '@storybook/client-api';
1+
2+
import {addons, types} from '@storybook/manager-api';
3+
import {getQueryParams} from '@storybook/preview-api';
34
import {locales} from '../../constants';
45
import React, {useEffect, useState} from 'react';
56

‎.storybook/custom-addons/scrolling/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import {addons, makeDecorator} from '@storybook/addons';
1+
import {addons} from '@storybook/preview-api';
22
import clsx from 'clsx';
3-
import {getQueryParams} from '@storybook/client-api';
3+
import {getQueryParams} from '@storybook/preview-api';
44
import React, {useEffect, useState} from 'react';
55

66
function ScrollingDecorator(props) {

‎.storybook/custom-addons/scrolling/register.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {addons, types} from '@storybook/addons';
2-
import {getQueryParams} from '@storybook/client-api';
1+
import {addons, types} from '@storybook/manager-api';
2+
import {getQueryParams} from '@storybook/preview-api';
33
import React, {useEffect, useState} from 'react';
44

55
const ScrollingToolbar = ({api}) => {

‎.storybook/custom-addons/strictmode/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {addons, makeDecorator} from '@storybook/addons';
2-
import {getQueryParams} from '@storybook/client-api';
1+
import {addons, makeDecorator} from '@storybook/preview-api';
2+
import {getQueryParams} from '@storybook/preview-api';
33
import React, {StrictMode, useEffect, useState} from 'react';
44

55
function StrictModeDecorator(props) {

‎.storybook/custom-addons/strictmode/register.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {addons, types} from '@storybook/addons';
2-
import {getQueryParams} from '@storybook/client-api';
1+
import {addons, types} from '@storybook/manager-api';
2+
import {getQueryParams} from '@storybook/preview-api';
33
import React, {useEffect, useState} from 'react';
44

55
const StrictModeToolBar = ({api}) => {

‎.storybook/custom-addons/theme/register.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import {themes} from '@storybook/theming';
2-
import addons from '@storybook/addons';
2+
import {addons} from '@storybook/manager-api';
33
import {FORCE_RE_RENDER} from '@storybook/core-events';
44
// temporary until we have a better place to grab it from
55
import * as packageJSON from '../../../packages/@adobe/react-spectrum/package.json';
66

7-
// Automatically switch light/dark theme based on system pref.
87
addons.register('theme-switcher', api => {
98
let query = window.matchMedia('(prefers-color-scheme: dark)');
109
let update = () => {

‎.storybook/main.js

+11-7
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
11

22
module.exports = {
3-
core: {
4-
builder: "storybook-builder-parcel",
5-
},
63
stories: ['../packages/**/stories/*.stories.{js,jsx,ts,tsx}'],
4+
75
addons: [
8-
'@storybook/addon-actions',
9-
'@storybook/addon-a11y',
10-
'@storybook/addon-controls',
11-
'storybook-dark-mode',
6+
"@storybook/addon-actions",
7+
"@storybook/addon-a11y",
8+
"@storybook/addon-controls",
9+
"storybook-dark-mode",
1210
'./custom-addons/provider/register',
1311
'./custom-addons/descriptions/register',
1412
'./custom-addons/theme/register',
1513
'./custom-addons/strictmode/register',
1614
'./custom-addons/scrolling/register'
1715
],
16+
1817
typescript: {
1918
check: false,
2019
reactDocgen: false
20+
},
21+
22+
framework: {
23+
name: "storybook-react-parcel",
24+
options: {},
2125
}
2226
};

‎.storybook/manager.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import addons from '@storybook/addons';
1+
import {addons} from '@storybook/manager-api';
22

33
addons.setConfig({
4-
showRoots: false,
5-
enableShortcuts: false
4+
enableShortcuts: false,
5+
sidebar: {
6+
showRoots: false,
7+
}
68
});

‎.storybook/preview.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ configureActions({
1212

1313
export const parameters = {
1414
options: {
15-
storySort: (a, b) => a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
15+
storySort: (a, b) => {
16+
return a.title === b.title
17+
? 0
18+
: a.id.localeCompare(b.id, undefined, { numeric: true });
19+
}
1620
},
1721
a11y: {
1822
config: {

‎Makefile

+3
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,9 @@ storybook-16:
8181
storybook-17:
8282
yarn build:storybook-17
8383

84+
storybook-canary:
85+
yarn build:storybook-canary
86+
8487
# for now doesn't have deploy since v3 doesn't have a place for docs and stuff yet
8588
ci:
8689
$(MAKE) publish

‎examples/rsp-webpack-4/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@
2323
"react-dom": "^18.2.0"
2424
},
2525
"devDependencies": {
26-
"@babel/core": "^7.1.0",
27-
"@babel/cli": "^7.1.0",
28-
"@babel/preset-env": "^7.1.0",
29-
"@babel/preset-react": "^7.0.0",
26+
"@babel/core": "^7.24.3",
27+
"@babel/cli": "^7.24.3",
28+
"@babel/preset-env": "^7.24.3",
29+
"@babel/preset-react": "^7.24.3",
3030
"webpack": "4.46.0",
3131
"webpack-cli": "3.1.1",
3232
"webpack-dev-server": "3.1.8",

0 commit comments

Comments
 (0)