@workday/canvas-kit-react 8.0.0 → 8.0.1

package/layout/lib/utils/grid.ts

@@ -0,0 +1,166 @@
+import {Property, Globals} from 'csstype';
+
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
+
+/** style props to for CSS grid container properties */
+export type GridStyleProps = {
+  /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) */
+  alignItems?: Property.AlignItems;
+  /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) */
+  alignContent?: Property.AlignContent;
+  /**
+   * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+   * - @default 'grid'
+   * */
+  display?: 'grid' | 'inline-grid' | 'none' | Globals | (string & {});
+  /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) */
+  justifyItems?: Property.JustifyItems;
+  /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
+  justifyContent?: Property.JustifyContent;
+  /** sets [CSS grid-template property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template) */
+  gridTemplate?: Property.GridTemplate;
+  /** sets [CSS grid-template-areas property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) */
+  gridTemplateAreas?: Property.GridTemplateAreas;
+  /** sets [CSS grid-template-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) */
+  gridTemplateColumns?: Property.GridTemplateColumns;
+  /** sets [CSS grid-template-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) */
+  gridTemplateRows?: Property.GridTemplateRows;
+  /**
+   * - sets [CSS column-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
+   * - system tokens: `space`
+   * */
+  gridColumnGap?: Property.GridColumnGap | SystemPropValues['space'];
+  /**
+   * - sets [CSS row-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
+   * - system tokens: `space`
+   * */
+  gridRowGap?: Property.GridRowGap | SystemPropValues['space'];
+  /**
+   * - sets [CSS grid-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap)
+   * - system tokens: `space`
+   * */
+  gridGap?: Property.GridGap | SystemPropValues['space'];
+  /** sets [CSS place-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items) */
+  gridPlaceItems?: Property.PlaceItems;
+  /** sets [CSS grid-auto-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) */
+  gridAutoColumns?: Property.GridAutoColumns;
+  /** sets [CSS grid-auto-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) */
+  gridAutoRows?: Property.GridAutoRows;
+  /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) */
+  gridArea?: Property.GridArea;
+  /** sets [CSS grid-auto-flow property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) */
+  gridAutoFlow?: Property.GridAutoFlow;
+  /** sets [CSS grid property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) */
+  grid?: Property.Grid;
+};
+
+export const gridStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'gridGap',
+    properties: ['gridGap'],
+    system: 'space',
+  },
+  {
+    name: 'gridRowGap',
+    properties: ['gridRowGap'],
+    system: 'space',
+  },
+  {
+    name: 'gridColumnGap',
+    properties: ['gridColumnGap'],
+    system: 'space',
+  },
+  {
+    name: 'alignContent',
+    properties: ['alignContent'],
+    system: 'none',
+  },
+  {
+    name: 'alignItems',
+    properties: ['alignItems'],
+    system: 'none',
+  },
+  {
+    name: 'display',
+    properties: ['display'],
+    system: 'none',
+  },
+  {
+    name: 'justifyContent',
+    properties: ['justifyContent'],
+    system: 'none',
+  },
+  {
+    name: 'justifyItems',
+    properties: ['justifyItems'],
+    system: 'none',
+  },
+  {
+    name: 'gridTemplateAreas',
+    properties: ['gridTemplateAreas'],
+    system: 'none',
+  },
+  {
+    name: 'gridTemplate',
+    properties: ['gridTemplate'],
+    system: 'none',
+  },
+  {
+    name: 'gridTemplateColumns',
+    properties: ['gridTemplateColumns'],
+    system: 'none',
+  },
+  {
+    name: 'gridTemplateRows',
+    properties: ['gridTemplateRows'],
+    system: 'none',
+  },
+  {
+    name: 'gridPlaceItems',
+    properties: ['gridPlaceItems'],
+    system: 'none',
+  },
+  {
+    name: 'gridAutoColumns',
+    properties: ['gridAutoColumns'],
+    system: 'none',
+  },
+  {
+    name: 'gridAutoRows',
+    properties: ['gridAutoRows'],
+    system: 'none',
+  },
+  {
+    name: 'gridAutoFlow',
+    properties: ['gridAutoFlow'],
+    system: 'none',
+  },
+  {
+    name: 'gridArea',
+    properties: ['gridArea'],
+    system: 'none',
+  },
+  {
+    name: 'grid',
+    properties: ['grid'],
+    system: 'none',
+  },
+];
+
+export const gridStyleFns = buildStyleFns(gridStyleFnConfigs);
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridStyleProps` are found, it returns an empty object.
+ * Space tokens are available for gridGap, gridRowGap, gridColumnGap props.
+ *
+ * @example
+ * ```tsx
+ * const GridExample = () => (
+ *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
+ *     Hello, Grid!
+ *   </Grid>
+ * );
+ * ```
+ */
+export const grid = buildStylePropFn<GridStyleProps>(gridStyleFns);

package/layout/lib/utils/gridItem.ts

@@ -0,0 +1,96 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+
+/** style props to for CSS grid item properties */
+export type GridItemStyleProps = {
+  /** sets [CSS grid-column-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start) */
+  gridColumnStart?: Property.GridColumnStart;
+  /** sets [CSS grid-column-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end) */
+  gridColumnEnd?: Property.GridColumnEnd;
+  /** sets [CSS grid-row-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start) */
+  gridRowStart?: Property.GridRowStart;
+  /** sets [CSS grid-row-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end) */
+  gridRowEnd?: Property.GridRowEnd;
+  /** sets [CSS grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) */
+  gridColumn?: Property.GridColumn;
+  /** sets [CSS grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) */
+  gridRow?: Property.GridRow;
+  /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) */
+  gridArea?: Property.GridArea;
+  /** sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) */
+  justifySelf?: Property.JustifySelf;
+  /** sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) */
+  alignSelf?: Property.AlignSelf;
+  /** sets [CSS place-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self) */
+  placeSelf?: Property.PlaceSelf;
+};
+
+export const gridItemStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'gridColumnStart',
+    properties: ['gridColumnStart'],
+    system: 'none',
+  },
+  {
+    name: 'gridColumnEnd',
+    properties: ['gridColumnEnd'],
+    system: 'none',
+  },
+  {
+    name: 'gridRowStart',
+    properties: ['gridRowStart'],
+    system: 'none',
+  },
+  {
+    name: 'gridRowEnd',
+    properties: ['gridRowEnd'],
+    system: 'none',
+  },
+  {
+    name: 'gridColumn',
+    properties: ['gridColumn'],
+    system: 'none',
+  },
+  {
+    name: 'gridRow',
+    properties: ['gridRow'],
+    system: 'none',
+  },
+  {
+    name: 'gridArea',
+    properties: ['gridArea'],
+    system: 'none',
+  },
+  {
+    name: 'justifySelf',
+    properties: ['justifySelf'],
+    system: 'none',
+  },
+  {
+    name: 'alignSelf',
+    properties: ['alignSelf'],
+    system: 'none',
+  },
+  {
+    name: 'placeSelf',
+    properties: ['placeSelf'],
+    system: 'none',
+  },
+];
+
+export const gridItemStyleFns = buildStyleFns(gridItemStyleFnConfigs);
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridItemStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * ```tsx
+ * const GridItemExample = () => (
+ *   <Grid.Item gridRowStart="1" justifySelf="center" gridArea="Card">
+ *     Hello, Grid Item!
+ *   </Grid.Item>
+ * );
+ * ```
+ */
+export const gridItem = buildStylePropFn<GridItemStyleProps>(gridItemStyleFns);

package/layout/lib/utils/layout.ts

@@ -1,77 +1,129 @@
-import {
-  PropertyDisplay,
-  PropertyListStyle,
-  PropertyOverflow,
-  PropertyOverflowX,
-  PropertyOverflowY,
-  PropertyVerticalAlign,
-} from './types';
+import {Property} from 'csstype';
 
-/** style props to for layout properties */
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
+
+/** style props to for CSS 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;
+  /** sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/displaydisplay) */
+  display?: Property.Display;
+  /**
+   * - sets [CSS height property](https://developer.mozilla.org/en-US/docs/Web/CSS/height)
+   * - system tokens: `space`
+   * */
+  height?: SystemPropValues['space'];
+  /** sets [CSS list-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style) */
+  listStyle?: Property.ListStyle;
+  /**
+   * - sets [CSS max-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)
+   * - system tokens: `space`
+   * */
+  maxHeight?: SystemPropValues['space'];
+  /**
+   * - sets [CSS max-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)
+   * - system tokens: `space`
+   * */
+  maxWidth?: SystemPropValues['space'];
+  /**
+   * - sets [CSS min-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)
+   * - system tokens: `space`
+   * */
+  minHeight?: SystemPropValues['space'];
+  /**
+   * - sets [CSS min-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width)
+   * - system tokens: `space`
+   * */
+  minWidth?: SystemPropValues['space'];
+  /** sets [CSS overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) */
+  overflow?: Property.Overflow;
+  /** sets [CSS overflow-x property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x) */
+  overflowX?: Property.OverflowX;
+  /** sets [CSS overflow-y property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y) */
+  overflowY?: Property.OverflowY;
+  /** sets [CSS vertical-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) */
+  verticalAlign?: Property.VerticalAlign;
+  /**
+   * - sets [CSS width property](https://developer.mozilla.org/en-US/docs/Web/CSS/width)
+   * - system tokens: `space`
+   * */
+  width?: SystemPropValues['space'];
 };
 
-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',
-};
+export const layoutStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'display',
+    properties: ['display'],
+    system: 'none',
+  },
+  {
+    name: 'height',
+    properties: ['height'],
+    system: 'space',
+  },
+  {
+    name: 'listStyle',
+    properties: ['listStyle'],
+    system: 'none',
+  },
+  {
+    name: 'maxHeight',
+    properties: ['maxHeight'],
+    system: 'space',
+  },
+  {
+    name: 'maxWidth',
+    properties: ['maxWidth'],
+    system: 'space',
+  },
+  {
+    name: 'minHeight',
+    properties: ['minHeight'],
+    system: 'space',
+  },
+  {
+    name: 'minWidth',
+    properties: ['minWidth'],
+    system: 'space',
+  },
+  {
+    name: 'overflow',
+    properties: ['overflow'],
+    system: 'none',
+  },
+  {
+    name: 'overflowX',
+    properties: ['overflowX'],
+    system: 'none',
+  },
+  {
+    name: 'overflowY',
+    properties: ['overflowY'],
+    system: 'none',
+  },
+  {
+    name: 'verticalAlign',
+    properties: ['verticalAlign'],
+    system: 'none',
+  },
+  {
+    name: 'width',
+    properties: ['width'],
+    system: 'space',
+  },
+];
 
+export const layoutStyleFns = buildStyleFns(layoutStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns layout styles.
+ * A style prop function that takes component 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 = () => (
+ * ```tsx
+ * const LayoutExample = () => (
  *   <Box display="inline-block" height="50%">
- *     Hello, positions!
+ *     Hello, layout!
  *   </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;
-}
+export const layout = buildStylePropFn<LayoutStyleProps>(layoutStyleFns);

package/layout/lib/utils/other.ts

@@ -1,20 +1,149 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+
+/** style props to for other CSS properties */
 export type OtherStyleProps = {
-  animation?: string;
+  /** sets [CSS animation property](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) */
+  animation?: Property.Animation;
+  /** sets [CSS appearance property](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance) */
+  appearance?: Property.Appearance;
+  /** sets [CSS box-sizing property](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) */
+  boxSizing?: Property.BoxSizing;
+  /** sets [CSS content property](https://developer.mozilla.org/en-US/docs/Web/CSS/content) */
+  content?: Property.Content;
+  /** sets [CSS cursor property](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) */
+  cursor?: Property.Cursor;
+  /** sets [CSS fill property](https://developer.mozilla.org/en-US/docs/Web/CSS/fill) */
+  fill?: Property.Fill;
+  /** sets [CSS float property](https://developer.mozilla.org/en-US/docs/Web/CSS/float) */
+  float?: Property.Float;
+  /** sets [CSS object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) */
+  objectFit?: Property.ObjectFit;
+  /** sets [CSS object-position property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) */
+  objectPosition?: Property.ObjectPosition;
+  /** sets [CSS opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) */
+  opacity?: Property.Opacity;
+  /** sets [CSS outline property](https://developer.mozilla.org/en-US/docs/Web/CSS/outline) */
+  outline?: Property.Outline;
+  /** sets [CSS outline-offset property](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset) */
+  outlineOffset?: Property.OutlineOffset;
+  /** sets [CSS overflow-wrap property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap) */
+  overflowWrap?: Property.OverflowWrap;
+  /** sets [CSS pointer-events property](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) */
+  pointerEvents?: Property.PointerEvents;
+  /** sets [CSS resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) */
+  resize?: Property.Resize;
+  /** sets [CSS stroke property](https://developer.mozilla.org/en-US/docs/Web/CSS/stroke) */
+  stroke?: Property.Stroke;
+  /** sets [CSS transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) */
+  transform?: Property.Transform;
+  /** sets [CSS transition property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) */
+  transition?: Property.Transition;
+  /** sets [CSS user-select property](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) */
+  userSelect?: Property.UserSelect;
+  /** sets [CSS visibility property](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) */
+  visibility?: Property.Visibility;
 };
 
-const otherProps = {
-  animation: (value: string) => {
-    return {animation: value};
+export const otherStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'animation',
+    properties: ['animation'],
+    system: 'none',
   },
-};
+  {
+    name: 'appearance',
+    properties: ['appearance'],
+    system: 'none',
+  },
+  {
+    name: 'boxSizing',
+    properties: ['boxSizing'],
+    system: 'none',
+  },
+  {
+    name: 'content',
+    properties: ['content'],
+    system: 'none',
+  },
+  {
+    name: 'cursor',
+    properties: ['cursor'],
+    system: 'none',
+  },
+  {
+    name: 'fill',
+    properties: ['fill'],
+    system: 'none',
+  },
+  {
+    name: 'float',
+    properties: ['float'],
+    system: 'none',
+  },
+  {
+    name: 'objectFit',
+    properties: ['objectFit'],
+    system: 'none',
+  },
+  {
+    name: 'objectPosition',
+    properties: ['objectPosition'],
+    system: 'none',
+  },
+  {
+    name: 'outline',
+    properties: ['outline'],
+    system: 'none',
+  },
+  {
+    name: 'outlineOffset',
+    properties: ['outlineOffset'],
+    system: 'none',
+  },
+  {
+    name: 'overflowWrap',
+    properties: ['overflowWrap'],
+    system: 'none',
+  },
+  {
+    name: 'pointerEvents',
+    properties: ['pointerEvents'],
+    system: 'none',
+  },
+  {
+    name: 'resize',
+    properties: ['resize'],
+    system: 'none',
+  },
+  {
+    name: 'stroke',
+    properties: ['stroke'],
+    system: 'none',
+  },
+  {
+    name: 'transform',
+    properties: ['transform'],
+    system: 'none',
+  },
+  {
+    name: 'transition',
+    properties: ['transition'],
+    system: 'none',
+  },
+  {
+    name: 'userSelect',
+    properties: ['userSelect'],
+    system: 'none',
+  },
+  {
+    name: 'visibility',
+    properties: ['visibility'],
+    system: 'none',
+  },
+];
+
+export const otherStyleFns = buildStyleFns(otherStyleFnConfigs);
 
-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 {};
-}
+export const other = buildStylePropFn<OtherStyleProps>(otherStyleFns);