@sanity-labs/ui-poc 0.0.1-alpha.0

package/src/utils/getProps.test.ts

@@ -0,0 +1,103 @@
+import {describe, expect, it} from 'vitest'
+
+import {layoutProps} from '../props/layout'
+import {getProps} from './getProps'
+
+describe('getProps', () => {
+  it('generates className based on an union', () => {
+    const result = getProps({padding: 1}, layoutProps)
+    expect(result.className).toBe('sui-padding-1')
+    expect(result.style).toEqual({})
+  })
+
+  it('does not generate className based on union if value is unsupported', () => {
+    const result = getProps({padding: 10}, layoutProps)
+    expect(result.className).toBe('')
+    expect(result.style).toEqual({})
+  })
+
+  it('merges existing className', () => {
+    const result = getProps({className: 'test', padding: 1}, layoutProps)
+    expect(result.className).toBe('test sui-padding-1')
+    expect(result.style).toEqual({})
+  })
+
+  it('generates className and style based on a string', () => {
+    const result = getProps({width: '100px'}, layoutProps)
+    expect(result.className).toBe('sui-width')
+    expect(result.style).toEqual({'--width': '100px'})
+  })
+
+  it('merges existing style', () => {
+    const result = getProps({width: '100px', style: {display: 'block'}}, layoutProps)
+    expect(result.className).toBe('sui-width')
+    expect(result.style).toEqual({'--width': '100px', 'display': 'block'})
+  })
+
+  it('generates className based on a boolean', () => {
+    const result = getProps({border: true}, layoutProps)
+    expect(result.className).toBe('sui-border')
+    expect(result.style).toEqual({})
+  })
+
+  it('generates className based on a number', () => {
+    const result = getProps({flexGrow: 1.5}, layoutProps)
+    expect(result.className).toBe('sui-flex-grow')
+    expect(result.style).toEqual({'--flex-grow': 1.5})
+  })
+
+  it('generates multiple classNames', () => {
+    const result = getProps({border: true, padding: 1}, layoutProps)
+    expect(result.className).toBe('sui-border sui-padding-1')
+    expect(result.style).toEqual({})
+  })
+
+  it('preserves non-styling props', () => {
+    const result = getProps({padding: 1, as: 'div'}, layoutProps)
+    expect(result.className).toBe('sui-padding-1')
+    expect(result.style).toEqual({})
+    expect(result.as).toEqual('div')
+  })
+
+  it('generates responsive className based on unions', () => {
+    const result = getProps({padding: [1, 2, 3]}, layoutProps)
+    expect(result.className).toBe('sui-padding-1 sui-padding-2-bp-1 sui-padding-3-bp-2')
+    expect(result.style).toEqual({})
+  })
+
+  it('generates responsive className and style based on strings', () => {
+    const result = getProps({width: ['100px', '200px', '300px']}, layoutProps)
+    expect(result.className).toBe('sui-width sui-width-bp-1 sui-width-bp-2')
+    expect(result.style).toEqual({
+      '--width': '100px',
+      '--width-bp-1': '200px',
+      '--width-bp-2': '300px',
+    })
+  })
+
+  it('generates responsive className based on booleans', () => {
+    const result = getProps({border: [true, false, true]}, layoutProps)
+    expect(result.className).toBe('sui-border sui-border-none-bp-1 sui-border-bp-2')
+    expect(result.style).toEqual({})
+  })
+
+  it('does not generate responsive className with more values than breakpoints', () => {
+    const result = getProps({padding: [1, 2, 3, 4, 5, 6, 7, 8]}, layoutProps)
+    expect(result.className).toBe(
+      'sui-padding-1 sui-padding-2-bp-1 sui-padding-3-bp-2 sui-padding-4-bp-3 sui-padding-5-bp-4 sui-padding-6-bp-5 sui-padding-7-bp-6',
+    )
+    expect(result.style).toEqual({})
+  })
+
+  it('generates responsive className with undefined values', () => {
+    const result = getProps({padding: [1, 2, undefined, 3]}, layoutProps)
+    expect(result.className).toBe('sui-padding-1 sui-padding-2-bp-1 sui-padding-3-bp-3')
+    expect(result.style).toEqual({})
+  })
+
+  it('generates responsive className without unsupported values', () => {
+    const result = getProps({padding: [1, 2, 10, 3]}, layoutProps)
+    expect(result.className).toBe('sui-padding-1 sui-padding-2-bp-1 sui-padding-3-bp-3')
+    expect(result.style).toEqual({})
+  })
+})

package/src/utils/getProps.ts

@@ -0,0 +1,74 @@
+import classNames from 'classnames'
+
+import {type PropDef} from '../types/PropDef'
+
+const PREFIX = 'sui'
+const BREAKPOINTS_LENGTH = 7
+
+interface ComponentProps {
+  className?: string
+  style?: React.CSSProperties
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  [key: string]: any
+}
+
+export function getProps<P extends ComponentProps, T extends Record<string, PropDef>>(
+  componentProps?: P,
+  propDefs?: T,
+): ComponentProps {
+  let className = componentProps?.className || ''
+  let style = componentProps?.style || {}
+  const restProps: ComponentProps = {}
+
+  for (const key in componentProps) {
+    if (!propDefs?.[key] || !propDefs?.[key].className) {
+      restProps[key] = componentProps[key]
+      continue
+    }
+
+    if (Array.isArray(componentProps[key])) {
+      for (
+        let i = 0, len = Math.min(componentProps[key].length, BREAKPOINTS_LENGTH);
+        i < len;
+        i++
+      ) {
+        className = classNames(className, getClassName(componentProps[key][i], propDefs[key], i))
+        style = {...style, ...getStyle(componentProps[key][i], propDefs[key], i)}
+      }
+    } else {
+      className = classNames(className, getClassName(componentProps[key], propDefs[key]))
+      style = {...style, ...getStyle(componentProps[key], propDefs[key])}
+    }
+  }
+
+  return {...restProps, className, style}
+}
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+function getClassName(prop: any, propDef: PropDef, bp?: number) {
+  if (propDef.type === 'union' && propDef.values?.includes(prop)) {
+    /* Note: This may need updating depending on the final CSS classname formatting */
+    return `${PREFIX}-${propDef.className}${typeof prop === 'string' ? `-${prop}` : prop}${bp ? `-bp-${bp}` : ''}`
+  }
+
+  if (propDef.type === 'string' || propDef.type === 'number') {
+    return `${PREFIX}-${propDef.className}${bp ? `-bp-${bp}` : ''}`
+  }
+
+  if (propDef.type === 'boolean') {
+    return `${PREFIX}-${prop ? propDef.className : propDef.inverse}${bp ? `-bp-${bp}` : ''}`
+  }
+
+  return ''
+}
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+function getStyle(prop: any, propDef: PropDef, bp?: number) {
+  if (propDef.type === 'string' || propDef.type === 'number') {
+    return {
+      [`${propDef.variable}${bp ? `-bp-${bp}` : ''}`]: prop,
+    }
+  }
+
+  return {}
+}