diff --git a/apps/docs/pages/examples/typography.tsx b/apps/docs/pages/examples/typography.tsx
index 5977840a..29bb9666 100644
--- a/apps/docs/pages/examples/typography.tsx
+++ b/apps/docs/pages/examples/typography.tsx
@@ -2,39 +2,35 @@ import { useState } from 'react'
import Link from 'next/link'
import { Editor, Inputs, styled, codegen } from '@compai/css-gui'
import { defaultTheme } from '../../data/default-theme'
-import { Container } from '../../components/Container'
const initialStyles = {
- color: 'text',
- backgroundColor: 'background',
+ color: { type: 'theme', path: 'text' },
+ backgroundColor: { type: 'theme', path: 'background' },
fontFamily: 'Recursive',
fontSize: {
value: 3,
unit: 'rem',
},
- letterSpacing: {
- value: 'initial',
- unit: 'keyword',
- },
+ letterSpacing: 'initial',
lineHeight: {
- value: '1.5',
+ value: 1.5,
unit: 'number',
},
- textDecorationColor: 'primary',
+ textDecorationColor: { type: 'theme', path: 'primary' },
textDecorationThickness: {
value: 0,
unit: 'px',
},
textDecorationLine: 'none',
- textDecorationStyle: 'none',
+ textDecorationStyle: 'solid',
width: {
value: 100,
- unit: '%'
+ unit: '%',
},
maxWidth: {
value: 42,
- unit: 'em'
- }
+ unit: 'em',
+ },
}
export default function Typography() {
@@ -47,8 +43,15 @@ export default function Typography() {
display: 'flex',
}}
>
-
-
-
-
+
+
CSS GUI
v{pkg.version}
- A composable, extensible, and themeable controls for visually editing CSS.
+ A composable, extensible, and themeable controls for visually editing
+ CSS.
-
- Everyone should be able to explore the creative potential of CSS.
- This project is a growing set of parametric controls for rapidly editing CSS properties.
- Designed for composability, mix and match any combination of properties
- to create custom components and tap into the vast and beautiful world of CSS.
-
+
+ Everyone should be able to explore the creative potential of CSS. This
+ project is a growing set of parametric controls for rapidly editing
+ CSS properties. Designed for composability, mix and match any
+ combination of properties to create custom components and tap into the
+ vast and beautiful world of CSS.
+
Install
Demo
-
-
+
Codesandbox
- Features
-
- - Controls for 280 CSS properties
- - +1000 Google Fonts
- - Full variable fonts support
- - Responsive value arrays
- - Theme aware inputs
- - Scrubbable number inputs
- - Supports all CSS units
- - Advanced layer based gradient editor
- - Nested elements
- - Cubic bezier editor for custom easings
- - Style pseudo-elements and pseudo-classes
- - Completely open source
-
+ Features
+
+ - Controls for 280 CSS properties
+ - +1000 Google Fonts
+ - Full variable fonts support
+ - Responsive value arrays
+ - Theme aware inputs
+ - Scrubbable number inputs
+ - Supports all CSS units
+ - Advanced layer based gradient editor
+ - Nested elements
+ - Cubic bezier editor for custom easings
+ - Style pseudo-elements and pseudo-classes
+ - Completely open source
+
-
+
@@ -119,9 +141,8 @@ export default function Docs() {
-
-
+
-
- View more properties
-
+ View more properties
-
+ {/*
Composable
-
- Mix and match controls to create your own custom component design interfaces.
+
+ Mix and match controls to create your own custom component design
+ interfaces.
-
)
}
diff --git a/apps/docs/pages/html-editor.tsx b/apps/docs/pages/html-editor.tsx
index a048cb36..79ffd9b4 100644
--- a/apps/docs/pages/html-editor.tsx
+++ b/apps/docs/pages/html-editor.tsx
@@ -1,243 +1,39 @@
import { HtmlEditor, HtmlRenderer, HtmlEditorProvider } from '@compai/css-gui'
import { useState } from 'react'
-
-const initialValue: any = {
- tagName: 'div',
- attributes: { className: 'section' },
- style: {
- paddingTop: {
- value: 128,
- unit: 'px',
- },
- paddingBottom: {
- value: 128,
- unit: 'px',
- },
- paddingLeft: {
- value: 64,
- unit: 'px',
- },
- paddingRight: {
- value: 64,
- unit: 'px',
- },
- },
- children: [
- {
- tagName: 'h1',
- attributes: {},
- style: {
- color: 'primary',
- fontSize: [
- {
- value: 4,
- unit: 'rem',
- },
- {
- value: 6,
- unit: 'rem',
- },
- {
- value: 10,
- unit: 'rem',
- },
- ],
- fontWeight: 900,
- fontFamily: 'Inter',
- letterSpacing: { value: -8, unit: 'px' },
- marginTop: {
- value: 0,
- unit: 'px',
- },
- marginBottom: {
- value: 0,
- unit: 'px',
- },
- lineHeight: {
- value: 1.25,
- unit: 'number',
- },
- },
- children: [{ type: 'text', value: 'CSS.GUI' }],
- },
- {
- tagName: 'h2',
- attributes: {},
- style: {
- marginBottom: {
- value: 0,
- unit: 'px',
- },
- fontSize: {
- value: 48,
- unit: 'px',
- },
- maxWidth: {
- value: 40,
- unit: 'em',
- },
- lineHeight: {
- value: 1.25,
- unit: 'number',
- },
- },
- children: [
- {
- type: 'text',
- value:
- 'Quickly build components with custom styling panels. No coding required.',
- },
- ],
- },
- {
- tagName: 'p',
- attributes: {},
- style: {
- marginBottom: {
- value: 96,
- unit: 'px',
- },
- fontSize: {
- value: 20,
- unit: 'px',
- },
- },
- children: [
- {
- type: 'text',
- value: 'Click anywhere on the canvas to start. Go ahead. Click away.',
- },
- ],
- },
- {
- attributes: {
- href: '#0',
- },
- style: {
- paddingTop: {
- value: 16,
- unit: 'px',
- },
- paddingBottom: {
- value: 16,
- unit: 'px',
- },
- paddingLeft: {
- value: 32,
- unit: 'px',
- },
- paddingRight: {
- value: 32,
- unit: 'px',
- },
- textDecorationColor: 'transparent',
- textDecorationThickness: { value: 0, unit: 'px' },
- textDecorationStyle: 'none',
- textDecorationLine: 'none',
- color: 'background',
- backgroundColor: 'text',
- borderWidth: {
- value: 2,
- unit: 'px',
- },
- borderStyle: 'solid',
- borderColor: 'text',
- marginRight: {
- value: 8,
- unit: 'px',
- },
- borderRadius: {
- value: 6,
- unit: 'px',
- },
- whiteSpace: 'nowrap',
- ':hover': {
- backgroundColor: 'primary',
- borderColor: 'primary',
- },
- },
- tagName: 'a',
- children: [
- {
- type: 'text',
- value: 'Primary CTA',
- },
- ],
- },
- {
- attributes: { href: 'https://components.ai' },
- style: {
- paddingTop: {
- value: 16,
- unit: 'px',
- },
- paddingBottom: {
- value: 16,
- unit: 'px',
- },
- paddingLeft: {
- value: 32,
- unit: 'px',
- },
- paddingRight: {
- value: 32,
- unit: 'px',
- },
- textDecorationColor: 'transparent',
- textDecorationThickness: { value: 0, unit: 'px' },
- textDecorationStyle: 'none',
- textDecorationLine: 'none',
- color: 'text',
- whiteSpace: 'nowrap',
- borderWidth: {
- value: 2,
- unit: 'px',
- },
- borderStyle: 'solid',
- borderColor: 'currentColor',
- borderRadius: {
- value: 6,
- unit: 'px',
- },
- ':hover': {
- color: 'primary',
- },
- },
- tagName: 'a',
- children: [
- {
- type: 'text',
- value: 'Secondary link',
- },
- ],
- },
- ],
-}
+import { defaultTheme } from '../data/default-theme'
+import { initialValue } from '../data/initial-html-editor-data'
export default function HtmlEditorExample() {
const [html, setHtml] = useState(initialValue)
return (
-
+
-
+
-
diff --git a/apps/docs/pages/inputs/responsive.mdx b/apps/docs/pages/inputs/responsive.mdx
deleted file mode 100644
index 3f688426..00000000
--- a/apps/docs/pages/inputs/responsive.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { FirstParagraph } from '../../components/FirstParagraph'
-import { ResponsiveExample } from '../../components/examples/Responsive'
-import { Container } from '../../components/Container'
-
-
-
-# Responsive Input
-
-
- A responsive utility for creating dynamic inputs based on breakpoints.
-
-
-Use this component to expose controls that target breakpoints or a single, global
-value. Responsive outputs contain an array of values based on the number of breakpoints
-in the theme.
-
-## Example
-
-
-
-## Usage
-
-```ts
-import { useState } from 'react'
-import {
- Length,
- ResponsiveLength,
- LengthInput,
- ResponsiveInput,
-} from '@compai/css-gui'
-
-const DEFAULT_VALUE = {
- value: 16,
- unit: 'px',
-}
-export const ResponsiveExample = () => {
- const [value, setValue] = useState(DEFAULT_VALUE)
-
- return (
- <>
-
- {JSON.stringify(value, null, 2)}
-
- )
-}
-```
-
-
diff --git a/apps/docs/pages/library/card.tsx b/apps/docs/pages/library/card.tsx
index 6cf123df..0b29287f 100644
--- a/apps/docs/pages/library/card.tsx
+++ b/apps/docs/pages/library/card.tsx
@@ -14,21 +14,24 @@ const initialValue: any = {
display: 'flex',
alignItems: 'stretch',
flexDirection: 'column',
- textDecoration: 'none',
- overflow: 'hidden',
+ // textDecoration: 'none',
+ overflow: ['hidden'],
height: 'auto',
},
children: [
{
tagName: 'section',
style: {
- overflow: 'hidden',
+ overflow: ['hidden'],
maxHeight: { value: 40, unit: 'vh' },
- minHeight: [
- { value: 160, unit: 'px' },
- { value: 256, unit: 'px' },
- { value: 256, unit: 'px' },
- ],
+ minHeight: {
+ type: 'responsive',
+ values: [
+ { value: 160, unit: 'px' },
+ { value: 256, unit: 'px' },
+ { value: 256, unit: 'px' },
+ ],
+ },
},
children: [
{
@@ -38,7 +41,7 @@ const initialValue: any = {
display: 'block',
},
attributes: {
- src: 'https://source.unsplash.com/random',
+ src: 'https://dlu344star2bj.cloudfront.net/i/3090-0015.jpg',
},
children: [],
},
@@ -59,12 +62,15 @@ const initialValue: any = {
style: {
marginTop: { value: 0, unit: 'px' },
marginBottom: { value: 0, unit: 'px' },
- fontWeight: 900,
- fontSize: [
- { value: 24, unit: 'px' },
- { value: 32, unit: 'px' },
- { value: 48, unit: 'px' },
- ],
+ fontWeight: '900',
+ fontSize: {
+ type: 'responsive',
+ values: [
+ { value: 24, unit: 'px' },
+ { value: 32, unit: 'px' },
+ { value: 48, unit: 'px' },
+ ],
+ },
lineHeight: { value: 1.25, unit: 'number' },
},
children: ['Hello, world!'],
@@ -74,13 +80,16 @@ const initialValue: any = {
style: {
marginTop: { value: 8, unit: 'px' },
marginBottom: { value: 0, unit: 'px' },
- fontWeight: 600,
- opacity: 0.7,
- fontSize: [
- { value: 14, unit: 'px' },
- { value: 16, unit: 'px' },
- { value: 20, unit: 'px' },
- ],
+ fontWeight: '600',
+ opacity: { value: 0.7, unit: '%' },
+ fontSize: {
+ type: 'responsive',
+ values: [
+ { value: 14, unit: 'px' },
+ { value: 16, unit: 'px' },
+ { value: 20, unit: 'px' },
+ ],
+ },
lineHeight: { value: 1.25, unit: 'number' },
},
children: ['This is a subtitle'],
@@ -88,11 +97,14 @@ const initialValue: any = {
{
tagName: 'p',
style: {
- fontSize: [
- { value: 14, unit: 'px' },
- { value: 16, unit: 'px' },
- { value: 16, unit: 'px' },
- ],
+ fontSize: {
+ type: 'responsive',
+ values: [
+ { value: 14, unit: 'px' },
+ { value: 16, unit: 'px' },
+ { value: 16, unit: 'px' },
+ ],
+ },
lineHeight: { value: 1.5, unit: 'number' },
marginTop: { value: 16, unit: 'px' },
marginBottom: { value: 24, unit: 'px' },
@@ -115,19 +127,22 @@ const initialValue: any = {
backgroundColor: 'tomato',
color: '#fff',
display: 'inline-flex',
- fontSize: [
- { value: 14, unit: 'px' },
- { value: 16, unit: 'px' },
- { value: 16, unit: 'px' },
- ],
- fontWeight: 800,
+ fontSize: {
+ type: 'responsive',
+ values: [
+ { value: 14, unit: 'px' },
+ { value: 16, unit: 'px' },
+ { value: 16, unit: 'px' },
+ ],
+ },
+ fontWeight: '800',
justifyContent: 'center',
maxWidth: {
value: 100,
unit: 'px',
},
textAlign: 'center',
- textDecoration: 'none',
+ // textDecoration: 'none',
whiteSpace: 'nowrap',
paddingLeft: { value: 16, unit: 'px' },
paddingRight: { value: 16, unit: 'px' },
@@ -148,8 +163,8 @@ export default function HtmlEditorExample() {
return (
-
-
+
+
diff --git a/apps/docs/pages/properties/index.tsx b/apps/docs/pages/properties/index.tsx
index 9075bad0..0d1b97e5 100644
--- a/apps/docs/pages/properties/index.tsx
+++ b/apps/docs/pages/properties/index.tsx
@@ -71,7 +71,7 @@ export default function Docs() {
diff --git a/package.json b/package.json
index 74aaa70e..7a7c1bd9 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
},
"engines": {
"npm": ">=7.0.0",
- "node": ">=14.0.0"
+ "node": ">=24.0.0"
},
"prettier": {
"singleQuote": true,
@@ -31,10 +31,10 @@
},
"packageManager": "yarn@1.22.18",
"dependencies": {
- "@changesets/cli": "^2.22.0",
+ "@changesets/cli": "^2.26.0",
"@manypkg/cli": "^0.19.1",
- "prettier": "^2.6.2",
- "tsup": "^5.12.6",
- "turbo": "^1.2.6"
+ "prettier": "^2.7.1",
+ "tsup": "^6.2.3",
+ "turbo": "^1.3.1"
}
}
diff --git a/packages/config/package.json b/packages/config/package.json
index d599929c..f8db14b5 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -8,8 +8,8 @@
"eslint-preset.js"
],
"dependencies": {
- "eslint-config-next": "^12.1.5",
+ "eslint-config-next": "^13.2.3",
"eslint-config-prettier": "^8.5.0",
- "eslint-plugin-react": "7.29.4"
+ "eslint-plugin-react": "7.30.0"
}
}
diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md
index fb1f823b..ed89bf96 100644
--- a/packages/gui/CHANGELOG.md
+++ b/packages/gui/CHANGELOG.md
@@ -1,5 +1,979 @@
# @compai/css-gui
+## 0.0.247
+
+### Patch Changes
+
+- 2c1bbde9: Bump @radix-ui/react-dropdown-menu from 1.0.0 to 2.0.3
+
+## 0.0.246
+
+### Patch Changes
+
+- 95540fca: Adds Astro support for export
+
+## 0.0.245
+
+### Patch Changes
+
+- debd3b89: Properly handle pseudos when stringifying CSS object
+
+## 0.0.244
+
+### Patch Changes
+
+- d543091c: Changes color to be more accessible in editor
+- fd7865c8: Fixes typo
+
+## 0.0.243
+
+### Patch Changes
+
+- bb2079e3: New design styles
+- e116b855: Ensure theme is passed to style element stringification
+
+## 0.0.242
+
+### Patch Changes
+
+- 1f758bed: Fixes to two small design bugs
+
+## 0.0.241
+
+### Patch Changes
+
+- 4be2253e: Copy over emotion's hash code, faux ESM makes it tricky to use as dep
+
+## 0.0.240
+
+### Patch Changes
+
+- 3d312157: Add style element to enhance export
+
+## 0.0.239
+
+### Patch Changes
+
+- 8db98565: Use style string and don't destructure slots as attrs
+
+## 0.0.238
+
+### Patch Changes
+
+- 700259d1: Make sure all code generators are passed theme in export
+
+## 0.0.237
+
+### Patch Changes
+
+- 263b9b23: Move getAttrSyntax to util
+
+## 0.0.236
+
+### Patch Changes
+
+- 38996b16: Include attributes in enhance export
+
+## 0.0.235
+
+### Patch Changes
+
+- b0c58514: Implement first pass of enhance output
+
+## 0.0.234
+
+### Patch Changes
+
+- 63cc6ff4: Add initial support for selector functions
+
+## 0.0.233
+
+### Patch Changes
+
+- adea2803: Add filter element attributes
+
+## 0.0.232
+
+### Patch Changes
+
+- 08e07226: Bump @radix-ui/react-slider from 0.1.4 to 1.0.0
+- d48ae3bf: Bump copy-to-clipboard from 3.3.1 to 3.3.2
+
+## 0.0.231
+
+### Patch Changes
+
+- 294beec5: Adds new svg elements and attributes
+
+## 0.0.230
+
+### Patch Changes
+
+- 0846769d: Fix color label overflow
+
+## 0.0.229
+
+### Patch Changes
+
+- 5770da69: Improve tap targets and spacing
+
+## 0.0.228
+
+### Patch Changes
+
+- 312acb38: Apply styles to text parent
+
+## 0.0.227
+
+### Patch Changes
+
+- 8d695237: Ignore colors with alpha in regen
+
+## 0.0.226
+
+### Patch Changes
+
+- 98b7d345: Fix regen for theme values
+
+## 0.0.225
+
+### Patch Changes
+
+- 603fbfed: Add an empty text node to prose elements
+
+## 0.0.224
+
+### Patch Changes
+
+- 859ef100: Fix inconsistent typefaces
+- d6ddbe3b: Send along options to stringify in tuple schema
+
+## 0.0.223
+
+### Patch Changes
+
+- 049630e1: Add repeat keywords to count
+
+## 0.0.222
+
+### Patch Changes
+
+- 7f4f6573: Add component swapping
+
+## 0.0.221
+
+### Patch Changes
+
+- d1039b08: Move event propagation call
+
+## 0.0.220
+
+### Patch Changes
+
+- c9b6365d: Disable browser label/input selection handling in the canvas
+
+## 0.0.219
+
+### Patch Changes
+
+- ff2f1dcd: A small patch to remove autocorrect from property input control
+
+## 0.0.218
+
+### Patch Changes
+
+- 794eab84: Make font size consistent in DOM tree
+
+## 0.0.217
+
+### Patch Changes
+
+- eb553037: Improve node type swapping
+
+## 0.0.216
+
+### Patch Changes
+
+- 354f899f: Implement inline insert for components/slots
+
+## 0.0.215
+
+### Patch Changes
+
+- 565f3ed3: Maintain component children
+
+## 0.0.214
+
+### Patch Changes
+
+- 74ac4a3e: Improve adding box shadow layers
+
+## 0.0.213
+
+### Patch Changes
+
+- 8114b4c4: Improve color display
+
+## 0.0.212
+
+### Patch Changes
+
+- 3f04e7ac: Only wrap imports when there's more than one top level element
+
+## 0.0.211
+
+### Patch Changes
+
+- 790afdba: Keep component name in combobox when selected
+
+## 0.0.210
+
+### Patch Changes
+
+- 9628acc5: Keep props around when swapping between components
+
+## 0.0.209
+
+### Patch Changes
+
+- 50d060da: Adds new properties and svg elements
+
+## 0.0.208
+
+### Patch Changes
+
+- b5dc91a7: Make sure tag name combobox syncs
+
+## 0.0.207
+
+### Patch Changes
+
+- c53ca4bb: Improve enter handling for combobox
+
+## 0.0.206
+
+### Patch Changes
+
+- 2908cba5: Make sure default value is passed to base schema
+
+## 0.0.205
+
+### Patch Changes
+
+- 635d59de: Fix palette picker z index
+
+## 0.0.204
+
+### Patch Changes
+
+- f0114ae9: Fix color picker style bug
+
+## 0.0.203
+
+### Patch Changes
+
+- 08f99dbb: Fixes typo
+- a90031f8: Visual changes to editor controls
+
+## 0.0.202
+
+### Patch Changes
+
+- f7c41754: Bump @radix-ui/react-switch from 0.1.5 to 1.0.0
+- 5aa3cbec: Bump @radix-ui/react-dropdown-menu from 0.1.6 to 1.0.0
+- 473ba671: Bump @radix-ui/react-popover from 0.1.6 to 1.0.0
+
+## 0.0.201
+
+### Patch Changes
+
+- afcce3ed: Improve control styles
+
+## 0.0.200
+
+### Patch Changes
+
+- 58c2c3fa: Display theme value for scales
+
+## 0.0.199
+
+### Patch Changes
+
+- af5a6cf9: Add component name to dropdown in editor
+
+## 0.0.198
+
+### Patch Changes
+
+- f464b9d0: Bump theme-ui from 0.14.6 to 0.14.7
+
+## 0.0.197
+
+### Patch Changes
+
+- 5cb0fcf5: Show function names in input
+
+## 0.0.196
+
+### Patch Changes
+
+- a3654f79: Add theme support in gradient
+
+## 0.0.195
+
+### Patch Changes
+
+- 5a373ac3: Add support for box shadows in theme
+
+## 0.0.194
+
+### Patch Changes
+
+- 9784d96d: Add changeset
+
+## 0.0.193
+
+### Patch Changes
+
+- b5c54ad8: Make border radius theme aware
+
+## 0.0.192
+
+### Patch Changes
+
+- 82aafd34: Add random image to image when added to canvas
+
+## 0.0.191
+
+### Patch Changes
+
+- 1fd09f49: Improve font family theme integration
+
+## 0.0.190
+
+### Patch Changes
+
+- 684e2f65: Fix gradient stops adding
+
+## 0.0.189
+
+### Patch Changes
+
+- 05f3157a: Add component/slot to layers panel
+
+## 0.0.188
+
+### Patch Changes
+
+- 130847c4: Fix bug with inline text editing
+
+## 0.0.187
+
+### Patch Changes
+
+- db4fa469: Implement inline text editing
+
+## 0.0.186
+
+### Patch Changes
+
+- 6e4d520b: Theme handling improvements, remove duplicate UI
+
+## 0.0.185
+
+### Patch Changes
+
+- d9ff3da0: Properly handle contrast for all properties
+
+## 0.0.184
+
+### Patch Changes
+
+- 304e6671: Improve node adding and editing
+
+## 0.0.183
+
+### Patch Changes
+
+- 49aae809: Constrain to accessible contrasts when generating colors
+
+## 0.0.182
+
+### Patch Changes
+
+- 2351ca88: Handle textarea children
+
+## 0.0.181
+
+### Patch Changes
+
+- 1a4562c9: Refactor fieldset passing
+
+## 0.0.180
+
+### Patch Changes
+
+- d7124e11: Add draggable reordering to field array inputs
+
+## 0.0.179
+
+### Patch Changes
+
+- 5820a1bb: Fix node type select
+
+## 0.0.178
+
+### Patch Changes
+
+- bb72987d: Ignore style attribute on import for now
+
+## 0.0.177
+
+### Patch Changes
+
+- 474882f6: Improve nested component selection
+
+## 0.0.176
+
+### Patch Changes
+
+- ebde90d6: Improve HTML node imports
+
+## 0.0.175
+
+### Patch Changes
+
+- cc3bed1f: Improve fieldset fuzzy search
+
+## 0.0.174
+
+### Patch Changes
+
+- 92807f4a: Add support for nested elements
+
+## 0.0.173
+
+### Patch Changes
+
+- 9b88bf0d: Implement HTML and Markdown imports for DOM structure
+
+## 0.0.172
+
+### Patch Changes
+
+- 3930a3bc: Improve element selection
+
+## 0.0.171
+
+### Patch Changes
+
+- 56cacc60: Fix transforms
+
+## 0.0.170
+
+### Patch Changes
+
+- ff1d652e: Ensure that theme colors are generated
+
+## 0.0.169
+
+### Patch Changes
+
+- 122bd3ed: Enable selection for nested components
+
+## 0.0.168
+
+### Patch Changes
+
+- b6d1c2fe: Internal refactor of HTML renderers and editors
+
+## 0.0.167
+
+### Patch Changes
+
+- e2bd4fb8: Internal refactor for canvas prop instantiation
+
+## 0.0.166
+
+### Patch Changes
+
+- 084d6bb9: Add inline text editing to node tree
+
+## 0.0.165
+
+### Patch Changes
+
+- 1a9b3f54: Add more rect attributes
+
+## 0.0.164
+
+### Patch Changes
+
+- 27c01a47: Add support for nesting components as children
+
+## 0.0.163
+
+### Patch Changes
+
+- 7ee06fcd: Internal refactoring
+
+## 0.0.162
+
+### Patch Changes
+
+- 0a39cf5f: Don't allow for path selection inside component
+
+## 0.0.161
+
+### Patch Changes
+
+- 57dd87dd: Expose attributes for a component
+
+## 0.0.160
+
+### Patch Changes
+
+- b2c31b23: Make list schema use theme when relevant
+
+## 0.0.159
+
+### Patch Changes
+
+- 03505bbf: Add prop syntax to relevant exports
+
+## 0.0.158
+
+### Patch Changes
+
+- 993b2236: Add basic slot support for strings
+
+## 0.0.157
+
+### Patch Changes
+
+- 971e506a: Improve some default values
+
+## 0.0.156
+
+### Patch Changes
+
+- 2bd60942: Fix component selection
+
+## 0.0.155
+
+### Patch Changes
+
+- 184ff579: Fix responsive theme values
+
+## 0.0.154
+
+### Patch Changes
+
+- e4f12cad: Add initial component support
+
+## 0.0.153
+
+### Patch Changes
+
+- 7ba14dbb: Adds background color to fix bug on node editor
+
+## 0.0.152
+
+### Patch Changes
+
+- 0246cd41: Changes element editor to sticky position
+
+## 0.0.151
+
+### Patch Changes
+
+- 7683e6b8: Fix theme selection for box side
+
+## 0.0.150
+
+### Patch Changes
+
+- 000e4489: Add polyline element
+
+## 0.0.149
+
+### Patch Changes
+
+- 87d117be: Fix skew x/y
+
+## 0.0.148
+
+### Patch Changes
+
+- 5bd603aa: Allow cursor to be overridden in canvas
+- 97d48aee: Fix translate3d
+
+## 0.0.147
+
+### Patch Changes
+
+- 7e8991b8: Only set default canvas styles in canvas mode
+
+## 0.0.146
+
+### Patch Changes
+
+- 888a55fe: Set default to current color
+
+## 0.0.145
+
+### Patch Changes
+
+- 6f28e1db: Add theme support for box side properties
+- 141b70c7: Pass theme to shorthands
+
+## 0.0.144
+
+### Patch Changes
+
+- d2bf7579: Pass theme to codegen
+
+## 0.0.143
+
+### Patch Changes
+
+- 236266eb: Zero index theme values
+
+## 0.0.142
+
+### Patch Changes
+
+- 07cf4070: Fix system colors
+
+## 0.0.141
+
+### Patch Changes
+
+- 1fd871b3: Pass theme along with document for codegen
+
+## 0.0.140
+
+### Patch Changes
+
+- 09588f40: Improve theme integration
+
+## 0.0.139
+
+### Patch Changes
+
+- 20f68b77: Remove unneeded internal function
+- ffb1ef8e: Fix theme handling in HTML editor
+
+## 0.0.138
+
+### Patch Changes
+
+- 6ad62f66: Add some basic SVG functionality
+
+## 0.0.137
+
+### Patch Changes
+
+- 6df72919: Properly hide none schema type, tie in variable fonts
+
+## 0.0.136
+
+### Patch Changes
+
+- af3185f5: Default z index to 1
+
+## 0.0.135
+
+### Patch Changes
+
+- 5bfb117d: Change default length value for height
+
+## 0.0.134
+
+### Patch Changes
+
+- 4790114f: Don't error when the theme path doesn't exist
+- 50b691fd: Adjust height/width default values
+
+## 0.0.133
+
+### Patch Changes
+
+- cbac582a: Don't use old color shape
+
+## 0.0.132
+
+### Patch Changes
+
+- ea271f92: Stringify font family
+
+## 0.0.131
+
+### Patch Changes
+
+- d9d7d449: Add back node copying, make more robust
+
+## 0.0.130
+
+### Patch Changes
+
+- 5d9ad0c1: Misc bug fixes including tuple handling and box sides
+
+## 0.0.129
+
+### Patch Changes
+
+- 46040f61: Remove user select from labels
+
+## 0.0.128
+
+### Patch Changes
+
+- e4b01dea: Hide copy node temporarily
+
+## 0.0.127
+
+### Patch Changes
+
+- 3c1b1a68: Remove default button styles, add tokenizer
+
+## 0.0.126
+
+### Patch Changes
+
+- 3660e1ad: Transform legacy formats, ensure transform happens before CSS export
+
+## 0.0.125
+
+### Patch Changes
+
+- 89c8d7fa: Stringify keywords before validation
+
+## 0.0.124
+
+### Patch Changes
+
+- 69fc6fcb: Accept theme in html editor, pass to style controls
+
+## 0.0.123
+
+### Patch Changes
+
+- c269a1e3: More app like chrome
+
+## 0.0.122
+
+### Patch Changes
+
+- 94f1b85: Add copy/wrap node
+
+## 0.0.121
+
+### Patch Changes
+
+- 4632b1b: Make item display configurable
+
+## 0.0.120
+
+### Patch Changes
+
+- 1588bfd: Make default node an empty div
+- 0273dee: Fix background-size
+
+## 0.0.119
+
+### Patch Changes
+
+- c2a64fb: Fix selection bug on node adding
+- cc6d912: Improve comboboxes
+
+## 0.0.118
+
+### Patch Changes
+
+- 31bdf9b: Clear all styles dropdown
+
+## 0.0.117
+
+### Patch Changes
+
+- e432f72: Changes layers editor
+- 6c83225: Remove fieldset
+
+## 0.0.116
+
+### Patch Changes
+
+- 356d97e: Ensure "add child" is always shown
+
+## 0.0.115
+
+### Patch Changes
+
+- e0ef441: Make nodes in html editor unist friendly
+- 5fe33db: Remove props transform temporarily
+- ad2ed3e: Remove attr default temporarily
+- b894bd0: Improve unstyled html export
+
+## 0.0.114
+
+### Patch Changes
+
+- f7619d5: Fix schema transformer to not destructure raw strings
+- 0587bb0: Format exports
+- db91166: Add React(vanilla/Emotion/Theme UI/Styled JSX) and Vue exports
+
+## 0.0.113
+
+### Patch Changes
+
+- 2dbba5d: fixes lab and lch color picker
+
+## 0.0.112
+
+### Patch Changes
+
+- 67f54e3: fixes selecting values in picker
+
+## 0.0.111
+
+### Patch Changes
+
+- d2b4e14: Fixes color picker mode switching
+
+## 0.0.110
+
+### Patch Changes
+
+- 6df9f13: Make theme more of a first class citizen
+
+## 0.0.109
+
+### Patch Changes
+
+- cf5bfc0: Generative controls
+
+## 0.0.108
+
+### Patch Changes
+
+- 89a9014: Handle undefined values in dimension input
+
+## 0.0.107
+
+### Patch Changes
+
+- 0fa831b: Add tabs for node/tree/export, add copy to clipboarfor exported HTML + CSS
+- 00e15a3: Fix node editing in tabs
+- 1042ffc: Design tweaks to editor
+- 438ad58: Fix navigation alignment
+- 2474219: Force styles editor re-render when selection changes in html editor
+
+## 0.0.106
+
+### Patch Changes
+
+- f9d81c3: Changes label copy
+- 91a1e64: Design tweaks to editor
+
+## 0.0.105
+
+### Patch Changes
+
+- e1b17b3: Improve fuzzy sort by ignoring hypen in property names
+
+## 0.0.104
+
+### Patch Changes
+
+- 0b70d4a: Don't set outline or user select when not in canvas mode
+
+## 0.0.103
+
+### Patch Changes
+
+- 12d442b: Minor internal improvements to inputs
+
+## 0.0.102
+
+### Patch Changes
+
+- 760266c: Removes modes from color groups
+
+## 0.0.101
+
+### Patch Changes
+
+- eb84f84: Allow manually typed decimals in number input
+
+## 0.0.100
+
+### Patch Changes
+
+- 77a9d7c: Fixes colorpicker for safari
+
+## 0.0.99
+
+### Patch Changes
+
+- c96be76: Fix bug with default values
+
+## 0.0.98
+
+### Patch Changes
+
+- 21ec5af: Remove unneeded canvas wrap
+- b943e01: kebab property names
+- b0847c4: Fix href handling in canvas
+
+## 0.0.97
+
+### Patch Changes
+
+- c8f38a8: Tweak styles
+- 60189e3: Fix combobox, convert all inputs to new schema
+- ce61c0c: Clean up visuals
+
+## 0.0.96
+
+### Patch Changes
+
+- a679ce7: Implement dynamic fieldsets for pseudos
+
+## 0.0.95
+
+### Patch Changes
+
+- 28f0e9d: Fix combobox init
+
+## 0.0.94
+
+### Patch Changes
+
+- 0b91ab3: Begin generating controls from schema
+
+## 0.0.93
+
+### Patch Changes
+
+- 665fe5e: Fixes importing theme and theme value ranges
+
+## 0.0.92
+
+### Patch Changes
+
+- 159bfb1: Bump react and @types/react
+- 167af9a: Bump react-feather from 2.0.9 to 2.0.10
+
+## 0.0.91
+
+### Patch Changes
+
+- 1b7b5b4: Improve stringification to handle edge cases
+- 5fad1da: Improve dimensional controls for space and border
+- 76a9a8b: Fix palette swatches/gradient stops
+- 32b0449: Export a schema version
+
## 0.0.90
### Patch Changes
diff --git a/packages/gui/jest.config.cjs b/packages/gui/jest.config.cjs
new file mode 100644
index 00000000..670d7889
--- /dev/null
+++ b/packages/gui/jest.config.cjs
@@ -0,0 +1,13 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+ preset: 'ts-jest/presets/default-esm',
+ testEnvironment: 'node',
+ globals: {
+ 'ts-jest': {
+ useESM: true,
+ },
+ },
+ moduleNameMapper: {
+ '^(\\.{1,2}/.*)\\.js$': '$1',
+ },
+}
diff --git a/packages/gui/package.json b/packages/gui/package.json
index 211033d8..97ae23a3 100644
--- a/packages/gui/package.json
+++ b/packages/gui/package.json
@@ -1,12 +1,14 @@
{
"name": "@compai/css-gui",
- "version": "0.0.90",
+ "version": "0.0.247",
"type": "module",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"license": "MIT",
"scripts": {
"build": "tsup",
+ "test": "jest",
+ "typecheck": "tsc --noEmit",
"dev": "tsup --watch",
"clean": "rm -rf .turbo node_modules dist"
},
@@ -25,13 +27,16 @@
"react-dom": ">= 18"
},
"devDependencies": {
+ "@types/jest": "^28.1.3",
"@types/lodash-es": "^4.17.6",
- "@types/react": "18.0.5",
+ "@types/react": "18.0.10",
"@types/react-dom": "^18.0.1",
"@types/uuid": "^8.3.4",
"config": "*",
- "react": "18.0.0",
+ "jest": "^28.1.1",
+ "react": "18.1.0",
"react-dom": "18.0.0",
+ "ts-jest": "^28.0.5",
"tsconfig": "*",
"typescript": "^4.6.4"
},
@@ -40,25 +45,38 @@
"@mdx-js/react": "^1.6.22",
"@radix-ui/react-accordion": "^0.1.6",
"@radix-ui/react-collapsible": "^0.1.6",
+ "@radix-ui/react-dropdown-menu": "^2.0.3",
"@radix-ui/react-label": "^0.1.5",
- "@radix-ui/react-popover": "^0.1.6",
+ "@radix-ui/react-popover": "^1.0.0",
"@radix-ui/react-select": "^0.1.1",
- "@radix-ui/react-slider": "^0.1.4",
- "@radix-ui/react-switch": "^0.1.5",
+ "@radix-ui/react-slider": "^1.0.0",
+ "@radix-ui/react-switch": "^1.0.0",
"@radix-ui/react-tabs": "^0.1.5",
- "@radix-ui/react-toggle": "^0.1.4",
+ "@radix-ui/react-toggle": "^1.0.1",
"@radix-ui/react-tooltip": "^0.1.7",
+ "@use-gesture/react": "^10.2.17",
+ "copy-to-clipboard": "^3.3.2",
"csstype": "^3.0.11",
"culori": "^2.0.3",
"downshift": "^6.1.7",
+ "escape-html": "^1.0.3",
+ "fuzzysort": "^2.0.1",
"get-contrast": "^3.0.0",
+ "hast-to-hyperscript": "^10.0.1",
+ "hast-util-to-html": "^8.0.3",
+ "hast-util-to-mdast": "^8.3.1",
"immer": "^9.0.12",
"lodash-es": "^4.17.21",
- "react-feather": "^2.0.9",
- "react-use-gesture": "^9.1.3",
+ "mdast-util-from-markdown": "^1.2.0",
+ "mdast-util-to-hast": "^12.1.2",
+ "mdast-util-to-markdown": "^1.3.0",
+ "property-information": "^6.1.1",
+ "react-feather": "^2.0.10",
"rehype-parse": "^8.0.4",
"rehype-sanitize": "^5.0.1",
- "theme-ui": "^0.14.5",
+ "rehype-stringify": "^9.0.3",
+ "remark-parse": "^10.0.1",
+ "theme-ui": "^0.14.7",
"unified": "^10.1.2",
"unist-util-remove": "^3.1.0",
"unist-util-visit": "^4.1.0",
diff --git a/packages/gui/src/components/AddFieldset.tsx b/packages/gui/src/components/AddFieldset.tsx
new file mode 100644
index 00000000..97878923
--- /dev/null
+++ b/packages/gui/src/components/AddFieldset.tsx
@@ -0,0 +1,60 @@
+import fuzzysort from 'fuzzysort'
+import { elements } from '../data/elements'
+import { pseudoClasses } from '../data/pseudo-classes'
+import { pseudoElements } from '../data/pseudo-elements'
+import { Styles } from '../types/css'
+import { Combobox, Label } from './primitives'
+import { useEditor } from './providers/EditorContext'
+import { KeyArg } from './providers/types'
+import { joinPath } from './providers/util'
+
+interface Props {
+ field?: KeyArg
+ styles: Styles
+ label?: string
+}
+export const AddFieldsetControl = ({
+ field,
+ styles,
+ label = 'Add pseudo element or class',
+}: Props) => {
+ const { setField } = useEditor()
+ const allItems = [...pseudoClasses, ...pseudoElements, ...elements]
+
+ const handleFilterItems = (input: string) => {
+ if (input === '') {
+ return allItems
+ }
+
+ const styleItems = Object.keys(styles)
+ return fuzzysort
+ .go(input.replace(/-/g, ''), allItems)
+ .map((res) => res.target)
+ .filter((item) => !styleItems.includes(item))
+ }
+
+ const handleAddFieldset = (propertyName: string) => {
+ const fullField = field ? joinPath(field, propertyName) : propertyName
+ setField(fullField, {})
+ }
+
+ return (
+
+
+
+
+ )
+}
diff --git a/packages/gui/src/components/AddProperty.tsx b/packages/gui/src/components/AddProperty.tsx
index 7285066b..5ee811b5 100644
--- a/packages/gui/src/components/AddProperty.tsx
+++ b/packages/gui/src/components/AddProperty.tsx
@@ -1,13 +1,13 @@
-import { useCombobox } from 'downshift'
-import { useEffect, useId, useRef, useState } from 'react'
import { properties as propertyList } from '../data/properties'
-import { getDefaultValue } from '../lib/defaults'
+import { getDefaultValue } from './Editor/util'
import { Styles } from '../types/css'
-import { Label } from './primitives'
+import { Combobox, Label } from './primitives'
import { useDynamicControls } from './providers/DynamicPropertiesContext'
import { useEditor } from './providers/EditorContext'
import { KeyArg } from './providers/types'
import { joinPath } from './providers/util'
+import fuzzysort from 'fuzzysort'
+import { kebabCase } from 'lodash-es'
interface Props {
field?: KeyArg
@@ -21,53 +21,24 @@ export const AddPropertyControl = ({
}: Props) => {
const { setField } = useEditor()
const { addDynamicProperty } = useDynamicControls()
- const id = useId()
- const inputRef = useRef(null)
- // @ts-ignore
+ //@ts-ignore
const allProperties: string[] = Object.entries(propertyList)
.map(([name, data]) => {
- return data.input !== 'none' ? name : null
+ return data.input ? name : null
})
.filter(Boolean)
- const [inputItems, setInputItems] = useState([])
- const [filterValue, setFilterValue] = useState('')
-
- useEffect(() => {
- handleFilterItems(filterValue)
- }, [])
-
- const {
- isOpen,
- toggleMenu,
- getMenuProps,
- getInputProps,
- getItemProps,
- getComboboxProps,
- highlightedIndex,
- } = useCombobox({
- id,
- items: inputItems,
- selectedItem: filterValue,
- onInputValueChange: ({ inputValue }) => {
- handleFilterItems(inputValue!)
- },
- onSelectedItemChange: ({ selectedItem }) => {
- handleAddProperty(selectedItem ?? '')
- },
- })
-
const handleFilterItems = (input: string) => {
+ if (input === '') {
+ return allProperties
+ }
+
const styleItems = Object.keys(styles)
- const filteredItems = allProperties
- .filter((item) => {
- if (item.toLowerCase().startsWith(input.toLowerCase() || '')) {
- return !styleItems.includes(item)
- }
- })
- .sort()
- setInputItems(filteredItems)
+ return fuzzysort
+ .go(input.replace(/-/g, ''), allProperties)
+ .map((res) => res.target)
+ .filter((item) => !styleItems.includes(item))
}
const handleAddProperty = (propertyName: string) => {
@@ -77,130 +48,20 @@ export const AddPropertyControl = ({
if (addDynamicProperty && !field) {
addDynamicProperty(propertyName)
}
-
- setFilterValue('')
}
return (
-
-