search

eBay / ebayui-core-react

eBayUI React components
https://opensource.ebay.com/ebayui-core-react/main/
MIT License
38 stars 32 forks source link

Figma Code Connect #345

Open calebnance opened 6 months ago

calebnance commented 6 months ago

hey @HenriqueLimas

i think Stephen has already talked to you about this coming down the pipeline. please add anyone else to this PR that might need to be on here.

this is the first go at it, but i have mapped most if not all components to our DS library on figma. i wanted to get this in front of y'all so we can talk around it, and let me know of any changes needed. you can test this right now on designs that use our ds components, just make sure you're in dev mode.

also the more i looked at it; there are definitely different namings + how DS has structured their components vs how the React components are structured, so i did the best i could where things are not 1:1.

example when in dev mode:

Screenshot 2024-05-21 at 3 45 27 PM

i have also hooked up variant handling where i could:

checkbox with no label checkbox with label
Screenshot 2024-05-21 at 3 51 59 PM Screenshot 2024-05-21 at 3 51 51 PM
shpandian commented 6 months ago

@calebnance did we also go through SAFE review? if so can you attach a SAFE ticket in the PR description as well?

darkwebdev commented 3 months ago

@HenriqueLimas So is this for storybook or for figma? Looks like developers who look at designs in figma can use the generated code easily, right?

calebnance commented 3 months ago

@darkwebdev @HenriqueLimas

Screenshot 2024-09-05 at 3 03 43 PM

Basically it creates dynamic code snippets, taking the properties data available and injects where it should be in the code.

So as a designer, i set the title to: "Hello, this is a title"

Then as a developer, in Dev Mode, the code snippet has "Hello, this is a title" in the <EbayDialogHeader />