Skip to content

Conversation

LinKCoding
Copy link
Contributor

@LinKCoding LinKCoding commented Aug 14, 2025

Overview

  • Adds a code-connect folder in /packages
  • Moves CLI generated Code Connect files inside the code-connect
  • Adds a MCP section to storybook and includes stories for Figma MCP and code connect usage

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: GM-1194
  • I have run this code to verify it works
  • This PR includes unit tests for the code change
  • This PR includes testing instructions tests for the code change
  • The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

  1. Go to Meta/About /?path=/docs/meta-about--docs
  2. Click on the MCP card (and see that it links to the right page)
  3. Check the info
  4. Click on the new Figma MCP and Code Connect pages
  5. Check that the info is correct
  6. (Optionally) Go to Gamut Figma page
  7. Click around in Atoms and see that code connect looks (mostly?) accurate
  8. ...
  9. Finish and do a celebratory dance

—-
Would love feedback on:

  1. Organization of CodeConnect Atoms in particular
  2. Rules used for Cursor + Copilot
  3. Thoughts on the info provided in docs (anything else come to mind that we should add?)
  4. If certain files aren't necessary, e.g. the landing page example benchmarks

PR Links and Envs

N/A any changes are reflected in Storybook.
The code-connect directory isn't part of the gamut-kit package.

Copy link

nx-cloud bot commented Aug 14, 2025

View your CI Pipeline Execution ↗ for commit 7b04e50

Command Status Duration Result
nx run-many --target=build --all ✅ Succeeded 2s View ↗
nx run-many --target=verify --parallel=3 --all ✅ Succeeded <1s View ↗

☁️ Nx Cloud last updated this comment at 2025-10-16 15:45:34 UTC

* add molecules

* first batch of molecules

* more molecules

* moved menu components into appropriate folders

* moved menu components into appropriate folders pt2

* updated menu

* updated rules for icons

* added modals

* updated pagination, working on popover -- got beak to work

* added pagination, popover, and tabs

* added pagination, popover, and tabs

* updated Tips related components

* more molecules

* updated toasts and video

* deleted some .figma files

* fix import for pagination

* revert testing change

* updated breadcrumbs

* updated breadcrumbs

* more updates on followups

* one more batch of updates for molecules
* updating grid form

* updated grid form

* updated gridform section submit type

* started on datatable

* added remainig datatable

* added List

* undo example changes

* manual format imports

* fix linting

* fix linting
@codecademydev
Copy link
Collaborator

📬Published Alpha Packages:

@codecademy/[email protected]

@codecademydev
Copy link
Collaborator

🚀 Styleguide deploy preview ready!

https://68e9276f1825da5b51a208a3--gamut-preview.netlify.app

Deploy Logs

Comment on lines 1 to 16
import { Meta } from '@storybook/blocks';

import { AboutHeader, Callout } from '~styleguide/blocks';

export const parameters = {
id: 'Code Connect',
title: 'Code Connect',
subtitle:
'Set up the Code Connect locally to enable design to code generation.',
status: 'updating',
};

<Meta title="Meta/MCP/Code Connect" />

<AboutHeader {...parameters} />

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i don't think i even want folks to know how to set up code connect locally - maybe this can instead just show examples of how to view/use CodeConnected components in Figma, link to some documentation, and give information on our code-connect lib

Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this all looks great to me minus my comments on the CodeConnected sections - i honestly am hoping other people's access tokens don't even work to push changes

The Figma implementation looks great for the connected code, even with the more complicated components like List 🔥

Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh - we prob wanna add a backlog ticket to convert this to a proper nx package (more for CI than anything else)

@LinKCoding LinKCoding changed the title feat(CodeConnect): Atoms feat: CodeConnect Oct 14, 2025
@codecademydev
Copy link
Collaborator

📬 Published Alpha Packages:

@codecademy/[email protected]

Copy link
Contributor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants