Skip to content

Commit

Permalink
inputs code connect
Browse files Browse the repository at this point in the history
  • Loading branch information
jake-figma committed Jun 20, 2024
1 parent 8b59b99 commit 91959b5
Show file tree
Hide file tree
Showing 12 changed files with 90 additions and 307 deletions.
16 changes: 4 additions & 12 deletions figma.config.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
"<FIGMA_URL_BUTTON_DANGER>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=185-852",
"<FIGMA_URL_BUTTON_GROUP>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2072-9432",
"<FIGMA_URL_CARD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2142-11380",
"<FIGMA_URL_CHECKBOX>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1454",
"<FIGMA_URL_CHECKBOX_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1441",
"<FIGMA_URL_CHECKBOX_GROUP>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1426",
"<FIGMA_URL_DIALOG>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762-696",
Expand All @@ -50,7 +49,6 @@
"<FIGMA_URL_HEADER>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2287-22651",
"<FIGMA_URL_HEADER_AUTH>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=18-9389",
"<FIGMA_URL_ICON_BUTTON>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=11-11508",
"<FIGMA_URL_INPUT>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:850",
"<FIGMA_URL_INPUT_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2136-2263",
"<FIGMA_URL_LOGO>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2159-5053",
"<FIGMA_URL_MENU_MENU>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:720",
Expand All @@ -70,9 +68,8 @@
"<FIGMA_URL_PAGINATION_NEXT>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:870",
"<FIGMA_URL_PAGINATION_LIST>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:903",
"<FIGMA_URL_PAGINATION>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:899",
"<FIGMA_URL_RADIO>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1204",
"<FIGMA_URL_RADIOFIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1412",
"<FIGMA_URL_RADIOGROUP>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1200",
"<FIGMA_URL_RADIO_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1412",
"<FIGMA_URL_RADIO_GROUP>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=624-23642",
"<FIGMA_URL_SEARCH>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2236-14989",
"<FIGMA_URL_SECTION_CARD_GRID_ICON>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=348:13221",
"<FIGMA_URL_SECTION_CARD_GRID_TESTIMONIALS>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=348:13347",
Expand All @@ -93,13 +90,9 @@
"<FIGMA_URL_SECTION_PANEL_IMAGE_CONTENT_REVERSE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=348-15101",
"<FIGMA_URL_SECTION_PANEL_IMAGE_DOUBLE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=348-13470",
"<FIGMA_URL_SECTION_PANEL_IMAGE_IMAGE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=348-15098",
"<FIGMA_URL_SELECT>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1162",
"<FIGMA_URL_SELECT_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2136-2336",
"<FIGMA_URL_SLIDER>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=3734-22471",
"<FIGMA_URL_SLIDER_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=151-9617",
"<FIGMA_URL_SWITCH_GROUP>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1921",
"<FIGMA_URL_SLIDER_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=589-17676",
"<FIGMA_URL_SWITCH_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1902",
"<FIGMA_URL_SWITCH>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1701",
"<FIGMA_URL_TAB>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=3729-12963",
"<FIGMA_URL_TABS>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=3729-13362",
"<FIGMA_URL_TAG>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=56-8830",
Expand All @@ -123,8 +116,7 @@
"<FIGMA_URL_TEXT_PRICE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2142-11622",
"<FIGMA_URL_TEXT_CONTENT_HEADING>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2153-7834",
"<FIGMA_URL_TEXT_CONTENT_TITLE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2153-7838",
"<FIGMA_URL_TEXT_AREA>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1135",
"<FIGMA_URL_TEXT_AREA_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762-3088",
"<FIGMA_URL_TEXTAREA_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762-3088",
"<FIGMA_URL_TOOLTIP>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=315-32700",
"<FIGMA_URL_CARDS_PRODUCT_INFO_CARD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=7753-4465&m=dev",
"<FIGMA_URL_CARDS_PRICING_CARD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=7722-3736&t=zlze7QSzfpWykbLu-11",
Expand Down
14 changes: 7 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
]
},
"devDependencies": {
"@figma/code-connect": "^1.0.0",
"@figma/code-connect": "^1.0.1",
"@react-aria/accordion": "^3.0.0-alpha.28",
"@react-aria/focus": "^3.17.0",
"@react-aria/interactions": "^3.21.2",
Expand Down
113 changes: 1 addition & 112 deletions scripts/descriptions/exportComponentJSON.js
Original file line number Diff line number Diff line change
@@ -1,116 +1,5 @@
// Run this in the console
const reverseLookup = {
"7753:4779": "<ACCORDION>",
"7753:4634": "<ACCORDION_ITEM>",
"9762:1103": "<AVATAR>",
"2010:15581": "<AVATAR_BLOCK>",
"56:15608": "<AVATAR_GROUP>",
"9762:426": "<BUTTON>",
"185:852": "<BUTTON_DANGER>",
"2072:9432": "<BUTTON_GROUP>",
"2142:11380": "<CARD>",
"9762:1454": "<CHECKBOX>",
"9762:1441": "<CHECKBOX_FIELD>",
"9762:1426": "<CHECKBOX_GROUP>",
"9762:696": "<DIALOG>",
"9762:3084": "<DESCRIPTION>",
"9762:3080": "<LABEL>",
"9762:3082": "<LEGEND>",
"9762:3086": "<ERROR_MESSAGE>",
"9762:3121": "<FIELD_GROUP>",
"9762:3128": "<FIELDSET>",
"321:11357": "<FOOTER>",
"197:19740": "<FORM_LOG_IN>",
"197:19741": "<FORM_CONTACT>",
"197:19742": "<FORM_REGISTER>",
"197:19743": "<FORM_NEWSLETTER>",
"197:19744": "<FORM_FORGOT_PASSWORD>",
"197:23153": "<FORM_SHIPPING>",
"2287:22651": "<HEADER>",
"18:9389": "<HEADER_AUTH>",
"11:11508": "<ICON_BUTTON>",
"9762:850": "<INPUT>",
"2136:2263": "<INPUT_FIELD>",
"2159:5053": "<LOGO>",
"9762:720": "<MENU_MENU>",
"9762:760": "<MENU_HEADING>",
"9762:739": "<MENU_SHORTCUT>",
"9762:743": "<MENU_ITEM>",
"9762:728": "<MENU_HEADER>",
"9762:731": "<MENU_SEPARATOR>",
"2194:14984": "<NAVIGATION_PILL_LIST>",
"7768:19970": "<NAVIGATION_PILL>",
"515:5459": "<NAVIGATION_BUTTON>",
"524:503": "<NAVIGATION_BUTTON_LIST>",
"124:8256": "<NOTIFICATION>",
"9762:890": "<PAGINATION_PAGE>",
"9762:868": "<PAGINATION_GAP>",
"9762:880": "<PAGINATION_PREVIOUS>",
"9762:870": "<PAGINATION_NEXT>",
"9762:903": "<PAGINATION_LIST>",
"9762:899": "<PAGINATION>",
"9762:1204": "<RADIO>",
"9762:1412": "<RADIOFIELD>",
"9762:1200": "<RADIOGROUP>",
"2236:14989": "<SEARCH>",
"348:13221": "<SECTION_CARD_GRID_ICON>",
"348:13347": "<SECTION_CARD_GRID_TESTIMONIALS>",
"348:13407": "<SECTION_CARD_GRID_CONTENT_LIST>",
"348:14431": "<SECTION_CARD_GRID_IMAGE>",
"348:14983": "<SECTION_CARD_GRID_PRICING>",
"348:15213": "<SECTION_CARD_GRID_REVIEWS>",
"348:15896": "<SECTION_HERO_BASIC>",
"348:15901": "<SECTION_HERO_ACTIONS>",
"348:15919": "<SECTION_HERO_NEWSLETTER>",
"348:15933": "<SECTION_HERO_FORM>",
"348:15970": "<SECTION_HERO_IMAGE>",
"348:13173": "<SECTION_PAGE_ACCORDION>",
"348:13517": "<SECTION_PAGE_PRODUCT_RESULTS>",
"348:15133": "<SECTION_PAGE_NEWSLETTER>",
"348:15147": "<SECTION_PAGE_PRODUCT>",
"348:13474": "<SECTION_PANEL_IMAGE_CONTENT>",
"348:15101": "<SECTION_PANEL_IMAGE_CONTENT_REVERSE>",
"348:13470": "<SECTION_PANEL_IMAGE_DOUBLE>",
"348:15098": "<SECTION_PANEL_IMAGE_IMAGE>",
"9762:1162": "<SELECT>",
"2136:2336": "<SELECT_FIELD>",
"3734:22471": "<SLIDER>",
"151:9617": "<SLIDER_FIELD>",
"9762:1921": "<SWITCH_GROUP>",
"9762:1902": "<SWITCH_FIELD>",
"9762:1701": "<SWITCH>",
"3729:12963": "<TAB>",
"3729:13362": "<TABS>",
"56:8830": "<TAG>",
"157:10316": "<TAG_TOGGLE>",
"157:10352": "<TAG_TOGGLE_GROUP>",
"2087:8491": "<TEXT_TITLE_HERO>",
"2087:8490": "<TEXT_TITLE_PAGE>",
"2103:22298": "<TEXT_SUBTITLE>",
"2087:8488": "<TEXT_HEADING>",
"2103:22303": "<TEXT_SUBHEADING>",
"2087:8487": "<TEXT>",
"2087:8485": "<TEXT_EMPHASIS>",
"2087:8483": "<TEXT_LINK>",
"2087:8486": "<TEXT_STRONG>",
"2087:8484": "<TEXT_SMALL>",
"2104:22325": "<TEXT_CODE>",
"480:6149": "<TEXT_LIST>",
"2077:11663": "<TEXT_LIST_ITEM>",
"322:9321": "<TEXT_LINK_LIST>",
"2153:7973": "<TEXT_LINK_LIST_ITEM>",
"2142:11622": "<TEXT_PRICE>",
"2153:7834": "<TEXT_CONTENT_HEADING>",
"2153:7838": "<TEXT_CONTENT_TITLE>",
"9762:1135": "<TEXT_AREA>",
"9762:3088": "<TEXT_AREA_FIELD>",
"315:32700": "<TOOLTIP>",
"7753:4465": "<CARDS_PRODUCT_INFO_CARD>",
"7722:3736": "<CARDS_PRICING_CARD>",
"7717:3946": "<CARDS_TESTIMONIAL_CARD>",
"2236:15082": "<CARDS_STATS_CARD>",
"2236:16106": "<CARDS_REVIEW_CARD>",
};
const reverseLookup = {};

figma.root.children.reduce((into, page) => {
page
Expand Down
8 changes: 2 additions & 6 deletions src/figma/compositions/Forms.figma.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,7 @@ figma.connect(FormBox, "<FIGMA_URL_FORM_LOG_IN>", {

figma.connect(FormBox, "<FIGMA_URL_FORM_CONTACT>", {
props: {
children: figma.children([
"Input Field",
"Text Area Field",
"Button Group",
]),
children: figma.children(["Input Field", "Textarea Field", "Button Group"]),
},
example: ({ children }) => <FormBox onSubmit={() => {}}>{children}</FormBox>,
});
Expand Down Expand Up @@ -48,7 +44,7 @@ figma.connect(FormBox, "<FIGMA_URL_FORM_SHIPPING>", {
children: figma.children([
"Input Field",
"Select Field",
"Text Area Field",
"Textarea Field",
"Checkbox Field",
"Button Group",
]),
Expand Down
42 changes: 8 additions & 34 deletions src/figma/primitives/Checkbox.figma.tsx
Original file line number Diff line number Diff line change
@@ -1,53 +1,27 @@
import figma from "@figma/code-connect";
import { CheckboxField, CheckboxGroup } from "primitives";

figma.connect(CheckboxField, "<FIGMA_URL_CHECKBOX>", {
figma.connect(CheckboxField, "<FIGMA_URL_CHECKBOX_FIELD>", {
props: {
defaultSelected: figma.enum("State", {
label: figma.string("Label"),
description: figma.boolean("Has Description", {
true: figma.string("Description"),
false: undefined,
}),
defaultSelected: figma.enum("Value Type", {
Checked: true,
"Disabled Checked": true,
Indeterminate: true,
}),
isIndeterminate: figma.enum("State", {
isIndeterminate: figma.enum("Value Type", {
Indeterminate: true,
}),
isDisabled: figma.enum("State", {
"Disabled Checked": true,
Disabled: true,
}),
},

example: ({ ...props }) => <CheckboxField {...props} />,
});

figma.connect(CheckboxField, "<FIGMA_URL_CHECKBOX_FIELD>", {
props: {
label: figma.string("Label"),
description: figma.boolean("Has Description", {
true: figma.string("Description"),
false: undefined,
}),
isDisabled: figma.enum("State", { Disabled: true }),
checkboxProps: figma.nestedProps("Checkbox", {
defaultSelected: figma.enum("State", {
Checked: true,
"Disabled Checked": true,
Indeterminate: true,
}),
isIndeterminate: figma.enum("State", {
Indeterminate: true,
}),
}),
},
example: ({ checkboxProps, ...props }) => (
<CheckboxField
defaultSelected={checkboxProps.defaultSelected}
isIndeterminate={checkboxProps.isIndeterminate}
{...props}
/>
),
});

figma.connect(CheckboxGroup, "<FIGMA_URL_CHECKBOX_GROUP>", {
props: { children: figma.children(["Checkbox Field"]) },
example: ({ children }) => <CheckboxGroup>{children}</CheckboxGroup>,
Expand Down
43 changes: 16 additions & 27 deletions src/figma/primitives/Input.figma.tsx
Original file line number Diff line number Diff line change
@@ -1,49 +1,38 @@
import figma from "@figma/code-connect";
import { Field, Input, InputField } from "primitives";
import { Input, InputField } from "primitives";

figma.connect(Input, "<FIGMA_URL_INPUT>", {
figma.connect(Input, "<FIGMA_URL_INPUT_FIELD>", {
variant: { "Has Label": false },
props: {
isDisabled: figma.enum("State", { Disabled: true }),
value: figma.enum("Value Type", {
Default: figma.string("Value"),
}),
placeholder: figma.enum("Value Type", {
Default: "Placeholder here...",
default: "I am a placeholder...",
Placeholder: figma.string("Value"),
}),
isDisabled: figma.enum("State", {
Disabled: true,
}),
},
example: ({ value, placeholder, isDisabled }) => (
<Input value={value} placeholder={placeholder} disabled={isDisabled} />
),
example: ({ ...props }) => <Input {...props} />,
});

figma.connect(Field, "<FIGMA_URL_INPUT_FIELD>", {
figma.connect(InputField, "<FIGMA_URL_INPUT_FIELD>", {
variant: { "Has Label": true },
props: {
isDisabled: figma.enum("State", { Disabled: true }),
errorMessage: figma.enum("State", { Error: figma.string("Error") }),
label: figma.string("Label"),
description: figma.boolean("Has Description", {
true: figma.string("Description"),
false: undefined,
}),
label: figma.boolean("Has Label", {
true: figma.string("Label"),
false: undefined,
}),
errorMessage: figma.boolean("Has Error Message", {
true: figma.string("Error Message"),
false: undefined,
value: figma.enum("Value Type", {
Default: figma.string("Value"),
}),
inputProps: figma.nestedProps("Input", {
value: figma.string("Value"),
placeholder: figma.string("Value"),
placeholder: figma.enum("Value Type", {
default: "I am a placeholder...",
Placeholder: figma.string("Value"),
}),
},
example: ({ inputProps, ...props }) => (
<InputField
value={inputProps.value}
placeholder={inputProps.placeholder}
{...props}
/>
),
example: ({ ...props }) => <InputField {...props} />,
});
14 changes: 2 additions & 12 deletions src/figma/primitives/Radio.figma.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,7 @@
import figma from "@figma/code-connect";
import { RadioField, RadioGroup } from "primitives";

figma.connect(RadioField, "<FIGMA_URL_RADIO>", {
props: {
isDisabled: figma.enum("State", {
"Checked Disabled": true,
Disabled: true,
}),
},
example: ({ ...props }) => <RadioField {...props} value="unique-value" />,
});

figma.connect(RadioField, "<FIGMA_URL_RADIOFIELD>", {
figma.connect(RadioField, "<FIGMA_URL_RADIO_FIELD>", {
props: {
label: figma.string("Label"),
description: figma.boolean("Has Description", {
Expand All @@ -23,7 +13,7 @@ figma.connect(RadioField, "<FIGMA_URL_RADIOFIELD>", {
example: ({ ...props }) => <RadioField value="Initial value" {...props} />,
});

figma.connect(RadioGroup, "<FIGMA_URL_RADIOGROUP>", {
figma.connect(RadioGroup, "<FIGMA_URL_RADIO_GROUP>", {
props: { children: figma.children(["Radio Field"]) },
example: ({ children }) => <RadioGroup>{children}</RadioGroup>,
});
Loading

0 comments on commit 91959b5

Please sign in to comment.