Skip to content

Commit ae88164

Browse files
rohanchkrabrtyrohanchkrabrty
authored
feat: code connect support for form elements (#556)
1 parent 07e654a commit ae88164

File tree

10 files changed

+189
-6
lines changed

10 files changed

+189
-6
lines changed

‎packages/raystack/figma.config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"exclude": [],
55
"parser": "react",
66
"documentUrlSubstitutions": {
7-
"<FIGMA_BUTTON>": "node-id=1-101"
7+
"<FIGMA_LINK>": "FIGMA_FILE_URL"
88
}
99
}
1010
}

‎packages/raystack/figma/button.figma.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import figma from '@figma/code-connect';
22
import { Button } from '../components/button';
33

4-
figma.connect(Button, '<FIGMA_BUTTON>', {
4+
figma.connect(Button, '<FIGMA_LINK>?node-id=1-84', {
55
imports: ["import { Button } from '@raystack/apsara'"],
66
props: {
77
variant: figma.enum('Variant', {
@@ -20,7 +20,21 @@ figma.connect(Button, '<FIGMA_BUTTON>', {
2020
Small: 'small',
2121
Normal: 'normal'
2222
}),
23-
children: figma.string('Label Copy')
23+
children: figma.string('Label Copy'),
24+
disabled: figma.enum('State', {
25+
Disabled: true
26+
}),
27+
leadingIcon: figma.boolean('Leading Visible', {
28+
true: figma.instance('Leading Icon'),
29+
false: undefined
30+
}),
31+
trailingIcon: figma.boolean('Trailing Visible', {
32+
true: figma.instance('Trailing Icon'),
33+
false: undefined
34+
}),
35+
loading: figma.enum('Label Copy', {
36+
'Loading...': true
37+
})
2438
},
2539
example: ({ children, ...props }) => <Button {...props}>{children}</Button>
2640
});

‎packages/raystack/figma/checkbox.figma.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import figma from '@figma/code-connect';
2+
import { Checkbox } from '../components/checkbox';
3+
4+
figma.connect(Checkbox, '<FIGMA_LINK>?node-id=1-372', {
5+
imports: ["import { Checkbox } from '@raystack/apsara'"],
6+
props: {
7+
disabled: figma.enum('State', {
8+
Disabled: true
9+
}),
10+
checked: figma.enum('Variant', {
11+
Default: false,
12+
Selected: true,
13+
Indeterminate: 'indeterminate'
14+
})
15+
},
16+
example: props => <Checkbox {...props} />
17+
});

‎packages/raystack/figma/input.figma.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import figma from '@figma/code-connect';
2+
import { InputField } from '../components/input-field';
3+
4+
figma.connect(InputField, '<FIGMA_LINK>?node-id=1-297', {
5+
imports: ["import { InputField } from '@raystack/apsara'"],
6+
props: {
7+
prefix: figma.enum('Variant', {
8+
Prefix: figma.textContent('Prefix')
9+
}),
10+
suffix: figma.enum('Variant', {
11+
Suffix: figma.textContent('Suffix')
12+
}),
13+
disabled: figma.enum('State', {
14+
Disabled: true
15+
}),
16+
placeholder: figma.enum('State', {
17+
Default: figma.textContent('Place holder'),
18+
Active: figma.textContent('Place holder'),
19+
Hover: figma.textContent('Place holder'),
20+
Disabled: figma.textContent('Place holder')
21+
}),
22+
value: figma.enum('State', {
23+
Filled: figma.enum('Variant', {
24+
Normal: figma.textContent('Filled'),
25+
Prefix: figma.textContent('Input text'),
26+
Suffix: figma.textContent('Input text')
27+
})
28+
}),
29+
size: figma.enum('Size', {
30+
Small: 'small',
31+
Large: 'large'
32+
}),
33+
label: figma.boolean('Label', {
34+
true: figma.textContent('Label'),
35+
false: undefined
36+
}),
37+
helperText: figma.boolean('Helper text', {
38+
true: figma.textContent('Helper Text'),
39+
false: undefined
40+
}),
41+
optional: figma.boolean('Optional'),
42+
leadingIcon: figma.instance('Leading Icon')
43+
},
44+
example: props => <InputField {...props} />
45+
});

‎packages/raystack/figma/radio.figma.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import figma from '@figma/code-connect';
2+
import { Radio } from '../components/radio';
3+
4+
figma.connect(Radio, '<FIGMA_LINK>?node-id=2-148', {
5+
imports: ["import { Radio } from '@raystack/apsara'"],
6+
props: {
7+
disabled: figma.enum('State', {
8+
Disabled: true
9+
})
10+
},
11+
example: props => (
12+
<Radio>
13+
<Radio.Item value='value' {...props} />
14+
</Radio>
15+
)
16+
});

‎packages/raystack/figma/search.figma.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import figma from '@figma/code-connect';
2+
import { Search } from '../components/search';
3+
4+
figma.connect(Search, '<FIGMA_LINK>?node-id=209-1186', {
5+
imports: ["import { Search } from '@raystack/apsara'"],
6+
props: {
7+
placeholder: figma.enum('State', {
8+
Default: figma.textContent('Search...'),
9+
Active: figma.textContent('Search...'),
10+
Hover: figma.textContent('Search...')
11+
}),
12+
size: figma.enum('Size', {
13+
Small: 'small',
14+
Large: 'large'
15+
})
16+
},
17+
example: props => <Search {...props} />
18+
});

‎packages/raystack/figma/slider.figma.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import figma from '@figma/code-connect';
2+
import { Slider } from '../components/slider';
3+
4+
figma.connect(Slider, '<FIGMA_LINK>?node-id=254-549', {
5+
imports: ["import { Slider } from '@raystack/apsara'"],
6+
props: {
7+
variant: figma.enum('Variant', {
8+
Single: 'single',
9+
Range: 'range'
10+
}),
11+
handle: figma.nestedProps('Handle', {
12+
thumbSize: figma.enum('Size', {
13+
Small: 'small',
14+
Large: 'large'
15+
}),
16+
label: figma.boolean('Handle Label', {
17+
true: figma.textContent('Label'),
18+
false: undefined
19+
})
20+
})
21+
},
22+
example: ({ handle, ...props }) => (
23+
<Slider thumbSize={handle.thumbSize} label={handle.label} {...props} />
24+
)
25+
});

‎packages/raystack/figma/switch.figma.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import figma from '@figma/code-connect';
2+
import { Switch } from '../components/switch';
3+
4+
figma.connect(Switch, '<FIGMA_LINK>?node-id=1-349', {
5+
imports: ["import { Switch } from '@raystack/apsara'"],
6+
props: {
7+
disabled: figma.enum('State', {
8+
Disabled: true
9+
}),
10+
size: figma.enum('Size', {
11+
Small: 'small',
12+
Large: 'large'
13+
}),
14+
defaultChecked: figma.boolean('Selected')
15+
},
16+
example: props => <Switch {...props} />
17+
});

‎packages/raystack/figma/textarea.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import figma from '@figma/code-connect';
2+
import { TextArea } from '../components/text-area';
3+
4+
figma.connect(TextArea, '<FIGMA_LINK>?node-id=180-585', {
5+
imports: ["import { TextArea } from '@raystack/apsara'"],
6+
props: {
7+
placeholder: figma.enum('State', {
8+
Default: figma.textContent('Place holder'),
9+
Active: figma.textContent('Place holder'),
10+
Hover: figma.textContent('Place holder')
11+
}),
12+
value: figma.enum('State', {
13+
Filled: figma.textContent('Filled'),
14+
'Filled Active': figma.textContent('Filled')
15+
}),
16+
label: figma.boolean('Label', {
17+
true: figma.textContent('Label'),
18+
false: undefined
19+
}),
20+
helperText: figma.boolean('Helper text', {
21+
true: figma.textContent('Helper Text'),
22+
false: undefined
23+
}),
24+
isOptional: figma.boolean('Optional')
25+
},
26+
example: props => <TextArea {...props} />
27+
});

‎packages/raystack/scripts/update-figma-config.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ const path = require('path');
33

44
// Load environment variables from .env file
55
require('dotenv').config();
6+
const FIGMA_FILE_URL = 'FIGMA_FILE_URL';
67

78
const CONFIG_FILE = path.join(__dirname, '..', 'figma.config.json');
89

910
// Read Figma URL from environment
10-
const figmaUrl = process.env.FIGMA_FILE_URL;
11+
const figmaUrl = process.env[FIGMA_FILE_URL];
1112

1213
if (!figmaUrl) {
1314
console.error('Error: FIGMA_FILE_URL environment variable is not set');
@@ -21,8 +22,11 @@ const config = JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
2122
for (const [key, value] of Object.entries(
2223
config.codeConnect.documentUrlSubstitutions
2324
)) {
24-
if (value.startsWith('node-id='))
25-
config.codeConnect.documentUrlSubstitutions[key] = `${figmaUrl}?${value}`;
25+
if (value.startsWith(FIGMA_FILE_URL))
26+
config.codeConnect.documentUrlSubstitutions[key] = value.replace(
27+
FIGMA_FILE_URL,
28+
figmaUrl
29+
);
2630
}
2731

2832
// Write updated config

0 commit comments

Comments
 (0)