@ebay/ebayui-core-react NPM

ebayui-core-react

eBayUI React components

Demo

Requirements

Node.js (v16.14+)
React (v16.8+)
eBay Skin (v14)

eBayUI Components

ebay-alert-dialog
ebay-confirm-dialog
ebay-badge
ebay-breadcrumbs
ebay-button
ebay-carousel (in progress...)
ebay-checkbox
ebay-combobox
ebay-combobox-readonly
ebay-cta-button
ebay-details
ebay-drawer-dialog
ebay-eek
ebay-expand-button
ebay-fullscreen-dialog
ebay-fake-menu (in progress...)
ebay-fake-menu-button (in progress...)
ebay-fake-tabs
ebay-floating-label
ebay-field
ebay-filter (in progress...)
ebay-filter-menu
ebay-filter-menu-button
ebay-icon
ebay-infotip
ebay-inline-notice
ebay-legacy-floating-label
ebay-lightbox-dialog
ebay-listbox-button
ebay-menu
ebay-menu-button (in progress...)
ebay-page-notice
ebay-pagination
ebay-panel-dialog
ebay-progress-bar
ebay-progress-spinner
ebay-progress-stepper
ebay-radio
ebay-section-title
ebay-section-notice
ebay-select
ebay-snackbar-dialog
ebay-switch
ebay-signal
ebay-tab
ebay-textbox
ebay-toast-dialog
ebay-tooltip
ebay-tourtip
ebay-video
ebay-window-notice

Progress overview

Getting Started

These react components are available as @ebay/ebayui-core-react package on NPM.

Use npm or yarn to add the package dependency to your project:

yarn add @ebay/ebayui-core-react

for quick development/POC

import { EbayTextbox, EbayButton } from '@ebay/ebayui-core-react'

<EbayTextbox placeholder="Enter text here" />
<EbayButton>Submit</EbayButton>

for smaller bundle size

import { EbayTextbox } from '@ebay/ebayui-core-react/ebay-textbox'
import { EbayButton } from '@ebay/ebayui-core-react/ebay-button'

<EbayTextbox placeholder="Enter text here" />
<EbayButton>Submit</EbayButton>

Notes

If you render children components dynamically and don't want to get React key warnings then provide a key:

<EbayParentComponent>
    {items.map((item, index) => <EbayChildComponent key={index}>{item}</EbayChildComponent>)}
</EbayParentComponent>

IE-10/11 (deprecated)

You will need polyfills for IE. Recommended approach is using core-js with or without babel.

To manually use polyfills you need to import them:

import 'core-js/stable/object/values'

Object.values({ a: 'Hello' }).map(console.log)

But we suggest to use polyfills automatically by editing your .babelrc:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": "3",
                "targets": {
                    "chrome": "63",
                    "safari": "12",
                    "ios": "12",
                    "edge": "18",
                    "ie": "11"
                }
            }
        ]
    ]
}

targets can also be something like "> 0.2%, not dead"

Issues

Create an issue on github

Contributing

Write an email to tmanyanov@ebay.com

How to update icons on `skin` changes

This will update EbaySvg and EbayIcon components:

yarn update-icons

Quick guidance for contribution:

Create a feature branch git checkout -b features/new-component
yarn install to install dependencies
Add documentations:
- README.md on component level
- Unit test
- Storybook file for snapshot tests and also component showcase/demo
Make your changes pass the:
- yarn lint. You can do yarn lint --fix to automatically fix small lint issues (e.g indentation, whitespace, semicolons, ...)
- yarn test. Do yarn test -u to automatically the snapshot tests.

Requirements for new component

If you implement a new component, make sure that it complies with eBay UI guidelines:

Skin
MIND pattern for accessibility

One way to comply those guidelines is to implement your new component as similiar as possible with the Marko eBayUI Core, or port the Marko implementation to React. This means the new component should:

Output the same HTML structure
Have similiar behaviour (e.g open menu dropdown on click and keyboard)
Support the same attributes (e.g ebay-breadcrumb a11y-heading-text, or ebay-button priority)
Support the same events (e.g ebay-select select-change). Since React does not use event emitter (unlike Marko), one can implement this as a prop with Function.