From c5c63988ed232491ca0276117c2e8cb1f244a48e Mon Sep 17 00:00:00 2001 From: Corban Riley Date: Fri, 20 Dec 2024 11:17:11 -0500 Subject: [PATCH] Updating figma icons scripts to handle the new naming convensions in the figma file --- scripts/generate-figma-icons.js | 20 ++++++++++++-------- src/components/Button/Button.figma.tsx | 5 +++-- src/icons/AirDropperIcon.figma.tsx | 12 ++++++++++++ src/icons/AppleIcon.figma.tsx | 12 ++++++++++++ src/icons/ArrowDownIcon.figma.tsx | 12 ++++++++++++ src/icons/ArrowRightIcon.figma.tsx | 12 ++++++++++++ src/icons/ChevronDownIcon.figma.tsx | 12 ++++++++++++ src/icons/ChevronLeftIcon.figma.tsx | 12 ++++++++++++ src/icons/ChevronRightIcon.figma.tsx | 12 ++++++++++++ src/icons/ChevronUpIcon.figma.tsx | 12 ++++++++++++ src/icons/ContactsIcon.figma.tsx | 12 ++++++++++++ src/icons/ContextMenuIcon.figma.tsx | 12 ++++++++++++ src/icons/ContractIcon.figma.tsx | 12 ++++++++++++ src/icons/DashedCircleIcon.figma.tsx | 12 ++++++++++++ src/icons/DiscordIcon.figma.tsx | 12 ++++++++++++ src/icons/ExpandIcon.figma.tsx | 12 ++++++++++++ src/icons/ExternalLinkIcon.figma.tsx | 12 ++++++++++++ src/icons/FacebookIcon.figma.tsx | 12 ++++++++++++ src/icons/GasTankIcon.figma.tsx | 12 ++++++++++++ src/icons/GoogleIcon.figma.tsx | 12 ++++++++++++ src/icons/QrCodeIcon.figma.tsx | 12 ++++++++++++ src/icons/SendIcon.figma.tsx | 12 ++++++++++++ src/icons/SignoutIcon.figma.tsx | 12 ++++++++++++ src/icons/SubtractIcon.figma.tsx | 12 ++++++++++++ src/icons/TransactionIcon.figma.tsx | 12 ++++++++++++ src/icons/TwitchIcon.figma.tsx | 12 ++++++++++++ 26 files changed, 303 insertions(+), 10 deletions(-) create mode 100644 src/icons/AirDropperIcon.figma.tsx create mode 100644 src/icons/AppleIcon.figma.tsx create mode 100644 src/icons/ArrowDownIcon.figma.tsx create mode 100644 src/icons/ArrowRightIcon.figma.tsx create mode 100644 src/icons/ChevronDownIcon.figma.tsx create mode 100644 src/icons/ChevronLeftIcon.figma.tsx create mode 100644 src/icons/ChevronRightIcon.figma.tsx create mode 100644 src/icons/ChevronUpIcon.figma.tsx create mode 100644 src/icons/ContactsIcon.figma.tsx create mode 100644 src/icons/ContextMenuIcon.figma.tsx create mode 100644 src/icons/ContractIcon.figma.tsx create mode 100644 src/icons/DashedCircleIcon.figma.tsx create mode 100644 src/icons/DiscordIcon.figma.tsx create mode 100644 src/icons/ExpandIcon.figma.tsx create mode 100644 src/icons/ExternalLinkIcon.figma.tsx create mode 100644 src/icons/FacebookIcon.figma.tsx create mode 100644 src/icons/GasTankIcon.figma.tsx create mode 100644 src/icons/GoogleIcon.figma.tsx create mode 100644 src/icons/QrCodeIcon.figma.tsx create mode 100644 src/icons/SendIcon.figma.tsx create mode 100644 src/icons/SignoutIcon.figma.tsx create mode 100644 src/icons/SubtractIcon.figma.tsx create mode 100644 src/icons/TransactionIcon.figma.tsx create mode 100644 src/icons/TwitchIcon.figma.tsx diff --git a/scripts/generate-figma-icons.js b/scripts/generate-figma-icons.js index ae622627f..d175ac27e 100644 --- a/scripts/generate-figma-icons.js +++ b/scripts/generate-figma-icons.js @@ -1,25 +1,27 @@ -import { client } from '@figma/code-connect' import fs from 'fs' - import path from 'path' +import { client } from '@figma/code-connect' + async function getIcons() { const components = await client.getComponents( - 'https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr/Sequence-Design-System-1.1?node-id=9818-3653' + 'https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr/Sequence-Design-System-1.1?node-id=10216-5855' ) + const icons = components.filter(component => component.name.endsWith('Icon')) const rootPath = path.resolve('./src/icons') - console.log(components.length, 'icons found in figma') + console.log(icons.length, 'icons found in figma') console.log('Writing figma files...') let succeeded = 0 let failed = 0 - for (const icon of components) { - const componentName = `${capitalize(icon.name)}Icon` + const missingIcons = [] + for (const icon of icons) { + const componentName = icon.name const componentPath = path.join(rootPath, `${componentName}.tsx`) // Check to see if a react component with the same name exists in the icons directory @@ -50,13 +52,15 @@ figma.connect( } else { console.log(' ✘ Couldnt find', componentName) failed++ + missingIcons.push(componentName) } } console.log('\nDone writing figma files') console.log(succeeded, 'succeeded', failed, 'failed') + + console.log('\nMissing icons:\n') + console.log(missingIcons.join('\n')) } getIcons() - -const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1) diff --git a/src/components/Button/Button.figma.tsx b/src/components/Button/Button.figma.tsx index 7bb761feb..e6951f05b 100644 --- a/src/components/Button/Button.figma.tsx +++ b/src/components/Button/Button.figma.tsx @@ -31,12 +31,12 @@ figma.connect( xsmall: 'xs', }), label: figma.string('label'), + leftIcon: figma.instance('leftIcon'), // hasLeftIcon: figma.boolean("hasLeftIcon"), // hasRightIcon: figma.boolean("hasRightIcon") // No matching props could be found for these Figma properties: - // "righIcon": figma.instance('righIcon'), + // rightIcon: figma.instance('rightIcon'), // "hasRightIcon": figma.boolean('hasRightIcon'), - // "leftIcon": figma.instance('leftIcon'), // "hasLeftIcon": figma.boolean('hasLeftIcon') }, example: props => ( @@ -46,6 +46,7 @@ figma.connect( disabled={props.disabled} size={props.size} label={props.label} + leftIcon={props.leftIcon} /> ), } diff --git a/src/icons/AirDropperIcon.figma.tsx b/src/icons/AirDropperIcon.figma.tsx new file mode 100644 index 000000000..e7e0c3721 --- /dev/null +++ b/src/icons/AirDropperIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { AirDropperIcon } from './index' + +figma.connect( + AirDropperIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=2146-25164', + { + example: () => + } +) diff --git a/src/icons/AppleIcon.figma.tsx b/src/icons/AppleIcon.figma.tsx new file mode 100644 index 000000000..783b6ebd1 --- /dev/null +++ b/src/icons/AppleIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { AppleIcon } from './index' + +figma.connect( + AppleIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=2159-28190', + { + example: () => + } +) diff --git a/src/icons/ArrowDownIcon.figma.tsx b/src/icons/ArrowDownIcon.figma.tsx new file mode 100644 index 000000000..677f437c7 --- /dev/null +++ b/src/icons/ArrowDownIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { ArrowDownIcon } from './index' + +figma.connect( + ArrowDownIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=2431-2649', + { + example: () => + } +) diff --git a/src/icons/ArrowRightIcon.figma.tsx b/src/icons/ArrowRightIcon.figma.tsx new file mode 100644 index 000000000..bead6dfce --- /dev/null +++ b/src/icons/ArrowRightIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { ArrowRightIcon } from './index' + +figma.connect( + ArrowRightIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-22013', + { + example: () => + } +) diff --git a/src/icons/ChevronDownIcon.figma.tsx b/src/icons/ChevronDownIcon.figma.tsx new file mode 100644 index 000000000..c1f13246c --- /dev/null +++ b/src/icons/ChevronDownIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { ChevronDownIcon } from './index' + +figma.connect( + ChevronDownIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21944', + { + example: () => + } +) diff --git a/src/icons/ChevronLeftIcon.figma.tsx b/src/icons/ChevronLeftIcon.figma.tsx new file mode 100644 index 000000000..ee5ed230a --- /dev/null +++ b/src/icons/ChevronLeftIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { ChevronLeftIcon } from './index' + +figma.connect( + ChevronLeftIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21962', + { + example: () => + } +) diff --git a/src/icons/ChevronRightIcon.figma.tsx b/src/icons/ChevronRightIcon.figma.tsx new file mode 100644 index 000000000..c23467e39 --- /dev/null +++ b/src/icons/ChevronRightIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { ChevronRightIcon } from './index' + +figma.connect( + ChevronRightIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21956', + { + example: () => + } +) diff --git a/src/icons/ChevronUpIcon.figma.tsx b/src/icons/ChevronUpIcon.figma.tsx new file mode 100644 index 000000000..9c1d3adfc --- /dev/null +++ b/src/icons/ChevronUpIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { ChevronUpIcon } from './index' + +figma.connect( + ChevronUpIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21950', + { + example: () => + } +) diff --git a/src/icons/ContactsIcon.figma.tsx b/src/icons/ContactsIcon.figma.tsx new file mode 100644 index 000000000..9269fdabb --- /dev/null +++ b/src/icons/ContactsIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { ContactsIcon } from './index' + +figma.connect( + ContactsIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=11017-8639', + { + example: () => + } +) diff --git a/src/icons/ContextMenuIcon.figma.tsx b/src/icons/ContextMenuIcon.figma.tsx new file mode 100644 index 000000000..fefee523e --- /dev/null +++ b/src/icons/ContextMenuIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { ContextMenuIcon } from './index' + +figma.connect( + ContextMenuIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=768-47027', + { + example: () => + } +) diff --git a/src/icons/ContractIcon.figma.tsx b/src/icons/ContractIcon.figma.tsx new file mode 100644 index 000000000..709db66c6 --- /dev/null +++ b/src/icons/ContractIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { ContractIcon } from './index' + +figma.connect( + ContractIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=2146-25148', + { + example: () => + } +) diff --git a/src/icons/DashedCircleIcon.figma.tsx b/src/icons/DashedCircleIcon.figma.tsx new file mode 100644 index 000000000..124cfaed6 --- /dev/null +++ b/src/icons/DashedCircleIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { DashedCircleIcon } from './index' + +figma.connect( + DashedCircleIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=848-57511', + { + example: () => + } +) diff --git a/src/icons/DiscordIcon.figma.tsx b/src/icons/DiscordIcon.figma.tsx new file mode 100644 index 000000000..ee3752c46 --- /dev/null +++ b/src/icons/DiscordIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { DiscordIcon } from './index' + +figma.connect( + DiscordIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=23094-59442', + { + example: () => + } +) diff --git a/src/icons/ExpandIcon.figma.tsx b/src/icons/ExpandIcon.figma.tsx new file mode 100644 index 000000000..55470a670 --- /dev/null +++ b/src/icons/ExpandIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { ExpandIcon } from './index' + +figma.connect( + ExpandIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-22079', + { + example: () => + } +) diff --git a/src/icons/ExternalLinkIcon.figma.tsx b/src/icons/ExternalLinkIcon.figma.tsx new file mode 100644 index 000000000..4ea3ca2fe --- /dev/null +++ b/src/icons/ExternalLinkIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { ExternalLinkIcon } from './index' + +figma.connect( + ExternalLinkIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=830-46613', + { + example: () => + } +) diff --git a/src/icons/FacebookIcon.figma.tsx b/src/icons/FacebookIcon.figma.tsx new file mode 100644 index 000000000..9a6c58f3d --- /dev/null +++ b/src/icons/FacebookIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { FacebookIcon } from './index' + +figma.connect( + FacebookIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=10594-539', + { + example: () => + } +) diff --git a/src/icons/GasTankIcon.figma.tsx b/src/icons/GasTankIcon.figma.tsx new file mode 100644 index 000000000..4e26f263a --- /dev/null +++ b/src/icons/GasTankIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { GasTankIcon } from './index' + +figma.connect( + GasTankIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=2146-25160', + { + example: () => + } +) diff --git a/src/icons/GoogleIcon.figma.tsx b/src/icons/GoogleIcon.figma.tsx new file mode 100644 index 000000000..568d9ad09 --- /dev/null +++ b/src/icons/GoogleIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { GoogleIcon } from './index' + +figma.connect( + GoogleIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=10594-538', + { + example: () => + } +) diff --git a/src/icons/QrCodeIcon.figma.tsx b/src/icons/QrCodeIcon.figma.tsx new file mode 100644 index 000000000..78145ec71 --- /dev/null +++ b/src/icons/QrCodeIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { QrCodeIcon } from './index' + +figma.connect( + QrCodeIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21878', + { + example: () => + } +) diff --git a/src/icons/SendIcon.figma.tsx b/src/icons/SendIcon.figma.tsx new file mode 100644 index 000000000..1c929cae9 --- /dev/null +++ b/src/icons/SendIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { SendIcon } from './index' + +figma.connect( + SendIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21862', + { + example: () => + } +) diff --git a/src/icons/SignoutIcon.figma.tsx b/src/icons/SignoutIcon.figma.tsx new file mode 100644 index 000000000..9e68908e3 --- /dev/null +++ b/src/icons/SignoutIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { SignoutIcon } from './index' + +figma.connect( + SignoutIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-22019', + { + example: () => + } +) diff --git a/src/icons/SubtractIcon.figma.tsx b/src/icons/SubtractIcon.figma.tsx new file mode 100644 index 000000000..ff32e209d --- /dev/null +++ b/src/icons/SubtractIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { SubtractIcon } from './index' + +figma.connect( + SubtractIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=2159-27742', + { + example: () => + } +) diff --git a/src/icons/TransactionIcon.figma.tsx b/src/icons/TransactionIcon.figma.tsx new file mode 100644 index 000000000..51fcc9b55 --- /dev/null +++ b/src/icons/TransactionIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { TransactionIcon } from './index' + +figma.connect( + TransactionIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21932', + { + example: () => + } +) diff --git a/src/icons/TwitchIcon.figma.tsx b/src/icons/TwitchIcon.figma.tsx new file mode 100644 index 000000000..14185444a --- /dev/null +++ b/src/icons/TwitchIcon.figma.tsx @@ -0,0 +1,12 @@ +import figma from '@figma/code-connect' +import React from 'react' + +import { TwitchIcon } from './index' + +figma.connect( + TwitchIcon, + 'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=10594-540', + { + example: () => + } +)