feat: figma code connect

code-connect/.env.example

@@ -0,0 +1 @@
+FIGMA_ACCESS_TOKEN=

code-connect/.gitignore

@@ -0,0 +1,41 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build output
+dist/
+build/
+lib/
+
+# TypeScript
+*.tsbuildinfo
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# But keep example file
+!.env.example
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+logs
+*.log
+
+# Cache
+.eslintcache
+.cache/

code-connect/components/Accordion.figma.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {Accordion, Icon, Typography} from 'rn-base-component'
+import {StyleSheet, View} from 'react-native'
+
+const ACCORDION_FIGMA_URL = '<FIGMA_ACCORDION>'
+
+const accordionProps = {
+  title: figma.string('label_text'),
+  expandMultiple: figma.enum('state', {
+    expand: true,
+    collapse: false,
+    disabled: false,
+  }),
+  leadingIcon: figma.boolean('leading_icon', {
+    true: <Icon source={require('@/assets/images/leading_icon.png')} />,
+    false: undefined,
+  }),
+  trailingIcon: figma.boolean('trailing_icon', {
+    true: <Icon source={require('@/assets/images/trailing_icon.png')} />,
+    false: undefined,
+  }),
+  groupButtons: figma.boolean('group_buttons', {
+    true: figma.children('button'),
+    false: undefined,
+  }),
+  onPress: () => {
+    /* TODO: Handle onPress */
+  },
+}
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    flexDirection: 'row',
+  },
+  headerContent: {
+    flexDirection: 'row',
+  },
+})
+
+figma.connect(Accordion, ACCORDION_FIGMA_URL, {
+  props: accordionProps,
+  example: ({trailingIcon, leadingIcon, groupButtons, title, ...props}) => (
+    <Accordion
+      {...props}
+      title={title}
+      sections={[
+        {
+          title,
+          content: 'Lorem ipsum dolor sit amet',
+        },
+      ]}
+      renderHeader={(item, _, __, keyExtractorItem) => (
+        <View style={styles.headerContent} key={keyExtractorItem}>
+          {leadingIcon}
+          <Typography variant="bold">{item.title}</Typography>
+          {trailingIcon}
+        </View>
+      )}
+      renderContent={item => (
+        <View>
+          <Typography variant="regular">{item.content}</Typography>
+          <View style={styles.buttonContainer}>{groupButtons}</View>
+        </View>
+      )}
+    />
+  ),
+})

code-connect/components/Button.figma.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {
+  Button,
+  ButtonPrimary,
+  ButtonSecondary,
+  ButtonOutline,
+  ButtonTransparent,
+  Icon,
+  Text,
+} from 'rn-base-component'
+import {StyleSheet} from 'react-native'
+
+const BUTTON_FIGMA_URL = '<FIGMA_BUTTON>'
+const buttonProps = {
+  disabled: figma.enum('state', {
+    disabled: true,
+  }),
+  leftIcon: figma.boolean('leading_icon', {
+    true: figma.boolean('is_icon_only', {
+      true: undefined,
+      false: <Icon source={require('@/assets/images/leading_icon.png')} />,
+    }),
+    false: undefined,
+  }),
+  rightIcon: figma.boolean('trailing_icon', {
+    true: figma.boolean('is_icon_only', {
+      true: undefined,
+      false: <Icon source={require('@/assets/images/trailing_icon.png')} />,
+    }),
+    false: undefined,
+  }),
+  children: figma.boolean('is_icon_only', {
+    true: <Icon source={require('@/assets/images/icon.png')} />,
+    false: figma.string('button_text'),
+  }),
+}
+
+const styles = StyleSheet.create({
+  underline: {
+    textDecorationLine: 'underline',
+  },
+})
+
+figma.connect(ButtonPrimary, BUTTON_FIGMA_URL, {
+  variant: {type: 'contained', style: 'primary'},
+  props: buttonProps,
+  example: props => <ButtonPrimary {...props} />,
+})
+
+figma.connect(ButtonSecondary, BUTTON_FIGMA_URL, {
+  variant: {type: 'contained', style: 'secondary'},
+  props: buttonProps,
+  example: props => <ButtonSecondary {...props} />,
+})
+
+figma.connect(ButtonOutline, BUTTON_FIGMA_URL, {
+  variant: {type: 'outlined'},
+  props: buttonProps,
+  example: props => <ButtonOutline {...props} />,
+})
+
+figma.connect(ButtonTransparent, BUTTON_FIGMA_URL, {
+  variant: {type: 'ghost'},
+  props: buttonProps,
+  example: props => <ButtonTransparent {...props} />,
+})
+
+figma.connect(Button, BUTTON_FIGMA_URL, {
+  variant: {type: 'link'},
+  props: {
+    children: figma.string('button_text'),
+  },
+  example: props => <Text {...props} style={styles.underline} />,
+})

code-connect/components/Checkbox.figma.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {Checkbox, theme, Typography} from 'rn-base-component'
+import {StyleSheet, View} from 'react-native'
+import {metrics} from 'src/helpers'
+
+const CHECKBOX_FIGMA_URL = '<FIGMA_CHECKBOX>'
+const CHECKBOXES_FIGMA_URL = '<FIGMA_CHECKBOXES>'
+
+const checkboxProps = {
+  isChecked: figma.boolean('checked'),
+  label: figma.boolean('label', {
+    true: figma.string('label_text'),
+    false: undefined,
+  }),
+  disabled: figma.enum('state', {
+    disabled: true,
+  }),
+  fillColor: theme.colors.primary,
+  unfillColor: theme.colors.transparent,
+  checkMarkColor: theme.colors.white,
+  disabledText: theme.colors.gray,
+  borderRadius: metrics.borderRadius,
+  onChange: () => {
+    /* TODO: Handle onChange */
+  },
+}
+
+figma.connect(Checkbox, CHECKBOX_FIGMA_URL, {
+  props: checkboxProps,
+  example: props => <Checkbox {...props} />,
+})
+
+figma.connect(Checkbox, CHECKBOX_FIGMA_URL, {
+  variant: {required: true},
+  props: checkboxProps,
+  example: ({label, ...props}) => (
+    <Checkbox
+      {...props}
+      textComponent={
+        <Typography style={styles.labelText}>
+          {label}
+          <Typography style={styles.requiredAsterisk}> *</Typography>
+        </Typography>
+      }
+    />
+  ),
+})
+
+figma.connect(Checkbox, CHECKBOXES_FIGMA_URL, {
+  props: {
+    checkboxes: figma.children('checkbox'),
+  },
+  example: ({checkboxes}) => <View style={styles.container}>{checkboxes}</View>,
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    gap: metrics.medium,
+  },
+  labelText: {
+    fontSize: metrics.small,
+    color: theme.colors.gray,
+  },
+  requiredAsterisk: {
+    color: theme.colors.error,
+    fontSize: metrics.small,
+    fontWeight: 'bold',
+  },
+})

code-connect/components/CodeInput.figma.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import figma from '@figma/code-connect'
+import {CodeInput, Icon} from 'rn-base-component'
+
+const CODE_INPUTS_FIGMA_URL = '<FIGMA_CODE_INPUTS>'
+
+const codeInputProps = {
+  length: 6,
+  label: figma.boolean('label', {
+    true: figma.string('label_value'),
+    false: undefined,
+  }),
+  error: figma.enum('state', {
+    error: true,
+    enabled: false,
+    success: false,
+  }),
+  errorText: figma.enum('state', {
+    error: figma.textContent('feedback_text'),
+    enabled: undefined,
+    success: undefined,
+  }),
+  success: figma.enum('state', {
+    success: true,
+    enabled: false,
+    error: false,
+  }),
+  helperText: figma.enum('state', {
+    success: figma.textContent('feedback_text'),
+    enabled: undefined,
+    error: undefined,
+  }),
+  rightComponent: figma.boolean('success_icon', {
+    true: <Icon source={require('@/assets/images/success_icon.png')} />,
+    false: figma.enum('state', {
+      error: <Icon source={require('@/assets/images/error_icon.png')} />,
+      enabled: undefined,
+      success: undefined,
+    }),
+  }),
+  placeholderAsDot: true,
+  withCursor: true,
+  secureTextEntry: true,
+  autoFocus: true,
+  onChangeText: () => {
+    /* TODO: Handle onChangeText */
+  },
+  onSubmit: () => {
+    /* TODO: Handle onSubmit */
+  },
+  onClear: () => {
+    /* TODO: Handle onClear */
+  },
+}
+
+figma.connect(CodeInput, CODE_INPUTS_FIGMA_URL, {
+  props: codeInputProps,
+  example: props => <CodeInput {...props} />,
+})