@evo-web/react 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/evo-button/button-cell.d.ts +8 -0
- package/dist/evo-button/button-cell.d.ts.map +1 -0
- package/dist/evo-button/button-cell.js +15 -0
- package/dist/evo-button/button-cell.js.map +1 -0
- package/dist/evo-button/button.d.ts +6 -0
- package/dist/evo-button/button.d.ts.map +1 -0
- package/dist/evo-button/button.js +50 -0
- package/dist/evo-button/button.js.map +1 -0
- package/dist/evo-button/index.d.ts +4 -0
- package/dist/evo-button/index.d.ts.map +1 -0
- package/{src/evo-button/types.ts → dist/evo-button/types.d.ts} +17 -22
- package/dist/evo-button/types.d.ts.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +8 -0
- package/dist/index.js.map +1 -0
- package/package.json +4 -1
- package/.prettierignore +0 -3
- package/.storybook/main.js +0 -32
- package/.storybook/manager-head.html +0 -6
- package/.storybook/manager.ts +0 -4
- package/.storybook/preview.tsx +0 -50
- package/.storybook/theme.ts +0 -17
- package/.storybook/vite.config.js +0 -3
- package/CHANGELOG.md +0 -11
- package/eslint.config.js +0 -53
- package/src/evo-button/button-cell.tsx +0 -21
- package/src/evo-button/button.stories.tsx +0 -113
- package/src/evo-button/button.tsx +0 -138
- package/src/evo-button/index.ts +0 -10
- package/src/evo-button/test/__snapshots__/test.server.tsx.snap +0 -83
- package/src/evo-button/test/test.browser.tsx +0 -298
- package/src/evo-button/test/test.server.tsx +0 -245
- package/src/index.ts +0 -9
- package/test.setup.ts +0 -7
- package/tsconfig.json +0 -21
- package/tsconfig.prod.json +0 -5
- package/vite.config.js +0 -88
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ComponentProps } from "react";
|
|
2
|
+
type ButtonType = "cta" | "fake" | "expand" | "default";
|
|
3
|
+
type Props = ComponentProps<"span"> & {
|
|
4
|
+
type?: ButtonType;
|
|
5
|
+
};
|
|
6
|
+
export declare function EvoButtonCell({ type, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=button-cell.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-cell.d.ts","sourceRoot":"","sources":["../../src/evo-button/button-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,KAAK,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AACxD,KAAK,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IACpC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AASF,wBAAgB,aAAa,CAAC,EAAE,IAAgB,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAM3E"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
const classPrefixes = {
|
|
4
|
+
cta: "cta-",
|
|
5
|
+
fake: "fake-",
|
|
6
|
+
expand: "expand-",
|
|
7
|
+
default: ""
|
|
8
|
+
};
|
|
9
|
+
function EvoButtonCell({ type = "default", children, ...rest }) {
|
|
10
|
+
return jsx("span", { className: `${classPrefixes[type]}btn__cell`, ...rest, children });
|
|
11
|
+
}
|
|
12
|
+
export {
|
|
13
|
+
EvoButtonCell
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=button-cell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-cell.js","sources":["../../src/evo-button/button-cell.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\ntype ButtonType = \"cta\" | \"fake\" | \"expand\" | \"default\";\ntype Props = ComponentProps<\"span\"> & {\n type?: ButtonType;\n};\n\nconst classPrefixes: { [key in ButtonType]: string } = {\n cta: \"cta-\",\n fake: \"fake-\",\n expand: \"expand-\",\n default: \"\",\n};\n\nexport function EvoButtonCell({ type = \"default\", children, ...rest }: Props) {\n return (\n <span className={`${classPrefixes[type]}btn__cell`} {...rest}>\n {children}\n </span>\n );\n}\n"],"names":["_jsx"],"mappings":";;AAOA,MAAM,gBAAiD;AAAA,EACrD,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;;AAGL,SAAU,cAAc,EAAE,OAAO,WAAW,UAAU,GAAG,QAAa;AAC1E,SACEA,IAAA,QAAA,EAAM,WAAW,GAAG,cAAc,IAAI,CAAC,gBAAiB,MAAI,SAAA,CACjD;AAGf;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { AnchorButtonProps, NativeButtonProps } from "./types";
|
|
3
|
+
import "@ebay/skin/button";
|
|
4
|
+
export declare function EvoButton(props: AnchorButtonProps): React.JSX.Element;
|
|
5
|
+
export declare function EvoButton(props: NativeButtonProps): React.JSX.Element;
|
|
6
|
+
//# sourceMappingURL=button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/evo-button/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EAIlB,MAAM,SAAS,CAAC;AACjB,OAAO,mBAAmB,CAAC;AAE3B,wBAAgB,SAAS,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;AACvE,wBAAgB,SAAS,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
|
+
import classNames from "classnames";
|
|
4
|
+
import "@ebay/skin/button";
|
|
5
|
+
function EvoButton(props) {
|
|
6
|
+
const { priority = "secondary", variant = "standard", size, bodyState, split, transparent = false, fluid = false, disabled, partiallyDisabled, children, onKeyDown, onEscape, truncate = false, href, className: extraClasses, borderless, fixedHeight, ...rest } = props;
|
|
7
|
+
const classPrefix = href ? "fake-btn" : "btn";
|
|
8
|
+
const priorityStyles = {
|
|
9
|
+
primary: `${classPrefix}--primary`,
|
|
10
|
+
secondary: `${classPrefix}--secondary`,
|
|
11
|
+
tertiary: `${classPrefix}--tertiary`,
|
|
12
|
+
none: ""
|
|
13
|
+
};
|
|
14
|
+
const sizeStyles = {
|
|
15
|
+
large: `${classPrefix}--large`,
|
|
16
|
+
small: `${classPrefix}--small`
|
|
17
|
+
};
|
|
18
|
+
const splitStyles = {
|
|
19
|
+
start: `${classPrefix}--split-start`,
|
|
20
|
+
end: `${classPrefix}--split-end`
|
|
21
|
+
};
|
|
22
|
+
const isDestructive = variant === "destructive";
|
|
23
|
+
const isForm = variant === "form";
|
|
24
|
+
const className = classNames(classPrefix, extraClasses, priorityStyles[isForm || borderless ? "none" : priority], size && sizeStyles[size], split && splitStyles[split], isDestructive && `${classPrefix}--destructive`, isForm && `${classPrefix}--form`, transparent && `${classPrefix}--transparent`, fluid && `${classPrefix}--fluid`, truncate && `${classPrefix}--truncated`, borderless && `${classPrefix}--borderless`, fixedHeight && (size && sizeStyles[size] ? `${sizeStyles[size]}-fixed-height` : `${classPrefix}--fixed-height`));
|
|
25
|
+
const bodyContent = (() => {
|
|
26
|
+
switch (bodyState) {
|
|
27
|
+
case "loading":
|
|
28
|
+
return jsx("span", { className: "btn__cell", children: jsx("span", { children: "Loading..." }) });
|
|
29
|
+
case "expand":
|
|
30
|
+
return jsxs("span", { className: "btn__cell", children: [jsx("span", { className: "btn__text", children }), jsx("span", { children: "▼" })] });
|
|
31
|
+
default:
|
|
32
|
+
return children;
|
|
33
|
+
}
|
|
34
|
+
})();
|
|
35
|
+
const ariaLive = bodyState === "loading" ? "polite" : void 0;
|
|
36
|
+
const keyDownHandler = (event) => {
|
|
37
|
+
onKeyDown?.(event);
|
|
38
|
+
if (event.key === "Escape" && !disabled && onEscape) {
|
|
39
|
+
onEscape(event);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
if (href) {
|
|
43
|
+
return jsx("a", { ...rest, className, href: disabled ? void 0 : href, onKeyDown: keyDownHandler, "aria-live": ariaLive, children: bodyContent });
|
|
44
|
+
}
|
|
45
|
+
return jsx("button", { ...rest, disabled, "aria-disabled": partiallyDisabled ? "true" : void 0, "aria-live": ariaLive, className, onKeyDown: keyDownHandler, children: bodyContent });
|
|
46
|
+
}
|
|
47
|
+
export {
|
|
48
|
+
EvoButton
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../src/evo-button/button.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport React from \"react\";\nimport classNames from \"classnames\";\nimport type {\n AnchorButtonProps,\n NativeButtonProps,\n Priority,\n Size,\n Split,\n} from \"./types\";\nimport \"@ebay/skin/button\";\n\nexport function EvoButton(props: AnchorButtonProps): React.JSX.Element;\nexport function EvoButton(props: NativeButtonProps): React.JSX.Element;\nexport function EvoButton(\n props: AnchorButtonProps | NativeButtonProps,\n): React.JSX.Element {\n const {\n priority = \"secondary\",\n variant = \"standard\",\n size,\n bodyState,\n split,\n transparent = false,\n fluid = false,\n disabled,\n partiallyDisabled,\n children,\n onKeyDown,\n onEscape,\n truncate = false,\n href,\n className: extraClasses,\n borderless,\n fixedHeight,\n ...rest\n } = props;\n const classPrefix = href ? \"fake-btn\" : \"btn\";\n const priorityStyles: { [key in Priority]: string } = {\n primary: `${classPrefix}--primary`,\n secondary: `${classPrefix}--secondary`,\n tertiary: `${classPrefix}--tertiary`,\n none: \"\",\n };\n const sizeStyles: { [key in Size]: string } = {\n large: `${classPrefix}--large`,\n small: `${classPrefix}--small`,\n };\n const splitStyles: { [key in Split]: string } = {\n start: `${classPrefix}--split-start`,\n end: `${classPrefix}--split-end`,\n };\n const isDestructive = variant === \"destructive\";\n const isForm = variant === \"form\";\n const className = classNames(\n classPrefix,\n extraClasses,\n priorityStyles[isForm || borderless ? \"none\" : priority],\n size && sizeStyles[size],\n split && splitStyles[split],\n isDestructive && `${classPrefix}--destructive`,\n isForm && `${classPrefix}--form`,\n transparent && `${classPrefix}--transparent`,\n fluid && `${classPrefix}--fluid`,\n truncate && `${classPrefix}--truncated`,\n borderless && `${classPrefix}--borderless`,\n fixedHeight &&\n (size && sizeStyles[size]\n ? `${sizeStyles[size]}-fixed-height`\n : `${classPrefix}--fixed-height`),\n );\n\n const bodyContent = (() => {\n switch (bodyState) {\n case \"loading\":\n return (\n <span className=\"btn__cell\">\n {/* TODO: Replace with <EvoProgressSpinner /> when available */}\n <span>Loading...</span>\n </span>\n );\n case \"expand\":\n return (\n <span className=\"btn__cell\">\n <span className=\"btn__text\">{children}</span>\n {/* TODO: Replace with <EvoIconChevronDown16 /> when available */}\n <span>▼</span>\n </span>\n );\n default:\n return children;\n }\n })();\n\n const ariaLive = bodyState === \"loading\" ? \"polite\" : undefined;\n\n const keyDownHandler = (\n event: KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>,\n ) => {\n onKeyDown?.(\n event as KeyboardEvent<HTMLButtonElement> &\n KeyboardEvent<HTMLAnchorElement>,\n );\n if (event.key === \"Escape\" && !disabled && onEscape) {\n onEscape(\n event as KeyboardEvent<HTMLButtonElement> &\n KeyboardEvent<HTMLAnchorElement>,\n );\n }\n };\n\n if (href) {\n return (\n <a\n {...(rest as React.ComponentProps<\"a\">)}\n className={className}\n href={disabled ? undefined : href}\n onKeyDown={keyDownHandler}\n aria-live={ariaLive}\n >\n {bodyContent}\n </a>\n );\n }\n\n return (\n <button\n {...(rest as React.ComponentProps<\"button\">)}\n disabled={disabled}\n aria-disabled={partiallyDisabled ? \"true\" : undefined}\n aria-live={ariaLive}\n className={className}\n onKeyDown={keyDownHandler}\n >\n {bodyContent}\n </button>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;AAcM,SAAU,UACd,OAA4C;AAE5C,QAAM,EACJ,WAAW,aACX,UAAU,YACV,MACA,WACA,OACA,cAAc,OACd,QAAQ,OACR,UACA,mBACA,UACA,WACA,UACA,WAAW,OACX,MACA,WAAW,cACX,YACA,aACA,GAAG,KAAA,IACD;AACJ,QAAM,cAAc,OAAO,aAAa;AACxC,QAAM,iBAAgD;AAAA,IACpD,SAAS,GAAG,WAAW;AAAA,IACvB,WAAW,GAAG,WAAW;AAAA,IACzB,UAAU,GAAG,WAAW;AAAA,IACxB,MAAM;AAAA,EAAA;AAER,QAAM,aAAwC;AAAA,IAC5C,OAAO,GAAG,WAAW;AAAA,IACrB,OAAO,GAAG,WAAW;AAAA,EAAA;AAEvB,QAAM,cAA0C;AAAA,IAC9C,OAAO,GAAG,WAAW;AAAA,IACrB,KAAK,GAAG,WAAW;AAAA,EAAA;AAErB,QAAM,gBAAgB,YAAY;AAClC,QAAM,SAAS,YAAY;AAC3B,QAAM,YAAY,WAChB,aACA,cACA,eAAe,UAAU,aAAa,SAAS,QAAQ,GACvD,QAAQ,WAAW,IAAI,GACvB,SAAS,YAAY,KAAK,GAC1B,iBAAiB,GAAG,WAAW,iBAC/B,UAAU,GAAG,WAAW,UACxB,eAAe,GAAG,WAAW,iBAC7B,SAAS,GAAG,WAAW,WACvB,YAAY,GAAG,WAAW,eAC1B,cAAc,GAAG,WAAW,gBAC5B,gBACG,QAAQ,WAAW,IAAI,IACpB,GAAG,WAAW,IAAI,CAAC,kBACnB,GAAG,WAAW,iBAAiB;AAGvC,QAAM,eAAe,MAAK;AACxB,YAAQ,WAAA;AAAA,MACN,KAAK;AACH,eACEA,cAAM,WAAU,aAAW,UAEzBA,IAAA,QAAA,EAAA,UAAA,aAAA,CAAA,GAAuB;AAAA,MAG7B,KAAK;AACH,eACEC,KAAA,QAAA,EAAM,WAAU,wBACdD,IAAA,QAAA,EAAM,WAAU,uBAAqB,GAErCA,IAAA,QAAA,EAAA,UAAA,KAAA,CAAc,GAAA;AAAA,MAGpB;AACE,eAAO;AAAA,IAAA;AAAA,EAEb,GAAA;AAEA,QAAM,WAAW,cAAc,YAAY,WAAW;AAEtD,QAAM,iBAAiB,CACrB,UACE;AACF,gBACE,KACkC;AAEpC,QAAI,MAAM,QAAQ,YAAY,CAAC,YAAY,UAAU;AACnD,eACE,KACkC;AAAA,IAEtC;AAAA,EACF;AAEA,MAAI,MAAM;AACR,WACEA,IAAA,KAAA,EAAA,GACO,MACL,WACA,MAAM,WAAW,SAAY,MAC7B,WAAW,gBAAc,aACd,UAAQ,UAElB,aAAW;AAAA,EAGlB;AAEA,SACEA,IAAA,UAAA,EAAA,GACO,MACL,UAAkB,iBACH,oBAAoB,SAAS,QAAS,aAC1C,UACX,WACA,WAAW,gBAAc,UAExB,aAAW;AAGlB;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/evo-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,YAAY,EACV,cAAc,EACd,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,GACN,MAAM,SAAS,CAAC"}
|
|
@@ -1,36 +1,31 @@
|
|
|
1
1
|
import type { ComponentProps, KeyboardEvent } from "react";
|
|
2
|
-
|
|
3
2
|
export type Priority = "primary" | "secondary" | "tertiary" | "none";
|
|
4
3
|
export type Variant = "standard" | "destructive" | "form";
|
|
5
4
|
export type Size = "small" | "large";
|
|
6
5
|
export type BodyState = "loading" | "expand" | "reset" | "none";
|
|
7
6
|
export type Split = "start" | "end";
|
|
8
|
-
|
|
9
7
|
type BaseButtonProps = {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
8
|
+
fluid?: boolean;
|
|
9
|
+
partiallyDisabled?: boolean;
|
|
10
|
+
truncate?: boolean;
|
|
11
|
+
priority?: Priority;
|
|
12
|
+
variant?: Variant;
|
|
13
|
+
size?: Size;
|
|
14
|
+
bodyState?: BodyState;
|
|
15
|
+
split?: Split;
|
|
16
|
+
transparent?: boolean;
|
|
17
|
+
borderless?: boolean;
|
|
18
|
+
fixedHeight?: boolean;
|
|
21
19
|
};
|
|
22
|
-
|
|
23
|
-
export type AnchorButtonProps = ComponentProps<"a"> &
|
|
24
|
-
BaseButtonProps & {
|
|
20
|
+
export type AnchorButtonProps = ComponentProps<"a"> & BaseButtonProps & {
|
|
25
21
|
href: string;
|
|
26
22
|
onEscape?: (e: KeyboardEvent<HTMLAnchorElement>) => void;
|
|
27
23
|
disabled?: boolean;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
export type NativeButtonProps = ComponentProps<"button"> &
|
|
31
|
-
BaseButtonProps & {
|
|
24
|
+
};
|
|
25
|
+
export type NativeButtonProps = ComponentProps<"button"> & BaseButtonProps & {
|
|
32
26
|
href?: never;
|
|
33
27
|
onEscape?: (e: KeyboardEvent<HTMLButtonElement>) => void;
|
|
34
|
-
|
|
35
|
-
|
|
28
|
+
};
|
|
36
29
|
export type EvoButtonProps = AnchorButtonProps | NativeButtonProps;
|
|
30
|
+
export {};
|
|
31
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/evo-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3D,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AACrE,MAAM,MAAM,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,MAAM,CAAC;AAC1D,MAAM,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC;AACrC,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAChE,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,KAAK,CAAC;AAEpC,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,GAAG,CAAC,GACjD,eAAe,GAAG;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,GACtD,eAAe,GAAG;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,iBAAiB,GAAG,iBAAiB,CAAC"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AACxD,YAAY,EACV,cAAc,EACd,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,GACN,MAAM,cAAc,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@evo-web/react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"React",
|
|
@@ -24,6 +24,9 @@
|
|
|
24
24
|
"default": "./dist/index.js"
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
|
+
"files": [
|
|
28
|
+
"dist"
|
|
29
|
+
],
|
|
27
30
|
"scripts": {
|
|
28
31
|
"build": "npm run type:check && npm run test && vite build",
|
|
29
32
|
"build:storybook": "storybook build -o ./_site/evo-react/$(git branch --show-current)",
|
package/.prettierignore
DELETED
package/.storybook/main.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
export default {
|
|
2
|
-
stories: ["../src/**/*.stories.tsx"],
|
|
3
|
-
typescript: {
|
|
4
|
-
reactDocgen: "react-docgen-typescript",
|
|
5
|
-
reactDocgenTypescriptOptions: {
|
|
6
|
-
compilerOptions: {
|
|
7
|
-
allowSyntheticDefaultImports: true,
|
|
8
|
-
esModuleInterop: true,
|
|
9
|
-
},
|
|
10
|
-
},
|
|
11
|
-
},
|
|
12
|
-
addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
|
|
13
|
-
|
|
14
|
-
framework: {
|
|
15
|
-
name: "@storybook/react-vite",
|
|
16
|
-
options: {
|
|
17
|
-
builder: {
|
|
18
|
-
viteConfigPath: "./.storybook/vite.config.js",
|
|
19
|
-
},
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
|
|
23
|
-
docs: {
|
|
24
|
-
defaultName: "Documentation",
|
|
25
|
-
autodocs: "tag",
|
|
26
|
-
},
|
|
27
|
-
|
|
28
|
-
core: {
|
|
29
|
-
disableTelemetry: true,
|
|
30
|
-
disableWhatsNewNotifications: true,
|
|
31
|
-
},
|
|
32
|
-
};
|
package/.storybook/manager.ts
DELETED
package/.storybook/preview.tsx
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import React, { StrictMode } from "react";
|
|
2
|
-
|
|
3
|
-
import "@ebay/skin/dist/tokens/evo-core.css";
|
|
4
|
-
import "@ebay/skin/dist/tokens/evo-light.css";
|
|
5
|
-
import "@ebay/skin/dist/tokens/evo-dark.css";
|
|
6
|
-
import "@ebay/skin/dist/global/global.css";
|
|
7
|
-
import "@ebay/skin/dist/utility/utility.css";
|
|
8
|
-
import "@ebay/skin/marketsans";
|
|
9
|
-
|
|
10
|
-
export default {
|
|
11
|
-
tags: ["autodocs"],
|
|
12
|
-
decorators: [
|
|
13
|
-
(Story) => (
|
|
14
|
-
<StrictMode>
|
|
15
|
-
{/* EvoIconProvider will be added when icon components are created */}
|
|
16
|
-
<Story />
|
|
17
|
-
</StrictMode>
|
|
18
|
-
),
|
|
19
|
-
],
|
|
20
|
-
globals: {
|
|
21
|
-
a11y: {
|
|
22
|
-
// Disable automatic a11y runs as it impacts performance of storybook.
|
|
23
|
-
// This started after a change introduced in v8.5.0 that runs the axe-core tests
|
|
24
|
-
// in sequence instead of parallel.
|
|
25
|
-
manual: true,
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
parameters: {
|
|
29
|
-
controls: { expanded: true },
|
|
30
|
-
docs: {
|
|
31
|
-
codePanel: true,
|
|
32
|
-
},
|
|
33
|
-
options: {
|
|
34
|
-
storySort: {
|
|
35
|
-
order: [
|
|
36
|
-
"buttons",
|
|
37
|
-
"data display",
|
|
38
|
-
"dialogs",
|
|
39
|
-
"form input",
|
|
40
|
-
"graphics & icons",
|
|
41
|
-
"media",
|
|
42
|
-
"navigation & disclosure",
|
|
43
|
-
"notices & tips",
|
|
44
|
-
"progress",
|
|
45
|
-
"building blocks",
|
|
46
|
-
],
|
|
47
|
-
},
|
|
48
|
-
},
|
|
49
|
-
},
|
|
50
|
-
};
|
package/.storybook/theme.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { create } from "storybook/theming";
|
|
2
|
-
|
|
3
|
-
export default create({
|
|
4
|
-
base: "light",
|
|
5
|
-
|
|
6
|
-
// Typography
|
|
7
|
-
fontBase: '"Market Sans", Arial',
|
|
8
|
-
colorSecondary: "#97BB59",
|
|
9
|
-
appBg: "#F8FBF8",
|
|
10
|
-
|
|
11
|
-
// Brand assets
|
|
12
|
-
brandTitle: "EVO React",
|
|
13
|
-
brandUrl: "/",
|
|
14
|
-
brandImage:
|
|
15
|
-
"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/EBay_logo.svg/1280px-EBay_logo.svg.png",
|
|
16
|
-
brandTarget: "/",
|
|
17
|
-
});
|
package/CHANGELOG.md
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
# @evo-web/react
|
|
2
|
-
|
|
3
|
-
## 0.0.1
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
- [#525](https://github.com/eBay/evo-web/pull/525) [`4b00ffc`](https://github.com/eBay/evo-web/commit/4b00ffcaf64291002926bb0f43526234f6315396) Thanks [@HenriqueLimas](https://github.com/HenriqueLimas)! - feat(evo-react): add EvoButton component
|
|
8
|
-
|
|
9
|
-
## Unreleased
|
|
10
|
-
|
|
11
|
-
Initial package setup
|
package/eslint.config.js
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import eslint from "@eslint/js";
|
|
2
|
-
import jsxA11y from "eslint-plugin-jsx-a11y";
|
|
3
|
-
import react from "eslint-plugin-react";
|
|
4
|
-
import reactHooks from "eslint-plugin-react-hooks";
|
|
5
|
-
import storybook from "eslint-plugin-storybook";
|
|
6
|
-
import vitest from "@vitest/eslint-plugin";
|
|
7
|
-
import globals from "globals";
|
|
8
|
-
import tseslint from "typescript-eslint";
|
|
9
|
-
|
|
10
|
-
export default tseslint.config(
|
|
11
|
-
{
|
|
12
|
-
ignores: [
|
|
13
|
-
"dist",
|
|
14
|
-
"scripts",
|
|
15
|
-
".storybook",
|
|
16
|
-
"node_modules",
|
|
17
|
-
"_site",
|
|
18
|
-
"coverage",
|
|
19
|
-
],
|
|
20
|
-
},
|
|
21
|
-
eslint.configs.recommended,
|
|
22
|
-
...tseslint.configs.recommended,
|
|
23
|
-
...storybook.configs["flat/recommended"],
|
|
24
|
-
react.configs.flat.recommended,
|
|
25
|
-
jsxA11y.flatConfigs.recommended,
|
|
26
|
-
{
|
|
27
|
-
languageOptions: {
|
|
28
|
-
...react.configs.flat.recommended.languageOptions,
|
|
29
|
-
...jsxA11y.flatConfigs.recommended.languageOptions,
|
|
30
|
-
globals: {
|
|
31
|
-
...globals.browser,
|
|
32
|
-
...globals.node,
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
settings: {
|
|
36
|
-
react: {
|
|
37
|
-
version: "detect",
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
|
-
|
|
41
|
-
plugins: {
|
|
42
|
-
"react-hooks": reactHooks,
|
|
43
|
-
vitest,
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
rules: {
|
|
47
|
-
"no-console": ["error", { allow: ["error", "warn"] }],
|
|
48
|
-
"react/prop-types": "off",
|
|
49
|
-
"react/react-in-jsx-scope": "off",
|
|
50
|
-
...vitest.configs.recommended.rules,
|
|
51
|
-
},
|
|
52
|
-
},
|
|
53
|
-
);
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps } from "react";
|
|
2
|
-
|
|
3
|
-
type ButtonType = "cta" | "fake" | "expand" | "default";
|
|
4
|
-
type Props = ComponentProps<"span"> & {
|
|
5
|
-
type?: ButtonType;
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
const classPrefixes: { [key in ButtonType]: string } = {
|
|
9
|
-
cta: "cta-",
|
|
10
|
-
fake: "fake-",
|
|
11
|
-
expand: "expand-",
|
|
12
|
-
default: "",
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
export function EvoButtonCell({ type = "default", children, ...rest }: Props) {
|
|
16
|
-
return (
|
|
17
|
-
<span className={`${classPrefixes[type]}btn__cell`} {...rest}>
|
|
18
|
-
{children}
|
|
19
|
-
</span>
|
|
20
|
-
);
|
|
21
|
-
}
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
2
|
-
import { EvoButton } from "./button";
|
|
3
|
-
import { EvoButtonCell } from "./button-cell";
|
|
4
|
-
|
|
5
|
-
const meta: Meta<typeof EvoButton> = {
|
|
6
|
-
title: "Components/EvoButton",
|
|
7
|
-
component: EvoButton,
|
|
8
|
-
tags: ["autodocs"],
|
|
9
|
-
parameters: {
|
|
10
|
-
docs: {
|
|
11
|
-
description: {
|
|
12
|
-
component: `
|
|
13
|
-
A flexible button component that can render as either a \`<button>\` or \`<a>\` element based on the \`href\` prop.
|
|
14
|
-
|
|
15
|
-
## Usage
|
|
16
|
-
|
|
17
|
-
\`\`\`tsx
|
|
18
|
-
import { EvoButton } from "@evo-web/react";
|
|
19
|
-
\`\`\`
|
|
20
|
-
`,
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
argTypes: {
|
|
25
|
-
priority: {
|
|
26
|
-
control: "select",
|
|
27
|
-
options: ["primary", "secondary", "tertiary", "none"],
|
|
28
|
-
description: "Button priority level",
|
|
29
|
-
},
|
|
30
|
-
variant: {
|
|
31
|
-
control: "select",
|
|
32
|
-
options: ["standard", "destructive", "form"],
|
|
33
|
-
description: "Button variant style",
|
|
34
|
-
},
|
|
35
|
-
size: {
|
|
36
|
-
control: "select",
|
|
37
|
-
options: ["small", "large"],
|
|
38
|
-
description: "Button size",
|
|
39
|
-
},
|
|
40
|
-
bodyState: {
|
|
41
|
-
control: "select",
|
|
42
|
-
options: ["loading", "expand", "reset", "none"],
|
|
43
|
-
description: "Button body state",
|
|
44
|
-
},
|
|
45
|
-
split: {
|
|
46
|
-
control: "select",
|
|
47
|
-
options: ["start", "end"],
|
|
48
|
-
description: "Split button position",
|
|
49
|
-
},
|
|
50
|
-
fluid: {
|
|
51
|
-
control: "boolean",
|
|
52
|
-
description: "Full width button",
|
|
53
|
-
},
|
|
54
|
-
disabled: {
|
|
55
|
-
control: "boolean",
|
|
56
|
-
description: "Disabled state",
|
|
57
|
-
},
|
|
58
|
-
partiallyDisabled: {
|
|
59
|
-
control: "boolean",
|
|
60
|
-
description: "Partially disabled (aria-disabled)",
|
|
61
|
-
},
|
|
62
|
-
transparent: {
|
|
63
|
-
control: "boolean",
|
|
64
|
-
description: "Transparent background",
|
|
65
|
-
},
|
|
66
|
-
borderless: {
|
|
67
|
-
control: "boolean",
|
|
68
|
-
description: "No border",
|
|
69
|
-
},
|
|
70
|
-
fixedHeight: {
|
|
71
|
-
control: "boolean",
|
|
72
|
-
description: "Fixed height",
|
|
73
|
-
},
|
|
74
|
-
truncate: {
|
|
75
|
-
control: "boolean",
|
|
76
|
-
description: "Truncate text with ellipsis",
|
|
77
|
-
},
|
|
78
|
-
href: {
|
|
79
|
-
control: "text",
|
|
80
|
-
description: "Link URL (renders as anchor)",
|
|
81
|
-
},
|
|
82
|
-
children: {
|
|
83
|
-
control: "text",
|
|
84
|
-
description: "Button text content",
|
|
85
|
-
},
|
|
86
|
-
},
|
|
87
|
-
args: {
|
|
88
|
-
priority: "primary",
|
|
89
|
-
variant: "standard",
|
|
90
|
-
children: "Button",
|
|
91
|
-
},
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
export default meta;
|
|
95
|
-
|
|
96
|
-
type Story = StoryObj<typeof EvoButton>;
|
|
97
|
-
|
|
98
|
-
export const Default: Story = {
|
|
99
|
-
args: {
|
|
100
|
-
children: "Button",
|
|
101
|
-
},
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
export const WithButtonCell: Story = {
|
|
105
|
-
render: (args) => (
|
|
106
|
-
<EvoButton {...args}>
|
|
107
|
-
<EvoButtonCell style={{ justifyContent: "space-between" }}>
|
|
108
|
-
<span>Select</span>
|
|
109
|
-
<span>Any</span>
|
|
110
|
-
</EvoButtonCell>
|
|
111
|
-
</EvoButton>
|
|
112
|
-
),
|
|
113
|
-
};
|