Skip to content

Commit 2714397

Browse files
NiznikrNiznikr
authored
feat: add Code Connect (#1555)
* feat: add Code Connect * feat: support icons * feat: generate icons * ci: add action * fix: format * feat: map icon props * chore: move tsx * chore: ts * chore: update icon guidelines * feat: add icons * fix: move to scripts
1 parent dedfe7f commit 2714397

File tree

15 files changed

+2690
-12
lines changed

15 files changed

+2690
-12
lines changed

‎.changeset/gold-bees-call.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@launchpad-ui/icons": patch
3+
---
4+
5+
Add icons `binary`, `clock-x`, `flask-caution`, `flask-end`, `flask-pause`, `flask-play`, `flask-stop`, `flask-sync`, `flask-x`, `hash`, `sort-asc`, `sort-desc`, and `sparkles`

‎.github/workflows/code-connect.yml‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
name: Figma Code Connect Publish
2+
3+
on:
4+
push:
5+
paths:
6+
- 'packages/components/figma/**'
7+
- 'packages/icons/figma/**'
8+
branches:
9+
- main
10+
11+
jobs:
12+
code-connect:
13+
name: Code Connect
14+
# Prevents action from publishing on forks
15+
if: github.repository == 'launchdarkly/launchpad-ui'
16+
timeout-minutes: 15
17+
runs-on: ubuntu-latest
18+
permissions:
19+
id-token: write
20+
contents: read
21+
steps:
22+
- name: Configure AWS Credentials
23+
uses: aws-actions/configure-aws-credentials@v4
24+
with:
25+
audience: https://github.com/launchdarkly
26+
role-to-assume: ${{ vars.AWS_ROLE_ARN }}
27+
aws-region: us-east-1
28+
29+
- uses: dkershner6/aws-ssm-getparameters-action@v2
30+
with:
31+
parameterPairs: |
32+
/production/common/launchpad-ui/figma-access-token = FIGMA_ACCESS_TOKEN
33+
withDecryption: 'true'
34+
35+
- uses: actions/checkout@v4
36+
with:
37+
fetch-depth: 0
38+
39+
- uses: pnpm/action-setup@v4
40+
41+
- name: Setup Node
42+
uses: actions/setup-node@v4
43+
with:
44+
node-version: 22
45+
cache: pnpm
46+
47+
- name: Install dependencies
48+
run: pnpm install
49+
50+
- name: Connect publish
51+
run: pnpm figma connect publish --exit-on-unreadable-files

‎.storybook/manager.js‎ renamed to ‎.storybook/manager.ts‎

File renamed without changes.

‎CONTRIBUTING.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,8 @@ Simply run `pnpm generate component` and follow the prompts, and you'll be well
197197

198198
- Add the SVG body content into a new symbol entry with id `lp-icon-{name}` in the `/src/image/sprite.svg` file in the `@launchpad/icons` package.
199199
- Add its `id` (minus prefix `lp-icon`) to the icons array in `/src/types.ts`.
200-
- Run `pnpm storybook` and visit the "Icons" page to ensure your icon was generated properly.
200+
- Run `pnpm storybook` and visit the `Components/Icons` page to ensure your icon was generated properly.
201+
- Run `pnpm nx run @launchpad-ui/icons:connect` (https://github.com/figma/code-connect/blob/main/cli/scripts/README.md) to update the icons Figma Code Connect file.
201202

202203
---
203204

‎figma.config.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"codeConnect": {
3+
"include": [
4+
"packages/components/figma/**",
5+
"packages/components/src/**",
6+
"packages/icons/figma/**",
7+
"packages/icons/src/**"
8+
],
9+
"parser": "react",
10+
"importPaths": {
11+
"packages/components/src/*": "@launchpad-ui/components",
12+
"packages/icons/src/*": "@launchpad-ui/icons"
13+
}
14+
}
15+
}

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"@commitlint/cli": "^19.7.1",
4242
"@commitlint/config-conventional": "^19.7.1",
4343
"@commitlint/types": "^19.5.0",
44+
"@figma/code-connect": "1.3.1",
4445
"@playwright/test": "^1.50.1",
4546
"@storybook/addon-a11y": "^8.5.8",
4647
"@storybook/addon-designs": "^8.2.0",
@@ -49,6 +50,7 @@
4950
"@storybook/addon-themes": "^8.5.8",
5051
"@storybook/blocks": "^8.5.8",
5152
"@storybook/components": "^8.5.8",
53+
"@storybook/manager-api": "^8.5.8",
5254
"@storybook/react": "^8.5.8",
5355
"@storybook/react-vite": "^8.5.8",
5456
"@storybook/test": "^8.5.8",
@@ -82,6 +84,7 @@
8284
"rollup-plugin-pure": "^0.2.1",
8385
"storybook": "^8.5.8",
8486
"storybook-addon-pseudo-states": "^4.0.2",
87+
"tsx": "^4.19.3",
8588
"typescript": "^5.7.2",
8689
"typescript-plugin-css-modules": "^5.1.0",
8790
"vite": "^6.1.0",

‎packages/components/figma/Button.figma.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import type { IconProps } from '@launchpad-ui/icons';
2+
import type { ButtonProps } from '../src';
3+
4+
import figma from '@figma/code-connect';
5+
import { Icon } from '@launchpad-ui/icons';
6+
7+
import { Button } from '../src';
8+
9+
figma.connect(
10+
Button,
11+
'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/LaunchPad?node-id=1-27006',
12+
{
13+
props: {
14+
hasIconLeft: figma.boolean('Has icon left', {
15+
true: figma
16+
.instance('Left icon')
17+
.render<IconProps>(({ name }) => <Icon name={name} size="small" />),
18+
false: undefined,
19+
}),
20+
hasIconRight: figma.boolean('Has icon right', {
21+
true: figma
22+
.instance('Right icon')
23+
.render<IconProps>(({ name }) => <Icon name={name} size="small" />),
24+
false: undefined,
25+
}),
26+
label: figma.string('Label'),
27+
variant: figma.enum<ButtonProps['variant']>('Variant', {
28+
Primary: 'primary',
29+
Default: 'default',
30+
Minimal: 'minimal',
31+
Destructive: 'destructive',
32+
}),
33+
size: figma.enum<ButtonProps['size']>('Size', {
34+
Small: 'small',
35+
Medium: 'medium',
36+
Large: 'large',
37+
}),
38+
isDisabled: figma.enum('State', { Disabled: true }),
39+
isFocusVisible: figma.enum('State', { ':focus-visible': true }),
40+
isHovered: figma.enum('State', { ':hover': true }),
41+
isPressed: figma.enum('State', { ':active': true }),
42+
},
43+
example: ({ hasIconLeft, hasIconRight, label, variant, size, isDisabled }) => (
44+
<Button variant={variant} size={size} isDisabled={isDisabled}>
45+
{hasIconLeft}
46+
{label}
47+
{hasIconRight}
48+
</Button>
49+
),
50+
},
51+
);

‎packages/components/figma/IconButton.figma.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import type { IconButtonProps } from '../src';
2+
3+
import figma from '@figma/code-connect';
4+
5+
import { IconButton } from '../src';
6+
7+
figma.connect(
8+
IconButton,
9+
'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/LaunchPad?node-id=1-28835',
10+
{
11+
props: {
12+
icon: figma.instance('Icon').getProps(),
13+
variant: figma.enum<IconButtonProps['variant']>('Type', {
14+
Primary: 'primary',
15+
Default: 'default',
16+
Minimal: 'minimal',
17+
Destructive: 'destructive',
18+
}),
19+
size: figma.enum<IconButtonProps['size']>('Size', {
20+
Small: 'small',
21+
Medium: 'medium',
22+
}),
23+
isDisabled: figma.enum('State', { Disabled: true }),
24+
isFocusVisible: figma.enum('State', { 'Focus visible': true }),
25+
isHovered: figma.enum('State', { Hover: true }),
26+
isPressed: figma.enum('State', { Active: true }),
27+
},
28+
example: ({ icon, variant, size, isDisabled }) => (
29+
<IconButton
30+
aria-label="label"
31+
icon={icon.name}
32+
variant={variant}
33+
size={size}
34+
isDisabled={isDisabled}
35+
/>
36+
),
37+
},
38+
);

0 commit comments

Comments
 (0)