Add ContextMenu component

Author: emilkowalski

components/ContextMenu/ContextMenu.js

@@ -0,0 +1,62 @@
+import { styled } from "stitches.config";
+import { keyframes } from "@stitches/react";
+import * as ContextMenu from "@radix-ui/react-context-menu";
+
+export default ({ children }) => (
+    <ContextMenu.Root>
+        <ContextMenu.Trigger>{children}</ContextMenu.Trigger>
+        <Content>
+            <Item onSelect={() => console.log("cut")}>CSS</Item>
+            <Item onSelect={() => console.log("cut")}>SCSS</Item>
+            <Item onSelect={() => console.log("copy")}>Stitches</Item>
+            <Item onSelect={() => console.log("paste")}>Styled Components</Item>
+            <Separator />
+            <Item onSelect={() => console.log("paste")}>JSX</Item>
+            <Item onSelect={() => console.log("paste")}>HTML</Item>
+        </Content>
+    </ContextMenu.Root>
+);
+
+const reveal = keyframes({
+    "0%": { transform: "scale(0.9)", opacity: 0 },
+    "100%": { transform: "scale(1)", opacity: 1 },
+});
+
+const Content = styled(ContextMenu.Content, {
+    minWidth: 160,
+    backgroundColor: "white",
+    borderRadius: 6,
+    padding: 5,
+    boxShadow: "0px 5px 15px -5px hsla(206,22%,7%,.15)",
+    transformOrigin: "var(--radix-context-menu-content-transform-origin)",
+    animation: `${reveal} 0.1s ease`,
+});
+
+const Separator = styled(ContextMenu.Separator, {
+    height: 1,
+    background: "hsl(208, 18%, 92%)",
+    margin: 4,
+});
+
+const Wrapper = styled(ContextMenu.Root, {
+    minWidth: 160,
+    background: "$white",
+    borderRadius: "$1",
+    padding: 4,
+});
+
+const Item = styled(ContextMenu.Item, {
+    fontSize: 13,
+    padding: "5px 10px",
+    borderRadius: "$1",
+    cursor: "default",
+    height: 28,
+    padding: "4px 8px",
+    color: "$gray",
+
+    "&:focus": {
+        outline: "none",
+        backgroundColor: "hsl(207, 11%, 96%)",
+        color: "$darkGray",
+    },
+});

components/ContextMenu/index.js

@@ -0,0 +1 @@
+export { default } from "./ContextMenu";

components/Grid/Grid.js

@@ -2,14 +2,16 @@
 import GridItem from "./components/GridItem";
 
 import { styled } from "stitches.config";
-import UnderlineLeftRight from "@styles/underlineLeftRight";
+import snippets from "@components/Snippets";
 
 const Grid = ({ children }) => {
     return (
         <Wrapper>
-            <GridItem>
-                <UnderlineLeftRight>Hover me</UnderlineLeftRight>
-            </GridItem>
+            {snippets.map((Snippet) => (
+                <GridItem>
+                    <Snippet>Hover me</Snippet>
+                </GridItem>
+            ))}
         </Wrapper>
     );
 };

components/Grid/components/GridItem.js

@@ -1,13 +1,19 @@
 import { styled } from "stitches.config";
 
+import ContextMenu from "@components/ContextMenu";
+
 const GridItem = ({ children }) => {
-    return <Wrapper>{children}</Wrapper>;
+    return (
+        <ContextMenu>
+            <Wrapper>{children}</Wrapper>
+        </ContextMenu>
+    );
 };
 
 const Wrapper = styled("div", {
-    height: "120px",
+    height: 120,
     backgroundColor: "$darkGray",
-    borderRadius: "$1",
+    borderRadius: "$2",
     display: "flex",
     justifyContent: "center",
     alignItems: "center",

styles/underlineLeftRight.js renamed to components/Snippets/UnderlineLeftRight.js

@@ -1,6 +1,10 @@
 import { styled } from "stitches.config.js";
 
-const UnderlineLeftRight = styled("a", {
+const UnderlineLeftRight = () => {
+    return <Wrapper>Hover me</Wrapper>;
+};
+
+const Wrapper = styled("a", {
     display: "inline-block",
     position: "relative",
     cursor: "pointer",

components/Snippets/index.js

@@ -0,0 +1,5 @@
+import UnderlineLeftRight from "./UnderlineLeftRight";
+
+const allSnippets = [UnderlineLeftRight];
+
+export default allSnippets;

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@radix-ui/react-context-menu": "^0.0.19",
     "@stitches/react": "^0.2.0-canary.5",
     "next": "10.2.3",
     "react": "17.0.2",

pages/_app.js

@@ -1,4 +1,5 @@
 import { globalStyles } from "@styles/global";
+import "@styles/animations.css";
 
 import Header from "@components/Header";
 

stitches.config.js

@@ -27,6 +27,7 @@ export const { styled, getCssString, global } = createCss({
         },
         radii: {
             1: "7px",
+            2: "7px",
         },
     },
 });