[react] Create Hidden component

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

@@ -0,0 +1,20 @@
+import Hidden from '@pigment-css/react/Hidden';
+
+export default function HiddenDemo() {
+  return (
+    <div>
+      <Hidden smDown>
+        <div>Hidden on small screens and down</div>
+      </Hidden>
+      <Hidden mdUp>
+        <div>Hidden on medium screens and up</div>
+      </Hidden>
+      <Hidden only="sm">
+        <div>Hidden on sm</div>
+      </Hidden>
+      <Hidden only={['md', 'xl']}>
+        <div>Hidden on md and xl</div>
+      </Hidden>
+    </div>
+  );
+}

packages/pigment-css-react/package.json

@@ -170,6 +170,15 @@
       },
       "require": "./build/Container.js",
       "default": "./build/Container.js"
+    },
+    "./Hidden": {
+      "types": "./build/Hidden.d.ts",
+      "import": {
+        "types": "./build/Hidden.d.mts",
+        "default": "./build/Hidden.mjs"
+      },
+      "require": "./build/Hidden.js",
+      "default": "./build/Hidden.js"
     }
   },
   "nx": {

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

@@ -0,0 +1,18 @@
+import { Breakpoint } from './base';
+import { PolymorphicComponent } from './Box';
+
+type HiddenUp = {
+  [key in Breakpoint as `${key}Up`]?: boolean;
+};
+type HiddenDown = {
+  [key in Breakpoint as `${key}Down`]?: boolean;
+};
+
+interface HiddenBaseProps extends HiddenUp, HiddenDown {
+  className?: string;
+  only?: Breakpoint | Breakpoint[];
+}
+
+declare const Hidden: PolymorphicComponent<HiddenBaseProps>;
+
+export default Hidden;

packages/pigment-css-react/src/Hidden.jsx

@@ -0,0 +1,128 @@
+/* eslint-disable react/jsx-filename-extension */
+import * as React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { generateAtomics } from './generateAtomics';
+
+const hiddenAtomics = generateAtomics(({ theme }) => {
+  const conditions = {};
+
+  for (let i = 0; i < theme.breakpoints.keys.length; i += 1) {
+    const breakpoint = theme.breakpoints.keys[i];
+    conditions[`${theme.breakpoints.keys[i]}Only`] = theme.breakpoints.only(breakpoint);
+    conditions[`${theme.breakpoints.keys[i]}Up`] = theme.breakpoints.up(breakpoint);
+    conditions[`${theme.breakpoints.keys[i]}Down`] = theme.breakpoints.down(breakpoint);
+  }
+
+  return {
+    conditions,
+    properties: {
+      display: ['none'],
+    },
+  };
+});
+
+const Hidden = React.forwardRef(function Hidden(
+  { className, component = 'div', style, ...props },
+  ref,
+) {
+  const rest = {};
+  const breakpointProps = {};
+  Object.keys(props).forEach((key) => {
+    if (key.endsWith('Up') || key.endsWith('Down')) {
+      breakpointProps[key] = 'none';
+    } else if (key === 'only') {
+      if (typeof props[key] === 'string') {
+        breakpointProps[`${props[key]}Only`] = 'none';
+      }
+      if (Array.isArray(props[key])) {
+        props[key].forEach((val) => {
+          breakpointProps[`${val}Only`] = 'none';
+        });
+      }
+    } else {
+      rest[key] = props[key];
+    }
+  });
+  const stackClasses = hiddenAtomics({ display: breakpointProps });
+  const Component = component;
+  return (
+    <Component
+      ref={ref}
+      className={clsx(stackClasses.className, className)}
+      style={{ ...style, ...stackClasses.style }}
+      {...rest}
+    />
+  );
+});
+
+if (process.env.NODE_ENV !== 'production') {
+  Hidden.propTypes = {
+    /**
+     * The content of the component.
+     */
+    children: PropTypes.node,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+    /**
+     * If `true`, screens this size and down are hidden.
+     */
+    lgDown: PropTypes.bool,
+    /**
+     * If `true`, screens this size and up are hidden.
+     */
+    lgUp: PropTypes.bool,
+    /**
+     * If `true`, screens this size and down are hidden.
+     */
+    mdDown: PropTypes.bool,
+    /**
+     * If `true`, screens this size and up are hidden.
+     */
+    mdUp: PropTypes.bool,
+    /**
+     * Hide the given breakpoint(s).
+     */
+    only: PropTypes.oneOfType([
+      PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+      PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])),
+    ]),
+    /**
+     * If `true`, screens this size and down are hidden.
+     */
+    smDown: PropTypes.bool,
+    /**
+     * If `true`, screens this size and up are hidden.
+     */
+    smUp: PropTypes.bool,
+    /**
+     * @ignore
+     */
+    style: PropTypes.object,
+    /**
+     * If `true`, screens this size and down are hidden.
+     */
+    xlDown: PropTypes.bool,
+    /**
+     * If `true`, screens this size and up are hidden.
+     */
+    xlUp: PropTypes.bool,
+    /**
+     * If `true`, screens this size and down are hidden.
+     */
+    xsDown: PropTypes.bool,
+    /**
+     * If `true`, screens this size and up are hidden.
+     */
+    xsUp: PropTypes.bool,
+  };
+}
+
+export default Hidden;

packages/pigment-css-react/src/generateAtomics.js

@@ -43,11 +43,19 @@ export function atomics({ styles, shorthands, conditions, defaultCondition, mult
         inlineStyle[`${key}${breakpoint === defaultCondition ? '' : `-${breakpoint}`}`] =
           styleValue;
       } else {
-        classes.push(styleClasses[value][breakpoint]);
+        classes.push(
+          typeof styleClasses[value] !== 'object'
+            ? styleClasses[value]
+            : styleClasses[value][breakpoint],
+        );
       }
     }
 
-    if (typeof propertyValue === 'string' || typeof propertyValue === 'number') {
+    if (
+      typeof propertyValue === 'string' ||
+      typeof propertyValue === 'number' ||
+      typeof propertyValue === 'boolean'
+    ) {
       handlePrimitive(propertyValue);
     } else if (Array.isArray(propertyValue)) {
       propertyValue.forEach((value, index) => {
@@ -78,7 +86,7 @@ export function atomics({ styles, shorthands, conditions, defaultCondition, mult
     const inlineStyle = {};
     Object.keys(props).forEach((cssProperty) => {
       const values = props[cssProperty];
-      if (cssProperty in shorthands) {
+      if (shorthands && cssProperty in shorthands) {
         const configShorthands = shorthands[cssProperty];
         if (!configShorthands) {
           return;

packages/pigment-css-react/src/index.ts

@@ -6,5 +6,4 @@ export { generateAtomics, atomics } from './generateAtomics';
 export { default as css } from './css';
 export { default as createUseThemeProps } from './createUseThemeProps';
 export { default as internal_createExtendSxProp } from './createExtendSxProp';
-export { default as Box } from './Box';
 export { default as useTheme } from './useTheme';

packages/pigment-css-react/src/utils/valueToLiteral.test.ts

@@ -0,0 +1,53 @@
+import { expect } from 'chai';
+import { valueToLiteral } from './valueToLiteral';
+
+describe('valueToLiteral', () => {
+  it('should work with undefined as a value', () => {
+    expect(
+      valueToLiteral({
+        foo: undefined,
+      }),
+    ).to.deep.equal({
+      type: 'ObjectExpression',
+      properties: [
+        {
+          type: 'ObjectProperty',
+          computed: false,
+          shorthand: false,
+          key: {
+            type: 'Identifier',
+            name: 'foo',
+          },
+          value: {
+            type: 'Identifier',
+            name: 'undefined',
+          },
+        },
+      ],
+    });
+  });
+
+  it('should work with null as a value', () => {
+    expect(
+      valueToLiteral({
+        foo: null,
+      }),
+    ).to.deep.equal({
+      type: 'ObjectExpression',
+      properties: [
+        {
+          type: 'ObjectProperty',
+          computed: false,
+          shorthand: false,
+          key: {
+            type: 'Identifier',
+            name: 'foo',
+          },
+          value: {
+            type: 'NullLiteral',
+          },
+        },
+      ],
+    });
+  });
+});

packages/pigment-css-react/src/utils/valueToLiteral.ts

@@ -8,7 +8,7 @@ export function isSerializable(o: unknown): o is Serializable {
     return o.every(isSerializable);
   }
 
-  if (o === null) {
+  if (o === null || o === undefined) {
     return true;
   }
 

packages/pigment-css-react/tests/Hidden/Hidden.test.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import path from 'node:path';
+import { createRenderer } from '@mui/internal-test-utils';
+import { createBreakpoints } from '@mui/system';
+import { runTransformation, expect } from '../testUtils';
+
+describe('Pigment CSS - Hidden', () => {
+  const { render } = createRenderer();
+
+  it('should transform and render sx prop', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, '../../src/Hidden.jsx'),
+      {
+        themeArgs: {
+          theme: {
+            breakpoints: createBreakpoints({}),
+          },
+        },
+        outputDir: path.join(__dirname, 'fixtures'),
+      },
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+
+    const HiddenOutput = (await import('./fixtures/Hidden.output')).default;
+
+    const { container } = render(<HiddenOutput smDown lgUp only={['xs', 'xl']} />);
+    const classNames = new Set([...container.firstChild.className.split(' ')]);
+
+    expect(classNames.size).to.equal(4);
+  });
+});

packages/pigment-css-react/tests/Hidden/fixtures/Hidden.output.css

@@ -0,0 +1,75 @@
+@media (min-width: 0px) and (max-width: 599.95px) {
+  .hccfrvp1 {
+    display: none;
+  }
+}
+@media (min-width: 0px) {
+  .hccfrvp2 {
+    display: none;
+  }
+}
+@media (max-width: -0.05px) {
+  .hccfrvp3 {
+    display: none;
+  }
+}
+@media (min-width: 600px) and (max-width: 899.95px) {
+  .hccfrvp4 {
+    display: none;
+  }
+}
+@media (min-width: 600px) {
+  .hccfrvp5 {
+    display: none;
+  }
+}
+@media (max-width: 599.95px) {
+  .hccfrvp6 {
+    display: none;
+  }
+}
+@media (min-width: 900px) and (max-width: 1199.95px) {
+  .hccfrvp7 {
+    display: none;
+  }
+}
+@media (min-width: 900px) {
+  .hccfrvp8 {
+    display: none;
+  }
+}
+@media (max-width: 899.95px) {
+  .hccfrvp9 {
+    display: none;
+  }
+}
+@media (min-width: 1200px) and (max-width: 1535.95px) {
+  .hccfrvp10 {
+    display: none;
+  }
+}
+@media (min-width: 1200px) {
+  .hccfrvp11 {
+    display: none;
+  }
+}
+@media (max-width: 1199.95px) {
+  .hccfrvp12 {
+    display: none;
+  }
+}
+@media (min-width: 1536px) {
+  .hccfrvp13 {
+    display: none;
+  }
+}
+@media (min-width: 1536px) {
+  .hccfrvp14 {
+    display: none;
+  }
+}
+@media (max-width: 1535.95px) {
+  .hccfrvp15 {
+    display: none;
+  }
+}