@hyphen/hyphen-components 2.9.0

package/src/lib/getElementType.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+/**
+ * Returns a createElement() type based on the props of the Component.
+ * Useful for calculating what type a component should render as.
+ *
+ * @param {function} Component A function or ReactClass.
+ * @param {object} props A ReactElement props object
+ * @param {function} [getDefault] A function that returns a default element type.
+ * @returns {string} A ReactElement type
+ */
+export function getElementType( // eslint-disable-line import/prefer-default-export
+  Component: React.Component | React.FC,
+  props: { [key: string]: unknown },
+  getDefault?: () => string
+): string {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const { defaultProps = {} } = Component;
+
+  // ----------------------------------------
+  // user defined "as" element type
+
+  if (props.as && props.as !== defaultProps.as) return props.as as string;
+
+  // ----------------------------------------
+  // computed default element type
+
+  if (getDefault) {
+    const computedDefault = getDefault();
+    if (computedDefault) return computedDefault;
+  }
+
+  // ----------------------------------------
+  // infer anchor links
+
+  if (props.href) return 'a';
+
+  // ----------------------------------------
+  // use defaultProp or 'div'
+
+  return defaultProps.as || 'div';
+}

package/src/lib/getFlexCss.test.ts

@@ -0,0 +1,122 @@
+import { getFlexCss } from './getFlexCss';
+
+describe('getFlexCss', () => {
+  describe('Single value shorthand applies classes', () => {
+    const flexValues = ['initial', 'auto', 'unset', 'none', 'inherit'];
+    flexValues.map((value) =>
+      test(`returns expected css object with class  flex: ${value} is passed`, () => {
+        const flexCss = getFlexCss(value);
+
+        expect(flexCss).toEqual({
+          classes: [`flex-${value}`],
+          styles: {},
+        });
+      })
+    );
+  });
+
+  describe('Single value shorthand applies styles', () => {
+    const flexValues = ['1', '1rem', '10%', '2em', '100px', '50vw', '50vh'];
+    flexValues.map((value) =>
+      test(`returns expected css object with class  flex: ${value} is passed`, () => {
+        const flexCss = getFlexCss(value);
+
+        expect(flexCss).toEqual({
+          styles: { flex: value },
+          classes: [],
+        });
+      })
+    );
+  });
+
+  describe('Two-value shorthand applies styles with flex integer values', () => {
+    const flexValues = ['1 0', 'auto 1', '0 2'];
+    flexValues.map((value) =>
+      test(`returns expected css object with class  flex: ${value} is passed`, () => {
+        const flexCss = getFlexCss(value);
+        const flexProps = value.split(' ');
+
+        expect(flexCss).toEqual({
+          styles: {
+            flexGrow: Number.isNaN(Number(flexProps[0]))
+              ? flexProps[0]
+              : Number(flexProps[0]),
+            flexShrink: Number.isNaN(Number(flexProps[1]))
+              ? flexProps[1]
+              : Number(flexProps[1]),
+          },
+          classes: [],
+        });
+      })
+    );
+  });
+
+  describe('Two-value shorthand applies styles with css unit values', () => {
+    const flexValues = ['10px 10px', '1 10vw', '0 50%'];
+    flexValues.map((value) =>
+      test(`returns expected css object with class  flex: ${value} is passed`, () => {
+        const flexCss = getFlexCss(value);
+        const flexProps = value.split(' ');
+
+        expect(flexCss).toEqual({
+          styles: {
+            flexGrow: Number.isNaN(Number(flexProps[0]))
+              ? flexProps[0]
+              : Number(flexProps[0]),
+            flexBasis: Number.isNaN(Number(flexProps[1]))
+              ? flexProps[1]
+              : Number(flexProps[1]),
+          },
+          classes: [],
+        });
+      })
+    );
+  });
+
+  describe('Two-value shorthand applies styles to correct flex property', () => {
+    const flexValues = ['10px inherit', '1 auto', '0 initial'];
+    flexValues.map((value) =>
+      test(`returns expected css object with class  flex: ${value} is passed`, () => {
+        const flexCss = getFlexCss(value);
+        const flexProps = value.split(' ');
+
+        expect(flexCss).toEqual({
+          styles: {
+            flexGrow: Number.isNaN(Number(flexProps[0]))
+              ? flexProps[0]
+              : Number(flexProps[0]),
+            flexShrink: Number.isNaN(Number(flexProps[1]))
+              ? flexProps[1]
+              : Number(flexProps[1]),
+          },
+          classes: [],
+        });
+      })
+    );
+  });
+
+  describe('Three-value shorthand applies styles with css unit values', () => {
+    const flexValues = ['1 auto 10px', 'auto 0 10%', '0 1 50%', '1 1 1'];
+    flexValues.map((value) =>
+      test(`returns expected css object with class  flex: ${value} is passed`, () => {
+        const flexCss = getFlexCss(value);
+        const flexProps = value.split(' ');
+
+        expect(flexCss).toEqual({
+          styles: {
+            flexGrow: Number.isNaN(Number(flexProps[0]))
+              ? flexProps[0]
+              : Number(flexProps[0]),
+            flexShrink: Number.isNaN(Number(flexProps[1]))
+              ? flexProps[1]
+              : Number(flexProps[1]),
+            flexBasis: Number.isNaN(Number(flexProps[2]))
+              ? flexProps[2]
+              : Number(flexProps[2]),
+          },
+          classes: [],
+        });
+      })
+    );
+  });
+});

package/src/lib/getFlexCss.ts

@@ -0,0 +1,67 @@
+import { StylesAndClasses, FlexProperty, ResponsiveProp } from '../types';
+import { doesStringIncludeCssUnit } from './doesStringIncludeCssUnit';
+
+const flexValues = ['initial', 'auto', 'unset', 'none', 'inherit'];
+
+export function parsePropertyValue(value: string): string | number {
+  return Number.isNaN(Number(value)) ? value : Number(value);
+}
+
+export function getFlexStyles(value?: string): FlexProperty | undefined {
+  if (value === undefined) return value;
+
+  const styles: FlexProperty = {};
+
+  // Single value
+  if (!value.includes(' ') && !flexValues.includes(value)) {
+    styles.flex = value;
+    return styles;
+  }
+
+  // CSS shorthand
+  if (value.includes(' ')) {
+    const flexProps = value.split(' ');
+    styles.flexGrow = parsePropertyValue(flexProps[0]);
+
+    if (flexProps.length === 2) {
+      if (doesStringIncludeCssUnit(flexProps[1])) {
+        styles.flexBasis = parsePropertyValue(flexProps[1]);
+      } else {
+        styles.flexShrink = parsePropertyValue(flexProps[1]);
+      }
+    } else if (flexProps.length === 3) {
+      styles.flexShrink = parsePropertyValue(flexProps[1]);
+      styles.flexBasis = parsePropertyValue(flexProps[2]);
+    }
+  }
+
+  return styles;
+}
+
+export function getFlexClasses(value?: string): string[] | undefined {
+  if (value === undefined || value.split(' ').length > 1) return [];
+
+  const classes = [];
+  if (
+    typeof value === 'string' &&
+    !doesStringIncludeCssUnit(value) &&
+    Number.isNaN(Number(value))
+  ) {
+    classes.push(`flex-${value}`);
+  }
+
+  return classes;
+}
+
+/**
+ * Returns an object of styles and class names that correspond with the given flex value
+ * @param {string} [value] spacing token value
+ */
+export function getFlexCss(
+  value?: ResponsiveProp<FlexProperty> | string
+): StylesAndClasses<FlexProperty> {
+  return {
+    styles: getFlexStyles(value as string),
+    classes: getFlexClasses(value as string),
+  };
+}

package/src/lib/index.ts

@@ -0,0 +1,15 @@
+export * from './cssShorthandToClasses';
+export * from './doesStringIncludeCssUnit';
+export * from './generateResponsiveClasses';
+export * from './getAutoCompleteValue';
+export * from './getColumnKeys';
+export * from './getDimensionCss';
+export * from './getElementType';
+export * from './getFlexCss';
+export * from './isFunction';
+export * from './mergeRefs';
+export * from './prefersReducedMotion';
+export * from './reactRouterClickHandler';
+export * from './resolveValue';
+export * from './react-children-utilities';
+export * from './tokens';

package/src/lib/isFunction.ts

@@ -0,0 +1,6 @@
+import { ValueOrFunction, ValueFunction } from '../types';
+
+export const isFunction = <TValue, TArg>( // eslint-disable-line import/prefer-default-export
+  valOrFunction: ValueOrFunction<TValue, TArg>
+): valOrFunction is ValueFunction<TValue, TArg> =>
+  typeof valOrFunction === 'function';

package/src/lib/mergeRefs.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export function mergeRefs<T = any>(
+  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null>
+): React.RefCallback<T> {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T | null>).current = value;
+      }
+    });
+  };
+}

package/src/lib/prefersReducedMotion.ts

@@ -0,0 +1,12 @@
+export const prefersReducedMotion = (() => {
+  // eslint-disable-line import/prefer-default-export
+  let shouldReduceMotion: boolean | undefined;
+
+  return () => {
+    if (shouldReduceMotion === undefined) {
+      const mediaQuery = window?.matchMedia('(prefers-reduced-motion: reduce)');
+      shouldReduceMotion = !mediaQuery || mediaQuery.matches;
+    }
+    return shouldReduceMotion;
+  };
+})();

package/src/lib/react-children-utilities/filter.ts

@@ -0,0 +1,12 @@
+import { ReactNode, Children } from 'react';
+
+export type FilterFunction = (
+  child: ReactNode,
+  index?: number,
+  children?: ReactNode[]
+) => boolean;
+
+export const filter = (
+  children: ReactNode,
+  filterFn: FilterFunction
+): ReactNode[] => Children.toArray(children).filter(filterFn);

package/src/lib/react-children-utilities/index.ts

@@ -0,0 +1 @@
+export * from './filter';

package/src/lib/reactRouterClickHandler.ts

@@ -0,0 +1,37 @@
+import { MouseEvent, AnchorHTMLAttributes } from 'react';
+
+export const isModifiedEvent = (
+  e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+): boolean => !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+
+/**
+ * Due to react-router's handling of custom components used in RR <Link>
+ * we must add this validation that ensures the router will execute the passed `navigate`
+ * prop, thus navigating the user without triggering a refresh.
+ *
+ * SOURCES:
+ *    https://github.com/ReactTraining/react-router/issues/7727
+ *    https://github.com/ReactTraining/react-router/issues/7761
+ * */
+// eslint-disable-next-line import/prefer-default-export
+export const handleReactRouterClick = (
+  event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+  onClick:
+    | ((e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void)
+    | undefined,
+  target: AnchorHTMLAttributes<HTMLAnchorElement>['target'] | undefined,
+  navigate: (() => void) | undefined
+): void => {
+  if (onClick) onClick(event);
+
+  if (
+    !event.defaultPrevented && // onClick prevented default
+    event.button === 0 && // ignore everything but left clicks
+    (!target || target === '_self') && // let browser handle "target=_blank" etc.
+    !isModifiedEvent(event) && // ignore clicks with modifier keys
+    navigate
+  ) {
+    event.preventDefault();
+    navigate();
+  }
+};

package/src/lib/resolveValue.ts

@@ -0,0 +1,7 @@
+import { ValueOrFunction } from '../types';
+import { isFunction } from './isFunction';
+
+export const resolveValue = <TValue, TArg>( // eslint-disable-line import/prefer-default-export
+  valOrFunction: ValueOrFunction<TValue, TArg>,
+  arg: TArg
+): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);

package/src/lib/tokens.ts

@@ -0,0 +1,139 @@
+import designTokens from '@hyphen/hyphen-design-tokens/build/json/variables';
+import { ICON_NAMES as iconNames } from '@hyphen/hyphen-design-tokens/build/assets/icons';
+
+import {
+  BaseColor,
+  BackgroundColor,
+  BorderColor,
+  BorderRadiusSize,
+  BorderSize,
+  Breakpoint,
+  BreakpointSizeWithBase,
+  BoxShadowSize,
+  ColorName,
+  FontColor,
+  FontSize,
+  FontFamily,
+  FontWeight,
+  HeadingSize,
+  HeightSize,
+  IconName,
+  LineHeightSize,
+  SpacingSize,
+  WidthSize,
+  ZIndexSize,
+} from '../types';
+
+export const ICON_NAMES = iconNames as IconName[];
+
+export const BORDER_RADIUS_OPTIONS = Object.keys(
+  designTokens.size['border-radius']
+) as BorderRadiusSize[];
+// export const BORDER_RADIUS_VALUES = Object.values(designTokens.size['border-radius']);
+
+export const BORDER_SIZE_OPTIONS = Object.keys(
+  designTokens.size['border-width']
+) as BorderSize[];
+// export const BORDER_SIZE_VALUES = Object.values(designTokens.size['border-width']);
+
+export const BREAKPOINT_OPTIONS = Object.keys(
+  designTokens.size.breakpoint
+) as BreakpointSizeWithBase[];
+// export const BREAKPOINT_VALUES = Object.values(designTokens.size.breakpoint);
+
+export const BREAKPOINTS = [
+  ...Object.entries(designTokens.size.breakpoint),
+  ['base', { value: '0' }],
+].map(([name, data]) => {
+  if (typeof data === 'object' && data !== null && 'value' in data) {
+    return {
+      name,
+      minWidth: parseInt(data['value'] as string, 10),
+    };
+  }
+}) as Breakpoint[];
+
+export const BASE_COLOR_OPTIONS = (
+  Object.keys(designTokens.color.base) as ColorName[]
+)
+  .map((colorName) => {
+    if (
+      colorName === 'white' ||
+      colorName === 'black' ||
+      colorName === 'magenta'
+    )
+      return `${colorName}`;
+    return Object.keys(designTokens.color.base[colorName]).map((colorGrade) =>
+      colorGrade === 'base' ? colorName : `${colorName}-${colorGrade}`
+    );
+  })
+  .flat() as BaseColor[];
+
+export const BASE_COLOR_NAMES = Object.keys(
+  designTokens.color.base
+) as ColorName[];
+// export const BASE_COLOR_VALUES = Object.values(designTokens.color.base);
+
+export const FONT_COLOR_OPTIONS = Object.keys(
+  designTokens.color.font
+) as FontColor[];
+// export const FONT_COLOR_VALUES = designTokens.color.font;
+
+export const BACKGROUND_COLOR_OPTIONS = Object.keys(
+  designTokens.color.background
+) as BackgroundColor[];
+// export const BACKGROUND_COLOR_VALUES = designTokens.color.background;
+
+export const BORDER_COLOR_OPTIONS = Object.keys(
+  designTokens.color.border
+) as BorderColor[];
+// export const BORDER_COLOR_VALUES = designTokens.color.border;
+
+export const FONT_SIZE_OPTIONS = Object.keys(
+  (designTokens.size as any)['font-size']
+) as FontSize[];
+// export const FONT_SIZE_VALUES = Object.values(designTokens.size['font-size']);
+
+export const FONT_FAMILY_OPTIONS = Object.keys(
+  designTokens.assets['font-family']
+) as FontFamily[];
+// export const FONT_FAMILY_VALUES = designTokens.assets['font-family'];
+
+export const FONT_WEIGHT_OPTIONS = Object.keys(
+  (designTokens.size as any)['font-weight']
+) as FontWeight[];
+// export const FONT_WEIGHT_VALUES = designTokens.size['font-weight'];
+
+export const HEADING_SIZE_OPTIONS = Object.keys(
+  designTokens.size.heading
+) as HeadingSize[];
+
+export const HEIGHT_OPTIONS = Object.keys(
+  (designTokens.size as any).dimension
+) as HeightSize[];
+// export const HEIGHT_VALUES = designTokens.size.dimension;
+
+export const LINE_HEIGHT_OPTIONS = Object.keys(
+  designTokens.size['line-height']
+) as LineHeightSize[];
+// export const LINE_HEIGHT_VALUES = designTokens.size['line-height'];
+
+export const SPACING_OPTIONS = Object.keys(
+  designTokens.size.spacing
+) as SpacingSize[];
+// export const SPACING_VALUES = designTokens.size.spacing;
+
+export const WIDTH_OPTIONS = Object.keys(
+  (designTokens.size as any).dimension
+) as WidthSize[];
+// export const WIDTH_VALUES = designTokens.size.dimension;
+
+export const Z_INDEX_OPTIONS = Object.keys(
+  designTokens.size['z-index']
+) as ZIndexSize[];
+export const Z_INDEX_VALUES = designTokens.size['z-index'];
+
+export const BOX_SHADOW_OPTIONS = Object.keys(
+  designTokens.size['box-shadow']
+) as BoxShadowSize[];
+// export const BOX_SHADOW_VALUES = designTokens.size['box-shadow'];

package/src/modes.ts

@@ -0,0 +1,8 @@
+export const allModes = {
+  light: {
+    theme: 'light',
+  },
+  dark: {
+    theme: 'dark',
+  },
+};

package/src/styles/animation.scss

@@ -0,0 +1,152 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-30%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(30%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(30%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(-30%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+
+@keyframes slideInUp {
+  from {
+    transform: translateY(100%);
+    visibility: visible;
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes zoomIn {
+  0% {
+    transform: scale3d(0.3, 0.3, 0.3);
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes enterTop {
+  0% {
+    transform: translate3d(0, -200%, 0);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes enterBottom {
+  0% {
+    transform: translate3d(0, 200%, 0);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes exitTop {
+  0% {
+    transform: translate3d(0, 0, -1px);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate3d(0, -150%, -1px);
+    opacity: 0;
+  }
+}
+
+@keyframes exitBottom {
+  0% {
+    transform: translate3d(0, 0, -1px);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate3d(0, 150%, -1px);
+    opacity: 0;
+  }
+}
+
+@keyframes exitLeft {
+  0% {
+    transform: translate3d(0, 0, -1px);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate3d(-150%, 0, -1px);
+    opacity: 0;
+  }
+}
+
+@keyframes exitRight {
+  0% {
+    transform: translate3d(0, 0, -1px);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate3d(150%, 0, -1px);
+    opacity: 0;
+  }
+}

package/src/styles/cursor.scss

@@ -0,0 +1,43 @@
+.cursor-auto { cursor: auto; }
+.cursor-default { cursor: default; }
+.cursor-none { cursor: none; }
+
+.cursor-context-menu { cursor: context-menu; }
+.cursor-help { cursor: help; }
+.cursor-pointer { cursor: pointer; }
+.cursor-progress { cursor: progress; }
+.cursor-wait { cursor: wait; }
+
+.cursor-cell { cursor: cell; }
+.cursor-crosshair { cursor: crosshair; }
+.cursor-text { cursor: text; }
+.cursor-vertical-text { cursor: vertical-text; }
+
+.cursor-alias { cursor: alias; }
+.cursor-copy { cursor: copy; }
+.cursor-move { cursor: move; }
+.cursor-no-drop { cursor: no-drop; }
+.cursor-not-allowed { cursor: not-allowed; }
+.cursor-grab { cursor: grab; }
+.cursor-grabbing { cursor: grabbing; }
+
+.cursor-all-scroll { cursor: all-scroll; }
+.cursor-col-resize { cursor: col-resize; }
+.cursor-row-resize { cursor: row-resize; }
+.cursor-n-resize { cursor: n-resize; }
+.cursor-e-resize { cursor: e-resize; }
+.cursor-s-resize { cursor: s-resize; }
+.cursor-w-resize { cursor: w-resize; }
+.cursor-ne-resize { cursor: ne-resize; }
+.cursor-nw-resize { cursor: nw-resize; }
+.cursor-se-resize { cursor: se-resize; }
+.cursor-sw-resize { cursor: sw-resize; }
+.cursor-ew-resize { cursor: ew-resize; }
+.cursor-ns-resize { cursor: ns-resize; }
+.cursor-nesw-resize { cursor: nesw-resize; }
+.cursor-nwse-resize { cursor: nwse-resize; }
+
+.cursor-zoom-in { cursor: zoom-in; }
+.cursor-zoom-out { cursor: zoom-out; }
+
+