From 66a9eb4ae1025b9c7bb457472e39b0c0e1724f14 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 23 Jun 2025 14:48:16 +0200 Subject: [PATCH 01/97] [docs] add code connect for Tooltip --- figma.config.json | 17 ++++++++++++++++ figma/Hint.tsx | 42 ++++++++++++++++++++++++++++++++++++++++ figma/Tooltip.figma.tsx | 43 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 102 insertions(+) create mode 100644 figma.config.json create mode 100644 figma/Hint.tsx create mode 100644 figma/Tooltip.figma.tsx diff --git a/figma.config.json b/figma.config.json new file mode 100644 index 0000000000..9f873ea5f9 --- /dev/null +++ b/figma.config.json @@ -0,0 +1,17 @@ +{ + "codeConnect": { + "include": ["figma/**/*.{tsx,jsx}", "semcore/**/*.{tsx,jsx,ts,js}"], + "label": "React", + "importPaths": { + "semcore/*": "@semcore/*" + }, + "paths": { + "@semcore/icon/*": ["semcore/icon/*"], + "@semcore/illustration/*": ["semcore/illustration/*"], + "@semcore/button": ["semcore/button/src"], + "@semcore/ui/*": ["semcore/*/src"], + "@semcore/*": ["semcore/*/src"] + }, + "interactiveSetupFigmaFileUrl": "https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?m=auto&node-id=10355-260538&t=fvHZdzdrBaexbYww-1" + } +} diff --git a/figma/Hint.tsx b/figma/Hint.tsx new file mode 100644 index 0000000000..7dd1b57631 --- /dev/null +++ b/figma/Hint.tsx @@ -0,0 +1,42 @@ +import figma from '@figma/code-connect'; +import { Hint } from '@semcore/tooltip'; +import React from 'react'; + +figma.connect( + Hint, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=45323-1421&t=0hjqYEp7RXqjnbR7-11', + { + props: { + title: figma.textContent('↳ text'), + theme: figma.enum('theme', { + '⚪️ default': 'default', + '⚫️ invert': 'invert', + '🔴 warning': 'warning', + }), + placement: figma.nestedProps('placement', { + placement: figma.enum('placement', { + 'top-start': 'top-start', + 'top-end': 'top-end', + 'top': 'top', + 'bottom-start': 'bottom-start', + 'bottom-end': 'bottom-end', + 'bottom': 'bottom', + 'left': 'left', + 'left-start': 'left-start', + 'left-end': 'left-end', + 'right': 'right', + 'right-start': 'right-start', + 'right-end': 'right-end', + }), + }), + }, + example: (props) => ( + + ), + }, +); diff --git a/figma/Tooltip.figma.tsx b/figma/Tooltip.figma.tsx new file mode 100644 index 0000000000..65670add28 --- /dev/null +++ b/figma/Tooltip.figma.tsx @@ -0,0 +1,43 @@ +import figma from '@figma/code-connect'; +import Tooltip from '@semcore/tooltip'; +import React from 'react'; + +figma.connect( + Tooltip, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10355-260578&t=TbZAkRDwOBuye4Je-11', + { + props: { + title: figma.instance('content'), + theme: figma.enum('theme', { + '⚪️ default': 'default', + '⚫️ invert': 'invert', + '🔴 warning': 'warning', + }), + placement: figma.nestedProps('placement', { + placement: figma.enum('placement', { + 'top-start': 'top-start', + 'top-end': 'top-end', + 'top': 'top', + 'bottom-start': 'bottom-start', + 'bottom-end': 'bottom-end', + 'bottom': 'bottom', + 'left': 'left', + 'left-start': 'left-start', + 'left-end': 'left-end', + 'right': 'right', + 'right-start': 'right-start', + 'right-end': 'right-end', + }), + }), + }, + example: (props) => ( + + ), + }, +); From 5a9ece76f22c1d9b96fa41387785d29a50a2e0b4 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 23 Jun 2025 15:05:57 +0200 Subject: [PATCH 02/97] [docs] remove typo --- figma/Tooltip.figma.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/figma/Tooltip.figma.tsx b/figma/Tooltip.figma.tsx index 65670add28..84db291404 100644 --- a/figma/Tooltip.figma.tsx +++ b/figma/Tooltip.figma.tsx @@ -35,7 +35,6 @@ figma.connect( title={props.title} theme={props.theme} placement={props.placement.placement} - href='#' tag={Link / Button / IconName} /> ), From a6bae79c2098ac69845a4c7deed85eb8afbba9cb Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 23 Jun 2025 16:42:34 +0200 Subject: [PATCH 03/97] [docs] add DescriptionTooltip mappings --- figma/DescriptionTooltip.tsx | 39 ++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 figma/DescriptionTooltip.tsx diff --git a/figma/DescriptionTooltip.tsx b/figma/DescriptionTooltip.tsx new file mode 100644 index 0000000000..2e60c439ef --- /dev/null +++ b/figma/DescriptionTooltip.tsx @@ -0,0 +1,39 @@ +import figma from '@figma/code-connect'; +import { DescriptionTooltip } from '@semcore/tooltip'; +import React from 'react'; + +figma.connect( + DescriptionTooltip, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=51966-59511&t=0hjqYEp7RXqjnbR7-11', + { + props: { + nested: figma.nestedProps('Tooltip', { + theme: figma.enum('theme', { + '⚪️ default': 'default', + '⚫️ invert': 'invert', + '🔴 warning': 'warning', + }), + content: figma.instance('content'), + }), + ariaLabel: figma.textContent('aria-label prop'), + placement: figma.enum('placement', { + top: 'top', + bottom: 'bottom', + left: 'left', + right: 'right', + }), + }, + example: (props) => ( + + + + {props.nested.content} + + + ), + }, +); From f6a7f70e113cea96eff8d4a814538c1c4379fb4e Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 23 Jun 2025 18:17:04 +0200 Subject: [PATCH 04/97] [docs] add files for Button and Tag --- figma/Button.figma.tsx | 96 ++++++++++++++++++++++++++++++++++++++ figma/ButtonLink.figma.tsx | 54 +++++++++++++++++++++ figma/Tag.figma.tsx | 81 ++++++++++++++++++++++++++++++++ figma/TagAdditional.tsx | 32 +++++++++++++ 4 files changed, 263 insertions(+) create mode 100644 figma/Button.figma.tsx create mode 100644 figma/ButtonLink.figma.tsx create mode 100644 figma/Tag.figma.tsx create mode 100644 figma/TagAdditional.tsx diff --git a/figma/Button.figma.tsx b/figma/Button.figma.tsx new file mode 100644 index 0000000000..0e2ea13c0f --- /dev/null +++ b/figma/Button.figma.tsx @@ -0,0 +1,96 @@ +import figma from '@figma/code-connect'; +import Button from '@semcore/button'; +import React from 'react'; + +const sharedProps = { + 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', + }), + disabled: figma.enum('state', { + disabled: true, + }), + active: figma.enum('state', { + active: true, + }), + loading: figma.boolean('loading'), + addonLeft: figma.boolean('← addon', { + true: figma.instance('{ ↳ AddonLeft }'), + false: undefined, + }), + +}; + +figma.connect( + Button, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10043-43724&t=fvHZdzdrBaexbYww-11', + { + props: { + ...sharedProps, + label: figma.textContent('↳ text'), + textAddon: figma.boolean('textAddon →', { + true: figma.textContent('↳ textAddon'), + false: undefined, + }), + addonRight: figma.boolean('addon →', { + true: figma.instance('{ ↳ AddonRight }'), + false: undefined, + }), + }, + example: (props) => ( + <> + + + ), + }, +); + +// figma.connect( +// Button, +// 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10043-43724&t=fvHZdzdrBaexbYww-11', +// { +// props: { +// ...sharedProps, +// title: figma.textContent('title prop'), +// }, +// example: (props) => ( +// <> +// +// +// ), +// }, +// ); diff --git a/figma/ButtonLink.figma.tsx b/figma/ButtonLink.figma.tsx new file mode 100644 index 0000000000..2b6d87fb73 --- /dev/null +++ b/figma/ButtonLink.figma.tsx @@ -0,0 +1,54 @@ +import figma from '@figma/code-connect'; +import { ButtonLink } from '@semcore/button'; +import React from 'react'; + +figma.connect( + ButtonLink, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=45638-2735&t=fvHZdzdrBaexbYww-11', + { + props: { + label: figma.textContent('↳ text'), + use: figma.enum('use', { + primary: 'primary', + secondary: 'secondary', + }), + // size: figma.enum("size", { + // "100": "100 = 12px", + // "200": "200 = 14px", + // "300": "300 = 16px", + // "400": "400 = 20px", + // "500": "500 = 24px", + // "600": "600 = 32px", + // "700": "700 = 36px", + // "800": "800 = 48px", + // }), + disabled: figma.enum('state', { + disabled: true, + }), + active: figma.enum('state', { + active: true, + }), + addonLeft: figma.boolean('← addon', { + true: figma.instance('{ ↳ AddonLeft }'), + false: undefined, + }), + // text: figma.textContent('ButtonLink') + addonRight: figma.boolean('addon →', { + true: figma.instance('{ ↳ AddonRight }'), + false: undefined, + }), + }, + example: (props) => ( + + {props.label} + + ), + }, +); diff --git a/figma/Tag.figma.tsx b/figma/Tag.figma.tsx new file mode 100644 index 0000000000..24de10f4df --- /dev/null +++ b/figma/Tag.figma.tsx @@ -0,0 +1,81 @@ +import figma from '@figma/code-connect'; +import Tag, { TagContainer } from '@semcore/tag'; +import React from 'react'; + +const vanityProps = { + label: figma.textContent('↳ text'), + size: figma.enum('size', { + XL: 'xl', + L: 'l', + M: 'm', + }), + theme: figma.enum('theme', { + primary: 'primary', + secondary: 'secondary', + }), + color: figma.enum('color', { + 'gray-500': 'gray-500', + 'blue-500': 'blue-500', + 'green-500': 'green-500', + 'orange-500': 'orange-500', + 'red-500': 'red-500', + 'invert': 'invert', + }), + active: figma.enum('state', { + active: true, + }), + addonLeft: figma.boolean('← addon', { + true: figma.instance('{ ↳ AddonLeft }'), + }), + textAddon: figma.boolean('↳ textAddon', { + true: figma.instance('{ ↳ textAddon }'), + }), +}; + +figma.connect( + Tag, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=44497-213147&t=0hjqYEp7RXqjnbR7-11', + { + variant: { 'close button': 'false' }, + props: { + ...vanityProps, + disabled: figma.boolean('disabled'), + }, + example: (props) => ( + + + {props.addonLeft} + {props.label} + {props.textAddon} + + ), + }, +); + +figma.connect( + TagContainer, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=44497-213147&t=0hjqYEp7RXqjnbR7-11', + { + variant: { 'close button': 'true' }, + props: { + ...vanityProps, + }, + example: (props) => ( + + + + {props.addonLeft} + {props.label} + {props.textAddon} + + + + ), + }, +); diff --git a/figma/TagAdditional.tsx b/figma/TagAdditional.tsx new file mode 100644 index 0000000000..2242ee754e --- /dev/null +++ b/figma/TagAdditional.tsx @@ -0,0 +1,32 @@ +import figma from '@figma/code-connect'; +// import MathPlusM from '@semcore/icon/Math/m'; +import Tag from '@semcore/tag'; +import React from 'react'; + +figma.connect( + Tag, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=12026-120376&t=TbZAkRDwOBuye4Je-11', + { + props: { + label: figma.textContent('↳ text'), + size: figma.enum('size', { + XL: 'xl', + L: 'l', + M: 'm', + }), + active: figma.enum('state', { + active: true, + }), + }, + example: (props) => ( + + {props.label} + + ), + }, +); From 79824422174a2f5a29d336b97d142805d0710c68 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 23 Jun 2025 18:22:03 +0200 Subject: [PATCH 05/97] [docs] remove ReactFragment leftovers --- figma/Button.figma.tsx | 30 +++++++++++++----------------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/figma/Button.figma.tsx b/figma/Button.figma.tsx index 0e2ea13c0f..5c681def3f 100644 --- a/figma/Button.figma.tsx +++ b/figma/Button.figma.tsx @@ -50,21 +50,19 @@ figma.connect( }), }, example: (props) => ( - <> - - + ), }, ); @@ -78,7 +76,6 @@ figma.connect( // title: figma.textContent('title prop'), // }, // example: (props) => ( -// <> // -// // ), // }, // ); From 13f08778a114c6b7fef8bf02796aee908c4654fe Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 23 Jun 2025 18:37:35 +0200 Subject: [PATCH 06/97] [docs] update tag for Tooltip and Hint code connect files --- figma/Hint.tsx | 2 +- figma/Tooltip.figma.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/figma/Hint.tsx b/figma/Hint.tsx index 7dd1b57631..479f2451ea 100644 --- a/figma/Hint.tsx +++ b/figma/Hint.tsx @@ -35,7 +35,7 @@ figma.connect( title={props.title} theme={props.theme} placement={props.placement.placement} - tag={Link / Button / IconName} + tag={Button / IconName} /> ), }, diff --git a/figma/Tooltip.figma.tsx b/figma/Tooltip.figma.tsx index 84db291404..4e9cccb3c5 100644 --- a/figma/Tooltip.figma.tsx +++ b/figma/Tooltip.figma.tsx @@ -35,7 +35,7 @@ figma.connect( title={props.title} theme={props.theme} placement={props.placement.placement} - tag={Link / Button / IconName} + tag={Link / Button} /> ), }, From b32bd1e413beb9024c57f46da1d75c1db4473131 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 23 Jun 2025 19:41:23 +0200 Subject: [PATCH 07/97] [docs] update tag for Tooltip and Hint code connect files --- figma/DescriptionTooltip.tsx | 3 ++- figma/Hint.tsx | 3 ++- figma/Tooltip.figma.tsx | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/figma/DescriptionTooltip.tsx b/figma/DescriptionTooltip.tsx index 2e60c439ef..2ac6276ec7 100644 --- a/figma/DescriptionTooltip.tsx +++ b/figma/DescriptionTooltip.tsx @@ -26,9 +26,10 @@ figma.connect( example: (props) => ( {props.nested.content} diff --git a/figma/Hint.tsx b/figma/Hint.tsx index 479f2451ea..9b4d4508fb 100644 --- a/figma/Hint.tsx +++ b/figma/Hint.tsx @@ -35,7 +35,8 @@ figma.connect( title={props.title} theme={props.theme} placement={props.placement.placement} - tag={Button / IconName} + tag={addonTag} + {...addonProps} /> ), }, diff --git a/figma/Tooltip.figma.tsx b/figma/Tooltip.figma.tsx index 4e9cccb3c5..90d4157a94 100644 --- a/figma/Tooltip.figma.tsx +++ b/figma/Tooltip.figma.tsx @@ -35,7 +35,8 @@ figma.connect( title={props.title} theme={props.theme} placement={props.placement.placement} - tag={Link / Button} + tag={addonTag} + {...addonProps} /> ), }, From 08ecdbf46c77777b65526c98e9825060e68d9dc6 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 24 Jun 2025 19:31:03 +0200 Subject: [PATCH 08/97] [docs] destructured props --- figma/Button.figma.tsx | 46 +++++++++--------------------------- figma/ButtonLink.figma.tsx | 15 ++++++------ figma/DescriptionTooltip.tsx | 8 +++---- figma/Hint.tsx | 8 +++---- figma/Tag.figma.tsx | 28 +++++++++++----------- figma/TagAdditional.tsx | 8 +++---- figma/Tooltip.figma.tsx | 8 +++---- 7 files changed, 48 insertions(+), 73 deletions(-) diff --git a/figma/Button.figma.tsx b/figma/Button.figma.tsx index 5c681def3f..c4fe0983f3 100644 --- a/figma/Button.figma.tsx +++ b/figma/Button.figma.tsx @@ -49,44 +49,20 @@ figma.connect( false: undefined, }), }, - example: (props) => ( + example: ({ size, use, theme, disabled, active, loading, addonLeft, label, textAddon, addonRight }) => ( ), }, ); - -// figma.connect( -// Button, -// 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10043-43724&t=fvHZdzdrBaexbYww-11', -// { -// props: { -// ...sharedProps, -// title: figma.textContent('title prop'), -// }, -// example: (props) => ( -// -// ), -// }, -// ); diff --git a/figma/ButtonLink.figma.tsx b/figma/ButtonLink.figma.tsx index 2b6d87fb73..120189df46 100644 --- a/figma/ButtonLink.figma.tsx +++ b/figma/ButtonLink.figma.tsx @@ -32,22 +32,21 @@ figma.connect( true: figma.instance('{ ↳ AddonLeft }'), false: undefined, }), - // text: figma.textContent('ButtonLink') addonRight: figma.boolean('addon →', { true: figma.instance('{ ↳ AddonRight }'), false: undefined, }), }, - example: (props) => ( + example: ({ use, addonLeft, addonRight, active, disabled, label }) => ( - {props.label} + {label} ), }, diff --git a/figma/DescriptionTooltip.tsx b/figma/DescriptionTooltip.tsx index 2ac6276ec7..63bc5fc0d6 100644 --- a/figma/DescriptionTooltip.tsx +++ b/figma/DescriptionTooltip.tsx @@ -23,16 +23,16 @@ figma.connect( right: 'right', }), }, - example: (props) => ( - + example: ({ nested, placement, ariaLabel }) => ( + - {props.nested.content} + {nested.content} ), diff --git a/figma/Hint.tsx b/figma/Hint.tsx index 9b4d4508fb..4ce6df58ab 100644 --- a/figma/Hint.tsx +++ b/figma/Hint.tsx @@ -30,11 +30,11 @@ figma.connect( }), }), }, - example: (props) => ( + example: ({ title, theme, placement }) => ( diff --git a/figma/Tag.figma.tsx b/figma/Tag.figma.tsx index 24de10f4df..8bce74a1cf 100644 --- a/figma/Tag.figma.tsx +++ b/figma/Tag.figma.tsx @@ -41,18 +41,18 @@ figma.connect( ...vanityProps, disabled: figma.boolean('disabled'), }, - example: (props) => ( + example: ({ size, theme, color, active, disabled, addonLeft, label, textAddon }) => ( - {props.addonLeft} - {props.label} - {props.textAddon} + {addonLeft} + {label} + {textAddon} ), }, @@ -66,13 +66,13 @@ figma.connect( props: { ...vanityProps, }, - example: (props) => ( - + example: ({ theme, color, size, addonLeft, label, textAddon }) => ( + - {props.addonLeft} - {props.label} - {props.textAddon} + {addonLeft} + {label} + {textAddon} diff --git a/figma/TagAdditional.tsx b/figma/TagAdditional.tsx index 2242ee754e..54a6653420 100644 --- a/figma/TagAdditional.tsx +++ b/figma/TagAdditional.tsx @@ -18,14 +18,14 @@ figma.connect( active: true, }), }, - example: (props) => ( + example: ({ label, size, active }) => ( - {props.label} + {label} ), }, diff --git a/figma/Tooltip.figma.tsx b/figma/Tooltip.figma.tsx index 90d4157a94..5506faeb54 100644 --- a/figma/Tooltip.figma.tsx +++ b/figma/Tooltip.figma.tsx @@ -30,11 +30,11 @@ figma.connect( }), }), }, - example: (props) => ( + example: ({ title, theme, placement }) => ( From e27c94bbca9511df53dcd618393b1a9d9f43d6d6 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Wed, 25 Jun 2025 09:26:23 +0200 Subject: [PATCH 09/97] [docs] fix typo --- figma/Button.figma.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/figma/Button.figma.tsx b/figma/Button.figma.tsx index c4fe0983f3..2261f474e0 100644 --- a/figma/Button.figma.tsx +++ b/figma/Button.figma.tsx @@ -60,7 +60,7 @@ figma.connect( > {addonLeft} {label} - {textAddon} + {textAddon} {addonRight} ), From fe026feaa9acb32de23cbfdf10bcb21189ecebe4 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Wed, 25 Jun 2025 10:45:29 +0200 Subject: [PATCH 10/97] [docs] fix typo --- figma/Button.figma.tsx | 5 ++--- figma/Tag.figma.tsx | 14 ++++++++++---- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/figma/Button.figma.tsx b/figma/Button.figma.tsx index 2261f474e0..51f66ec948 100644 --- a/figma/Button.figma.tsx +++ b/figma/Button.figma.tsx @@ -30,7 +30,6 @@ const sharedProps = { true: figma.instance('{ ↳ AddonLeft }'), false: undefined, }), - }; figma.connect( @@ -59,8 +58,8 @@ figma.connect( loading={loading} > {addonLeft} - {label} - {textAddon} + {label} + {textAddon} {addonRight} ), diff --git a/figma/Tag.figma.tsx b/figma/Tag.figma.tsx index 8bce74a1cf..b53cbe16ee 100644 --- a/figma/Tag.figma.tsx +++ b/figma/Tag.figma.tsx @@ -26,9 +26,15 @@ const vanityProps = { }), addonLeft: figma.boolean('← addon', { true: figma.instance('{ ↳ AddonLeft }'), + false: undefined, + }), + circle: figma.boolean('← circle addon', { + true: figma.instance('{ TagCircle }'), + false: undefined, }), textAddon: figma.boolean('↳ textAddon', { - true: figma.instance('{ ↳ textAddon }'), + true: figma.textContent('{ ↳ textAddon }'), + false: undefined, }), }; @@ -41,7 +47,7 @@ figma.connect( ...vanityProps, disabled: figma.boolean('disabled'), }, - example: ({ size, theme, color, active, disabled, addonLeft, label, textAddon }) => ( + example: ({ size, theme, color, active, disabled, addonLeft, label, textAddon, circle }) => ( ( + example: ({ theme, color, size, addonLeft, label, textAddon, circle }) => ( @@ -74,7 +80,7 @@ figma.connect( {label} {textAddon} - + ), }, From 9e327ea3ff70cdcdb8e5a0b895f7aaae5f9e269f Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 27 Jun 2025 16:15:52 +0200 Subject: [PATCH 11/97] [docs] add file for Link --- figma/ButtonLink.figma.tsx | 12 +----------- figma/Link.figma.tsx | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 11 deletions(-) create mode 100644 figma/Link.figma.tsx diff --git a/figma/ButtonLink.figma.tsx b/figma/ButtonLink.figma.tsx index 120189df46..ca13e056b4 100644 --- a/figma/ButtonLink.figma.tsx +++ b/figma/ButtonLink.figma.tsx @@ -12,16 +12,6 @@ figma.connect( primary: 'primary', secondary: 'secondary', }), - // size: figma.enum("size", { - // "100": "100 = 12px", - // "200": "200 = 14px", - // "300": "300 = 16px", - // "400": "400 = 20px", - // "500": "500 = 24px", - // "600": "600 = 32px", - // "700": "700 = 36px", - // "800": "800 = 48px", - // }), disabled: figma.enum('state', { disabled: true, }), @@ -40,11 +30,11 @@ figma.connect( example: ({ use, addonLeft, addonRight, active, disabled, label }) => ( {label} diff --git a/figma/Link.figma.tsx b/figma/Link.figma.tsx new file mode 100644 index 0000000000..771f13edb1 --- /dev/null +++ b/figma/Link.figma.tsx @@ -0,0 +1,38 @@ +import figma from '@figma/code-connect'; +import Link from '@semcore/link'; +import React from 'react'; + +figma.connect( + Link, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10142-178857&t=CE9QdkPSfZjp1bN9-11', + { + props: { + label: figma.textContent('↳ text'), + active: figma.enum('state', { + active: true, + }), + disabled: figma.enum('state', { + disabled: true, + }), + addonLeft: figma.boolean('← addon', { + true: figma.instance('{ ↳ AddonLeft }'), + false: undefined, + }), + addonRight: figma.boolean('addon →', { + true: figma.instance('{ ↳ AddonRight }'), + false: undefined, + }), + }, + example: ({ addonLeft, addonRight, active, disabled, label }) => ( + + {label} + + ), + }, +); From 6b9025c67c131380f044175ed9288c4e0d36c490 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 30 Jun 2025 10:45:10 +0200 Subject: [PATCH 12/97] [docs] update Button and Link mappings --- figma/Button.figma.tsx | 83 +++++++++++++++++--------------- figma/Button.icon-only.figma.tsx | 48 ++++++++++++++++++ figma/ButtonLink.figma.tsx | 3 +- figma/Link.figma.tsx | 2 + 4 files changed, 97 insertions(+), 39 deletions(-) create mode 100644 figma/Button.icon-only.figma.tsx diff --git a/figma/Button.figma.tsx b/figma/Button.figma.tsx index 51f66ec948..3f5704be64 100644 --- a/figma/Button.figma.tsx +++ b/figma/Button.figma.tsx @@ -1,53 +1,59 @@ -import figma from '@figma/code-connect'; +import figma from '@figma/code-connect/react'; import Button from '@semcore/button'; +import Text from '@semcore/text'; import React from 'react'; -const sharedProps = { - 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', - }), - disabled: figma.enum('state', { - disabled: true, - }), - active: figma.enum('state', { - active: true, - }), - loading: figma.boolean('loading'), - addonLeft: figma.boolean('← addon', { - true: figma.instance('{ ↳ AddonLeft }'), - false: undefined, - }), -}; - figma.connect( Button, 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10043-43724&t=fvHZdzdrBaexbYww-11', { + variant: { type: 'default' }, props: { - ...sharedProps, + 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, + }), label: figma.textContent('↳ text'), - textAddon: figma.boolean('textAddon →', { - true: figma.textContent('↳ textAddon'), + labelAddon: figma.textContent('↳ textAddon'), + + addonLeft: figma.boolean('← addon', { + true: figma.instance('{ ↳ AddonLeft }'), false: undefined, }), + addonRight: figma.boolean('addon →', { true: figma.instance('{ ↳ AddonRight }'), false: undefined, }), + + // For now, textAddon shows placeholder. Need to figure out how to show value from labelAddon here, and how to expand the component. + textAddon: figma.enum('type', { + default: figma.boolean('textAddon →', { + true: {/* text addon */}, + false: undefined, + }), + }), }, + example: ({ size, use, theme, disabled, active, loading, addonLeft, label, textAddon, addonRight }) => ( ), }, diff --git a/figma/Button.icon-only.figma.tsx b/figma/Button.icon-only.figma.tsx new file mode 100644 index 0000000000..49b2d015c8 --- /dev/null +++ b/figma/Button.icon-only.figma.tsx @@ -0,0 +1,48 @@ +import figma from '@figma/code-connect/react'; +import Button from '@semcore/button'; +import React from 'react'; + +figma.connect(Button, 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10043-43724&t=fvHZdzdrBaexbYww-11', { + variant: { type: 'icon only' }, + 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, + }), + addonLeft: figma.boolean('← addon', { + true: figma.instance('{ ↳ AddonLeft }'), + false: undefined, + }), + }, + example: ({ size, use, theme, disabled, active, loading, addonLeft }) => ( + ), }, diff --git a/figma/Button.icon-only.figma.tsx b/figma/Button.icon-only.figma.tsx index 49b2d015c8..737ba5f3ef 100644 --- a/figma/Button.icon-only.figma.tsx +++ b/figma/Button.icon-only.figma.tsx @@ -29,7 +29,7 @@ figma.connect(Button, 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refa disabled: true, }), addonLeft: figma.boolean('← addon', { - true: figma.instance('{ ↳ AddonLeft }'), + true: figma.instance('{ ↳ Addon L }'), false: undefined, }), }, diff --git a/figma/ButtonLink.figma.tsx b/figma/ButtonLink.figma.tsx index d9d2b791c8..99a12da4cb 100644 --- a/figma/ButtonLink.figma.tsx +++ b/figma/ButtonLink.figma.tsx @@ -19,11 +19,11 @@ figma.connect( active: true, }), addonLeft: figma.boolean('← addon', { - true: figma.instance('{ ↳ AddonLeft }'), + true: figma.instance('{ ↳ Addon L }'), false: undefined, }), addonRight: figma.boolean('addon →', { - true: figma.instance('{ ↳ AddonRight }'), + true: figma.instance('{ ↳ Addon R }'), false: undefined, }), }, diff --git a/figma/Checkbox.figma.tsx b/figma/Checkbox.figma.tsx index 8840e7a902..d8a5c641fa 100644 --- a/figma/Checkbox.figma.tsx +++ b/figma/Checkbox.figma.tsx @@ -22,11 +22,11 @@ figma.connect( disabled: true, }), addonLeft: figma.boolean('← addon', { - true: figma.instance('{ ↳ AddonLeft }'), + true: figma.instance('{ ↳ Addon L }'), false: undefined, }), addonRight: figma.boolean('addon →', { - true: figma.instance('{ ↳ AddonRight }'), + true: figma.instance('{ ↳ Addon R }'), false: undefined, }), textAddon: figma.boolean('textAddon →'), diff --git a/figma/Input.figma.tsx b/figma/Input.figma.tsx new file mode 100644 index 0000000000..f1195245fa --- /dev/null +++ b/figma/Input.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect'; +import Input from '@semcore/input'; +import React from 'react'; + +figma.connect( + Input, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10043-48576&t=nJSzcLnvK6HvK1l7-11', + { + props: {}, + example: (props) => , + }, +); diff --git a/figma/InputNumber.figma.tsx b/figma/InputNumber.figma.tsx new file mode 100644 index 0000000000..b9dd2296a2 --- /dev/null +++ b/figma/InputNumber.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect'; +import InputNumber from '@semcore/input-number'; +import React from 'react'; + +figma.connect( + InputNumber, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10162-90608&t=nJSzcLnvK6HvK1l7-11', + { + props: {}, + example: (props) => , + }, +); diff --git a/figma/InputPhone.figma.tsx b/figma/InputPhone.figma.tsx new file mode 100644 index 0000000000..9af3736198 --- /dev/null +++ b/figma/InputPhone.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect'; +import Input from '@semcore/input'; +import React from 'react'; + +figma.connect( + Input, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10264-98074&t=nJSzcLnvK6HvK1l7-11', + { + props: {}, + example: (props) => , + }, +); diff --git a/figma/InputRange.figma.tsx b/figma/InputRange.figma.tsx new file mode 100644 index 0000000000..9d237758bf --- /dev/null +++ b/figma/InputRange.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect'; +import InputRange from '@semcore/input-range'; +import React from 'react'; + +figma.connect( + InputRange, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10162-90618&t=nJSzcLnvK6HvK1l7-11', + { + props: {}, + example: (props) => , + }, +); diff --git a/figma/Link.figma.tsx b/figma/Link.figma.tsx index c010e8ac62..0ce9b6acbf 100644 --- a/figma/Link.figma.tsx +++ b/figma/Link.figma.tsx @@ -15,11 +15,11 @@ figma.connect( disabled: true, }), addonLeft: figma.boolean('← addon', { - true: figma.instance('{ ↳ AddonLeft }'), + true: figma.instance('{ ↳ Addon L }'), false: undefined, }), addonRight: figma.boolean('addon →', { - true: figma.instance('{ ↳ AddonRight }'), + true: figma.instance('{ ↳ Addon R }'), false: undefined, }), }, diff --git a/figma/ProgressBar.figma.tsx b/figma/ProgressBar.figma.tsx new file mode 100644 index 0000000000..1eb1f1f3f4 --- /dev/null +++ b/figma/ProgressBar.figma.tsx @@ -0,0 +1,31 @@ +import figma from '@figma/code-connect'; +import ProgressBar from '@semcore/progress-bar'; +import React from 'react'; + +figma.connect( + ProgressBar, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10142-113186&m=dev', + { + props: { + size: figma.enum('size', { + S: 's', + M: 'm', + L: 'l', + }), + theme: figma.enum('theme', { + invert: 'invert', + dark: 'dark', + }), + }, + + example: ({ size, theme }) => ( + + ), + }, +); diff --git a/figma/Radio.figma.tsx b/figma/Radio.figma.tsx index 2dd3a4f8d0..6befce79b7 100644 --- a/figma/Radio.figma.tsx +++ b/figma/Radio.figma.tsx @@ -20,11 +20,11 @@ figma.connect( disabled: true, }), addonLeft: figma.boolean('← addon', { - true: figma.instance('{ ↳ AddonLeft }'), + true: figma.instance('{ ↳ Addon L }'), false: undefined, }), addonRight: figma.boolean('addon →', { - true: figma.instance('{ ↳ AddonRight }'), + true: figma.instance('{ ↳ Addon R }'), false: undefined, }), textAddon: figma.boolean('textAddon →'), diff --git a/figma/Tag.figma.tsx b/figma/Tag.figma.tsx index b53cbe16ee..d994902661 100644 --- a/figma/Tag.figma.tsx +++ b/figma/Tag.figma.tsx @@ -1,53 +1,62 @@ import figma from '@figma/code-connect'; -import Tag, { TagContainer } from '@semcore/tag'; +import Tag from '@semcore/tag'; import React from 'react'; -const vanityProps = { - label: figma.textContent('↳ text'), - size: figma.enum('size', { - XL: 'xl', - L: 'l', - M: 'm', - }), - theme: figma.enum('theme', { - primary: 'primary', - secondary: 'secondary', - }), - color: figma.enum('color', { - 'gray-500': 'gray-500', - 'blue-500': 'blue-500', - 'green-500': 'green-500', - 'orange-500': 'orange-500', - 'red-500': 'red-500', - 'invert': 'invert', - }), - active: figma.enum('state', { - active: true, - }), - addonLeft: figma.boolean('← addon', { - true: figma.instance('{ ↳ AddonLeft }'), - false: undefined, - }), - circle: figma.boolean('← circle addon', { - true: figma.instance('{ TagCircle }'), - false: undefined, - }), - textAddon: figma.boolean('↳ textAddon', { - true: figma.textContent('{ ↳ textAddon }'), - false: undefined, - }), -}; - figma.connect( Tag, 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=44497-213147&t=0hjqYEp7RXqjnbR7-11', { variant: { 'close button': 'false' }, props: { - ...vanityProps, - disabled: figma.boolean('disabled'), + label: figma.textContent('↳ text'), + size: figma.enum('size', { + XL: 'xl', + L: 'l', + M: 'm', + }), + theme: figma.enum('theme', { + primary: 'primary', + secondary: 'secondary', + }), + color: figma.enum('color', { + 'gray-500': 'gray-500', + 'blue-500': 'blue-500', + 'green-500': 'green-500', + 'orange-500': 'orange-500', + 'red-500': 'red-500', + 'invert': 'invert', + }), + active: figma.enum('state', { + active: true, + }), + disabled: figma.enum('state', { disabled: true }), + + // This mappings shows instances, but they are not working with conditional rendering. So I'm leaving them for the possible future updates from Code Connect + // addonLeft: figma.boolean('← addon', { + // true: figma.instance('{ ↳ Addon L }'), + // false: undefined, + // }), + // circle: figma.boolean('← circle addon', { + // true: figma.instance('{ TagCircle }'), + // false: undefined, + // }), + // textAddon: figma.boolean('↳ textAddon', { + // true: figma.textContent('{ ↳ textAddon }'), + // false: undefined, + // }), + + addonLeft: figma.boolean('← addon', { + true: {/* addon */}, + }), + circle: figma.boolean('← circle addon', { + true: , + }), + textAddon: figma.boolean('↳ textAddon', { + true: {/* text addon */}, + }), }, - example: ({ size, theme, color, active, disabled, addonLeft, label, textAddon, circle }) => ( + + example: ({ label, size, theme, color, active, disabled, addonLeft, textAddon, circle }) => ( - - {addonLeft} + {circle} + {addonLeft} {label} - {textAddon} + {textAddon} ), }, ); - -figma.connect( - TagContainer, - 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=44497-213147&t=0hjqYEp7RXqjnbR7-11', - { - variant: { 'close button': 'true' }, - props: { - ...vanityProps, - }, - example: ({ theme, color, size, addonLeft, label, textAddon, circle }) => ( - - - - {addonLeft} - {label} - {textAddon} - - - - ), - }, -); diff --git a/figma/TagAdditional.tsx b/figma/TagAdditional.tsx index 54a6653420..a1605d5473 100644 --- a/figma/TagAdditional.tsx +++ b/figma/TagAdditional.tsx @@ -1,5 +1,5 @@ import figma from '@figma/code-connect'; -// import MathPlusM from '@semcore/icon/Math/m'; +import MathPlusM from '@semcore/icon/Math/m'; import Tag from '@semcore/tag'; import React from 'react'; diff --git a/figma/TagContainer.figma.tsx b/figma/TagContainer.figma.tsx new file mode 100644 index 0000000000..6cf4e3990e --- /dev/null +++ b/figma/TagContainer.figma.tsx @@ -0,0 +1,71 @@ +import figma from '@figma/code-connect'; +import { TagContainer } from '@semcore/tag'; +import React from 'react'; + +figma.connect( + TagContainer, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=44497-213147&t=0hjqYEp7RXqjnbR7-11', + { + variant: { 'close button': 'true' }, + props: { + label: figma.textContent('↳ text'), + size: figma.enum('size', { + XL: 'xl', + L: 'l', + M: 'm', + }), + theme: figma.enum('theme', { + primary: 'primary', + secondary: 'secondary', + }), + color: figma.enum('color', { + 'gray-500': 'gray-500', + 'blue-500': 'blue-500', + 'green-500': 'green-500', + 'orange-500': 'orange-500', + 'red-500': 'red-500', + 'invert': 'invert', + }), + active: figma.enum('state', { + active: true, + }), + disabled: figma.enum('state', { disabled: true }), + + // This mappings shows instances, but they are not working with conditional rendering. So I'm leaving them for the possible future updates from Code Connect + // addonLeft: figma.boolean('← addon', { + // true: figma.instance('{ ↳ Addon L }'), + // false: undefined, + // }), + // circle: figma.boolean('← circle addon', { + // true: figma.instance('{ TagCircle }'), + // false: undefined, + // }), + // textAddon: figma.boolean('↳ textAddon', { + // true: figma.textContent('{ ↳ textAddon }'), + // false: undefined, + // }), + + addonLeft: figma.boolean('← addon', { + true: {/* addon */}, + }), + circle: figma.boolean('← circle addon', { + true: , + }), + textAddon: figma.boolean('↳ textAddon', { + true: {/* text addon */}, + }), + }, + + example: ({ label, theme, color, size, addonLeft, textAddon, circle, active, disabled }) => ( + + + {circle} + {addonLeft} + {label} + {textAddon} + + + + ), + }, +); From 4d9924b909ccd11ec2051c3decd03d27706f64b4 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 7 Jul 2025 18:23:42 +0200 Subject: [PATCH 16/97] [docs] fix typos >_< --- figma/Tag.figma.tsx | 2 +- figma/TagContainer.figma.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/figma/Tag.figma.tsx b/figma/Tag.figma.tsx index d994902661..09be8a5f8b 100644 --- a/figma/Tag.figma.tsx +++ b/figma/Tag.figma.tsx @@ -31,7 +31,7 @@ figma.connect( }), disabled: figma.enum('state', { disabled: true }), - // This mappings shows instances, but they are not working with conditional rendering. So I'm leaving them for the possible future updates from Code Connect + // These mappings show instances, but they are not working with conditional rendering for now. So I'm leaving them for possible future updates from Code Connect. // addonLeft: figma.boolean('← addon', { // true: figma.instance('{ ↳ Addon L }'), // false: undefined, diff --git a/figma/TagContainer.figma.tsx b/figma/TagContainer.figma.tsx index 6cf4e3990e..67cb02a5d1 100644 --- a/figma/TagContainer.figma.tsx +++ b/figma/TagContainer.figma.tsx @@ -31,7 +31,7 @@ figma.connect( }), disabled: figma.enum('state', { disabled: true }), - // This mappings shows instances, but they are not working with conditional rendering. So I'm leaving them for the possible future updates from Code Connect + // These mappings show instances, but they are not working with conditional rendering for now. So I'm leaving them for possible future updates from Code Connect. // addonLeft: figma.boolean('← addon', { // true: figma.instance('{ ↳ Addon L }'), // false: undefined, From 50f06ab2354f8296b65393e542e8aa73a74afad5 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 7 Jul 2025 18:30:12 +0200 Subject: [PATCH 17/97] [docs] add label to Badge --- figma/Badge.figma.jsx | 3 ++- figma/Button.figma.tsx | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/figma/Badge.figma.jsx b/figma/Badge.figma.jsx index 2ddbb78a41..682acc7eea 100644 --- a/figma/Badge.figma.jsx +++ b/figma/Badge.figma.jsx @@ -7,6 +7,7 @@ figma.connect( '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' }), @@ -19,6 +20,6 @@ figma.connect( true: 'text-primary', }), }, - example: (props) => {/* text */}, + example: ({ label, bg, color }) => {label}, }, ); diff --git a/figma/Button.figma.tsx b/figma/Button.figma.tsx index e8f7ce016c..ca0abfa850 100644 --- a/figma/Button.figma.tsx +++ b/figma/Button.figma.tsx @@ -34,6 +34,7 @@ figma.connect( }), // 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'), From fa0a95bd4d41594f8aa2bfb40882d237a5cc0385 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek <77798437+j-mnizhek@users.noreply.github.com> Date: Fri, 15 Aug 2025 18:55:51 +0200 Subject: [PATCH 18/97] Delete figma/InputNumber.figma.tsx Signed-off-by: Julia Mnizhek <77798437+j-mnizhek@users.noreply.github.com> --- figma/InputNumber.figma.tsx | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 figma/InputNumber.figma.tsx diff --git a/figma/InputNumber.figma.tsx b/figma/InputNumber.figma.tsx deleted file mode 100644 index b9dd2296a2..0000000000 --- a/figma/InputNumber.figma.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import figma from '@figma/code-connect'; -import InputNumber from '@semcore/input-number'; -import React from 'react'; - -figma.connect( - InputNumber, - 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10162-90608&t=nJSzcLnvK6HvK1l7-11', - { - props: {}, - example: (props) => , - }, -); From 605a1fd35bc2fc0461449513a421e14415f4edb7 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 11 Jul 2025 11:06:49 +0200 Subject: [PATCH 19/97] [docs] update code connect files --- figma/Badge.figma.jsx | 2 +- figma/Button.figma.tsx | 16 +++++----- figma/Button.icon-only.figma.tsx | 4 +-- figma/Divider.figma.jsx | 2 ++ figma/Input.figma.tsx | 50 ++++++++++++++++++++++++++++++-- 5 files changed, 61 insertions(+), 13 deletions(-) diff --git a/figma/Badge.figma.jsx b/figma/Badge.figma.jsx index 682acc7eea..2cdbb272c9 100644 --- a/figma/Badge.figma.jsx +++ b/figma/Badge.figma.jsx @@ -20,6 +20,6 @@ figma.connect( true: 'text-primary', }), }, - example: ({ label, bg, color }) => {label}, + example: (props) => {props.label}, }, ); diff --git a/figma/Button.figma.tsx b/figma/Button.figma.tsx index ca0abfa850..35ab694153 100644 --- a/figma/Button.figma.tsx +++ b/figma/Button.figma.tsx @@ -5,9 +5,9 @@ import React from 'react'; figma.connect( Button, - 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10043-43724&t=fvHZdzdrBaexbYww-11', + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10043-43724&t=nVbIFrY5EvgteOqk-11', { - variant: { type: 'default' }, + variant: { iconOnly: 'false' }, props: { size: figma.enum('size', { L: 'l', @@ -56,19 +56,19 @@ figma.connect( // true: {/* addon */}, // }), - addonLeft: figma.enum('type', { - default: figma.boolean('← addon', { + addonLeft: figma.enum('iconOnly', { + false: figma.boolean('← addon', { true: {/* addon */}, }), }), - addonRight: figma.enum('type', { - default: figma.boolean('addon →', { + addonRight: figma.enum('iconOnly', { + false: figma.boolean('addon →', { true: {/* addon */}, }), }), - content: figma.enum('type', { - default: figma.boolean('← addon', { + content: figma.enum('iconOnly', { + false: figma.boolean('← addon', { true: {/* button label */}, false: figma.boolean('addon →', { true: {/* button label */}, diff --git a/figma/Button.icon-only.figma.tsx b/figma/Button.icon-only.figma.tsx index 737ba5f3ef..413c004881 100644 --- a/figma/Button.icon-only.figma.tsx +++ b/figma/Button.icon-only.figma.tsx @@ -2,8 +2,8 @@ import figma from '@figma/code-connect/react'; import Button from '@semcore/button'; import React from 'react'; -figma.connect(Button, 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10043-43724&t=fvHZdzdrBaexbYww-11', { - variant: { type: 'icon only' }, +figma.connect(Button, 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=10043-43724&t=nVbIFrY5EvgteOqk-11', { + variant: { iconOnly: 'true' }, props: { size: figma.enum('size', { L: 'l', diff --git a/figma/Divider.figma.jsx b/figma/Divider.figma.jsx index 5deca1b86b..92ae870e91 100644 --- a/figma/Divider.figma.jsx +++ b/figma/Divider.figma.jsx @@ -8,9 +8,11 @@ figma.connect( { props: { use: figma.enum('use', { + primary: 'primary', secondary: 'secondary', }), theme: figma.enum('theme', { + default: 'default', invert: 'invert', }), }, diff --git a/figma/Input.figma.tsx b/figma/Input.figma.tsx index f1195245fa..a4d5234ee5 100644 --- a/figma/Input.figma.tsx +++ b/figma/Input.figma.tsx @@ -2,11 +2,57 @@ import figma from '@figma/code-connect'; import Input from '@semcore/input'; import React from 'react'; +figma.connect( + Input.Value, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring-WIP--%E2%9D%96-Core-Components?node-id=52263-2252&t=HtVigJYDbVC6HcLX-11', + { + props: { + value: figma.textContent('↳ text'), + }, + + example: ({ value }) => {value}, + }, +); + +// Need somehow to get the value from the Input.Value component +// and pass it to the Input component +// and save props set on the Input.Value + figma.connect( Input, 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10043-48576&t=nJSzcLnvK6HvK1l7-11', { - props: {}, - example: (props) => , + props: { + value: figma.children(['Input.Value']), + size: figma.enum('size', { + M: 'm', + L: 'l', + }), + state: figma.enum('state', { + normal: 'normal', + invalid: 'invalid', + valid: 'valid', + disabled: 'disabled', + }), + readOnly: figma.boolean('read-only'), + addonLeft: figma.boolean('← addon', { + true: {/* addon */}, + }), + addonRight: figma.boolean('addon →', { + true: {/* addon */}, + }), + textAddon: figma.boolean('↳ textAddon', { + true: {/* text addon */}, + }), + + example: ({ value, size, state, disabled, readOnly, addonLeft, addonRight, textAddon }) => ( + + {addonLeft} + {value} + {textAddon} + {addonRight} + + ), + }, }, ); From 15e5ed8197d4e69255cdf1b915f3736f9f409e29 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 15 Aug 2025 18:59:00 +0200 Subject: [PATCH 20/97] Revert "Delete figma/InputNumber.figma.tsx" This reverts commit fa0a95bd4d41594f8aa2bfb40882d237a5cc0385. --- figma/InputNumber.figma.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 figma/InputNumber.figma.tsx diff --git a/figma/InputNumber.figma.tsx b/figma/InputNumber.figma.tsx new file mode 100644 index 0000000000..b9dd2296a2 --- /dev/null +++ b/figma/InputNumber.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect'; +import InputNumber from '@semcore/input-number'; +import React from 'react'; + +figma.connect( + InputNumber, + 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10162-90608&t=nJSzcLnvK6HvK1l7-11', + { + props: {}, + example: (props) => , + }, +); From 430fe9a74b46266dcdde5b4aff3a9e957f0cc525 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 15 Aug 2025 18:59:56 +0200 Subject: [PATCH 21/97] [docs] remove files --- figma/InputPhone.figma.tsx | 12 ------------ figma/InputRange.figma.tsx | 12 ------------ 2 files changed, 24 deletions(-) delete mode 100644 figma/InputPhone.figma.tsx delete mode 100644 figma/InputRange.figma.tsx diff --git a/figma/InputPhone.figma.tsx b/figma/InputPhone.figma.tsx deleted file mode 100644 index 9af3736198..0000000000 --- a/figma/InputPhone.figma.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import figma from '@figma/code-connect'; -import Input from '@semcore/input'; -import React from 'react'; - -figma.connect( - Input, - 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10264-98074&t=nJSzcLnvK6HvK1l7-11', - { - props: {}, - example: (props) => , - }, -); diff --git a/figma/InputRange.figma.tsx b/figma/InputRange.figma.tsx deleted file mode 100644 index 9d237758bf..0000000000 --- a/figma/InputRange.figma.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import figma from '@figma/code-connect'; -import InputRange from '@semcore/input-range'; -import React from 'react'; - -figma.connect( - InputRange, - 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?node-id=10162-90618&t=nJSzcLnvK6HvK1l7-11', - { - props: {}, - example: (props) => , - }, -); From 9d52662a8cf54ea608bdae7c994a9f7c4fa6e81d Mon Sep 17 00:00:00 2001 From: Slizhevsky Vladislav Date: Mon, 18 Aug 2025 16:57:17 +0200 Subject: [PATCH 22/97] [chore] updated figma.config.json file --- figma.config.json | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/figma.config.json b/figma.config.json index 4ca2858304..d0ee2964c8 100644 --- a/figma.config.json +++ b/figma.config.json @@ -1,15 +1,14 @@ { "codeConnect": { - "include": ["figma/**/*.{tsx,jsx}", "semcore/**/*.{tsx,jsx,ts,js}"], + "include": ["figma/**/*.{tsx,jsx}"], + "parser": "react", "label": "React", - "importPaths": { - "semcore/*": ["@semcore/*", "semcore/*/src", "semcore/*/src/component"] - }, "paths": { - "@semcore/icon/*": ["semcore/icon/*"], - "@semcore/illustration/*": ["semcore/illustration/*"], - "@semcore/button": ["semcore/button/src/component"], - "@semcore/*": ["semcore/*/src"] + "@semcore/illustration/*": ["illustration/*"], + "@semcore/ui/*": ["*/src"], + "intergalactic/*": ["*/src"], + "@semcore/*": ["*/src"], + "@tools/*": ["../tools/*"] }, "interactiveSetupFigmaFileUrl": "https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refactoring--%E2%9D%96-Core-Components?m=auto&node-id=10355-260538&t=fvHZdzdrBaexbYww-1" } From 7f88eccc1b461f2eac7758f2f23e12d4e9fea38a Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 18 Aug 2025 17:51:53 +0200 Subject: [PATCH 23/97] [docs] update names for addons --- figma/Button.figma.tsx | 4 ++-- figma/Button.icon-only.figma.tsx | 2 +- figma/ButtonLink.figma.tsx | 4 ++-- figma/Checkbox.figma.tsx | 4 ++-- figma/Link.figma.tsx | 4 ++-- figma/Radio.figma.tsx | 4 ++-- figma/Tag.figma.tsx | 2 +- figma/TagContainer.figma.tsx | 2 +- 8 files changed, 13 insertions(+), 13 deletions(-) diff --git a/figma/Button.figma.tsx b/figma/Button.figma.tsx index 35ab694153..62e37b215b 100644 --- a/figma/Button.figma.tsx +++ b/figma/Button.figma.tsx @@ -39,12 +39,12 @@ figma.connect( // labelAddon: figma.textContent('↳ textAddon'), // addonLeft: figma.boolean('← addon', { - // true: figma.instance('{ ↳ Addon L }'), + // true: figma.instance('← - - - addon'), // false: undefined, // }), // addonRight: figma.boolean('addon →', { - // true: figma.instance('{ ↳ Addon R }'), + // true: figma.instance('addon type - - →'), // false: undefined, // }), diff --git a/figma/Button.icon-only.figma.tsx b/figma/Button.icon-only.figma.tsx index 413c004881..e132d3cd7d 100644 --- a/figma/Button.icon-only.figma.tsx +++ b/figma/Button.icon-only.figma.tsx @@ -29,7 +29,7 @@ figma.connect(Button, 'https://www.figma.com/design/RLic9ruqNNm6qgARKFk5Ae/-Refa disabled: true, }), addonLeft: figma.boolean('← addon', { - true: figma.instance('{ ↳ Addon L }'), + true: figma.instance('← - - - addon type'), false: undefined, }), }, diff --git a/figma/ButtonLink.figma.tsx b/figma/ButtonLink.figma.tsx index 99a12da4cb..264a029f1f 100644 --- a/figma/ButtonLink.figma.tsx +++ b/figma/ButtonLink.figma.tsx @@ -19,11 +19,11 @@ figma.connect( active: true, }), addonLeft: figma.boolean('← addon', { - true: figma.instance('{ ↳ Addon L }'), + true: figma.instance('← - - - addon type'), false: undefined, }), addonRight: figma.boolean('addon →', { - true: figma.instance('{ ↳ Addon R }'), + true: figma.instance('addon type - - →'), false: undefined, }), }, diff --git a/figma/Checkbox.figma.tsx b/figma/Checkbox.figma.tsx index d8a5c641fa..0095ba29b7 100644 --- a/figma/Checkbox.figma.tsx +++ b/figma/Checkbox.figma.tsx @@ -22,11 +22,11 @@ figma.connect( disabled: true, }), addonLeft: figma.boolean('← addon', { - true: figma.instance('{ ↳ Addon L }'), + true: figma.instance('← - - - addon type'), false: undefined, }), addonRight: figma.boolean('addon →', { - true: figma.instance('{ ↳ Addon R }'), + true: figma.instance('addon type - - →'), false: undefined, }), textAddon: figma.boolean('textAddon →'), diff --git a/figma/Link.figma.tsx b/figma/Link.figma.tsx index 0ce9b6acbf..19e3a7a57d 100644 --- a/figma/Link.figma.tsx +++ b/figma/Link.figma.tsx @@ -15,11 +15,11 @@ figma.connect( disabled: true, }), addonLeft: figma.boolean('← addon', { - true: figma.instance('{ ↳ Addon L }'), + true: figma.instance('← - - - addon type'), false: undefined, }), addonRight: figma.boolean('addon →', { - true: figma.instance('{ ↳ Addon R }'), + true: figma.instance('addon type - - →'), false: undefined, }), }, diff --git a/figma/Radio.figma.tsx b/figma/Radio.figma.tsx index 6befce79b7..326e517af7 100644 --- a/figma/Radio.figma.tsx +++ b/figma/Radio.figma.tsx @@ -20,11 +20,11 @@ figma.connect( disabled: true, }), addonLeft: figma.boolean('← addon', { - true: figma.instance('{ ↳ Addon L }'), + true: figma.instance('← - - - addon type'), false: undefined, }), addonRight: figma.boolean('addon →', { - true: figma.instance('{ ↳ Addon R }'), + true: figma.instance('addon type - - →'), false: undefined, }), textAddon: figma.boolean('textAddon →'), diff --git a/figma/Tag.figma.tsx b/figma/Tag.figma.tsx index 09be8a5f8b..1c485bf9e1 100644 --- a/figma/Tag.figma.tsx +++ b/figma/Tag.figma.tsx @@ -33,7 +33,7 @@ figma.connect( // These mappings show instances, but they are not working with conditional rendering for now. So I'm leaving them for possible future updates from Code Connect. // addonLeft: figma.boolean('← addon', { - // true: figma.instance('{ ↳ Addon L }'), + // true: figma.instance('← - - - addon type'), // false: undefined, // }), // circle: figma.boolean('← circle addon', { diff --git a/figma/TagContainer.figma.tsx b/figma/TagContainer.figma.tsx index 67cb02a5d1..e53a8b9d21 100644 --- a/figma/TagContainer.figma.tsx +++ b/figma/TagContainer.figma.tsx @@ -33,7 +33,7 @@ figma.connect( // These mappings show instances, but they are not working with conditional rendering for now. So I'm leaving them for possible future updates from Code Connect. // addonLeft: figma.boolean('← addon', { - // true: figma.instance('{ ↳ Addon L }'), + // true: figma.instance('← - - - addon type'), // false: undefined, // }), // circle: figma.boolean('← circle addon', { From fd89b7fa845821861e755a3af5b55671d295d122 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 22 Aug 2025 14:53:37 +0200 Subject: [PATCH 24/97] [docs] update connect files --- figma/Button.figma.tsx | 55 ++++++++++++-- figma/Button.icon-only.figma.tsx | 48 ------------ figma/ButtonLink.figma.tsx | 38 +++++++++- figma/Checkbox.figma.tsx | 4 +- figma/Flags.figma.tsx | 11 +++ figma/Link.figma.tsx | 4 +- figma/Radio.figma.tsx | 4 +- figma/Select.figma.tsx | 122 +++++++++++++++++++++++++++++++ figma/Tag.figma.tsx | 2 +- figma/TagContainer.figma.tsx | 2 +- 10 files changed, 227 insertions(+), 63 deletions(-) delete mode 100644 figma/Button.icon-only.figma.tsx create mode 100644 figma/Flags.figma.tsx create mode 100644 figma/Select.figma.tsx diff --git a/figma/Button.figma.tsx b/figma/Button.figma.tsx index 62e37b215b..a440328b39 100644 --- a/figma/Button.figma.tsx +++ b/figma/Button.figma.tsx @@ -3,11 +3,13 @@ import Button from '@semcore/button'; import Text from '@semcore/text'; import React from 'react'; +// 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: { iconOnly: 'false' }, + variant: { 'icon only': 'false' }, props: { size: figma.enum('size', { L: 'l', @@ -44,7 +46,7 @@ figma.connect( // }), // addonRight: figma.boolean('addon →', { - // true: figma.instance('addon type - - →'), + // true: figma.instance('addon properties - - →'), // false: undefined, // }), @@ -56,18 +58,18 @@ figma.connect( // true: {/* addon */}, // }), - addonLeft: figma.enum('iconOnly', { + addonLeft: figma.enum('icon only', { false: figma.boolean('← addon', { true: {/* addon */}, }), }), - addonRight: figma.enum('iconOnly', { + addonRight: figma.enum('icon only', { false: figma.boolean('addon →', { true: {/* addon */}, }), }), - content: figma.enum('iconOnly', { + content: figma.enum('icon only', { false: figma.boolean('← addon', { true: {/* button label */}, false: figma.boolean('addon →', { @@ -100,3 +102,46 @@ figma.connect( ), }, ); + +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', + 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, + }), + addonLeft: figma.children('*'), + title: figma.textContent('↳ title'), + }, + example: ({ size, use, theme, disabled, active, loading, addonLeft, title }) => ( +