feat: CodeConnect

.cursor/rules/figma-rules.mdc

@@ -0,0 +1,46 @@
+---
+description: Figma Dev Mode MCP rules
+globs:
+alwaysApply: true
+---
+
+# Figma Dev Mode MCP Rules
+
+You are an expert developer working with the Codecademy Gamut design system and Figma Dev Mode MCP integration.
+
+When generating code from Figma designs, follow these rules:
+
+## Asset Management
+
+- The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets
+- **IMPORTANT**: do NOT use or create placeholders if a localhost source is provided
+
+## Component Usage
+
+## Component Usage
+
+- **IMPORTANT**: Always use components from `/packages` whenever possible
+- Check if the Figma component name matches a Gamut component name and use that component
+- **IMPORTANT**: All patterns should come from `/packages/gamut-patterns` - use the design's metadata to match the Figma component name to the pattern component
+- **IMPORTANT**: All illustrations should come from `/packages/gamut-illustrations` - use the design's metadata to match the Figma component name to the illustration component
+- **IMPORTANT**: All icons should come from `/packages/gamut-icons` - use the design's metadata to find the Figma component's icon's name and find the matching Gamut icon component
+
+## Styling Guidelines
+
+- Prioritize using semantic tokens and component props over Figma fidelity
+- Avoid hardcoded values, use semantic design tokens whenever possible
+- The Background component is the exception - use color token names (i.e, navy, white, etc) and not a semantic token
+- **IMPORTANT**: Do not use inline styles, whenever possible use emotion and the css-in-js utilities from `/packages/gamut-styles`
+- Follow the rules from `packages/styleguide/src/lib/Foundations/System`
+- Use the tokens from `packages/gamut-styles/src/variables`
+
+## Accessibility & Best Practices
+
+- **IMPORTANT**: Follow WCAG requirements for accessibility
+- Always follow best practices from `/packages/styleguide/src/lib/Meta/Best Practices.mdx`
+
+## Implementation
+
+- Use the CodeConnect implementation when available
+- Generate clean, maintainable React code using TypeScript
+- Follow the existing Gamut patterns and conventions

.github/instructions/figma.instructions.md

@@ -0,0 +1,42 @@
+---
+applyTo: '**/*.tsx,**/*.jsx'
+---
+
+# Figma Dev Mode MCP Rules
+
+You are an expert developer working with the Codecademy Gamut design system and Figma Dev Mode MCP integration.
+
+When generating code from Figma designs, follow these rules:
+
+## Asset Management
+
+- The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets
+- **IMPORTANT**: do NOT use or create placeholders if a localhost source is provided
+
+## Component Usage
+
+- **IMPORTANT**: Always use components from `/packages` whenever possible
+- Check if the Figma component name matches a Gamut component name and use that component
+- **IMPORTANT**: All patterns should come from `/packages/gamut-patterns` - use the design's metadata to match the Figma component name to the pattern component
+- **IMPORTANT**: All illustrations should come from `/packages/gamut-illustrations` - use the design's metadata to match the Figma component name to the illustration component
+- **IMPORTANT**: All icons should come from `/packages/gamut-icons` - use the design's metadata to find the Figma component's icon's name and find the matching Gamut icon component
+
+## Styling Guidelines
+
+- Prioritize using semantic tokens and component props over Figma fidelity
+- Avoid hardcoded values, use semantic design tokens whenever possible
+- The Background component is the exception - use color token names (i.e, navy, white, etc) and not a semantic token
+- **IMPORTANT**: Do not use inline styles, whenever possible use emotion and the css-in-js utilities from `/packages/gamut-styles`
+- Follow the rules from `packages/styleguide/src/lib/Foundations/System`
+- Use the tokens from `packages/gamut-styles/src/variables`
+
+## Accessibility & Best Practices
+
+- **IMPORTANT**: Follow WCAG requirements for accessibility
+- Always follow best practices from `/packages/styleguide/src/lib/Meta/Best Practices.mdx`
+
+## Implementation
+
+- Use the CodeConnect implementation when available
+- Generate clean, maintainable React code using TypeScript
+- Follow the existing Gamut patterns and conventions

figma.config.json

@@ -0,0 +1,7 @@
+{
+  "codeConnect": {
+    "include": ["packages/code-connect/**/*.figma.{tsx,jsx}"],
+    "label": "React",
+    "interactiveSetupFigmaFileUrl": "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=23-5&p=f&m=dev"
+  }
+}

packages/code-connect/Atoms/Anchor.figma.tsx

@@ -0,0 +1,34 @@
+import { Anchor } from '@codecademy/gamut';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Anchor,
+  'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=19220%3A21856',
+  {
+    props: {
+      children: figma.string('✏️ label'),
+      icon: figma.boolean('👁 leading icon', {
+        true: figma.instance('↳ leading icon'),
+        false: figma.boolean('👁 trailing icon', {
+          true: figma.instance('↳ trailing icon'),
+          false: undefined,
+        }),
+      }),
+      variant: figma.enum('variant', {
+        Inline: 'inline',
+        Interface: 'interface',
+        Standard: 'standard',
+        'Standard-secondary': 'standard-secondary',
+      }),
+    },
+    example: ({ children, ...props }) => <Anchor {...props}>{children}</Anchor>,
+  }
+);

packages/code-connect/Atoms/Badge.figma.tsx

@@ -0,0 +1,35 @@
+import { Badge } from '@codecademy/gamut';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Badge,
+  'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=8200%3A8349',
+  {
+    props: {
+      children: figma.string('✏️ label'),
+      icon: figma.instance('↳ icon'),
+      variant: figma.enum('variant', {
+        primary: 'primary',
+        secondary: 'secondary',
+        tertiary: 'tertiary',
+        tertiaryFill: 'tertiaryFill',
+        accent: 'accent',
+      }),
+      size: figma.enum('size', {
+        base: 'base',
+        sm: 'sm',
+      }),
+    },
+    example: ({ children, ...props }: any) => (
+      <Badge {...props}>{children}</Badge>
+    ),
+  }
+);

packages/code-connect/Atoms/Buttons/CTAButton.figma.tsx

@@ -0,0 +1,30 @@
+import { CTAButton } from '@codecademy/gamut';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  CTAButton,
+  'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1615%3A1914',
+  {
+    props: {
+      children: figma.string('✏️ label'),
+      icon: figma.boolean('👁 leading icon', {
+        true: figma.instance('↳ leading icon'),
+        false: figma.boolean('👁 trailing icon', {
+          true: figma.instance('↳ trailing icon'),
+          false: undefined,
+        }),
+      }),
+    },
+    example: ({ children, ...props }: any) => (
+      <CTAButton {...props}>{children}</CTAButton>
+    ),
+  }
+);

packages/code-connect/Atoms/Buttons/FillButton.figma.tsx

@@ -0,0 +1,40 @@
+import { FillButton } from '@codecademy/gamut';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  FillButton,
+  'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1106%3A7',
+  {
+    props: {
+      icon: figma.boolean('👁 leading icon', {
+        true: figma.instance('↳ leading icon'),
+        false: figma.boolean('👁 trailing icon', {
+          true: figma.instance('↳ trailing icon'),
+          false: undefined,
+        }),
+      }),
+      children: figma.string('✏️ label'),
+      variant: figma.enum('variant', {
+        primary: 'primary',
+        secondary: 'secondary',
+        danger: 'danger',
+      }),
+      size: figma.enum('size', {
+        normal: 'normal',
+        small: 'small',
+        large: 'large',
+      }),
+    },
+    example: ({ children, ...props }: any) => (
+      <FillButton {...props}>{children}</FillButton>
+    ),
+  }
+);

packages/code-connect/Atoms/Buttons/IconButton.figma.tsx

@@ -0,0 +1,30 @@
+import { IconButton } from '@codecademy/gamut';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  IconButton,
+  'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1106%3A90',
+  {
+    props: {
+      icon: figma.instance('icon'),
+      size: figma.enum('size', {
+        normal: 'normal',
+        small: 'small',
+        large: 'large',
+      }),
+      toolTipInfo: figma.nestedProps('tooltip', {
+        tip: figma.textContent('✏️ tooltip'),
+      }),
+    },
+    // @ts-expect-error - props doesn't full align with code implementation
+    example: (props) => <IconButton {...props} tip={props.toolTipInfo?.tip} />,
+  }
+);

packages/code-connect/Atoms/Buttons/StrokeButton.figma.tsx

@@ -0,0 +1,40 @@
+import { StrokeButton } from '@codecademy/gamut';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  StrokeButton,
+  'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1106%3A48',
+  {
+    props: {
+      children: figma.string('✏️ label'),
+      icon: figma.boolean('👁 leading icon', {
+        true: figma.instance('↳ leading icon'),
+        false: figma.boolean('👁 trailing icon', {
+          true: figma.instance('↳ trailing icon'),
+          false: undefined,
+        }),
+      }),
+      variant: figma.enum('variant', {
+        primary: 'primary',
+        secondary: 'secondary',
+        danger: 'danger',
+      }),
+      size: figma.enum('size', {
+        normal: 'normal',
+        small: 'small',
+        large: 'large',
+      }),
+    },
+    example: ({ children, ...props }: any) => (
+      <StrokeButton {...props}>{children}</StrokeButton>
+    ),
+  }
+);

packages/code-connect/Atoms/Buttons/TextButton.figma.tsx

@@ -0,0 +1,35 @@
+import { TextButton } from '@codecademy/gamut';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  TextButton,
+  'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1106%3A69',
+  {
+    props: {
+      children: figma.string('✏️ label'),
+      icon: figma.boolean('👁 leading icon', {
+        true: figma.instance('↳ leading icon'),
+        false: figma.boolean('👁 trailing icon', {
+          true: figma.instance('↳ trailing icon'),
+          false: undefined,
+        }),
+      }),
+      size: figma.enum('size', {
+        small: 'small',
+        normal: 'normal',
+        large: 'large',
+      }),
+    },
+    example: ({ children, ...props }: any) => (
+      <TextButton {...props}>{children}</TextButton>
+    ),
+  }
+);

packages/code-connect/Atoms/Card.figma.tsx

@@ -0,0 +1,38 @@
+import { Card } from '@codecademy/gamut';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Card,
+  'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=20111%3A63391',
+  {
+    props: {
+      variant: figma.enum('variant', {
+        Default: 'default',
+        White: 'white',
+        Yellow: 'yellow',
+        Beige: 'beige',
+        Navy: 'navy',
+        Hyper: 'hyper',
+      }),
+      shadow: figma.enum('shadow', {
+        'pattern-right': 'patternRight',
+        'pattern-left': 'patternLeft',
+        outline: 'outline',
+        none: 'none',
+      }),
+      isInteractive: figma.boolean('isInteractive'),
+      children: figma.children('.Card Content'),
+    },
+    example: ({ children, ...props }: any) => (
+      <Card {...props}>{children}</Card>
+    ),
+  }
+);