chore: add Figma code connect (#424)

utilitywarehouse · Jul 12, 2024 · 8b0a57b · 8b0a57b
1 parent c715fd8
commit 8b0a57b
Show file tree

Hide file tree

Showing 12 changed files with 1,006 additions and 20 deletions.
diff --git a/apps/native-ui-storybook/figma-connect/Actionsheet.figma.tsx b/apps/native-ui-storybook/figma-connect/Actionsheet.figma.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  Actionsheet,
+  ActionsheetBackdrop,
+  ActionsheetContent,
+  ActionsheetDragIndicator,
+  ActionsheetDragIndicatorWrapper,
+} from '@utilitywarehouse/native-ui/lab';
+import figma from '@figma/code-connect';
+
+const showActionsheet = true;
+const handleClose = () => console.log('close');
+
+figma.connect(
+  Actionsheet,
+  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=5680-5281&m=dev',
+  {
+    props: {
+      content: figma.enum('content', {
+        custom: '{content goes here}',
+      }),
+    },
+    example: ({ content }) => (
+      <Actionsheet isOpen={showActionsheet} onClose={handleClose} zIndex={999}>
+        <ActionsheetBackdrop />
+        <ActionsheetContent h="$64" zIndex={999}>
+          <ActionsheetDragIndicatorWrapper>
+            <ActionsheetDragIndicator />
+          </ActionsheetDragIndicatorWrapper>
+          {content}
+        </ActionsheetContent>
+      </Actionsheet>
+    ),
+  }
+);
diff --git a/apps/native-ui-storybook/figma-connect/Alert.figma.tsx b/apps/native-ui-storybook/figma-connect/Alert.figma.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Alert } from '@utilitywarehouse/native-ui';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  Alert,
+  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=5232-8219&m=dev',
+  {
+    props: {
+      linkText: figma.string('link'),
+      showTitle: figma.boolean('Title?', {
+        true: figma.string('title'),
+        false: undefined,
+      }),
+      title: figma.string('title'),
+      iconButton: figma.boolean('Icon Button?', {
+        true: () => console.log('icon button pressed'),
+        false: undefined,
+      }),
+      showLink: figma.boolean('link?', {
+        true: () => console.log('link pressed'),
+        false: undefined,
+      }),
+      text: figma.string('text'),
+      close: figma.boolean('close', {
+        true: () => console.log('close'),
+        false: undefined,
+      }),
+      colorScheme: figma.enum('colorScheme', {
+        red: 'red',
+        cyan: 'cyan',
+        gold: 'gold',
+        green: 'green',
+      }),
+    },
+    example: ({ colorScheme, close, iconButton, showLink, showTitle, text, linkText }) => (
+      <Alert
+        colorScheme={colorScheme}
+        title={showTitle}
+        text={text}
+        onClose={close}
+        onPressIconButton={iconButton}
+        linkText={linkText}
+        onPressLink={showLink}
+      />
+    ),
+  }
+);
diff --git a/apps/native-ui-storybook/figma-connect/Badge.figma.tsx b/apps/native-ui-storybook/figma-connect/Badge.figma.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Badge, BadgeText } from '@utilitywarehouse/native-ui';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  Badge,
+  'https://www.figma.com/file/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?type=design&node-id=3386-6376&mode=dev',
+  {
+    links: [
+      {
+        name: 'Storybook - Docs',
+        url: 'https://uw-native-ui.vercel.app/?path=/docs/components-badge--docs',
+      },
+    ],
+    props: {
+      text: figma.string('text'),
+      strong: figma.boolean('strong'),
+      colorScheme: figma.enum('colorScheme', {
+        cyan: 'cyan',
+        gold: 'gold',
+        green: 'green',
+        grey: 'grey',
+        red: 'red',
+      }),
+      size: figma.enum('size', {
+        'large (default)': 'large',
+        small: 'small',
+      }),
+      borderless: figma.boolean('borderless?'),
+    },
+    example: ({ text, colorScheme, strong, size, borderless }) => (
+      <Badge colorScheme={colorScheme} strong={strong} size={size} borderless={borderless}>
+        <BadgeText>{text}</BadgeText>
+      </Badge>
+    ),
+  }
+);
diff --git a/apps/native-ui-storybook/figma-connect/Button.figma.tsx b/apps/native-ui-storybook/figma-connect/Button.figma.tsx
@@ -0,0 +1,229 @@
+import React from 'react';
+import { Button, ButtonIcon, ButtonText } from '@utilitywarehouse/native-ui';
+import figma from '@figma/code-connect';
+
+const props = {
+  iconPosition: figma.boolean('Icon Left?', {
+    true: 'left',
+    false: figma.boolean('Icon Right?', {
+      true: 'right',
+      false: undefined,
+    }),
+  }),
+  icon: figma.boolean('Icon Right?', {
+    true: figma.instance('Icon Right'),
+    false: figma.boolean('Icon Left?', {
+      true: figma.instance('Icon Left'),
+      false: undefined,
+    }),
+  }),
+  iconRight: figma.instance('Icon Right'),
+  iconLeft: figma.instance('Icon Left'),
+  text: figma.string('Text'),
+  colorScheme: figma.enum('colorScheme', {
+    cyan: 'cyan',
+    green: 'green',
+    red: 'red',
+  }),
+  size: figma.enum('size', {
+    'medium - 48 (default)': 'medium',
+    'large - 56': 'large',
+    'small - 32': 'small',
+  }),
+  disabled: figma.enum('state', {
+    disabled: true,
+  }),
+  loading: figma.enum('state', {
+    loading: true,
+  }),
+  inverted: figma.boolean('inverted'),
+};
+
+// Solid Button
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev',
+  {
+    props,
+    links: [
+      {
+        name: 'Documentation',
+        url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
+      },
+    ],
+    example: ({ text, inverted, disabled, loading, colorScheme, size, icon, iconPosition }) => (
+      <Button
+        variant="solid"
+        onPress={() => console.log('button pressed')}
+        colorScheme={colorScheme}
+        size={size}
+        inverted={inverted}
+        disabled={disabled}
+        loading={loading}
+        iconPosition={iconPosition}
+        icon={icon}
+      >
+        {text}
+      </Button>
+    ),
+  }
+);
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev',
+  {
+    props,
+    links: [
+      {
+        name: 'Documentation',
+        url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
+      },
+    ],
+    variant: {
+      'Icon Right?': true,
+      'Icon Left?': true,
+    },
+    example: ({ text, inverted, disabled, colorScheme, size, iconLeft, iconRight }) => (
+      <Button
+        variant="solid"
+        onPress={() => console.log('button pressed')}
+        colorScheme={colorScheme}
+        size={size}
+        inverted={inverted}
+        disabled={disabled}
+      >
+        <ButtonIcon as={iconLeft} />
+        <ButtonText>{text}</ButtonText>
+        <ButtonIcon as={iconRight} />
+      </Button>
+    ),
+  }
+);
+
+// Outline Button
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7250-1321&m=dev',
+  {
+    props,
+    links: [
+      {
+        name: 'Documentation',
+        url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
+      },
+    ],
+    example: ({ text, inverted, disabled, loading, colorScheme, size, icon, iconPosition }) => (
+      <Button
+        variant="outline"
+        onPress={() => console.log('button pressed')}
+        colorScheme={colorScheme}
+        size={size}
+        inverted={inverted}
+        disabled={disabled}
+        loading={loading}
+        iconPosition={iconPosition}
+        icon={icon}
+      >
+        {text}
+      </Button>
+    ),
+  }
+);
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev',
+  {
+    props,
+    links: [
+      {
+        name: 'Documentation',
+        url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
+      },
+    ],
+    variant: {
+      'Icon Right?': true,
+      'Icon Left?': true,
+    },
+    example: ({ text, inverted, disabled, colorScheme, size, iconLeft, iconRight }) => (
+      <Button
+        variant="outline"
+        onPress={() => console.log('button pressed')}
+        colorScheme={colorScheme}
+        size={size}
+        inverted={inverted}
+        disabled={disabled}
+      >
+        <ButtonIcon as={iconLeft} />
+        <ButtonText>{text}</ButtonText>
+        <ButtonIcon as={iconRight} />
+      </Button>
+    ),
+  }
+);
+
+// Ghost button
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7250-2103&m=dev',
+  {
+    props,
+    links: [
+      {
+        name: 'Documentation',
+        url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
+      },
+    ],
+    example: ({ text, inverted, disabled, loading, colorScheme, size, icon, iconPosition }) => (
+      <Button
+        variant="ghost"
+        onPress={() => console.log('button pressed')}
+        colorScheme={colorScheme}
+        size={size}
+        inverted={inverted}
+        disabled={disabled}
+        loading={loading}
+        iconPosition={iconPosition}
+        icon={icon}
+      >
+        {text}
+      </Button>
+    ),
+  }
+);
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev',
+  {
+    props,
+    links: [
+      {
+        name: 'Documentation',
+        url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
+      },
+    ],
+    variant: {
+      'Icon Right?': true,
+      'Icon Left?': true,
+    },
+    example: ({ text, inverted, disabled, colorScheme, size, iconLeft, iconRight }) => (
+      <Button
+        variant="ghost"
+        onPress={() => console.log('button pressed')}
+        colorScheme={colorScheme}
+        size={size}
+        inverted={inverted}
+        disabled={disabled}
+      >
+        <ButtonIcon as={iconLeft} />
+        <ButtonText>{text}</ButtonText>
+        <ButtonIcon as={iconRight} />
+      </Button>
+    ),
+  }
+);
diff --git a/apps/native-ui-storybook/figma-connect/Checkbox.figma.tsx b/apps/native-ui-storybook/figma-connect/Checkbox.figma.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Checkbox, CheckboxIndicator, CheckboxLabel } from '@utilitywarehouse/native-ui';
+import figma from '@figma/code-connect';
+
+const props = {
+  helperText: figma.boolean('Helper Text?'),
+  isDisabled: figma.boolean('isDisabled'),
+  invalid: figma.boolean('invalid'),
+};
+
+figma.connect(
+  Checkbox,
+  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=5623-561&m=dev',
+  {
+    props,
+    imports: [
+      'import { Checkbox, CheckboxIndicator, CheckboxLabel } from "@utilitywarehouse/native-ui";',
+    ],
+    example: ({ isDisabled }) => (
+      <Checkbox
+        value="someValue"
+        onChange={(isChecked: boolean) => console.log(isChecked)}
+        isDisabled={isDisabled}
+      >
+        <CheckboxIndicator />
+        <CheckboxLabel>Label</CheckboxLabel>
+      </Checkbox>
+    ),
+  }
+);
+
+// TODO: Add variants with helperText when it's implemented