[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

@@ -161,6 +161,15 @@
       },
       "require": "./build/Stack.js",
       "default": "./build/Stack.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,126 @@
+/* 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}
+    />
+  );
+});
+
+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/utils/convertAtomicsToCss.ts

@@ -57,11 +57,12 @@ export function convertAtomicsToCss(
   Object.entries(conditions).forEach(([conditionName, mediaQueryStr]) => {
     Object.entries(properties).forEach(([cssPropertyName, propertyValues]) => {
       propertyValues.forEach((propertyValue) => {
-        const propValue = propertyValue.startsWith('--')
-          ? cssesc(
-              `var(${propertyValue}${conditionName === defaultCondition ? '' : `-${conditionName}`})`,
-            )
-          : propertyValue;
+        const propValue =
+          typeof propertyValue === 'string' && propertyValue.startsWith('--')
+            ? cssesc(
+                `var(${propertyValue}${conditionName === defaultCondition ? '' : `-${conditionName}`})`,
+              )
+            : propertyValue;
         const className =
           isGlobal || debug
             ? getClassName(

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/generateAtomics.test.js

@@ -149,4 +149,88 @@ describe('generateAtomics', () => {
       style: {},
     });
   });
+
+  describe('hidden atomics', () => {
+    const hiddenAtomic = atomics({
+      styles: {
+        display: {
+          none: {
+            xsUp: 'display-none-xsUp',
+            xsDown: 'display-none-xsDown',
+            smUp: 'display-none-smUp',
+            smDown: 'display-none-smDown',
+            mdUp: 'display-none-mdUp',
+            mdDown: 'display-none-mdDown',
+            lgUp: 'display-none-lgUp',
+            lgDown: 'display-none-lgDown',
+            xlUp: 'display-none-xlUp',
+            xlDown: 'display-none-xlDown',
+            xsOnly: 'display-none-onlyXs',
+            smOnly: 'display-none-onlySm',
+            mdOnly: 'display-none-onlyMd',
+            lgOnly: 'display-none-onlyLg',
+            xlOnly: 'display-none-onlyXl',
+          },
+        },
+      },
+      conditions: [
+        'xsUp',
+        'xsDown',
+        'smUp',
+        'smDown',
+        'mdUp',
+        'mdDown',
+        'lgUp',
+        'lgDown',
+        'xlUp',
+        'xlDown',
+        'xsOnly',
+        'smOnly',
+        'mdOnly',
+        'lgOnly',
+        'xlOnly',
+      ],
+    });
+
+    it('should generate up and down classes', () => {
+      expect(
+        hiddenAtomic({
+          display: {
+            smDown: 'none',
+            lgUp: 'none',
+          },
+        }),
+      ).to.deep.equal({
+        className: 'display-none-smDown display-none-lgUp',
+        style: {},
+      });
+    });
+
+    it('should work with only sm', () => {
+      expect(
+        hiddenAtomic({
+          display: {
+            smOnly: 'none',
+          },
+        }),
+      ).to.deep.equal({
+        className: 'display-none-onlySm',
+        style: {},
+      });
+    });
+
+    it('should work with only with array value', () => {
+      expect(
+        hiddenAtomic({
+          display: {
+            smOnly: 'none',
+            lgOnly: 'none',
+          },
+        }),
+      ).to.deep.equal({
+        className: 'display-none-onlySm display-none-onlyLg',
+        style: {},
+      });
+    });
+  });
 });

packages/pigment-css-react/tests/valueToLiteral.test.ts

@@ -0,0 +1,53 @@
+import { expect } from 'chai';
+import { valueToLiteral } from '../src/utils/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/tsconfig.json

@@ -10,6 +10,6 @@
     "types": ["node", "mocha"],
     "jsx": "react-jsx"
   },
-  "include": ["src/**/*.tsx", "src/**/*.js", "src/**/*.ts"],
+  "include": ["src/**/*.tsx", "src/**/*.js", "src/**/*.ts", "tests/valueToLiteral.test.ts"],
   "exclude": ["./tsup.config.ts"]
 }