feat: code connect misc 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/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/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/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>
+  )
+});

packages/raystack/figma/search.figma.tsx

@@ -0,0 +1,18 @@
+import figma from '@figma/code-connect';
+import { Search } from '../components/search';
+
+figma.connect(Search, '<FIGMA_LINK>?node-id=209-1186', {
+  imports: ["import { Search } from '@raystack/apsara'"],
+  props: {
+    placeholder: figma.enum('State', {
+      Default: figma.textContent('Search...'),
+      Active: figma.textContent('Search...'),
+      Hover: figma.textContent('Search...')
+    }),
+    size: figma.enum('Size', {
+      Small: 'small',
+      Large: 'large'
+    })
+  },
+  example: props => <Search {...props} />
+});

packages/raystack/figma/slider.figma.tsx

@@ -0,0 +1,25 @@
+import figma from '@figma/code-connect';
+import { Slider } from '../components/slider';
+
+figma.connect(Slider, '<FIGMA_LINK>?node-id=254-549', {
+  imports: ["import { Slider } from '@raystack/apsara'"],
+  props: {
+    variant: figma.enum('Variant', {
+      Single: 'single',
+      Range: 'range'
+    }),
+    handle: figma.nestedProps('Handle', {
+      thumbSize: figma.enum('Size', {
+        Small: 'small',
+        Large: 'large'
+      }),
+      label: figma.boolean('Handle Label', {
+        true: figma.textContent('Label'),
+        false: undefined
+      })
+    })
+  },
+  example: ({ handle, ...props }) => (
+    <Slider thumbSize={handle.thumbSize} label={handle.label} {...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/switch.figma.tsx

@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { Switch } from '../components/switch';
+
+figma.connect(Switch, '<FIGMA_LINK>?node-id=1-349', {
+  imports: ["import { Switch } from '@raystack/apsara'"],
+  props: {
+    disabled: figma.enum('State', {
+      Disabled: true
+    }),
+    size: figma.enum('Size', {
+      Small: 'small',
+      Large: 'large'
+    }),
+    defaultChecked: figma.boolean('Selected')
+  },
+  example: props => <Switch {...props} />
+});

packages/raystack/figma/textarea.tsx

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { TextArea } from '../components/text-area';
+
+figma.connect(TextArea, '<FIGMA_LINK>?node-id=180-585', {
+  imports: ["import { TextArea } from '@raystack/apsara'"],
+  props: {
+    placeholder: figma.enum('State', {
+      Default: figma.textContent('Place holder'),
+      Active: figma.textContent('Place holder'),
+      Hover: figma.textContent('Place holder')
+    }),
+    value: figma.enum('State', {
+      Filled: figma.textContent('Filled'),
+      'Filled Active': figma.textContent('Filled')
+    }),
+    label: figma.boolean('Label', {
+      true: figma.textContent('Label'),
+      false: undefined
+    }),
+    helperText: figma.boolean('Helper text', {
+      true: figma.textContent('Helper Text'),
+      false: undefined
+    }),
+    isOptional: figma.boolean('Optional')
+  },
+  example: props => <TextArea {...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>
+});