[react] Create Stack component

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

@@ -1,7 +1,7 @@
 /* eslint-env node */
 // eslint-ignore-next-line import/no-unresolved
 const { withPigment } = require('@pigment-css/nextjs-plugin');
-const { experimental_extendTheme: extendTheme } = require('@mui/material/styles');
+const { extendTheme } = require('@mui/material/styles');
 
 /**
  * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions
@@ -96,14 +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,
-  displayName: 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/layout.tsx

@@ -23,7 +23,6 @@ export default function RootLayout(props: { children: React.ReactNode }) {
         className={`${inter.className} ${css`
           background-color: ${({ theme: t }) => t.vars.palette.background.default};
           color: ${({ theme: t }) => t.vars.palette.text.primary};
-          background-image: url('@/assets/mui.svg');
           background-repeat: no-repeat;
           background-position: 1rem 1rem;
         `}`}

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

@@ -0,0 +1,102 @@
+'use client';
+import * as React from 'react';
+import Stack from '@pigment-css/react/Stack';
+import { styled, css } from '@pigment-css/react';
+
+type StackProps = React.ComponentProps<typeof Stack>;
+
+const labelClass = css({
+  padding: '0px 10px',
+});
+
+const Card = styled.div`
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+  box-shadow:
+    rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
+    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;
+  font-size: 0.875rem;
+  line-height: 1.43;
+  letter-spacing: 0.01071em;
+  background-color: rgb(26, 32, 39);
+`;
+
+export default function InteractiveStack() {
+  const [direction, setDirection] = React.useState<StackProps['direction']>('column');
+  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 'spacing': {
+        setSpacing(
+          ev.target.value.match(/^[0-9]+\.?[0-9]*$/)
+            ? parseFloat(ev.target.value)
+            : ev.target.value,
+        );
+        break;
+      }
+      default:
+        break;
+    }
+  }, []);
+
+  const jsx = `
+<Stack
+  direction="${direction}"
+  spacing=${typeof spacing === 'number' ? `{${spacing}}` : `"${spacing}"`}
+>
+`;
+
+  return (
+    <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) => (
+            <label key={item} className={labelClass}>
+              {item}
+              <input
+                type="radio"
+                name="direction"
+                value={item}
+                checked={item === direction}
+                onChange={handleChange}
+              />
+            </label>
+          ))}
+        </fieldset>
+        <fieldset sx={{ mt: 1 }}>
+          <legend>Spacing</legend>
+          {[0, 0.5, 1, 2, 3, 4, 8, 12, '2rem'].map((item) => (
+            <label key={item} className={labelClass}>
+              {item}
+              <input
+                type="radio"
+                name="spacing"
+                value={item}
+                checked={item === spacing}
+                onChange={handleChange}
+              />
+            </label>
+          ))}
+        </fieldset>
+      </Stack>
+      <Stack direction={direction} spacing={spacing}>
+        {[0, 1, 2].map((value) => (
+          <Card key={value}>{`Item ${value + 1}`}</Card>
+        ))}
+      </Stack>
+      <textarea style={{ colorScheme: 'dark' }} value={jsx} readOnly rows={8} />
+    </Stack>
+  );
+}

apps/pigment-css-vite-app/.eslintrc

@@ -1,6 +1,7 @@
 {
   "rules": {
     "import/prefer-default-export": "off",
-    "react/react-in-jsx-scope": "off"
-  }
+    "react/react-in-jsx-scope": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["sx"] }],
+  },
 }