feature branch: hackathon 2025

.cursor/rules/figma-rules.mdc

@@ -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

.vscode/settings.json

@@ -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
 }

packages/styleguide/src/lib/Meta/About.mdx

@@ -11,6 +11,8 @@ export const parameters = {
 
 <Meta title="Meta/About" />
 
+This is a feature branch for Hackathon 2025~
+
 <AboutHeader {...parameters} />
 
 <TableOfContents

packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx

@@ -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
 

packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx

@@ -1,6 +1,7 @@
 import {
   Box,
   Checkbox,
+  Dialog,
   FillButton,
   FlexBox,
   Modal,
@@ -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>
+    </>
+  );
+};