Add all units, add a few ranges

components-ai · Apr 30, 2022 · 32d67fb · 32d67fb
1 parent 81fdc95
commit 32d67fb
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 10 deletions.
diff --git a/.changeset/red-berries-sparkle.md b/.changeset/red-berries-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Add all units to length input, begin incorporating new ranges
diff --git a/packages/gui/src/data/properties.ts b/packages/gui/src/data/properties.ts
@@ -30,6 +30,7 @@ import ImageSourcePicker from '../components/inputs/ImageSource/picker'
 import { stringifyImageSource } from '../components/inputs/ImageSource/stringify'
 import { allProperties } from './css-properties'
 import { camelCase, uniqBy } from 'lodash-es'
+import { positiveRanges, UnitRanges } from './ranges'
 
 type PropertyData = {
   type: string | ComponentType<any>
@@ -42,8 +43,6 @@ type PropertyData = {
   label?: string
 }
 
-type UnitRanges = Record<string, [number, number]>
-
 export const properties: Record<string, PropertyData> = {
   accentColor: {
     type: 'color',
@@ -202,12 +201,7 @@ export const properties: Record<string, PropertyData> = {
     type: 'length',
     number: true,
     percentage: true,
-    range: {
-      [AbsoluteLengthUnits.Px]: [0, 128],
-      [FontRelativeLengthUnits.Em]: [0, 8],
-      [FontRelativeLengthUnits.Rem]: [0, 8],
-      [PercentageLengthUnits.Pct]: [0, 100],
-    },
+    range: positiveRanges(),
   },
   borderImageSource: {
     type: ImageSourcePicker,
@@ -238,10 +232,10 @@ export const properties: Record<string, PropertyData> = {
     type: 'length',
     percentage: true,
     range: {
+      ...positiveRanges(),
       [AbsoluteLengthUnits.Px]: [0, Infinity],
       [FontRelativeLengthUnits.Em]: [0, 64],
       [FontRelativeLengthUnits.Rem]: [0, 64],
-      [PercentageLengthUnits.Pct]: [0, 100],
     },
   },
   backgroundRepeat: {

diff --git a/packages/gui/src/data/ranges.ts b/packages/gui/src/data/ranges.ts
@@ -0,0 +1,27 @@
+import {
+  AbsoluteLengthUnits,
+  FontRelativeLengthUnits,
+  PercentageLengthUnits,
+  ViewportPercentageLengthUnits,
+} from '../types/css'
+
+export type UnitRanges = Record<string, [number, number]>
+
+// TODO: Make this take a px for min/max and derive other ranges
+export const positiveRanges = (): UnitRanges => {
+  return {
+    [AbsoluteLengthUnits.Px]: [0, 128],
+    [AbsoluteLengthUnits.Cm]: [0, 32],
+    [AbsoluteLengthUnits.Mm]: [0, 128],
+    [AbsoluteLengthUnits.In]: [0, 32],
+    [AbsoluteLengthUnits.Pc]: [0, 32],
+    [AbsoluteLengthUnits.Pt]: [0, 2056],
+    [FontRelativeLengthUnits.Em]: [0, 8],
+    [FontRelativeLengthUnits.Rem]: [0, 8],
+    [ViewportPercentageLengthUnits.Vh]: [0, 128],
+    [ViewportPercentageLengthUnits.Vw]: [0, 128],
+    [ViewportPercentageLengthUnits.VMin]: [0, 128],
+    [ViewportPercentageLengthUnits.VMax]: [0, 128],
+    [PercentageLengthUnits.Pct]: [0, 100],
+  }
+}
diff --git a/packages/gui/src/types/css.ts b/packages/gui/src/types/css.ts
@@ -45,7 +45,22 @@ export const enum KeywordUnits {
 // Only use a subset for now to keep things simpler
 export type LengthPercentageUnit = LengthUnit | PercentageLengthUnits.Pct
 
-export const LENGTH_UNITS = ['em', 'rem', 'px'] as const
+export const LENGTH_UNITS = [
+  'em',
+  'rem',
+  'px',
+  'ch',
+  'ex',
+  'cm',
+  'mm',
+  'in',
+  'pc',
+  'pt',
+  'vh',
+  'vw',
+  'vmin',
+  'vmax',
+] as const
 export type LengthUnit = typeof LENGTH_UNITS[number]
 
 export const TIME_UNITS = ['ms', 's'] as const