Skip to content

Commit 166ab23

Browse files
pfultonpfulton
authored
feat: use storybook v8 (#2604)
* feat: use storybook v8 * chore: remove deprecated packages, update imports for new packages
1 parent 7e99ceb commit 166ab23

File tree

20 files changed

+1066
-1055
lines changed

20 files changed

+1066
-1055
lines changed

‎.storybook/deprecated/cyclebutton/cyclebutton.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { default as ActionButtonStories } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
22
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
33
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
4-
import { useArgs } from "@storybook/client-api";
4+
import { useArgs } from "@storybook/preview-api";
55
import { html } from "lit";
66

77
import "@spectrum-css/cyclebutton/dist/index-vars.css";

‎.storybook/package.json

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,39 +18,37 @@
1818
"@babel/core": "^7.24.3",
1919
"@chromaui/addon-visual-tests": "^1.0.0",
2020
"@etchteam/storybook-addon-status": "^4.2.4",
21-
"@storybook/addon-a11y": "^7.6.17",
22-
"@storybook/addon-actions": "^7.6.17",
21+
"@storybook/addon-a11y": "^8.0.6",
22+
"@storybook/addon-actions": "^8.0.6",
2323
"@storybook/addon-console": "^3.0.0",
24-
"@storybook/addon-designs": "^7.0.9",
25-
"@storybook/addon-docs": "^7.6.17",
26-
"@storybook/addon-essentials": "^7.6.17",
27-
"@storybook/addon-interactions": "^7.6.17",
28-
"@storybook/api": "^7.6.17",
29-
"@storybook/blocks": "^7.6.17",
30-
"@storybook/client-api": "^7.6.17",
31-
"@storybook/components": "^7.6.17",
32-
"@storybook/core-events": "^7.6.17",
24+
"@storybook/addon-designs": "^8.0.0",
25+
"@storybook/addon-docs": "^8.0.6",
26+
"@storybook/addon-essentials": "^8.0.6",
27+
"@storybook/addon-interactions": "^8.0.6",
28+
"@storybook/blocks": "^8.0.6",
29+
"@storybook/components": "^8.0.6",
30+
"@storybook/core-events": "^8.0.6",
3331
"@storybook/jest": "^0.2.3",
34-
"@storybook/manager-api": "^7.6.17",
35-
"@storybook/preview-api": "^7.6.17",
32+
"@storybook/manager-api": "^8.0.6",
33+
"@storybook/preview-api": "^8.0.6",
3634
"@storybook/testing-library": "^0.2.2",
37-
"@storybook/theming": "^7.6.17",
38-
"@storybook/web-components-webpack5": "^7.6.17",
39-
"@whitespace/storybook-addon-html": "^5.1.6",
40-
"chromatic": "^11.0.1",
35+
"@storybook/theming": "^8.0.6",
36+
"@storybook/web-components-webpack5": "^8.0.6",
37+
"@whitespace/storybook-addon-html": "^6.0.4",
38+
"chromatic": "^11.3.0",
4139
"file-loader": "^6.2.0",
4240
"lit": "^3.1.2",
4341
"lodash-es": "^4.17.21",
4442
"postcss": "^8.4.35",
4543
"postcss-loader": "^8.1.1",
4644
"postcss-pseudo-classes": "^0.4.0",
47-
"prettier": "^2.8.8",
45+
"prettier": "^3.2.5",
4846
"react": "^18.2.0",
4947
"react-dom": "^18.2.0",
5048
"react-syntax-highlighter": "^15.5.0",
5149
"source-map-loader": "^5.0.0",
52-
"storybook": "^7.6.17",
50+
"storybook": "^8.0.6",
5351
"style-loader": "3.3.4",
54-
"webpack": "^5.90.3"
52+
"webpack": "^5.91.0"
5553
}
5654
}

‎components/accordion/stories/template.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
44
import { repeat } from "lit/directives/repeat.js";
55
import { styleMap } from "lit/directives/style-map.js";
66

7-
import { useArgs } from "@storybook/client-api";
7+
import { useArgs } from "@storybook/preview-api";
88

99
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
1010

‎components/alertdialog/stories/template.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useArgs } from "@storybook/client-api";
1+
import { useArgs } from "@storybook/preview-api";
22
import { html } from "lit";
33
import { classMap } from "lit/directives/class-map.js";
44
import { ifDefined } from "lit/directives/if-defined.js";

‎components/assetcard/stories/template.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { classMap } from "lit/directives/class-map.js";
33
import { ifDefined } from "lit/directives/if-defined.js";
44
import { when } from "lit/directives/when.js";
55

6-
import { useArgs } from "@storybook/client-api";
6+
import { useArgs } from "@storybook/preview-api";
77
import { camelCase } from "lodash-es";
88

99
import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";

‎components/assetlist/stories/template.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { html } from "lit";
22
import { classMap } from "lit/directives/class-map.js";
3-
import { when } from "lit/directives/when.js";
43
import { ifDefined } from "lit/directives/if-defined.js";
4+
import { when } from "lit/directives/when.js";
55

6-
import { useArgs } from "@storybook/client-api";
6+
import { useArgs } from "@storybook/preview-api";
77

88
import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
99
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";

‎components/button/stories/template.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useArgs } from "@storybook/client-api";
1+
import { useArgs } from "@storybook/preview-api";
22
import { html } from "lit";
33
import { classMap } from "lit/directives/class-map.js";
44
import { ifDefined } from "lit/directives/if-defined.js";

‎components/calendar/stories/template.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { repeat } from "lit/directives/repeat.js";
55
import { styleMap } from "lit/directives/style-map.js";
66

77
import { action } from "@storybook/addon-actions";
8-
import { useArgs, useGlobals } from "@storybook/client-api";
8+
import { useArgs, useGlobals } from "@storybook/preview-api";
99

1010
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
1111

‎components/card/stories/template.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import { html } from "lit";
22
import { classMap } from "lit/directives/class-map.js";
3-
import { styleMap } from "lit/directives/style-map.js";
43
import { ifDefined } from "lit/directives/if-defined.js";
4+
import { styleMap } from "lit/directives/style-map.js";
55
import { when } from "lit/directives/when.js";
66

7-
import { useArgs } from "@storybook/client-api";
7+
import { useArgs } from "@storybook/preview-api";
88

99
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
10-
import { Template as QuickAction } from "@spectrum-css/quickaction/stories/template.js";
11-
import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
1210
import { Template as Asset } from "@spectrum-css/asset/stories/template.js";
11+
import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
1312
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
13+
import { Template as QuickAction } from "@spectrum-css/quickaction/stories/template.js";
1414

1515
import '../index.css';
1616

‎components/checkbox/stories/template.js

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { html } from "lit";
22
import { classMap } from "lit/directives/class-map.js";
3-
import { styleMap } from "lit/directives/style-map.js";
43
import { ifDefined } from "lit/directives/if-defined.js";
4+
import { styleMap } from "lit/directives/style-map.js";
55
import { when } from "lit/directives/when.js";
66

7-
import { useArgs } from "@storybook/client-api";
7+
import { useArgs } from "@storybook/preview-api";
88

99
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
1010

@@ -35,23 +35,24 @@ export const Template = ({
3535
try {
3636
if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
3737
else import(/* webpackPrefetch: true */ "../themes/express.css");
38-
} catch (e) {
38+
}
39+
catch (e) {
3940
console.warn(e);
4041
}
4142

4243
let iconSize = "75";
4344
switch (size) {
44-
case "s":
45-
iconSize = "50";
46-
break;
47-
case "l":
48-
iconSize = "100";
49-
break;
50-
case "xl":
51-
iconSize = "200";
52-
break;
53-
default:
54-
iconSize = "75";
45+
case "s":
46+
iconSize = "50";
47+
break;
48+
case "l":
49+
iconSize = "100";
50+
break;
51+
case "xl":
52+
iconSize = "200";
53+
break;
54+
default:
55+
iconSize = "75";
5556
}
5657

5758
return html`
@@ -61,10 +62,10 @@ export const Template = ({
6162
[`${rootClass}--size${size?.toUpperCase()}`]:
6263
typeof size !== "undefined",
6364
[`${rootClass}--emphasized`]: isEmphasized,
64-
[`is-indeterminate`]: isIndeterminate,
65-
[`is-disabled`]: isDisabled|| isReadOnly,
66-
[`is-invalid`]: isInvalid,
67-
[`is-readOnly`]: isReadOnly,
65+
["is-indeterminate"]: isIndeterminate,
66+
["is-disabled"]: isDisabled|| isReadOnly,
67+
["is-invalid"]: isInvalid,
68+
["is-readOnly"]: isReadOnly,
6869
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
6970
})}
7071
id=${ifDefined(id)}

0 commit comments

Comments
 (0)