Skip to content

feature branch: hackathon 2025 #3116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions .cursor/rules/figma-rules.mdc
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
description:
globs:
alwaysApply: true
---
- The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG asset
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided
- IMPORTANT: Always use components from `/packages` whenever possible
- 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`
- IMPORTANT: Follow WCAG requirements for accessibility
- Always follow best practices from `/packages/styleguide/src/lib/Meta/Best Practices.mdx`
- IMPORTANT: All patterns should come from `/packages/gamut-patterns` - match the Figma component name to the pattern component
- IMPORTANT: All icons should come from `/packages/gamut-icons` - match the Figma component name to the icon component
- Check if the Figma component name matches a Gamut component name and use that component
- Use the tokens from `packages/gamut-styles/src/variables`
- Use the CodeConnect implementation
12 changes: 11 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,5 +41,15 @@
},
"storyExplorer.storiesGlobs": "packages/styleguide/stories/**/*.stories.mdx",
"jest.jestCommandLine": "node_modules/.bin/jest",
"nxConsole.generateAiAgentRules": true
"nxConsole.generateAiAgentRules": true,
"chat.mcp.discovery.enabled": true
// "mcp": {
// "servers": {
// "Figma Dev Mode MCP": {
// "type": "sse",
// "url": "http://127.0.0.1:3845/sse"
// }
// }
// },
// "chat.agent.enabled": true
}
2 changes: 2 additions & 0 deletions packages/styleguide/src/lib/Meta/About.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export const parameters = {

<Meta title="Meta/About" />

This is a feature branch for Hackathon 2025~

<AboutHeader {...parameters} />

<TableOfContents
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Use a Modal to create a dialog on sits on top of a full screen overlay.

Setting the `size` to `'fluid'` will make the width of the Modal fit its content.

<Canvas of={ModalStories.Fluid} />
<Canvas of={ModalStories.ARobotMadeThis} />

### Large

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
Box,
Checkbox,
Dialog,
FillButton,
FlexBox,
Modal,
Expand Down Expand Up @@ -345,3 +346,52 @@ export const MultipleViewsDisabled: React.FC = () => {
</>
);
};

const ImagePlaceholder = () => {
return (
<FlexBox
alignItems="center"
bg="background-primary"
center
flexDirection="column"
height="200px"
justifyContent="center"
width="100%"
>
<Text fontSize={16} fontWeight="bold" mb={8}>
Replace with any image
</Text>
<Text fontSize={14}>16:9</Text>
</FlexBox>
);
};

export const ARobotMadeThis: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);

return (
<>
<FillButton onClick={() => setIsOpen(true)}>Open Figma Dialog</FillButton>
<Dialog
cancelCta={{
children: 'Cancel',
onClick: () => setIsOpen(false),
}}
confirmCta={{
children: 'Primary action',
onClick: () => setIsOpen(false),
}}
image={<ImagePlaceholder />}
isOpen={isOpen}
size="small"
title="Headline"
onRequestClose={() => setIsOpen(false)}
>
<Text fontSize={14}>
Optional 1-2 lines of explanation that provides relevant details.
Lorem ipsum cras nulla massa odio ligula.
</Text>
</Dialog>
</>
);
};
Loading