Rename areaName to lineName (#6583)

**Problem:**

Grid dimension (which should be named tracks 🙃 , but that's for another
day) have a field called `areaName` but it should actually be called
`lineName`
(https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines).

**Fix:**

Rename `areaName` to `lineName`, and all its related mentions and
(indirect) references.

Fixes #6582

Author: ruggi

editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts

@@ -249,14 +249,14 @@ export function setGridPropsCommands(
   const rowStart = gridPositionToValue(gridProps.gridRowStart)
   const rowEnd = gridPositionToValue(gridProps.gridRowEnd)
 
-  const areaColumnStart = asMaybeNamedAreaOrValue(gridTemplate, 'column', columnStart)
-  const areaColumnEnd = asMaybeNamedAreaOrValue(gridTemplate, 'column', columnEnd)
-  const areaRowStart = asMaybeNamedAreaOrValue(gridTemplate, 'row', rowStart)
-  const areaRowEnd = asMaybeNamedAreaOrValue(gridTemplate, 'row', rowEnd)
+  const lineColumnStart = asMaybeNamedLineOrValue(gridTemplate, 'column', columnStart)
+  const lineColumnEnd = asMaybeNamedLineOrValue(gridTemplate, 'column', columnEnd)
+  const lineRowStart = asMaybeNamedLineOrValue(gridTemplate, 'row', rowStart)
+  const lineRowEnd = asMaybeNamedLineOrValue(gridTemplate, 'row', rowEnd)
 
   if (columnStart != null && columnStart === columnEnd) {
     commands.push(
-      setProperty('always', elementPath, PP.create('style', 'gridColumn'), areaColumnStart),
+      setProperty('always', elementPath, PP.create('style', 'gridColumn'), lineColumnStart),
     )
   } else if (
     columnStart != null &&
@@ -266,40 +266,40 @@ export function setGridPropsCommands(
     columnStart === columnEnd - 1
   ) {
     commands.push(
-      setProperty('always', elementPath, PP.create('style', 'gridColumn'), areaColumnStart),
+      setProperty('always', elementPath, PP.create('style', 'gridColumn'), lineColumnStart),
     )
   } else {
     if (columnStart != null) {
       commands.push(
-        setProperty('always', elementPath, PP.create('style', 'gridColumnStart'), areaColumnStart),
+        setProperty('always', elementPath, PP.create('style', 'gridColumnStart'), lineColumnStart),
       )
     }
     if (columnEnd != null) {
       commands.push(
-        setProperty('always', elementPath, PP.create('style', 'gridColumnEnd'), areaColumnEnd),
+        setProperty('always', elementPath, PP.create('style', 'gridColumnEnd'), lineColumnEnd),
       )
     }
   }
 
   if (rowStart != null && rowStart === rowEnd) {
-    commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), areaRowStart))
+    commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), lineRowStart))
   } else if (
     rowStart != null &&
     typeof rowStart === 'number' &&
     rowEnd != null &&
     typeof rowEnd === 'number' &&
     rowStart === rowEnd - 1
   ) {
-    commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), areaRowStart))
+    commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), lineRowStart))
   } else {
     if (rowStart != null) {
       commands.push(
-        setProperty('always', elementPath, PP.create('style', 'gridRowStart'), areaRowStart),
+        setProperty('always', elementPath, PP.create('style', 'gridRowStart'), lineRowStart),
       )
     }
     if (rowEnd != null) {
       commands.push(
-        setProperty('always', elementPath, PP.create('style', 'gridRowEnd'), areaRowEnd),
+        setProperty('always', elementPath, PP.create('style', 'gridRowEnd'), lineRowEnd),
       )
     }
   }
@@ -352,7 +352,7 @@ function getCellCoordsDelta(
   return gridCellCoordinates(rowDiff, columnDiff)
 }
 
-function asMaybeNamedAreaOrValue(
+function asMaybeNamedLineOrValue(
   grid: GridContainerProperties,
   axis: 'row' | 'column',
   value: number | string | null,
@@ -362,9 +362,9 @@ function asMaybeNamedAreaOrValue(
   } else if (typeof value === 'number') {
     const template = axis === 'row' ? grid.gridTemplateRows : grid.gridTemplateColumns
     if (template?.type === 'DIMENSIONS') {
-      const maybeAreaStart = template.dimensions.at(value - 1)
-      if (maybeAreaStart != null && maybeAreaStart.areaName != null) {
-        return maybeAreaStart.areaName
+      const maybeLineStart = template.dimensions.at(value - 1)
+      if (maybeLineStart != null && maybeLineStart.lineName != null) {
+        return maybeLineStart.lineName
       }
     }
     return value === 0 ? 1 : value
@@ -602,12 +602,12 @@ function alterGridTemplateDimensions(params: {
           if (before.length + after.length === 0) {
             return null
           }
-          return gridCSSRepeat(dim.times, [...before, ...after], dim.areaName)
+          return gridCSSRepeat(dim.times, [...before, ...after], dim.lineName)
         case 'REPLACE':
           return gridCSSRepeat(
             dim.times,
             [...before, params.patch.newValue, ...after],
-            dim.areaName,
+            dim.lineName,
           )
         default:
           assertNever(params.patch)

editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts

@@ -165,7 +165,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
 
       const isFractional = mergedUnit.value === 'fr'
       const precision = modifiers.cmd ? 'coarse' : 'precise'
-      const areaName = mergedValues.dimensions[control.columnOrRow]?.areaName ?? null
+      const lineName = mergedValues.dimensions[control.columnOrRow]?.lineName ?? null
 
       const newValue = Math.max(
         0,
@@ -181,7 +181,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         originalValues.dimensions,
         expandedOriginalValues,
         control.columnOrRow,
-        gridCSSNumber(cssNumber(newValue, mergedUnit.value), areaName),
+        gridCSSNumber(cssNumber(newValue, mergedUnit.value), lineName),
       )
 
       const propertyValueAsString = printArrayGridDimensions(newDimensions)

editor/src/components/canvas/controls/grid-controls.tsx

@@ -309,7 +309,7 @@ const GridResizingStripedIndicator = React.memo((props: GridResizingControlProps
           }}
         >
           {when(
-            props.dimension.areaName != null,
+            props.dimension.lineName != null,
             <div
               style={{
                 position: 'absolute',
@@ -321,7 +321,7 @@ const GridResizingStripedIndicator = React.memo((props: GridResizingControlProps
                 borderRadius: '0 0 3px 0',
               }}
             >
-              {props.dimension.areaName}
+              {props.dimension.lineName}
             </div>,
           )}
         </div>,

editor/src/components/editor/store/store-deep-equality-instances.ts

@@ -1977,7 +1977,7 @@ export const GridCSSNumberKeepDeepEquality: KeepDeepEqualityCall<GridCSSNumber>
   combine2EqualityCalls(
     (p) => p.value,
     CSSNumberKeepDeepEquality,
-    (p) => p.areaName,
+    (p) => p.lineName,
     NullableStringKeepDeepEquality,
     gridCSSNumber,
   )
@@ -1986,7 +1986,7 @@ export const GridCSSKeywordKeepDeepEquality: KeepDeepEqualityCall<GridCSSKeyword
   combine2EqualityCalls(
     (p) => p.value,
     createCallWithTripleEquals(),
-    (p) => p.areaName,
+    (p) => p.lineName,
     NullableStringKeepDeepEquality,
     gridCSSKeyword,
   )
@@ -2030,7 +2030,7 @@ export const GridCSSRepeatKeepDeepEquality: KeepDeepEqualityCall<GridCSSRepeat>
     createCallWithTripleEquals(),
     (p) => p.value,
     arrayDeepEquality(GridDimensionKeepDeepEquality),
-    (p) => p.areaName,
+    (p) => p.lineName,
     NullableStringKeepDeepEquality,
     gridCSSRepeat,
   )
@@ -2064,7 +2064,7 @@ export const GridCSSMinmaxKeepDeepEquality: KeepDeepEqualityCall<GridCSSMinmax>
     GridCSSNumberOrKeywordKeepDeepEquality,
     (p) => p.max,
     GridCSSNumberOrKeywordKeepDeepEquality,
-    (p) => p.areaName,
+    (p) => p.lineName,
     NullableStringKeepDeepEquality,
     gridCSSMinmax,
   )