@workday/canvas-kit-react 8.0.0-alpha.208-next.1 → 8.0.0-alpha.222-next.6

package/layout/lib/utils/buildStyleFns.ts

@@ -0,0 +1,117 @@
+import {
+  borderRadius as borderRadiusTokens,
+  colors as colorTokens,
+  depth as depthTokens,
+  space as spaceTokens,
+  type as typeTokens,
+} from '@workday/canvas-kit-react/tokens';
+
+import {CanvasSystemPropValues, SystemPropNames, SystemPropValues} from './systemProps';
+
+export type StyleFnConfig = {
+  name: string;
+  properties: string[];
+  system: SystemPropNames | 'none';
+};
+
+export type StyleFns = {
+  [key: string]: (value: unknown) => {};
+};
+
+const getColor = (value: SystemPropValues['color']) => {
+  return colorTokens[value] || value;
+};
+
+const getDepth = (value: SystemPropValues['depth']) => {
+  return depthTokens[value];
+};
+
+const getShape = (value: SystemPropValues['shape']) => {
+  return borderRadiusTokens[value as CanvasSystemPropValues['shape']] || value;
+};
+
+const getSpace = (value: SystemPropValues['space']) => {
+  return spaceTokens[value as CanvasSystemPropValues['space']] || value;
+};
+
+const getFont = (value: SystemPropValues['font']) => {
+  return typeTokens.properties.fontFamilies[value as CanvasSystemPropValues['font']] || value;
+};
+
+const getFontSize = (value: SystemPropValues['fontSize'] | string) => {
+  return typeTokens.properties.fontSizes[value as CanvasSystemPropValues['fontSize']] || value;
+};
+
+const getFontWeight = (value: SystemPropValues['fontWeight'] | string) => {
+  return typeTokens.properties.fontWeights[value as CanvasSystemPropValues['fontWeight']] || value;
+};
+
+export function buildStyleFns(styleFnConfigs: StyleFnConfig[]): StyleFns {
+  return styleFnConfigs.reduce((styleFns = {}, styleFnConfig) => {
+    const styleFn = (value: unknown) => {
+      return styleFnConfig.properties.reduce((styles = {}, property: string) => {
+        if (styleFnConfig.system === 'color') {
+          return {...styles, [property]: getColor(value as SystemPropValues['color'])};
+        }
+
+        if (styleFnConfig.system === 'depth') {
+          // Depth tokens return the style property (box-shadow) and the value
+          const depthStyle = getDepth(value as SystemPropValues['depth']);
+          return {...styles, ...depthStyle};
+        }
+
+        if (styleFnConfig.system === 'font') {
+          return {
+            ...styles,
+            [property]: getFont(value as SystemPropValues['font']),
+          };
+        }
+
+        if (styleFnConfig.system === 'fontSize') {
+          return {
+            ...styles,
+            [property]: getFontSize(value as SystemPropValues['fontSize']),
+          };
+        }
+
+        if (styleFnConfig.system === 'fontWeight') {
+          return {
+            ...styles,
+            [property]: getFontWeight(value as SystemPropValues['fontWeight']),
+          };
+        }
+
+        if (styleFnConfig.system === 'shape') {
+          return {
+            ...styles,
+            [property]: getShape(value as SystemPropValues['shape']),
+          };
+        }
+
+        if (styleFnConfig.system === 'space') {
+          return {...styles, [property]: getSpace(value as SystemPropValues['space'])};
+        }
+
+        return {...styles, [property]: value};
+      }, {});
+    };
+
+    return {...styleFns, [styleFnConfig.name]: styleFn};
+  }, {});
+}
+
+export function buildStylePropFn<P extends {}>(styleFns: StyleFns) {
+  return (props: P) => {
+    let styles = {};
+    for (const key in props) {
+      if (key in props && key in styleFns) {
+        const styleFn = styleFns[key];
+        const value = props[key];
+        const style = styleFn(value);
+        styles = {...styles, ...style};
+        continue;
+      }
+    }
+    return styles;
+  };
+}

package/layout/lib/utils/color.ts

@@ -1,67 +1,52 @@
-// type changes no need
-import {
-  colors as colorTokens,
-  CanvasColor,
-  CanvasTypeVariants,
-} from '@workday/canvas-kit-react/tokens';
+import {Property} from 'csstype';
 
-export type ColorTokens = typeof colorTokens;
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
 
-/** style props to for color properties */
+/** style props to set CSS 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 | keyof CanvasTypeVariants | string) => ({
-  color: colorTokens[value] || value,
-});
-
-const colorProps = {
-  background: getBackground,
-  backgroundColor: getBackgroundColor,
-  backgroundImage: getBackgroundImage,
-  color: getColor,
+  /**
+   * - sets [CSS background-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
+   * - system tokens: `color`
+   * */
+  backgroundColor?: SystemPropValues['color'];
+  /**
+   * - sets [CSS color property](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
+   * - system tokens: `color`
+   * */
+  color?: SystemPropValues['color'];
+  /** sets [CSS opacity property](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) */
+  opacity?: Property.Opacity;
 };
 
+export const colorStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'backgroundColor',
+    properties: ['backgroundColor'],
+    system: 'color',
+  },
+  {
+    name: 'color',
+    properties: ['color'],
+    system: 'color',
+  },
+  {
+    name: 'opacity',
+    properties: ['opacity'],
+    system: 'none',
+  },
+];
+
+export const colorFns = buildStyleFns(colorStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns color styles from canvas token values.
+ * A style prop function that takes component 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
+ * ```tsx
  * const BoxExample = () => (
- *   <Box backgroundColor="blueberry500" color="frenchVanilla100">Hello, colors!</Box>
+ *   <Box color="frenchVanilla100" opacity={0.6}>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;
-}
+export const color = buildStylePropFn<ColorStyleProps>(colorFns);

package/layout/lib/utils/depth.ts

@@ -1,37 +1,41 @@
-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];
+import {Property} from 'csstype';
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
 
 /** style props to for depth styles */
 export type DepthStyleProps = {
-  /** sets depth styles (box-shadow & border) */
-  depth?: DepthTokenKeys;
+  /** sets [CSS box-shadow styles](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) */
+  boxShadow?: Property.BoxShadow;
+  /**
+   * - sets [CSS box-shadow styles](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
+   * - system tokens: `depth`
+   * */
+  depth?: SystemPropValues['depth'];
 };
 
-const depthProps = {
-  depth: (token: DepthTokenKeys) => depthTokens[token],
-};
+export const depthStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'boxShadow',
+    properties: ['boxShadow'],
+    system: 'none',
+  },
+  {
+    name: 'depth',
+    properties: ['boxShadow'],
+    system: 'depth',
+  },
+];
 
+export const depthStyleFns = buildStyleFns(depthStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns depth styles from canvas token values.
+ * A style prop function that takes component 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 = () => (
+ * ```tsx
+ * const DepthExample = () => (
  *   <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;
-}
+export const depth = buildStylePropFn<DepthStyleProps>(depthStyleFns);

package/layout/lib/utils/flex.ts

@@ -1,58 +1,109 @@
 import {Property} from 'csstype';
 
-/** style props to for flexbox container properties */
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
+
+/** style props to for CSS flexbox container properties */
 export type FlexStyleProps = {
-  /** sets `align-items` property */
+  /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) */
   alignItems?: Property.AlignItems;
-  /** sets `align-content` property */
+  /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) */
   alignContent?: Property.AlignContent;
   /**
-   * sets `display` property
-   * @default 'flex'
+   * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+   * - @default 'flex'
    * */
   display?: 'flex' | 'inline-flex';
-  /** sets `justify-items` property */
+  /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) */
   justifyItems?: Property.JustifyItems;
-  /** sets `justify-content` property */
+  /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
   justifyContent?: Property.JustifyContent;
-  /** sets `flex-wrap` property */
+  /** sets [CSS flex-wrap property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) */
   flexWrap?: Property.FlexWrap;
-  /** sets `flex-direction` property */
+  /** sets [CSS flex-direction property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) */
   flexDirection?: Property.FlexDirection;
+  /**
+   * - sets [CSS gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
+   * - system tokens: `space`
+   * */
+  gap?: SystemPropValues['space'];
+  /**
+   * - sets [CSS column-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
+   * - system tokens: `space`
+   * */
+  columnGap?: SystemPropValues['space'];
+  /**
+   * - sets [CSS row-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
+   * - system tokens: `space`
+   * */
+  rowGap?: SystemPropValues['space'];
 };
 
-const flexProps = {
-  alignContent: 'alignContent',
-  alignItems: 'alignItems',
-  display: 'display',
-  flexDirection: 'flexDirection',
-  flexWrap: 'flexWrap',
-  justifyContent: 'justifyContent',
-  justifyItems: 'justifyItems',
-};
+export const flexStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'alignContent',
+    properties: ['alignContent'],
+    system: 'none',
+  },
+  {
+    name: 'alignItems',
+    properties: ['alignItems'],
+    system: 'none',
+  },
+  {
+    name: 'display',
+    properties: ['display'],
+    system: 'none',
+  },
+  {
+    name: 'flexDirection',
+    properties: ['flexDirection'],
+    system: 'none',
+  },
+  {
+    name: 'flexWrap',
+    properties: ['flexWrap'],
+    system: 'none',
+  },
+  {
+    name: 'justifyContent',
+    properties: ['justifyContent'],
+    system: 'none',
+  },
+  {
+    name: 'justifyItems',
+    properties: ['justifyItems'],
+    system: 'none',
+  },
+  {
+    name: 'gap',
+    properties: ['gap'],
+    system: 'space',
+  },
+  {
+    name: 'columnGap',
+    properties: ['columnGap'],
+    system: 'space',
+  },
+  {
+    name: 'rowGap',
+    properties: ['rowGap'],
+    system: 'space',
+  },
+];
 
+export const flexStyleFns = buildStyleFns(flexStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns flexbox styles.
  * If no `FlexStyleProps` are found, it returns an empty object.
  *
  * @example
- * // You'll most likely use `flex` with low-level, styled components
+ * ```tsx
  * const FlexExample = () => (
  *   <Flex justifyContent="center" alignItems="center">
  *     Hello, flex!
  *   </Flex>
  * );
- *
+ * ```
  */
-export function flex<P extends FlexStyleProps>(props: P) {
-  const styles = {};
-  for (const key in props) {
-    if (key in flexProps) {
-      const attr = flexProps[key as keyof FlexStyleProps];
-      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;
-}
+export const flex = buildStylePropFn<FlexStyleProps>(flexStyleFns);

package/layout/lib/utils/flexItem.ts

@@ -1,56 +1,74 @@
 import {Property} from 'csstype';
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 
-/** style props to for flexbox item properties */
+/** style props to for CSS flex 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 */
+  /** sets [CSS flex property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) */
+  flex?: Property.Flex;
+  /** sets [CSS flex-grow property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) */
+  flexGrow?: Property.FlexGrow;
+  /** sets [CSS flex-shrink property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) */
+  flexShrink?: Property.FlexShrink;
+  /** sets [CSS flex-basis property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) */
+  flexBasis?: Property.FlexBasis;
+  /** sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) */
   justifySelf?: Property.JustifySelf;
-  /** sets `align-self` property */
+  /** sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) */
   alignSelf?: Property.AlignSelf;
-  /** sets `order` property */
+  /** sets [CSS order property](https://developer.mozilla.org/en-US/docs/Web/CSS/order) */
   order?: Property.Order;
 };
 
-/** style props to for flexbox item properties */
-const flexItemProps = {
-  flex: 'flex',
-  flexGrow: 'flexGrow',
-  flexShrink: 'flexShrink',
-  flexBasis: 'flexBasis',
-  justifySelf: 'justifySelf',
-  alignSelf: 'alignSelf',
-  order: 'order',
-};
+export const flexItemStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'flex',
+    properties: ['flex'],
+    system: 'none',
+  },
+  {
+    name: 'flexGrow',
+    properties: ['flexGrow'],
+    system: 'none',
+  },
+  {
+    name: 'flexShrink',
+    properties: ['flexShrink'],
+    system: 'none',
+  },
+  {
+    name: 'flexBasis',
+    properties: ['flexBasis'],
+    system: 'none',
+  },
+  {
+    name: 'justifySelf',
+    properties: ['justifySelf'],
+    system: 'none',
+  },
+  {
+    name: 'alignSelf',
+    properties: ['alignSelf'],
+    system: 'none',
+  },
+  {
+    name: 'order',
+    properties: ['order'],
+    system: 'none',
+  },
+];
 
+export const flexItemStyleFns = buildStyleFns(flexItemStyleFnConfigs);
 /**
  * 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
+ * ```tsx
  * 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;
-}
+export const flexItem = buildStylePropFn<FlexItemStyleProps>(flexItemStyleFns);