Repository files navigation

eBayUI React components

Demo

• Node.js (v18.13)
• React (v16.8+)
• eBay Skin (v16)

• ebay-3d-viewer
• ebay-alert-dialog
• ebay-confirm-dialog
• ebay-badge
• ebay-breadcrumbs
• ebay-button
• ebay-calendar
• ebay-carousel
• ebay-checkbox
• ebay-combobox
• ebay-confirm-dialog
• ebay-cta-button
• ebay-date-textbox
• ebay-details
• ebay-drawer-dialog
• ebay-eek
• ebay-fullscreen-dialog
• ebay-fake-link
• ebay-fake-menu
• ebay-fake-menu-button
• ebay-fake-tabs
• ebay-field
• ebay-filter (in progress...)
• ebay-filter-menu
• ebay-filter-menu-button
• ebay-icon-button
• ebay-icon
• ebay-infotip
• ebay-inline-notice
• ebay-lightbox-dialog
• ebay-line-chart
• ebay-listbox-button
• ebay-listbox
• ebay-menu
• ebay-menu-button
• 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-signal
• ebay-snackbar-dialog
• ebay-split-button
• ebay-star-rating
• ebay-star-rating-select
• ebay-switch
• ebay-tabs
• ebay-textbox
• ebay-toast-dialog
• ebay-tooltip
• ebay-tourtip
• ebay-tri-state-checkbox
• ebay-video

These react components are available as@ebay/ui-core-react package onNPM.

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

yarn add @ebay/ui-core-react

import{EbayTextbox,EbayButton}from'@ebay/ui-core-react'<EbayTextboxplaceholder="Enter text here"/><EbayButton>Submit</EbayButton>

import{EbayTextbox}from'@ebay/ui-core-react/ebay-textbox'import{EbayButton}from'@ebay/ui-core-react/ebay-button'<EbayTextboxplaceholder="Enter text here"/><EbayButton>Submit</EbayButton>

If you render children components dynamically and don't want to get Reactkey warnings then provide akey:

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

You will need polyfills for IE. Recommended approach is usingcore-js with or withoutbabel.

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":87,"Firefox":78,"Safari":11,"Edge":103,"Opera":89,"ChromeAndroid":83,"ios_saf":12                }            }        ]    ]}

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

Create an issue on github

Write an email totmanyanov@ebay.com

This will updateEbaySvg andEbayIcon components:

yarn update-icons

• Create a feature branchgit 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 doyarn lint --fix to automatically fix small lint issues (e.g indentation, whitespace, semicolons, ...)
  • yarn test. Doyarn test -u to automatically the snapshot tests.

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 MarkoeBayUI 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-breadcrumba11y-heading-text, or ebay-buttonpriority)
• Support the same events (e.g ebay-selectselect-change). Since React does not use event emitter (unlike Marko), one can implement this as a prop with Function.

@ebay/ui-core-react

@ebay/ebayui-core-react

ebayui-core-react