feat: code connect support for icons and other components

packages/raystack/figma.config.json

@@ -4,7 +4,7 @@
     "exclude": [],
     "parser": "react",
     "documentUrlSubstitutions": {
-      "<FIGMA_BUTTON>": "node-id=1-101"
+      "<FIGMA_LINK>": "FIGMA_FILE_URL"
     }
   }
 }

packages/raystack/figma/accordion.figma.tsx

@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect';
+import { Accordion } from '../components/accordion';
+
+figma.connect(Accordion, '<FIGMA_LINK>?node-id=8089-1150', {
+  imports: ["import { Accordion } from '@raystack/apsara'"],
+  props: {
+    trigger: figma.enum('State', {
+      Collapsed: figma.textContent('defaultValue')
+    })
+  },
+  example: ({ trigger = 'TRIGGER' }) => (
+    <Accordion>
+      <Accordion.Item value='value'>
+        <Accordion.Trigger>{trigger}</Accordion.Trigger>
+        <Accordion.Content>Content</Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  )
+});

packages/raystack/figma/announcement-bar.tsx

@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect';
+import { AnnouncementBar } from '../components/announcement-bar';
+
+figma.connect(AnnouncementBar, '<FIGMA_LINK>?node-id=613-990', {
+  imports: ["import { AnnouncementBar } from '@raystack/apsara'"],
+  props: {
+    variant: figma.enum('Variant', {
+      Normal: 'normal',
+      Error: 'error',
+      Gradient: 'gradient'
+    }),
+    text: figma.string('Message'),
+    leadingIcon: figma.boolean('Leading icon', {
+      true: figma.instance('Icon'),
+      false: undefined
+    })
+  },
+  example: props => <AnnouncementBar {...props} />
+});

packages/raystack/figma/avatar.figma.tsx

@@ -0,0 +1,29 @@
+import figma from '@figma/code-connect';
+import { Avatar } from '../components/avatar';
+
+figma.connect(Avatar, '<FIGMA_LINK>?node-id=1-24', {
+  imports: ["import { Avatar } from '@raystack/apsara'"],
+  props: {
+    radius: figma.enum('Radius', {
+      Small: 'small',
+      Full: 'full'
+    }),
+    size: figma.enum('Size', {
+      '1': 1,
+      '2': 2,
+      '3': 3,
+      '4': 4,
+      '5': 5,
+      '6': 6,
+      '7': 7,
+      '8': 8,
+      '9': 9,
+      '10': 10,
+      '11': 11,
+      '12': 12,
+      '13': 13
+    }),
+    fallback: figma.string('Initials')
+  },
+  example: props => <Avatar {...props} />
+});

packages/raystack/figma/badge.figma.tsx

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { Badge } from '../components/badge';
+
+figma.connect(Badge, '<FIGMA_LINK>?node-id=3463-756', {
+  imports: ["import { Badge } from '@raystack/apsara'"],
+  props: {
+    variant: figma.enum('Variant', {
+      Accent: 'accent',
+      Warning: 'warning',
+      Danger: 'danger',
+      Success: 'success',
+      Neutral: 'neutral',
+      Gradient: 'gradient'
+    }),
+    size: figma.enum('Size', {
+      Micro: 'micro',
+      Small: 'small',
+      Regular: 'regular'
+    }),
+    icon: figma.boolean('Icon', {
+      true: figma.children('Icon'),
+      false: undefined
+    }),
+    children: figma.textContent('Badge')
+  },
+  example: ({ children, ...props }) => <Badge {...props}>{children}</Badge>
+});

packages/raystack/figma/button.figma.tsx

@@ -1,7 +1,7 @@
 import figma from '@figma/code-connect';
 import { Button } from '../components/button';
 
-figma.connect(Button, '<FIGMA_BUTTON>', {
+figma.connect(Button, '<FIGMA_LINK>?node-id=1-84', {
   imports: ["import { Button } from '@raystack/apsara'"],
   props: {
     variant: figma.enum('Variant', {
@@ -20,7 +20,21 @@ figma.connect(Button, '<FIGMA_BUTTON>', {
       Small: 'small',
       Normal: 'normal'
     }),
-    children: figma.string('Label Copy')
+    children: figma.string('Label Copy'),
+    disabled: figma.enum('State', {
+      Disabled: true
+    }),
+    leadingIcon: figma.boolean('Leading Visible', {
+      true: figma.instance('Leading Icon'),
+      false: undefined
+    }),
+    trailingIcon: figma.boolean('Trailing Visible', {
+      true: figma.instance('Trailing Icon'),
+      false: undefined
+    }),
+    loading: figma.enum('Label Copy', {
+      'Loading...': true
+    })
   },
   example: ({ children, ...props }) => <Button {...props}>{children}</Button>
 });

packages/raystack/figma/callout.figma.tsx

@@ -0,0 +1,38 @@
+import figma from '@figma/code-connect';
+import { Callout } from '../components/callout';
+
+figma.connect(Callout, '<FIGMA_LINK>?node-id=661-1063', {
+  imports: ["import { Callout } from '@raystack/apsara'"],
+  props: {
+    type: figma.enum('Type', {
+      Accent: 'accent',
+      Success: 'success',
+      Alert: 'alert',
+      Gradient: 'gradient',
+      Attentio: 'attention',
+      Normal: 'normal',
+      Grey: 'grey'
+    }),
+    outline: figma.boolean('Outline'),
+    highContrast: figma.boolean('High Contrast'),
+    structure: figma.nestedProps('.callout_structure', {
+      children: figma.textContent(
+        'A short message to attract user’s attention'
+      ),
+      dismissible: figma.boolean('Dismiss'),
+      action: figma.boolean('Action', {
+        true: figma.children('Button'),
+        false: undefined
+      })
+    })
+  },
+  example: ({ structure, ...props }) => (
+    <Callout
+      {...props}
+      action={structure.action}
+      dismissible={structure.dismissible}
+    >
+      {structure.children}
+    </Callout>
+  )
+});

packages/raystack/figma/checkbox.figma.tsx

@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { Checkbox } from '../components/checkbox';
+
+figma.connect(Checkbox, '<FIGMA_LINK>?node-id=1-372', {
+  imports: ["import { Checkbox } from '@raystack/apsara'"],
+  props: {
+    disabled: figma.enum('State', {
+      Disabled: true
+    }),
+    checked: figma.enum('Variant', {
+      Default: false,
+      Selected: true,
+      Indeterminate: 'indeterminate'
+    })
+  },
+  example: props => <Checkbox {...props} />
+});

packages/raystack/figma/chip.figma.tsx

@@ -0,0 +1,45 @@
+import figma from '@figma/code-connect';
+import { Chip } from '../components/chip';
+
+figma.connect(Chip, '<FIGMA_LINK>?node-id=3388-602', {
+  imports: ["import { Chip } from '@raystack/apsara'"],
+  props: {
+    variant: figma.enum('Variant', {
+      Filled: 'filled',
+      Outline: 'outline'
+    }),
+    size: figma.enum('Size', {
+      Small: 'small',
+      Large: 'large'
+    }),
+    color: figma.enum('Style', {
+      Neutral: 'neutral',
+      Accent: 'accent'
+    }),
+    structure: figma.nestedProps('.chip_structure', {
+      children: figma.boolean('Label', {
+        true: figma.textContent('Label'),
+        false: undefined
+      }),
+      isDismissible: figma.boolean('Dismiss'),
+      leadingIcon: figma.boolean('Leading icon', {
+        true: figma.children('Leading icon'),
+        false: undefined
+      }),
+      trailingIcon: figma.boolean('Trailing icon', {
+        true: figma.children('Trailing icon'),
+        false: undefined
+      })
+    })
+  },
+  example: ({ structure, ...props }) => (
+    <Chip
+      {...props}
+      leadingIcon={structure.leadingIcon}
+      trailingIcon={structure.trailingIcon}
+      isDismissible={structure.isDismissible}
+    >
+      {structure.children}
+    </Chip>
+  )
+});

packages/raystack/figma/empty-state.figma.tsx

@@ -0,0 +1,42 @@
+import figma from '@figma/code-connect';
+import { EmptyState } from '../components/empty-state';
+
+figma.connect(EmptyState, '<FIGMA_LINK>?node-id=6144-2601', {
+  imports: ["import { EmptyState } from '@raystack/apsara'"],
+  props: {
+    variant: figma.enum('Variant', {
+      Empty: 'empty1',
+      Zero: 'empty2'
+    }),
+    heading: figma.boolean('Heading', {
+      true: figma.enum('Variant', {
+        Empty: figma.textContent('Looking for images in this area?'),
+        Zero: figma.textContent('Organization')
+      }),
+      false: undefined
+    }),
+    subHeading: figma.boolean('Sub heading', {
+      true: figma.enum('Variant', {
+        Empty: figma.textContent('Draw your area of interest to find images'),
+        Zero: figma.textContent(
+          'An organization in Aurora is a shared workspace where teams manage projects, AOIs, and image orders. It streamlines collaboration, analysis, and decision-making across industries.'
+        )
+      }),
+      false: undefined
+    }),
+    structure: figma.nestedProps('.state icon', {
+      icon: figma.instance('Icon')
+    }),
+    primaryAction: figma.boolean('Primary Action', {
+      true: figma.children('Button'),
+      false: undefined
+    }),
+    secondaryAction: figma.boolean('Secondary Action', {
+      true: figma.children('Button'),
+      false: undefined
+    })
+  },
+  example: ({ structure, ...props }) => (
+    <EmptyState {...props} icon={structure.icon} />
+  )
+});

packages/raystack/figma/icon-button.figma.tsx

@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect';
+import { IconButton } from '../components/icon-button';
+
+figma.connect(IconButton, '<FIGMA_LINK>?node-id=627-576', {
+  imports: ["import { IconButton } from '@raystack/apsara'"],
+  props: {
+    size: figma.enum('Size', {
+      '1': 1,
+      '2': 2,
+      '3': 3,
+      '4': 4
+    }),
+    disabled: figma.enum('State', {
+      Disabled: true
+    }),
+    children: figma.instance('Icon')
+  },
+  example: ({ children, ...props }) => (
+    <IconButton {...props}>{children}</IconButton>
+  )
+});

packages/raystack/figma/indicator.figma.tsx

@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect';
+import { Indicator } from '../components/indicator';
+
+figma.connect(Indicator, '<FIGMA_LINK>?node-id=3472-3108', {
+  imports: ["import { Indicator } from '@raystack/apsara'"],
+  props: {
+    variant: figma.enum('Variant', {
+      Accent: 'accent',
+      Warning: 'warning',
+      Danger: 'danger',
+      Success: 'success',
+      Neutral: 'neutral'
+    }),
+    label: figma.boolean('Label', {
+      true: figma.textContent('3'),
+      false: undefined
+    })
+  },
+  example: props => <Indicator {...props} />
+});

packages/raystack/figma/input.figma.tsx

@@ -0,0 +1,45 @@
+import figma from '@figma/code-connect';
+import { InputField } from '../components/input-field';
+
+figma.connect(InputField, '<FIGMA_LINK>?node-id=1-297', {
+  imports: ["import { InputField } from '@raystack/apsara'"],
+  props: {
+    prefix: figma.enum('Variant', {
+      Prefix: figma.textContent('Prefix')
+    }),
+    suffix: figma.enum('Variant', {
+      Suffix: figma.textContent('Suffix')
+    }),
+    disabled: figma.enum('State', {
+      Disabled: true
+    }),
+    placeholder: figma.enum('State', {
+      Default: figma.textContent('Place holder'),
+      Active: figma.textContent('Place holder'),
+      Hover: figma.textContent('Place holder'),
+      Disabled: figma.textContent('Place holder')
+    }),
+    value: figma.enum('State', {
+      Filled: figma.enum('Variant', {
+        Normal: figma.textContent('Filled'),
+        Prefix: figma.textContent('Input text'),
+        Suffix: figma.textContent('Input text')
+      })
+    }),
+    size: figma.enum('Size', {
+      Small: 'small',
+      Large: 'large'
+    }),
+    label: figma.boolean('Label', {
+      true: figma.textContent('Label'),
+      false: undefined
+    }),
+    helperText: figma.boolean('Helper text', {
+      true: figma.textContent('Helper Text'),
+      false: undefined
+    }),
+    optional: figma.boolean('Optional'),
+    leadingIcon: figma.instance('Leading Icon')
+  },
+  example: props => <InputField {...props} />
+});

packages/raystack/figma/radio.figma.tsx

@@ -0,0 +1,16 @@
+import figma from '@figma/code-connect';
+import { Radio } from '../components/radio';
+
+figma.connect(Radio, '<FIGMA_LINK>?node-id=2-148', {
+  imports: ["import { Radio } from '@raystack/apsara'"],
+  props: {
+    disabled: figma.enum('State', {
+      Disabled: true
+    })
+  },
+  example: props => (
+    <Radio>
+      <Radio.Item value='value' {...props} />
+    </Radio>
+  )
+});