[react] Create Stack component

apps/pigment-css-next-app/next.config.js

@@ -96,13 +96,40 @@ theme.getColorSchemeSelector = (colorScheme) => {
   return `@media (prefers-color-scheme: ${colorScheme})`;
 };
 
+function innerNoop() {
+  return null;
+}
+function outerNoop() {
+  return innerNoop;
+}
+
 /**
  * @type {PigmentOptions}
  */
 const pigmentOptions = {
   theme,
   transformLibraries: ['local-ui-lib', '@mui/material'],
   sourceMap: true,
+  overrideContext: (context) => {
+    if (!context.$RefreshSig$) {
+      context.$RefreshSig$ = outerNoop;
+    }
+    return {
+      ...context,
+      require: (id) => {
+        if (id === '@mui/styled-engine' || id === '@mui/styled-engine-sc') {
+          return {
+            __esModule: true,
+            default: () => () => () => null,
+            internal_processStyles: () => {},
+            keyframes: () => '',
+            css: () => '',
+          };
+        }
+        return context.require(id);
+      },
+    };
+  },
 };
 
 /** @type {import('next').NextConfig} */

apps/pigment-css-next-app/src/app/page.tsx

@@ -1,5 +1,6 @@
 import Image from 'next/image';
 import { styled, css } from '@pigment-css/react';
+import Stack from '@pigment-css/react/Stack';
 import Chip from '@mui/material/Chip';
 import styles from './page.module.css';
 
@@ -112,6 +113,11 @@ export default function Home() {
           },
         }}
       >
+        <Stack spacing={{ xs: 2, md: 3 }}>
+          <div>Item1</div>
+          <div>Item1</div>
+          <div>Item1</div>
+        </Stack>
         <p sx={{ boxShadow: '0 0 4px 0 rgba(0 0 0 / 0.12)' }}>
           Get started by editing&nbsp;
           <code className={styles.code}>src/app/page.tsx</code>

apps/pigment-css-next-app/src/app/stack/page.tsx

@@ -17,6 +17,7 @@ const Card = styled.div`
     rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
     rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
+  color: white;
   padding: 8px 16px;
   font-family: Roboto, Helvetica, Arial, sans-serif;
   font-weight: 400;
@@ -28,27 +29,20 @@ const Card = styled.div`
 
 export default function InteractiveStack() {
   const [direction, setDirection] = React.useState<StackProps['direction']>('column');
-  const [justifyContent, setJustifyContent] =
-    React.useState<StackProps['justifyContent']>('center');
-  const [alignItems, setAlignItems] = React.useState<StackProps['alignItems']>('center');
-  const [spacing, setSpacing] = React.useState(2);
+  const [spacing, setSpacing] = React.useState<string | number>(2);
 
   const handleChange = React.useCallback((ev: React.ChangeEvent<HTMLInputElement>) => {
     switch (ev.target.name) {
       case 'direction': {
         setDirection(ev.target.value as StackProps['direction']);
         break;
       }
-      case 'justify-content': {
-        setJustifyContent(ev.target.value as StackProps['justifyContent']);
-        break;
-      }
-      case 'align-items': {
-        setAlignItems(ev.target.value as StackProps['alignItems']);
-        break;
-      }
       case 'spacing': {
-        setSpacing(parseFloat(ev.target.value));
+        setSpacing(
+          ev.target.value.match(/^[0-9]+\.?[0-9]*$/)
+            ? parseFloat(ev.target.value)
+            : ev.target.value,
+        );
         break;
       }
       default:
@@ -59,15 +53,13 @@ export default function InteractiveStack() {
   const jsx = `
 <Stack
   direction="${direction}"
-  justifyContent="${justifyContent}"
-  alignItems="${alignItems}"
-  spacing={${spacing}}
+  spacing=${typeof spacing === 'number' ? `{${spacing}}` : `"${spacing}"`}
 >
 `;
 
   return (
-    <Stack sx={{ flexGrow: 1 }}>
-      <Stack direction="row" justifyContent="space-between">
+    <Stack spacing={2} sx={{ flexGrow: 1, padding: 2 }}>
+      <Stack direction="row" justifyContent="space-between" spacing={2}>
         <fieldset>
           <legend>Direction</legend>
           {['row', 'row-reverse', 'column', 'column-reverse'].map((item) => (
@@ -83,57 +75,9 @@ export default function InteractiveStack() {
             </label>
           ))}
         </fieldset>
-        <fieldset sx={{ mt: 1 }}>
-          <legend>justifyContent</legend>
-          {[
-            'flex-start',
-            'center',
-            'flex-end',
-            'space-between',
-            'space-around',
-            'space-evenly',
-          ].map((item) => (
-            <label key={item} className={labelClass}>
-              {item}
-              <input
-                type="radio"
-                name="justify-content"
-                value={item}
-                checked={item === justifyContent}
-                onChange={handleChange}
-              />
-            </label>
-          ))}
-        </fieldset>
-      </Stack>
-      <Stack direction="row" justifyContent="space-between">
-        <fieldset sx={{ mt: 1 }}>
-          <legend>alignItems</legend>
-          {[
-            'flex-start',
-            'center',
-            'flex-end',
-            'stretch',
-            'baseline',
-            'space-between',
-            'space-around',
-            'space-evenly',
-          ].map((item) => (
-            <label key={item} className={labelClass}>
-              {item}
-              <input
-                type="radio"
-                name="align-items"
-                value={item}
-                checked={item === alignItems}
-                onChange={handleChange}
-              />
-            </label>
-          ))}
-        </fieldset>
         <fieldset sx={{ mt: 1 }}>
           <legend>Spacing</legend>
-          {[0, 0.5, 1, 2, 3, 4, 8, 12].map((item) => (
+          {[0, 0.5, 1, 2, 3, 4, 8, 12, '2rem'].map((item) => (
             <label key={item} className={labelClass}>
               {item}
               <input
@@ -147,13 +91,7 @@ export default function InteractiveStack() {
           ))}
         </fieldset>
       </Stack>
-      <Stack
-        direction={direction}
-        justifyContent={justifyContent}
-        alignItems={alignItems}
-        spacing={spacing}
-        sx={{ height: 240, width: '100%' }}
-      >
+      <Stack direction={direction} spacing={spacing}>
         {[0, 1, 2].map((value) => (
           <Card key={value}>{`Item ${value + 1}`}</Card>
         ))}

packages/pigment-css-react/src/RtlProvider.tsx

@@ -1,2 +1,3 @@
 'use client';
+
 export * from '@mui/system/RtlProvider';

packages/pigment-css-react/src/Stack.d.ts

@@ -6,11 +6,8 @@ import { PolymorphicComponent } from './Box';
 type CssProperty<T> = T | Array<T> | Partial<Record<Breakpoint, T>>;
 
 type StackBaseProps = {
-  display?: CssProperty<'flex' | 'inline-flex'>;
   spacing?: CssProperty<number | string>;
   direction?: CssProperty<CSS.StandardLonghandProperties['flexDirection']>;
-  justifyContent?: CssProperty<CSS.StandardLonghandProperties['justifyContent']>;
-  alignItems?: CssProperty<CSS.StandardLonghandProperties['alignItems']>;
   divider?: React.ReactNode;
   className?: string;
 };