-
Notifications
You must be signed in to change notification settings - Fork 31
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Figma Code Connect #345
Open
calebnance
wants to merge
23
commits into
eBay:main
Choose a base branch
from
calebnance:cn-code-connect
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Figma Code Connect #345
Changes from 18 commits
Commits
Show all changes
23 commits
Select commit
Hold shift + click to select a range
7c9b4e2
feat: adding code connect base
calebnance 0987ec2
first go at figma.config for code connect
calebnance 6e034c4
added example files for component mapping
calebnance 10bcad1
starting to connect figma ds props with react component props
calebnance 976b342
added more mappings
calebnance 74ebd3f
fixed typos and spacing issues i found in readme
calebnance c1c68d2
added checkbox, radio, and switch
calebnance 7368608
ts-ignore for code connect files
calebnance 765b8dd
added required prop to Alert Dialog
calebnance c926b2b
fixed page notice issue
calebnance 265fe37
fixes markdown issue
calebnance f836072
added more mappings
calebnance e3f5a75
added Tourtip and Video mapping
calebnance 15bb3f6
added more components and variant overrides
calebnance 3cced0d
added section-title and signal with variants
calebnance a3c63d1
added pagination and progress-stepper
calebnance fc5b605
no longer needed
calebnance 1a227e1
updated button mappings
calebnance 5f42779
added publish/unpublish script for Figma Code Connect
calebnance acba902
Merge branch 'main' into cn-code-connect
darkwebdev fce104c
added code connect docs
calebnance 34ff1e2
updated readme
calebnance 91d6636
updated readme
calebnance File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -25,4 +25,4 @@ junit.xml | |
| .xo-resources.json | ||
| coverage | ||
| /.vscode | ||
| /storybook-static | ||
| /storybook-static | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| { | ||
| "codeConnect": { | ||
| "include": ["src/**/*.figma.tsx", "src/**/*.tsx"], | ||
| "exclude": ["test/**", "docs/**", "build/**"], | ||
|
|
||
| "react": { | ||
| "importPaths": { | ||
| "src/ebay-alert-dialog/*": "@ebay/ui-core-react/ebay-alert-dialog", | ||
| "src/ebay-badge/*": "@ebay/ui-core-react/ebay-badge", | ||
| "src/ebay-breadcrumbs/*": "@ebay/ui-core-react/ebay-breadcrumbs", | ||
| "src/ebay-button/*": "@ebay/ui-core-react/ebay-button", | ||
| "src/ebay-calendar/*": "@ebay/ui-core-react/ebay-calendar", | ||
| "src/ebay-checkbox/*": "@ebay/ui-core-react/ebay-checkbox", | ||
| "src/ebay-icon-button/*": "@ebay/ui-core-react/ebay-icon-button", | ||
| "src/ebay-page-notice/*": "@ebay/ui-core-react/ebay-page-notice", | ||
| "src/ebay-pagination/*": "@ebay/ui-core-react/ebay-pagination", | ||
| "src/ebay-progress-stepper/*": "@ebay/ui-core-react/ebay-progress-stepper", | ||
| "src/ebay-radio/*": "@ebay/ui-core-react/ebay-radio", | ||
| "src/ebay-select/*": "@ebay/ui-core-react/ebay-select", | ||
| "src/ebay-section-title/*": "@ebay/ui-core-react/ebay-section-title", | ||
| "src/ebay-signal/*": "@ebay/ui-core-react/ebay-signal", | ||
| "src/ebay-snackbar-dialog/*": "@ebay/ui-core-react/ebay-snackbar-dialog", | ||
| "src/ebay-switch/*": "@ebay/ui-core-react/ebay-switch", | ||
| "src/ebay-tabs/*": "@ebay/ui-core-react/ebay-tabs", | ||
| "src/ebay-textbox/*": "@ebay/ui-core-react/ebay-textbox", | ||
| "src/ebay-tooltip/*": "@ebay/ui-core-react/ebay-tooltip", | ||
| "src/ebay-tourtip/*": "@ebay/ui-core-react/ebay-tourtip", | ||
| "src/ebay-video/*": "@ebay/ui-core-react/ebay-video" | ||
| }, | ||
| "paths": {} | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import figma from '@figma/code-connect' | ||
|
|
||
| import React from 'react' | ||
| import { EbayAlertDialog } from '.' | ||
| /* @ts-ignore: this is only to help code connect */ | ||
| import { EbayDialogHeader } from '@ebay/ui-core-react/ebay-dialog-base' | ||
|
|
||
| figma.connect( | ||
| EbayAlertDialog, | ||
| 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=16420-100&m=dev', | ||
| { | ||
| props: { | ||
| Title: figma.string('Title'), | ||
| Body: figma.string('Body') | ||
| }, | ||
| example: ({ Body, Title }) => ( | ||
| <EbayAlertDialog open a11yCloseText="Close" confirmText="Confirm"> | ||
| <EbayDialogHeader>{Title}</EbayDialogHeader> | ||
| <p>{Body}</p> | ||
| </EbayAlertDialog> | ||
| ) | ||
| } | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import figma from '@figma/code-connect' | ||
|
|
||
| import React from 'react' | ||
| import { EbayBadge } from '.' | ||
|
|
||
| figma.connect( | ||
| EbayBadge, | ||
| 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=38612-44629&m=dev', | ||
| { | ||
| props: { | ||
| label: figma.string('label') | ||
| }, | ||
| example: ({ label }) => <EbayBadge number={label} /> | ||
| } | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import figma from '@figma/code-connect' | ||
|
|
||
| import React from 'react' | ||
| import { EbayBreadcrumbs, EbayBreadcrumbItem } from '.' | ||
|
|
||
| figma.connect( | ||
| EbayBreadcrumbs, | ||
| 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=67603-81724&m=dev', | ||
| { | ||
| example: () => ( | ||
| <EbayBreadcrumbs a11yHeadingText="Page navigation"> | ||
| <EbayBreadcrumbItem href="https://ebay.com">eBay</EbayBreadcrumbItem> | ||
| <EbayBreadcrumbItem href="https://ebay.com/cars">Auto Parts and Vehicles</EbayBreadcrumbItem> | ||
| <EbayBreadcrumbItem>Motors Parts and Accessories</EbayBreadcrumbItem> | ||
| </EbayBreadcrumbs> | ||
| ) | ||
| } | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import figma from '@figma/code-connect' | ||
|
|
||
| import React from 'react' | ||
| import { EbayButton } from '.' | ||
|
|
||
| // button | ||
| figma.connect( | ||
| EbayButton, | ||
| 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=65849-91206&m=dev', | ||
| { | ||
| props: { | ||
| state: figma.enum('state', { | ||
| disabled: true, | ||
| enabled: false | ||
| }), | ||
| title: figma.string('Title'), | ||
| size: figma.enum('size', { | ||
| medium: 'regular', | ||
| small: 'small', | ||
| large: 'large' | ||
| }) | ||
| }, | ||
| example: ({ state, size, title }) => ( | ||
| <EbayButton disabled={state} size={size} variant="standard"> | ||
| {title} | ||
| </EbayButton> | ||
| ) | ||
| } | ||
| ) | ||
|
|
||
| // button destructive | ||
| figma.connect( | ||
| EbayButton, | ||
| 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=129298-738861&m=dev', | ||
| { | ||
| props: { | ||
| state: figma.enum('state', { | ||
| disabled: true, | ||
| enabled: false | ||
| }), | ||
| title: figma.string('Title'), | ||
| size: figma.enum('size', { | ||
| medium: 'regular', | ||
| small: 'small', | ||
| large: 'large' | ||
| }) | ||
| }, | ||
| example: ({ state, size, title }) => ( | ||
| <EbayButton disabled={state} size={size} variant="destructive"> | ||
| {title} | ||
| </EbayButton> | ||
| ) | ||
| } | ||
| ) | ||
|
|
||
| // button branded | ||
| figma.connect( | ||
| EbayButton, | ||
| 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=129776-224141&m=dev', | ||
| { | ||
| props: { | ||
| title: figma.string('Title'), | ||
| size: figma.enum('size', { | ||
| medium: 'regular', | ||
| small: 'small', | ||
| large: 'large' | ||
| }) | ||
| }, | ||
| example: ({ size, title }) => ( | ||
| <EbayButton size={size}> | ||
| {title} | ||
| </EbayButton> | ||
| ) | ||
| } | ||
| ) | ||
|
|
||
| // button link (borderless) | ||
| figma.connect( | ||
| EbayButton, | ||
| 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=109500-131885&m=dev', | ||
| { | ||
| props: { | ||
| title: figma.string('Title'), | ||
| size: figma.enum('size', { | ||
| medium: 'regular', | ||
| small: 'small', | ||
| large: 'large' | ||
| }) | ||
| }, | ||
| example: ({ size, title }) => ( | ||
| <EbayButton size={size} borderless> | ||
| {title} | ||
| </EbayButton> | ||
| ) | ||
| } | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import figma from '@figma/code-connect' | ||
|
|
||
| import React from 'react' | ||
| import { EbayCalendar } from '.' | ||
|
|
||
| // single month | ||
| figma.connect( | ||
| EbayCalendar, | ||
| 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=68524-79110&m=dev', | ||
| { | ||
| example: () => ( | ||
| <EbayCalendar /> | ||
| ) | ||
| } | ||
| ) | ||
|
|
||
| // multi-month | ||
| figma.connect( | ||
| EbayCalendar, | ||
| 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=68524-79119&m=dev', | ||
| { | ||
| example: () => ( | ||
| <EbayCalendar numMonths={2} /> | ||
| ) | ||
| } | ||
| ) |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we need to also add a new script that we will need to use to make the connection
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@HenriqueLimas this has been added, thanks!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma