@workday/canvas-kit-labs-react 6.8.9 → 6.9.0-next.5

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/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;
-}

package/common/lib/utils/space.ts

@@ -1,207 +0,0 @@
-import {
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
-import {space as spaceTokens, CanvasSpace, CanvasSpaceKeys} from '@workday/canvas-kit-react/tokens';
-
-type SpacePropValues = CanvasSpaceKeys | number | (string & {});
-
-/** These props automatically adjust for bidirectionality (LTR & RTL) */
-export type SpaceLogicalProps = {
-  /** sets margin-left property (bidirectional support) */
-  marginInlineStart?: SpacePropValues;
-  /** sets margin-right property (bidirectional support) */
-  marginInlineEnd?: SpacePropValues;
-  /** sets padding-left property (bidirectional support) */
-  paddingInlineStart?: SpacePropValues;
-  /** sets padding-right property (bidirectional support) */
-  paddingInlineEnd?: SpacePropValues;
-};
-
-/** These props do not adjust for bidirectionality (LTR & RTL) */
-export type SpaceStandardProps = {
-  /** sets margin property */
-  margin?: SpacePropValues;
-  /** sets margin-left and margin-right properties */
-  marginX?: SpacePropValues;
-  /** sets margin-top and margin-bottom properties */
-  marginY?: SpacePropValues;
-  /** sets margin-top property */
-  marginTop?: SpacePropValues;
-  /** sets margin-right property (no bidirectional support) */
-  marginRight?: SpacePropValues;
-  /** sets margin-bottom property */
-  marginBottom?: SpacePropValues;
-  /** sets margin-left property (no bidirectional support) */
-  marginLeft?: SpacePropValues;
-  /** sets padding property */
-  padding?: SpacePropValues;
-  /** sets padding-left and margin-right properties */
-  paddingX?: SpacePropValues;
-  /** sets padding-top and padding-bottom properties */
-  paddingY?: SpacePropValues;
-  /** sets padding-top property */
-  paddingTop?: SpacePropValues;
-  /** sets padding-right property (no bidirectional support) */
-  paddingRight?: SpacePropValues;
-  /** sets padding-bottom */
-  paddingBottom?: SpacePropValues;
-  /** sets padding-left property (no bidirectional support) */
-  paddingLeft?: SpacePropValues;
-};
-
-export type SpaceStyleProps = SpaceStandardProps & SpaceLogicalProps;
-
-const margin = (value: SpacePropValues) => {
-  return {margin: spaceTokens[value as keyof CanvasSpace] || value};
-};
-
-const marginX = (value: SpacePropValues) => {
-  return {
-    marginLeft: spaceTokens[value as CanvasSpaceKeys] || value,
-    marginRight: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const marginY = (value: SpacePropValues) => {
-  return {
-    marginTop: spaceTokens[value as CanvasSpaceKeys] || value,
-    marginBottom: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const marginTop = (value: SpacePropValues) => {
-  return {
-    marginTop: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const marginRight = (value: SpacePropValues, isRTL = false) => {
-  const attr = isRTL ? 'marginLeft' : 'marginRight';
-  return {
-    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const marginBottom = (value: SpacePropValues) => {
-  return {
-    marginBottom: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const marginLeft = (value: SpacePropValues, isRTL = false) => {
-  const attr = isRTL ? 'marginRight' : 'marginLeft';
-  return {
-    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const padding = (value: SpacePropValues) => {
-  return {
-    padding: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const paddingX = (value: SpacePropValues) => {
-  return {
-    paddingLeft: spaceTokens[value as CanvasSpaceKeys] || value,
-    paddingRight: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const paddingY = (value: SpacePropValues) => {
-  return {
-    paddingTop: spaceTokens[value as CanvasSpaceKeys] || value,
-    paddingBottom: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const paddingTop = (value: SpacePropValues) => {
-  return {
-    paddingTop: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const paddingRight = (value: SpacePropValues, isRTL = false) => {
-  const attr = isRTL ? 'paddingLeft' : 'paddingRight';
-  return {
-    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const paddingBottom = (value: SpacePropValues) => {
-  return {
-    paddingBottom: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const paddingLeft = (value: SpacePropValues, isRTL = false) => {
-  const attr = isRTL ? 'paddingRight' : 'paddingLeft';
-  return {
-    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const logicalSpaceStyleProps = {
-  marginInlineStart: marginLeft,
-  marginInlineEnd: marginRight,
-  paddingInlineStart: paddingLeft,
-  paddingInlineEnd: paddingRight,
-};
-
-const standardSpaceStyleProps = {
-  margin,
-  marginX,
-  marginY,
-  marginTop,
-  marginRight,
-  marginBottom,
-  marginLeft,
-  padding,
-  paddingX,
-  paddingY,
-  paddingTop,
-  paddingRight,
-  paddingBottom,
-  paddingLeft,
-};
-
-/**
- * A style prop function that takes component props and returns space styles.
- * If no `SpaceStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `space` with low-level, styled components
- * const BoxExample = () => (
- *   <Box padding="xs" margin="m">
- *     Hello, space!
- *   </Box>
- * );
- *
- */
-export function space<P extends SpaceStyleProps & {theme?: PartialEmotionCanvasTheme}>(props: P) {
-  // space 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 (props.hasOwnProperty(key)) {
-      if (key in standardSpaceStyleProps) {
-        const value = props[key as keyof SpaceStandardProps] as SpacePropValues;
-        const spaceFn = standardSpaceStyleProps[key as keyof SpaceStandardProps];
-        const style = spaceFn(value);
-        styles = {...styles, ...style};
-        continue;
-      }
-      if (key in logicalSpaceStyleProps) {
-        const value = props[key as keyof SpaceLogicalProps] as SpacePropValues;
-        const spaceFn = logicalSpaceStyleProps[key as keyof SpaceLogicalProps];
-        const isRTL = canvas.direction === ContentDirection.RTL;
-        const style = spaceFn(value, isRTL);
-        styles = {...styles, ...style};
-      }
-    }
-  }
-  return styles;
-}

package/common/lib/utils/types.ts

@@ -1,105 +0,0 @@
-import {
-  Globals,
-  GlobalsNumber,
-  SelfPosition,
-  DisplayOutside,
-  DisplayInside,
-  DisplayInternal,
-  DisplayLegacy,
-  LineStyle,
-} from 'csstype';
-
-// We're temporarily creating these types from csstype
-// to improve type completion until we move to csstype v3.
-
-// Border
-export type PropertyBorder = Globals | LineStyle | (string & {});
-
-// Flex Item
-export type PropertyJustifySelf =
-  | Globals
-  | SelfPosition
-  | 'auto'
-  | 'baseline'
-  | 'left'
-  | 'normal'
-  | 'right'
-  | 'stretch'
-  | (string & {});
-
-export type PropertyAlignSelf =
-  | Globals
-  | SelfPosition
-  | 'auto'
-  | 'baseline'
-  | 'normal'
-  | 'stretch'
-  | (string & {});
-
-export type PropertyOrder = GlobalsNumber;
-
-// Layout
-export type PropertyDisplay =
-  | Globals
-  | DisplayOutside
-  | DisplayInside
-  | DisplayInternal
-  | DisplayLegacy
-  | 'contents'
-  | 'list-item'
-  | 'none'
-  | (string & {});
-
-export type PropertyListStyle = Globals | 'inside' | 'none' | 'outside' | (string & {});
-
-export type PropertyOverflow =
-  | Globals
-  | '-moz-hidden-unscrollable'
-  | 'auto'
-  | 'clip'
-  | 'hidden'
-  | 'scroll'
-  | 'visible'
-  | (string & {});
-
-export type PropertyOverflowX =
-  | Globals
-  | '-moz-hidden-unscrollable'
-  | 'auto'
-  | 'clip'
-  | 'hidden'
-  | 'scroll'
-  | 'visible';
-
-export type PropertyOverflowY =
-  | Globals
-  | '-moz-hidden-unscrollable'
-  | 'auto'
-  | 'clip'
-  | 'hidden'
-  | 'scroll'
-  | 'visible';
-
-export type PropertyVerticalAlign =
-  | Globals
-  | 'baseline'
-  | 'bottom'
-  | 'middle'
-  | 'sub'
-  | 'super'
-  | 'text-bottom'
-  | 'text-top'
-  | 'top'
-  | (string & {});
-
-// Position
-export type PropertyPosition =
-  | Globals
-  | '-webkit-sticky'
-  | 'absolute'
-  | 'fixed'
-  | 'relative'
-  | 'static'
-  | 'sticky';
-
-export type PropertyZIndex = GlobalsNumber | 'auto';

package/dist/commonjs/common/lib/Box.d.ts

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { BorderStyleProps } from './utils/border';
-import { ColorStyleProps } from './utils/color';
-import { DepthStyleProps } from './utils/depth';
-import { FlexItemStyleProps } from './utils/flexItem';
-import { LayoutStyleProps } from './utils/layout';
-import { PositionStyleProps } from './utils/position';
-import { SpaceStyleProps } from './utils/space';
-export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & PositionStyleProps & SpaceStyleProps & {
-    children?: React.ReactNode;
-};
-/**
- * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
- * It is highly flexible, and its primary purpose is to build other components.
- *
- * @example
- * import { Box, BoxProps } from '@workday/canvas-kit-labs-react/common';
- *
- * interface CardProps extends BoxProps {
- *   // card-specific props
- * }
- *
- * // `Card`'s default values are set using `BoxProps`
- * const Card = (props: CardProps) => (
- *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
- * );
- *
- */
-export declare const Box: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./utils/border").BorderShorthandStyleProps & import("./utils/border").BorderColorStyleProps & import("./utils/border").BorderRadiusStyleProps & import("./utils/border").BorderLineStyleProps & import("./utils/border").BorderWidthStyleProps & import("./utils/border").BorderLogicalStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps>;
-//# sourceMappingURL=Box.d.ts.map

package/dist/commonjs/common/lib/Box.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAmCJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ynBAYd,CAAC"}