[docs] Add code connect files #2286
+9,933
−92
There are no files selected for viewing
This file contains hidden or 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 hidden or 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,12 @@ | ||
| { | ||
| "codeConnect": { | ||
| "include": ["figma/*.figma.template.js"], | ||
| "exclude": ["Example.figma.template.js"], | ||
| "label": "React", | ||
| "parser": "custom", | ||
| "parserCommand": "pnpm tsm figma/utils/parser.ts", | ||
| "paths": { | ||
| "@semcore/ui/*": ["semcore/*/src"] | ||
| } | ||
| } | ||
| } |
This file contains hidden or 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,10 @@ | ||
| { | ||
| "codeConnect": { | ||
| "include": ["figma/*.figma.jsx"], | ||
| "label": "React", | ||
| "paths": { | ||
| "@semcore/ui/*": ["semcore/*/src"] | ||
| }, | ||
| "interactiveSetupFigmaFileUrl": "https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components" | ||
| } | ||
| } |
This file contains hidden or 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,24 @@ | ||
| import figma from '@figma/code-connect/react'; | ||
| import Badge from '@semcore/ui/badge'; | ||
|
|
||
| figma.connect( | ||
| Badge, | ||
| 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/%E2%9D%96-Core-Components-(Refactoring)?node-id=10059-44175&t=hkjybGSILqRb6bQU-4', | ||
| { | ||
| props: { | ||
| label: figma.textContent('↳ text'), | ||
| bg: figma.enum('type', { | ||
| '🔵 admin': figma.boolean('invert', { false: 'blue-400', true: 'white' }), | ||
| '🔴 alpha': figma.boolean('invert', { false: 'red-400', true: 'white' }), | ||
| '🟠 beta': figma.boolean('invert', { false: 'orange-400', true: 'white' }), | ||
| '🟢 new': figma.boolean('invert', { false: 'green-400', true: 'white' }), | ||
| '🟣 for you': figma.boolean('invert', { false: 'violet-400', true: 'white' }), | ||
| '⚫️ soon': figma.boolean('invert', { false: 'gray-400', true: 'white' }), | ||
| }), | ||
| color: figma.boolean('invert', { | ||
| true: 'text-primary', | ||
| }), | ||
| }, | ||
| example: (props) => <Badge {...props}>{props.label}</Badge>, | ||
| }, | ||
| ); |
This file contains hidden or 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,123 @@ | ||
| import figma from '@figma/code-connect'; | ||
| import { LinkTrigger } from '@semcore/ui/base-trigger'; | ||
| import Select from '@semcore/ui/select'; | ||
|
|
||
| figma.connect( | ||
| LinkTrigger, | ||
| 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10733-114376&t=TXEgCxM6iJO0FYiJ-11', | ||
| { | ||
| variant: { '← addon': 'false', 'addon →': 'false', 'icon only': 'false' }, | ||
| props: { | ||
| size: figma.enum('size', { | ||
| M: 'm', | ||
| L: 'l', | ||
| }), | ||
| placeholder: figma.textContent('↳ text'), | ||
| state: figma.enum('state', { | ||
| active: 'active', | ||
| invalid: 'invalid', | ||
| valid: 'valid', | ||
| }), | ||
| disabled: figma.enum('state', { | ||
| disabled: true, | ||
| }), | ||
| loading: figma.boolean('loading'), | ||
| }, | ||
| example: (props) => <Select tag={LinkTrigger} options={/* options */} {...props} />, | ||
| }, | ||
| ); | ||
|
|
||
| figma.connect( | ||
| LinkTrigger, | ||
| 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10733-114376&t=TXEgCxM6iJO0FYiJ-11', | ||
| { | ||
| variant: { 'icon only': 'false' }, | ||
| props: { | ||
| size: figma.enum('size', { | ||
| M: 'm', | ||
| L: 'l', | ||
| }), | ||
| addonLeft: figma.enum('icon only', { | ||
| false: figma.boolean('← addon', { | ||
| true: <Select.Trigger.Addon>{/* addon */}</Select.Trigger.Addon>, | ||
| }), | ||
| }), | ||
| addonRight: figma.enum('icon only', { | ||
| false: figma.boolean('addon →', { | ||
| true: <Select.Trigger.Addon>{/* addon */}</Select.Trigger.Addon>, | ||
| }), | ||
| }), | ||
|
|
||
| content: figma.enum('icon only', { | ||
| false: figma.boolean('← addon', { | ||
| true: <Select.Trigger.Text>{/* text */}</Select.Trigger.Text>, | ||
| false: figma.boolean('addon →', { | ||
| true: <Select.Trigger.Text>{/* text */}</Select.Trigger.Text>, | ||
| false: '{/* text */}', | ||
| }), | ||
| }), | ||
| }), | ||
| text: figma.textContent('↳ text'), | ||
| state: figma.enum('state', { | ||
| active: 'active', | ||
| invalid: 'invalid', | ||
| valid: 'valid', | ||
| }), | ||
| disabled: figma.enum('state', { | ||
| disabled: true, | ||
| }), | ||
| loading: figma.boolean('loading'), | ||
| }, | ||
| example: ({ size, addonLeft, addonRight, content, state, loading, disabled }) => { | ||
| <Select tag={LinkTrigger} options={/* options */} size={size} state={state} loading={loading} disabled={disabled}> | ||
| <Select.Trigger> | ||
| {addonLeft} | ||
| {content} | ||
| {addonRight} | ||
| </Select.Trigger> | ||
| <Select.Menu hMax={/* value */}> | ||
| <Select.Option key={/* value */} value={/* value */}> | ||
| {/* option */} | ||
| </Select.Option> | ||
| </Select.Menu> | ||
| </Select>; | ||
| }, | ||
| }, | ||
| ); | ||
|
|
||
| figma.connect( | ||
| LinkTrigger, | ||
| 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10733-114376&t=TXEgCxM6iJO0FYiJ-11', | ||
| { | ||
| variant: { 'icon only': 'true' }, | ||
| props: { | ||
| size: figma.enum('size', { | ||
| M: 'm', | ||
| L: 'l', | ||
| }), | ||
| addonLeft: figma.children('← - - addon properties'), | ||
| state: figma.enum('state', { | ||
| active: 'active', | ||
| invalid: 'invalid', | ||
| valid: 'valid', | ||
| }), | ||
| disabled: figma.enum('state', { | ||
| disabled: true, | ||
| }), | ||
| loading: figma.boolean('loading'), | ||
| title: figma.textContent('↳ title'), | ||
| }, | ||
| example: ({ size, addonLeft, state, loading, disabled, title }) => ( | ||
| <Select tag={LinkTrigger} options={/* options */} size={size} state={state} loading={loading} disabled={disabled} aria-label={title}> | ||
| <Select.Trigger> | ||
| <Select.Trigger.Addon>{addonLeft}</Select.Trigger.Addon> | ||
| </Select.Trigger> | ||
| <Select.Menu hMax={/* value */}> | ||
| <Select.Option key={/* value */} value={/* value */}> | ||
| {/* option */} | ||
| </Select.Option> | ||
| </Select.Menu> | ||
| </Select> | ||
| ), | ||
| }, | ||
| ); |
This file contains hidden or 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,50 @@ | ||
| import figma from '@figma/code-connect/react'; | ||
| import Breadcrumbs from '@semcore/ui/breadcrumbs'; | ||
|
|
||
| figma.connect( | ||
| Breadcrumbs, | ||
| 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11878-115146&t=Q0bSsRErIQ7IEZAU-11', | ||
| { | ||
| variant: { 'folder': 'true' }, | ||
| props: { | ||
| homeLink: figma.nestedProps('Home link', { | ||
| label: figma.textContent('↳ text'), | ||
| }), | ||
| folderLink: figma.nestedProps('Folder link', { | ||
| label: figma.textContent('↳ text'), | ||
| }), | ||
| productLink: figma.nestedProps('Product link', { | ||
| label: figma.textContent('↳ text'), | ||
| }), | ||
| }, | ||
| example: ({ homeLink, folderLink, productLink }) => ( | ||
| <Breadcrumbs> | ||
| <Breadcrumbs.Item href='#'>{homeLink.label}</Breadcrumbs.Item> | ||
| <Breadcrumbs.Item href='#'>{folderLink.label}</Breadcrumbs.Item> | ||
| <Breadcrumbs.Item href='#' active>{productLink.label}</Breadcrumbs.Item> | ||
| </Breadcrumbs> | ||
| ), | ||
| }, | ||
| ); | ||
|
|
||
| figma.connect( | ||
| Breadcrumbs, | ||
| 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=11878-115146&t=Q0bSsRErIQ7IEZAU-11', | ||
| { | ||
| variant: { 'folder': 'false' }, | ||
| props: { | ||
| homeLink: figma.nestedProps('Home link', { | ||
| label: figma.textContent('↳ text'), | ||
| }), | ||
| productLink: figma.nestedProps('Product link', { | ||
| label: figma.textContent('↳ text'), | ||
| }), | ||
| }, | ||
| example: ({ homeLink, productLink }) => ( | ||
| <Breadcrumbs> | ||
| <Breadcrumbs.Item href='#'>{homeLink.label}</Breadcrumbs.Item> | ||
| <Breadcrumbs.Item href='#' active>{productLink.label}</Breadcrumbs.Item> | ||
| </Breadcrumbs> | ||
| ), | ||
| }, | ||
| ); |
This file contains hidden or 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,134 @@ | ||
| import figma from '@figma/code-connect/react'; | ||
| import Button from '@semcore/ui/button'; | ||
| import { Text } from '@semcore/ui/typography'; | ||
|
|
||
| // Need to add a variant for cases when dot is enabled | ||
|
|
||
| figma.connect( | ||
| Button, | ||
| 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10043-43724&t=nVbIFrY5EvgteOqk-11', | ||
| { | ||
| variant: { 'icon only': 'false' }, | ||
| props: { | ||
| size: figma.enum('size', { | ||
| L: 'l', | ||
| M: 'm', | ||
| }), | ||
| use: figma.enum('use', { | ||
| primary: 'primary', | ||
| secondary: 'secondary', | ||
| tertiary: 'tertiary', | ||
| }), | ||
| theme: figma.enum('theme', { | ||
| '🔵 info': 'info', | ||
| '🟢 success': 'success', | ||
| '🔴 danger': 'danger', | ||
| '⚫️ muted': 'muted', | ||
| '⚪️ invert': 'invert', | ||
| }), | ||
| active: figma.enum('state', { | ||
| active: true, | ||
| }), | ||
| loading: figma.boolean('loading'), | ||
| disabled: figma.enum('state', { | ||
| disabled: true, | ||
| }), | ||
|
|
||
| // Cannot be used with the current structure. | ||
| // These mappings show instances and text content, but they are not working with conditional rendering for now. So I'm leaving them for possible future updates from Code Connect. | ||
| // label: figma.textContent('↳ text'), | ||
| // labelAddon: figma.textContent('↳ textAddon'), | ||
|
|
||
| // addonLeft: figma.boolean('← addon', { | ||
| // true: figma.instance('← - - - addon'), | ||
| // false: undefined, | ||
| // }), | ||
|
|
||
| // addonRight: figma.boolean('addon →', { | ||
| // true: figma.instance('addon properties - - →'), | ||
| // false: undefined, | ||
| // }), | ||
|
|
||
| // addonLeft: figma.boolean('← addon', { | ||
| // true: <Button.Addon>{/* addon */}</Button.Addon>, | ||
| // }), | ||
|
|
||
| // addonRight: figma.boolean('addon →', { | ||
| // true: <Button.Addon>{/* addon */}</Button.Addon>, | ||
| // }), | ||
|
|
||
| addonLeft: figma.enum('icon only', { | ||
| false: figma.boolean('← addon', { | ||
| true: <Button.Addon>{/* addon */}</Button.Addon>, | ||
| }), | ||
| }), | ||
| addonRight: figma.enum('icon only', { | ||
| false: figma.boolean('addon →', { | ||
| true: <Button.Addon>{/* addon */}</Button.Addon>, | ||
| }), | ||
| }), | ||
|
|
||
| content: figma.enum('icon only', { | ||
| false: figma.boolean('← addon', { | ||
| true: <Button.Text>{/* button label */}</Button.Text>, | ||
| false: figma.boolean('addon →', { | ||
| true: <Button.Text>{/* button label */}</Button.Text>, | ||
| false: '{/* button label */}', | ||
| }), | ||
| }), | ||
| }), | ||
|
|
||
| // For now, textAddon shows placeholder. Need to figure out how to show value from labelAddon here, and how to expand the component. | ||
| textAddon: figma.boolean('textAddon →', { | ||
| true: <Button.Addon><Text color='/* text-color-token */'>{/* text addon */}</Text></Button.Addon>, | ||
| }), | ||
| }, | ||
|
|
||
| example: ({ size, use, theme, disabled, active, loading, addonLeft, content, textAddon, addonRight }) => ( | ||
| <Button | ||
| size={size} | ||
| use={use} | ||
| theme={theme} | ||
| disabled={disabled} | ||
| active={active} | ||
| loading={loading} | ||
| > | ||
| {addonLeft} | ||
| {content} | ||
| {textAddon} | ||
| {addonRight} | ||
| </Button> | ||
| ), | ||
| }, | ||
| ); | ||
|
|
||
| figma.connect(Button, 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10043-43724&t=nVbIFrY5EvgteOqk-11', { | ||
| variant: { 'icon only': 'true' }, | ||
| props: { | ||
| size: figma.enum('size', { | ||
| L: 'l', | ||
| }), | ||
| use: figma.enum('use', { | ||
| primary: 'primary', | ||
| tertiary: 'tertiary', | ||
| }), | ||
| theme: figma.enum('theme', { | ||
| '🔵 info': 'info', | ||
| '�� success': 'success', | ||
| '🔴 danger': 'danger', | ||
| '⚫️ muted': 'muted', | ||
| '⚪️ invert': 'invert', | ||
| }), | ||
| active: figma.enum('state', { | ||
| active: true, | ||
| }), | ||
| loading: figma.boolean('loading'), | ||
| disabled: figma.enum('state', { | ||
| disabled: true, | ||
| }), | ||
| title: figma.textContent('↳ title'), | ||
|
There was a problem hiding this comment. I removed addon because it was rendered incorrectly |
||
| }, | ||
| example: (props) => ( | ||
| <Button {...props} addonLeft={/* icon name */} /> | ||
| ), | ||
| }); | ||
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 can omit default props (size m and secondary use)