refactor(flex): apply vanilla-extract

packages/flex/package.json

@@ -9,9 +9,7 @@
   },
   "type": "module",
   "exports": "./src/index.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "build": "tsup",
     "build:storybook": "storybook build",
@@ -38,6 +36,7 @@
     "@testing-library/jest-dom": "catalog:",
     "@testing-library/react": "catalog:",
     "@types/react": "^18.3.12",
+    "@vanilla-extract/css": "catalog:",
     "happy-dom": "catalog:",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

packages/flex/src/Flex.css.ts

@@ -0,0 +1,47 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import type { FlexDirection, FlexAlign, FlexJustify, FlexWrap } from './constants';
+
+export const base = style({
+  display: 'flex',
+});
+
+const directionStyles: Record<FlexDirection, { flexDirection: FlexDirection }> = {
+  row: { flexDirection: 'row' },
+  column: { flexDirection: 'column' },
+  'row-reverse': { flexDirection: 'row-reverse' },
+  'column-reverse': { flexDirection: 'column-reverse' },
+};
+export const direction = styleVariants(directionStyles);
+
+const alignStyles: Record<FlexAlign, { alignItems: FlexAlign }> = {
+  'flex-start': { alignItems: 'flex-start' },
+  'flex-end': { alignItems: 'flex-end' },
+  center: { alignItems: 'center' },
+  stretch: { alignItems: 'stretch' },
+  baseline: { alignItems: 'baseline' },
+  normal: { alignItems: 'normal' },
+};
+export const align = styleVariants(alignStyles);
+
+const justifyStyles: Record<FlexJustify, { justifyContent: FlexJustify }> = {
+  'flex-start': { justifyContent: 'flex-start' },
+  'flex-end': { justifyContent: 'flex-end' },
+  center: { justifyContent: 'center' },
+  'space-between': { justifyContent: 'space-between' },
+  'space-around': { justifyContent: 'space-around' },
+  'space-evenly': { justifyContent: 'space-evenly' },
+  normal: { justifyContent: 'normal' },
+};
+export const justify = styleVariants(justifyStyles);
+
+const wrapStyles: Record<FlexWrap, { flexWrap: FlexWrap }> = {
+  nowrap: { flexWrap: 'nowrap' },
+  wrap: { flexWrap: 'wrap' },
+  'wrap-reverse': { flexWrap: 'wrap-reverse' },
+};
+export const wrap = styleVariants(wrapStyles);
+
+export const display = styleVariants({
+  flex: { display: 'flex' },
+  'inline-flex': { display: 'inline-flex' },
+});

packages/flex/src/Flex.stories.tsx

@@ -13,12 +13,12 @@ const meta = {
     },
     align: {
       control: 'select',
-      options: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'],
+      options: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline', 'normal'],
       description: 'Align items',
     },
     justify: {
       control: 'select',
-      options: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
+      options: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'normal'],
       description: 'Justify content',
     },
     wrap: {
@@ -34,6 +34,18 @@ const meta = {
       control: 'boolean',
       description: 'Display as inline-flex',
     },
+    grow: {
+      control: { type: 'number', min: 0, max: 5, step: 1 },
+      description: 'Flex grow factor',
+    },
+    shrink: {
+      control: { type: 'number', min: 0, max: 5, step: 1 },
+      description: 'Flex shrink factor',
+    },
+    basis: {
+      control: 'text',
+      description: 'Flex basis',
+    },
   },
 } satisfies Meta<typeof Flex>;
 
@@ -70,7 +82,7 @@ export const Basic: Story = {
 
 export const Direction: Story = {
   args: {
-    direction: 'column',
+    direction: 'row',
     gap: '1rem',
     style: { width: '100%' },
     children: [<Box key="1" />, <Box key="2" />, <Box key="3" />],
@@ -139,3 +151,26 @@ export const Wrap: Story = {
     ],
   },
 };
+
+export const FlexGrowShrink: Story = {
+  render: () => (
+    <Flex gap="1rem" style={{ width: '100%', border: '1px dashed gray', padding: '1rem' }}>
+      <Box style={{ width: '100px' }}>Fixed width</Box>
+      <Box style={{ flexGrow: 1 }}>Grow 1</Box>
+      <Box style={{ flexGrow: 2 }}>Grow 2</Box>
+    </Flex>
+  ),
+};
+
+export const InlineFlex: Story = {
+  render: () => (
+    <div>
+      <p>Text before</p>
+      <Flex inline gap="1rem" style={{ border: '1px dashed gray', padding: '0.5rem' }}>
+        <Box style={{ width: '80px', height: '40px' }}>Item 1</Box>
+        <Box style={{ width: '80px', height: '40px' }}>Item 2</Box>
+      </Flex>
+      <p>Text after</p>
+    </div>
+  ),
+};

packages/flex/src/Flex.tsx

@@ -1,13 +1,14 @@
 import { Slot } from '@radix-ui/react-slot';
 import { clsx as cx } from 'clsx';
 import { type CSSProperties, type ComponentProps, type ForwardedRef, forwardRef } from 'react';
-import styles from './Flex.module.css';
+import * as styles from './Flex.css';
+import type { FlexDirection, FlexAlign, FlexJustify, FlexWrap } from './constants';
 
 export interface FlexProps extends ComponentProps<'div'> {
-  align?: CSSProperties['alignItems'];
-  justify?: CSSProperties['justifyContent'];
-  wrap?: CSSProperties['flexWrap'];
-  direction?: CSSProperties['flexDirection'];
+  direction?: FlexDirection;
+  align?: FlexAlign;
+  justify?: FlexJustify;
+  wrap?: FlexWrap;
   basis?: CSSProperties['flexBasis'];
   grow?: CSSProperties['flexGrow'];
   shrink?: CSSProperties['flexShrink'];
@@ -18,14 +19,14 @@ export interface FlexProps extends ComponentProps<'div'> {
 
 export const Flex = forwardRef(function Flex(
   {
-    align,
-    justify,
-    wrap,
-    direction,
+    direction = 'row',
+    align = 'normal',
+    justify = 'normal',
+    wrap = 'nowrap',
     basis,
     grow,
     shrink,
-    inline,
+    inline = false,
     gap,
     className,
     style,
@@ -37,21 +38,26 @@ export const Flex = forwardRef(function Flex(
 ) {
   const Component = asChild ? Slot : 'div';
 
-  const flexStyle = {
-    '--flex-display': inline ? 'inline-flex' : 'flex',
-    '--flex-direction': direction ?? 'row',
-    '--flex-align': align ?? 'normal',
-    '--flex-justify': justify ?? 'normal',
-    '--flex-wrap': wrap ?? 'nowrap',
-    '--flex-gap': gap,
-    '--flex-basis': basis,
-    '--flex-grow': grow,
-    '--flex-shrink': shrink,
+  const classNames = cx(
+    styles.base,
+    styles.direction[direction],
+    styles.align[align],
+    styles.justify[justify],
+    styles.wrap[wrap],
+    inline ? styles.display['inline-flex'] : styles.display.flex,
+    className,
+  );
+
+  const inlineStyles = {
+    flexBasis: basis,
+    flexGrow: grow,
+    flexShrink: shrink,
+    gap,
     ...style,
-  } as React.CSSProperties;
+  };
 
   return (
-    <Component ref={ref} className={cx(styles.flex, className)} style={flexStyle} {...rest}>
+    <Component ref={ref} className={classNames} style={inlineStyles} {...rest}>
       {children}
     </Component>
   );

packages/flex/src/constants/index.ts

@@ -0,0 +1,19 @@
+export const FLEX_DIRECTIONS = ['row', 'column', 'row-reverse', 'column-reverse'] as const;
+export type FlexDirection = (typeof FLEX_DIRECTIONS)[number];
+
+export const FLEX_ALIGNS = ['flex-start', 'flex-end', 'center', 'stretch', 'baseline', 'normal'] as const;
+export type FlexAlign = (typeof FLEX_ALIGNS)[number];
+
+export const FLEX_JUSTIFY_CONTENTS = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+  'normal',
+] as const;
+export type FlexJustify = (typeof FLEX_JUSTIFY_CONTENTS)[number];
+
+export const FLEX_WRAPS = ['nowrap', 'wrap', 'wrap-reverse'] as const;
+export type FlexWrap = (typeof FLEX_WRAPS)[number];