[react] Implement Container component (#143)

mui · Jun 18, 2024 · de56082 · de56082
1 parent 02b2440
commit de56082
Show file tree

Hide file tree

Showing 12 changed files with 576 additions and 180 deletions.
diff --git a/apps/pigment-css-next-app/src/app/stack/page.tsx b/apps/pigment-css-next-app/src/app/stack/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import Stack from '@pigment-css/react/Stack';
+import Container from '@pigment-css/react/Container';
 import { styled, css } from '@pigment-css/react';
 
 type StackProps = React.ComponentProps<typeof Stack>;
@@ -58,45 +59,53 @@ export default function InteractiveStack() {
 `;
 
   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>
+    <Container maxWidth="md">
+      <Stack spacing={2} sx={{ flexGrow: 1, padding: 2 }}>
+        <Stack
+          spacing={2}
+          direction="row"
+          sx={{
+            justifyContent: 'space-between',
+          }}
+        >
+          <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>
           ))}
-        </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>
-      <textarea style={{ colorScheme: 'dark' }} value={jsx} readOnly rows={8} />
-    </Stack>
+    </Container>
   );
 }
diff --git a/apps/pigment-css-vite-app/src/pages/index.tsx b/apps/pigment-css-vite-app/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Stack from '@pigment-css/react/Stack';
+import Container from '@pigment-css/react/Container';
 import { styled, css } from '@pigment-css/react';
 
 type StackProps = React.ComponentProps<typeof Stack>;
@@ -16,39 +17,32 @@ 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;
   font-size: 0.875rem;
   line-height: 1.43;
   letter-spacing: 0.01071em;
   background-color: rgb(26, 32, 39);
-  color: white;
 `;
 
 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,106 +53,58 @@ 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">
-        <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>
+    <Container maxWidth="md">
+      <Stack spacing={2} sx={{ flexGrow: 1, padding: 2 }}>
+        <Stack
+          spacing={2}
+          direction="row"
+          sx={{
+            justifyContent: 'space-between',
+          }}
+        >
+          <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>
           ))}
-        </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) => (
-            <label key={item} className={labelClass}>
-              {item}
-              <input
-                type="radio"
-                name="spacing"
-                value={item}
-                checked={item === spacing}
-                onChange={handleChange}
-              />
-            </label>
-          ))}
-        </fieldset>
-      </Stack>
-      <Stack
-        direction={direction}
-        justifyContent={justifyContent}
-        alignItems={alignItems}
-        spacing={spacing}
-        sx={{ height: 240, width: '100%' }}
-      >
-        {[0, 1, 2].map((value) => (
-          <Card key={value}>{`Item ${value + 1}`}</Card>
-        ))}
+        </Stack>
+        <textarea style={{ colorScheme: 'dark' }} value={jsx} readOnly rows={8} />
       </Stack>
-      <textarea style={{ colorScheme: 'dark' }} value={jsx} readOnly rows={8} />
-    </Stack>
+    </Container>
   );
 }
diff --git a/apps/pigment-css-vite-app/vite.config.ts b/apps/pigment-css-vite-app/vite.config.ts
@@ -3,7 +3,7 @@ import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import Pages from 'vite-plugin-pages';
 import { pigment } from '@pigment-css/vite-plugin';
-import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import { extendTheme } from '@mui/material';
 
 const theme = extendTheme({
   getSelector: function getSelector(colorScheme, css) {

diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json
@@ -161,6 +161,15 @@
       },
       "require": "./build/Stack.js",
       "default": "./build/Stack.js"
+    },
+    "./Container": {
+      "types": "./build/Container.d.ts",
+      "import": {
+        "types": "./build/Container.d.mts",
+        "default": "./build/Container.mjs"
+      },
+      "require": "./build/Container.js",
+      "default": "./build/Container.js"
     }
   },
   "nx": {

diff --git a/packages/pigment-css-react/src/Box.jsx b/packages/pigment-css-react/src/Box.jsx
@@ -52,30 +52,32 @@ const Box = React.forwardRef(
   },
 );
 
-Box.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   * Replacement for the emotion's `as` prop.
-   */
-  as: PropTypes.elementType,
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The style extension prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-};
+process.env.NODE_ENV !== 'production'
+  ? (Box.propTypes /* remove-proptypes */ = {
+      // ┌────────────────────────────── Warning ──────────────────────────────┐
+      // │ These PropTypes are generated from the TypeScript type definitions. │
+      // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+      // └─────────────────────────────────────────────────────────────────────┘
+      /**
+       * The component used for the root node.
+       * Either a string to use a HTML element or a component.
+       * Replacement for the emotion's `as` prop.
+       */
+      as: PropTypes.elementType,
+      /**
+       * The content of the component.
+       */
+      children: PropTypes.node,
+      /**
+       * The component used for the root node.
+       * Either a string to use a HTML element or a component.
+       */
+      component: PropTypes.elementType,
+      /**
+       * The style extension prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    })
+  : void 0;
 
 export default Box;