From 17521a5e4ab79413c68fc07461ae122314c51069 Mon Sep 17 00:00:00 2001 From: Ed Date: Fri, 8 Nov 2024 16:08:35 +0900 Subject: [PATCH] code connects for Avatar, AvatarGroup and StatusBadge (#2492) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue ## Summary AlphaAvatar, AlphaAvatarGroup, AlphaStatusBadge에 대한 Code Connect 추가 ## Details image - Avatar의 status를 처리하는 방식이 굉장히 까다로웠습니다. example 문에서 props 변환외에 조건식을 평가하거나 하지 않기 때문에 모든 enum 경우의 수에서 같은 객체를 반환하도록 처리해야했습니다. - nestedProps의 첫번째 인자는 피그마의 레이어명과 동일해야하는데, 피그마 내부의 사소한 결정에도 구현 의존성이 생기는 점이 아쉬웠습니다. 똑똑하게 처리해주면 좋을텐데요... - StatusBadge의 `'lock'` 에 해당하는 구현이 추가되어야합니다. ### Breaking change? (Yes/No) No ## References - https://github.com/figma/code-connect/blob/main/docs/react.md#nested-properties --- .../components/AlphaAvatar/Avatar.figma.tsx | 65 +++++++++++++++++++ .../AlphaAvatarGroup/AvatarGroup.figma.tsx | 37 +++++++++++ .../AlphaStatusBadge/StatusBadge.figma.tsx | 27 ++++++++ 3 files changed, 129 insertions(+) create mode 100644 packages/bezier-react/src/components/AlphaAvatar/Avatar.figma.tsx create mode 100644 packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.figma.tsx create mode 100644 packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.figma.tsx diff --git a/packages/bezier-react/src/components/AlphaAvatar/Avatar.figma.tsx b/packages/bezier-react/src/components/AlphaAvatar/Avatar.figma.tsx new file mode 100644 index 000000000..7313857c2 --- /dev/null +++ b/packages/bezier-react/src/components/AlphaAvatar/Avatar.figma.tsx @@ -0,0 +1,65 @@ +import React from 'react' + +import figma from '@figma/code-connect' + +import { type StatusType } from '~/src/components/Status' + +import { Avatar as AlphaAvatar } from './Avatar' +import { type AvatarProps } from './Avatar.types' + +figma.connect< + Pick & { + status: { + value?: StatusType + } + } +>( + AlphaAvatar, + 'https://www.figma.com/design/aJJF4bU82uR0jAsmWp5wlE/Navigation?node-id=1%3A19155', + { + props: { + size: figma.enum('size', { + '16': '16', + '20': '20', + '24': '24', + '30': '30', + '36': '36', + '42': '42', + '48': '48', + '72': '72', + '90': '90', + '120': '120', + }), + status: figma.enum('badge', { + none: { + value: undefined, + }, + chat: { + value: undefined, + }, + status: figma.nestedProps('⛔️️ alpha/Common/StatusBadge', { + value: figma.boolean('online', { + true: figma.boolean('doNotDisturb', { + true: 'online-crescent', + false: 'online', + }), + false: figma.boolean('doNotDisturb', { + true: 'offline-crescent', + false: 'offline', + }), + }), + }), + }), + showBorder: figma.boolean('outlineBorder'), + }, + example: (props) => ( + + ), + } +) diff --git a/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.figma.tsx b/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.figma.tsx new file mode 100644 index 000000000..7572571fa --- /dev/null +++ b/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.figma.tsx @@ -0,0 +1,37 @@ +import React from 'react' + +import figma from '@figma/code-connect' + +import { AvatarGroup as AlphaAvatarGroup } from './AvatarGroup' + +figma.connect( + AlphaAvatarGroup, + 'https://www.figma.com/design/aJJF4bU82uR0jAsmWp5wlE/Navigation?node-id=1%3A19451', + { + props: { + size: figma.enum('size', { + '20': '20', + '24': '24', + }), + ellipsisType: figma.enum('variants', { + 'icon (default)': 'icon', + count: 'count', + }), + max: figma.nestedProps('⛔️️ alpha/Common/$AvatarGroupSource', { + value: figma.enum('itemCount', { + '2': 2, + '3': 3, + '4': 4, + '5': 5, + }), + }), + }, + example: (props) => ( + + ), + } +) diff --git a/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.figma.tsx b/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.figma.tsx new file mode 100644 index 000000000..fa90d071d --- /dev/null +++ b/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.figma.tsx @@ -0,0 +1,27 @@ +import React from 'react' + +import figma from '@figma/code-connect' + +import { StatusBadge as AlphaStatusBadge } from './StatusBadge' + +figma.connect( + AlphaStatusBadge, + 'https://www.figma.com/design/KyhPPZeeC0JBmTclJGe3nn/Status?node-id=6%3A34', + { + props: { + size: figma.enum('size', { + medium: 'm', + large: 'l', + }), + online: figma.boolean('online'), + doNotDisturb: figma.boolean('doNotDisturb'), + }, + example: (props) => ( + + ), + } +)