@zeytal/grid
Version:
Small layout grid utility. Align everything perfectly. Simplify your responsive design coding process without sacrificing effectiveness. Hit G on your keyboard to toggle your grid on and off.
1 lines • 19.1 kB
Source Map (JSON)
{"version":3,"sources":["../src/index.tsx","#style-inject:#style-inject","../src/styles.css"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport \"./styles.css\";\n\n/* eslint-disable */\n// Create a type for an enumeration of positive integers starting from 1 to N - 1\ntype BuildPositiveRange<\n N extends number,\n T extends any[] = [1],\n R = T[\"length\"],\n> = T[\"length\"] extends N\n ? R\n : BuildPositiveRange<N, [...T, 1], R | T[\"length\"]>;\n/* eslint-enable */\n\n// Positive numbers from 1 to 40 for columns\ntype PositiveColumnNumber = BuildPositiveRange<41>;\n\ntype BreakpointEntry = {\n columns: PositiveColumnNumber;\n gutter?: number;\n};\n\ntype BreakpointName<T extends number> = `${T}x`;\n\ntype Breakpoint<T extends number> = {\n [K in BreakpointName<T>]: BreakpointEntry;\n};\n\n// Ensure at least one breakpoint using a required property\nexport type Breakpoints = Breakpoint<0> & Breakpoint<number>;\n\nconst defaultBreakpoints: Breakpoints = {\n \"0x\": {\n columns: 24,\n gutter: 0,\n },\n \"320x\": {\n columns: 24,\n gutter: 0,\n },\n \"400x\": {\n columns: 24,\n gutter: 0,\n },\n \"480x\": {\n columns: 24,\n gutter: 0,\n },\n \"576x\": {\n columns: 24,\n gutter: 0,\n },\n \"672x\": {\n columns: 24,\n gutter: 0,\n },\n \"768x\": {\n columns: 24,\n gutter: 0,\n },\n \"896x\": {\n columns: 24,\n gutter: 0,\n },\n \"1024x\": {\n columns: 24,\n gutter: 0,\n },\n \"1152x\": {\n columns: 24,\n gutter: 0,\n },\n \"1280x\": {\n columns: 24,\n gutter: 0,\n },\n \"1408x\": {\n columns: 24,\n gutter: 0,\n },\n \"1536x\": {\n columns: 24,\n gutter: 0,\n },\n \"1920x\": {\n columns: 24,\n gutter: 0,\n },\n};\n\ntype Color = \"blue\" | \"teal\" | \"green\" | \"amber\" | \"red\" | \"purple\";\n\nconst colors: Array<Color> = [\n \"blue\",\n \"teal\",\n \"green\",\n \"amber\",\n \"red\",\n \"purple\",\n];\n\ntype HUDPosition = \"top\" | \"bottom\";\n\nexport interface GridOverlayProps {\n breakpoints?: Breakpoints;\n active?: boolean;\n maxWidth?: \"last-breakpoint\" | \"none\";\n}\n\nfunction GridOverlay({\n breakpoints = defaultBreakpoints,\n active = true,\n maxWidth = \"last-breakpoint\",\n}: GridOverlayProps) {\n const [isActive, setIsActive] = useState(active);\n const [columnsNumber, setColumnsNumber] = useState(breakpoints[\"0x\"].columns);\n const [gutterSize, setGutterSize] = useState(0);\n const [selectedBreakpoint, setSelectedBreakpoint] = useState(\"\");\n const [color, setColor] = useState(colors[0] as Color);\n const [HUDPosition, setHUDPosition] = useState(\"top\" as HUDPosition);\n\n const breakpointValues = Object.entries(breakpoints).map(\n ([key, value], index) => ({\n name: key,\n width: parseInt(key.replace(\"x\", \"\"), 10),\n columns: value.columns,\n gutter: (value.gutter ?? 0) >= 0 ? (value.gutter ?? 0) : 0,\n color: colors[index % colors.length] as Color,\n }),\n );\n\n const computeColumns = () => {\n if (!breakpointValues[0]) return;\n\n const width = window.innerWidth;\n\n const breakpoint = breakpointValues.reduce(\n (previousBreakpoint, currentBreakpoint) => {\n return width >= currentBreakpoint.width &&\n currentBreakpoint.width > previousBreakpoint.width\n ? currentBreakpoint\n : previousBreakpoint;\n },\n breakpointValues[0],\n );\n\n setColumnsNumber(breakpoint.columns);\n setGutterSize(breakpoint.gutter);\n setSelectedBreakpoint(breakpoint.name);\n setColor(breakpoint.color);\n };\n\n useEffect(() => {\n computeColumns();\n window.addEventListener(\"resize\", computeColumns);\n\n return () => {\n window.removeEventListener(\"resize\", computeColumns);\n };\n }, []);\n\n const toggleGrid = ({ isComposing, key }: KeyboardEvent) => {\n // !key => return when form autocomplete triggers a keydown event because of undefined key\n if (isComposing || !key || key.toLowerCase() !== \"g\") return;\n setIsActive((prevState) => !prevState);\n };\n\n useEffect(() => {\n document.addEventListener(\"keydown\", toggleGrid);\n return () => {\n document.removeEventListener(\"keydown\", toggleGrid);\n };\n }, []);\n\n const changeHUDPosition = () => {\n if (HUDPosition === \"top\") {\n setHUDPosition(\"bottom\");\n } else {\n setHUDPosition(\"top\");\n }\n };\n\n return (\n <div\n data-active={isActive}\n className=\"gd-pointer-events-none gd-relative gd-z-[9999] data-[active=false]:gd-hidden\"\n >\n <div\n className={[\n \"gd-fixed gd-inset-x-0 gd-inset-y-0 gd-z-50 gd-flex gd-h-full\",\n \"data-[color=blue]:gd-bg-blue-700/[0.1] data-[color=blue]:gd-text-blue-400\",\n \"data-[color=teal]:gd-bg-teal-700/[0.1] data-[color=teal]:gd-text-teal-400\",\n \"data-[color=green]:gd-bg-green-700/[0.1] data-[color=green]:gd-text-green-400\",\n \"data-[color=amber]:gd-bg-amber-700/[0.1] data-[color=amber]:gd-text-amber-400\",\n \"data-[color=red]:gd-bg-red-700/[0.1] data-[color=red]:gd-text-red-400\",\n \"data-[color=purple]:gd-bg-purple-700/[0.1] data-[color=purple]:gd-text-purple-400\",\n ].join(\" \")}\n data-color={color}\n style={{\n maxWidth:\n maxWidth === \"last-breakpoint\"\n ? (breakpointValues.slice(-1)[0]?.width ?? undefined)\n : undefined,\n marginLeft: maxWidth === \"last-breakpoint\" ? \"auto\" : undefined,\n marginRight: maxWidth === \"last-breakpoint\" ? \"auto\" : undefined,\n }}\n >\n <button\n type=\"button\"\n className=\"gd-pointer-events-auto gd-absolute gd-left-1/2 gd--translate-x-1/2 gd-overflow-hidden gd-rounded-[999px] gd-border-[1px] gd-border-current gd-bg-[black] gd-shadow-[0_0_5px_0_rgba(0,0,0,1)] data-[hud-position=bottom]:gd-bottom-[16px] data-[hud-position=top]:gd-top-[16px]\"\n onClick={changeHUDPosition}\n data-hud-position={HUDPosition}\n >\n <p className=\"gd-font-medium gd-px-[12px] gd-py-[4px] gd-font-sans gd-text-[white]/[0.9]\">\n {selectedBreakpoint}\n </p>\n </button>\n {Array.from({ length: columnsNumber }).map((_, index) => (\n <div\n key={index}\n className=\"gd-h-full gd-w-full gd-border-l-[1px] gd-border-l-current last:gd-border-r-[1px] last:gd-border-r-current\"\n style={{ paddingLeft: gutterSize, paddingRight: gutterSize }}\n >\n {gutterSize > 0 && (\n <div className=\"gd-h-full gd-w-full gd-border-l-[1px] gd-border-l-current last:gd-border-r-[1px] last:gd-border-r-current\" />\n )}\n </div>\n ))}\n </div>\n </div>\n );\n}\nGridOverlay.displayName = \"GridOverlay\";\n\nexport { GridOverlay };\n","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\"*,\\n::before,\\n::after {\\n --tw-border-spacing-x: 0;\\n --tw-border-spacing-y: 0;\\n --tw-translate-x: 0;\\n --tw-translate-y: 0;\\n --tw-rotate: 0;\\n --tw-skew-x: 0;\\n --tw-skew-y: 0;\\n --tw-scale-x: 1;\\n --tw-scale-y: 1;\\n --tw-pan-x: ;\\n --tw-pan-y: ;\\n --tw-pinch-zoom: ;\\n --tw-scroll-snap-strictness: proximity;\\n --tw-gradient-from-position: ;\\n --tw-gradient-via-position: ;\\n --tw-gradient-to-position: ;\\n --tw-ordinal: ;\\n --tw-slashed-zero: ;\\n --tw-numeric-figure: ;\\n --tw-numeric-spacing: ;\\n --tw-numeric-fraction: ;\\n --tw-ring-inset: ;\\n --tw-ring-offset-width: 0px;\\n --tw-ring-offset-color: #fff;\\n --tw-ring-color: rgb(59 130 246 / 0.5);\\n --tw-ring-offset-shadow: 0 0 #0000;\\n --tw-ring-shadow: 0 0 #0000;\\n --tw-shadow: 0 0 #0000;\\n --tw-shadow-colored: 0 0 #0000;\\n --tw-blur: ;\\n --tw-brightness: ;\\n --tw-contrast: ;\\n --tw-grayscale: ;\\n --tw-hue-rotate: ;\\n --tw-invert: ;\\n --tw-saturate: ;\\n --tw-sepia: ;\\n --tw-drop-shadow: ;\\n --tw-backdrop-blur: ;\\n --tw-backdrop-brightness: ;\\n --tw-backdrop-contrast: ;\\n --tw-backdrop-grayscale: ;\\n --tw-backdrop-hue-rotate: ;\\n --tw-backdrop-invert: ;\\n --tw-backdrop-opacity: ;\\n --tw-backdrop-saturate: ;\\n --tw-backdrop-sepia: ;\\n --tw-contain-size: ;\\n --tw-contain-layout: ;\\n --tw-contain-paint: ;\\n --tw-contain-style: ;\\n}\\n::backdrop {\\n --tw-border-spacing-x: 0;\\n --tw-border-spacing-y: 0;\\n --tw-translate-x: 0;\\n --tw-translate-y: 0;\\n --tw-rotate: 0;\\n --tw-skew-x: 0;\\n --tw-skew-y: 0;\\n --tw-scale-x: 1;\\n --tw-scale-y: 1;\\n --tw-pan-x: ;\\n --tw-pan-y: ;\\n --tw-pinch-zoom: ;\\n --tw-scroll-snap-strictness: proximity;\\n --tw-gradient-from-position: ;\\n --tw-gradient-via-position: ;\\n --tw-gradient-to-position: ;\\n --tw-ordinal: ;\\n --tw-slashed-zero: ;\\n --tw-numeric-figure: ;\\n --tw-numeric-spacing: ;\\n --tw-numeric-fraction: ;\\n --tw-ring-inset: ;\\n --tw-ring-offset-width: 0px;\\n --tw-ring-offset-color: #fff;\\n --tw-ring-color: rgb(59 130 246 / 0.5);\\n --tw-ring-offset-shadow: 0 0 #0000;\\n --tw-ring-shadow: 0 0 #0000;\\n --tw-shadow: 0 0 #0000;\\n --tw-shadow-colored: 0 0 #0000;\\n --tw-blur: ;\\n --tw-brightness: ;\\n --tw-contrast: ;\\n --tw-grayscale: ;\\n --tw-hue-rotate: ;\\n --tw-invert: ;\\n --tw-saturate: ;\\n --tw-sepia: ;\\n --tw-drop-shadow: ;\\n --tw-backdrop-blur: ;\\n --tw-backdrop-brightness: ;\\n --tw-backdrop-contrast: ;\\n --tw-backdrop-grayscale: ;\\n --tw-backdrop-hue-rotate: ;\\n --tw-backdrop-invert: ;\\n --tw-backdrop-opacity: ;\\n --tw-backdrop-saturate: ;\\n --tw-backdrop-sepia: ;\\n --tw-contain-size: ;\\n --tw-contain-layout: ;\\n --tw-contain-paint: ;\\n --tw-contain-style: ;\\n}\\n:root,\\n.dark-mode,\\n.light-mode .invert-theme {\\n --grid-blue-400: 212 100% 23%;\\n --grid-blue-700: 214 100% 50%;\\n --grid-teal-400: 170 100% 13%;\\n --grid-teal-700: 173 100% 33%;\\n --grid-green-400: 138 100% 14%;\\n --grid-green-700: 140 100% 34%;\\n --grid-amber-400: 32 100% 18%;\\n --grid-amber-700: 41 100% 50%;\\n --grid-red-400: 353 75% 25%;\\n --grid-red-700: 355 87% 57%;\\n --grid-purple-400: 278 64% 28%;\\n --grid-purple-700: 274 64% 54%;\\n}\\n.gd-pointer-events-none {\\n pointer-events: none;\\n}\\n.gd-pointer-events-auto {\\n pointer-events: auto;\\n}\\n.gd-fixed {\\n position: fixed;\\n}\\n.gd-absolute {\\n position: absolute;\\n}\\n.gd-relative {\\n position: relative;\\n}\\n.gd-inset-x-0 {\\n left: 0;\\n right: 0;\\n}\\n.gd-inset-y-0 {\\n top: 0;\\n bottom: 0;\\n}\\n.gd-left-1\\\\/2 {\\n left: 50%;\\n}\\n.gd-z-50 {\\n z-index: 50;\\n}\\n.gd-z-\\\\[9999\\\\] {\\n z-index: 9999;\\n}\\n.gd-flex {\\n display: flex;\\n}\\n.gd-h-full {\\n height: 100%;\\n}\\n.gd-w-full {\\n width: 100%;\\n}\\n.gd--translate-x-1\\\\/2 {\\n --tw-translate-x: -50%;\\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\\n}\\n.gd-overflow-hidden {\\n overflow: hidden;\\n}\\n.gd-rounded-\\\\[999px\\\\] {\\n border-radius: 999px;\\n}\\n.gd-border-\\\\[1px\\\\] {\\n border-width: 1px;\\n}\\n.gd-border-l-\\\\[1px\\\\] {\\n border-left-width: 1px;\\n}\\n.gd-border-current {\\n border-color: currentColor;\\n}\\n.gd-border-l-current {\\n border-left-color: currentColor;\\n}\\n.gd-bg-\\\\[black\\\\] {\\n --tw-bg-opacity: 1;\\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\\n}\\n.gd-px-\\\\[12px\\\\] {\\n padding-left: 12px;\\n padding-right: 12px;\\n}\\n.gd-py-\\\\[4px\\\\] {\\n padding-top: 4px;\\n padding-bottom: 4px;\\n}\\n.gd-font-sans {\\n font-family:\\n ui-sans-serif,\\n system-ui,\\n sans-serif,\\n \\\"Apple Color Emoji\\\",\\n \\\"Segoe UI Emoji\\\",\\n \\\"Segoe UI Symbol\\\",\\n \\\"Noto Color Emoji\\\";\\n}\\n.gd-text-\\\\[white\\\\]\\\\/\\\\[0\\\\.9\\\\] {\\n color: rgb(255 255 255 / 0.9);\\n}\\n.gd-shadow-\\\\[0_0_5px_0_rgba\\\\(0\\\\,0\\\\,0\\\\,1\\\\)\\\\] {\\n --tw-shadow: 0 0 5px 0 rgba(0,0,0,1);\\n --tw-shadow-colored: 0 0 5px 0 var(--tw-shadow-color);\\n box-shadow:\\n var(--tw-ring-offset-shadow, 0 0 #0000),\\n var(--tw-ring-shadow, 0 0 #0000),\\n var(--tw-shadow);\\n}\\n.last\\\\:gd-border-r-\\\\[1px\\\\]:last-child {\\n border-right-width: 1px;\\n}\\n.last\\\\:gd-border-r-current:last-child {\\n border-right-color: currentColor;\\n}\\n.data-\\\\[hud-position\\\\=bottom\\\\]\\\\:gd-bottom-\\\\[16px\\\\][data-hud-position=bottom] {\\n bottom: 16px;\\n}\\n.data-\\\\[hud-position\\\\=top\\\\]\\\\:gd-top-\\\\[16px\\\\][data-hud-position=top] {\\n top: 16px;\\n}\\n.data-\\\\[active\\\\=false\\\\]\\\\:gd-hidden[data-active=false] {\\n display: none;\\n}\\n.data-\\\\[color\\\\=amber\\\\]\\\\:gd-bg-amber-700\\\\/\\\\[0\\\\.1\\\\][data-color=amber] {\\n background-color: hsl(var(--grid-amber-700) / 0.1);\\n}\\n.data-\\\\[color\\\\=blue\\\\]\\\\:gd-bg-blue-700\\\\/\\\\[0\\\\.1\\\\][data-color=blue] {\\n background-color: hsl(var(--grid-blue-700) / 0.1);\\n}\\n.data-\\\\[color\\\\=green\\\\]\\\\:gd-bg-green-700\\\\/\\\\[0\\\\.1\\\\][data-color=green] {\\n background-color: hsl(var(--grid-green-700) / 0.1);\\n}\\n.data-\\\\[color\\\\=purple\\\\]\\\\:gd-bg-purple-700\\\\/\\\\[0\\\\.1\\\\][data-color=purple] {\\n background-color: hsl(var(--grid-purple-700) / 0.1);\\n}\\n.data-\\\\[color\\\\=red\\\\]\\\\:gd-bg-red-700\\\\/\\\\[0\\\\.1\\\\][data-color=red] {\\n background-color: hsl(var(--grid-red-700) / 0.1);\\n}\\n.data-\\\\[color\\\\=teal\\\\]\\\\:gd-bg-teal-700\\\\/\\\\[0\\\\.1\\\\][data-color=teal] {\\n background-color: hsl(var(--grid-teal-700) / 0.1);\\n}\\n.data-\\\\[color\\\\=amber\\\\]\\\\:gd-text-amber-400[data-color=amber] {\\n color: hsl(var(--grid-amber-400));\\n}\\n.data-\\\\[color\\\\=blue\\\\]\\\\:gd-text-blue-400[data-color=blue] {\\n color: hsl(var(--grid-blue-400));\\n}\\n.data-\\\\[color\\\\=green\\\\]\\\\:gd-text-green-400[data-color=green] {\\n color: hsl(var(--grid-green-400));\\n}\\n.data-\\\\[color\\\\=purple\\\\]\\\\:gd-text-purple-400[data-color=purple] {\\n color: hsl(var(--grid-purple-400));\\n}\\n.data-\\\\[color\\\\=red\\\\]\\\\:gd-text-red-400[data-color=red] {\\n color: hsl(var(--grid-red-400));\\n}\\n.data-\\\\[color\\\\=teal\\\\]\\\\:gd-text-teal-400[data-color=teal] {\\n color: hsl(var(--grid-teal-400));\\n}\\n\")"],"mappings":"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","names":[]}