agroptima-design-system 1.2.32 → 1.3.0-beta.0

package/CLAUDE.md

@@ -91,7 +91,8 @@ ComponentName/
   - `_form.scss` - Form-specific typography
   - `_cards_table.scss` - Table typography
 - **_config.scss** - Spacing scale, border radius, responsive breakpoints
-- **_breakpoints.scss** - Breakpoints: 375px (mobile), 900px (tablet), 1200px (desktop)
+- **_breakpoints.scss** - Breakpoints: 375px (`$small`), 768px (`$medium`), 1200px (`$large`)
+- **breakpoints.ts** - Same values for TypeScript/`matchMedia` consumers; `tests/breakpoints.spec.ts` fails if they drift apart
 - **_depth.scss** - Z-index scale
 - **_mixins.scss** - Reusable SCSS utilities
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.2.32",
+  "version": "1.3.0-beta.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/settings/breakpoints.ts

@@ -0,0 +1,5 @@
+export const breakpoints = {
+  small: 375,
+  medium: 768,
+  large: 1200,
+} as const

package/tests/breakpoints.spec.ts

@@ -0,0 +1,22 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { breakpoints } from '../src/settings/breakpoints'
+
+function parseScssBreakpoints(): Record<string, number> {
+  const scss = readFileSync(
+    join(__dirname, '../src/settings/_breakpoints.scss'),
+    'utf8',
+  )
+  return Object.fromEntries(
+    [...scss.matchAll(/^\$([\w-]+):\s*(\d+)px;/gm)].map(([, name, value]) => [
+      name,
+      Number(value),
+    ]),
+  )
+}
+
+describe('breakpoints', () => {
+  it('keeps the TypeScript and SCSS definitions in sync', () => {
+    expect({ ...breakpoints }).toEqual(parseScssBreakpoints())
+  })
+})