Merge pull request #2332 from eBay/14.5.0

Release PR for 14.5.0

.changeset/famous-peas-own.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+Search header for filter menu & filter menu button

.changeset/great-ants-watch.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": patch
+---
+
+Added localization for ebay-video component

.changeset/mighty-buckets-tan.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+fix(combobox): added viewAllOptions control

.changeset/plenty-drinks-sniff.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": patch
+---
+
+refactor(storybook/examples): fully migrate stories and examples to typescript

.changeset/plenty-tips-perform.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+feat(carousel): respect reduced-motion during autoplay

.changeset/sixty-bananas-kick.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+ebay-ccd: new component

package.json

@@ -51,7 +51,9 @@
         "marko.json",
         "package-lock.json",
         "*.browser.json",
-        "marketplace.json"
+        "marketplace.json",
+        "!**/{,*.}stories.*",
+        "!**/{,*.}stories-ignore.*"
     ],
     "license": "MIT",
     "repository": {
@@ -76,7 +78,7 @@
         "@commitlint/cli": "^19",
         "@commitlint/config-conventional": "^19",
         "@ebay/browserslist-config": "^2.10.0",
-        "@ebay/skin": "~18.4.0",
+        "@ebay/skin": "~18.5.0",
         "@google/model-viewer": "3.5.0",
         "@marko/compiler": "^5.37.23",
         "@marko/prettyprint": "^3.0.1",

src/common/dom/index.ts

@@ -14,3 +14,17 @@ export function getMaxWidth(el: HTMLElement) {
     el.style.width = width;
     return result;
 }
+
+/**
+ * Determines if the user has requested reduced motion in their system preferences.
+ *
+ * This function checks the `prefers-reduced-motion` media query to see if the user
+ * has indicated that they prefer reduced motion. This can be useful for improving
+ * accessibility by disabling animations or transitions for users who may be sensitive
+ * to motion.
+ *
+ * @returns {boolean} `true` if the user prefers reduced motion, `false` otherwise.
+ */
+export const useReducedMotion =
+    typeof window !== "undefined" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;

src/common/menu-utils/index.ts

@@ -10,6 +10,7 @@ export interface MenuItem extends Omit<Marko.Input<"button">, `on${string}`> {
 export interface BaseMenuInput {
     items?: Marko.AttrTag<MenuItem>;
     type?: string;
+    separator?: Marko.AttrTag<{}>;
 }
 
 export interface MenuState {

.storybook/utils.ts → src/common/storybook/utils.ts

@@ -1,4 +1,4 @@
-function addRenderBodies(input: any) {
+function addRenderBodies(input: any): any {
     if (input && typeof input === "object") {
         if (Array.isArray(input)) {
             return input.map(addRenderBodies);

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

@@ -20,7 +20,7 @@ interface DialogBaseInput extends Omit<Marko.Input<"div">, `on${string}`> {
     "close-button-text"?: AttrString;
     "close-button-class"?: AttrClass;
     "a11y-close-text"?: AttrString;
-    "close-button"?: Marko.Renderable;
+    "close-button"?: Marko.Renderable | Marko.AttrTag<{ renderBody: Marko.Body }>;
     "is-modal"?: boolean;
     "ignore-escape"?: boolean;
     "window-type"?: string;

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

@@ -1,9 +1,11 @@
-import { tagToString } from "../../../.storybook/storybook-code-source";
-import { addRenderBodies } from "../../../.storybook/utils";
+import { Story } from "@storybook/marko";
+import { tagToString } from "../../common/storybook/storybook-code-source";
+import { addRenderBodies } from "../../common/storybook/utils";
 import Readme from "./README.md";
 import Component from "./index.marko";
+import type { Input } from "./component";
 
-const Template = (args) => ({
+const Template: Story<Input> = (args) => ({
     input: addRenderBodies(args),
 });
 export default {
@@ -150,7 +152,7 @@ export default {
             },
         },
     },
-};
+} ;
 
 export const Default = Template.bind({});
 Default.args = {

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

@@ -1,9 +1,11 @@
-import { addRenderBodies } from "../../../.storybook/utils";
+import { Story } from "@storybook/marko";
+import { addRenderBodies } from "../../common/storybook/utils";
 import Readme from "./README.md";
 import Component from "./examples/default.marko";
+import type { Input } from "./index.marko";
 import code from "./examples/default.marko?raw";
 
-const Template = (args) => ({
+const Template: Story<Input> = (args) => ({
     input: addRenderBodies(args),
 });
 
@@ -87,7 +89,7 @@ Default.args = {
         renderBody: `OK`,
     },
     renderBody: `You must acknowledge this alert to continue.`,
-};
+} as any;
 Default.parameters = {
     docs: {
         source: {

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

@@ -9,9 +9,9 @@ import {
 } from "vitest";
 import { render, fireEvent, waitFor, cleanup } from "@marko/testing-library";
 import { composeStories } from "@storybook/marko";
-import { addRenderBodies } from "../../../../.storybook/utils";
 import { fastAnimations } from "../../../common/test-utils/browser";
 import * as stories from "../alert-dialog.stories"; // import all stories from the stories file
+import { addRenderBodies } from "../../../common/storybook/utils";
 const { Default } = composeStories(stories);
 
 beforeAll(() => fastAnimations.start());

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

@@ -1,10 +1,12 @@
-import { tagToString } from "../../../.storybook/storybook-code-source";
-import { addRenderBodies } from "../../../.storybook/utils";
+import { tagToString } from "../../common/storybook/storybook-code-source";
+import { addRenderBodies } from "../../common/storybook/utils";
 import Readme from "./README.md";
 import Component from "./index.marko";
 import sampleSeriesData from "./examples/data.json";
+import { Story } from "@storybook/marko";
+import type { Input } from "./component";
 
-const Template = (args) => ({
+const Template: Story<Input> = (args) => ({
     input: addRenderBodies(args),
 });
 
@@ -70,7 +72,7 @@ export const Standard = Template.bind({});
 Standard.args = {
     title: "Single series sample area chart",
     description: "this chart displays 30 days of sample values",
-    series: sampleSeriesData.slice(0, 1),
+    series: sampleSeriesData.slice(0, 1) as any,
 };
 Standard.parameters = {
     docs: {
@@ -85,7 +87,7 @@ TwoSeries.args = {
     title: "Two series sample area chart",
     description:
         "this chart displays 30 days of values for sample1 and sample2",
-    series: sampleSeriesData.slice(0, 2),
+    series: sampleSeriesData.slice(0, 2) as any,
 };
 TwoSeries.parameters = {
     docs: {
@@ -100,7 +102,7 @@ ThreeSeries.args = {
     title: "Three series sample area chart",
     description:
         "this chart displays 30 days of values for sample1, sample2 and sample3",
-    series: sampleSeriesData.slice(0, 3),
+    series: sampleSeriesData.slice(0, 3) as any,
 };
 ThreeSeries.parameters = {
     docs: {
@@ -115,7 +117,7 @@ FourSeries.args = {
     title: "Four series sample area chart",
     description:
         "this chart displays 30 days of values for sample1, sample2, sample3, and sample4",
-    series: sampleSeriesData.slice(0, 4),
+    series: sampleSeriesData.slice(0, 4) as any,
 };
 FourSeries.parameters = {
     docs: {
@@ -130,7 +132,7 @@ FiveSeries.args = {
     title: "Five series sample area chart",
     description:
         "this chart displays 30 days of values for sample1, sample2, sample3, sample4, and sample5",
-    series: sampleSeriesData,
+    series: sampleSeriesData as any,
 };
 FiveSeries.parameters = {
     docs: {

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

@@ -1,14 +1,16 @@
-import { tagToString } from "../../../.storybook/storybook-code-source";
+import { tagToString } from "../../common/storybook/storybook-code-source";
 import {
     addRenderBodies,
     buildExtensionTemplate,
-} from "../../../.storybook/utils";
+} from "../../common/storybook/utils";
 import avatar from "./index.marko";
 import Readme from "./README.md";
 import imageTemplate from "./examples/image.marko";
 import imageTemplateCode from "./examples/image.marko?raw";
+import { Story } from "@storybook/marko";
+import type { Input } from "./index.marko";
 
-const Template = (args) => ({
+const Template: Story<Input> = (args) => ({
     input: addRenderBodies(args),
 });
 

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

@@ -3,9 +3,9 @@ import { describe, it } from "vitest";
 import { composeStories } from "@storybook/marko";
 import { snapshotHTML } from "../../../common/test-utils/snapshots";
 import * as stories from "../avatar.stories"; // import all stories from the stories file
+import { addRenderBodies } from "../../../common/storybook/utils";
 const { Default, WithImage, SignedOut } = composeStories(stories);
 const htmlSnap = snapshotHTML(__dirname);
-import { addRenderBodies } from "../../../../.storybook/utils";
 
 describe("avatar", () => {
     it("renders defaults", async () => {

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

@@ -1,8 +1,9 @@
-import { tagToString } from "../../../.storybook/storybook-code-source";
-import badge from "./index.marko";
+import { Story } from "@storybook/marko";
+import { tagToString } from "../../common/storybook/storybook-code-source";
+import badge, { type Input } from "./index.marko";
 import Readme from "./README.md";
 
-const Template = (args) => ({ input: args });
+const Template: Story<Input> = (args) => ({ input: args });
 
 export default {
     title: "graphics & icons/ebay-badge",

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

@@ -1,5 +1,5 @@
 <ebay-menu-button text="eBay Menu">
-    <@item badgeNumber="5" aria-label="item 1 (5 unread items)">item 1</@item>
-    <@item badgeNumber="23" aria-label="item 2 (23 unread items)">item 2</@item>
+    <@item badgeNumber=5 aria-label="item 1 (5 unread items)">item 1</@item>
+    <@item badgeNumber=23 aria-label="item 2 (23 unread items)">item 2</@item>
     <@item>item 3</@item>
 </ebay-menu-button>

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

@@ -1,9 +1,11 @@
-import { tagToString } from "../../../.storybook/storybook-code-source";
-import { addRenderBodies } from "../../../.storybook/utils";
+import { tagToString } from "../../common/storybook/storybook-code-source";
+import { addRenderBodies } from "../../common/storybook/utils";
 import Readme from "./README.md";
 import Component from "./index.marko";
+import type { Input } from "./component";
 import sampleSeriesData from "./examples/data.json";
-const Template = (args) => ({
+import { Story } from "@storybook/marko";
+const Template: Story<Input> = (args) => ({
     input: addRenderBodies(args),
 });
 
@@ -75,7 +77,7 @@ export default {
     },
 };
 
-function getSeriesData(series, days) {
+function getSeriesData(series: number, days: number): any {
     return sampleSeriesData.slice(0, series).map((s) => ({
         ...s,
         data: s.data.slice(0, days),

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

@@ -1,5 +1,5 @@
-import { tagToString } from "../../../.storybook/storybook-code-source";
-import { addRenderBodies } from "../../../.storybook/utils";
+import { tagToString } from "../../common/storybook/storybook-code-source";
+import { addRenderBodies } from "../../common/storybook/utils";
 import Component from "./index.marko";
 import breadcrumb2 from "./examples/last-page-as-current.marko";
 import breadcrumb3 from "./examples/last-page-as-parent.marko";
@@ -9,10 +9,11 @@ import breadcrumb2Code from "./examples/last-page-as-current.marko?raw";
 import breadcrumb3Code from "./examples/last-page-as-parent.marko?raw";
 import breadcrumb4Code from "./examples/page-custom-attrs.marko?raw";
 import breadcrumb5Code from "./examples/buttons.marko?raw";
-
+import type { Input } from "./component";
 import Readme from "./README.md";
+import { Story } from "@storybook/marko";
 
-const Template = (args) => ({
+const Template: Story<Input> = (args) => ({
     input: addRenderBodies(args),
 });
 
@@ -93,7 +94,7 @@ heading.args = {
             href: "https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906",
             renderBody: "Smart Watch Bands",
         },
-    ],
+    ] as any,
 };
 
 heading.parameters = {

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

@@ -1,14 +1,15 @@
-import { tagToString } from "../../../.storybook/storybook-code-source";
+import { tagToString } from "../../common/storybook/storybook-code-source";
 import {
     addRenderBodies,
     buildExtensionTemplate,
-} from "../../../.storybook/utils";
-import button from "./index.marko";
+} from "../../common/storybook/utils";
+import button, { type Input } from "./index.marko";
 import Readme from "./README.md";
 import ExpandButtonTemplate from "./examples/expand-button.marko";
 import ExpandButtonTemplateCode from "./examples/expand-button.marko?raw";
+import { Story } from "@storybook/marko";
 
-const Template = (args) => ({
+const Template: Story<Input> = (args) => ({
     input: addRenderBodies(args),
 });
 // const Template = args =({ input: withRenderBody(args) })
@@ -211,7 +212,7 @@ Standard.args = {
     transparent: false,
     fixedHeight: false,
     truncate: false,
-};
+} as any;
 
 Standard.parameters = {
     docs: {

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

@@ -1,16 +1,18 @@
 import {
     addRenderBodies,
     buildExtensionTemplate,
-} from "../../../.storybook/utils";
-import { tagToString } from "../../../.storybook/storybook-code-source";
+} from "../../common/storybook/utils";
+import { tagToString } from "../../common/storybook/storybook-code-source";
 import Readme from "./README.md";
 import Component from "./index.marko";
+import type { Input } from "./component";
 import WithLinksTemplate from "./examples/links.marko";
 import WithLinksTemplateCode from "./examples/links.marko?raw";
 import WithSpecificLinksTemplate from "./examples/linkMap.marko";
 import WithSpecificLinksTemplateCode from "./examples/linkMap.marko?raw";
+import { Story } from "@storybook/marko";
 
-const Template = (args) => ({
+const Template: Story<Input> = (args) => ({
     input: addRenderBodies(args),
 });