@latte-macchiat-io/latte-vanilla-components 0.0.219 → 0.0.221

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.219",
+  "version": "0.0.221",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Columns/index.tsx

@@ -1,28 +1,21 @@
 import { clsx } from 'clsx';
 
-import { columnItem, columnsRecipe, ColumnsVariants } from './styles.css';
+import { columnsRecipe, ColumnsVariants } from './styles.css';
 
 export type ColumnsProps = React.HTMLAttributes<HTMLDivElement> &
   ColumnsVariants & {
-    columns: number[];
+    columns: number[]; // ex: [50, 50] ou [25, 75]
     children: React.ReactNode;
   };
 
 export const Columns = ({ align, vAlign, columns, children, className }: ColumnsProps) => {
   return (
-    <div className={clsx(columnsRecipe({ align, vAlign }), className)}>
-      {Array.isArray(children) &&
-        children.map((child, index) => (
-          <div
-            key={index}
-            className={columnItem}
-            style={{
-              flex: columns[index],
-              maxWidth: `${columns[index]}%`,
-            }}>
-            {child}
-          </div>
-        ))}
+    <div
+      className={clsx(columnsRecipe({ align, vAlign }), className)}
+      style={{
+        gridTemplateColumns: columns.map((c) => `${c}%`).join(' '), // ex: "50% 50%"
+      }}>
+      {children}
     </div>
   );
 };

package/src/components/Columns/stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Columns } from '.';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Columns> = {
+  title: 'Latte Components / 1. Global / Columns',
+  component: Columns,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <div>Col 1</div>
+        <div>Col 2</div>
+      </>
+    ),
+  },
+};

package/src/components/Columns/styles.css.ts

@@ -1,4 +1,3 @@
-import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
 import { themeContract } from '../../theme/contract.css';
@@ -7,10 +6,9 @@ import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 export const columnsRecipe = recipe({
   base: [
     {
+      display: 'grid',
       width: '100%',
-      display: 'flex',
-      flexWrap: 'wrap',
-      flexDirection: 'column',
+      gridTemplateColumns: '1fr', // Mobile : une seule colonne
 
       '@media': {
         ...generateResponsiveMedia({
@@ -18,7 +16,7 @@ export const columnsRecipe = recipe({
         }),
 
         [queries.sm]: {
-          flexDirection: 'row',
+          gridAutoFlow: 'row',
         },
       },
     },
@@ -26,29 +24,14 @@ export const columnsRecipe = recipe({
 
   variants: {
     align: {
-      left: {
-        textAlign: 'left',
-      },
-      center: {
-        textAlign: 'center',
-      },
-      right: {
-        textAlign: 'right',
-      },
+      left: { textAlign: 'left' },
+      center: { textAlign: 'center' },
+      right: { textAlign: 'right' },
     },
     vAlign: {
-      top: {
-        alignItems: 'flex-start',
-        justifyContent: 'flex-start',
-      },
-      center: {
-        alignItems: 'center',
-        justifyContent: 'center',
-      },
-      bottom: {
-        alignItems: 'flex-end',
-        justifyContent: 'flex-end',
-      },
+      top: { alignItems: 'start' },
+      center: { alignItems: 'center' },
+      bottom: { alignItems: 'end' },
     },
   },
 
@@ -57,16 +40,4 @@ export const columnsRecipe = recipe({
   },
 });
 
-export const columnItem = style({
-  minWidth: 0,
-  flex: '0 0 100%',
-  position: 'relative',
-
-  '@media': {
-    [queries.md]: {
-      flex: 'unset',
-    },
-  },
-});
-
 export type ColumnsVariants = RecipeVariants<typeof columnsRecipe>;