@stack-spot/citric-react 0.1.0

package/src/utils/css.ts

@@ -0,0 +1,106 @@
+import { ColorKey, listToClass, theme } from '@stack-spot/portal-theme'
+import { SpacingKey } from '@stack-spot/portal-theme/dist/definition'
+import { isNil, omitBy } from 'lodash'
+import { TextAppearance, WithStyleShortcuts } from '../types'
+
+export function colorNameToColorVariable(name: ColorKey): string {
+  return `var(--${name.replaceAll('.', '-')})`
+}
+
+export function applyColor(style: React.CSSProperties | undefined, color: ColorKey | undefined) {
+  return color ? { ...style, color: colorNameToColorVariable(color) } : style
+}
+
+export function textAppearanceToClass(appearance: TextAppearance): string {
+  return `text-${appearance}`
+}
+
+export function applyTextAppearance(className: string | undefined, appearance: TextAppearance | undefined) {
+  return listToClass([className, appearance ? textAppearanceToClass(appearance) : undefined])
+}
+
+export function applyCSSVariable(style: React.CSSProperties | undefined, name: string, value: any) {
+  if (isNil(value)) return style
+  return { ...style, [`--${name}`]: `${value}` } as React.CSSProperties
+}
+
+function spacingToStyle(spacing: SpacingKey | SpacingKey[] | string | undefined) {
+  if (typeof spacing === 'string') return spacing
+  if (typeof spacing === 'number') return theme.spacing[spacing]
+  return spacing?.map(s => theme.spacing[s]).join(' ')
+}
+
+export function applyStyles(
+  {
+    bg,
+    fg,
+    border,
+    radius,
+    justifyContent,
+    alignItems,
+    flex,
+    gap,
+    m,
+    mt,
+    mb,
+    ml,
+    mr,
+    p,
+    pt,
+    pb,
+    pl,
+    pr,
+    w,
+    h,
+    style,
+    ...props
+  }: WithStyleShortcuts & Record<string, any>,
+) {
+  const [bgColor, bgLevel] = bg?.split('.') ?? []
+  const [fgColor, fgLevel] = fg?.split('.') ?? []
+  const [borderColor, borderLevel] = border?.split('.') ?? []
+  const borderColorVar = (theme.color as any)[borderColor]?.[borderLevel]
+  const newStyle: React.CSSProperties = {
+    backgroundColor: (theme.color as any)[bgColor]?.[bgLevel],
+    color: (theme.color as any)[fgColor]?.[fgLevel],
+    border: borderColorVar ? `1px solid ${borderColorVar}` : undefined,
+    borderRadius: radius ? theme.radius[radius] : undefined,
+    justifyContent,
+    alignItems,
+    flex,
+    gap,
+    margin: spacingToStyle(m),
+    marginTop: spacingToStyle(mt),
+    marginBottom: spacingToStyle(mb),
+    marginLeft: spacingToStyle(ml),
+    marginRight: spacingToStyle(mr),
+    padding: spacingToStyle(p),
+    paddingTop: spacingToStyle(pt),
+    paddingBottom: spacingToStyle(pb),
+    paddingLeft: spacingToStyle(pl),
+    paddingRight: spacingToStyle(pr),
+    width: w,
+    height: h,
+    ...style,
+  }
+  return { style: omitBy(newStyle, v => v === undefined), ...props }
+}
+
+// AI generated
+export function styleObjectToCssString(styleObject: React.CSSProperties = {}) {
+  return Object.entries(styleObject)
+    .map(([property, value]) => {
+      // Convert camelCase to kebab-case
+      const cssProperty = property.replace(/([A-Z])/g, "-$1").toLowerCase()
+
+      // Append 'px' to numeric values for common dimension properties
+      const cssValue =
+        typeof value === "number" &&
+        !['zIndex', 'opacity', 'fontWeight'].includes(property)
+          ? `${value}px`
+          : value
+
+      return `${cssProperty}: ${cssValue}`
+    })
+    .join("; ")
+}

package/src/utils/options.ts

@@ -0,0 +1,7 @@
+export function defaultRenderLabel(option: any) {
+  return `${option}`
+}
+
+export function defaultRenderKey(option: any) {
+  return ['string', 'number'].includes(typeof option) ? `${option}` : undefined
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "paths": {
+      "css/*": ["../css/*"]
+    }
+  }
+}