Skip to content

Commit c006353

Browse files
bill-minagliga
bill-min
authored and
agliga
committed
refactor: (read desc) fully migrate stories to typescript and fix type issues in examples (#2317)
1 parent e45c9af commit c006353

File tree

147 files changed

+798
-594
lines changed

Some content is hidden

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

147 files changed

+798
-594
lines changed

‎.changeset/plenty-drinks-sniff.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/ebayui-core": patch
3+
---
4+
5+
refactor(storybook/examples): fully migrate stories and examples to typescript

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@
5151
"marko.json",
5252
"package-lock.json",
5353
"*.browser.json",
54-
"marketplace.json"
54+
"marketplace.json",
55+
"!**/{,*.}stories.*",
56+
"!**/{,*.}stories-ignore.*"
5557
],
5658
"license": "MIT",
5759
"repository": {

‎src/common/menu-utils/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export interface MenuItem extends Omit<Marko.Input<"button">, `on${string}`> {
1010
export interface BaseMenuInput {
1111
items?: Marko.AttrTag<MenuItem>;
1212
type?: string;
13+
separator?: Marko.AttrTag<{}>;
1314
}
1415

1516
export interface MenuState {

‎.storybook/storybook-code-source/index.ts ‎src/common/storybook/storybook-code-source.ts

File renamed without changes.

‎.storybook/utils.ts ‎src/common/storybook/utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
function addRenderBodies(input: any) {
1+
function addRenderBodies(input: any): any {
22
if (input && typeof input === "object") {
33
if (Array.isArray(input)) {
44
return input.map(addRenderBodies);

‎src/components/components/ebay-dialog-base/component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ interface DialogBaseInput extends Omit<Marko.Input<"div">, `on${string}`> {
2020
"close-button-text"?: AttrString;
2121
"close-button-class"?: AttrClass;
2222
"a11y-close-text"?: AttrString;
23-
"close-button"?: Marko.Renderable;
23+
"close-button"?: Marko.Renderable | Marko.AttrTag<{ renderBody: Marko.Body }>;
2424
"is-modal"?: boolean;
2525
"ignore-escape"?: boolean;
2626
"window-type"?: string;

‎src/components/ebay-3d-viewer/3d-viewer.stories.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { tagToString } from "../../../.storybook/storybook-code-source";
2-
import { addRenderBodies } from "../../../.storybook/utils";
1+
import { Story } from "@storybook/marko";
2+
import { tagToString } from "../../common/storybook/storybook-code-source";
3+
import { addRenderBodies } from "../../common/storybook/utils";
34
import Readme from "./README.md";
45
import Component from "./index.marko";
6+
import type { Input } from "./component";
57

6-
const Template = (args) => ({
8+
const Template: Story<Input> = (args) => ({
79
input: addRenderBodies(args),
810
});
911
export default {
@@ -150,7 +152,7 @@ export default {
150152
},
151153
},
152154
},
153-
};
155+
} ;
154156

155157
export const Default = Template.bind({});
156158
Default.args = {

‎src/components/ebay-alert-dialog/alert-dialog.stories.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { addRenderBodies } from "../../../.storybook/utils";
1+
import { Story } from "@storybook/marko";
2+
import { addRenderBodies } from "../../common/storybook/utils";
23
import Readme from "./README.md";
34
import Component from "./examples/default.marko";
5+
import type { Input } from "./index.marko";
46
import code from "./examples/default.marko?raw";
57

6-
const Template = (args) => ({
8+
const Template: Story<Input> = (args) => ({
79
input: addRenderBodies(args),
810
});
911

@@ -87,7 +89,7 @@ Default.args = {
8789
renderBody: `OK`,
8890
},
8991
renderBody: `You must acknowledge this alert to continue.`,
90-
};
92+
} as any;
9193
Default.parameters = {
9294
docs: {
9395
source: {

‎src/components/ebay-alert-dialog/test/test.browser.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import {
99
} from "vitest";
1010
import { render, fireEvent, waitFor, cleanup } from "@marko/testing-library";
1111
import { composeStories } from "@storybook/marko";
12-
import { addRenderBodies } from "../../../../.storybook/utils";
1312
import { fastAnimations } from "../../../common/test-utils/browser";
1413
import * as stories from "../alert-dialog.stories"; // import all stories from the stories file
14+
import { addRenderBodies } from "../../../common/storybook/utils";
1515
const { Default } = composeStories(stories);
1616

1717
beforeAll(() => fastAnimations.start());

‎src/components/ebay-area-chart/area-chart.stories-ignore.ts

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { tagToString } from "../../../.storybook/storybook-code-source";
2-
import { addRenderBodies } from "../../../.storybook/utils";
1+
import { tagToString } from "../../common/storybook/storybook-code-source";
2+
import { addRenderBodies } from "../../common/storybook/utils";
33
import Readme from "./README.md";
44
import Component from "./index.marko";
55
import sampleSeriesData from "./examples/data.json";
6+
import { Story } from "@storybook/marko";
7+
import type { Input } from "./component";
68

7-
const Template = (args) => ({
9+
const Template: Story<Input> = (args) => ({
810
input: addRenderBodies(args),
911
});
1012

@@ -70,7 +72,7 @@ export const Standard = Template.bind({});
7072
Standard.args = {
7173
title: "Single series sample area chart",
7274
description: "this chart displays 30 days of sample values",
73-
series: sampleSeriesData.slice(0, 1),
75+
series: sampleSeriesData.slice(0, 1) as any,
7476
};
7577
Standard.parameters = {
7678
docs: {
@@ -85,7 +87,7 @@ TwoSeries.args = {
8587
title: "Two series sample area chart",
8688
description:
8789
"this chart displays 30 days of values for sample1 and sample2",
88-
series: sampleSeriesData.slice(0, 2),
90+
series: sampleSeriesData.slice(0, 2) as any,
8991
};
9092
TwoSeries.parameters = {
9193
docs: {
@@ -100,7 +102,7 @@ ThreeSeries.args = {
100102
title: "Three series sample area chart",
101103
description:
102104
"this chart displays 30 days of values for sample1, sample2 and sample3",
103-
series: sampleSeriesData.slice(0, 3),
105+
series: sampleSeriesData.slice(0, 3) as any,
104106
};
105107
ThreeSeries.parameters = {
106108
docs: {
@@ -115,7 +117,7 @@ FourSeries.args = {
115117
title: "Four series sample area chart",
116118
description:
117119
"this chart displays 30 days of values for sample1, sample2, sample3, and sample4",
118-
series: sampleSeriesData.slice(0, 4),
120+
series: sampleSeriesData.slice(0, 4) as any,
119121
};
120122
FourSeries.parameters = {
121123
docs: {
@@ -130,7 +132,7 @@ FiveSeries.args = {
130132
title: "Five series sample area chart",
131133
description:
132134
"this chart displays 30 days of values for sample1, sample2, sample3, sample4, and sample5",
133-
series: sampleSeriesData,
135+
series: sampleSeriesData as any,
134136
};
135137
FiveSeries.parameters = {
136138
docs: {

‎src/components/ebay-avatar/avatar.stories.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
import { tagToString } from "../../../.storybook/storybook-code-source";
1+
import { tagToString } from "../../common/storybook/storybook-code-source";
22
import {
33
addRenderBodies,
44
buildExtensionTemplate,
5-
} from "../../../.storybook/utils";
5+
} from "../../common/storybook/utils";
66
import avatar from "./index.marko";
77
import Readme from "./README.md";
88
import imageTemplate from "./examples/image.marko";
99
import imageTemplateCode from "./examples/image.marko?raw";
10+
import { Story } from "@storybook/marko";
11+
import type { Input } from "./index.marko";
1012

11-
const Template = (args) => ({
13+
const Template: Story<Input> = (args) => ({
1214
input: addRenderBodies(args),
1315
});
1416

‎src/components/ebay-avatar/test/test.server.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { describe, it } from "vitest";
33
import { composeStories } from "@storybook/marko";
44
import { snapshotHTML } from "../../../common/test-utils/snapshots";
55
import * as stories from "../avatar.stories"; // import all stories from the stories file
6+
import { addRenderBodies } from "../../../common/storybook/utils";
67
const { Default, WithImage, SignedOut } = composeStories(stories);
78
const htmlSnap = snapshotHTML(__dirname);
8-
import { addRenderBodies } from "../../../../.storybook/utils";
99

1010
describe("avatar", () => {
1111
it("renders defaults", async () => {

‎src/components/ebay-badge/badge.stories.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { tagToString } from "../../../.storybook/storybook-code-source";
2-
import badge from "./index.marko";
1+
import { Story } from "@storybook/marko";
2+
import { tagToString } from "../../common/storybook/storybook-code-source";
3+
import badge, { type Input } from "./index.marko";
34
import Readme from "./README.md";
45

5-
const Template = (args) => ({ input: args });
6+
const Template: Story<Input> = (args) => ({ input: args });
67

78
export default {
89
title: "graphics & icons/ebay-badge",

‎src/components/ebay-badge/examples/menu.marko

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<ebay-menu-button text="eBay Menu">
2-
<@item badgeNumber="5" aria-label="item 1 (5 unread items)">item 1</@item>
3-
<@item badgeNumber="23" aria-label="item 2 (23 unread items)">item 2</@item>
2+
<@item badgeNumber=5 aria-label="item 1 (5 unread items)">item 1</@item>
3+
<@item badgeNumber=23 aria-label="item 2 (23 unread items)">item 2</@item>
44
<@item>item 3</@item>
55
</ebay-menu-button>

‎src/components/ebay-bar-chart/bar-chart.stories-ignore.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { tagToString } from "../../../.storybook/storybook-code-source";
2-
import { addRenderBodies } from "../../../.storybook/utils";
1+
import { tagToString } from "../../common/storybook/storybook-code-source";
2+
import { addRenderBodies } from "../../common/storybook/utils";
33
import Readme from "./README.md";
44
import Component from "./index.marko";
5+
import type { Input } from "./component";
56
import sampleSeriesData from "./examples/data.json";
6-
const Template = (args) => ({
7+
import { Story } from "@storybook/marko";
8+
const Template: Story<Input> = (args) => ({
79
input: addRenderBodies(args),
810
});
911

@@ -75,7 +77,7 @@ export default {
7577
},
7678
};
7779

78-
function getSeriesData(series, days) {
80+
function getSeriesData(series: number, days: number): any {
7981
return sampleSeriesData.slice(0, series).map((s) => ({
8082
...s,
8183
data: s.data.slice(0, days),

‎src/components/ebay-breadcrumbs/breadcrumbs.stories.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { tagToString } from "../../../.storybook/storybook-code-source";
2-
import { addRenderBodies } from "../../../.storybook/utils";
1+
import { tagToString } from "../../common/storybook/storybook-code-source";
2+
import { addRenderBodies } from "../../common/storybook/utils";
33
import Component from "./index.marko";
44
import breadcrumb2 from "./examples/last-page-as-current.marko";
55
import breadcrumb3 from "./examples/last-page-as-parent.marko";
@@ -9,10 +9,11 @@ import breadcrumb2Code from "./examples/last-page-as-current.marko?raw";
99
import breadcrumb3Code from "./examples/last-page-as-parent.marko?raw";
1010
import breadcrumb4Code from "./examples/page-custom-attrs.marko?raw";
1111
import breadcrumb5Code from "./examples/buttons.marko?raw";
12-
12+
import type { Input } from "./component";
1313
import Readme from "./README.md";
14+
import { Story } from "@storybook/marko";
1415

15-
const Template = (args) => ({
16+
const Template: Story<Input> = (args) => ({
1617
input: addRenderBodies(args),
1718
});
1819

@@ -93,7 +94,7 @@ heading.args = {
9394
href: "https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906",
9495
renderBody: "Smart Watch Bands",
9596
},
96-
],
97+
] as any,
9798
};
9899

99100
heading.parameters = {

‎src/components/ebay-button/button.stories.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
import { tagToString } from "../../../.storybook/storybook-code-source";
1+
import { tagToString } from "../../common/storybook/storybook-code-source";
22
import {
33
addRenderBodies,
44
buildExtensionTemplate,
5-
} from "../../../.storybook/utils";
6-
import button from "./index.marko";
5+
} from "../../common/storybook/utils";
6+
import button, { type Input } from "./index.marko";
77
import Readme from "./README.md";
88
import ExpandButtonTemplate from "./examples/expand-button.marko";
99
import ExpandButtonTemplateCode from "./examples/expand-button.marko?raw";
10+
import { Story } from "@storybook/marko";
1011

11-
const Template = (args) => ({
12+
const Template: Story<Input> = (args) => ({
1213
input: addRenderBodies(args),
1314
});
1415
// const Template = args =({ input: withRenderBody(args) })
@@ -211,7 +212,7 @@ Standard.args = {
211212
transparent: false,
212213
fixedHeight: false,
213214
truncate: false,
214-
};
215+
} as any;
215216

216217
Standard.parameters = {
217218
docs: {

‎src/components/ebay-calendar/calendar.stories.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import {
22
addRenderBodies,
33
buildExtensionTemplate,
4-
} from "../../../.storybook/utils";
5-
import { tagToString } from "../../../.storybook/storybook-code-source";
4+
} from "../../common/storybook/utils";
5+
import { tagToString } from "../../common/storybook/storybook-code-source";
66
import Readme from "./README.md";
77
import Component from "./index.marko";
8+
import type { Input } from "./component";
89
import WithLinksTemplate from "./examples/links.marko";
910
import WithLinksTemplateCode from "./examples/links.marko?raw";
1011
import WithSpecificLinksTemplate from "./examples/linkMap.marko";
1112
import WithSpecificLinksTemplateCode from "./examples/linkMap.marko?raw";
13+
import { Story } from "@storybook/marko";
1214

13-
const Template = (args) => ({
15+
const Template: Story<Input> = (args) => ({
1416
input: addRenderBodies(args),
1517
});
1618

‎src/components/ebay-carousel/carousel.stories.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import { tagToString } from "../../../.storybook/storybook-code-source";
21
import {
3-
addRenderBodies,
42
buildExtensionTemplate,
5-
} from "../../../.storybook/utils";
6-
3+
} from "../../common/storybook/utils";
74
import carousel from "./index.marko";
85
import Readme from "./README.md";
96
import continiousTemplate from "./examples/continuous.marko";

‎src/components/ebay-carousel/examples/autoplay.marko

+10-10
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,14 @@ export interface Input {
3333
on-slide("emit", "slide")
3434
on-play("emit", "play")
3535
on-pause("emit", "pause")>
36-
<@item style={ width: 400 } class="demo2-card">Card 1</@item>
37-
<@item style={ width: 400 } class="demo2-card">Card 2</@item>
38-
<@item style={ width: 400 } class="demo2-card">Card 3</@item>
39-
<@item style={ width: 400 } class="demo2-card">Card 4</@item>
40-
<@item style={ width: 400 } class="demo2-card">Card 5</@item>
41-
<@item style={ width: 400 } class="demo2-card">Card 6</@item>
42-
<@item style={ width: 400 } class="demo2-card">Card 7</@item>
43-
<@item style={ width: 400 } class="demo2-card">Card 8</@item>
44-
<@item style={ width: 400 } class="demo2-card">Card 9</@item>
45-
<@item style={ width: 400 } class="demo2-card">Card 10</@item>
36+
<@item style={ width: "400px" } class="demo2-card">Card 1</@item>
37+
<@item style={ width: "400px" } class="demo2-card">Card 2</@item>
38+
<@item style={ width: "400px" } class="demo2-card">Card 3</@item>
39+
<@item style={ width: "400px" } class="demo2-card">Card 4</@item>
40+
<@item style={ width: "400px" } class="demo2-card">Card 5</@item>
41+
<@item style={ width: "400px" } class="demo2-card">Card 6</@item>
42+
<@item style={ width: "400px" } class="demo2-card">Card 7</@item>
43+
<@item style={ width: "400px" } class="demo2-card">Card 8</@item>
44+
<@item style={ width: "400px" } class="demo2-card">Card 9</@item>
45+
<@item style={ width: "400px" } class="demo2-card">Card 10</@item>
4646
</ebay-carousel>

‎src/components/ebay-carousel/examples/continuous-image-treatment.marko

+2-3
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ export interface Input {
2424
<ebay-carousel
2525
imageTreatment="matte"
2626
...input
27-
on-carousel-update("emit", "carousel-update")
2827
on-move("emit", "move")
2928
on-next("emit", "next")
3029
on-previous("emit", "previous")
@@ -48,10 +47,10 @@ export interface Input {
4847
<@item>
4948
<img aria-label="photo 6" src="http://ir.ebaystatic.com/cr/v/c1/skin/image-treatment/wide-cat.jpeg">
5049
</@item>
51-
<@item style={ width: 400 } class="demo-card">
50+
<@item style={ width: "400px" } class="demo-card">
5251
Additional Item
5352
</@item>
54-
<@item style={ width: 400 } class="demo-card">
53+
<@item style={ width: "400px" } class="demo-card">
5554
Additional Item 2
5655
</@item>
5756
</ebay-carousel>

‎src/components/ebay-carousel/examples/continuous.marko

+10-10
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@ export interface Input {
2828
on-previous("emit", "previous")
2929
on-scroll("emit", "scroll")
3030
on-slide("emit", "slide")>
31-
<@item style={ width: 400 } class="demo-card">Card 1</@item>
32-
<@item style={ width: 400 } class="demo-card">Card 2</@item>
33-
<@item style={ width: 400 } class="demo-card">Card 3</@item>
34-
<@item style={ width: 400 } class="demo-card">Card 4</@item>
35-
<@item style={ width: 400 } class="demo-card">Card 5</@item>
36-
<@item style={ width: 400 } class="demo-card">Card 6</@item>
37-
<@item style={ width: 400 } class="demo-card">Card 7</@item>
38-
<@item style={ width: 400 } class="demo-card">Card 8</@item>
39-
<@item style={ width: 400 } class="demo-card">Card 9</@item>
40-
<@item style={ width: 400 } class="demo-card">Card 10</@item>
31+
<@item style={ width: "400px" } class="demo-card">Card 1</@item>
32+
<@item style={ width: "400px" } class="demo-card">Card 2</@item>
33+
<@item style={ width: "400px" } class="demo-card">Card 3</@item>
34+
<@item style={ width: "400px" } class="demo-card">Card 4</@item>
35+
<@item style={ width: "400px" } class="demo-card">Card 5</@item>
36+
<@item style={ width: "400px" } class="demo-card">Card 6</@item>
37+
<@item style={ width: "400px" } class="demo-card">Card 7</@item>
38+
<@item style={ width: "400px" } class="demo-card">Card 8</@item>
39+
<@item style={ width: "400px" } class="demo-card">Card 9</@item>
40+
<@item style={ width: "400px" } class="demo-card">Card 10</@item>
4141
</ebay-carousel>

0 commit comments

Comments
 (0)