padded-grid - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/index.d.ts

@@ -1,203 +0,10 @@
-import * as react from 'react';
-import { CSSProperties, ReactNode, RefObject } from 'react';
-
-declare const PaddedGrid: react.NamedExoticComponent<PGProps>;
-
-type CSSUnit = 'px' | 'rem' | 'em' | '%' | 'fr' | 'vh' | 'vw';
-type CSSCompound<T extends number | string> = T | `${number}${CSSUnit}`;
-type CSSValue = CSSCompound<number | string>;
-declare enum BreakpointKey {
-    Base = "base",
-    Sm = "sm",
-    Md = "md",
-    Lg = "lg",
-    Xl = "xl",
-    Xxl = "xxl"
-}
-type ResponsiveValue<T> = T | Partial<Record<BreakpointKey, T>>;
-declare enum GridAlignment {
-    Start = "start",
-    Center = "center",
-    End = "end"
-}
-declare enum GridVariant {
-    Line = "line",
-    Flat = "flat"
-}
-interface BaseComponentProps {
-    className?: string;
-    style?: CSSProperties;
-    children?: ReactNode;
-}
-
-interface BaseGridStyles extends CSSProperties {
-    '--grid-base': `${number}px`;
-    '--grid-max-width': CSSValue;
-    '--grid-z-index': number;
-    '--grid-justify': string;
-}
-interface GridLineStyles {
-    '--column-width': '1px';
-    '--row-height': '1px';
-}
-interface GridFlatStyles {
-    '--column-width': CSSValue;
-    '--row-height': CSSValue;
-    '--row-opacity': '0' | '1';
-}
-
-interface GridCalculationProps {
-    containerWidth: number;
-    color?: string;
-    maxWidth?: ResponsiveValue<CSSValue>;
-    align?: string;
-    gap?: 'auto' | ResponsiveValue<CSSValue>;
-    columns?: number | Array<CSSValue | ResponsiveValue<CSSValue>>;
-    variant?: GridVariant;
-    columnWidth?: ResponsiveValue<CSSValue | 'auto'>;
-    baseFromConfig?: number;
-}
-interface GridCalculationResult {
-    gridTemplateColumns: string;
-    columnsCount: number;
-    calculatedGap: string;
-}
-
-interface PGConfig {
-    /** Base unit for baseline spacing calculations (in pixels) */
-    base: number;
-    /** Maximum width for containers */
-    maxWidth: CSSValue | ResponsiveValue<CSSValue>;
-    /** Horizontal alignment for grid containers */
-    align: GridAlignment;
-    /** z-index for grid containers and overlays */
-    zIndex: number;
-}
-interface PGStates extends PGConfig {
-    styles: CSSProperties & Partial<PGStyles>;
-}
-interface PGStyles extends BaseGridStyles {
-    '--grid-base': `${number}px`;
-    '--grid-max-width': string;
-    '--grid-z-index': number;
-}
-interface PGProps extends BaseComponentProps {
-    config: Partial<PGConfig>;
-    reducer?: (state: PGStates, action: PGActions) => PGStates;
-    style?: CSSProperties & Partial<PGStyles>;
-}
-type PGActions = {
-    type: 'UPDATE_CONFIG';
-    payload: Partial<PGConfig>;
-} | {
-    type: 'UPDATE_STYLES';
-    payload: Partial<PGStyles>;
-};
-
-interface XGStyles extends BaseGridStyles {
-    '--grid-template-columns': CSSProperties['gridTemplateColumns'];
-    '--grid-gap': string | number;
-    '--grid-padding': CSSProperties['padding'];
-    '--grid-columns': number;
-    '--column-color': CSSProperties['color'] | CSSProperties['backgroundColor'];
-    '--column-width': GridVariant extends GridVariant.Line ? GridLineStyles['--column-width'] : CSSValue;
-}
-interface XGBaseProps extends BaseComponentProps {
-    align?: GridAlignment;
-    color?: CSSProperties['color'] | CSSProperties['backgroundColor'];
-    maxWidth?: ResponsiveValue<CSSValue>;
-    padding?: CSSProperties['padding'];
-    show?: boolean;
-    style?: CSSProperties & Partial<XGStyles>;
-}
-type XGColumnPattern = XGBaseProps & {
-    variant?: never;
-    columns: Array<CSSValue | ResponsiveValue<CSSValue>>;
-    gap: ResponsiveValue<CSSValue | 'auto'>;
-    columnWidth?: never;
-};
-type XGAutoCalculated = XGBaseProps & {
-    variant?: never;
-    columnWidth: ResponsiveValue<CSSValue | 'auto'>;
-    columns?: never;
-    gap: ResponsiveValue<CSSValue | 'auto'>;
-};
-type XGFixedColumns = XGBaseProps & {
-    variant?: never;
-    columns: number;
-    columnWidth?: ResponsiveValue<CSSValue | 'auto'>;
-    gap?: ResponsiveValue<CSSValue | 'auto'>;
-};
-type XGLine = XGBaseProps & {
-    variant: GridVariant;
-    columns?: never;
-    columnWidth?: never;
-    gap?: ResponsiveValue<CSSValue>;
-};
-type XGProps = XGColumnPattern | XGAutoCalculated | XGFixedColumns | XGLine;
-
-declare const XGrid: react.NamedExoticComponent<XGProps>;
-
-interface YGStyles extends BaseGridStyles {
-    '--grid-height': CSSValue;
-    '--row-top': CSSValue;
-    '--row-color': string;
-    '--row-height': GridVariant extends GridVariant.Line ? GridLineStyles['--row-height'] : CSSValue;
-    '--row-opacity': GridVariant extends GridVariant.Flat ? GridFlatStyles['--row-opacity'] : CSSValue;
-}
-interface YGProps extends BaseComponentProps {
-    base?: number;
-    color?: CSSProperties['color'] | CSSProperties['backgroundColor'];
-    height?: CSSProperties['height'];
-    padding?: CSSProperties['padding'];
-    show?: boolean;
-    style?: CSSProperties & Partial<YGStyles>;
-    variant?: GridVariant;
-}
-
-declare const YGrid: react.NamedExoticComponent<YGProps>;
-
-declare const useGridCalculations: (props: GridCalculationProps) => GridCalculationResult;
-
-declare function useGridDimensions(ref: RefObject<HTMLElement>): {
-    width: number;
-    height: number;
-};
-
-declare const GRID: {
-    /** Core default properties for grid components */
-    readonly DEFAULTS: {
-        readonly ALIGN: GridAlignment.Center;
-        readonly Z_INDEX: -1;
-        readonly BASE: 8;
-        readonly MAX_WIDTH: "1216px";
-        readonly COLUMN_WIDTH: "1fr";
-        readonly COLORS: {
-            readonly X_GRID: "#e8133810";
-            readonly Y_GRID: "#e8133860";
-        };
-        readonly GAP: 8;
-        readonly COLUMNS: 9;
-    };
-    readonly LIMITS: {
-        readonly BASE: {
-            readonly MIN: 1;
-            readonly MAX: 16;
-        };
-    };
-    readonly VARIANTS: {
-        readonly LINE: GridVariant.Line;
-        readonly FLAT: GridVariant.Flat;
-    };
-    /** Responsive breakpoint definitions */
-    readonly BREAKPOINTS: {
-        readonly base: "1280px";
-        readonly sm: "640px";
-        readonly md: "768px";
-        readonly lg: "1024px";
-        readonly xl: "1280px";
-        readonly xxl: "1536px";
-    };
-};
-
-export { GRID, GridAlignment, GridVariant, type PGConfig, type PGProps, PaddedGrid, type XGProps, XGrid, type YGProps, YGrid, useGridCalculations, useGridDimensions };
+/**
+ * Padded Grid System
+ * A lightweight, flexible grid system for React applications.
+ * @module padded-grid
+ */
+export { PaddedGrid, XGrid, YGrid } from './components';
+export type { PGConfig, PGProps, XGProps, YGProps } from './components';
+export type { GridAlignment, GridVariant } from './types';
+export { useGridDimensions, useGridCalculations } from './hooks';
+export { GRID } from './utils';

package.json

 {
   "name": "padded-grid",
-  "version": "0.1.1",
-  "description": "A lightweight, flexible baseline and grid system for React applications with precise control over spacing, gaps, and layout",
-  "type": "module",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "version": "0.1.2",
+  "description": "A development tool for visualizing and maintaining consistent grid systems in React applications. Similar to design tools like Figma, it provides toggleable grid overlays that help ensure precise spacing, alignment, and layout consistency during development.",
   "main": "dist/index.cjs",
@@ -22,11 +25,17 @@ "module": "dist/index.mjs",
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "dist/styles.css"
+  ],
   "scripts": {
     "dev": "vite",
-    "build": "tsup src/lib/index.ts --format esm,cjs --dts --minify --clean",
+    "build": "vite build",
+    "build:type": "tsc -p tsconfig.build.json",
+    "prepare": "npm run build && npm run build:type",
+    "prepublishOnly": "npm run build && npm run build:type",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "changeset publish",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint src/lib",
-    "typecheck": "tsc --noEmit",  
     "format": "prettier --write \"src/lib/**/*.{ts,tsx,css}\"",
-    "prepare": "bun run build",
-    "prepublishOnly": "bun run build",
     "test": "vitest",
@@ -40,10 +49,8 @@ "test:watch": "vitest watch",
     "@testing-library/jest-dom": "^6.6.3",
-    "@types/bun": "latest",
-    "@types/node": "^22.10.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitejs/plugin-react-swc": "^3.7.2",
+    "@types/react": "^19.0.1",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
     "eslint": "^8.57.1",
@@ -53,23 +60,14 @@ "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "autoprefixer": "^10.4.20",
-    "bun-types": "^1.1.37",
-    "cssnano": "^7.0.6",
     "prettier": "^3.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "rollup": "^4.27.4",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "tsup": "^8.3.5",
-    "vite": "^5.4.11",
+    "vite": "^6.0.3",
     "vitest": "^2.1.6"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "typescript": "^5.6.3"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "keywords": [
@@ -98,2 +96,2 @@ "react",
   }
-}
+}

README.md

 # Padded Grid
 
-A lightweight, flexible grid system for React applications with precise control over spacing and layout.
+A development tool for visualizing and maintaining consistent grid systems in React applications. Similar to design
+tools like Figma, it provides toggleable grid overlays that help ensure precise spacing, alignment, and layout
+consistency during development.
 
-## Quick Start
+## What is it?
 
+Padded Grid helps you:
+
+- Visualize column grids and baseline grids while building your layouts
+- Maintain consistent spacing and alignment across your application
+- Toggle different grid systems on/off during development
+- Ensure your designs match their specifications
+
+↓ Demo in construction...
+
+![Grid Visualization Example](docs/assets/demo_in_progress.jpg)
+
+## Features
+
+- 🎯 Interactive grid overlays for development
+- 📏 Column grid visualization (like Figma's layout grid)
+- 📐 Baseline grid for typography alignment
+- 🎚️ Toggleable grid guides
+- 📱 Responsive grid visualization
+- 🎨 Customizable grid colors and opacity
+- 🔧 TypeScript-first with comprehensive types
+- ⚡️ Zero runtime dependencies
+- 🪶 Tree-shakeable & optimized bundle
+
+## Why Use It?
+
+When building complex layouts, it's crucial to maintain consistent spacing and alignment. While CSS Grid and Flexbox are
+powerful layout tools, they don't provide visual guides during development. Padded Grid bridges this gap by offering:
+
+1. **Visual Feedback**: See your grid system while you build
+2. **Design Consistency**: Match your implementation to design specs
+3. **Typography Alignment**: Ensure text follows your baseline grid
+4. **Development Efficiency**: Quickly spot alignment issues
+
+## Installation
+
 ```bash
+# npm
 npm install padded-grid
 ```
 
+## Quick Start
+
 ```tsx
-import { PaddedGrid, XGrid, YGrid } from "padded-grid";
+import { PaddedGrid, XGrid, YGrid } from 'padded-grid';
 import 'padded-grid/styles.css';
 
 function App() {
+  // Toggle grid visibility during development
+  const showGrid = process.env.NODE_ENV === 'development';
+
   return (
-    <PaddedGrid config={{ base: 8, maxWidth: "1200px" }}>
-      <XGrid columns={12} gap={16} />
-      <YGrid base={8} />
-      <main>Content</main>
+    <PaddedGrid config={{ maxWidth: "1200px" }}>
+      {/* Column grid overlay */}
+      <XGrid columns={12} gap={16} show={showGrid} />
+
+      {/* Baseline grid for typography alignment */}
+      <YGrid base={8} show={showGrid} />
+
+      <main>Your content...</main>
     </PaddedGrid>
@@ -26,12 +73,5 @@ );
 
-## Features
+The grid overlays help you visualize and maintain consistent spacing during development.
+See [Development Usage Guide](./docs/DEVELOPMENT_USAGE.md) for detailed examples and best practices.
 
-- 🎯 Precise baseline grid alignment
-- 📐 Flexible column layouts (fixed, auto, custom patterns)
-- 📱 First-class responsive support
-- 🎨 Built-in layout guides and overlays
-- 🔧 TypeScript-first with comprehensive types
-- ⚡️ Zero dependencies
-- 🪶 Tree-shakeable
-
 ## Documentation
@@ -43,9 +83,7 @@
 
-## Roadmap (Post v0.1)
+## Browser Support
 
-1. Comprehensive test suite
-2. RTL support
-3. SSR compatibility
-4. Additional grid variants
-5. Animation support
+- Modern browsers (Chrome, Firefox, Safari, Edge)
+- CSS Grid Layout support required
+- No IE11 support
 
@@ -52,0 +90,0 @@ ## Contributing

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

228200

increased by64.68%

Dev dependency count

18

decreased by-30.77%

Number of package files

33

increased by175%

Lines of code

1353

increased by402.97%

Number of lines in readme file

95

increased by66.67%

Worsened metrics

Number of low supply chain risk alerts

4

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Is type module

No

No dependency changes