@codecademy/styleguide 79.0.1-alpha.dda0e7.0 → 79.0.1-alpha.dfd5fd.0

package/src/lib/Foundations/System/Props.mdx

@@ -1,230 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../shared/elements';
-
-export const parameters = {
-  title: 'Props',
-  subtitle:
-    'Reusable CSS-in-JS props with predictable behaviors and a consistent API for responsive CSS.',
-  source: {
-    repo: 'gamut-styles',
-    githubLink:
-      'https://github.com/Codecademy/gamut/blob/af5be6e39cccca5d5d8a1f811c77a7a0b618c914/packages/gamut-styles/src/variance/config.ts#L11',
-  },
-};
-
-<Meta title="Foundations/System/Props" />
-
-<AboutHeader {...parameters} />
-
-We provide a set of out of style functions out of the box through `@codecademy/gamut-styles` that are standardized throughout all of our components. These props are strongly typed and can be included as necessary on any styled component.
-
-System props have a few facets that are important to note:
-
-- They can some times represent multiple properties.
-- They may be restricted to specific token scales but will always have access to global css values like `initial` and `none`.
-- They may have a function that transforms the given value into a standardized value (e.g. `width={.5}` => `width: 50%`)
-
-We've grouped these into a few main groups that affect simliar behaviors: `layout`, `space`, `color`, `border`, `background`, `typography`, `positioning`, `grid`, `flex`, `shadow`.
-
-You may import these groups directly from `gamut-styles`.
-
-```tsx
-import { variance } from '@codecademy/variance';
-import { system } from '@codecademy/gamut-styles';
-
-const Box = styled.div(variance.compose(system.layout, system.positioning));
-
-<Box position="absolute" width="50px" height="50px" />;
-```
-
-Each system prop has 3 important features:
-
-- `properties`: Any number of CSS Properties this prop is responsible for.
-- `scale`: A set of values that determines valid inputs for each prop (e.g. a scale of `colors` will restrict to only theme colors). These are generally aliases for more verbose or opaque css properties allowing you to specify a human readable name in your props. If a prop doesn't have a scale that means it accepts all valid CSSType values as props, however if it does have a scale it will only accept global values and keys of the provided scale.
-- `transform`: A function that changes the prop / scale value prior to adding it to the stylehseet. This allows us to add / change units for properties like `width` and `height`. Or ensure extra defaults or fallbacks are added dynamically.
-
-<br />
-
-## Layout
-
-Props for handling dimensions and other layout specific properties.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Box = styled.div(system.layout);
-
-<Box display="flex" width="50%" height="300px" verticalAlign="middle" />;
-```
-
-<TokenTable rows={getPropRows('layout')} columns={defaultColumns} />
-
-## Space
-
-Props for maintaining specific vertical and horizontal rhythms
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Spacer = styled.div(system.space);
-
-<Spacer p={8} my={[16, 24, 32]} />;
-```
-
-<TokenTable rows={getPropRows('space')} columns={defaultColumns} />
-
-## Typography
-
-Props for text manipulation
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Text = styled.p(system.typography);
-
-<Text fontSize={16} fontFamily="accent" textTransform="uppercase" />;
-```
-
-<TokenTable rows={getPropRows('typography')} columns={defaultColumns} />
-
-## Color
-
-Specific color properties
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Background = styled.div(system.color);
-
-<Background bg="navy" textColor="gray-100" borderColor="blue" />;
-```
-
-<TokenTable rows={getPropRows('color')} columns={defaultColumns} />
-
-## Border
-
-Border styles
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Box = styled.div(system.border);
-
-<Box
-  border={1}
-  borderLeft="none"
-  borderRightStyle="dotted"
-  borderRadius="md"
-/>;
-```
-
-<TokenTable rows={getPropRows('border')} columns={defaultColumns} />
-
-## Flex
-
-Flex specific properties
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const FlexBox = styled.div(system.flex);
-
-<FlexBox flex={1} justifyContent="center" alignItems="flex-start" />;
-```
-
-<TokenTable rows={getPropRows('flex')} columns={defaultColumns} />
-
-## Grid
-
-Grid specific properties
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const GridBox = styled.div(system.grid);
-
-<GridBox gridTemplateColumns="max-content 1fr max-content" columnGap={32} />;
-```
-
-<TokenTable rows={getPropRows('grid')} columns={defaultColumns} />
-
-## Background
-
-Props for background manipulation (sizing / repitition / images), for background color see `colors`.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-import myBg from './myBg.png';
-
-const Box = styled.div(system.background);
-
-<Box background={`url(${myBg}`} backgroundSize="cover" />;
-```
-
-<TokenTable rows={getPropRows('background')} columns={defaultColumns} />
-
-## Positioning
-
-Props that affect stacking and position contexts. Like `top`, `position` and `opacity`.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Box = styled.div(system.positioning);
-
-<Box position="absolute" zIndex={2} top="0" left="0" />;
-```
-
-<TokenTable rows={getPropRows('positioning')} columns={defaultColumns} />
-
-## Shadow
-
-Props for box and text shadows.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Box = styled.div(system.shadow);
-
-<Box
-  boxShadow="0 0 4px rgba(0, 0, 0, .15)"
-  textShadow="0 0 4px rgba(0, 0, 0, .15)"
-/>;
-```
-
-<TokenTable rows={getPropRows('shadows')} columns={defaultColumns} />
-
-## List
-
-Props for adjusting list styles when rendering a component as a `ul` or `ol`
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const Box = styled.div(system.list);
-
-<Box
-  as="ul"
-  listStyleType="square"
-  listStylePosition="inside"
-  listStyleImage="none"
->
-  <Box as="li">a list item</Box>
-</Box>;
-```
-
-<TokenTable rows={getPropRows('list')} columns={defaultColumns} />

package/src/lib/Meta/MCP/About.mdx

@@ -1,28 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import {
-  AboutHeader,
-  addParentPath,
-  TableOfContents,
-} from '~styleguide/blocks';
-
-import { parameters as codeConnectParameters } from './Code Connect.mdx';
-import { parameters as figmaMcpParameters } from './Figma MCP.mdx';
-
-export const parameters = {
-  id: 'Meta/MCP',
-  title: 'MCP',
-  subtitle: 'Documentation related to the Figma Model Context Protocol exclusive to Codecademy + Skillsoft employees.',
-  status: 'static',
-};
-
-<Meta title="Meta/MCP/About" />
-
-<AboutHeader {...parameters} />
-
-<TableOfContents
-  links={addParentPath(parameters.id, [
-    codeConnectParameters,
-    figmaMcpParameters,
-  ])}
-/>

package/src/lib/Meta/MCP/Code Connect.mdx

@@ -1,38 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, Callout, ImageWrapper } from '~styleguide/blocks';
-
-export const parameters = {
-  id: 'Code Connect',
-  title: 'Code Connect',
-  subtitle: 'Exploring Code Connect features in Figma.',
-  status: 'static',
-};
-
-<Meta title="Meta/MCP/Code Connect" />
-
-<AboutHeader {...parameters} />
-
-Code Connect provides Figma with the actual code for Figma components. In providing accurate code, this helps the Figma MCP generate accurate code snippets for designs that use these components.
-
-More information can be found at [Figma Code Connect documentation](https://www.figma.com/code-connect-docs/)
-
-<Callout text="Any changes to Code Connect files should be requested through the Gamut team and NOT done on an individual or a separate team." />
-
-## Code Connected components
-
-When visiting the Figma file, you'll know if a component is set up with Code Connect if you select the component and see the sidebar includes a "Code Connect" section.
-
-<ImageWrapper
-  src="./mcp/component_with_code_connect.png"
-  alt="A Figma component, Badge, with the Code Connect sidebar open."
-/>
-
-### Exploring behavior
-
-For components with Code Connect, you can also click on the "Explore behavior" button to open a modal that allows you to edit the component's props. Editing these props will automatically update the code in the modal's Code Connect section to give you a sense of how to adapt your component accordingly.
-
-<ImageWrapper
-  src="./mcp/component_playground.png"
-  alt="The 'Component playground' modal, with the Badge component's props editable."
-/>

package/src/lib/Meta/MCP/Figma MCP.mdx

@@ -1,89 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, Callout } from '~styleguide/blocks';
-
-export const parameters = {
-  id: 'Figma MCP',
-  title: 'Figma MCP',
-  subtitle:
-    'Set up the Figma MCP locally to enable design to code generation, exclusive to Codecademy + Skillsoft employees.',
-  status: 'static',
-};
-
-<Meta title="Meta/MCP/Figma MCP" />
-
-<AboutHeader {...parameters} />
-
-<Callout text="Any MCP generated code is EXPERIMENTAL! You should always validate the code generated and adapt it to your own needs — do NOT simply use the MCP to generate code and push it to production! Additionally, you must have a Dev or Full account to be able to be able to use the Figma MCP." />
-
-The offical guidance and documentation comes from Figma. Please reference [Figma Dev Mode MCP documentation](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server) for the most up to date information. This documentation below has been adapted to fit the context of the Gamut repository.
-
-## Figma (desktop client app)
-
-Go to [Figma's download page](https://www.figma.com/downloads/) to download the appropriate version of the Figma desktop client for your OS.
-
-### Start up local Figma MCP server
-
-1. In the Figma desktop client, check that you have dev mode enabled.
-2. The right-hand sidebar should have a "MCP server" section
-3. Click on the "Open settings modal" button
-4. In the modal, toggle the status to "On", the the color of the toggle should be green.
-   OR
-5. Click on the Figma icon in the top left-hand corner and select "Actions"
-6. Type "Enable desktop MCP server"
-7. Click on the checkbox, if it's not already checked, to enable the MCP server.
-
-## Set up MCP Client for your text editor/IDE
-
-We currently support Figma MCP for Cursor. Please let the Gamut team know if you'd like support for other editors.
-
-### Cursor
-
-1. Open **Cursor** → **Settings** → **Cursor Settings**.
-2. Go to the **MCP** tab (might be called **MCP & Integrations**) from the left-hand sidebar.
-3. Under **MCP Tools**, click **+ Add MCP server**.
-4. Enter the following configuration and save:
-
-```
-{
-  "mcpServers": {
-    "Figma": {
-      "url": "http://127.0.0.1:3845/mcp"
-    }
-  }
-}
-```
-
-### Verify your MCP server is running
-
-To check if your MCP server is running, you can visit the endpoint: `http://127.0.0.1:3845/mcp`. You should see a response, e.g.: `{"jsonrpc":"2.0","error":{"code":-32001,"message":"Invalid sessionId"},"id":null}`.
-Yes, it's an odd response, but it indicates that the MCP server is running — otherwise if it's not running you'll see an error "This site can’t be reached" on the page.
-
-Similarly you can test the end point using:
-
-```bash
-curl http://127.0.0.1:3845/mcp
-```
-
-## Prompt your MCP client
-
-You can prompt the MCP in two main ways:
-
-1. Provide a link to the node of the design you'd like to generate code for, e.g.:
-
-   > Generate the code for this node: https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=79202-13690&m=dev
-
-2. Selecting the node in the Figma interface, e.g.:
-   > Generate the code for the current selection
-
-In the chat, you may be prompted to allow the Figma commands like `get_code()` to run. You can also add these commands to an allow list in your code editor's settings.
-
-## Feedback for the Gamut team
-
-Please let the Gamut team of any feedback you have, things like:
-
-- If you find that a new rule that you'd like implemented in this repo, please let the Gamut team know.
-- Support for another text editor/IDE.
-- Incorrect code generation
-
-If you have any other feedback or suggestions, feel free to share those as well!