feat: code connect misc components (#557)

* feat: code connect support for form elements

* feat: code connect misc components

Author: rohanchkrabrty

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/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/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/spinner.figma.tsx

@@ -0,0 +1,8 @@
+import figma from '@figma/code-connect';
+import { Spinner } from '../components/spinner';
+
+figma.connect(Spinner, '<FIGMA_LINK>?node-id=3073-10985', {
+  imports: ["import { Spinner } from '@raystack/apsara'"],
+  props: {},
+  example: props => <Spinner {...props} />
+});

packages/raystack/figma/tooltip.figma.tsx

@@ -0,0 +1,10 @@
+import figma from '@figma/code-connect';
+import { Tooltip } from '../components/tooltip';
+
+figma.connect(Tooltip, '<FIGMA_LINK>?node-id=3598-25261', {
+  imports: ["import { Tooltip } from '@raystack/apsara'"],
+  props: {
+    message: figma.textContent('Tooltip text')
+  },
+  example: props => <Tooltip {...props}>TOOLTIP_TRIGGER</Tooltip>
+});