@hyphen/hyphen-components 2.9.0

package/src/lib/cssShorthandToClasses.test.ts

@@ -0,0 +1,149 @@
+import { cssShorthandToClasses } from './cssShorthandToClasses';
+import { SPACING_OPTIONS } from './tokens';
+
+describe('cssShorthandToClasses', () => {
+  describe('token values', () => {
+    SPACING_OPTIONS.map((token) =>
+      test(`returns expected css object if token ${token} is passed`, () => {
+        const spacingClasses = cssShorthandToClasses('p', token);
+
+        expect(spacingClasses).toEqual([`p-${token}`]);
+      })
+    );
+  });
+
+  describe('2 values', () => {
+    test('returns expected css object if vertical and horizontal spacing values are passed', () => {
+      const spacingClasses = cssShorthandToClasses('p', 'xs sm');
+
+      expect(spacingClasses).toEqual(['p-v-xs', 'p-h-sm']);
+    });
+
+    test('returns expected css object if vertical and horizontal are set to 0', () => {
+      const spacingClasses = cssShorthandToClasses('p', '0 0');
+
+      expect(spacingClasses).toEqual(['p-v-0', 'p-h-0']);
+    });
+
+    test('returns expected css object if gap is set to sm lg', () => {
+      const classes = cssShorthandToClasses('g', 'sm lg');
+
+      expect(classes).toEqual(['rg-sm', 'cg-lg']);
+    });
+
+    test('returns expected css object if border radius are set to sm lg', () => {
+      const classes = cssShorthandToClasses('br', 'sm lg');
+
+      expect(classes).toEqual([
+        'br-top-left-sm',
+        'br-bottom-right-sm',
+        'br-top-right-lg',
+        'br-bottom-left-lg',
+      ]);
+    });
+  });
+
+  describe('3 values', () => {
+    test('returns expected css object if top, horizontal and bottom spacing values are passed', () => {
+      const spacingClasses = cssShorthandToClasses('p', 'xs sm lg');
+
+      expect(spacingClasses).toEqual(['p-top-xs', 'p-h-sm', 'p-bottom-lg']);
+    });
+
+    test('returns expected css object if top, horizontal and bottom spacing values are set to 0', () => {
+      const spacingClasses = cssShorthandToClasses('p', '0 0 0');
+
+      expect(spacingClasses).toEqual(['p-top-0', 'p-h-0', 'p-bottom-0']);
+    });
+
+    test('returns expected css object if border radius are set to sm lg', () => {
+      const classes = cssShorthandToClasses('br', 'sm md lg');
+
+      expect(classes).toEqual([
+        'br-top-left-sm',
+        'br-top-right-md',
+        'br-bottom-left-md',
+        'br-bottom-right-lg',
+      ]);
+    });
+  });
+
+  describe('4 values', () => {
+    test('returns expected css object if top, right, bottom, left spacing values are passed', () => {
+      const spacingClasses = cssShorthandToClasses('p', 'xs sm lg md');
+
+      expect(spacingClasses).toEqual([
+        'p-top-xs',
+        'p-right-sm',
+        'p-bottom-lg',
+        'p-left-md',
+      ]);
+    });
+
+    test('returns expected css object if top, right, bottom, left spacing values are set to 0', () => {
+      const spacingClasses = cssShorthandToClasses('p', '0 0 0 0');
+
+      expect(spacingClasses).toEqual([
+        'p-top-0',
+        'p-right-0',
+        'p-bottom-0',
+        'p-left-0',
+      ]);
+    });
+
+    test('returns expected css object if border radius are set to xs sm md lg', () => {
+      const classes = cssShorthandToClasses('br', 'xs sm md lg');
+
+      expect(classes).toEqual([
+        'br-top-left-xs',
+        'br-top-right-sm',
+        'br-bottom-right-md',
+        'br-bottom-left-lg',
+      ]);
+    });
+  });
+
+  describe('Responsive Classes', () => {
+    test('returns expected css object if an object is passed with spacing for particular breakpoints', () => {
+      const spacingClasses = cssShorthandToClasses('p', {
+        base: 'md lg',
+        tablet: 'sm md lg xl',
+      });
+
+      expect(spacingClasses).toEqual([
+        'p-v-md',
+        'p-h-lg',
+        'p-top-sm-tablet',
+        'p-right-md-tablet',
+        'p-bottom-lg-tablet',
+        'p-left-xl-tablet',
+      ]);
+    });
+
+    test('returns expected css object if an object is passed with spacing 0 for particular breakpoints', () => {
+      const spacingClasses = cssShorthandToClasses('p', {
+        base: '3xl 0',
+        desktop: '0 3xl',
+      });
+
+      expect(spacingClasses).toEqual([
+        'p-v-3xl',
+        'p-h-0',
+        'p-v-0-desktop',
+        'p-h-3xl-desktop',
+      ]);
+    });
+  });
+
+  test('returns expected classes if inherit is passed', () => {
+    const spacingClasses = cssShorthandToClasses('p', 'inherit');
+
+    expect(spacingClasses).toEqual(['p-inherit']);
+  });
+
+  test('returns expected classes if margin is inherit is passed', () => {
+    const spacingClasses = cssShorthandToClasses('m', 'inherit');
+
+    expect(spacingClasses).toEqual(['m-inherit']);
+  });
+});

package/src/lib/cssShorthandToClasses.ts

@@ -0,0 +1,133 @@
+import { ResponsiveProp, BreakpointSizeWithBase } from '../types';
+
+export function isValidSpacingValue(
+  value?: string | ResponsiveProp<string | undefined>
+): boolean {
+  if (
+    value === undefined ||
+    value === null ||
+    (typeof value !== 'string' && typeof value !== 'object')
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+export function generateBaseClasses(
+  attribute: string | undefined,
+  value?: string | ResponsiveProp<string | undefined>
+): string[] {
+  if (typeof value !== 'string') return [];
+
+  const trimmedValue = value.trim();
+
+  if (trimmedValue !== value) {
+    // eslint-disable-next-line no-console
+    console.warn(`
+      Hyphen Components: It seems you've passed an incorrect
+      shorthand value as a prop in your component. The value
+      has extra whitespace either at the beginning or the end of it.
+      We have trimmed this whitespace, but please double-check that
+      the prop value is correct.
+      attribute: "${attribute}"
+      value: "${value}"
+    `);
+  }
+
+  const classes: string[] = [];
+  let shorthand: { [key: number]: string[] };
+
+  if (attribute === 'br') {
+    shorthand = {
+      /* top-left-and-bottom-right | top-right-and-bottom-left */
+      2: ['top-left', 'top-right'],
+      /* top-left | top-right-and-bottom-left | bottom-right */
+      3: ['top-left', 'top-right', 'bottom-right'],
+      4: ['top-left', 'top-right', 'bottom-right', 'bottom-left'],
+    };
+  } else if (attribute === 'g') {
+    shorthand = { 2: ['rg', 'cg'] };
+  } else {
+    shorthand = {
+      2: ['v', 'h'],
+      3: ['top', 'h', 'bottom'],
+      4: ['top', 'right', 'bottom', 'left'],
+    };
+  }
+
+  if (trimmedValue.includes(' ') && trimmedValue.split(' ').length > 1) {
+    const sides = trimmedValue.split(' ');
+
+    if (sides.length > 4) {
+      // eslint-disable-next-line no-console
+      console.warn(`
+        Hyphen Components: It seems you've passed an incorrect
+        shorthand value as a prop in your component. The value
+        has more than four string components. While it will not break anything,
+        please double-check your prop values to ensure the expected result is correct.
+        attribute: "${attribute}"
+        value: "${value}"
+      `);
+    }
+
+    const trimmedSides = sides.slice(0, 4);
+
+    // br = border radius -- the corner logic is different than sides.
+    if (attribute === 'br') {
+      trimmedSides.forEach((v, index) => {
+        classes.push(
+          `${attribute}-${shorthand[trimmedSides.length][index]}-${v}`
+        );
+
+        if (trimmedSides.length === 3 && index === 1) {
+          classes.push(`${attribute}-bottom-left-${trimmedSides[index]}`);
+        } else if (trimmedSides.length === 2 && index === 0) {
+          classes.push(`${attribute}-bottom-right-${trimmedSides[index]}`);
+        } else if (trimmedSides.length === 2 && index === 1) {
+          classes.push(`${attribute}-bottom-left-${trimmedSides[index]}`);
+        }
+      });
+    } else if (attribute === 'g') {
+      trimmedSides.forEach((v, index) => {
+        classes.push(`${shorthand[trimmedSides.length][index]}-${v}`);
+      });
+    } else {
+      trimmedSides.forEach((v, index) => {
+        classes.push(
+          `${attribute}-${shorthand[trimmedSides.length][index]}-${v}`
+        );
+      });
+    }
+  } else {
+    classes.push(`${attribute}-${trimmedValue}`);
+  }
+
+  return classes;
+}
+
+export function cssShorthandToClasses(
+  attribute: string,
+  value?: string | ResponsiveProp<string | undefined>
+): string[] {
+  if (!isValidSpacingValue(value)) return [];
+
+  const classes: string[] = [];
+
+  if (typeof value === 'object') {
+    Object.keys(value).forEach((key) => {
+      const baseClasses = generateBaseClasses(
+        attribute,
+        value[key as BreakpointSizeWithBase]
+      );
+      const responsiveClasses = baseClasses?.map((baseClass) =>
+        key === 'base' ? baseClass : `${baseClass}-${key}`
+      );
+      classes.push(...responsiveClasses);
+    });
+  } else if (typeof value === 'string') {
+    classes.push(...generateBaseClasses(attribute, value));
+  }
+
+  return classes;
+}

package/src/lib/doesStringIncludeCssUnit.ts

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/prefer-default-export
+export function doesStringIncludeCssUnit(value: string | undefined): boolean {
+  const cssUnits = ['px', 'em', 'rem', '%', 'vw', 'vh'];
+
+  return cssUnits.some((unit) => value?.includes(unit));
+}

package/src/lib/generateResponsiveClasses.test.ts

@@ -0,0 +1,24 @@
+import { generateResponsiveClasses } from './generateResponsiveClasses';
+
+describe('generateResponsiveClasses', () => {
+  test('it generates a base class when passed a single string value', () => {
+    const generatedClass = generateResponsiveClasses(
+      'align-items',
+      'flex-start'
+    );
+
+    expect(generatedClass).toEqual(['align-items-flex-start']);
+  });
+
+  test('it generates responsive classes when an keyed object is passed', () => {
+    const generatedClass = generateResponsiveClasses('align-items', {
+      tablet: 'flex-start',
+      hd: 'flex-end',
+    });
+
+    expect(generatedClass).toEqual([
+      'align-items-flex-start-tablet',
+      'align-items-flex-end-hd',
+    ]);
+  });
+});

package/src/lib/generateResponsiveClasses.ts

@@ -0,0 +1,30 @@
+import { ResponsiveProp, BreakpointSizeWithBase } from '../types';
+
+// eslint-disable-next-line
+export function generateResponsiveClasses(
+  classRoot: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: ResponsiveProp<any> | string | undefined
+): string[] {
+  if (
+    value === null ||
+    (typeof value !== 'string' && typeof value !== 'object')
+  )
+    return [];
+
+  const classes: string[] = [];
+
+  if (typeof value === 'object') {
+    Object.keys(value).forEach((key) => {
+      const baseClass = `${classRoot}-${value[key as BreakpointSizeWithBase]}`;
+      const responsiveClass =
+        key === 'base' ? baseClass : `${baseClass}-${key}`;
+
+      classes.push(responsiveClass);
+    });
+  } else if (typeof value === 'string') {
+    classes.push(`${classRoot}-${value}`);
+  }
+
+  return classes;
+}

package/src/lib/getAutoCompleteValue.test.ts

@@ -0,0 +1,27 @@
+import { getAutoCompleteValue } from './getAutoCompleteValue';
+
+describe('getAutoCompleteValue', () => {
+  test('it returns expected value when passed on', () => {
+    const value = getAutoCompleteValue('on');
+
+    expect(value).toEqual('on');
+  });
+
+  test('it returns expected value when passed off', () => {
+    const value = getAutoCompleteValue('off');
+
+    expect(value).toEqual('off');
+  });
+
+  test('it returns expected value when passed true', () => {
+    const value = getAutoCompleteValue(true);
+
+    expect(value).toEqual('on');
+  });
+
+  test('it returns expected value when passed false', () => {
+    const value = getAutoCompleteValue(false);
+
+    expect(value).toEqual('off');
+  });
+});

package/src/lib/getAutoCompleteValue.ts

@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/prefer-default-export
+export function getAutoCompleteValue(value: string | boolean): string {
+  if (!value || (typeof value !== 'boolean' && typeof value !== 'string')) {
+    return 'off';
+  }
+
+  if (typeof value === 'boolean' && value) {
+    return 'on';
+  }
+
+  return value;
+}

package/src/lib/getColumnKeys.ts

@@ -0,0 +1,27 @@
+import { Key } from 'react';
+import { Column } from '../types';
+
+// eslint-disable-next-line import/prefer-default-export
+export const getColumnKeys = (columns: Column[]): Key[] => {
+  const INTERNAL_KEY_PREFIX = 'columnKeyPrefix';
+  const columnKeys: React.Key[] = [];
+  const keys: Record<any, boolean> = {};
+
+  columns.forEach((column) => {
+    const { key, dataKey } = column || {};
+    const shapedDataKey = dataKey?.includes(' ')
+      ? dataKey.split(' ').join('-')
+      : dataKey;
+
+    let mergedKey = key || shapedDataKey || INTERNAL_KEY_PREFIX;
+
+    while (keys[mergedKey as any]) {
+      mergedKey = `${mergedKey}_next`;
+    }
+    keys[mergedKey as any] = true;
+
+    columnKeys.push(mergedKey);
+  });
+
+  return columnKeys;
+};

package/src/lib/getDimensionCss.test.ts

@@ -0,0 +1,148 @@
+import { getDimensionCss } from './getDimensionCss';
+import { HEIGHT_OPTIONS, WIDTH_OPTIONS } from './tokens';
+
+describe('getDimensionCss', () => {
+  test('returns expected css object if width css value is passed', () => {
+    const spacingCss = getDimensionCss('w', '20px');
+
+    expect(spacingCss).toEqual({
+      classes: [],
+      styles: {
+        width: '20px',
+      },
+    });
+  });
+
+  test('returns expected css object if height css value is passed', () => {
+    const spacingCss = getDimensionCss('h', '42rem');
+
+    expect(spacingCss).toEqual({
+      classes: [],
+      styles: {
+        height: '42rem',
+      },
+    });
+  });
+
+  test('returns expected css object if max width css value is passed', () => {
+    const spacingCss = getDimensionCss('mw', '20px');
+
+    expect(spacingCss).toEqual({
+      classes: [],
+      styles: {
+        maxWidth: '20px',
+      },
+    });
+  });
+
+  test('returns expected css object if min width css value is passed', () => {
+    const spacingCss = getDimensionCss('minw', '20px');
+
+    expect(spacingCss).toEqual({
+      classes: [],
+      styles: {
+        minWidth: '20px',
+      },
+    });
+  });
+
+  test('returns expected css object if max height css value is passed', () => {
+    const spacingCss = getDimensionCss('mh', '42rem');
+
+    expect(spacingCss).toEqual({
+      classes: [],
+      styles: {
+        maxHeight: '42rem',
+      },
+    });
+  });
+
+  test('returns expected css object if min height css value is passed', () => {
+    const spacingCss = getDimensionCss('minh', '42rem');
+
+    expect(spacingCss).toEqual({
+      classes: [],
+      styles: {
+        minHeight: '42rem',
+      },
+    });
+  });
+
+  describe('width', () => {
+    WIDTH_OPTIONS.map((token) =>
+      test(`returns expected css object if ${token} width value is passed`, () => {
+        const spacingCss = getDimensionCss('w', token);
+
+        expect(spacingCss).toEqual({
+          classes: [`w-${token}`],
+          styles: undefined,
+        });
+      })
+    );
+  });
+
+  describe('height', () => {
+    HEIGHT_OPTIONS.map((token) =>
+      test(`returns expected css object if ${token} width value is passed`, () => {
+        const spacingCss = getDimensionCss('h', token);
+
+        expect(spacingCss).toEqual({
+          classes: [`h-${token}`],
+          styles: undefined,
+        });
+      })
+    );
+  });
+
+  describe('max width', () => {
+    WIDTH_OPTIONS.map((token) =>
+      test(`returns expected css object if ${token} max width value is passed`, () => {
+        const spacingCss = getDimensionCss('mw', token);
+
+        expect(spacingCss).toEqual({
+          classes: [`mw-${token}`],
+          styles: undefined,
+        });
+      })
+    );
+  });
+
+  describe('min width', () => {
+    WIDTH_OPTIONS.map((token) =>
+      test(`returns expected css object if ${token} min width value is passed`, () => {
+        const spacingCss = getDimensionCss('minw', token);
+
+        expect(spacingCss).toEqual({
+          classes: [`minw-${token}`],
+          styles: undefined,
+        });
+      })
+    );
+  });
+
+  describe('max height', () => {
+    HEIGHT_OPTIONS.map((token) =>
+      test(`returns expected css object if ${token} max height value is passed`, () => {
+        const spacingCss = getDimensionCss('mh', token);
+
+        expect(spacingCss).toEqual({
+          classes: [`mh-${token}`],
+          styles: undefined,
+        });
+      })
+    );
+  });
+
+  describe('min height', () => {
+    HEIGHT_OPTIONS.map((token) =>
+      test(`returns expected css object if ${token} min height value is passed`, () => {
+        const spacingCss = getDimensionCss('minh', token);
+
+        expect(spacingCss).toEqual({
+          classes: [`minh-${token}`],
+          styles: undefined,
+        });
+      })
+    );
+  });
+});

package/src/lib/getDimensionCss.ts

@@ -0,0 +1,73 @@
+import { CSSProperties } from 'react';
+import {
+  StylesAndClasses,
+  CssDimensionAbbreviation,
+  ResponsiveProp,
+  DimensionSize,
+} from '../types';
+import { doesStringIncludeCssUnit } from './doesStringIncludeCssUnit';
+import { generateResponsiveClasses } from './generateResponsiveClasses';
+
+export function getDimensionStyles(
+  dimension: CssDimensionAbbreviation,
+  value?: DimensionSize | ResponsiveProp<DimensionSize> | string
+): { [key: string]: string } | undefined {
+  if (value === undefined) return value;
+
+  let styles;
+  // value is a css unit so set its style property
+  if (typeof value === 'string' && doesStringIncludeCssUnit(value)) {
+    switch (dimension) {
+      case 'h':
+        styles = { height: value };
+        break;
+      case 'mw':
+        styles = { maxWidth: value };
+        break;
+      case 'mh':
+        styles = { maxHeight: value };
+        break;
+      case 'minw':
+        styles = { minWidth: value };
+        break;
+      case 'minh':
+        styles = { minHeight: value };
+        break;
+      default:
+        styles = { width: value };
+    }
+  }
+  return styles;
+}
+
+export function getDimensionClasses(
+  dimension: CssDimensionAbbreviation,
+  value?: DimensionSize | ResponsiveProp<DimensionSize> | string
+): string[] | undefined {
+  if (value === undefined) return value;
+
+  const classes = [];
+  if (
+    (typeof value === 'string' && !doesStringIncludeCssUnit(value)) ||
+    (typeof value === 'object' &&
+      Object.values(value).every((v) => !doesStringIncludeCssUnit(v)))
+  ) {
+    classes.push(...generateResponsiveClasses(dimension, value));
+  }
+
+  return classes;
+}
+/**
+ * Returns an object of styles and class names that correspond with the given value
+ * @param {CssDimensionAbbreviation} dimension width or height
+ * @param {string} [value] value of the dimension
+ */
+export function getDimensionCss(
+  dimension: CssDimensionAbbreviation,
+  value?: DimensionSize | ResponsiveProp<DimensionSize> | string
+): StylesAndClasses<CSSProperties> {
+  return {
+    styles: getDimensionStyles(dimension, value),
+    classes: getDimensionClasses(dimension, value),
+  };
+}

package/src/lib/getElementType.test.tsx

@@ -0,0 +1,42 @@
+import { getElementType } from './getElementType';
+
+const MockComponent = () =>
+  ({
+    defaultProps: {
+      as: 'h4',
+    },
+  } as any);
+
+const getDefault = () => 'p';
+
+describe('Get Element Type', () => {
+  test('function returns element type if provided by props', () => {
+    const elementType = getElementType(MockComponent(), { as: 'h1' });
+
+    expect(elementType).toBe('h1');
+  });
+
+  test('function returns default element type if provided by defaultProps', () => {
+    const elementType = getElementType(MockComponent(), {});
+
+    expect(elementType).toBe('h4');
+  });
+
+  test('function returns default element based on getDefault function if provided', () => {
+    const elementType = getElementType(MockComponent(), {}, getDefault);
+
+    expect(elementType).toBe('p');
+  });
+
+  test('function returns an anchor element if href is included in props', () => {
+    const elementType = getElementType(MockComponent(), { href: 'myurl' });
+
+    expect(elementType).toBe('a');
+  });
+
+  test('function returns a div if no defaultProps or props are provided', () => {
+    const elementType = getElementType({} as any, {}, () => '');
+
+    expect(elementType).toBe('div');
+  });
+});