@evo-web/react 0.0.0

package/.prettierignore

@@ -0,0 +1,3 @@
+# Autogenerated files
+src/evo-icon/icons/*
+src/evo-icon/types.ts

package/.storybook/main.js

@@ -0,0 +1,32 @@
+export default {
+  stories: ["../src/**/*.stories.tsx"],
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: true,
+        esModuleInterop: true,
+      },
+    },
+  },
+  addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
+
+  framework: {
+    name: "@storybook/react-vite",
+    options: {
+      builder: {
+        viteConfigPath: "./.storybook/vite.config.js",
+      },
+    },
+  },
+
+  docs: {
+    defaultName: "Documentation",
+    autodocs: "tag",
+  },
+
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+};

package/.storybook/manager-head.html

@@ -0,0 +1,6 @@
+<!-- hide obnoxious update popup -->
+<style>
+  [href="/?path=/settings/about"] {
+    display: none !important;
+  }
+</style>

package/.storybook/manager.ts

@@ -0,0 +1,4 @@
+import { addons } from "storybook/manager-api";
+import theme from "./theme";
+
+addons.setConfig({ theme });

package/.storybook/preview.tsx

@@ -0,0 +1,50 @@
+import React, { StrictMode } from "react";
+
+import "@ebay/skin/dist/tokens/evo-core.css";
+import "@ebay/skin/dist/tokens/evo-light.css";
+import "@ebay/skin/dist/tokens/evo-dark.css";
+import "@ebay/skin/dist/global/global.css";
+import "@ebay/skin/dist/utility/utility.css";
+import "@ebay/skin/marketsans";
+
+export default {
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <StrictMode>
+        {/* EvoIconProvider will be added when icon components are created */}
+        <Story />
+      </StrictMode>
+    ),
+  ],
+  globals: {
+    a11y: {
+      // Disable automatic a11y runs as it impacts performance of storybook.
+      // This started after a change introduced in v8.5.0 that runs the axe-core tests
+      // in sequence instead of parallel.
+      manual: true,
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+    docs: {
+      codePanel: true,
+    },
+    options: {
+      storySort: {
+        order: [
+          "buttons",
+          "data display",
+          "dialogs",
+          "form input",
+          "graphics & icons",
+          "media",
+          "navigation & disclosure",
+          "notices & tips",
+          "progress",
+          "building blocks",
+        ],
+      },
+    },
+  },
+};

package/.storybook/theme.ts

@@ -0,0 +1,17 @@
+import { create } from "storybook/theming";
+
+export default create({
+  base: "light",
+
+  // Typography
+  fontBase: '"Market Sans", Arial',
+  colorSecondary: "#97BB59",
+  appBg: "#F8FBF8",
+
+  // Brand assets
+  brandTitle: "EVO React",
+  brandUrl: "/",
+  brandImage:
+    "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/EBay_logo.svg/1280px-EBay_logo.svg.png",
+  brandTarget: "/",
+});

package/.storybook/vite.config.js

@@ -0,0 +1,3 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({});

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# @evo-web/react
+
+## Unreleased
+
+Initial package setup

package/README.md

@@ -0,0 +1,76 @@
+# @evo-web/react
+
+Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.
+
+## Status: Pre-release
+
+This package is currently in active development. Component migration from `@ebay/ui-core-react` is in progress.
+
+## Requirements
+
+- Node.js v20.12.2+
+- React 19+
+- eBay Skin 19+
+- **ESM-compatible build setup** (Vite, Webpack 5+, Rollup, etc.)
+
+## Installation
+
+```bash
+npm install @evo-web/react @ebay/skin react react-dom
+```
+
+## ESM-Only Notice
+
+This package is distributed as **ESM-only**. Your project must support ECMAScript modules:
+
+If you need CommonJS support, continue using `@ebay/ui-core-react`.
+
+## CSS Import
+
+You must import the required eBay Skin CSS in your application:
+
+```typescript
+import "@ebay/skin/marketsans.css";
+import "@ebay/skin/tokens.css";
+import "@ebay/skin/global.css";
+```
+
+## Usage
+
+```tsx
+import { EvoButton } from "@evo-web/react";
+```
+
+## Component Naming
+
+All components use the `Evo*` prefix (e.g., `EvoButton`, `EvoAccordion`).
+
+## Key Differences from @ebay/ui-core-react
+
+| Feature          | @ebay/ui-core-react    | @evo-web/react    |
+| ---------------- | ---------------------- | ----------------- |
+| Output Format    | CommonJS               | ESM               |
+| Tree-shaking     | component path imports | Optimal           |
+| Component Naming | `Ebay*`                | `Evo*`            |
+| React Version    | 16.8+, 18+, 19+        | 19+               |
+| Ref Handling     | `forwardRef`           | Native (React 19) |
+| TypeScript       | Partial strict mode    | Full strict mode  |
+| Makeup.js        | External               | Bundled           |
+
+## Migration Guide
+
+Documentation will be provided when components are available. Migration will involve:
+
+- Component renames: `EbayButton` → `EvoButton`
+- Removing `forwardRef` wrappers (React 19 native ref support)
+- Icon provider rename: `EbayIconProvider` → `EvoIconProvider`
+- Flag icons: Use Skin class-based sprites instead of SVG components
+- Import paths: Single entry point with optimal tree-shaking
+
+## Development
+
+See [Contributing Guide](../../CONTRIBUTING.md) for development setup.
+
+## License
+
+MIT

package/eslint.config.js

@@ -0,0 +1,53 @@
+import eslint from "@eslint/js";
+import jsxA11y from "eslint-plugin-jsx-a11y";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import storybook from "eslint-plugin-storybook";
+import vitest from "@vitest/eslint-plugin";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  {
+    ignores: [
+      "dist",
+      "scripts",
+      ".storybook",
+      "node_modules",
+      "_site",
+      "coverage",
+    ],
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...storybook.configs["flat/recommended"],
+  react.configs.flat.recommended,
+  jsxA11y.flatConfigs.recommended,
+  {
+    languageOptions: {
+      ...react.configs.flat.recommended.languageOptions,
+      ...jsxA11y.flatConfigs.recommended.languageOptions,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+
+    plugins: {
+      "react-hooks": reactHooks,
+      vitest,
+    },
+
+    rules: {
+      "no-console": ["error", { allow: ["error", "warn"] }],
+      "react/prop-types": "off",
+      "react/react-in-jsx-scope": "off",
+      ...vitest.configs.recommended.rules,
+    },
+  },
+);

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@evo-web/react",
+  "version": "0.0.0",
+  "description": "Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.",
+  "keywords": [
+    "React",
+    "eBay Evo",
+    "evo-web",
+    "components",
+    "design-system"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eBay/evo-web",
+    "directory": "packages/evo-react"
+  },
+  "license": "MIT",
+  "sideEffects": [
+    "./**/*.css"
+  ],
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "npm run type:check && npm run test && vite build",
+    "build:storybook": "storybook build -o ./_site/evo-react/$(git branch --show-current)",
+    "deploy": "exit 0",
+    "format": "eslint . --fix && prettier . --write --log-level=warn",
+    "lint": "eslint . && prettier . --check --log-level=warn",
+    "release": "npm run build",
+    "start": "storybook dev -p 9001",
+    "test": "vitest --browser.headless --passWithNoTests",
+    "type:check": "tsc --noEmit",
+    "update-icons": "exit 0",
+    "version": "npm run update-icons && git add -A src"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.27.16",
+    "classnames": "^2.5.1",
+    "makeup-active-descendant": "^0.7.10",
+    "makeup-expander": "^0.11.9",
+    "makeup-floating-label": "^0.4.9",
+    "makeup-focusables": "^0.4.5",
+    "makeup-keyboard-trap": "^0.5.7",
+    "makeup-prevent-scroll-keys": "^0.3.4",
+    "makeup-roving-tabindex": "^0.7.7",
+    "makeup-screenreader-trap": "^0.5.6",
+    "makeup-typeahead": "^0.3.3",
+    "react-remove-scroll": "^2.7.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/browser-playwright": "^4.0.18",
+    "vitest-browser-react": "^2.0.4"
+  },
+  "peerDependencies": {
+    "@ebay/skin": "^19",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export const VERSION = "0.0.0";

package/test.setup.ts

@@ -0,0 +1,6 @@
+import "@ebay/skin/dist/tokens/evo-core.css";
+import "@ebay/skin/dist/tokens/evo-light.css";
+import "@ebay/skin/dist/tokens/evo-dark.css";
+import "@ebay/skin/dist/global/global.css";
+import "@ebay/skin/dist/utility/utility.css";
+import "@ebay/skin/marketsans";

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["./**/*"]
+}

package/tsconfig.prod.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["./**/__tests__/*", "./**/*.stories.tsx"],
+  "include": ["./src/**/*"]
+}

package/vite.config.js

@@ -0,0 +1,85 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { nodeExternals } from "rollup-plugin-node-externals";
+import typescript from "@rollup/plugin-typescript";
+import { playwright } from "@vitest/browser-playwright";
+
+const isCI = !!process.env.CI;
+
+export default defineConfig({
+  plugins: [
+    react(),
+    nodeExternals({
+      // Externalize peer dependencies but bundle makeup-js libraries
+      include: [/^makeup-/],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: "./src/index.ts",
+      formats: ["es"],
+      fileName: "index",
+    },
+    rollupOptions: {
+      output: {
+        banner: `"use client";\n`,
+      },
+      plugins: [
+        typescript({
+          // We use a different tsconfig for building so vite doesn't generate types for tests,
+          // but we still want to have typescript checking for test files.
+          tsconfig: "./tsconfig.prod.json",
+          declaration: true,
+          declarationMap: true,
+          outDir: "./dist",
+        }),
+      ],
+    },
+    sourcemap: true,
+    minify: false,
+    target: "es2020",
+  },
+  test: {
+    globals: true,
+    pool: "forks",
+    coverage: {
+      enabled: isCI,
+      provider: "v8",
+      reporter: ["json-summary", "html", "cobertura", "lcov"],
+      include: ["src/**/*.{ts,tsx}"],
+      exclude: [
+        "src/**/test/**",
+        "src/**/*.stories.tsx",
+        "src/**/*.d.ts",
+        "src/index.ts",
+      ],
+    },
+    projects: [
+      {
+        extends: true,
+        test: {
+          name: "browser",
+          browser: {
+            enabled: true,
+            provider: playwright(),
+            headless: true,
+            instances: [
+              {
+                browser: "chromium",
+              },
+            ],
+          },
+          include: ["src/**/test.browser.{ts,tsx}"],
+        },
+      },
+      {
+        extends: true,
+        test: {
+          name: "server",
+          environment: "node",
+          include: ["src/**/test.server.{ts,tsx}"],
+        },
+      },
+    ],
+  },
+});