@hubspot/cms-component-library 0.1.0-alpha.1

package/components/componentLibrary/utils/propResolution/propResolutionUtils.ts

@@ -0,0 +1,113 @@
+import {
+  BaseComponentProps,
+  BASE_COMPONENT_PROP_KEYS,
+  DimensionConfiguration,
+} from '../../types/index.js';
+import { createStateManager } from '../chainApi/stateManager.js';
+import cx from '../classname.js';
+
+const isValidDimension = (
+  dimension: unknown
+): dimension is {
+  options: Record<string, { props: Record<string, unknown> }>;
+} => {
+  return (
+    dimension != null &&
+    typeof dimension === 'object' &&
+    'options' in dimension &&
+    dimension.options != null
+  );
+};
+
+const getSelectedDimensionProps = (
+  dimension: { options: Record<string, { props: Record<string, unknown> }> },
+  selectedValue: string
+): Record<string, unknown> | null => {
+  const selectedOption = dimension.options[selectedValue];
+  return selectedOption?.props || null;
+};
+
+const MergeDimensionProp = (
+  dimensionProps: Record<string, unknown>,
+  passedProps: Record<string, unknown>
+): Record<string, unknown> => {
+  const {
+    className: dimensionClassName,
+    style: dimensionStyle,
+    ...dimensionRest
+  } = dimensionProps;
+  const mergedProps = { ...passedProps, ...dimensionRest };
+
+  if (dimensionClassName) {
+    mergedProps.className = cx(dimensionClassName, passedProps.className);
+  } else if (dimensionStyle) {
+    mergedProps.style = {
+      ...(dimensionStyle as React.CSSProperties),
+      ...(passedProps.style as React.CSSProperties),
+    };
+  }
+
+  return mergedProps;
+};
+
+export const extractDimensionPropsFromConfig = <ExistingPropsShape>(
+  config: DimensionConfiguration,
+  allProps: ExistingPropsShape
+): Record<string, unknown> => {
+  let dimensionProps: Record<string, unknown> = {};
+
+  for (const [dimensionKey, dimension] of Object.entries(config)) {
+    if (!isValidDimension(dimension)) {
+      continue;
+    }
+
+    const selectedValue = allProps[dimensionKey] as string;
+    if (!selectedValue) {
+      continue;
+    }
+
+    const selectedProps = getSelectedDimensionProps(dimension, selectedValue);
+    if (selectedProps) {
+      dimensionProps = MergeDimensionProp(selectedProps, dimensionProps);
+    }
+  }
+
+  return dimensionProps;
+};
+
+export const separateAllPropTypes = <ExistingPropsShape>(
+  allProps: ExistingPropsShape & Record<string, unknown>
+) => {
+  const baseResolvedProps: Partial<BaseComponentProps> = {};
+  const remainingProps: Record<string, unknown> = {};
+
+  for (const [propKey, propValue] of Object.entries(allProps)) {
+    if (BASE_COMPONENT_PROP_KEYS.has(propKey as keyof BaseComponentProps)) {
+      // If prop is custom to component or unknown just add to kitchen sink props (remainingProps)
+      baseResolvedProps[propKey] = propValue;
+      continue;
+    }
+
+    remainingProps[propKey] = propValue;
+  }
+
+  return {
+    baseResolvedProps,
+    remainingProps,
+  };
+};
+
+export const resolveAllProps = <ExistingPropsShape>(
+  stateManager: ReturnType<typeof createStateManager>,
+  props: ExistingPropsShape & Record<string, unknown>
+) => {
+  const activeConfiguration = stateManager.getActiveConfiguration();
+  const dimensionProps = extractDimensionPropsFromConfig(
+    activeConfiguration,
+    props
+  );
+
+  const mergedProps = MergeDimensionProp(dimensionProps, props);
+
+  return separateAllPropTypes(mergedProps);
+};

package/components/componentLibrary/utils/storybook/standardArgs.ts

@@ -0,0 +1,607 @@
+import type { ArgTypes } from '@storybook/react';
+
+// =============================================================================
+// Typography Args
+// =============================================================================
+
+export const TYPOGRAPHY_ARGS: ArgTypes = {
+  // Font Properties
+  fontSize: {
+    control: { type: 'text' },
+    description: 'Font size (e.g., "16px", "1rem", "large")',
+    table: { category: 'Typography' },
+  },
+  fontFamily: {
+    control: { type: 'text' },
+    description: 'Font family stack',
+    table: { category: 'Typography' },
+  },
+  fontWeight: {
+    control: { type: 'select' },
+    options: [
+      'lighter',
+      'normal',
+      'bold',
+      'bolder',
+      100,
+      200,
+      300,
+      400,
+      500,
+      600,
+      700,
+      800,
+      900,
+    ],
+    description: 'Font weight',
+    table: { category: 'Typography' },
+  },
+  fontStyle: {
+    control: { type: 'select' },
+    options: ['normal', 'italic', 'oblique'],
+    description: 'Font style',
+    table: { category: 'Typography' },
+  },
+  lineHeight: {
+    control: { type: 'text' },
+    description: 'Line height (e.g., "1.5", "24px")',
+    table: { category: 'Typography' },
+  },
+  letterSpacing: {
+    control: { type: 'text' },
+    description: 'Letter spacing (e.g., "0.1em", "2px")',
+    table: { category: 'Typography' },
+  },
+
+  // Text Alignment & Transformation
+  textAlign: {
+    control: { type: 'select' },
+    options: ['left', 'center', 'right', 'justify'],
+    description: 'Text alignment',
+    table: { category: 'Typography' },
+  },
+  textTransform: {
+    control: { type: 'select' },
+    options: ['none', 'uppercase', 'lowercase', 'capitalize'],
+    description: 'Text transformation',
+    table: { category: 'Typography' },
+  },
+  textDecoration: {
+    control: { type: 'text' },
+    description: 'Text decoration (e.g., "underline", "line-through")',
+    table: { category: 'Typography' },
+  },
+
+  // Text Flow & Breaking
+  whiteSpace: {
+    control: { type: 'select' },
+    options: [
+      'normal',
+      'nowrap',
+      'pre',
+      'pre-line',
+      'pre-wrap',
+      'break-spaces',
+    ],
+    description: 'White space handling',
+    table: { category: 'Typography' },
+  },
+  wordBreak: {
+    control: { type: 'select' },
+    options: ['normal', 'break-all', 'keep-all', 'break-word'],
+    description: 'Word breaking behavior',
+    table: { category: 'Typography' },
+  },
+  textWrap: {
+    control: { type: 'select' },
+    options: ['wrap', 'nowrap', 'balance', 'pretty', 'stable'],
+    description: 'Text wrapping behavior',
+    table: { category: 'Typography' },
+  },
+  overflowWrap: {
+    control: { type: 'select' },
+    options: ['normal', 'anywhere', 'break-word'],
+    description: 'Overflow wrapping behavior',
+    table: { category: 'Typography' },
+  },
+  textOverflow: {
+    control: { type: 'select' },
+    options: ['clip', 'ellipsis'],
+    description: 'Text overflow behavior',
+    table: { category: 'Typography' },
+  },
+  wordWrap: {
+    control: { type: 'select' },
+    options: ['normal', 'break-word', 'anywhere'],
+    description: 'Word wrapping behavior',
+    table: { category: 'Typography' },
+  },
+};
+
+// =============================================================================
+// Layout Args
+// =============================================================================
+
+export const LAYOUT_ARGS: ArgTypes = {
+  // Display
+  display: {
+    control: { type: 'select' },
+    options: [
+      'block',
+      'inline',
+      'inline-block',
+      'flex',
+      'inline-flex',
+      'grid',
+      'none',
+    ],
+    description: 'Display type',
+    table: { category: 'Layout' },
+  },
+  visibility: {
+    control: { type: 'select' },
+    options: ['visible', 'hidden', 'collapse'],
+    description: 'Element visibility',
+    table: { category: 'Layout' },
+  },
+  overflow: {
+    control: { type: 'select' },
+    options: ['visible', 'hidden', 'scroll', 'auto'],
+    description: 'Overflow behavior',
+    table: { category: 'Layout' },
+  },
+
+  // Size
+  width: {
+    control: { type: 'text' },
+    description: 'Width (e.g., "100px", "50%", "auto")',
+    table: { category: 'Layout' },
+  },
+  height: {
+    control: { type: 'text' },
+    description: 'Height (e.g., "100px", "50vh", "auto")',
+    table: { category: 'Layout' },
+  },
+  minWidth: {
+    control: { type: 'text' },
+    description: 'Minimum width',
+    table: { category: 'Layout' },
+  },
+  minHeight: {
+    control: { type: 'text' },
+    description: 'Minimum height',
+    table: { category: 'Layout' },
+  },
+  maxWidth: {
+    control: { type: 'text' },
+    description: 'Maximum width',
+    table: { category: 'Layout' },
+  },
+  maxHeight: {
+    control: { type: 'text' },
+    description: 'Maximum height',
+    table: { category: 'Layout' },
+  },
+
+  // Media/Object Properties
+  objectFit: {
+    control: { type: 'select' },
+    options: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+    description: 'How content fits within container',
+    table: { category: 'Layout' },
+  },
+  aspectRatio: {
+    control: { type: 'text' },
+    description: 'Aspect ratio (e.g., "16/9", "1", "auto")',
+    table: { category: 'Layout' },
+  },
+};
+
+// =============================================================================
+// Flexbox Args
+// =============================================================================
+
+export const FLEXBOX_ARGS: ArgTypes = {
+  // Flex Container Properties
+  justifyContent: {
+    control: { type: 'select' },
+    options: [
+      'flex-start',
+      'center',
+      'flex-end',
+      'space-between',
+      'space-around',
+      'space-evenly',
+      'start',
+      'end',
+    ],
+    description: 'Horizontal alignment of flex items',
+    table: { category: 'Flexbox' },
+  },
+  alignItems: {
+    control: { type: 'select' },
+    options: [
+      'stretch',
+      'flex-start',
+      'center',
+      'flex-end',
+      'baseline',
+      'start',
+      'end',
+    ],
+    description: 'Vertical alignment of flex items',
+    table: { category: 'Flexbox' },
+  },
+  flexDirection: {
+    control: { type: 'select' },
+    options: ['row', 'column'],
+    description: 'Direction of flex items',
+    table: { category: 'Flexbox' },
+  },
+  gap: {
+    control: { type: 'text' },
+    description: 'Gap between flex items (e.g., "16px", "1rem")',
+    table: { category: 'Flexbox' },
+  },
+
+  // Flex Item Properties
+  alignSelf: {
+    control: { type: 'select' },
+    options: [
+      'auto',
+      'stretch',
+      'flex-start',
+      'center',
+      'flex-end',
+      'baseline',
+      'start',
+      'end',
+    ],
+    description: 'Individual item alignment (overrides alignItems)',
+    table: { category: 'Flexbox' },
+  },
+  flex: {
+    control: { type: 'number' },
+    description: 'Flex grow/shrink/basis shorthand',
+    table: { category: 'Flexbox' },
+  },
+  flexGrow: {
+    control: { type: 'number' },
+    description: 'How much item should grow',
+    table: { category: 'Flexbox' },
+  },
+  flexShrink: {
+    control: { type: 'number' },
+    description: 'How much item should shrink',
+    table: { category: 'Flexbox' },
+  },
+  flexBasis: {
+    control: { type: 'text' },
+    description: 'Initial size before free space is distributed',
+    table: { category: 'Flexbox' },
+  },
+  order: {
+    control: { type: 'number' },
+    description: 'Order of flex item',
+    table: { category: 'Flexbox' },
+  },
+};
+
+// =============================================================================
+// Spacing Args
+// =============================================================================
+
+export const SPACING_ARGS: ArgTypes = {
+  // Margin
+  marginInline: {
+    control: { type: 'text' },
+    description: 'Margin shorthand (e.g., "16px", "1rem 2rem")',
+    table: { category: 'Spacing' },
+  },
+  marginBlock: {
+    control: { type: 'text' },
+    description: 'Bottom margin',
+    table: { category: 'Spacing' },
+  },
+
+  // Padding
+  paddingInline: {
+    control: { type: 'text' },
+    description: 'Padding shorthand (e.g., "16px", "1rem 2rem")',
+    table: { category: 'Spacing' },
+  },
+  paddingBlock: {
+    control: { type: 'text' },
+    description: 'Bottom padding',
+    table: { category: 'Spacing' },
+  },
+};
+
+// =============================================================================
+// Visual Args
+// =============================================================================
+
+export const VISUAL_ARGS: ArgTypes = {
+  // Colors
+  color: {
+    control: { type: 'color' },
+    description: 'Text color',
+    table: { category: 'Visual' },
+  },
+  background: {
+    control: { type: 'text' },
+    description: 'Background shorthand (images, gradients, etc.)',
+    table: { category: 'Visual' },
+  },
+
+  // Borders
+
+  borderRadius: {
+    control: { type: 'text' },
+    description: 'Border radius (e.g., "8px", "50%")',
+    table: { category: 'Visual' },
+  },
+  borderBlockStart: {
+    control: { type: 'text' },
+    description: 'Border block start (e.g., "2px solid blue")',
+    table: { category: 'Visual' },
+  },
+  borderBlockEnd: {
+    control: { type: 'text' },
+    description: 'Border block end (e.g., "2px solid blue")',
+    table: { category: 'Visual' },
+  },
+  borderInlineStart: {
+    control: { type: 'text' },
+    description: 'Border inline start (e.g., "2px solid blue")',
+    table: { category: 'Visual' },
+  },
+  borderInlineEnd: {
+    control: { type: 'text' },
+    description: 'Border inline end (e.g., "2px solid blue")',
+    table: { category: 'Visual' },
+  },
+  outline: {
+    control: { type: 'text' },
+    description: 'Outline (e.g., "2px solid blue")',
+    table: { category: 'Visual' },
+  },
+
+  // Effects
+  opacity: {
+    control: { type: 'range', min: 0, max: 1, step: 0.1 },
+    description: 'Opacity (0-1)',
+    table: { category: 'Visual' },
+  },
+  boxShadow: {
+    control: { type: 'text' },
+    description: 'Box shadow (e.g., "0 2px 4px rgba(0,0,0,0.1)")',
+    table: { category: 'Visual' },
+  },
+  cursor: {
+    control: { type: 'select' },
+    options: [
+      'auto',
+      'pointer',
+      'default',
+      'text',
+      'move',
+      'not-allowed',
+      'grab',
+      'grabbing',
+    ],
+    description: 'Cursor style',
+    table: { category: 'Visual' },
+  },
+};
+
+// =============================================================================
+// Position Args
+// =============================================================================
+
+export const POSITION_ARGS: ArgTypes = {
+  position: {
+    control: { type: 'select' },
+    options: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
+    description: 'Position type',
+    table: { category: 'Position' },
+  },
+  top: {
+    control: { type: 'text' },
+    description: 'Top offset (e.g., "10px", "50%")',
+    table: { category: 'Position' },
+  },
+  right: {
+    control: { type: 'text' },
+    description: 'Right offset',
+    table: { category: 'Position' },
+  },
+  bottom: {
+    control: { type: 'text' },
+    description: 'Bottom offset',
+    table: { category: 'Position' },
+  },
+  left: {
+    control: { type: 'text' },
+    description: 'Left offset',
+    table: { category: 'Position' },
+  },
+  zIndex: {
+    control: { type: 'number' },
+    description: 'Z-index stacking order',
+    table: { category: 'Position' },
+  },
+};
+
+// =============================================================================
+// Transform Args
+// =============================================================================
+
+export const TRANSFORM_ARGS: ArgTypes = {
+  transform: {
+    control: { type: 'text' },
+    description: 'CSS transform (e.g., "rotate(45deg)", "scale(1.2)")',
+    table: { category: 'Transform' },
+  },
+  transformOrigin: {
+    control: { type: 'text' },
+    description: 'Transform origin (e.g., "center", "top left")',
+    table: { category: 'Transform' },
+  },
+  transition: {
+    control: { type: 'text' },
+    description: 'Transition shorthand (e.g., "all 0.3s ease")',
+    table: { category: 'Transform' },
+  },
+  transitionProperty: {
+    control: { type: 'text' },
+    description: 'Properties to transition',
+    table: { category: 'Transform' },
+  },
+  transitionDuration: {
+    control: { type: 'text' },
+    description: 'Transition duration (e.g., "0.3s", "300ms")',
+    table: { category: 'Transform' },
+  },
+  transitionTimingFunction: {
+    control: { type: 'select' },
+    options: ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'],
+    description: 'Transition timing function',
+    table: { category: 'Transform' },
+  },
+  transitionDelay: {
+    control: { type: 'text' },
+    description: 'Transition delay',
+    table: { category: 'Transform' },
+  },
+};
+
+// =============================================================================
+// Interaction Args
+// =============================================================================
+
+export const INTERACTION_ARGS: ArgTypes = {
+  pointerEvents: {
+    control: { type: 'select' },
+    options: [
+      'auto',
+      'none',
+      'visiblePainted',
+      'visibleFill',
+      'visibleStroke',
+      'visible',
+      'painted',
+      'fill',
+      'stroke',
+      'all',
+    ],
+    description: 'Pointer event handling',
+    table: { category: 'Interaction' },
+  },
+};
+
+// =============================================================================
+// Hover Args
+// =============================================================================
+
+export const HOVER_ARGS: ArgTypes = {
+  hoverColor: {
+    control: { type: 'color' },
+    description: 'Text color on hover',
+    table: { category: 'Hover' },
+  },
+  hoverBackground: {
+    control: { type: 'text' },
+    description: 'Background on hover',
+    table: { category: 'Hover' },
+  },
+  hoverOpacity: {
+    control: { type: 'range', min: 0, max: 1, step: 0.1 },
+    description: 'Opacity on hover (0-1)',
+    table: { category: 'Hover' },
+  },
+  hoverTransform: {
+    control: { type: 'text' },
+    description: 'Transform on hover',
+    table: { category: 'Hover' },
+  },
+  hoverBoxShadow: {
+    control: { type: 'text' },
+    description: 'Box shadow on hover',
+    table: { category: 'Hover' },
+  },
+  hoverBorderBlockStart: {
+    control: { type: 'text' },
+    description: 'Border block start on hover',
+    table: { category: 'Hover' },
+  },
+  hoverBorderBlockEnd: {
+    control: { type: 'text' },
+    description: 'Border block end on hover',
+    table: { category: 'Hover' },
+  },
+  hoverBorderInlineStart: {
+    control: { type: 'text' },
+    description: 'Border inline start on hover',
+    table: { category: 'Hover' },
+  },
+  hoverBorderInlineEnd: {
+    control: { type: 'text' },
+    description: 'Border inline end on hover',
+    table: { category: 'Hover' },
+  },
+};
+
+// =============================================================================
+// Accessibility Args
+// =============================================================================
+
+export const ACCESSIBILITY_ARGS: ArgTypes = {
+  role: {
+    control: { type: 'text' },
+    description: 'ARIA role',
+    table: { category: 'Accessibility' },
+  },
+  'aria-label': {
+    control: { type: 'text' },
+    description: 'Accessible label',
+    table: { category: 'Accessibility' },
+  },
+  'aria-labelledby': {
+    control: { type: 'text' },
+    description: 'ID of labeling element',
+    table: { category: 'Accessibility' },
+  },
+  'aria-describedby': {
+    control: { type: 'text' },
+    description: 'ID of describing element',
+    table: { category: 'Accessibility' },
+  },
+  'data-test-id': {
+    control: { type: 'text' },
+    description: 'Test identifier',
+    table: { category: 'Accessibility' },
+  },
+};
+
+// =============================================================================
+// Combined Args Collections
+// =============================================================================
+
+export const STANDARD_ARGS: ArgTypes = {
+  className: {
+    control: { type: 'text' },
+    description: 'CSS class names',
+    table: { category: 'Basic' },
+  },
+  ...VISUAL_ARGS,
+  ...SPACING_ARGS,
+  ...TYPOGRAPHY_ARGS,
+  ...HOVER_ARGS,
+  ...LAYOUT_ARGS,
+  ...FLEXBOX_ARGS,
+  ...POSITION_ARGS,
+  ...TRANSFORM_ARGS,
+  ...INTERACTION_ARGS,
+  ...ACCESSIBILITY_ARGS,
+};