@workday/canvas-kit-labs-react 7.0.0-alpha.0-next.6 → 7.0.0-alpha.79-next.7

package/common/lib/utils/border.ts

@@ -1,263 +0,0 @@
-import {
-  borderRadius as borderRadiusTokens,
-  CanvasBorderRadiusKeys,
-  colors as colorTokens,
-  CanvasColor,
-} from '@workday/canvas-kit-react/tokens';
-import {
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
-
-import {PropertyBorder} from './types';
-
-/** style props to set the border properties */
-export type BorderShorthandStyleProps = {
-  /** sets `border` property */
-  border?: string;
-  /** sets `border-top` property */
-  borderTop?: string;
-  /** sets `border-right` property (no bidirectional support) */
-  borderRight?: string;
-  /** sets `border-bottom` property */
-  borderBottom?: string;
-  /** sets `border-left` property (no bidirectional support) */
-  borderLeft?: string;
-};
-
-/** style props to set the border color properties */
-export type BorderColorStyleProps = {
-  /** sets `border-color` property */
-  borderColor?: CanvasColor | (string & {});
-  /** sets `border-top-color` property */
-  borderTopColor?: CanvasColor | (string & {});
-  /** sets `border-right-color` property (no bidirectional support) */
-  borderRightColor?: CanvasColor | (string & {});
-  /** sets `border-bottom-color` property */
-  borderBottomColor?: CanvasColor | (string & {});
-  /** sets `border-left-color` property (no bidirectional support) */
-  borderLeftColor?: CanvasColor | (string & {});
-};
-
-/** style props to set the border radius properties */
-export type BorderRadiusStyleProps = {
-  /** sets `border-radius` property */
-  borderRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-top-left-radius` property */
-  borderTopLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-top-right-radius` property */
-  borderTopRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-bottom-left-radius` property */
-  borderBottomLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-bottom-right-radius` property */
-  borderBottomRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
-};
-
-/** style props to set the border style properties */
-export type BorderLineStyleProps = {
-  /** sets `border-style` property */
-  borderStyle?: PropertyBorder;
-  /** sets `border-top-style` property */
-  borderTopStyle?: PropertyBorder;
-  /** sets `border-right-style` property (no bidirectional support) */
-  borderRightStyle?: PropertyBorder;
-  /** sets `border-bottom-style` property */
-  borderBottomStyle?: PropertyBorder;
-  /** sets `border-left-style` property (no bidirectional support) */
-  borderLeftStyle?: PropertyBorder;
-};
-
-/** style props to set the border width properties */
-export type BorderWidthStyleProps = {
-  /** sets `border-width` property */
-  borderWidth?: string | number;
-  /** sets `border-top-width` property */
-  borderTopWidth?: string | number;
-  /** sets `border-right-width` property (no bidirectional support) */
-  borderRightWidth?: string | number;
-  /** sets `border-bottom-width` property */
-  borderBottomWidth?: string | number;
-  /** sets `border-left-width` property (no bidirectional support) */
-  borderLeftWidth?: string | number;
-};
-
-export type BorderLogicalStyleProps = {
-  /** sets `border-left` property (bidirectional support) */
-  borderInlineStart?: string;
-  /** sets `border-left-color` property (bidirectional support) */
-  borderInlineStartColor?: CanvasColor | (string & {});
-  /** sets `border-left-style` property (bidirectional support) */
-  borderInlineStartStyle?: PropertyBorder;
-  /** sets `border-left-width` property (bidirectional support) */
-  borderInlineStartWidth?: string | number;
-  /** sets `border-right` property (bidirectional support) */
-  borderInlineEnd?: string;
-  /** sets `border-right-color` property (bidirectional support) */
-  borderInlineEndColor?: CanvasColor | (string & {});
-  /** sets `border-right-style` property (bidirectional support) */
-  borderInlineEndStyle?: PropertyBorder;
-  /** sets `border-right-width` property (bidirectional support) */
-  borderInlineEndWidth?: string | number;
-};
-
-/** a collection style props for border properties */
-export type BorderStyleProps = BorderShorthandStyleProps &
-  BorderColorStyleProps &
-  BorderRadiusStyleProps &
-  BorderLineStyleProps &
-  BorderWidthStyleProps &
-  BorderLogicalStyleProps;
-
-// border logical prop handlers
-const borderInlineStart = (isRTL: boolean) => (isRTL ? 'borderRight' : 'borderLeft');
-const borderInlineEnd = (isRTL: boolean) => (isRTL ? 'borderLeft' : 'borderRight');
-const borderInlineStartColor = (isRTL: boolean) => (isRTL ? 'borderRightColor' : 'borderLeftColor');
-const borderInlineEndColor = (isRTL: boolean) => (isRTL ? 'borderLeftColor' : 'borderRightColor');
-const borderInlineStartStyle = (isRTL: boolean) => (isRTL ? 'borderRightStyle' : 'borderLeftStyle');
-const borderInlineEndStyle = (isRTL: boolean) => (isRTL ? 'borderLeftStyle' : 'borderRightStyle');
-const borderInlineStartWidth = (isRTL: boolean) => (isRTL ? 'borderRightWidth' : 'borderLeftWidth');
-const borderInlineEndWidth = (isRTL: boolean) => (isRTL ? 'borderLeftWidth' : 'borderRightWidth');
-
-const borderShorthandProps = {
-  border: 'border',
-  borderTop: 'borderTop',
-  borderRight: 'borderRight',
-  borderBottom: 'borderBottom',
-  borderLeft: 'borderLeft',
-  borderInlineStart,
-  borderInlineEnd,
-};
-
-const borderColors = {
-  borderColor: 'borderColor',
-  borderTopColor: 'borderTopColor',
-  borderRightColor: 'borderRightColor',
-  borderBottomColor: 'borderBottomColor',
-  borderLeftColor: 'borderLeftColor',
-  borderInlineStartColor,
-  borderInlineEndColor,
-};
-
-const borderRadii = {
-  borderRadius: 'borderRadius',
-  borderTopLeftRadius: 'borderTopLeftRadius',
-  borderTopRightRadius: 'borderTopRightRadius',
-  borderBottomLeftRadius: 'borderBottomLeftRadius',
-  borderBottomRightRadius: 'borderBottomRightRadius',
-};
-
-const borderStyles = {
-  borderStyle: 'borderStyle',
-  borderTopStyle: 'borderTopStyle',
-  borderRightStyle: 'borderRightStyle',
-  borderBottomStyle: 'borderBottomStyle',
-  borderLeftStyle: 'borderLeftStyle',
-  borderInlineStartStyle,
-  borderInlineEndStyle,
-};
-
-const borderWidths = {
-  borderWidth: 'borderWidth',
-  borderTopWidth: 'borderTopWidth',
-  borderRightWidth: 'borderRightWidth',
-  borderBottomWidth: 'borderBottomWidth',
-  borderLeftWidth: 'borderLeftWidth',
-  borderInlineStartWidth,
-  borderInlineEndWidth,
-};
-
-/**
- * A style prop function that takes components props and returns border styles. Some props, such as borderRadius and borderColor, are connected to our design tokens.
- * If no `BorderStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `border` with low-level, styled components
- * const BoxExample = () => (
- *   <Box border={`solid 1px #333333 ${colors.blackPepper400}`}>Hello, border styles!</Box>
- * );
- *
- */
-export function border<P extends BorderStyleProps & {theme?: PartialEmotionCanvasTheme}>(props: P) {
-  // border will always be used within the context of a component, but eslint doesn't know that
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const {canvas} = useTheme(props.theme);
-  const isRTL = canvas.direction === ContentDirection.RTL;
-  const styles = {};
-  for (const key in props) {
-    if (props.hasOwnProperty(key)) {
-      if (key in borderShorthandProps) {
-        const value = props[key as keyof BorderShorthandStyleProps];
-        let attr: string;
-        if (key === 'borderInlineStart') {
-          attr = borderInlineStart(isRTL);
-        } else if (key === 'borderInlineEnd') {
-          attr = borderInlineEnd(isRTL);
-        } else {
-          attr = borderShorthandProps[key as keyof BorderShorthandStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderColors) {
-        const propValue = props[key as keyof BorderColorStyleProps] as CanvasColor | string;
-        const value = colorTokens[propValue as CanvasColor] || propValue;
-        let attr: string;
-        if (key === 'borderInlineStartColor') {
-          attr = borderInlineStartColor(isRTL);
-        } else if (key === 'borderInlineEndColor') {
-          attr = borderInlineEndColor(isRTL);
-        } else {
-          attr = borderColors[key as keyof BorderColorStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderRadii) {
-        const propValue = props[key as keyof BorderRadiusStyleProps] as
-          | CanvasBorderRadiusKeys
-          | number
-          | string;
-        const value = borderRadiusTokens[propValue as CanvasBorderRadiusKeys] || propValue;
-        const attr = borderRadii[key as keyof BorderRadiusStyleProps];
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderStyles) {
-        const value = props[key as keyof BorderLineStyleProps];
-        let attr: string;
-        if (key === 'borderInlineStartStyle') {
-          attr = borderInlineStartStyle(isRTL);
-        } else if (key === 'borderInlineEndStyle') {
-          attr = borderInlineEndStyle(isRTL);
-        } else {
-          attr = borderStyles[key as keyof BorderLineStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderWidths) {
-        const value = props[key as keyof BorderWidthStyleProps];
-        let attr: string;
-        if (key === 'borderInlineStartWidth') {
-          attr = borderInlineStartWidth(isRTL);
-        } else if (key === 'borderInlineEndWidth') {
-          attr = borderInlineEndWidth(isRTL);
-        } else {
-          attr = borderWidths[key as keyof BorderWidthStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-      }
-    }
-  }
-  return styles;
-}

package/common/lib/utils/color.ts

@@ -1,62 +0,0 @@
-import {colors as colorTokens, CanvasColor} from '@workday/canvas-kit-react/tokens';
-
-export type ColorTokens = typeof colorTokens;
-
-/** style props to for color properties */
-export type ColorStyleProps = {
-  /** sets `background` property */
-  background?: CanvasColor | (string & {});
-  /** sets `background-color` property */
-  backgroundColor?: CanvasColor | (string & {});
-  /** sets `background-image` property */
-  backgroundImage?: string;
-  /** sets `color` property */
-  color?: CanvasColor | (string & {});
-};
-
-const getBackground = (value: CanvasColor | string) => ({
-  background: colorTokens[value] || value,
-});
-
-const getBackgroundColor = (value: CanvasColor | string) => ({
-  backgroundColor: colorTokens[value] || value,
-});
-
-const getBackgroundImage = (value: string) => ({
-  backgroundImage: value,
-});
-
-const getColor = (value: CanvasColor | string) => ({
-  color: colorTokens[value] || value,
-});
-
-const colorProps = {
-  background: getBackground,
-  backgroundColor: getBackgroundColor,
-  backgroundImage: getBackgroundImage,
-  color: getColor,
-};
-
-/**
- * A style prop function that takes components props and returns color styles from canvas token values.
- * If no `ColorStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `color` with low-level, styled components
- * const BoxExample = () => (
- *   <Box backgroundColor="blueberry500" color="frenchVanilla100">Hello, colors!</Box>
- * );
- *
- */
-export function color<P extends ColorStyleProps>(props: P) {
-  let styles = {};
-  for (const key in props) {
-    if (key in colorProps) {
-      const value = props[key as keyof ColorStyleProps] as CanvasColor | string;
-      const colorFn = colorProps[key as keyof ColorStyleProps];
-      const style = colorFn(value);
-      styles = {...styles, ...style};
-    }
-  }
-  return styles;
-}

package/common/lib/utils/depth.ts

@@ -1,37 +0,0 @@
-import {depth as depthTokens} from '@workday/canvas-kit-react/tokens';
-
-export type DepthTokens = typeof depthTokens;
-export type DepthTokenKeys = keyof DepthTokens;
-export type DepthTokenValues = DepthTokens[keyof DepthTokens];
-
-/** style props to for depth styles */
-export type DepthStyleProps = {
-  /** sets depth styles (box-shadow & border) */
-  depth?: DepthTokenKeys;
-};
-
-const depthProps = {
-  depth: (token: DepthTokenKeys) => depthTokens[token],
-};
-
-/**
- * A style prop function that takes components props and returns depth styles from canvas token values.
- * If no `DepthStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll mostly likely use `depth` with low-level, styled components
- * const BoxExample = () => (
- *   <Box depth={3}>Hello, box shadows!</Box>
- * );
- *
- */
-export function depth<P extends DepthStyleProps>(props: P): DepthTokenValues {
-  for (const key in props) {
-    if (key in depthProps) {
-      const token = props[key as keyof DepthStyleProps] as DepthTokenKeys;
-      const depthFn = depthProps[key as keyof DepthStyleProps];
-      return depthFn(token);
-    }
-  }
-  return {} as DepthTokenValues;
-}

package/common/lib/utils/flexItem.ts

@@ -1,56 +0,0 @@
-import {PropertyJustifySelf, PropertyAlignSelf, PropertyOrder} from './types';
-
-/** style props to for flexbox item properties */
-export type FlexItemStyleProps = {
-  /** sets `flex` property */
-  flex?: number | string;
-  /** sets `flex-grow` property */
-  flexGrow?: number | string;
-  /** sets `flex-shrink` property */
-  flexShrink?: number | string;
-  /** sets `flex-basis` property */
-  flexBasis?: number | string;
-  /** sets `justify-self` property */
-  justifySelf?: PropertyJustifySelf;
-  /** sets `align-self` property */
-  alignSelf?: PropertyAlignSelf;
-  /** sets `order` property */
-  order?: PropertyOrder;
-};
-
-/** style props to for flexbox item properties */
-const flexItemProps = {
-  flex: 'flex',
-  flexGrow: 'flexGrow',
-  flexShrink: 'flexShrink',
-  flexBasis: 'flexBasis',
-  justifySelf: 'justifySelf',
-  alignSelf: 'alignSelf',
-  order: 'order',
-};
-
-/**
- * A style prop function that takes component props and returns flexbox item styles.
- * If no `FlexItemStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `flexItem` with low-level, styled components
- * const FlexItemExample = () => (
- *   <Box flex={1} flexBasis="auto" alignSelf={center}>
- *     Hello, flex item!
- *   </Box>
- * );
- *
- */
-export function flexItem<P extends FlexItemStyleProps>(props: P) {
-  const styles = {};
-  for (const key in props) {
-    if (key in flexItemProps) {
-      const attr = flexItemProps[key as keyof FlexItemStyleProps];
-      const value = props[key];
-      // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-      styles[attr] = value;
-    }
-  }
-  return styles;
-}

package/common/lib/utils/layout.ts

@@ -1,77 +0,0 @@
-import {
-  PropertyDisplay,
-  PropertyListStyle,
-  PropertyOverflow,
-  PropertyOverflowX,
-  PropertyOverflowY,
-  PropertyVerticalAlign,
-} from './types';
-
-/** style props to for layout properties */
-export type LayoutStyleProps = {
-  /** sets `display` property */
-  display?: PropertyDisplay;
-  /** sets `height` property */
-  height?: number | string;
-  /** sets `list-style property */
-  listStyle?: PropertyListStyle;
-  /** sets `max-height` property */
-  maxHeight?: number | string;
-  /** sets `max-width` property */
-  maxWidth?: number | string;
-  /** sets `min-height` property */
-  minHeight?: number | string;
-  /** sets `min-width` property */
-  minWidth?: number | string;
-  /** sets `overflow` property */
-  overflow?: PropertyOverflow;
-  /** sets `overflow-x` property */
-  overflowX?: PropertyOverflowX;
-  /** sets `overflow-y` property */
-  overflowY?: PropertyOverflowY;
-  /** sets `vertical-align` property */
-  verticalAlign?: PropertyVerticalAlign;
-  /** sets `width` property */
-  width?: number | string;
-};
-
-const layoutProps = {
-  display: 'display',
-  height: 'height',
-  listStyle: 'listStyle',
-  maxHeight: 'maxHeight',
-  maxWidth: 'maxWidth',
-  minHeight: 'minHeight',
-  minWidth: 'minWidth',
-  overflow: 'overflow',
-  overflowX: 'overflowX',
-  overflowY: 'overflowY',
-  verticalAlign: 'verticalAlign',
-  width: 'width',
-};
-
-/**
- * A style prop function that takes components props and returns layout styles.
- * If no `LayoutStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `layout` with low-level, styled components
- * const BoxExample = () => (
- *   <Box display="inline-block" height="50%">
- *     Hello, positions!
- *   </Box>
- * );
- *
- */
-export function layout<P extends LayoutStyleProps>(props: P) {
-  const styles = {};
-  for (const key in props) {
-    if (key in layoutProps) {
-      const attr = layoutProps[key as keyof LayoutStyleProps];
-      const value = props[key];
-      // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-      styles[attr] = value;
-    }
-  }
-  return styles;
-}

package/common/lib/utils/other.ts

@@ -1,20 +0,0 @@
-export type OtherStyleProps = {
-  animation?: string;
-};
-
-const otherProps = {
-  animation: (value: string) => {
-    return {animation: value};
-  },
-};
-
-export function other<P extends OtherStyleProps>(props: P) {
-  for (const key in props) {
-    if (key in otherProps) {
-      const value = props[key as keyof OtherStyleProps] as keyof OtherStyleProps;
-      const styleFn = otherProps[key as keyof OtherStyleProps];
-      return styleFn(value);
-    }
-  }
-  return {};
-}

package/common/lib/utils/position.ts

@@ -1,96 +0,0 @@
-import {
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
-import {PropertyPosition, PropertyZIndex} from './types';
-
-/** style props to for standard position properties */
-export type PositionStandardProps = {
-  /** sets `position` property  */
-  position?: PropertyPosition;
-  /** sets `zIndex` property  */
-  zIndex?: PropertyZIndex;
-  /** sets `top` property  */
-  top?: number | string;
-  /** sets `right` property (no bidirectional support) */
-  right?: number | string;
-  /** sets `bottom` property  */
-  bottom?: number | string;
-  /** sets `left` property (no bidirectional support)  */
-  left?: number | string;
-};
-
-export type PositionLogicalProps = {
-  /** sets `left` property (bidirectional support)  */
-  insetInlineStart?: number | string;
-  /** sets `right` property (bidirectional support) */
-  insetInlineEnd?: number | string;
-};
-
-const getInsetInlineStartStyle = (value: number | string, isRTL = false) => {
-  const attr = isRTL ? 'right' : 'left';
-  return {[attr]: value};
-};
-
-const getInsetInlineEndStyle = (value: number | string, isRTL = false) => {
-  const attr = isRTL ? 'left' : 'right';
-  return {[attr]: value};
-};
-
-const standardPositionProps = {
-  position: 'position',
-  zIndex: 'zIndex',
-  top: 'top',
-  right: 'right',
-  bottom: 'bottom',
-  left: 'left',
-};
-
-const logicalPositionProps = {
-  insetInlineStart: getInsetInlineStartStyle,
-  insetInlineEnd: getInsetInlineEndStyle,
-};
-
-export type PositionStyleProps = PositionStandardProps & PositionLogicalProps;
-
-/**
- * A style prop function that takes components props and returns position styles.
- * If no `PositionProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `position` with low-level, styled components
- * const BoxExample = () => (
- *   <Box position="absolute" top="50%">
- *     Hello, positions!
- *   </Box>
- * );
- *
- */
-export function position<P extends PositionStyleProps & {theme?: PartialEmotionCanvasTheme}>(
-  props: P
-) {
-  // position will always be used within the context of a component, but eslint doesn't know that
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const {canvas} = useTheme(props.theme);
-  let styles = {};
-  for (const key in props) {
-    if (key in props) {
-      if (key in standardPositionProps) {
-        const value = props[key];
-        const attr = standardPositionProps[key as keyof PositionStandardProps];
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-      if (key in logicalPositionProps) {
-        const value = props[key as keyof PositionLogicalProps] as string | number;
-        const styleFn = logicalPositionProps[key as keyof PositionLogicalProps];
-        const isRTL = canvas.direction === ContentDirection.RTL;
-        const style = styleFn(value, isRTL);
-        styles = {...styles, ...style};
-      }
-    }
-  }
-  return styles;
-}