Merge pull request #550 from components-ai/scale-select-labels

Display theme value for scales

Author: johno

.changeset/orange-terms-doubt.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Display theme value for scales

packages/gui/src/components/inputs/SelectInput.tsx

@@ -9,9 +9,13 @@ interface Props<T extends string> {
   options: readonly T[]
   ruleset?: any
   property?: string
+  decorateText?(text: T): string
 }
 // A select input with a label
-export function SelectInput<T extends string>(props: Props<T>) {
+export function SelectInput<T extends string>({
+  decorateText,
+  ...props
+}: Props<T>) {
   const { value, onChange, options = [] } = props
 
   return (
@@ -34,7 +38,9 @@ export function SelectInput<T extends string>(props: Props<T>) {
             return (
               <Select.Item key={v} value={v}>
                 <Select.ItemIndicator />
-                <Select.ItemText>{v}</Select.ItemText>
+                <Select.ItemText>
+                  {decorateText ? decorateText(v) : v}
+                </Select.ItemText>
               </Select.Item>
             )
           })}

packages/gui/src/components/schemas/theme.tsx

@@ -3,6 +3,7 @@ import { get, range } from 'lodash-es'
 import { ThemeNamedValue, ThemeValue } from '../../types/css'
 import { SelectInput } from '../inputs/SelectInput'
 import { DataTypeSchema } from './types'
+import { joinPath } from '../providers/util'
 
 export function themeScale(path: string): DataTypeSchema<ThemeValue> {
   return {
@@ -16,11 +17,15 @@ export function themeScale(path: string): DataTypeSchema<ThemeValue> {
       )
     }) as any,
     stringify(value, theme) {
-      return get(theme, `${value.path}.${value.index}`)
+      return get(theme, joinPath(value.path, value.index))
     },
     inlineInput(props) {
       const theme = useTheme()
       const numOptions = get(theme, path)?.length || 0
+      const decorateText = (step: string) => {
+        const value = get(theme, joinPath(path, step))
+        return `${step} - ${value}`
+      }
       return (
         <SelectInput
           label=""
@@ -32,6 +37,7 @@ export function themeScale(path: string): DataTypeSchema<ThemeValue> {
             })
           }
           options={range(0, numOptions).map((x) => x.toString())}
+          decorateText={decorateText}
         />
       )
     },