Feat(web): Extend Flex direction by reverse value

apps/demo/partials/cover.hbs

@@ -2,7 +2,7 @@
   <div class="Container">
 
     <h1
-      class="Flex Flex--noWrap Flex--alignmentXStretch Flex--alignmentYCenter Flex--row typography-heading-xlarge-bold"
+      class="Flex Flex--noWrap Flex--alignmentXStretch Flex--alignmentYCenter Flex--horizontal typography-heading-xlarge-bold"
       style="--flex-spacing: var(--spirit-space-1000)"
     >
       {{title}}

apps/web-twig-demo/templates/partials/cover.html.twig

@@ -2,7 +2,7 @@
   <Container>
 
     <h1
-      class="Flex Flex--noWrap Flex--alignmentXStretch Flex--alignmentYCenter Flex--row typography-heading-xlarge-bold"
+      class="Flex Flex--noWrap Flex--alignmentXStretch Flex--alignmentYCenter Flex--horizontal typography-heading-xlarge-bold"
       style="--flex-spacing: var(--spirit-space-1000)"
     >
       {{ title }}

docs/DICTIONARIES.md

@@ -19,21 +19,21 @@ This project uses `dictionaries` to unify props between different components.
 
 ### Alignment
 
-| Dictionary         | Values                                  | Code name          |
-| ------------------ | --------------------------------------- | ------------------ |
-| AlignmentX         | `left`, `center`, `right`               | AlignmentX         |
-| AlignmentXExtended | AlignmentX + `stretch`, `space-between` | AlignmentXExtended |
-| AlignmentY         | `top`, `center`, `bottom`               | AlignmentY         |
-| AlignmentYExtended | AlignmentY + `stretch`, `baseline`      | AlignmentYExtended |
+| Dictionary         | Values                                             | Code name          |
+| ------------------ | -------------------------------------------------- | ------------------ |
+| AlignmentX         | `left`, `center`, `right`                          | AlignmentX         |
+| AlignmentXExtended | AlignmentX Dictionary + `stretch`, `space-between` | AlignmentXExtended |
+| AlignmentY         | `top`, `center`, `bottom`                          | AlignmentY         |
+| AlignmentYExtended | AlignmentY Dictionary + `stretch`, `baseline`      | AlignmentYExtended |
 
 ### Border Properties
 
-| Dictionary    | Values                                          | Code name    |
-| ------------- | ----------------------------------------------- | ------------ |
-| Border Color  | `basic`, `focus`                                | BorderColor  |
-| Border Radius | `0`, `100`, `200`, `300`, `400`, `500`, `full`, | BorderRadius |
-| Border Style  | `solid`, `'dotted'`, `'dashed'`                 | BorderStyle  |
-| Border Width  | `0`, `100`, `200`,                              | BorderWidth  |
+| Dictionary    | Values                                         | Code name    |
+| ------------- | ---------------------------------------------- | ------------ |
+| Border Color  | `basic`, `focus`                               | BorderColor  |
+| Border Radius | `0`, `100`, `200`, `300`, `400`, `500`, `full` | BorderRadius |
+| Border Style  | `solid`, `'dotted'`, `'dashed'`                | BorderStyle  |
+| Border Width  | `0`, `100`, `200`,                             | BorderWidth  |
 
 ### Color
 
@@ -47,10 +47,11 @@ This project uses `dictionaries` to unify props between different components.
 
 ### Direction
 
-| Dictionary    | Values                   | Code name     |
-| ------------- | ------------------------ | ------------- |
-| Direction     | `horizontal`, `vertical` | Direction     |
-| DirectionAxis | `x`, `y`                 | DirectionAxis |
+| Dictionary        | Values                                      | Code name         |
+| ----------------- | ------------------------------------------- | ----------------- |
+| Direction         | `horizontal`, `vertical`                    | Direction         |
+| DirectionAxis     | `x`, `y`                                    | DirectionAxis     |
+| DirectionExtended | Direction Dictionary + `horizontal-reverse` | DirectionExtended |
 
 ### Emphasis
 

index.html

@@ -12,7 +12,7 @@ <h2 class="typography-heading-small-regular text-secondary mb-1000">
         Development Preview
       </h2>
 
-      <div class="Flex Flex--row Flex--wrap Flex--alignmentXCenter Flex--alignmentYCenter">
+      <div class="Flex Flex--horizontal Flex--wrap Flex--alignmentXCenter Flex--alignmentYCenter">
         <a
           href="https://spirit.supernova-docs.io/spirit/"
           class="Button Button--tertiary Button--large"

packages/codemods/src/transforms/v4/web-react/README.md

@@ -22,3 +22,24 @@ npx @lmc-eu/spirit-codemods -p <path> -t v4/web-react/collapse-isDisposable-prop
 - <UncontrolledCollapse hideOnCollapse … />
 + <UncontrolledCollapse isDisposable … />
 ```
+
+### `v4/web-react/flex-direction-values` - Replace Flex Direction Prop Values `row` with `horizontal` and `column` with `vertical`
+
+This codemod updates `direction` values of `Flex` component by replacing `row` to `horizontal` and `column` to `vertical`.
+
+#### Usage
+
+```sh
+npx @lmc-eu/spirit-codemods -p <path> -t v4/web-react/flex-direction-values
+```
+
+#### Example
+
+```diff
+- <Flex direction="row" … />
+- <Flex direction="column" … />
+- <Flex direction={{ mobile: "column", tablet: "row" }} … />
++ <Flex direction="horizontal" … />
++ <Flex direction="vertical" … />
++ <Flex direction={{ mobile: 'vertical', tablet: 'horizontal' }} … />
+```

packages/codemods/src/transforms/v4/web-react/__testfixtures__/flex-direction-values.input.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { Flex } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => (
+  <>
+    <Flex>Flex</Flex>
+    <Flex direction="row">Flex</Flex>
+    <Flex direction="column">Flex</Flex>
+    <Flex direction={{ mobile: 'row', tablet: 'column' }}>Flex</Flex>
+  </>
+);

packages/codemods/src/transforms/v4/web-react/__testfixtures__/flex-direction-values.output.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { Flex } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => (
+  <>
+    <Flex>Flex</Flex>
+    <Flex direction="horizontal">Flex</Flex>
+    <Flex direction="vertical">Flex</Flex>
+    <Flex direction={{ mobile: 'horizontal', tablet: 'vertical' }}>Flex</Flex>
+  </>
+);

packages/codemods/src/transforms/v4/web-react/__tests__/flex-direction-values.test.ts

@@ -0,0 +1,3 @@
+import { testTransform } from '../../../../../tests/testUtils';
+
+testTransform(__dirname, 'flex-direction-values');

packages/codemods/src/transforms/v4/web-react/flex-direction-values.ts

@@ -0,0 +1,66 @@
+import { API, FileInfo } from 'jscodeshift';
+import { removeParentheses } from '../../../helpers';
+
+const transform = (fileInfo: FileInfo, api: API) => {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  // Define the mapping from old direction values to new ones
+  const directionMap: { [key: string]: string } = {
+    row: 'horizontal',
+    column: 'vertical',
+  };
+
+  // Find all Flex components
+  root
+    .find(j.JSXOpeningElement, { name: { type: 'JSXIdentifier', name: 'Flex' } })
+    .find(j.JSXAttribute, { name: { type: 'JSXIdentifier', name: 'direction' } })
+    .forEach((attributePath) => {
+      const attribute = attributePath.node;
+
+      if (attribute.value) {
+        // Handle string literal values
+        if (attribute.value.type === 'StringLiteral') {
+          const newValue = directionMap[attribute.value.value];
+          if (newValue) {
+            attribute.value = j.stringLiteral(newValue);
+          }
+        }
+
+        // Handle object values
+        else if (
+          attribute.value.type === 'JSXExpressionContainer' &&
+          attribute.value.expression.type === 'ObjectExpression'
+        ) {
+          const objectExpression = attribute.value.expression;
+
+          objectExpression.properties.forEach((property) => {
+            if (
+              property.type === 'ObjectProperty' &&
+              (property.key.type === 'Identifier' || property.key.type === 'Literal') &&
+              property.value.type === 'StringLiteral'
+            ) {
+              const oldValue = property.value.value;
+
+              // Update the value if it matches a key in directionMap
+              if (oldValue in directionMap) {
+                // Manually create a single-quoted Literal
+                property.value = j.literal(directionMap[oldValue]);
+                // We need single quotes in object values
+                // @ts-expect-error extra is not defined on Literal
+                property.value.extra = {
+                  raw: `'${directionMap[oldValue]}'`,
+                  rawValue: directionMap[oldValue],
+                };
+              }
+            }
+          });
+        }
+      }
+    });
+
+  // Convert the transformed code to source with double quotes for strings
+  return removeParentheses(root.toSource({ quote: 'double' }));
+};
+
+export default transform;

packages/web-react/DEPRECATIONS.md

@@ -18,5 +18,18 @@ We are providing a [codemod][codemod-collapse] to assist with this change.
 
 - `<UncontrolledCollapse id="collapse" renderTrigger={…} hideOnCollapse … />` → `<UncontrolledCollapse id="collapse" renderTrigger={…} isDisposable … />`
 
+### Flex
+
+The direction values `row` and `column` were removed, please use `horizontal` and `vertical` instead.
+
+#### Migration Guide
+
+We are providing a [codemod][codemod-flex] to assist with this change.
+
+- `<Flex direction="row" />` → ` <Flex direction="horizontal" />`
+- `<Flex direction="column" />` → `<Flex direction="vertical" />`
+- `<Flex direction={{ mobile: 'column', tablet: 'row' }} />` → `<Flex direction={{ mobile: 'vertical', tablet: 'horizontal' }} />`
+
 [codemod-collapse]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/codemods/src/transforms/v4/web-react/README.md#v4web-reactcollapse-isdisposable-prop--uncontrolledcollapse-hideoncollapse-to-isdisposable-prop-change
+[codemod-flex]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/codemods/src/transforms/v4/web-react/README.md#v4web-reactflex-direction-values---flex-direction-prop-values-row-to-horizontal-and-column-to-vertical
 [readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#deprecations

packages/web-react/src/components/Flex/Flex.tsx

@@ -2,23 +2,32 @@
 
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
-import { AlignmentXExtended, AlignmentYExtended } from '../../constants';
+import { AlignmentXExtended, AlignmentYExtended, DirectionExtended } from '../../constants';
 import { useStyleProps } from '../../hooks';
 import { SpiritFlexProps } from '../../types';
 import { useFlexStyleProps } from './useFlexStyleProps';
 
 const defaultProps: Partial<SpiritFlexProps> = {
   alignmentX: AlignmentXExtended.STRETCH,
   alignmentY: AlignmentYExtended.STRETCH,
-  direction: 'row',
+  direction: DirectionExtended.HORIZONTAL,
   elementType: 'div',
   isWrapping: false,
 };
 
 const Flex = <T extends ElementType = 'div'>(props: SpiritFlexProps<T>): JSX.Element => {
   const propsWithDefaults = { ...defaultProps, ...props };
-  const { elementType: ElementTag = 'div', children, ...restProps } = propsWithDefaults;
-  const { classProps, props: modifiedProps, styleProps: flexStyle } = useFlexStyleProps(restProps);
+  const {
+    elementType: ElementTag = 'div',
+    /**
+     * @deprecated "row" and "column" values will be removed in the next major version. Please use "horizontal" and "vertical" instead.
+     * @see https://jira.almacareer.tech/browse/DS-1629
+     */
+    direction,
+    children,
+    ...restProps
+  } = propsWithDefaults;
+  const { classProps, props: modifiedProps, styleProps: flexStyle } = useFlexStyleProps({ direction, ...restProps });
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
   const flexStyleProps = {