Figma Code Connect #345
Figma Code Connect #345
Conversation
There was a problem hiding this comment.
Thank you for the PR. In the @figma/code-connect documentation, they suggest to use storybook instead. Isn't possible to use our stories instead?
package.json
Outdated
| @@ -62,6 +62,7 @@ | |||
| "@babel/preset-typescript": "^7.23.3", | |||
| "@babel/register": "^7.0.0", | |||
| "@ebay/skin": "^17.0.0", | |||
| "@figma/code-connect": "^0.1.2", | |||
There was a problem hiding this comment.
I think we need to also add a new script that we will need to use to make the connection
"scripts": {
...,
"figma:connect": "figma connect publish \"https://...\" --token $FIGMA_TOKEN"
}
There was a problem hiding this comment.
@HenriqueLimas this has been added, thanks!
There was a problem hiding this comment.
|
@calebnance did we also go through SAFE review? if so can you attach a SAFE ticket in the PR description as well? |
|
@HenriqueLimas |
|
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 |
|
| @@ -7,6 +7,7 @@ const getDisplayName = <Props, >(Component: FC<Props>) => Component.displayName | |||
| // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types | |||
| export const withForwardRef = <Props, >(Component: FC<Props>) => { | |||
| const ForwardRef = forwardRef<FC<Props>, Props>((props, ref) => | |||
| // @ts-ignore | |||
There was a problem hiding this comment.
We shouldn't have this, what is the issue of this type?
| 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' |
There was a problem hiding this comment.
Why this one is being imported from the npm package? The . path should have the EbayDialogHeader
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:
i have also hooked up variant handling where i could: