cognite-create 0.3.6 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cognite-create",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "Create a Next.js app preconfigured with Cognite defaults.",
   "bin": {
     "cognite-create": "./bin/index.js"

package/templates/.cursor/rules/design-system.mdc

@@ -1,5 +1,5 @@
 ---
-description: Whenever you are interacting with design or reference, consult these rules.
+description: Whenever you are generating layouts or components with design instructions or reference images, consult these rules.
 alwaysApply: false
 ---
 
@@ -13,4 +13,7 @@ Responsive design is a must.
 
 Styling must be consistent with the Cognite design patterns.
 
-Do not edit the Cognite components you add directly you can create wrappers around them.
+Do not edit the Cognite components you add directly you can create wrappers around them.
+
+Grids
+Make sure to build up grids using either flex or grid classes from tailwind, consider the arrangement and use the best one for the job. Make sure to align components as neatly as possible.

package/templates/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/templates/src/hooks/use-outside-click.ts

@@ -0,0 +1,25 @@
+import { useEffect, RefObject } from "react";
+
+export function useOutsideClick<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  handler: (event: MouseEvent | TouchEvent) => void
+) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      const el = ref?.current;
+      if (!el || el.contains((event?.target as Node) || null)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}