Fix Inline + Stack props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/src/components/Inline/Inline.stories.tsx

@@ -46,6 +46,41 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const fakeBlockList = [
+  { width: 45, height: 60 },
+  { width: 150, height: 75 },
+  { width: 80, height: 50 },
+  { width: 120, height: 70 },
+  { width: 95, height: 65 },
+  { width: 110, height: 55 },
+  { width: 130, height: 60 },
+  { width: 100, height: 80 },
+  { width: 140, height: 45 },
+  { width: 85, height: 70 },
+  { width: 125, height: 50 },
+  { width: 105, height: 75 },
+  { width: 115, height: 65 },
+  { width: 135, height: 55 },
+  { width: 90, height: 60 },
+  { width: 145, height: 80 },
+  { width: 75, height: 45 },
+  { width: 155, height: 70 },
+  { width: 60, height: 50 },
+  { width: 160, height: 75 },
+  { width: 70, height: 65 },
+  { width: 150, height: 55 },
+  { width: 95, height: 60 },
+  { width: 120, height: 80 },
+  { width: 85, height: 45 },
+  { width: 130, height: 70 },
+  { width: 100, height: 50 },
+  { width: 140, height: 75 },
+  { width: 110, height: 65 },
+  { width: 125, height: 55 },
+  { width: 105, height: 60 },
+  { width: 145, height: 80 },
+];
+
 const FakeBox = ({
   width = 120,
   height = 80,
@@ -63,12 +98,8 @@ export const Default: Story = {
   args: {
     children: (
       <>
-        {Array.from({ length: 32 }).map((_, index) => (
-          <FakeBox
-            key={index}
-            width={Math.floor(Math.random() * (160 - 40 + 1)) + 40}
-            height={Math.floor(Math.random() * (80 - 40 + 1)) + 40}
-          />
+        {fakeBlockList.map((block, index) => (
+          <FakeBox key={index} width={block.width} height={block.height} />
         ))}
       </>
     ),
@@ -78,7 +109,7 @@ export const Default: Story = {
 export const AlignLeft: Story = {
   args: {
     ...Default.args,
-    align: 'start',
+    align: 'left',
   },
 };
 
@@ -92,14 +123,14 @@ export const AlignCenter: Story = {
 export const AlignRight: Story = {
   args: {
     ...Default.args,
-    align: 'end',
+    align: 'right',
   },
 };
 
 export const VerticalAlignTop: Story = {
   args: {
     ...Default.args,
-    alignY: 'start',
+    alignY: 'top',
   },
 };
 
@@ -113,7 +144,7 @@ export const VerticalAlignCenter: Story = {
 export const VerticalAlignBottom: Story = {
   args: {
     ...Default.args,
-    alignY: 'end',
+    alignY: 'bottom',
   },
 };
 

packages/canon/src/components/Inline/Inline.tsx

@@ -17,14 +17,50 @@
 import { createElement, forwardRef } from 'react';
 import type { InlineProps } from './types';
 import { getClassNames } from '../../utils/getClassNames';
+import { JustifyContent, Breakpoint, AlignItems } from '../../types';
+
+// Function to map align values
+const mapAlignValue = (value?: InlineProps['align']) => {
+  if (typeof value === 'string') {
+    let returnedValue: JustifyContent = 'stretch';
+    if (value === 'left') returnedValue = 'start';
+    if (value === 'center') returnedValue = 'center';
+    if (value === 'right') returnedValue = 'end';
+    return returnedValue;
+  } else if (typeof value === 'object') {
+    const returnedValue: Partial<Record<Breakpoint, JustifyContent>> = {};
+    for (const [key, val] of Object.entries(value)) {
+      returnedValue[key as Breakpoint] = mapAlignValue(val) as JustifyContent;
+    }
+    return returnedValue;
+  }
+  return 'stretch';
+};
+
+const mapAlignYValue = (value?: InlineProps['alignY']) => {
+  if (typeof value === 'string') {
+    let returnedValue: AlignItems = 'stretch';
+    if (value === 'top') returnedValue = 'start';
+    if (value === 'center') returnedValue = 'center';
+    if (value === 'bottom') returnedValue = 'end';
+    return returnedValue;
+  } else if (typeof value === 'object') {
+    const returnedValue: Partial<Record<Breakpoint, AlignItems>> = {};
+    for (const [key, val] of Object.entries(value)) {
+      returnedValue[key as Breakpoint] = mapAlignYValue(val) as AlignItems;
+    }
+    return returnedValue;
+  }
+  return 'stretch';
+};
 
 /** @public */
 export const Inline = forwardRef<HTMLElement, InlineProps>((props, ref) => {
   const {
     as = 'div',
     children,
-    align = 'start',
-    alignY = 'start',
+    align = 'left',
+    alignY = 'top',
     gap = 'xs',
     className,
     style,
@@ -34,8 +70,8 @@ export const Inline = forwardRef<HTMLElement, InlineProps>((props, ref) => {
   // Generate utility class names
   const utilityClassNames = getClassNames({
     gap,
-    alignItems: alignY,
-    justifyContent: align,
+    alignItems: mapAlignYValue(alignY),
+    justifyContent: mapAlignValue(align),
     ...restProps,
   });
 

packages/canon/src/components/Inline/types.ts

@@ -14,18 +14,28 @@
  * limitations under the License.
  */
 
-import type { SpaceProps, UtilityProps, AsProps } from '../../types';
+import type {
+  SpaceProps,
+  UtilityProps,
+  AsProps,
+  Breakpoint,
+} from '../../types';
 
 /** @public */
 export interface InlineProps extends SpaceProps {
   children: React.ReactNode;
   as?: AsProps;
   gap?: UtilityProps['gap'];
-  align?: Omit<
-    UtilityProps['justifyContent'],
-    'stretch' | 'around' | 'between'
-  >;
-  alignY?: UtilityProps['alignItems'];
+  align?:
+    | 'left'
+    | 'center'
+    | 'right'
+    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
+  alignY?:
+    | 'top'
+    | 'center'
+    | 'bottom'
+    | Partial<Record<Breakpoint, 'top' | 'center' | 'bottom'>>;
   className?: string;
   style?: React.CSSProperties;
 }

packages/canon/src/components/Stack/Stack.stories.tsx

@@ -38,7 +38,7 @@ const meta = {
     },
   },
   args: {
-    align: 'start',
+    align: 'left',
     gap: 'xs',
   },
 } satisfies Meta<typeof Stack>;
@@ -72,7 +72,7 @@ export const Default: Story = {
 export const AlignLeft: Story = {
   args: {
     ...Default.args,
-    align: 'start',
+    align: 'left',
   },
 };
 
@@ -86,7 +86,7 @@ export const AlignCenter: Story = {
 export const AlignRight: Story = {
   args: {
     ...Default.args,
-    align: 'end',
+    align: 'right',
   },
 };
 
@@ -94,9 +94,9 @@ export const ResponsiveAlign: Story = {
   args: {
     ...Default.args,
     align: {
-      xs: 'start',
+      xs: 'left',
       md: 'center',
-      lg: 'end',
+      lg: 'right',
     },
   },
 };

packages/canon/src/components/Stack/Stack.tsx

@@ -17,13 +17,32 @@
 import { createElement, forwardRef } from 'react';
 import { StackProps } from './types';
 import { getClassNames } from '../../utils/getClassNames';
+import type { AlignItems, Breakpoint } from '../../types';
+
+// Function to map align values
+const mapAlignValue = (value?: StackProps['align']) => {
+  if (typeof value === 'string') {
+    let returnedValue: AlignItems = 'stretch';
+    if (value === 'left') returnedValue = 'start';
+    if (value === 'center') returnedValue = 'center';
+    if (value === 'right') returnedValue = 'end';
+    return returnedValue;
+  } else if (typeof value === 'object') {
+    const returnedValue: Partial<Record<Breakpoint, AlignItems>> = {};
+    for (const [key, val] of Object.entries(value)) {
+      returnedValue[key as Breakpoint] = mapAlignValue(val) as AlignItems;
+    }
+    return returnedValue;
+  }
+  return 'stretch';
+};
 
 /** @public */
 export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
   const {
     as = 'div',
     children,
-    align = 'start',
+    align = 'left',
     gap = 'xs',
     className,
     style,
@@ -33,7 +52,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
   // Generate utility class names
   const utilityClassNames = getClassNames({
     gap,
-    alignItems: align === 'start' ? 'stretch' : align,
+    alignItems: mapAlignValue(align),
     ...restProps,
   });
 

packages/canon/src/components/Stack/types.ts

@@ -14,14 +14,23 @@
  * limitations under the License.
  */
 
-import type { SpaceProps, UtilityProps, AsProps } from '../../types';
+import type {
+  SpaceProps,
+  UtilityProps,
+  AsProps,
+  Breakpoint,
+} from '../../types';
 
 /** @public */
 export interface StackProps extends SpaceProps {
   children: React.ReactNode;
   as?: AsProps;
   gap?: UtilityProps['gap'];
-  align?: UtilityProps['alignItems'];
+  align?:
+    | 'left'
+    | 'center'
+    | 'right'
+    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
   className?: string;
   style?: React.CSSProperties;
 }